Merge pull request #4282 from penpot/eva-bugfixing-6

🐛 Fix some UI errors

frontend/src/app/main/ui/workspace/context_menu.cljs

@@ -652,16 +652,15 @@
 
     [:& dropdown {:show (boolean mdata)
                   :on-close #(st/emit! dw/hide-context-menu)}
-     [:ul {:class (stl/css :workspace-context-menu)
+     [:div {:class (stl/css :workspace-context-menu)
             :ref dropdown-ref
             :style {:top top :left left}
             :on-context-menu prevent-default}
 
+      [:ul {:class (stl/css :context-list)}
        (case (:kind mdata)
          :shape [:& shape-context-menu {:mdata mdata}]
          :page [:& page-item-context-menu {:mdata mdata}]
          :grid-track [:& grid-track-context-menu {:mdata mdata}]
          :grid-cells [:& grid-cells-context-menu {:mdata mdata}]
-        [:& viewport-context-menu {:mdata mdata}])]]))
-
-
+         [:& viewport-context-menu {:mdata mdata}])]]]))

frontend/src/app/main/ui/workspace/context_menu.scss

@@ -6,24 +6,30 @@
 
 @import "refactor/common-refactor.scss";
 
-.workspace-context-menu,
-.workspace-context-submenu {
-  @include menuShadow;
+.workspace-context-menu {
   position: absolute;
   top: $s-40;
   left: $s-736;
-  display: flex;
-  flex-direction: column;
+  z-index: $z-index-4;
+}
+
+.context-list,
+.workspace-context-submenu {
+  @include menuShadow;
+  display: grid;
   width: $s-240;
   padding: $s-4;
   border-radius: $br-8;
   border: $s-2 solid var(--panel-border-color);
   background-color: var(--menu-background-color);
-  z-index: $z-index-4;
   max-height: 100vh;
   overflow-y: auto;
 }
 
+.workspace-context-submenu {
+  position: absolute;
+}
+
 .separator {
   height: $s-12;
 }

frontend/src/app/main/ui/workspace/viewport/path_actions.cljs

@@ -16,6 +16,38 @@
    [app.util.path.tools :as upt]
    [rumext.v2 :as mf]))
 
+
+(def ^:private pentool-icon
+  (i/icon-xref :pentool (stl/css :pentool-icon :pathbar-icon)))
+
+(def ^:private move-icon
+  (i/icon-xref :move (stl/css :move-icon :pathbar-icon)))
+
+(def ^:private add-icon
+  (i/icon-xref :add (stl/css :add-icon :pathbar-icon)))
+
+(def ^:private remove-icon
+  (i/icon-xref :remove-icon (stl/css :remove-icon :pathbar-icon)))
+
+(def ^:private merge-nodes-icon
+  (i/icon-xref :merge-nodes (stl/css :merge-nodes-icon :pathbar-icon)))
+
+(def ^:private join-nodes-icon
+  (i/icon-xref :join-nodes (stl/css :join-nodes-icon :pathbar-icon)))
+
+(def ^:private separate-nodes-icon
+  (i/icon-xref :separate-nodes (stl/css :separate-nodes-icon :pathbar-icon)))
+
+(def ^:private to-corner-icon
+  (i/icon-xref :to-corner (stl/css :to-corner-icon :pathbar-icon)))
+
+(def ^:private to-curve-icon
+  (i/icon-xref :to-curve (stl/css :to-curve-icon :pathbar-icon)))
+
+(def ^:private snap-nodes-icon
+  (i/icon-xref :snap-nodes (stl/css :snap-nodes-icon :pathbar-icon)))
+
+
 (defn check-enabled [content selected-points]
   (let [segments (upt/get-segments content selected-points)
         num-segments (count segments)
@@ -36,6 +68,7 @@
      :join-nodes (and points-selected? (>= num-points 2) (< num-segments max-segments))
      :separate-nodes segments-selected?}))
 
