3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-11 21:16:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
Fix toolbar + subactions toolbar positioning
This commit is contained in:
Alejandro 2024-03-18 06:33:59 +01:00 • committed by GitHub
commit 319cbe02cc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 25 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/main/ui/workspace/top_toolbar.cljs
View file

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

24
frontend/src/app/main/ui/workspace/top_toolbar.scss
View file

@ -9,7 +9,8 @@
.main-toolbar { .main-toolbar {
cursor: initial; cursor: initial;
position: absolute; position: absolute;
left: calc(50% - $s-160); left: 50%;
transform: translateX(-50%);
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
@ -23,13 +24,19 @@
top 0.3s, top 0.3s,
height 0.3s, height 0.3s,
opacity 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 { .main-toolbar-hidden {
top: $s-24; --toolbar-offset-y: -#{$s-4};
height: $s-16; height: $s-16;
z-index: $z-index-1; z-index: $z-index-1;
border-radius: 0 0 $s-8 $s-8; 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 { ul.main-toolbar-panels {
display: none; display: none;
} }

3
frontend/src/app/main/ui/workspace/viewport/path_actions.scss
View file

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

3
frontend/src/app/main/ui/workspace/viewport/top_bar.cljs
View file

@ -41,6 +41,7 @@
(let [edition (mf/deref refs/selected-edition) (let [edition (mf/deref refs/selected-edition)
selected (mf/deref refs/selected-objects) selected (mf/deref refs/selected-objects)
drawing (mf/deref refs/workspace-drawing) drawing (mf/deref refs/workspace-drawing)
rulers? (mf/deref refs/rulers?)
drawing-obj (:object drawing) drawing-obj (:object drawing)
shape (or drawing-obj (-> selected first)) shape (or drawing-obj (-> selected first))
@ -69,7 +70,7 @@
[:& view-only-actions] [:& view-only-actions]
path-edition? 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}]] [:& path-actions {:shape shape}]]
grid-edition? grid-edition?

9
frontend/src/app/main/ui/workspace/viewport/top_bar.scss
View file

@ -9,7 +9,10 @@
.viewport-actions { .viewport-actions {
pointer-events: none; pointer-events: none;
position: absolute; 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%; left: 50%;
z-index: $z-index-20; z-index: $z-index-20;
@ -47,3 +50,7 @@
} }
} }
} }
.viewport-actions-no-rulers {
--actions-toolbar-position-y: 0px;
}