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)
-           :ref dropdown-ref
-           :style {:top top :left left}
-           :on-context-menu prevent-default}
-
-      (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}])]]))
-
+     [: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}])]]]))

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)
@@ -112,77 +145,76 @@
     [:div {:class (stl/css :sub-actions)}
      [:div {:class (stl/css :sub-actions-group)}
 
-            ;; Draw Mode
-      [:button
-       {:class  (stl/css-case :is-toggled (= edit-mode :draw))
-        :title (tr "workspace.path.actions.draw-nodes" (sc/get-tooltip :draw-nodes))
-        :on-click on-select-draw-mode}
-       i/pentool]
+      ;; Draw Mode
+      [: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}
+       pentool-icon]
 
-            ;; Edit mode
-      [:button
-       {:class (stl/css-case :is-toggled (= edit-mode :move))
-        :title (tr "workspace.path.actions.move-nodes" (sc/get-tooltip :move-nodes))
-        :on-click on-select-edit-mode}
-       i/move]]
+       ;; Edit mode
+      [: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}
+       move-icon]]
 
      [:div {:class (stl/css :sub-actions-group)}
-            ;; Add Node
-      [:button
-       {:disabled (not (:add-node enabled-buttons))
-        :title (tr "workspace.path.actions.add-node" (sc/get-tooltip :add-node))
-        :on-click on-add-node}
-       i/add]
+      ;; Add Node
+      [: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}
+       add-icon]
 
-            ;; Remove node
-      [:button
-       {:disabled (not (:remove-node enabled-buttons))
-        :title (tr "workspace.path.actions.delete-node" (sc/get-tooltip :delete-node))
-        :on-click on-remove-node}
-       i/remove-icon]]
+      ;; Remove node
+      [: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}
+       remove-icon]]
 
      [:div {:class (stl/css :sub-actions-group)}
-            ;; Merge Nodes
-      [:button
-       {:disabled (not (:merge-nodes enabled-buttons))
-        :title (tr "workspace.path.actions.merge-nodes" (sc/get-tooltip :merge-nodes))
-        :on-click on-merge-nodes}
-       i/merge-nodes]
+      ;; Merge Nodes
+      [: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}
+       merge-nodes-icon]
 
-            ;; Join Nodes
-      [:button
-       {:disabled (not (:join-nodes enabled-buttons))
-        :title (tr "workspace.path.actions.join-nodes" (sc/get-tooltip :join-nodes))
-        :on-click on-join-nodes}
-       i/join-nodes]
+      ;; Join Nodes
+      [: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}
+       join-nodes-icon]
 
-            ;; Separate Nodes
-      [:button
-       {:disabled (not (:separate-nodes enabled-buttons))
-        :title (tr "workspace.path.actions.separate-nodes" (sc/get-tooltip :separate-nodes))
-        :on-click on-separate-nodes}
-       i/separate-nodes]]
+      ;; Separate Nodes
+      [: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}
+       separate-nodes-icon]]
 
-           ;; Make Corner
      [:div {:class (stl/css :sub-actions-group)}
-      [:button
-       {:disabled (not (:make-corner enabled-buttons))
-        :title (tr "workspace.path.actions.make-corner" (sc/get-tooltip :make-corner))
-        :on-click on-make-corner}
-       i/to-corner]
+      ; 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}
+       to-corner-icon]
 
-            ;; Make Curve
-      [:button
-       {:disabled (not (:make-curve enabled-buttons))
-        :title (tr "workspace.path.actions.make-curve" (sc/get-tooltip :make-curve))
-        :on-click on-make-curve}
-       i/to-curve]]
-
-           ;; Toggle snap
+      ;; Make Curve
+      [: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}
+       to-curve-icon]]
      [:div {:class (stl/css :sub-actions-group)}
-      [:button
-       {:class  (stl/css-case :is-toggled snap-toggled)
-        :title (tr "workspace.path.actions.snap-nodes" (sc/get-tooltip :snap-nodes))
-        :on-click on-toggle-snap}
-       i/snap-nodes]]]))
+      ;; 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}
+       snap-nodes-icon]]]))
 

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

@@ -19,41 +19,42 @@
   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 {
-    position: relative;
-    display: flex;
-    align-items: center;
-    margin: 0;
-    opacity: $op-10;
-    transition: opacity 0.3s ease;
+.sub-actions-group {
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin: 0;
+  opacity: $op-10;
+  transition: opacity 0.3s ease;
+}
 
-    button {
-      @extend .button-tertiary;
-      height: $s-36;
-      width: $s-36;
-      flex-shrink: 0;
-      background-color: transparent;
-      border-radius: $s-8;
-      border: none;
-      margin: 0 $s-2;
-      &.is-toggled {
-        background-color: var(--button-radio-background-color-active);
-        svg {
-          stroke: var(--button-radio-foreground-color-active);
-        }
-      }
+.topbar-btn {
+  --pathbar-icon-color: var(--color-foreground-secondary);
+  @extend .button-tertiary;
+  height: $s-36;
+  width: $s-36;
+  flex-shrink: 0;
+  background-color: transparent;
+  border-radius: $s-8;
+  border: none;
+  margin: 0 $s-2;
 
-      svg {
-        @extend .button-icon;
-        stroke: var(--color-foreground-secondary);
-      }
-    }
+  &.is-toggled {
+    --pathbar-icon-color: var(--button-radio-foreground-color-active);
+    background-color: var(--button-radio-background-color-active);
+  }
+
+  .pathbar-icon {
+    @extend .button-icon;
+    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,40 +16,39 @@
   top: calc(var(--actions-toolbar-position-y) + var(--actions-toolbar-offset-y));
   left: 50%;
   z-index: $z-index-20;
+}
 
-  .viewport-actions-container {
-    @include flexRow;
-    background: var(--panel-background-color);
-    border-radius: $br-12;
-    box-shadow: 0 0 $s-12 0 var(--menu-shadow-color);
-    gap: $s-8;
-    height: $s-48;
-    margin-left: -50%;
-    padding: $s-8;
-    cursor: initial;
-    pointer-events: initial;
-    width: $s-400;
-  }
+.viewport-actions-path {
+  z-index: $z-index-3;
+}
 
-  .viewport-actions-title {
-    flex: 1;
-    font-size: $fs-12;
-    color: var(--color-foreground-secondary);
-    padding-left: $s-8;
-  }
+.viewport-actions-container {
+  @include flexRow;
+  background: var(--panel-background-color);
+  border-radius: $br-12;
+  box-shadow: 0 0 $s-12 0 var(--menu-shadow-color);
+  gap: $s-8;
+  height: $s-48;
+  margin-left: -50%;
+  padding: $s-8;
+  cursor: initial;
+  pointer-events: initial;
+  width: $s-400;
+  border: $s-2 solid var(--panel-border-color);
+}
 
-  .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-title {
+  flex: 1;
+  font-size: $fs-12;
+  color: var(--color-foreground-secondary);
+  padding-left: $s-8;
+}
+
+.done-btn {
+  @extend .button-primary;
+  text-transform: uppercase;
+  padding: $s-8 $s-20;
+  font-size: $fs-11;
 }
 
 .viewport-actions-no-rulers {