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 1/6] :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}]])])) From 79d0d56daf59074dcf13dbf7791e0389086323bd Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 27 Mar 2020 15:43:09 +0100 Subject: [PATCH 2/6] :fire: fixed grid layout --- .../styles/main/partials/sidebar-sitemap.scss | 1 - .../styles/main/partials/sidebar.scss | 25 ++++++++++++++++--- .../uxbox/main/ui/workspace/left_toolbar.cljs | 2 +- 3 files changed, 22 insertions(+), 6 deletions(-) diff --git a/frontend/resources/styles/main/partials/sidebar-sitemap.scss b/frontend/resources/styles/main/partials/sidebar-sitemap.scss index 69703eb86..301b40c80 100644 --- a/frontend/resources/styles/main/partials/sidebar-sitemap.scss +++ b/frontend/resources/styles/main/partials/sidebar-sitemap.scss @@ -7,7 +7,6 @@ .sitemap { flex: none !important; - max-height: 190px; .element-list { diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss index 12dfc127b..73d55a0a9 100644 --- a/frontend/resources/styles/main/partials/sidebar.scss +++ b/frontend/resources/styles/main/partials/sidebar.scss @@ -22,18 +22,35 @@ align-items: center; display: grid; grid-template-columns: 100%; - + + &[data-layout*='sitemap-pages'] { + grid-template-rows: auto; + } + &[data-layout*='layers'] { - grid-template-rows: 30% 70%; + grid-template-rows: auto 1fr; } &[data-layout*='libraries'] { - grid-template-rows: 100%; + grid-template-rows: auto 1fr; + } + + &[data-layout*='layers'][data-layout*='sitemap-pages'] { + grid-template-rows: 12rem 1fr; + } + + &[data-layout*='libraries'][data-layout*='sitemap-pages'] { + grid-template-rows: 12rem 1fr; } &[data-layout*='layers'][data-layout*='libraries'] { - grid-template-rows: 15% 25% 60%; + grid-template-rows: auto 30% 1fr; } + + &[data-layout*='layers'][data-layout*='libraries'][data-layout*='sitemap-pages'] { + grid-template-rows: 12rem 25% 1fr; + } + flex-direction: column; overflow: hidden; diff --git a/frontend/src/uxbox/main/ui/workspace/left_toolbar.cljs b/frontend/src/uxbox/main/ui/workspace/left_toolbar.cljs index 3e3cdb29e..af84435fc 100644 --- a/frontend/src/uxbox/main/ui/workspace/left_toolbar.cljs +++ b/frontend/src/uxbox/main/ui/workspace/left_toolbar.cljs @@ -68,7 +68,7 @@ [:li.tooltip.tooltip-right {:alt "Layers" :class (when (contains? layout :layers) "selected") - :on-click #(st/emit! (dw/toggle-layout-flag :layers :sitemap))} + :on-click #(st/emit! (dw/toggle-layout-flag :layers))} i/layers] [:li.tooltip.tooltip-right {:alt "Libraries" From c4caba9016b482c56141c759fe43615f941968da Mon Sep 17 00:00:00 2001 From: Juan de la Cruz Date: Fri, 27 Mar 2020 21:41:12 +0100 Subject: [PATCH 3/6] :bug: Fix minor style bugs. --- .../resources/styles/main/partials/sidebar-sitemap.scss | 6 +++--- .../resources/styles/main/partials/workspace-libraries.scss | 5 +++-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/frontend/resources/styles/main/partials/sidebar-sitemap.scss b/frontend/resources/styles/main/partials/sidebar-sitemap.scss index 301b40c80..abf765324 100644 --- a/frontend/resources/styles/main/partials/sidebar-sitemap.scss +++ b/frontend/resources/styles/main/partials/sidebar-sitemap.scss @@ -150,15 +150,15 @@ svg { fill: $color-gray-20; - height: 16px; - width: 16px; + height: 0.7rem; + width: 0.7rem; } &:hover { background-color: $color-primary; svg { - fill: $color-gray-60; + fill: $color-gray-60 !important; } } } diff --git a/frontend/resources/styles/main/partials/workspace-libraries.scss b/frontend/resources/styles/main/partials/workspace-libraries.scss index 8c6b1e281..b9bb604f8 100644 --- a/frontend/resources/styles/main/partials/workspace-libraries.scss +++ b/frontend/resources/styles/main/partials/workspace-libraries.scss @@ -12,6 +12,7 @@ .libraries-window-bar-title { color: #F0F0F0; + font-size: $fs14; } .libraries-window-bar-options { @@ -28,8 +29,8 @@ cursor: pointer; } & svg { - width: 0.5rem; - height: 0.5rem; + width: 0.7rem; + height: 0.7rem; fill: #F0F0F0; transform: rotate(90deg); } From eaed5a580ca84f13724eb261fb858601150e6cfd Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Mon, 30 Mar 2020 09:25:44 +0200 Subject: [PATCH 4/6] :feet: adds class to icon layers --- frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs index 9393a8730..127719a89 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs @@ -145,7 +145,8 @@ :class (dom/classnames :selected selected? :dragging-TODO (:dragging? dprops))} - [:div.element-list-body {:class (dom/classnames :selected selected?) + [:div.element-list-body {:class (dom/classnames :selected selected? + :icon-layer (= (:type item) :icon)) :on-click select-shape :on-double-click #(dom/stop-propagation %)} [:& element-icon {:shape item}] From f5bced5692ba83e90c28a8559be9e835c4ab10c5 Mon Sep 17 00:00:00 2001 From: Juan de la Cruz Date: Mon, 30 Mar 2020 09:48:22 +0200 Subject: [PATCH 5/6] :lipstick: icon layer style --- .../styles/main/partials/sidebar-layers.scss | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/frontend/resources/styles/main/partials/sidebar-layers.scss b/frontend/resources/styles/main/partials/sidebar-layers.scss index 026da126d..3fa3c935f 100644 --- a/frontend/resources/styles/main/partials/sidebar-layers.scss +++ b/frontend/resources/styles/main/partials/sidebar-layers.scss @@ -15,10 +15,10 @@ svg { fill: $color-gray-20; - height: 13px; + height: 16px; flex-shrink: 0; margin-right: 8px; - width: 13px; + width: 16px; } &.group { @@ -143,6 +143,11 @@ span.element-name { position: relative; width: 32px; + svg { + height: 13px; + width: 13px; + } + > * { display: none; } @@ -190,4 +195,13 @@ span.element-name { fill: $color-gray-60; } } +} + +.icon-layer { + > svg { + background-color: rgba(255,255,255,.6); + border-radius: $br-small; + flex-shrink: 0; + padding: 1px; + } } \ No newline at end of file From 89a27b933abf90c4325591dc2e492c995b6d4269 Mon Sep 17 00:00:00 2001 From: Juan de la Cruz Date: Mon, 30 Mar 2020 09:55:46 +0200 Subject: [PATCH 6/6] :bug: Fix scroll on workspace library. --- .../resources/styles/main/partials/workspace-libraries.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/resources/styles/main/partials/workspace-libraries.scss b/frontend/resources/styles/main/partials/workspace-libraries.scss index b9bb604f8..d769a86c1 100644 --- a/frontend/resources/styles/main/partials/workspace-libraries.scss +++ b/frontend/resources/styles/main/partials/workspace-libraries.scss @@ -40,15 +40,15 @@ display: flex; flex-direction: column; height: 100%; - padding: 0.25rem; } .library-tab-content { display: grid; flex-direction: row; flex-wrap: wrap; + height: -webkit-fill-available; padding: 0.25rem; - overflow-y: scroll; + overflow-y: auto; .icons-tab & { grid-template-columns: repeat(3, 1fr);