Simplify component & css

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)))}
+        default-actions [{:title "Delete Token"
-                         {:title "Duplicate Token" :action #(st/emit! (dt/duplicate-token (:id token)))}
+                          :action #(st/emit! (dt/delete-token (:id token)))}
-                         {:title "Edit Token" :action (fn [event]
+                         {:title "Duplicate Token"
-                                                        (let [{:keys [key fields]} modal
+                          :action #(st/emit! (dt/duplicate-token (:id token)))}
-                                                              token (dt/get-token-data-from-token-id (:id token))]
+                         {:title "Edit Token"
-                                                          (st/emit! dt/hide-token-context-menu)
+                          :action (fn [event]
-                                                          (dom/stop-propagation event)
+                                    (let [{:keys [key fields]} modal
-                                                          (modal/show! key {:x (.-clientX ^js event)
+                                          token (dt/get-token-data-from-token-id (:id token))]
-                                                                            :y (.-clientY ^js event)
+                                      (st/emit! dt/hide-token-context-menu)
-                                                                            :position :right
+                                      (dom/stop-propagation event)
-                                                                            :fields fields
+                                      (modal/show! key {:x (.-clientX ^js event)
-                                                                            :token token})))}]]
+                                                        :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
+  [{:keys [title value on-click selected? children]}]
-           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-let [submenu-node (mf/ref-val submenu-ref)]
-             (when (some? submenu-node)
+             (dom/set-css-property! submenu-node "display" "block"))))
-               (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-let [submenu-node (mf/ref-val submenu-ref)]
-             (when (some? submenu-node)
+             (timers/schedule 50 #(when-not (mf/ref-val hovering?)
-               (timers/schedule
+                                    (dom/set-css-property! submenu-node "display" "none"))))))
-                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"))))))]
-
+    [:li
-    (mf/use-effect
+     {:class (stl/css :context-menu-item)
-     (mf/deps on-unmount)
+      :ref set-dom-node
-     (constantly on-unmount))
+      :data-value value
-
+      :on-click on-click
-    (if icon
+      :on-pointer-enter on-pointer-enter
-      [:li {:class (stl/css :icon-menu-item)
+      :on-pointer-leave on-pointer-leave}
-            :disabled disabled
+     (when selected?
-            :data-value value
+       [:span {:class (stl/css :icon-wrapper)}
-            :ref set-dom-node
+        [:span {:class (stl/css :selected-icon)} i/tick]])
-            :on-click on-click
+     [:span {:class (stl/css :title)} title]
-            :on-pointer-enter on-pointer-enter
+     (when children
-            :on-pointer-leave on-pointer-leave}
+       [:*
-       [:span
+        [:span {:class (stl/css :submenu-icon)} i/arrow]
-        {:class (stl/css :icon-wrapper)}
+        [:ul {:class (stl/css :token-context-submenu)
-        (if selected? [:span {:class (stl/css :selected-icon)}
+              :ref submenu-ref
-                       i/tick]
+              :style {:display "none" :left 235}
-            [:span {:class (stl/css :selected-icon)}])
+              :on-context-menu prevent-default}
-        [:span {:class (stl/css :shape-icon)} icon]]
+         children]])]))
-       [: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]])])))
 
 (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

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;
+  .icon-wrapper {
-    gap: $s-2;
+    display: grid;
-    color: var(--menu-shortcut-foreground-color);
+    grid-template-columns: 1fr 1fr;
-    .shortcut-key {
+  }
-      @include bodySmallTypography;
+
-      @include flexCenter;
+  .icon-wrapper + .title {
-      height: $s-20;
+    margin-left: $s-6;
-      padding: $s-2 $s-6;
+  }
-      border-radius: $br-6;
+
-      background-color: var(--menu-shortcut-background-color);
+  .selected-icon {
+    svg {
+      @extend .button-icon-small;
+      stroke: var(--menu-foreground-color);
     }
   }
 
-  .submenu-icon svg {
+  .submenu-icon {
-    @extend .button-icon-small;
+    margin-left: $s-2;
-    stroke: var(--menu-foreground-color);
+    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 {
+  &[disabled] {
-  display: flex;
+    pointer-events: none;
-  justify-content: flex-start;
+    opacity: 0.6;
-  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
-.empty-icon {
-  width: 0;
-  height: 0;
-}
-.hidden-icon {
-  width: 11px;
-}