From 819c50eaf850a55233eb82e628f2225430af4e1b Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Wed, 5 Jun 2024 13:49:00 +0530 Subject: [PATCH 01/10] change dimension to dimensions across --- common/src/app/common/types/token.cljc | 2 +- frontend/src/app/main/ui/workspace/tokens/core.cljs | 2 +- frontend/src/app/main/ui/workspace/tokens/modal.cljs | 1 + frontend/src/app/main/ui/workspace/tokens/sidebar.cljs | 2 +- 4 files changed, 4 insertions(+), 3 deletions(-) diff --git a/common/src/app/common/types/token.cljc b/common/src/app/common/types/token.cljc index 29b478930..754c3c1d2 100644 --- a/common/src/app/common/types/token.cljc +++ b/common/src/app/common/types/token.cljc @@ -37,7 +37,7 @@ :border-radius :stroke-width :box-shadow - :dimension + :dimensions :numeric :opacity :other diff --git a/frontend/src/app/main/ui/workspace/tokens/core.cljs b/frontend/src/app/main/ui/workspace/tokens/core.cljs index aa8d62a67..a4c871b20 100644 --- a/frontend/src/app/main/ui/workspace/tokens/core.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/core.cljs @@ -159,7 +159,7 @@ :modal {:key :tokens/sizing :fields [{:label "Sizing" :key :sizing}]}}] - [:dimension + [:dimensions {:title "Dimensions" :attributes ctt/dimensions-keys :on-update-shape update-shape-dimensions diff --git a/frontend/src/app/main/ui/workspace/tokens/modal.cljs b/frontend/src/app/main/ui/workspace/tokens/modal.cljs index f5d71acfc..a7eb11d72 100644 --- a/frontend/src/app/main/ui/workspace/tokens/modal.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/modal.cljs @@ -67,6 +67,7 @@ on-submit (fn [e] (dom/prevent-default e) + (println "token type is" (:type token) token-type) (let [token-value (-> (fields->map @state) (first) (val)) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index f0246b4a4..c740fc8e0 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -51,7 +51,7 @@ :stroke-width i/stroke-size :typography i/text ;; TODO: Add diagonal icon here when it's available - :dimension [:div {:style {:rotate "45deg"}} i/constraint-horizontal] + :dimensions [:div {:style {:rotate "45deg"}} i/constraint-horizontal] :sizing [:div {:style {:rotate "45deg"}} i/constraint-horizontal] i/add)) From ed0d9e1cf51b6079c9f7ca1d9e0fd76a4ab37854 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Wed, 5 Jun 2024 13:49:18 +0530 Subject: [PATCH 02/10] initial dimensions context menu --- .../src/app/main/ui/workspace/tokens/context_menu.cljs | 10 ++++++++++ 1 file changed, 10 insertions(+) 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 a1cde4010..dee0d9139 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs @@ -125,6 +125,16 @@ {:title "Min height" :attributes #{:layout-item-min-h}} {:title "Max height" :attributes #{:layout-item-max-h}}]) + :dimensions (attributes->actions + apply-sizing-token + [{:title "Spacing" :attributes #{:width :height}} + {:title "Sizing" :attributes #{:width}} + {:title "Border Radius" :attributes #{:height}} + {:title "Border Width" :attributes #{:width}} + {:title "x" :attributes #{:width}} + {:title "y" :attributes #{:width}} + {:title "Background blur" :attributes #{:width}}]) + []))) (defn generate-menu-entries [{:keys [token-id token-type-props token-type selected-shapes] :as context-data}] From a98d6b4c07fcbb5012432732a4244c4b39a760ba Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Wed, 5 Jun 2024 22:06:31 +0530 Subject: [PATCH 03/10] Add context menu functionalities for dimensions token --- common/src/app/common/types/token.cljc | 4 +- .../ui/workspace/tokens/context_menu.cljs | 54 ++++++++++++++----- 2 files changed, 43 insertions(+), 15 deletions(-) diff --git a/common/src/app/common/types/token.cljc b/common/src/app/common/types/token.cljc index 754c3c1d2..52666fe32 100644 --- a/common/src/app/common/types/token.cljc +++ b/common/src/app/common/types/token.cljc @@ -98,8 +98,8 @@ [:p2 {:optional true} ::sm/uuid] [:p3 {:optional true} ::sm/uuid] [:p4 {:optional true} ::sm/uuid] - [:position-x {:optional true} ::sm/uuid] - [:position-y {:optional true} ::sm/uuid]]) + [:x {:optional true} ::sm/uuid] + [:y {:optional true} ::sm/uuid]]) (def spacing-keys (schema-keys ::spacing)) 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 dee0d9139..a28147fdf 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs @@ -11,6 +11,7 @@ [app.common.types.shape.radius :as ctsr] [app.main.data.modal :as modal] [app.main.data.tokens :as dt] + [app.main.data.workspace :as dw] [app.main.data.workspace.changes :as dch] [app.main.data.workspace.shape-layout :as dwsl] [app.main.data.workspace.transforms :as dwt] @@ -65,6 +66,22 @@ :token-type-props updated-token-type-props :selected-shapes selected-shapes}))) +(defn update-shape-position [value shape-ids attributes] + (doseq [shape-id shape-ids] + (st/emit! (dw/update-position shape-id {(first attributes) value})))) + +(defn apply-dimensions-token [{:keys [token-id token-type-props selected-shapes]} attributes] + (let [token (dt/get-token-data-from-token-id token-id) + attributes (set attributes) + updated-token-type-props (if (set/superset? #{:x :y} attributes) + (assoc token-type-props + :on-update-shape update-shape-position + :attributes attributes) + token-type-props)] + (wtc/on-apply-token {:token token + :token-type-props updated-token-type-props + :selected-shapes selected-shapes}))) + (defn update-shape-dimensions [value shape-ids attributes] (st/emit! (dwt/update-dimensions shape-ids (first attributes) value))) @@ -126,14 +143,14 @@ {:title "Max height" :attributes #{:layout-item-max-h}}]) :dimensions (attributes->actions - apply-sizing-token - [{:title "Spacing" :attributes #{:width :height}} - {:title "Sizing" :attributes #{:width}} - {:title "Border Radius" :attributes #{:height}} - {:title "Border Width" :attributes #{:width}} - {:title "x" :attributes #{:width}} - {:title "y" :attributes #{:width}} - {:title "Background blur" :attributes #{:width}}]) + apply-dimensions-token + [{:title "Spacing" :children true :submenu :spacing} + {:title "Sizing" :children true :submenu :sizing} + {:title "Border Radius" :children true :submenu :border-radius} + ;; TODO: BORDER_WIDTH {:title "Border Width" :attributes #{:width} :children true} + {:title "x" :attributes #{:x}} + {:title "y" :attributes #{:y}}]) + ;;TODO: Background blur {:title "Background blur" :attributes #{:width}}]) []))) @@ -158,14 +175,25 @@ (mf/defc token-pill-context-menu [context-data] (let [menu-entries (generate-menu-entries context-data)] - (for [[index {:keys [title action selected?]}] (d/enumerate menu-entries)] + ;;(js/console.log menu-entries) + (for [[index {:keys [title action selected? children submenu]}] (d/enumerate menu-entries)] + ;;(println "children is " children) [:& menu-entry {:key index :title title - :on-click action + :on-click (when (not children) 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?}]))) + :icon (when (not children) (mf/html [:div {:class (stl/css-case :empty-icon true + :hidden-icon (not selected?))}])) + :selected? (when (not children) selected?)} + (when children + (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?}])))]))) (mf/defc token-context-menu [] From a5c235754cc341c1c76ac598611fe980a0076529 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Wed, 5 Jun 2024 22:06:59 +0530 Subject: [PATCH 04/10] Cleanup debug statements --- frontend/src/app/main/ui/workspace/tokens/context_menu.cljs | 2 -- 1 file changed, 2 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 a28147fdf..8d3ce1965 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs @@ -175,9 +175,7 @@ (mf/defc token-pill-context-menu [context-data] (let [menu-entries (generate-menu-entries context-data)] - ;;(js/console.log menu-entries) (for [[index {:keys [title action selected? children submenu]}] (d/enumerate menu-entries)] - ;;(println "children is " children) [:& menu-entry {:key index :title title :on-click (when (not children) action) From 307f4725288fa73d03a674d962723da8c5896166 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Wed, 5 Jun 2024 22:23:27 +0530 Subject: [PATCH 05/10] remove print statement --- frontend/src/app/main/ui/workspace/tokens/modal.cljs | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/modal.cljs b/frontend/src/app/main/ui/workspace/tokens/modal.cljs index a7eb11d72..f5d71acfc 100644 --- a/frontend/src/app/main/ui/workspace/tokens/modal.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/modal.cljs @@ -67,7 +67,6 @@ on-submit (fn [e] (dom/prevent-default e) - (println "token type is" (:type token) token-type) (let [token-value (-> (fields->map @state) (first) (val)) From 67a34c91d8c9b10f9aa7c49cf43c02fc4151eae8 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Wed, 5 Jun 2024 23:19:43 +0530 Subject: [PATCH 06/10] Add leading spaces to subcontext menu titles --- frontend/src/app/main/ui/workspace/tokens/context_menu.cljs | 6 +++--- 1 file changed, 3 insertions(+), 3 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 8d3ce1965..b38d2726a 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs @@ -144,9 +144,9 @@ :dimensions (attributes->actions apply-dimensions-token - [{:title "Spacing" :children true :submenu :spacing} - {:title "Sizing" :children true :submenu :sizing} - {:title "Border Radius" :children true :submenu :border-radius} + [{:title "\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Spacing" :children true :submenu :spacing} + {:title "\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Sizing" :children true :submenu :sizing} + {:title "\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Border Radius" :children true :submenu :border-radius} ;; TODO: BORDER_WIDTH {:title "Border Width" :attributes #{:width} :children true} {:title "x" :attributes #{:x}} {:title "y" :attributes #{:y}}]) From 91eb59696c86b1662884bd053d9264c34efb5b3a Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Thu, 6 Jun 2024 23:09:22 +0530 Subject: [PATCH 07/10] Remove children attribute and use submenu instead --- .../ui/workspace/tokens/context_menu.cljs | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 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 b38d2726a..b0cf11a0f 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs @@ -144,9 +144,9 @@ :dimensions (attributes->actions apply-dimensions-token - [{:title "\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Spacing" :children true :submenu :spacing} - {:title "\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Sizing" :children true :submenu :sizing} - {:title "\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Border Radius" :children true :submenu :border-radius} + [{:title "\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Spacing" :submenu :spacing} + {:title "\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Sizing" :submenu :sizing} + {:title "\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Border Radius" :submenu :border-radius} ;; TODO: BORDER_WIDTH {:title "Border Width" :attributes #{:width} :children true} {:title "x" :attributes #{:x}} {:title "y" :attributes #{:y}}]) @@ -176,14 +176,14 @@ [context-data] (let [menu-entries (generate-menu-entries context-data)] (for [[index {:keys [title action selected? children submenu]}] (d/enumerate menu-entries)] - [:& menu-entry {:key index - :title title - :on-click (when (not children) action) + [:& 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 (when (not children) (mf/html [:div {:class (stl/css-case :empty-icon true - :hidden-icon (not selected?))}])) - :selected? (when (not children) selected?)} - (when children + :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 From e86038d52f8ae7369ea4a516b7dfc535056921d7 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Fri, 7 Jun 2024 01:27:18 +0530 Subject: [PATCH 08/10] Add CSS to deal with margin before the Sub Context Menu titles --- frontend/src/app/main/ui/workspace/tokens/context_menu.cljs | 6 +++--- frontend/src/app/main/ui/workspace/tokens/context_menu.scss | 4 ++++ 2 files changed, 7 insertions(+), 3 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 b0cf11a0f..a2a3c2b76 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs @@ -144,9 +144,9 @@ :dimensions (attributes->actions apply-dimensions-token - [{:title "\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Spacing" :submenu :spacing} - {:title "\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Sizing" :submenu :sizing} - {:title "\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Border Radius" :submenu :border-radius} + [{:title "Spacing" :submenu :spacing} + {:title "Sizing" :submenu :sizing} + {:title "Border Radius" :submenu :border-radius} ;; TODO: BORDER_WIDTH {:title "Border Width" :attributes #{:width} :children true} {:title "x" :attributes #{:x}} {:title "y" :attributes #{:y}}]) 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 25505f4e9..9471c9a65 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.scss +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.scss @@ -32,6 +32,10 @@ } } +.context-list > li:nth-child(-n + 3) > span:first-of-type { + margin: 30px; +} + // TODO: Allow selected items wihtout an icon for the context menu .empty-icon { width: 0; From 842b76f3c1290a34982fd63ed1703a883ff12619 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Fri, 7 Jun 2024 01:37:26 +0530 Subject: [PATCH 09/10] replace 30px with variables --- frontend/src/app/main/ui/workspace/tokens/context_menu.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 9471c9a65..169e04907 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.scss +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.scss @@ -33,7 +33,7 @@ } .context-list > li:nth-child(-n + 3) > span:first-of-type { - margin: 30px; + margin: calc(($s-32 + $s-28) / 2); } // TODO: Allow selected items wihtout an icon for the context menu From 3f55536fc042e9a86f565ffd8c52d1df079d2735 Mon Sep 17 00:00:00 2001 From: Akshay Gupta Date: Mon, 10 Jun 2024 23:25:11 +0530 Subject: [PATCH 10/10] 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