From 07e2fb977c084b05f36dd0b61ec5621a59fb032d Mon Sep 17 00:00:00 2001 From: Juan de la Cruz Date: Mon, 16 Dec 2019 14:19:25 +0100 Subject: [PATCH] layers sedebar refactor --- .../styles/common/dependencies/colors.scss | 6 +- .../common/dependencies/uxbox-light.scss | 16 +- .../main/partials/sidebar-layers-v2.scss | 265 ++++++++++++++++++ .../styles/main/partials/sidebar-layers.scss | 44 ++- .../styles/main/partials/sidebar-v2.scss | 91 ++++++ .../styles/main/partials/sidebar.scss | 8 +- 6 files changed, 405 insertions(+), 25 deletions(-) create mode 100644 frontend/resources/styles/main/partials/sidebar-layers-v2.scss create mode 100644 frontend/resources/styles/main/partials/sidebar-v2.scss diff --git a/frontend/resources/styles/common/dependencies/colors.scss b/frontend/resources/styles/common/dependencies/colors.scss index 0cfc74fa4..b156ce289 100644 --- a/frontend/resources/styles/common/dependencies/colors.scss +++ b/frontend/resources/styles/common/dependencies/colors.scss @@ -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; diff --git a/frontend/resources/styles/common/dependencies/uxbox-light.scss b/frontend/resources/styles/common/dependencies/uxbox-light.scss index 5537a023e..b6650f0b3 100644 --- a/frontend/resources/styles/common/dependencies/uxbox-light.scss +++ b/frontend/resources/styles/common/dependencies/uxbox-light.scss @@ -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); diff --git a/frontend/resources/styles/main/partials/sidebar-layers-v2.scss b/frontend/resources/styles/main/partials/sidebar-layers-v2.scss new file mode 100644 index 000000000..065147f67 --- /dev/null +++ b/frontend/resources/styles/main/partials/sidebar-layers-v2.scss @@ -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 +// Copyright (c) 2015-2016 Juan de la Cruz + +.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; + } + + } + + } + +} diff --git a/frontend/resources/styles/main/partials/sidebar-layers.scss b/frontend/resources/styles/main/partials/sidebar-layers.scss index 065147f67..2dcbcb76b 100644 --- a/frontend/resources/styles/main/partials/sidebar-layers.scss +++ b/frontend/resources/styles/main/partials/sidebar-layers.scss @@ -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; } } diff --git a/frontend/resources/styles/main/partials/sidebar-v2.scss b/frontend/resources/styles/main/partials/sidebar-v2.scss new file mode 100644 index 000000000..13a6e046a --- /dev/null +++ b/frontend/resources/styles/main/partials/sidebar-v2.scss @@ -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 +// Copyright (c) 2015-2016 Juan de la Cruz + +.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; + } + + } + + } + +} diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss index 13a6e046a..e9c7470cc 100644 --- a/frontend/resources/styles/main/partials/sidebar.scss +++ b/frontend/resources/styles/main/partials/sidebar.scss @@ -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 {