From 113fc9891ba7fd14d0861279b91e789465f6a266 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Wed, 24 Jul 2024 13:29:26 +0200 Subject: [PATCH] Simplify component & css --- .../ui/workspace/tokens/context_menu.cljs | 111 +++++++----------- .../ui/workspace/tokens/context_menu.scss | 90 ++++---------- 2 files changed, 65 insertions(+), 136 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs index 8349b2acf..022da6dd5 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs @@ -372,18 +372,21 @@ (let [{:keys [modal]} (get wtc/token-types (:type token)) attribute-actions (when (seq selected-shapes) (shape-attribute-actions context-data)) - default-actions [{:title "Delete Token" :action #(st/emit! (dt/delete-token (:id token)))} - {:title "Duplicate Token" :action #(st/emit! (dt/duplicate-token (:id token)))} - {:title "Edit Token" :action (fn [event] - (let [{:keys [key fields]} modal - token (dt/get-token-data-from-token-id (:id token))] - (st/emit! dt/hide-token-context-menu) - (dom/stop-propagation event) - (modal/show! key {:x (.-clientX ^js event) - :y (.-clientY ^js event) - :position :right - :fields fields - :token token})))}]] + default-actions [{:title "Delete Token" + :action #(st/emit! (dt/delete-token (:id token)))} + {:title "Duplicate Token" + :action #(st/emit! (dt/duplicate-token (:id token)))} + {:title "Edit Token" + :action (fn [event] + (let [{:keys [key fields]} modal + token (dt/get-token-data-from-token-id (:id token))] + (st/emit! dt/hide-token-context-menu) + (dom/stop-propagation event) + (modal/show! key {:x (.-clientX ^js event) + :y (.-clientY ^js event) + :position :right + :fields fields + :token token})))}]] (concat attribute-actions (when attribute-actions [:separator]) @@ -401,79 +404,47 @@ (mf/defc menu-entry {::mf/props :obj} - [{:keys [title shortcut on-click on-pointer-enter on-pointer-leave - on-unmount children selected? icon disabled value]}] + [{:keys [title value on-click selected? children]}] (let [submenu-ref (mf/use-ref nil) hovering? (mf/use-ref false) on-pointer-enter (mf/use-callback (fn [] (mf/set-ref-val! hovering? true) - (let [submenu-node (mf/ref-val submenu-ref)] - (when (some? submenu-node) - (dom/set-css-property! submenu-node "display" "block"))) - (when on-pointer-enter (on-pointer-enter)))) - + (when-let [submenu-node (mf/ref-val submenu-ref)] + (dom/set-css-property! submenu-node "display" "block")))) on-pointer-leave (mf/use-callback (fn [] (mf/set-ref-val! hovering? false) - (let [submenu-node (mf/ref-val submenu-ref)] - (when (some? submenu-node) - (timers/schedule - 50 - #(when-not (mf/ref-val hovering?) - (dom/set-css-property! submenu-node "display" "none"))))) - (when on-pointer-leave (on-pointer-leave)))) - + (when-let [submenu-node (mf/ref-val submenu-ref)] + (timers/schedule 50 #(when-not (mf/ref-val hovering?) + (dom/set-css-property! submenu-node "display" "none")))))) set-dom-node (mf/use-callback (fn [dom] (let [submenu-node (mf/ref-val submenu-ref)] (when (and (some? dom) (some? submenu-node)) (dom/set-css-property! submenu-node "top" (str (.-offsetTop dom) "px"))))))] - - (mf/use-effect - (mf/deps on-unmount) - (constantly on-unmount)) - - (if icon - [:li {:class (stl/css :icon-menu-item) - :disabled disabled - :data-value value - :ref set-dom-node - :on-click on-click - :on-pointer-enter on-pointer-enter - :on-pointer-leave on-pointer-leave} - [:span - {:class (stl/css :icon-wrapper)} - (if selected? [:span {:class (stl/css :selected-icon)} - i/tick] - [:span {:class (stl/css :selected-icon)}]) - [:span {:class (stl/css :shape-icon)} icon]] - [:span {:class (stl/css :title)} title]] - [:li {:class (stl/css :context-menu-item) - :disabled disabled - :ref set-dom-node - :data-value value - :on-click on-click - :on-pointer-enter on-pointer-enter - :on-pointer-leave on-pointer-leave} - [:span {:class (stl/css :title)} title] - (when shortcut - [:span {:class (stl/css :shortcut)} - (for [[idx sc] (d/enumerate (scd/split-sc shortcut))] - [:span {:key (dm/str shortcut "-" idx) - :class (stl/css :shortcut-key)} sc])]) - - (when children - [:* - [:span {:class (stl/css :submenu-icon)} i/arrow] - [:ul {:class (stl/css :token-context-submenu) - :ref submenu-ref - :style {:display "none" :left 235} - :on-context-menu prevent-default} - children]])]))) + [:li + {:class (stl/css :context-menu-item) + :ref set-dom-node + :data-value value + :on-click on-click + :on-pointer-enter on-pointer-enter + :on-pointer-leave on-pointer-leave} + (when selected? + [:span {:class (stl/css :icon-wrapper)} + [:span {:class (stl/css :selected-icon)} i/tick]]) + [:span {:class (stl/css :title)} title] + (when children + [:* + [:span {:class (stl/css :submenu-icon)} i/arrow] + [:ul {:class (stl/css :token-context-submenu) + :ref submenu-ref + :style {:display "none" :left 235} + :on-context-menu prevent-default} + children]])])) (mf/defc context-menu-tree [context-data] @@ -487,8 +458,6 @@ :else [:& menu-entry {: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 diff --git a/frontend/src/app/main/ui/workspace/tokens/context_menu.scss b/frontend/src/app/main/ui/workspace/tokens/context_menu.scss index f2798ea7a..28e3527af 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.scss +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.scss @@ -46,7 +46,6 @@ .context-menu-item { display: flex; align-items: center; - justify-content: space-between; height: $s-28; width: 100%; padding: $s-6; @@ -54,27 +53,34 @@ cursor: pointer; .title { + flex-grow: 1; @include bodySmallTypography; color: var(--menu-foreground-color); margin-left: calc(($s-32 + $s-28) / 2); } - .shortcut { - @include flexCenter; - gap: $s-2; - color: var(--menu-shortcut-foreground-color); - .shortcut-key { - @include bodySmallTypography; - @include flexCenter; - height: $s-20; - padding: $s-2 $s-6; - border-radius: $br-6; - background-color: var(--menu-shortcut-background-color); + + .icon-wrapper { + display: grid; + grid-template-columns: 1fr 1fr; + } + + .icon-wrapper + .title { + margin-left: $s-6; + } + + .selected-icon { + svg { + @extend .button-icon-small; + stroke: var(--menu-foreground-color); } } - .submenu-icon svg { - @extend .button-icon-small; - stroke: var(--menu-foreground-color); + .submenu-icon { + margin-left: $s-2; + svg { + @extend .button-icon-small; + stroke: var(--menu-foreground-color); + } } &:hover { @@ -86,60 +92,14 @@ color: var(--menu-shortcut-foreground-color-hover); } } + &:focus { border: 1px solid var(--menu-border-color-focus); background-color: var(--menu-background-color-focus); } -} -.icon-menu-item { - display: flex; - justify-content: flex-start; - align-items: center; - height: $s-28; - padding: $s-6; - border-radius: $br-8; - &:hover { - background-color: var(--menu-background-color-hover); - } - - span.title { - margin-left: $s-6; - } - - .selected-icon { - svg { - @extend .button-icon-small; - stroke: var(--menu-foreground-color); - } - } - - .shape-icon { - margin-left: $s-2; - svg { - @extend .button-icon-small; - stroke: var(--menu-foreground-color); - } - } - - .icon-wrapper { - display: grid; - grid-template-columns: 1fr 1fr; - margin: 0; + &[disabled] { + pointer-events: none; + opacity: 0.6; } } - -.icon-menu-item[disabled], -.context-menu-item[disabled] { - pointer-events: none; - opacity: 0.6; -} - -// TODO: Allow selected items wihtout an icon for the context menu -.empty-icon { - width: 0; - height: 0; -} -.hidden-icon { - width: 11px; -}