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

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
Show stats 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}]
(let [attributes->actions (fn [update-fn coll]
(for [{:keys [attributes] :as item} coll]
(let [selected? (wtt/shapes-token-applied? {:id token-id} selected-shapes attributes)]
(assoc item
:action #(update-fn context-data attributes)
:selected? selected?))))]
(cond
(= :separator item) item
:else
(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
:border-radius (attributes->actions
apply-border-radius-token
@ -228,14 +231,15 @@
:spacing (attributes->actions
apply-spacing-token
[{: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 "Right" :attributes #{:p2}}
{: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
apply-sizing-token
@ -292,23 +296,29 @@
(mf/defc token-pill-context-menu
[context-data]
(let [menu-entries (generate-menu-entries context-data)]
(for [[index {:keys [title action selected? children submenu]}] (d/enumerate menu-entries)]
[:& menu-entry (cond-> {:key index
:title title}
(not submenu) (assoc :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?))
(when submenu
(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?}])))])))
(for [[index {:keys [title action selected? children submenu] :as entry}] (d/enumerate menu-entries)]
(cond
(= :separator entry) [:& menu-separator]
:else
[:& menu-entry (cond-> {:key index
:title title}
(not submenu) (assoc :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?))
(when submenu
(let [submenu-entries (additional-actions (assoc context-data :token-type submenu))]
(for [[index {:keys [title action selected?] :as sub-entry}] (d/enumerate submenu-entries)]
(cond
(= :separator sub-entry) [:& menu-separator]
: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
[]

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

@ -38,7 +38,11 @@
}
.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 {