+
 (mf/defc path-actions [{:keys [shape]}]
   (let [{:keys [edit-mode selected-points snap-toggled] :as all} (mf/deref pc/current-edit-path-ref)
         content (:content shape)
@@ -113,76 +146,75 @@
      [:div {:class (stl/css :sub-actions-group)}
 
       ;; Draw Mode
-      [:button
-       {:class  (stl/css-case :is-toggled (= edit-mode :draw))
+      [:button {:class  (stl/css-case :is-toggled (= edit-mode :draw)
+                                      :topbar-btn true)
                 :title (tr "workspace.path.actions.draw-nodes" (sc/get-tooltip :draw-nodes))
                 :on-click on-select-draw-mode}
-       i/pentool]
+       pentool-icon]
 
        ;; Edit mode
-      [:button
-       {:class (stl/css-case :is-toggled (= edit-mode :move))
+      [:button {:class (stl/css-case :is-toggled (= edit-mode :move)
+                                     :topbar-btn true)
                 :title (tr "workspace.path.actions.move-nodes" (sc/get-tooltip :move-nodes))
                 :on-click on-select-edit-mode}
-       i/move]]
+       move-icon]]
 
      [:div {:class (stl/css :sub-actions-group)}
       ;; Add Node
-      [:button
-       {:disabled (not (:add-node enabled-buttons))
+      [:button {:disabled (not (:add-node enabled-buttons))
+                :class (stl/css :topbar-btn)
                 :title (tr "workspace.path.actions.add-node" (sc/get-tooltip :add-node))
                 :on-click on-add-node}
-       i/add]
+       add-icon]
 
       ;; Remove node
-      [:button
-       {:disabled (not (:remove-node enabled-buttons))
+      [:button {:disabled (not (:remove-node enabled-buttons))
+                :class (stl/css :topbar-btn)
                 :title (tr "workspace.path.actions.delete-node" (sc/get-tooltip :delete-node))
                 :on-click on-remove-node}
-       i/remove-icon]]
+       remove-icon]]
 
      [:div {:class (stl/css :sub-actions-group)}
       ;; Merge Nodes
-      [:button
-       {:disabled (not (:merge-nodes enabled-buttons))
+      [:button {:disabled (not (:merge-nodes enabled-buttons))
+                :class (stl/css :topbar-btn)
                 :title (tr "workspace.path.actions.merge-nodes" (sc/get-tooltip :merge-nodes))
                 :on-click on-merge-nodes}
-       i/merge-nodes]
+       merge-nodes-icon]
 
       ;; Join Nodes
-      [:button
-       {:disabled (not (:join-nodes enabled-buttons))
+      [:button {:disabled (not (:join-nodes enabled-buttons))
+                :class (stl/css :topbar-btn)
                 :title (tr "workspace.path.actions.join-nodes" (sc/get-tooltip :join-nodes))
                 :on-click on-join-nodes}
-       i/join-nodes]
+       join-nodes-icon]
 
       ;; Separate Nodes
-      [:button
-       {:disabled (not (:separate-nodes enabled-buttons))
+      [:button {:disabled (not (:separate-nodes enabled-buttons))
+                :class (stl/css :topbar-btn)
                 :title (tr "workspace.path.actions.separate-nodes" (sc/get-tooltip :separate-nodes))
                 :on-click on-separate-nodes}
-       i/separate-nodes]]
+       separate-nodes-icon]]
 
-           ;; Make Corner
      [:div {:class (stl/css :sub-actions-group)}
-      [:button
-       {:disabled (not (:make-corner enabled-buttons))
+      ; Make Corner
+      [:button {:disabled (not (:make-corner enabled-buttons))
+                :class (stl/css :topbar-btn)
                 :title (tr "workspace.path.actions.make-corner" (sc/get-tooltip :make-corner))
                 :on-click on-make-corner}
-       i/to-corner]
+       to-corner-icon]
 
       ;; Make Curve
-      [:button
-       {:disabled (not (:make-curve enabled-buttons))
+      [:button {:disabled (not (:make-curve enabled-buttons))
+                :class (stl/css :topbar-btn)
                 :title (tr "workspace.path.actions.make-curve" (sc/get-tooltip :make-curve))
                 :on-click on-make-curve}
-       i/to-curve]]
-
-           ;; Toggle snap
+       to-curve-icon]]
      [:div {:class (stl/css :sub-actions-group)}
-      [:button
-       {:class  (stl/css-case :is-toggled snap-toggled)
+      ;; Toggle snap
+      [:button {:class  (stl/css-case :is-toggled snap-toggled
+                                      :topbar-btn true)
                 :title (tr "workspace.path.actions.snap-nodes" (sc/get-tooltip :snap-nodes))
                 :on-click on-toggle-snap}
-       i/snap-nodes]]]))
+       snap-nodes-icon]]]))
 

frontend/src/app/main/ui/workspace/viewport/path_actions.scss

@@ -19,22 +19,26 @@
   padding: $s-8 $s-16;
   border-radius: $s-8;
   gap: $s-16;
-  z-index: $z-index-10;
+  border: $s-2 solid var(--panel-border-color);
+  z-index: $z-index-3;
   background-color: var(--color-background-primary);
   transition:
     top 0.3s,
     height 0.3s,
     opacity 0.3s;
+}
 
-  .sub-actions-group {
+.sub-actions-group {
   position: relative;
   display: flex;
   align-items: center;
   margin: 0;
   opacity: $op-10;
   transition: opacity 0.3s ease;
+}
 
-    button {
+.topbar-btn {
+  --pathbar-icon-color: var(--color-foreground-secondary);
   @extend .button-tertiary;
   height: $s-36;
   width: $s-36;
@@ -43,17 +47,14 @@
   border-radius: $s-8;
   border: none;
   margin: 0 $s-2;
+
   &.is-toggled {
+    --pathbar-icon-color: var(--button-radio-foreground-color-active);
     background-color: var(--button-radio-background-color-active);
-        svg {
-          stroke: var(--button-radio-foreground-color-active);
-        }
   }
 
-      svg {
+  .pathbar-icon {
     @extend .button-icon;
-        stroke: var(--color-foreground-secondary);
-      }
-    }
+    stroke: var(--pathbar-icon-color);
   }
 }

frontend/src/app/main/ui/workspace/viewport/top_bar.cljs

@@ -33,7 +33,8 @@
        [:& i18n/tr-html {:tag-name "span"
                          :label "workspace.top-bar.view-only"}]]
       [:button {:class (stl/css :done-btn)
-                :on-click handle-close-view-mode} (tr "workspace.top-bar.read-only.done")]]]))
+                :on-click handle-close-view-mode}
+       (tr "workspace.top-bar.read-only.done")]]]))
 
 (mf/defc top-bar
   {::mf/wrap [mf/memo]}
@@ -70,7 +71,7 @@
        [:& view-only-actions]
 
        path-edition?
-       [:div {:class (stl/css-case :viewport-actions true :viewport-actions-no-rulers (not rulers?))}
+       [:div {:class (stl/css-case :viewport-actions-path true :viewport-actions-no-rulers (not rulers?))}
         [:& path-actions {:shape shape}]]
 
        grid-edition?

frontend/src/app/main/ui/workspace/viewport/top_bar.scss

@@ -6,7 +6,8 @@
 
 @import "refactor/common-refactor.scss";
 
-.viewport-actions {
+.viewport-actions,
+.viewport-actions-path {
   pointer-events: none;
   position: absolute;
   --actions-toolbar-position-y: #{$s-28};
@@ -15,8 +16,13 @@
   top: calc(var(--actions-toolbar-position-y) + var(--actions-toolbar-offset-y));
   left: 50%;
   z-index: $z-index-20;
+}
 
-  .viewport-actions-container {
+.viewport-actions-path {
+  z-index: $z-index-3;
+}
+
+.viewport-actions-container {
   @include flexRow;
   background: var(--panel-background-color);
   border-radius: $br-12;
@@ -28,27 +34,21 @@
   cursor: initial;
   pointer-events: initial;
   width: $s-400;
-  }
+  border: $s-2 solid var(--panel-border-color);
+}
 
-  .viewport-actions-title {
+.viewport-actions-title {
   flex: 1;
   font-size: $fs-12;
   color: var(--color-foreground-secondary);
   padding-left: $s-8;
-  }
+}
 
-  .done-btn {
+.done-btn {
   @extend .button-primary;
   text-transform: uppercase;
   padding: $s-8 $s-20;
   font-size: $fs-11;
-  }
-  .close-btn {
-    @extend .button-tertiary;
-    svg {
-      @extend .button-icon;
-    }
-  }
 }
 
 .viewport-actions-no-rulers {