From 25a201bc44664807250b98978a32a6ddacf76998 Mon Sep 17 00:00:00 2001 From: Juan de la Cruz Date: Tue, 24 Mar 2020 14:38:13 +0100 Subject: [PATCH] :lipstick: change layers styles --- .../styles/main/partials/sidebar-layers.scss | 397 +++++++----------- .../styles/main/partials/sidebar-sitemap.scss | 74 ++-- .../styles/main/partials/sidebar.scss | 51 ++- .../styles/main/partials/workspace.scss | 2 +- frontend/src/uxbox/main/data/workspace.cljs | 2 +- .../src/uxbox/main/ui/workspace/sidebar.cljs | 4 +- .../main/ui/workspace/sidebar/layers.cljs | 21 +- .../main/ui/workspace/sidebar/sitemap.cljs | 13 +- 8 files changed, 260 insertions(+), 304 deletions(-) diff --git a/frontend/resources/styles/main/partials/sidebar-layers.scss b/frontend/resources/styles/main/partials/sidebar-layers.scss index c5a519b3d..026da126d 100644 --- a/frontend/resources/styles/main/partials/sidebar-layers.scss +++ b/frontend/resources/styles/main/partials/sidebar-layers.scss @@ -2,285 +2,192 @@ // 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 +// Copyright (c) 2015-2020 Andrey Antukh +// Copyright (c) 2015-2020 Juan de la Cruz -.layers-tools { - border-top: 1px solid $color-gray-20; - bottom: 0; +.element-list-body { + align-items: center; display: flex; - height: 30px; - justify-content: center; - position: absolute; + height: 35px; + padding: $x-small $small; + transition: none; width: 100%; - .layers-tools-content { - align-items: center; - display: flex; - justify-content: space-between; - margin: 0; - width: 60%; - - li { - cursor: pointer; - - svg { - fill: $color-gray-30; - height: 14px; - width: 14px; - - &:hover { - fill: $color-gray-60; - } - - } - - &.disable { - pointer-events: none; - - svg { - cursor: auto; - fill: $color-gray-60; - } - - } - - &.delete-layer { - - svg { - - &:hover { - fill: $color-danger; - } - - } - - } - - &.layer-up { - + svg { + fill: $color-gray-20; + height: 13px; + flex-shrink: 0; + margin-right: 8px; + width: 13px; + } + + &.group { + &.open { + .toggle-content { + flex-shrink: 0; + 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 $color-gray-40; - margin: 0; - } - - li { - cursor: pointer; - display: flex; - flex-direction: column; - width: 100%; - - &.dragging-TODO { - background-color: #eee; + + &:hover { + background-color: $color-primary; + + svg { + fill: $color-gray-60 !important; } - - &.open { - - ul { - - li { - - .element-list-body { - border-style: dashed; - } - - } - + + .element-icon, + .element-actions { + + svg { + fill: $color-gray-60; } - } - - .element-list-body { - align-items: center; + + .element-actions > * { display: flex; - padding: $x-small $small; - transition: none; - width: 100%; + } + + span { + color: $color-gray-60; + } + + .toggle-content { + margin-left: $x-small; svg { fill: $color-gray-60; - height: 13px; - margin-right: 8px; - width: 13px; } + } + } + &.selected { + + svg { + fill: $color-primary; + } + + .element-icon { + + svg { + fill: $color-primary; + } + } + + span { + color: $color-primary; + } + + &:hover { + background-color: $color-primary; + + .element-icon, .element-actions { - align-items: center; - display: flex; - flex-shrink: 0; - width: 55px; - - .block-element { - - svg { - fill: $color-gray-30; - } - } - } - - .element-icon { - svg { - fill: $color-gray-30; + fill: $color-gray-60; } - } - .toggle-content { - margin-left: auto; - width: 12px; - - svg { - fill: $color-gray-30; - transform: rotate(90deg); - width: 10px; - } - - &.inverse { - svg { transform: rotate(270deg); } - } - - &:hover { - - svg { - fill: $color-gray-20; - } - - } - + .element-name { + color: $color-gray-60; } + } + } + + &.drag-top { + border-top: 40px solid $color-gray-60 !important; + } + + &.drag-bottom { + border-bottom: 40px solid $color-gray-60 !important; + } + + &.drag-inside { + border: 2px solid $color-primary !important; + } +} - &.group { +.element-icon { + svg { + fill: $color-gray-30; + } +} - &.open { +input.element-name { + max-width: 130px; + width: 100%; +} - .toggle-content { - flex-shrink: 0; +span.element-name { + color: $color-gray-20; + display: block; + font-size: $fs13; + max-width: 130px; + min-width: 40px; + min-height: 16px; + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; +} + +.element-actions { + display: flex; + flex-shrink: 0; + height: 14px; + margin-left: auto; + position: relative; + width: 32px; - svg { - transform: rotate(270deg); - } - - } - - } - - } - - span.element-name { - min-width: 40px; - min-height: 16px; - display: block; - - color: $color-gray-20; - font-size: $fs13; - overflow-x: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - &.selected { + > * { + display: none; + } + + .toggle-element, + .block-element { + left: 0; + position: absolute; + top: 0; - .element-icon { - - svg { - fill: $color-primary; - } - - } - - span { - color: $color-primary; - } - - &:hover { - background-color: $color-primary; - - .element-icon, - .element-actions { - svg { - fill: $color-gray-60; - } - } - .element-name { - color: $color-gray-60; - } - } - - } - - .selected { + &.selected { + display: flex; svg { fill: $color-gray-20; } - - } - - &:hover { - background-color: $color-primary; - - .element-icon, - .element-actions { - - svg { - fill: $color-gray-60; - } - - } - - span { - color: $color-gray-60; - } - - } - - &.drag-top { - border-top: 40px solid $color-gray-60 !important; - } - - &.drag-bottom { - border-bottom: 40px solid $color-gray-60 !important; - } - - &.drag-inside { - border: 2px solid $color-primary !important; - } - } - } - } + +.block-element { + left: 18px !important; + + svg { + fill: $color-gray-30; + } +} + +.toggle-content { + margin-left: auto; + width: 12px; + + svg { + fill: $color-gray-30; + transform: rotate(90deg); + width: 10px; + } + + &.inverse { + svg { transform: rotate(270deg); } + } + + &:hover { + svg { + fill: $color-gray-60; + } + } +} \ No newline at end of file diff --git a/frontend/resources/styles/main/partials/sidebar-sitemap.scss b/frontend/resources/styles/main/partials/sidebar-sitemap.scss index 00eae95a6..69703eb86 100644 --- a/frontend/resources/styles/main/partials/sidebar-sitemap.scss +++ b/frontend/resources/styles/main/partials/sidebar-sitemap.scss @@ -6,34 +6,8 @@ // Copyright (c) 2015-2016 Juan de la Cruz .sitemap { - .tool-window-bar { - - .add-page { - align-items: center; - background-color: $color-gray-60; - border-radius: $br-small; - border: 1px solid transparent; - cursor: pointer; - display: flex; - justify-content: center; - margin-left: auto; - padding: $x-small; - - svg { - fill: $color-gray-20; - height: 16px; - width: 16px; - } - - &:hover { - background-color: $color-primary; - - svg { - fill: $color-gray-60; - } - } - } - } + flex: none !important; + max-height: 190px; .element-list { @@ -74,13 +48,7 @@ fill: $color-gray-60; height: 15px; margin-left: $x-small; - opacity: .6; width: 15px; - - &:hover { - opacity: 1; - } - } } @@ -104,7 +72,6 @@ .page-actions { display: flex; - @include animation(0s,.3s,fadeIn); } } @@ -141,7 +108,6 @@ } - .element-list-body { align-items: center; display: flex; @@ -169,5 +135,39 @@ } } } - +} + +.add-page, +.collapse-pages { + align-items: center; + background-color: transparent; + border-radius: $br-small; + border: 1px solid transparent; + cursor: pointer; + display: flex; + justify-content: center; + margin-left: auto; + padding: $x-small; + + svg { + fill: $color-gray-20; + height: 16px; + width: 16px; + } + + &:hover { + background-color: $color-primary; + + svg { + fill: $color-gray-60; + } + } +} + +.collapse-pages { + margin-left: $small; + + svg { + transform: rotate(90deg); + } } diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss index 0200bfda2..12dfc127b 100644 --- a/frontend/resources/styles/main/partials/sidebar.scss +++ b/frontend/resources/styles/main/partials/sidebar.scss @@ -88,12 +88,51 @@ } - .tool-window-content { - display: flex; - flex-wrap: wrap; - overflow-y: auto; - padding-bottom: $medium; - height: 100%; + + + } + } +} +.tool-window-content { + display: flex; + flex-wrap: wrap; + overflow-y: auto; + height: 100%; +} + +.element-list { + margin: 0; + width: 100%; + + ul { + border-left: 9px solid $color-gray-50; + margin: 0; + + li { + border-left: 1px solid $color-gray-40; + } + } + + li { + cursor: pointer; + display: flex; + flex-direction: column; + width: 100%; + + &.dragging-TODO { + background-color: #eee; + } + + &.open { + + ul { + + li { + + .element-list-body { + border-style: dashed; + } + } } } } diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss index daae06512..1d453d55a 100644 --- a/frontend/resources/styles/main/partials/workspace.scss +++ b/frontend/resources/styles/main/partials/workspace.scss @@ -41,7 +41,7 @@ } &:hover { - background-color: $color-gray-lightest; + background-color: $color-primary-lighter; } } } diff --git a/frontend/src/uxbox/main/data/workspace.cljs b/frontend/src/uxbox/main/data/workspace.cljs index 7e005711f..6ee707b35 100644 --- a/frontend/src/uxbox/main/data/workspace.cljs +++ b/frontend/src/uxbox/main/data/workspace.cljs @@ -270,7 +270,7 @@ (declare initialize-alignment) -(def default-layout #{:sitemap :layers :element-options :rules}) +(def default-layout #{:sitemap :sitemap-pages :layers :element-options :rules}) (def workspace-default {:zoom 1 diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar.cljs index f3fa78980..6e8d5756c 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar.cljs @@ -28,7 +28,9 @@ [:div.settings-bar-inside {:data-layout (str/join "," layout)} (when (contains? layout :sitemap) - [:& sitemap-toolbox {:file file :page page}]) + [:& sitemap-toolbox {:file file + :page page + :layout layout}]) (when (contains? layout :document-history) [:& history-toolbox]) (when (contains? layout :layers) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs index ea4cbfd3f..9393a8730 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs @@ -148,15 +148,15 @@ [:div.element-list-body {:class (dom/classnames :selected selected?) :on-click select-shape :on-double-click #(dom/stop-propagation %)} + [:& element-icon {:shape item}] + [:& layer-name {:shape item}] [:div.element-actions - [:div.toggle-element {:class (when-not (:hidden item) "selected") + [:div.toggle-element {:class (when (:hidden item) "selected") :on-click toggle-visibility} i/eye] [:div.block-element {:class (when (:blocked item) "selected") :on-click toggle-blocking} - i/lock]] - [:& element-icon {:shape item}] - [:& layer-name {:shape item}]]])) + i/lock]]]])) (mf/defc layer-frame-item {:wrap [#(mf/wrap-memo % =)]} @@ -234,6 +234,8 @@ [:div.element-list-body {:class (dom/classnames :selected selected?) :on-click select-shape :on-double-click #(dom/stop-propagation %)} + [:div.element-icon i/artboard] + [:& layer-name {:shape item}] [:div.element-actions [:div.toggle-element {:class (when-not (:hidden item) "selected") :on-click toggle-visibility} @@ -241,8 +243,6 @@ #_[:div.block-element {:class (when (:blocked item) "selected") :on-click toggle-blocking} i/lock]] - [:div.element-icon i/folder] - [:& layer-name {:shape item}] [:span.toggle-content {:on-click toggle-collapse :class (when-not collapsed? "inverse")} @@ -255,15 +255,17 @@ [:& layer-frame-item {:item item :key (:id item) + :selected selected :objects objects :index index}] [:& layer-item {:item item + :selected selected :index index :key (:id item)}])))])])) (mf/defc layers-tree - {:wrap [mf/wrap-memo]} + {::mf/wrap [mf/wrap-memo]} [props] (let [selected (mf/deref refs/selected-shapes) data (mf/deref refs/workspace-data) @@ -276,10 +278,12 @@ [:& layer-frame-item {:item item :key (:id item) + :selected selected :objects objects :index index}] [:& layer-item {:item item + :selected selected :index index :key (:id item)}])))])) @@ -296,8 +300,7 @@ [:div#layers.tool-window [:div.tool-window-bar [:div.tool-window-icon i/layers] - ;[:span (t locale "workspace.sidebar.layers")] - [:span "Page 1"] + [:span (:name page)] #_[:div.tool-window-close {:on-click on-click} i/close]] [:div.tool-window-content [:& layers-tree]]])) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs index 4810cfdcf..a807ea2a0 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs @@ -126,12 +126,17 @@ ;; --- Sitemap Toolbox (mf/defc sitemap-toolbox - [{:keys [file page] :as props}] + [{:keys [file page layout] :as props}] (let [on-create-click #(st/emit! dw/create-empty-page) + toggle-layout #(st/emit! (dw/toggle-layout-flag %)) locale (i18n/use-locale)] [:div.sitemap.tool-window [:div.tool-window-bar [:span (t locale "workspace.sidebar.sitemap")] - [:div.add-page {:on-click on-create-click} i/close]] - [:div.tool-window-content - [:& pages-list {:file file :current-page page}]]])) + [:div.add-page {:on-click on-create-click} i/close] + [:div.collapse-pages {:on-click #(st/emit! (dw/toggle-layout-flag :sitemap-pages))} + i/arrow-slide]] + + (when (contains? layout :sitemap-pages) + [:div.tool-window-content + [:& pages-list {:file file :current-page page}]])]))