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

✨ Resizeable panels

Browse source
This commit is contained in:
alonso.torres 2022-01-26 15:16:21 +01:00
parent acc3d00fd5
commit 1599b2644a
19 changed files with 307 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

7
frontend/resources/styles/common/base.scss
View file

@ -11,6 +11,13 @@ body {
display: flex;
flex-direction: column;
font-family: "worksans", sans-serif;
width: 100vw;
height: 100vh;
overflow: hidden;
}
#app {
width: 100vw;
height: 100vh;
overflow: hidden;
}

3
frontend/resources/styles/main/layouts/handoff.scss
View file

@ -1,4 +1,5 @@
$width-settings-bar: 16rem;
$width-left-toolbar: 48px;
$width-settings-bar: 256px;
.handoff-layout {
height: 100vh;

21
frontend/resources/styles/main/partials/color-palette.scss
View file

@ -10,10 +10,7 @@
background-color: $color-gray-50;
border-top: 1px solid $color-gray-60;
display: flex;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 11;
& .right-arrow,
@ -46,16 +43,21 @@
@include animation(0, 0.5s, fadeOutDown);
}
&.left-sidebar-open {
left: 303px;
width: calc(100% - 303px);
}
& .context-menu-items {
bottom: 1.5rem;
top: initial;
min-width: 10rem;
}
& .resize-area {
position: absolute;
height: 8px;
width: 100%;
z-index: 10;
cursor: ns-resize;
top: 0;
left: 0;
}
}
.color-palette-actions {
@ -119,7 +121,6 @@
display: flex;
overflow: hidden;
width: 100%;
height: 5rem;
padding: 0.25rem;
&.size-small {

9
frontend/resources/styles/main/partials/left-toolbar.scss
View file

@ -5,16 +5,8 @@
// Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
$width-left-toolbar: 48px;
.left-toolbar {
background-color: $color-gray-50;
bottom: 0;
height: 100%;
position: fixed;
left: 0;
width: $width-left-toolbar;
z-index: 11;
}
.left-toolbar-inside {
@ -23,7 +15,6 @@ $width-left-toolbar: 48px;
display: flex;
flex-direction: column;
overflow: visible;
padding-top: 48px;
height: 100%;
}

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

@ -5,29 +5,14 @@
// Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
$width-settings-bar: 16rem;
// This width is also used in update-viewport-size at frontend/src/app/main/data/workspace.cljs
.settings-bar {
background-color: $color-gray-50;
border-left: 1px solid $color-gray-60;
bottom: 0;
height: 100%;
position: fixed;
right: 0;
width: $width-settings-bar;
&.expanded {
width: $width-settings-bar * 3;
}
z-index: 10;
overflow-y: auto;
position: relative;
&.settings-bar-left {
border-left: none;
border-right: 1px solid $color-gray-60;
left: 48px;
}
.settings-bar-inside {
@ -64,7 +49,6 @@ $width-settings-bar: 16rem;
}
flex-direction: column;
padding-top: 48px;
height: 100%;
.tool-window {
@ -163,6 +147,22 @@ $width-settings-bar: 16rem;
height: auto;
}
}
& .resize-area {
position: absolute;
width: 8px;
height: 100%;
z-index: 10;
cursor: ew-resize;
}
&.settings-bar-left .resize-area {
right: -8px;
}
&.settings-bar-right .resize-area {
left: -8px;
}
}
.tool-window-content {
@ -204,6 +204,7 @@ $width-settings-bar: 16rem;
}
}
}
}
.element-list.pages-list {

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

@ -5,14 +5,12 @@
// Copyright (c) UXBOX Labs SL
.workspace-header {
position: relative;
align-items: center;
background-color: $color-gray-50;
border-bottom: 1px solid $color-gray-60;
display: flex;
height: 48px;
padding: $size-1 $size-4 $size-1 55px;
position: relative;
z-index: 12;
justify-content: space-between;
.main-icon {

77
frontend/resources/styles/main/partials/workspace.scss
View file

@ -5,10 +5,70 @@
// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
$width-left-toolbar: 48px;
$width-settings-bar: 256px;
$width-settings-bar-min: 255px;
$width-settings-bar-max: 500px;
$height-palette: 79px;
$height-palette-min: 54px;
$height-palette-max: 80px;
#workspace {
width: 100vw;
height: 100vh;
user-select: none;
display: grid;
grid-template-areas: "header header header header"
"toolbar left-sidebar viewport right-sidebar"
"toolbar left-sidebar color-palette right-sidebar";
grid-template-rows: auto 1fr auto;
grid-template-columns: auto auto 1fr auto;
.workspace-header {
grid-area: header;
height: 48px;
}
.left-toolbar {
grid-area: toolbar;
width: $width-left-toolbar;
}
.settings-bar.settings-bar-left {
min-width: $width-settings-bar;
max-width: 500px;
width: var(--width, $width-settings-bar);
grid-area: left-sidebar;
}
.settings-bar.settings-bar-right {
min-width: $width-settings-bar;
max-width: 500px;
width: var(--width, $width-settings-bar);
grid-area: right-sidebar;
}
.workspace-loader {
grid-area: viewport;
}
.workspace-content {
grid-area: viewport;
}
.color-palette {
grid-area: color-palette;
min-height: $height-palette-min;
max-height: $height-palette-max;
height: var(--height, $height-palette);
}
}
.workspace-context-menu {
background-color: $color-white;
border-radius: $br-small;
@ -97,7 +157,6 @@
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
svg#loader-pencil {
fill: $color-gray-50;
@ -107,12 +166,8 @@
.workspace-content {
background-color: $color-canvas;
display: flex;
height: 100%;
width: calc(100% - #{$width-left-toolbar} - 2 * #{$width-settings-bar});
padding: 0;
margin: 0;
position: fixed;
right: $width-settings-bar;
&.scrolling {
cursor: grab;
@ -171,14 +226,12 @@
}
.workspace-viewport {
height: calc(100% - 40px);
overflow: hidden;
transition: none;
width: 100%;
display: grid;
grid-template-rows: 20px 100%;
grid-template-columns: 20px 100%;
grid-template-rows: 20px 1fr;
grid-template-columns: 20px 1fr;
flex: 1;
}
.viewport {
@ -209,10 +262,14 @@
.render-shapes {
position: absolute;
width: 100%;
height: 100%;
}
.viewport-controls {
position: absolute;
width: 100%;
height: 100%;
}
}