Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-10 00:40:30 -05:00
Code Issues Activity

Merge pull request #4151 from penpot/ladybenko-6900-fix-palette-toolbar

Browse source 
🐛 Fix collapsed toolbar/palette position
This commit is contained in:
Eva Marco 2024-02-15 16:24:12 +01:00 committed by GitHub
commit 150fa394ff
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 71 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

109
frontend/src/app/main/ui/workspace/palette.scss
View file

@ -39,10 +39,7 @@
&.wide {
width: 100%;
}
&.mid-palette,
&.small-palette {
grid-template-columns: $s-64 auto 1fr;
}
.resize-area {
grid-area: resize;
height: $s-8;
@ -108,56 +105,62 @@
width: 100%;
min-width: 0;
}
.handler {
@include buttonStyle;
@include flexCenter;
width: $s-12;
}
.handler {
@include buttonStyle;
@include flexCenter;
width: $s-12;
height: 100%;
.handler-btn {
width: $s-4;
height: 100%;
.handler-btn {
width: $s-4;
height: 100%;
max-height: $s-40;
margin: $s-8 $s-4;
padding: 0;
border-radius: $s-4;
background-color: var(--palette-handler-background-color);
}
}
&.hidden-bts {
right: 10px;
z-index: 1;
width: 22px;
grid-template-columns: $s-8 auto 1fr;
max-height: $s-40;
margin: $s-8 $s-4;
padding: 0;
&.small-palette,
&.mid-palette {
right: 10px;
}
.palette-btn-list {
opacity: $op-0;
visibility: hidden;
width: 0;
.palette-item {
opacity: $op-0;
visibility: hidden;
z-index: 0;
}
}
.resize-area {
visibility: hidden;
z-index: 0;
width: 0;
}
.palette-actions {
visibility: hidden;
z-index: 0;
}
.palette {
visibility: hidden;
z-index: 0;
}
.handler {
padding-bottom: $s-8;
}
border-radius: $s-4;
background-color: var(--palette-handler-background-color);
}
}
.mid-palette,
.small-palette {
grid-template-columns: $s-64 auto 1fr;
}
.hidden-bts {
right: $s-2;
z-index: $z-index-1;
width: 22px;
grid-template-columns: $s-8 auto 1fr;
padding: 0;
border-inline-start: 0;
border-start-start-radius: 0;
border-end-start-radius: 0;
.palette-btn-list {
opacity: $op-0;
visibility: hidden;
width: 0;
.palette-item {
opacity: $op-0;
visibility: hidden;
z-index: 0;
}
}
.resize-area {
visibility: hidden;
z-index: 0;
width: 0;
}
.palette-actions {
visibility: hidden;
z-index: 0;
}
.palette {
visibility: hidden;
z-index: 0;
}
.handler {
padding-bottom: $s-8;
}
}

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

@ -124,9 +124,6 @@
}
}
&.small-item {
.typography-name {
height: $s-12;
}
.typography-data,
.typography-font {
display: none;

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

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

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

@ -9,7 +9,6 @@
.main-toolbar {
cursor: initial;
position: absolute;
top: $s-28;
left: calc(50% - $s-160);
display: flex;
align-items: center;
@ -24,6 +23,20 @@
top 0.3s,
height 0.3s,
opacity 0.3s;
&:not(.main-toolbar-hidden) {
top: $s-28;
}
}
.main-toolbar-hidden {
top: $s-24;
height: $s-16;
z-index: $z-index-1;
border-radius: 0 0 $s-8 $s-8;
border-block-start: 0;
.main-toolbar-options {
opacity: $op-0;
}
}
.main-toolbar-options {
@ -76,16 +89,6 @@
}
}
.main-toolbar.hidden-toolbar {
top: $s-20;
height: $s-16;
z-index: $z-index-1;
border-radius: 0 0 $s-8 $s-8;
.main-toolbar-options {
opacity: $op-0;
}
}
.main-toolbar.not-rulers-present {
top: $s-8;
&.hidden-toolbar {