mirror of
https://github.com/penpot/penpot.git
synced 2025-01-08 07:50:43 -05:00
Show checkmark for applied tokens
This commit is contained in:
parent
65942ef63b
commit
580076355b
2 changed files with 27 additions and 8 deletions
|
@ -64,15 +64,17 @@
|
||||||
:token-type-props updated-token-type-props
|
:token-type-props updated-token-type-props
|
||||||
:selected-shapes selected-shapes})))
|
:selected-shapes selected-shapes})))
|
||||||
|
|
||||||
|
(defn additional-actions [{:keys [token-id token-type selected-shapes] :as context-data}]
|
||||||
(defn additional-actions [{:keys [token-type] :as context-data}]
|
|
||||||
(let [attributes->actions (fn [update-fn coll]
|
(let [attributes->actions (fn [update-fn coll]
|
||||||
(for [{:keys [attributes] :as item} coll]
|
(for [{:keys [attributes] :as item} coll]
|
||||||
(assoc item :action #(update-fn context-data attributes))))]
|
(let [selected? (wtc/tokens-applied? {:id token-id} selected-shapes attributes)]
|
||||||
|
(assoc item
|
||||||
|
:action #(update-fn context-data attributes)
|
||||||
|
:selected? selected?))))]
|
||||||
(case token-type
|
(case token-type
|
||||||
:border-radius (attributes->actions
|
:border-radius (attributes->actions
|
||||||
apply-border-radius-token
|
apply-border-radius-token
|
||||||
[{:title "All" :attributes #{:all}}
|
[{:title "All" :attributes #{:r1 :r2 :r3 :r4}}
|
||||||
{:title "Top Left" :attributes #{:r1}}
|
{:title "Top Left" :attributes #{:r1}}
|
||||||
{:title "Top Right" :attributes #{:r2}}
|
{:title "Top Right" :attributes #{:r2}}
|
||||||
{:title "Bottom Right" :attributes #{:r3}}
|
{:title "Bottom Right" :attributes #{:r3}}
|
||||||
|
@ -111,8 +113,14 @@
|
||||||
(mf/defc token-pill-context-menu
|
(mf/defc token-pill-context-menu
|
||||||
[context-data]
|
[context-data]
|
||||||
(let [menu-entries (generate-menu-entries context-data)]
|
(let [menu-entries (generate-menu-entries context-data)]
|
||||||
(for [[index entry] (d/enumerate menu-entries)]
|
(for [[index {:keys [title action selected?]}] (d/enumerate menu-entries)]
|
||||||
[:& menu-entry {:title (:title entry) :on-click (:action entry) :key index}])))
|
[:& menu-entry {:key index
|
||||||
|
:title title
|
||||||
|
:on-click action
|
||||||
|
;; TODO: Allow selected items wihtout an icon for the context menu
|
||||||
|
:icon (mf/html [:div {:class (stl/css-case :empty-icon true
|
||||||
|
:hidden-icon (not selected?))}])
|
||||||
|
:selected? selected?}])))
|
||||||
|
|
||||||
(mf/defc token-context-menu
|
(mf/defc token-context-menu
|
||||||
[]
|
[]
|
||||||
|
|
|
@ -24,8 +24,19 @@
|
||||||
background-color: var(--menu-background-color);
|
background-color: var(--menu-background-color);
|
||||||
max-height: 100vh;
|
max-height: 100vh;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
||||||
|
// TODO: Fixes missing styles from parent context menu
|
||||||
|
li {
|
||||||
|
@include bodySmallTypography;
|
||||||
|
color: var(--menu-foreground-color);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.token-context-submenu {
|
// TODO: Allow selected items wihtout an icon for the context menu
|
||||||
position: absolute;
|
.empty-icon {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
.hidden-icon {
|
||||||
|
width: 11px;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue