From 3f55536fc042e9a86f565ffd8c52d1df079d2735 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Mon, 10 Jun 2024 23:25:11 +0530 Subject: [PATCH] Add custom context menu and fix styling issues with subcontext menu --- .../ui/workspace/tokens/context_menu.cljs | 92 +++++++++++++++- .../ui/workspace/tokens/context_menu.scss | 103 +++++++++++++++++- 2 files changed, 190 insertions(+), 5 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 a2a3c2b76..f3a54d0df 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs @@ -8,8 +8,10 @@ (: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.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] @@ -18,9 +20,10 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.dropdown :refer [dropdown]] - [app.main.ui.workspace.context-menu :refer [menu-entry prevent-default]] + [app.main.ui.icons :as i] [app.main.ui.workspace.tokens.core :as wtc] [app.util.dom :as dom] + [app.util.timers :as timers] [clojure.set :as set] [okulary.core :as l] [rumext.v2 :as mf])) @@ -28,6 +31,92 @@ (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 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 + 50 + #(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 235} + :on-context-menu prevent-default} + children])]))) + +(mf/defc menu-separator + [] + [:li {:class (stl/css :separator)}]) + (defn update-shape-radius-single-corner [value shape-ids attribute] (st/emit! (dch/update-shapes shape-ids @@ -215,7 +304,6 @@ "left: " (- left delta-x) "px;")] (when (or (> delta-x 0) (> delta-y 0)) (.setAttribute ^js dropdown "style" new-style)))))) - [:& dropdown {:show (boolean mdata) :on-close #(st/emit! dt/hide-token-context-menu)} [:div {:class (stl/css :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 169e04907..3062483bc 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.scss +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.scss @@ -25,15 +25,112 @@ max-height: 100vh; overflow-y: auto; - // TODO: Fixes missing styles from parent context menu li { @include bodySmallTypography; color: var(--menu-foreground-color); } } -.context-list > li:nth-child(-n + 3) > span:first-of-type { - margin: calc(($s-32 + $s-28) / 2); +.token-context-submenu { + position: absolute; + padding: $s-4; + margin-left: $s-6; +} + +.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); + 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); + } + } + + .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; } // TODO: Allow selected items wihtout an icon for the context menu