Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-22 14:39:45 -05:00
Code Issues Activity

Merge pull request #158 from tokens-studio/142-when-a-token-is-applied-on-a-shape-in-the-context-menu-there-should-be-check-box-indicating-which-attribute-is-applied

Browse source 
Show checkmark next to selected token attributes
This commit is contained in:
Florian Schrödl 2024-06-04 10:39:03 +02:00 • committed by GitHub
commit 1056c6b448
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 54 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
frontend/src/app/main/ui/workspace/tokens/context_menu.cljs
View file

@ -19,6 +19,7 @@
[app.main.ui.workspace.context-menu :refer [menu-entry prevent-default]] [app.main.ui.workspace.context-menu :refer [menu-entry prevent-default]]
[app.main.ui.workspace.tokens.core :as wtc] [app.main.ui.workspace.tokens.core :as wtc]
[app.util.dom :as dom] [app.util.dom :as dom]
[clojure.set :as set]
[okulary.core :as l] [okulary.core :as l]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@ -34,12 +35,12 @@
{:reg-objects? true {:reg-objects? true
:attrs [:rx :ry :r1 :r2 :r3 :r4]}))) :attrs [:rx :ry :r1 :r2 :r3 :r4]})))
(defn apply-border-radius-token [{:keys [token-id token-type-props selected-shapes]} attribute] (defn apply-border-radius-token [{:keys [token-id token-type-props selected-shapes]} attributes]
(let [token (dt/get-token-data-from-token-id token-id) (let [token (dt/get-token-data-from-token-id token-id)
updated-token-type-props (if (#{:r1 :r2 :r3 :r4} attribute) updated-token-type-props (if (set/superset? #{:r1 :r2 :r3 :r4} attributes)
(assoc token-type-props (assoc token-type-props
:on-update-shape update-shape-radius-single-corner :on-update-shape update-shape-radius-single-corner
:attributes #{attribute}) :attributes attributes)
token-type-props)] token-type-props)]
(wtc/on-apply-token {:token token (wtc/on-apply-token {:token token
:token-type-props updated-token-type-props :token-type-props updated-token-type-props
@ -63,26 +64,33 @@
: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]
(case token-type (for [{:keys [attributes] :as item} coll]
:border-radius (let [action #(apply-border-radius-token context-data %)] (let [selected? (wtc/tokens-applied? {:id token-id} selected-shapes attributes)]
[{:title "All" :action #(action :all)} (assoc item
{:title "Top Left" :action #(action :r1)} :action #(update-fn context-data attributes)
{:title "Top Right" :action #(action :r2)} :selected? selected?))))]
{:title "Bottom Right" :action #(action :r3)} (case token-type
{:title "Bottom Left" :action #(action :r4)}]) :border-radius (attributes->actions
:spacing (let [action #(apply-spacing-token context-data %)] apply-border-radius-token
[{:title "All" :action #(action #{:p1 :p2 :p3 :p4})} [{:title "All" :attributes #{:r1 :r2 :r3 :r4}}
{:title "Column Gap" :action #(action #{:column-gap})} {:title "Top Left" :attributes #{:r1}}
{:title "Vertical padding" :action #(action #{:p1 :p3})} {:title "Top Right" :attributes #{:r2}}
{:title "Horizontal padding" :action #(action #{:p2 :p4})} {:title "Bottom Right" :attributes #{:r3}}
{:title "Row Gap" :action #(action #{:row-gap})} {:title "Bottom Left" :attributes #{:r4}}])
{:title "Top" :action #(action #{:p1})} :spacing (attributes->actions
{:title "Right" :action #(action #{:p2})} apply-spacing-token
{:title "Bottom" :action #(action #{:p3})} [{:title "All" :attributes #{:p1 :p2 :p3 :p4}}
{:title "Left" :action #(action #{:p4})}]) {:title "Column Gap" :attributes #{:column-gap}}
[])) {:title "Vertical padding" :attributes #{:p1 :p3}}
{:title "Horizontal padding" :attributes #{:p2 :p4}}
{:title "Row Gap" :attributes #{:row-gap}}
{:title "Top" :attributes #{:p1}}
{:title "Right" :attributes #{:p2}}
{:title "Bottom" :attributes #{:p3}}
{:title "Left" :attributes #{:p4}}])
[])))
(defn generate-menu-entries [{:keys [token-id token-type-props token-type selected-shapes] :as context-data}] (defn generate-menu-entries [{:keys [token-id token-type-props token-type selected-shapes] :as context-data}]
(let [{:keys [modal]} token-type-props (let [{:keys [modal]} token-type-props
@ -103,10 +111,16 @@
all-actions)) all-actions))
(mf/defc token-pill-context-menu (mf/defc token-pill-context-menu
[{:keys [token-id token-type-props token-type selected-shapes] :as 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
[] []
@ -142,4 +156,4 @@
[:& token-pill-context-menu {:token-id (:token-id mdata) [:& token-pill-context-menu {:token-id (:token-id mdata)
:token-type-props (:token-type-props mdata) :token-type-props (:token-type-props mdata)
:token-type (:token-type mdata) :token-type (:token-type mdata)
:selected-shapes selected-shapes}]])]])) :selected-shapes selected-shapes}]])]]))

15
frontend/src/app/main/ui/workspace/tokens/context_menu.scss
View file

@ -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;
} }