Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-13 18:48:37 -05:00
Code Issues Activity

layers sedebar refactor

Browse source
This commit is contained in:
Juan de la Cruz 2019-12-16 14:19:25 +01:00
parent 861d1041b6
commit 07e2fb977c
6 changed files with 405 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/resources/styles/common/dependencies/colors.scss
View file

@ -31,8 +31,10 @@ $color-gray-light: mix($color-gray, $color-white, $mix-percentage-light);
$color-gray-lighter: mix($color-gray, $color-white, $mix-percentage-lighter);
$color-gray-dark: mix($color-gray, $color-black, $mix-percentage-dark);
$color-gray-darker: mix($color-gray, $color-black, $mix-percentage-darker);
$color-gray-30: #b1b2b5;
$color-gray-40: #7B7D85;
$color-gray-10: #E3E3E3;
$color-gray-20: #b1b2b5;
$color-gray-30: #7B7D85;
$color-gray-40: #64666A;
$color-gray-50: #303236;
$color-gray-60: #1F1F1F;

16
frontend/resources/styles/common/dependencies/uxbox-light.scss
View file

@ -24,19 +24,19 @@ $secondary-ui-bg: $color-gray-60;
$dark-ui-bg: mix($ui-flavour, $color-white, $mix-percentage-light);
// Border color
$intense-ui-border: $ui-flavour;
$medium-ui-border: mix($ui-flavour, $color-white, $mix-percentage-light);
$intense-ui-border: $color-gray-40;
$medium-ui-border: $color-gray-60;
$soft-ui-border: $color-gray-60;
// Icon colors
$intense-ui-icons: $color-gray-30;
$medium-ui-icons: $color-gray-40;
$soft-ui-icons: mix($ui-flavour, $color-white, $mix-percentage-lighter);
$intense-ui-icons: $color-gray-20;
$medium-ui-icons: $color-gray-30;
$soft-ui-icons: $color-gray-60;
// Text colors
$intense-ui-text: mix($ui-flavour, $color-black, $mix-percentage-darker);
$medium-ui-text: $ui-flavour;
$soft-ui-text: mix($ui-flavour, $color-white, $mix-percentage-light);
$intense-ui-text: $color-gray-60;
$medium-ui-text: $color-gray-20;
$soft-ui-text: $color-gray-10;
// Canvas colors
$canvas-bg: mix($ui-flavour, $color-white, $mix-percentage-lighter);

265
frontend/resources/styles/main/partials/sidebar-layers-v2.scss Normal file
View file

