3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-09 09:41:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

Separate entries

Browse source
This commit is contained in:
Florian Schroedl 2024-07-08 11:40:05 +02:00
parent e75f9a7c7f
commit db7391e4cb
2 changed files with 41 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -213,10 +213,13 @@
(defn additional-actions [{:keys [token-id token-type selected-shapes] :as context-data}] (defn additional-actions [{:keys [token-id token-type selected-shapes] :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]
(let [selected? (wtt/shapes-token-applied? {:id token-id} selected-shapes attributes)] (cond
(assoc item (= :separator item) item
:action #(update-fn context-data attributes) :else
:selected? selected?))))] (let [selected? (wtt/shapes-token-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
@ -228,14 +231,15 @@
:spacing (attributes->actions :spacing (attributes->actions
apply-spacing-token apply-spacing-token
[{:title "All" :attributes #{:p1 :p2 :p3 :p4}} [{:title "All" :attributes #{:p1 :p2 :p3 :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 "Top" :attributes #{:p1}}
{:title "Right" :attributes #{:p2}} {:title "Right" :attributes #{:p2}}
{:title "Bottom" :attributes #{:p3}} {:title "Bottom" :attributes #{:p3}}
{:title "Left" :attributes #{:p4}}]) {:title "Left" :attributes #{:p4}}
:separator
{:title "Column Gap" :attributes #{:column-gap}}
{:title "Vertical padding" :attributes #{:p1 :p3}}
{:title "Horizontal padding" :attributes #{:p2 :p4}}
{:title "Row Gap" :attributes #{:row-gap}}])
:sizing (attributes->actions :sizing (attributes->actions
apply-sizing-token apply-sizing-token
@ -292,23 +296,29 @@
(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? children submenu]}] (d/enumerate menu-entries)] (for [[index {:keys [title action selected? children submenu] :as entry}] (d/enumerate menu-entries)]
[:& menu-entry (cond-> {:key index (cond
:title title} (= :separator entry) [:& menu-separator]
(not submenu) (assoc :on-click action :else
;; TODO: Allow selected items wihtout an icon for the context menu [:& menu-entry (cond-> {:key index
:icon (mf/html [:div {:class (stl/css-case :empty-icon true :title title}
:hidden-icon (not selected?))}]) (not submenu) (assoc :on-click action
:selected? selected?)) ;; TODO: Allow selected items wihtout an icon for the context menu
(when submenu :icon (mf/html [:div {:class (stl/css-case :empty-icon true
(let [submenu-entries (additional-actions (assoc context-data :token-type submenu))] :hidden-icon (not selected?))}])
(for [[index {:keys [title action selected?]}] (d/enumerate submenu-entries)] :selected? selected?))
[:& menu-entry {:key index (when submenu
:title title (let [submenu-entries (additional-actions (assoc context-data :token-type submenu))]
:on-click action (for [[index {:keys [title action selected?] :as sub-entry}] (d/enumerate submenu-entries)]
:icon (mf/html [:div {:class (stl/css-case :empty-icon true (cond
:hidden-icon (not selected?))}]) (= :separator sub-entry) [:& menu-separator]
:selected? selected?}])))]))) :else
[:& 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
[] []

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

@ -38,7 +38,11 @@
} }
.separator { .separator {
height: $s-12; @include bodySmallTypography;
margin: $s-6;
display: flex;
align-items: center;
border-block-start: $s-1 solid var(--panel-border-color);
} }
.context-menu-item { .context-menu-item {