Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-01 11:59:17 -05:00
Code Issues Activity

Add context menu functionalities for dimensions token

Browse source
This commit is contained in:
Akshay Gupta 2024-06-05 22:06:31 +05:30
parent ed0d9e1cf5
commit a98d6b4c07
No known key found for this signature in database
2 changed files with 43 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
common/src/app/common/types/token.cljc
View file

@ -98,8 +98,8 @@
[:p2 {:optional true} ::sm/uuid] [:p2 {:optional true} ::sm/uuid]
[:p3 {:optional true} ::sm/uuid] [:p3 {:optional true} ::sm/uuid]
[:p4 {:optional true} ::sm/uuid] [:p4 {:optional true} ::sm/uuid]
[:position-x {:optional true} ::sm/uuid] [:x {:optional true} ::sm/uuid]
[:position-y {:optional true} ::sm/uuid]]) [:y {:optional true} ::sm/uuid]])
(def spacing-keys (schema-keys ::spacing)) (def spacing-keys (schema-keys ::spacing))

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

@ -11,6 +11,7 @@
[app.common.types.shape.radius :as ctsr] [app.common.types.shape.radius :as ctsr]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.data.tokens :as dt] [app.main.data.tokens :as dt]
[app.main.data.workspace :as dw]
[app.main.data.workspace.changes :as dch] [app.main.data.workspace.changes :as dch]
[app.main.data.workspace.shape-layout :as dwsl] [app.main.data.workspace.shape-layout :as dwsl]
[app.main.data.workspace.transforms :as dwt] [app.main.data.workspace.transforms :as dwt]
@ -65,6 +66,22 @@
:token-type-props updated-token-type-props :token-type-props updated-token-type-props
:selected-shapes selected-shapes}))) :selected-shapes selected-shapes})))
(defn update-shape-position [value shape-ids attributes]
(doseq [shape-id shape-ids]
(st/emit! (dw/update-position shape-id {(first attributes) value}))))
(defn apply-dimensions-token [{:keys [token-id token-type-props selected-shapes]} attributes]
(let [token (dt/get-token-data-from-token-id token-id)
attributes (set attributes)
updated-token-type-props (if (set/superset? #{:x :y} attributes)
(assoc token-type-props
:on-update-shape update-shape-position
:attributes attributes)
token-type-props)]
(wtc/on-apply-token {:token token
:token-type-props updated-token-type-props
:selected-shapes selected-shapes})))
(defn update-shape-dimensions [value shape-ids attributes] (defn update-shape-dimensions [value shape-ids attributes]
(st/emit! (dwt/update-dimensions shape-ids (first attributes) value))) (st/emit! (dwt/update-dimensions shape-ids (first attributes) value)))
@ -126,14 +143,14 @@
{:title "Max height" :attributes #{:layout-item-max-h}}]) {:title "Max height" :attributes #{:layout-item-max-h}}])
:dimensions (attributes->actions :dimensions (attributes->actions
apply-sizing-token apply-dimensions-token
[{:title "Spacing" :attributes #{:width :height}} [{:title "Spacing" :children true :submenu :spacing}
{:title "Sizing" :attributes #{:width}} {:title "Sizing" :children true :submenu :sizing}
{:title "Border Radius" :attributes #{:height}} {:title "Border Radius" :children true :submenu :border-radius}
{:title "Border Width" :attributes #{:width}} ;; TODO: BORDER_WIDTH {:title "Border Width" :attributes #{:width} :children true}
{:title "x" :attributes #{:width}} {:title "x" :attributes #{:x}}
{:title "y" :attributes #{:width}} {:title "y" :attributes #{:y}}])
{:title "Background blur" :attributes #{:width}}]) ;;TODO: Background blur {:title "Background blur" :attributes #{:width}}])
[]))) [])))
@ -158,14 +175,25 @@
(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 {:keys [title action selected?]}] (d/enumerate menu-entries)] ;;(js/console.log menu-entries)
(for [[index {:keys [title action selected? children submenu]}] (d/enumerate menu-entries)]
;;(println "children is " children)
[:& menu-entry {:key index [:& menu-entry {:key index
:title title :title title
:on-click action :on-click (when (not children) action)
;; TODO: Allow selected items wihtout an icon for the context menu ;; TODO: Allow selected items wihtout an icon for the context menu
:icon (mf/html [:div {:class (stl/css-case :empty-icon true :icon (when (not children) (mf/html [:div {:class (stl/css-case :empty-icon true
:hidden-icon (not selected?))}]) :hidden-icon (not selected?))}]))
:selected? selected?}]))) :selected? (when (not children) selected?)}
(when children
(let [submenu-entries (additional-actions (assoc context-data :token-type submenu))]
(for [[index {:keys [title action selected?]}] (d/enumerate submenu-entries)]
[:& menu-entry {:key index
:title title
:on-click action
: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
[] []