@ -0,0 +1,265 @@
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
.layers-tools {
border-top: 1px solid $medium-ui-border;
bottom: 0;
display: flex;
height: 30px;
justify-content: center;
position: absolute;
width: 100%;
.layers-tools-content {
align-items: center;
display: flex;
justify-content: space-between;
margin: 0;
width: 60%;
li {
cursor: pointer;
svg {
fill: $medium-ui-icons;
height: 14px;
width: 14px;
&:hover {
fill: $intense-ui-text;
}
}
&.disable {
pointer-events: none;
svg {
cursor: auto;
fill: $soft-ui-icons;
}
}
&.delete-layer {
svg {
&:hover {
fill: $color-danger;
}
}
}
&.layer-up {
svg {
transform: rotate(270deg);
}
}
&.layer-down {
svg {
transform: rotate(90deg);
}
}
&.layer-top {
svg {
transform: rotate(180deg);
}
}
}
}
}
.element-list {
margin: 0;
width: 100%;
ul {
border-left: 6px solid $intense-ui-border;
margin: 0;
}
li {
cursor: pointer;
display: flex;
flex-direction: column;
width: 100%;
&.dragging-TODO {
background-color: #eee;
}
&.open {
ul {
li {
.element-list-body {
border-style: dashed;
}
}
}
}
.element-list-body {
align-items: center;
border-bottom: 1px solid $soft-ui-border;
display: flex;
padding: $small;
transition: none;
width: 100%;
svg {
fill: $soft-ui-icons;
height: 13px;
margin-right: 8px;
width: 13px;
}
.element-actions {
align-items: center;
display: flex;
flex-shrink: 0;
width: 62px;
}
.element-icon {
svg {
fill: $medium-ui-icons;
}
}
.toggle-content {
margin-left: auto;
width: 12px;
svg {
fill: $intense-ui-icons;
transform: rotate(90deg);
width: 10px;
}
&.inverse {
svg { transform: rotate(270deg); }
}
&:hover {
svg {
fill: $medium-ui-icons;
}
}
}
&.group {
&.open {
.toggle-content {
flex-shrink: 0;
svg {
transform: rotate(270deg);
}
}
}
}
span.element-name {
min-width: 40px;
min-height: 16px;
display: block;
color: $medium-ui-text;
font-size: $fs13;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&.selected {
.element-icon {
svg {
fill: $main-ui-color;
}
}
span {
color: $main-ui-color;
}
}
.selected {
svg {
fill: $intense-ui-icons;
}
}
&:hover {
border-color: $main-ui-color;
.element-icon {
svg {
fill: $intense-ui-icons;
}
}
span {
color: $intense-ui-text;
}
}
&.drag-top {
border-top: 40px solid $soft-ui-border !important;
}
&.drag-bottom {
border-bottom: 40px solid $soft-ui-border !important;
}
&.drag-inside {
border: 2px solid $main-ui-color !important;
}
}
}
}

44
frontend/resources/styles/main/partials/sidebar-layers.scss
View file

@ -124,9 +124,10 @@
.element-list-body {
align-items: center;
border-bottom: 1px solid $soft-ui-border;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
display: flex;
padding: $small;
padding: $x-small $small;
transition: none;
width: 100%;
@ -206,17 +207,38 @@
}
&.selected {
.element-icon {
background-color: $main-ui-color;
.selected {
svg {
fill: $main-ui-color;
fill: $soft-ui-icons;
}
}
.element-icon {
svg {
fill: $soft-ui-icons;
}
}
span {
color: $main-ui-color;
color: $intense-ui-text;
}
&:hover {
.element-icon {
svg {
fill: $soft-ui-icons;
}
}
.element-name {
color: $intense-ui-text;
}
}
}
@ -235,13 +257,13 @@
.element-icon {
svg {
fill: $intense-ui-icons;
fill: $main-ui-color;
}
}
span {
color: $intense-ui-text;
color: $main-ui-color;
}
}

91
frontend/resources/styles/main/partials/sidebar-v2.scss Normal file
View file

@ -0,0 +1,91 @@
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
.settings-bar {
background-color: $primary-ui-bg;
bottom: 0;
height: 100%;
position: fixed;
right: 0;
width: 230px;
z-index: 10;
&.settings-bar-left {
left: 0
}
.settings-bar-inside {
align-items: center;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
padding-top: 50px;
height: 100%;
.tool-window {
border-bottom: 1px solid $medium-ui-border;
display: flex;
flex-direction: column;
flex: 1;
width: 100%;
.tool-window-bar {
align-items: center;
border-bottom: 1px solid $medium-ui-border;
display: flex;
flex-shrink: 0;
padding: 2px $x-small;
svg {
fill: $intense-ui-icons;
height: 12px;
width: 12px;
}
span {
color: $intense-ui-text;
font-weight: bold;
}
.tool-window-icon {
margin-right: $small;
}
.tool-window-close {
cursor: pointer;
margin-left: auto;
transform: rotate(45deg);
&:hover {
svg {
fill: $color-danger;
}
}
}
}
.tool-window-content {
display: flex;
flex-wrap: wrap;
overflow-y: auto;
padding-bottom: $medium;
}
&#layers {
padding-bottom: 30px;
}
}
}
}

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

@ -36,10 +36,9 @@
.tool-window-bar {
align-items: center;
border-bottom: 1px solid $medium-ui-border;
display: flex;
flex-shrink: 0;
padding: 2px $x-small;
padding: $small;
svg {
fill: $intense-ui-icons;
@ -48,12 +47,13 @@
}
span {
color: $intense-ui-text;
font-weight: bold;
color: $soft-ui-text;
font-size: $fs14;
}
.tool-window-icon {
margin-right: $small;
display: none;
}
.tool-window-close {