johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-11 22:14:05 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

✨ Update code to use design system icon (#7145)

Browse Source
This commit is contained in:
Xaviju
2025-08-22 14:27:11 +02:00
committed by GitHub
parent c0c2c9489c
commit ee86a3943d
12 changed files with 166 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/playwright/ui/specs/variants.spec.js
View File

@@ -42,19 +42,19 @@ const findVariant = async (workspacePage, num_variant) => {
const container = await workspacePage.layers
.getByTestId("layer-row")
.filter({ has: workspacePage.page.getByText("Rectangle") })
.filter({ has: workspacePage.page.locator(".icon-component") })
.filter({ has: workspacePage.page.getByTestId("icon-component") })
.nth(num_variant);
const variant1 = await workspacePage.layers
.getByTestId("layer-row")
.filter({ has: workspacePage.page.getByText("Value 1") })
.filter({ has: workspacePage.page.locator(".icon-variant") })
.filter({ has: workspacePage.page.getByTestId("icon-variant") })
.nth(num_variant);
const variant2 = await workspacePage.layers
.getByTestId("layer-row")
.filter({ has: workspacePage.page.getByText("Value 2") })
.filter({ has: workspacePage.page.locator(".icon-variant") })
.filter({ has: workspacePage.page.getByTestId("icon-variant") })
.nth(num_variant);
return {
@@ -99,7 +99,7 @@ test("User creates a variant", async ({ page }) => {
const variants = await workspacePage.layers
.getByTestId("layer-row")
.filter({ has: workspacePage.page.locator(".icon-variant") })
.filter({ has: workspacePage.page.getByTestId("icon-variant") })
.all();
// There are exactly two variants
@@ -241,7 +241,7 @@ test("User copy paste a variant", async ({ page }) => {
const copy = await workspacePage.layers
.getByTestId("layer-row")
.filter({ has: workspacePage.page.getByText("Rectangle") })
.filter({ has: workspacePage.page.locator(".icon-component-copy") });
.filter({ has: workspacePage.page.getByTestId("icon-component-copy") });
//The copy exists and is visible
await expect(copy).toBeVisible();
@@ -266,7 +266,7 @@ test("User cut paste a variant outside the container", async ({ page }) => {
const component = await workspacePage.layers
.getByTestId("layer-row")
.filter({ has: workspacePage.page.getByText("Rectangle / Value 1") })
.filter({ has: workspacePage.page.locator(".icon-component") });
.filter({ has: workspacePage.page.getByTestId("icon-component") });
//The component exists and is visible
await expect(component).toBeVisible();
@@ -284,7 +284,7 @@ test("User drag and drop a variant outside the container", async ({ page }) => {
const component = await workspacePage.layers
.getByTestId("layer-row")
.filter({ has: workspacePage.page.getByText("Rectangle / Value 1") })
.filter({ has: workspacePage.page.locator(".icon-component") });
.filter({ has: workspacePage.page.getByTestId("icon-component") });
//The component exists and is visible
await expect(component).toBeVisible();
@@ -312,7 +312,7 @@ test("User cut paste a component inside a variant", async ({ page }) => {
const variant3 = await workspacePage.layers
.getByTestId("layer-row")
.filter({ has: workspacePage.page.getByText("Ellipse") })
.filter({ has: workspacePage.page.locator(".icon-variant") })
.filter({ has: workspacePage.page.getByTestId("icon-variant") })
.first();
//The new variant exists and is visible
@@ -351,7 +351,7 @@ test("User cut paste a component with path inside a variant", async ({
const variant3 = await workspacePage.layers
.getByTestId("layer-row")
.filter({ has: workspacePage.page.getByText("button, hover") })
.filter({ has: workspacePage.page.locator(".icon-variant") })
.filter({ has: workspacePage.page.getByTestId("icon-variant") })
.first();
//The new variant exists and is visible
@@ -386,7 +386,7 @@ test("User drag and drop a component with path inside a variant", async ({
const variant3 = await workspacePage.layers
.getByTestId("layer-row")
.filter({ has: workspacePage.page.getByText("button, hover") })
.filter({ has: workspacePage.page.locator(".icon-variant") })
.filter({ has: workspacePage.page.getByTestId("icon-variant") })
.first();
//The new variant exists and is visible
@@ -420,7 +420,7 @@ test("User cut paste a variant into another container", async ({ page }) => {
const variant3 = await workspacePage.layers
.getByTestId("layer-row")
.filter({ has: workspacePage.page.getByText("Value 1, rectangle") })
.filter({ has: workspacePage.page.locator(".icon-variant") })
.filter({ has: workspacePage.page.getByTestId("icon-variant") })
.first();
//The new variant exists and is visible

70
frontend/src/app/main/ui/components/shape_icon.cljs
View File

@@ -1,70 +0,0 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.components.shape-icon
(:require
[app.common.types.component :as ctk]
[app.common.types.shape :as cts]
[app.common.types.shape.layout :as ctl]
[app.main.ui.icons :as i]
[rumext.v2 :as mf]))
(mf/defc element-icon
{::mf/wrap-props false}
[{:keys [shape main-instance?]}]
(if (ctk/instance-head? shape)
(if main-instance?
(if (ctk/is-variant? shape)
i/variant
i/component)
i/component-copy)
(case (:type shape)
:frame (cond
(ctk/is-variant-container? shape)
i/component
(and (ctl/flex-layout? shape) (ctl/col? shape))
i/flex-horizontal
(and (ctl/flex-layout? shape) (ctl/row? shape))
i/flex-vertical
(ctl/grid-layout? shape)
i/flex-grid
:else
i/board)
;; TODO -> THUMBNAIL ICON
:image i/img
:line (if (cts/has-images? shape) i/img i/path)
:circle (if (cts/has-images? shape) i/img i/elipse)
:path (if (cts/has-images? shape) i/img i/path)
:rect (if (cts/has-images? shape) i/img i/rectangle)
:text i/text
:group (if (:masked-group shape)
i/mask
i/group)
:bool (case (:bool-type shape)
:difference i/boolean-difference
:exclude i/boolean-exclude
:intersection i/boolean-intersection
#_:default i/boolean-union)
:svg-raw i/img
nil)))
(mf/defc element-icon-by-type
[{:keys [type main-instance?] :as props}]
(if main-instance?
i/component
(case type
:frame i/board
:image i/img
:shape i/path
:text i/text
:mask i/mask
:group i/group
nil)))

1
frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
View File

@@ -285,6 +285,7 @@
(def ^:icon-id tree "tree")
(def ^:icon-id unlock "unlock")
(def ^:icon-id user "user")
(def ^:icon-id variant "variant")
(def ^:icon-id vertical-align-items-center "vertical-align-items-center")
(def ^:icon-id vertical-align-items-end "vertical-align-items-end")
(def ^:icon-id vertical-align-items-start "vertical-align-items-start")

5
frontend/src/app/main/ui/inspect/attributes/stroke.cljs
View File

@@ -41,9 +41,8 @@
(for [property properties]
(let [property-name (cmm/get-css-rule-humanized property)
property-value (css/get-css-value objects stroke property)]
[:div {:class (stl/css :stroke-row)}
[:div {:class (stl/css :global/attr-label)
:key (str "stroke-" (:id shape) "-" property)}
[:div {:class (stl/css :stroke-row) :key (str "stroke-" (:id shape) "-" property)}
[:div {:class (stl/css :global/attr-label)}
property-name]
[:div {:class (stl/css :global/attr-value)}

17
frontend/src/app/main/ui/inspect/right_sidebar.cljs
View File

@@ -11,7 +11,7 @@
[app.main.data.event :as ev]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.shape-icon :as sir]
[app.main.ui.ds.foundations.assets.icon :refer [icon*]]
[app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]]
[app.main.ui.icons :as i]
[app.main.ui.inspect.attributes :refer [attributes]]
@@ -19,6 +19,7 @@
[app.main.ui.inspect.selection-feedback :refer [resolve-shapes]]
[app.util.dom :as dom]
[app.util.i18n :refer [tr]]
[app.util.shape-icon :as usi]
[potok.v2.core :as ptk]
[rumext.v2 :as mf]))
@@ -100,14 +101,16 @@
:viewer-code (= from :viewer))}
(if (seq shapes)
[:div {:class (stl/css :tool-windows)}
[:div {:class (stl/css-case :shape-row true :shape-row-subtitle (some? subtitle))}
[:div {:class (stl/css-case :shape-info true :shape-info-subtitle (some? subtitle))}
(if (> (count shapes) 1)
[:*
[:span {:class (stl/css :layers-icon)} i/layers]
[:div {:class (stl/css :layers-icon)}
[:> icon* {:icon-id "layers" :size "s"}]]
[:span {:class (stl/css :layer-title)} (tr "inspect.tabs.code.selected.multiple" (count shapes))]]
[:*
[:span {:class (stl/css :shape-icon)}
[:& sir/element-icon {:shape first-shape :main-instance? main-instance?}]]
[:div {:class (stl/css :shape-icon)}
;; Use the shape icon utility to get the correct icon for the first shape
[:> icon* {:icon-id (usi/get-shape-icon first-shape) :size "s"}]]
;; Execution time translation strings:
;; (tr "inspect.tabs.code.selected.circle")
;; (tr "inspect.tabs.code.selected.component")
@@ -120,12 +123,14 @@
;; (tr "inspect.tabs.code.selected.rect")
;; (tr "inspect.tabs.code.selected.svg-raw")
;; (tr "inspect.tabs.code.selected.text")
[:div
(if (some? subtitle)
[:*
[:div {:class (stl/css :layer-title :layer-title-with-subtitle)} (:name first-shape)]
[:div {:class (stl/css :layer-subtitle)} subtitle]]
[:div {:class (stl/css :layer-title)} (:name first-shape)])]])]
[:div
[:div {:class (stl/css :layer-title)} (:name first-shape)]])]])]
[:div {:class (stl/css :inspect-content)}

9
frontend/src/app/main/ui/inspect/right_sidebar.scss
View File

@@ -33,7 +33,7 @@
padding-left: var(--sp-m);
}
.shape-row {
.shape-info {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: $s-8;
@@ -41,7 +41,7 @@
height: $s-32;
}
.shape-row-subtitle {
.shape-info-subtitle {
height: fit-content;
align-items: flex-start;
}
@@ -50,11 +50,6 @@
.shape-icon {
@include flexCenter;
height: $s-32;
svg {
@extend .button-icon-small;
stroke: var(--icon-foreground);
}
}
.layer-title {

14
frontend/src/app/main/ui/workspace/context_menu.cljs
View File

@@ -31,12 +31,12 @@
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.components.shape-icon :as sic]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.main.ui.ds.foundations.assets.icon :refer [icon*]]
[app.main.ui.workspace.sidebar.assets.common :as cmm]
[app.util.dom :as dom]
[app.util.i18n :refer [tr] :as i18n]
[app.util.shape-icon :as usi]
[app.util.timers :as timers]
[app.util.webapi :as wapi]
[beicon.v2.core :as rx]
@@ -110,9 +110,10 @@
[:span
{:class (stl/css :icon-wrapper)}
(if is-selected [:span {:class (stl/css :selected-icon)}
i/tick]
[:> icon* {:icon-id "tick" :size "s"}]]
[:span {:class (stl/css :selected-icon)}])
[:span {:class (stl/css :shape-icon)} icon]]
[:span {:class (stl/css :shape-icon)}
[:> icon* {:icon-id icon :size "s"}]]]
[:span {:class (stl/css :title)} title]]
[:li {:class (stl/css :context-menu-item)
:disabled disabled
@@ -129,7 +130,8 @@
:class (stl/css :shortcut-key)} sc])])
(when (> (count children) 1)
[:span {:class (stl/css :submenu-icon)} i/arrow])
[:span {:class (stl/css :submenu-icon)}
[:> icon* {:icon-id "arrow" :size "s"}]])
(when (> (count children) 1)
[:ul {:class (stl/css :workspace-context-submenu)
@@ -266,7 +268,7 @@
:on-pointer-enter (on-pointer-enter (:id object))
:on-pointer-leave (on-pointer-leave (:id object))
:on-unmount (on-unmount (:id object))
:icon (sic/element-icon {:shape object})}])])
:icon (usi/get-shape-icon object)}])])
[:> menu-entry* {:title (tr "workspace.shape.menu.forward")
:shortcut (sc/get-tooltip :bring-forward)
:on-click do-bring-forward}]

16
frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs
View File

@@ -20,14 +20,15 @@
[app.main.features :as features]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.shape-icon :as sic]
[app.main.ui.context :as ctx]
[app.main.ui.ds.foundations.assets.icon :refer [icon*]]
[app.main.ui.hooks :as hooks]
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.layer-name :refer [layer-name*]]
[app.util.dom :as dom]
[app.util.i18n :refer [tr]]
[app.util.keyboard :as kbd]
[app.util.shape-icon :as usi]
[app.util.timers :as ts]
[beicon.v2.core :as rx]
[okulary.core :as l]
@@ -54,7 +55,6 @@
parent-board? (and (cfh/frame-shape? item)
(= uuid/zero (:parent-id item)))
absolute? (ctl/item-absolute? item)
main-instance? (:main-instance item)
variants? (features/use-feature "variants/v1")
is-variant? (when variants? (ctk/is-variant? item))
@@ -65,7 +65,8 @@
data (deref refs/workspace-data)
component (ctkl/get-component data (:component-id item))
variant-properties (:variant-properties component)]
variant-properties (:variant-properties component)
icon-shape (usi/get-shape-icon item)]
[:*
[:div {:id id
:ref dref
@@ -113,10 +114,7 @@
:on-double-click on-zoom-to-selected}
(when absolute?
[:div {:class (stl/css :absolute)}])
[:& sic/element-icon
{:shape item
:main-instance? main-instance?}]]]
[:> icon* {:icon-id icon-shape :size "s" :data-testid (str "icon-" icon-shape)}]]]
[:div {:class (stl/css :button-content)}
(when (not ^boolean filtered?)
@@ -125,9 +123,7 @@
:on-double-click on-zoom-to-selected}
(when ^boolean absolute?
[:div {:class (stl/css :absolute)}])
[:& sic/element-icon
{:shape item
:main-instance? main-instance?}]]])
[:> icon* {:icon-id icon-shape :size "s" :data-testid (str "icon-" icon-shape)}]]])
[:> layer-name* {:ref name-ref
:shape-id id

10
frontend/src/app/main/ui/workspace/sidebar/layer_item.scss
View File

@@ -117,16 +117,12 @@
height: 100%;
width: $s-24;
padding-inline-start: $s-4;
svg {
@extend .button-icon-small;
stroke: var(--icon-foreground);
color: var(--icon-foreground);
.layer-row.selected & {
stroke: var(--layer-row-foreground-color-selected);
color: var(--layer-row-foreground-color-selected);
}
.layer-row.type-comp & {
stroke: var(--layer-row-component-foreground-color);
}
color: var(--layer-row-component-foreground-color);
}
.inverse & {
transform: rotate(-90deg);

65
frontend/src/app/main/ui/workspace/sidebar/layers.cljs
View File

@@ -16,9 +16,9 @@
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.search-bar :refer [search-bar]]
[app.main.ui.components.shape-icon :as sic]
[app.main.ui.components.title-bar :refer [title-bar*]]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.ds.foundations.assets.icon :refer [icon*]]
[app.main.ui.hooks :as hooks]
[app.main.ui.icons :as i]
[app.main.ui.notifications.badge :refer [badge-notification]]
@@ -28,11 +28,13 @@
[app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd]
[app.util.rxops :refer [throttle-fn]]
[app.util.shape-icon :as usi]
[beicon.v2.core :as rx]
[cuerdas.core :as str]
[goog.events :as events]
[rumext.v2 :as mf])
(:import goog.events.EventType))
(:import
goog.events.EventType))
;; This components is a piece for sharding equality check between top
;; level frames and try to avoid rerender frames that are does not
@@ -295,7 +297,7 @@
:filter-button true
:opened show-menu?
:active active?)}
i/filter-icon]]
[:> icon* {:icon-id "filter"}]]]
[:> icon-button* {:variant "ghost"
:aria-label (tr "labels.close")
@@ -305,6 +307,7 @@
[:div {:class (stl/css :active-filters)}
(for [fkey current-filters]
(let [fname (d/name fkey)
name (case fkey
:frame (tr "workspace.sidebar.layers.frames")
:group (tr "workspace.sidebar.layers.groups")
@@ -313,21 +316,17 @@
:text (tr "workspace.sidebar.layers.texts")
:image (tr "workspace.sidebar.layers.images")
:shape (tr "workspace.sidebar.layers.shapes")
(tr fkey))]
(tr fkey))
filter-icon (usi/get-shape-icon-by-type fkey)]
[:button {:class (stl/css :layer-filter)
:key fname
:data-filter fname
:on-click remove-filter}
[:span {:class (stl/css :layer-filter-icon)}
[:& sic/element-icon-by-type
{:type fkey
:main-instance? (= fkey :component)}]]
[:> icon* {:icon-id filter-icon :size "s" :class (stl/css :layer-filter-icon)}]
[:span {:class (stl/css :layer-filter-name)}
name]
[:span {:class (stl/css :layer-filter-close)}
i/close-small]]))]
[:> icon* {:icon-id "close-small" :class (stl/css :layer-filter-close)}]]))]
(when ^boolean show-menu?
[:ul {:class (stl/css :filters-container)}
@@ -336,98 +335,84 @@
:data-filter "frame"
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)}
i/board]
[:> icon* {:icon-id "board" :size "s" :class (stl/css :filter-menu-item-icon)}]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.frames")]]
(when (contains? current-filters :frame)
[:span {:class (stl/css :filter-menu-item-tick)}
i/tick])]
[:> icon* {:icon-id "tick" :size "s" :class (stl/css :filter-menu-item-tick)}])]
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :group))
:data-filter "group"
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)}
i/group]
[:> icon* {:icon-id "group" :size "s" :class (stl/css :filter-menu-item-icon)}]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.groups")]]
(when (contains? current-filters :group)
[:span {:class (stl/css :filter-menu-item-tick)}
i/tick])]
[:> icon* {:icon-id "tick" :size "s" :class (stl/css :filter-menu-item-tick)}])]
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :mask))
:data-filter "mask"
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)}
i/mask]
[:> icon* {:icon-id "mask" :size "s" :class (stl/css :filter-menu-item-icon)}]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.masks")]]
(when (contains? current-filters :mask)
[:span {:class (stl/css :filter-menu-item-tick)}
i/tick])]
[:> icon* {:icon-id "tick" :size "s" :class (stl/css :filter-menu-item-tick)}])]
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :component))
:data-filter "component"
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)}
i/component]
[:> icon* {:icon-id "component" :size "s" :class (stl/css :filter-menu-item-icon)}]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.components")]]
(when (contains? current-filters :component)
[:span {:class (stl/css :filter-menu-item-tick)}
i/tick])]
[:> icon* {:icon-id "tick" :size "s" :class (stl/css :filter-menu-item-tick)}])]
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :text))
:data-filter "text"
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)}
i/text]
[:> icon* {:icon-id "text" :size "s" :class (stl/css :filter-menu-item-icon)}]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.texts")]]
(when (contains? current-filters :text)
[:span {:class (stl/css :filter-menu-item-tick)}
i/tick])]
[:> icon* {:icon-id "tick" :size "s" :class (stl/css :filter-menu-item-tick)}])]
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :image))
:data-filter "image"
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)}
i/img]
[:> icon* {:icon-id "img" :size "s" :class (stl/css :filter-menu-item-icon)}]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.images")]]
(when (contains? current-filters :image)
[:span {:class (stl/css :filter-menu-item-tick)}
i/tick])]
[:> icon* {:icon-id "tick" :size "s" :class (stl/css :filter-menu-item-tick)}])]
[:li {:class (stl/css-case :filter-menu-item true
:selected (contains? current-filters :shape))
:data-filter "shape"
:on-click add-filter}
[:div {:class (stl/css :filter-menu-item-name-wrapper)}
[:span {:class (stl/css :filter-menu-item-icon)}
i/path]
[:> icon* {:icon-id "path" :size "s" :class (stl/css :filter-menu-item-icon)}]
[:span {:class (stl/css :filter-menu-item-name)}
(tr "workspace.sidebar.layers.shapes")]]
(when (contains? current-filters :shape)
[:span {:class (stl/css :filter-menu-item-tick)}
i/tick])]])]
[:> icon* {:icon-id "tick" :size "s" :class (stl/css :filter-menu-item-tick)}])]])]
[:div {:class (stl/css :tool-window-bar)}
[:> title-bar* {:collapsable false
@@ -519,7 +504,7 @@
[:button {:class (stl/css :focus-title)
:on-click toogle-focus-mode}
[:span {:class (stl/css :back-button)}
i/arrow]
[:> icon* {:icon-id "arrow"}]]
[:div {:class (stl/css :focus-name)}
(or title (tr "workspace.sidebar.layers"))]

33
frontend/src/app/main/ui/workspace/sidebar/layers.scss
View File

@@ -127,12 +127,7 @@
.layer-filter-icon,
.layer-filter-close {
@extend .button-icon-small;
stroke: var(--pill-foreground-color);
svg {
height: $s-12;
width: $s-12;
}
color: var(--pill-foreground-color);
}
.layer-filter-name {
@@ -164,10 +159,7 @@
align-items: center;
gap: $s-8;
.filter-menu-item-icon {
svg {
@extend .button-icon-small;
stroke: var(--menu-foreground-color);
}
color: var(--menu-foreground-color);
}
.filter-menu-item-name {
padding-top: $s-2;
@@ -175,28 +167,21 @@
}
}
.filter-menu-item-tick {
svg {
@extend .button-icon-small;
stroke: var(--menu-foreground-color);
}
color: var(--menu-foreground-color);
}
&.selected {
background-color: var(--menu-background-color-selected);
.filter-menu-item-name-wrapper {
.filter-menu-item-icon {
svg {
stroke: var(--menu-foreground-color);
}
color: var(--menu-foreground-color);
}
.filter-menu-item-name {
color: var(--menu-foreground-color);
}
}
.filter-menu-item-tick {
svg {
stroke: var(--menu-foreground-color);
}
color: var(--menu-foreground-color);
}
}
@@ -204,18 +189,14 @@
background-color: var(--menu-background-color-hover);
.filter-menu-item-name-wrapper {
.filter-menu-item-icon {
svg {
stroke: var(--menu-foreground-color-hover);
}
color: var(--menu-foreground-color-hover);
}
.filter-menu-item-name {
color: var(--menu-foreground-color-hover);
}
}
.filter-menu-item-tick {
svg {
stroke: var(--menu-foreground-color-hover);
}
color: var(--menu-foreground-color-hover);
}
}
}

87
frontend/src/app/util/shape_icon.cljs Normal file
View File

@@ -0,0 +1,87 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) KALEIDOS INC
(ns app.util.shape-icon
(:require
[app.common.data.macros :as dm]
[app.common.types.component :as ctk]
[app.common.types.shape :as cts]
[app.common.types.shape.layout :as ctl]))
(defn- get-bool-icon
"Returns the icon for a boolean shape"
[shape]
(case (:bool-type shape)
:difference "boolean-difference"
:exclude "boolean-exclude"
:intersection "boolean-intersection"
nil))
(defn- get-frame-icon
"Returns the icon for a frame shape"
[shape]
(cond
(ctk/is-variant-container? shape)
"component"
(and (ctl/flex-layout? shape) (ctl/col? shape))
"flex-horizontal"
(and (ctl/flex-layout? shape) (ctl/row? shape))
"flex-vertical"
(ctl/grid-layout? shape)
"flex-grid"
:else
"board"))
(defn get-shape-icon
"Returns the icon for a shape based on its type and properties"
[shape]
(if (ctk/instance-head? shape)
(if (ctk/main-instance? shape)
(if (ctk/is-variant? shape)
"variant"
"component")
"component-copy")
(case (dm/get-prop shape :type)
:frame (get-frame-icon shape)
:image "img"
:line (if (cts/has-images? shape)
"img"
"rectangle")
:circle (if (cts/has-images? shape)
"img"
"elipse")
:path (if (cts/has-images? shape)
"img"
"rectangle")
:rect (if (cts/has-images? shape)
"img"
"rectangle")
:text "text"
:group (if (:masked-group shape)
"mask"
"group")
:bool (get-bool-icon shape)
:svg-raw "img"
nil)))
(defn get-shape-icon-by-type
"Returns the icon for a shape based on its type"
[type]
(if (= type :component)
"component"
(case type
:frame "board"
:image "img"
:shape "path"
:text "text"
:mask "mask"
:group "group"
nil)))