Merge pull request #4277 from penpot/ladybenko-7199-fix-toolbar-position

Fix toolbar + subactions toolbar positioning

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

@@ -119,7 +119,7 @@
 
     (when-not ^boolean read-only?
       [:aside {:class (stl/css-case :main-toolbar true
-                                    :not-rulers-present (not rulers?)
+                                    :main-toolbar-no-rulers (not rulers?)
                                     :main-toolbar-hidden hide-toolbar?)}
        [:ul {:class (stl/css :main-toolbar-options)}
         [:li

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

@@ -9,7 +9,8 @@
 .main-toolbar {
   cursor: initial;
   position: absolute;
-  left: calc(50% - $s-160);
+  left: 50%;
+  transform: translateX(-50%);
   display: flex;
   align-items: center;
   flex-direction: column;
@@ -23,13 +24,19 @@
     top 0.3s,
     height 0.3s,
     opacity 0.3s;
-  &:not(.main-toolbar-hidden) {
-    top: $s-28;
-  }
+
+  --toolbar-position-y: #{$s-28};
+  --toolbar-offset-y: 0px;
+  top: calc(var(--toolbar-position-y) + var(--toolbar-offset-y));
+}
+
+.main-toolbar-no-rulers {
+  --toolbar-position-y: 0px;
+  --toolbar-offset-y: #{$s-8};
 }
 
 .main-toolbar-hidden {
-  top: $s-24;
+  --toolbar-offset-y: -#{$s-4};
   height: $s-16;
   z-index: $z-index-1;
   border-radius: 0 0 $s-8 $s-8;
@@ -88,13 +95,6 @@
   }
 }
 
-.main-toolbar.not-rulers-present {
-  top: $s-8;
-  &.hidden-toolbar {
-    top: $s-0;
-  }
-}
-
 ul.main-toolbar-panels {
   display: none;
 }

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

@@ -11,7 +11,8 @@
   pointer-events: initial;
   position: absolute;
   top: $s-12;
-  left: calc(50% - 240px);
+  left: 50%;
+  transform: translateX(-50%);
   display: flex;
   align-items: center;
   height: $s-56;

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

@@ -41,6 +41,7 @@
   (let [edition     (mf/deref refs/selected-edition)
         selected    (mf/deref refs/selected-objects)
         drawing     (mf/deref refs/workspace-drawing)
+        rulers?     (mf/deref refs/rulers?)
         drawing-obj (:object drawing)
         shape       (or drawing-obj (-> selected first))
 
@@ -69,7 +70,7 @@
        [:& view-only-actions]
 
        path-edition?
-       [:div {:class (stl/css :viewport-actions)}
+       [:div {:class (stl/css-case :viewport-actions true :viewport-actions-no-rulers (not rulers?))}
         [:& path-actions {:shape shape}]]
 
        grid-edition?

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

@@ -9,7 +9,10 @@
 .viewport-actions {
   pointer-events: none;
   position: absolute;
-  top: $s-44;
+  --actions-toolbar-position-y: #{$s-28};
+  --actions-toolbar-offset-y: #{$s-6};
+
+  top: calc(var(--actions-toolbar-position-y) + var(--actions-toolbar-offset-y));
   left: 50%;
   z-index: $z-index-20;
 
@@ -47,3 +50,7 @@
     }
   }
 }
+
+.viewport-actions-no-rulers {
+  --actions-toolbar-position-y: 0px;
+}