From 5fa2048b234a0d0c119bfcc52563087d0c9d62b4 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Wed, 15 May 2024 14:40:46 +0530 Subject: [PATCH] re-use workspace context menu entry and fix double nested ul --- .../ui/workspace/tokens/context_menu.cljs | 95 +------------------ .../ui/workspace/tokens/context_menu.scss | 95 ------------------- 2 files changed, 5 insertions(+), 185 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 5721e15b5..ec4fcb4c2 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs @@ -17,6 +17,7 @@ [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.util.dom :as dom] [app.util.timers :as timers] [okulary.core :as l] @@ -25,101 +26,15 @@ (def tokens-menu-ref (l/derived :token-context-menu refs/workspace-local)) -(defn- prevent-default - [event] - (dom/prevent-default event) - (dom/stop-propagation event)) - -(mf/defc token-menu-entry - {::mf/props :obj} - [{:keys [title shortcut on-click on-pointer-enter on-pointer-leave - on-unmount children selected? icon disabled value]}] - (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)))) - - 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 - 200 - #(when-not (mf/ref-val hovering?) - (dom/set-css-property! submenu-node "display" "none"))))) - (when on-pointer-leave (on-pointer-leave)))) - - 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 (> (count children) 1) - [:span {:class (stl/css :submenu-icon)} i/arrow]) - - (when (> (count children) 1) - [:ul {:class (stl/css :token-context-submenu) - :ref submenu-ref - :style {:display "none" :left 250} - :on-context-menu prevent-default} - children])]))) - -(mf/defc menu-separator - [] - [:li {:class (stl/css :separator)}]) - (mf/defc token-pill-context-menu [{:keys [token-id]}] (let [do-delete #(st/emit! (dt/delete-token token-id)) do-duplicate #(js/console.log "Duplicating") do-edit #(js/console.log "Editing")] - [:ul.context-list - [:& token-menu-entry {:title "Delete Token" :on-click do-delete}] - [:& token-menu-entry {:title "Duplicate Token" :on-click do-duplicate}] - [:& token-menu-entry {:title "Edit Token" :on-click do-edit}]])) + [:* + [:& menu-entry {:title "Delete Token" :on-click do-delete}] + [:& menu-entry {:title "Duplicate Token" :on-click do-duplicate}] + [:& menu-entry {:title "Edit Token" :on-click do-edit}]])) (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 6a697ece0..49fe69662 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.scss +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.scss @@ -29,98 +29,3 @@ .token-context-submenu { position: absolute; } - -.separator { - height: $s-12; -} - -.context-menu-item { - display: flex; - align-items: center; - justify-content: space-between; - height: $s-28; - width: 100%; - padding: $s-6; - border-radius: $br-8; - cursor: pointer; - - .title { - @include bodySmallTypography; - color: var(--menu-foreground-color); - } - .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); - } - } - - .submenu-icon svg { - @extend .button-icon-small; - stroke: var(--menu-foreground-color); - } - - &:hover { - background-color: var(--menu-background-color-hover); - .title { - color: var(--menu-foreground-color-hover); - } - .shortcut { - 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; - } -} - -.icon-menu-item[disabled], -.context-menu-item[disabled] { - pointer-events: none; - opacity: 0.6; -}