3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-03 07:28:28 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Refactor workspace header

Browse source
This commit is contained in:
alonso.torres 2022-01-31 17:50:33 +01:00
parent ada837f7e4
commit 8c3c9a8ca4
15 changed files with 207 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

52
frontend/resources/styles/main/partials/sidebar.scss
View file

@ -17,23 +17,6 @@
& .tab-container-tabs {
padding-left: 1.5rem;
}
& button.collapse-sidebar {
background: none;
border: none;
cursor: pointer;
height: 2.5rem;
padding-top: 0.75rem;
position: absolute;
width: 1rem;
& svg {
width: 12px;
height: 12px;
fill: $color-gray-20;
transform: rotate(180deg);
}
}
}
.settings-bar-inside {
@ -181,7 +164,7 @@
}
&.settings-bar-right > .resize-area {
left: -8px;
left: -4px;
}
}
@ -243,3 +226,36 @@
width: 100%;
}
}
button.collapse-sidebar {
background: none;
border: none;
cursor: pointer;
height: 2.5rem;
padding-top: 0.75rem;
position: absolute;
width: 1rem;
& svg {
width: 12px;
height: 12px;
fill: $color-gray-20;
transform: rotate(180deg);
}
&.collapsed {
background: $color-black;
left: 48px;
top: 48px;
width: 18px;
height: 24px;
padding: 0;
border-radius: 0px 4px 4px 0px;
& svg {
width: 8px;
height: 8px;
transform: rotate(0deg);
}
}
}

51
frontend/resources/styles/main/partials/workspace-header.scss
View file

@ -13,6 +13,28 @@
padding: $size-1 $size-4 $size-1 55px;
justify-content: space-between;
display: grid;
grid-template-areas: "left center right";
grid-template-columns: auto 1fr auto;
grid-template-rows: 100%;
padding: 0;
.left-area {
grid-area: left;
display: flex;
height: 100%;
}
.center-area {
grid-area: center;
}
.right-area {
grid-area: right;
display: flex;
height: 100%;
}
.main-icon {
align-items: center;
background-color: $color-gray-60;
@ -21,9 +43,6 @@
display: flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
width: 48px;
a {
@ -44,6 +63,7 @@
}
.menu-section {
margin-left: 1rem;
display: flex;
justify-content: flex-start;
align-items: center;
@ -73,6 +93,8 @@
justify-content: flex-end;
align-items: center;
position: relative;
padding-right: 1rem;
border-right: 1px solid black;
> * {
margin-left: $size-5;
@ -216,7 +238,8 @@
}
.active-users {
align-items: center;
flex: 1;
justify-content: center;
display: flex;
margin: 0;
@ -233,6 +256,26 @@
}
}
}
& button.document-history {
background: $color-gray-60;
border-radius: 3px;
border: none;
cursor: pointer;
height: 24px;
padding: 3px;
width: 24px;
& svg {
width: 18px;
fill: $color-gray-20;
height: 18px;
}
&.selected svg {
fill: $color-primary;
}
}
}
.persistence-status-widget {