Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-21 06:02:32 -05:00
Code Issues Activity

Merge pull request #155 from tokens-studio/spacing-context-menu

Browse source 
Spacing context menu
This commit is contained in:
Akshay Gupta 2024-05-31 18:31:37 +05:30 • committed by GitHub
commit 5c7e235c97
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 45 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -92,13 +92,12 @@
(sm/def! ::spacing
[:map
[:spacing-column {:optional true} ::sm/uuid]
[:spacing-row {:optional true} ::sm/uuid]
[:padding-p1 {:optional true} ::sm/uuid]
[:padding-p2 {:optional true} ::sm/uuid]
[:padding-p3 {:optional true} ::sm/uuid]
[:padding-p4 {:optional true} ::sm/uuid]
[:padding-all {:optional true} ::sm/uuid]
[:row-gap {:optional true} ::sm/uuid]
[:column-gap {:optional true} ::sm/uuid]
[:p1 {:optional true} ::sm/uuid]
[:p2 {:optional true} ::sm/uuid]
[:p3 {:optional true} ::sm/uuid]
[:p4 {:optional true} ::sm/uuid]
[:position-x {:optional true} ::sm/uuid]
[:position-y {:optional true} ::sm/uuid]])

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

@ -8,22 +8,17 @@
(:require-macros [app.main.style :as stl])
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.types.shape.radius :as ctsr]
[app.main.data.events :as ev]
[app.main.data.modal :as modal]
[app.main.data.shortcuts :as scd]
[app.main.data.tokens :as dt]
[app.main.data.workspace :as dw]
[app.main.data.workspace.changes :as dch]
[app.main.data.workspace.shape-layout :as dwsl]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.icons :as i]
[app.main.ui.workspace.context-menu :refer [menu-entry prevent-default]]
[app.main.ui.workspace.tokens.core :as wtc]
[app.util.dom :as dom]
[app.util.timers :as timers]
[okulary.core :as l]
[rumext.v2 :as mf]))
@ -39,7 +34,7 @@
{:reg-objects? true
:attrs [:rx :ry :r1 :r2 :r3 :r4]})))
(defn apply-border-radius-token [token-id token-type-props attribute selected-shapes]
(defn apply-border-radius-token [{:keys [token-id token-type-props selected-shapes]} attribute]
(let [token (dt/get-token-data-from-token-id token-id)
updated-token-type-props (if (#{:r1 :r2 :r3 :r4} attribute)
(assoc token-type-props
@ -50,13 +45,43 @@
:token-type-props updated-token-type-props
:selected-shapes selected-shapes})))
(defn additional-actions [{:keys [token-id token-type-props token-type selected-shapes] :as context-data}]
(defn update-layout-spacing [value shape-ids attributes]
(if-let [layout-gap (cond
(:row-gap attributes) {:row-gap value}
(:column-gap attributes) {:column-gap value})]
(st/emit! (dwsl/update-layout shape-ids {:layout-gap layout-gap}))
(st/emit! (dwsl/update-layout shape-ids {:layout-padding (zipmap attributes (repeat value))}))))
(defn apply-spacing-token [{:keys [token-id token-type-props selected-shapes]} attribute]
(let [token (dt/get-token-data-from-token-id token-id)
attribute (set attribute)
updated-token-type-props (assoc token-type-props
:on-update-shape update-layout-spacing
:attributes attribute)]
(wtc/on-apply-token {:token token
:token-type-props updated-token-type-props
:selected-shapes selected-shapes})))
(defn additional-actions [{:keys [token-type] :as context-data}]
(case token-type
:border-radius [{:title "All" :action #(apply-border-radius-token token-id token-type-props :all selected-shapes)}
{:title "Top Left" :action #(apply-border-radius-token token-id token-type-props :r1 selected-shapes)}
{:title "Top Right" :action #(apply-border-radius-token token-id token-type-props :r2 selected-shapes)}
{:title "Bottom Right" :action #(apply-border-radius-token token-id token-type-props :r3 selected-shapes)}
{:title "Bottom Left" :action #(apply-border-radius-token token-id token-type-props :r4 selected-shapes)}]
:border-radius (let [action #(apply-border-radius-token context-data %)]
[{:title "All" :action #(action :all)}
{:title "Top Left" :action #(action :r1)}
{:title "Top Right" :action #(action :r2)}
{:title "Bottom Right" :action #(action :r3)}
{:title "Bottom Left" :action #(action :r4)}])
:spacing (let [action #(apply-spacing-token context-data %)]
[{:title "All" :action #(action #{:p1 :p2 :p3 :p4})}
{:title "Column Gap" :action #(action #{:column-gap})}
{:title "Vertical padding" :action #(action #{:p1 :p3})}
{:title "Horizontal padding" :action #(action #{:p2 :p4})}
{:title "Row Gap" :action #(action #{:row-gap})}
{:title "Top" :action #(action #{:p1})}
{:title "Right" :action #(action #{:p2})}
{:title "Bottom" :action #(action #{:p3})}
{:title "Left" :action #(action #{:p4})}])
[]))
(defn generate-menu-entries [{:keys [token-id token-type-props token-type selected-shapes] :as context-data}]
@ -74,7 +99,7 @@
:fields fields
:token token})))}]
specific-actions (additional-actions context-data)
all-actions (concat default-actions specific-actions)]
all-actions (concat specific-actions default-actions)]
all-actions))
(mf/defc token-pill-context-menu