diff --git a/frontend/resources/locales.json b/frontend/resources/locales.json index 286c000c96..f3a51bed47 100644 --- a/frontend/resources/locales.json +++ b/frontend/resources/locales.json @@ -1020,8 +1020,8 @@ "workspace.sidebar.sitemap" : { "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/sitemap.cljs:134" ], "translations" : { - "en" : "Sitemap", - "fr" : "Plan du site" + "en" : "Pages", + "fr" : "Pages" } }, "workspace.viewport.click-to-close-path" : { diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss index 38def5a4d9..d3513a006a 100644 --- a/frontend/resources/styles/common/framework.scss +++ b/frontend/resources/styles/common/framework.scss @@ -918,6 +918,19 @@ input[type=range]:focus::-ms-fill-upper { } + &.tooltip-right { + + &:hover { + + &::after { + top: 15%; + left: 120%; + } + + } + + } + &.tooltip-hover { &:hover { diff --git a/frontend/resources/styles/main.scss b/frontend/resources/styles/main.scss index 8187ee5753..1106d6b6b4 100644 --- a/frontend/resources/styles/main.scss +++ b/frontend/resources/styles/main.scss @@ -52,6 +52,7 @@ @import 'main/partials/sidebar-layers'; @import 'main/partials/sidebar-sitemap'; @import 'main/partials/sidebar-document-history'; +@import 'main/partials/left-toolbar'; @import 'main/partials/dashboard-bar'; @import 'main/partials/dashboard-grid'; @import 'main/partials/user-settings'; diff --git a/frontend/resources/styles/main/partials/left-toolbar.scss b/frontend/resources/styles/main/partials/left-toolbar.scss new file mode 100644 index 0000000000..2dd4272e9e --- /dev/null +++ b/frontend/resources/styles/main/partials/left-toolbar.scss @@ -0,0 +1,79 @@ +// 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-2020 Andrey Antukh +// Copyright (c) 2015-2020 Juan de la Cruz + +.left-toolbar { + background-color: $color-gray-50; + bottom: 0; + height: 100%; + position: fixed; + left: 0; + width: 40px; + z-index: 11; +} + +.left-toolbar-inside { + align-items: center; + border-right: 1px solid $color-gray-60; + display: flex; + flex-direction: column; + overflow: visible; + padding-top: 40px; + height: 100%; +} + +.left-toolbar-options { + align-items: center; + display: flex; + flex-direction: column; + margin: 0; + + li { + align-items: center; + background-color: transparent; + border: 1px solid transparent; + cursor: pointer; + display: flex; + flex-shrink: 0; + height: 40px; + justify-content: center; + margin: $x-small 0; + position: relative; + width: 40px; + + svg { + fill: $color-gray-20; + height: 18px; + width: 18px; + } + + &:hover { + background-color: $color-primary; + + svg { + fill: $color-gray-50; + } + + } + + &.selected { + background-color: $color-gray-60; + + svg { + fill: $color-primary; + } + + } + + } + + &.panels { + margin-top: auto; + } + +} + + \ No newline at end of file diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss index 497928dbd3..1c0fe1aeac 100644 --- a/frontend/resources/styles/main/partials/sidebar.scss +++ b/frontend/resources/styles/main/partials/sidebar.scss @@ -2,8 +2,8 @@ // 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 .settings-bar { background-color: $color-gray-50; @@ -15,7 +15,7 @@ z-index: 10; &.settings-bar-left { - left: 0 + left: 40px; } .settings-bar-inside { diff --git a/frontend/resources/styles/main/partials/workspace-bar.scss b/frontend/resources/styles/main/partials/workspace-bar.scss index a604a08b09..784236e8f2 100644 --- a/frontend/resources/styles/main/partials/workspace-bar.scss +++ b/frontend/resources/styles/main/partials/workspace-bar.scss @@ -11,9 +11,9 @@ border-bottom: 1px solid $color-gray-60; display: flex; height: 40px; - padding: $x-small $medium $x-small 65px; + padding: $x-small $medium $x-small 55px; position: relative; - z-index: 11; + z-index: 12; .main-icon { align-items: center; @@ -25,7 +25,7 @@ left: 0; position: absolute; top: 0; - width: 50px; + width: 40px; a { height: 30px; @@ -33,7 +33,7 @@ svg { fill: $color-gray-30; height: 30px; - width: 30px; + width: 28px; } @@ -49,6 +49,30 @@ } + .menu-btn { + align-items: center; + background-color: $color-gray-60; + cursor: pointer; + border-radius: $br-small; + display: flex; + margin-right: $x-small; + padding: $x-small; + + svg { + height: 15px; + fill: $color-gray-20; + width: 15px; + } + + &:hover { + background-color: $color-primary; + + svg { + fill: $color-gray-60; + } + } + } + .project-tree-btn { align-items: center; cursor: pointer; @@ -63,11 +87,16 @@ } span { - color: $color-gray-10; + color: $color-white; font-size: $fs14; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; + + &.project-name { + color: $color-gray-20; + margin-right: $x-small; + } } } @@ -75,141 +104,38 @@ .workspace-options { display: flex; margin: auto; - - .options-btn { - align-items: center; - border-right: 4px double $color-gray-60; - display: flex; - margin: 0; - - &:last-child { - border: none; - } - - li { - align-items: center; - background-color: transparent; - border: 1px solid transparent; - border-radius: $br-small; - cursor: pointer; - display: flex; - flex-shrink: 0; - height: 30px; - justify-content: center; - margin: 0 $small; - position: relative; - width: 30px; - - a { - padding-top: 6px; - } - - svg { - fill: $color-gray-20; - height: 18px; - width: 18px; - } - - &:hover { - background-color: $color-primary; - - svg { - fill: $color-gray-50; - } - - } - - &.selected { - - svg { - fill: $color-primary; - } - - &:hover { - - svg { - fill: $color-gray-60; - } - } - - } - - } - - } - } - .options-view { +} + +.zoom-input { + align-items: center; + display: flex; + + span { + color: $color-gray-10; + font-size: $fs15; + margin: 0 $x-small; + } + + .add-zoom, + .remove-zoom { align-items: center; + background-color: $color-gray-60; + border-radius: $br-small; + cursor: pointer; + color: $color-gray-20; display: flex; - justify-content: content; - margin: 0; - - li { - align-items: center; - display: flex; - flex-shrink: 0; - height: 30px; - margin: 0 $small; - position: relative; - width: 60px; - - &.zoom-input { - width: 85px; - padding: 0 25px; - position: relative; - - span { - color: $color-gray-20; - font-size: $fs15; - } - - .add-zoom, - .remove-zoom { - align-items: center; - border-radius: 50%; - border: 1px solid $color-gray-40; - cursor: pointer; - color: $color-gray-40; - display: none; - flex-shrink: 0; - font-size: $fs20; - font-weight: bold; - height: 20px; - justify-content: center; - position: absolute; - top: 5px; - width: 20px; - - &:hover { - border-color: $color-primary; - color: $color-primary; - } - - } - - .add-zoom { - left: -5px; - } - - .remove-zoom { - padding-top: 4px; - right: -5px; - } - - &:hover { - - .add-zoom, - .remove-zoom { - display: flex; - @include animation(0s,.3s,fadeIn); - } - - } - - } + flex-shrink: 0; + font-size: $fs20; + font-weight: bold; + height: 20px; + justify-content: center; + width: 20px; + &:hover { + background-color: $color-primary; + color: $color-gray-60; } } diff --git a/frontend/src/uxbox/main/ui/workspace.cljs b/frontend/src/uxbox/main/ui/workspace.cljs index e197bc1b88..92455c7d84 100644 --- a/frontend/src/uxbox/main/ui/workspace.cljs +++ b/frontend/src/uxbox/main/ui/workspace.cljs @@ -10,6 +10,7 @@ [beicon.core :as rx] [lentes.core :as l] [rumext.alpha :as mf] + [uxbox.builtins.icons :as i :include-macros true] [uxbox.main.constants :as c] [uxbox.main.data.history :as udh] [uxbox.main.data.workspace :as dw] @@ -88,6 +89,47 @@ [:section.workspace-viewport {:id "workspace-viewport" :ref frame} [:& viewport {:page page :file file}]]] + ;; --- Left toolbar (NEW COMPONENT) + + [:div.left-toolbar + [:div.left-toolbar-inside + [:ul.left-toolbar-options + [:li.tooltip.tooltip-right + {:alt "Artboard"} + i/artboard] + [:li.tooltip.tooltip-right + {:alt "Box"} + i/box] + [:li.tooltip.tooltip-right + {:alt "Circle"} + i/circle] + [:li.tooltip.tooltip-right + {:alt "Text"} + i/text] + [:li.tooltip.tooltip-right + {:alt "Insert image"} + i/image] + [:li.tooltip.tooltip-right + {:alt "Pencil tool"} + i/pencil] + [:li.tooltip.tooltip-right + {:alt "Curves tool"} + i/curve]] + + [:ul.left-toolbar-options.panels + [:li.tooltip.tooltip-right + {:alt "Layers"} + i/layers] + [:li.tooltip.tooltip-right + {:alt "Libraries"} + i/icon-set] + [:li.tooltip.tooltip-right + {:alt "History"} + i/undo-history] + [:li.tooltip.tooltip-right + {:alt "Palette"} + i/palette]]]] + ;; Aside (when left-sidebar? [:& left-sidebar {:file file :page page :layout layout}]) diff --git a/frontend/src/uxbox/main/ui/workspace/header.cljs b/frontend/src/uxbox/main/ui/workspace/header.cljs index 81835b2430..46d90bc1ef 100644 --- a/frontend/src/uxbox/main/ui/workspace/header.cljs +++ b/frontend/src/uxbox/main/ui/workspace/header.cljs @@ -32,11 +32,10 @@ (let [zoom (mf/deref refs/selected-zoom) increase #(st/emit! dw/increase-zoom) decrease #(st/emit! dw/decrease-zoom)] - [:ul.options-view - [:li.zoom-input - [:span.add-zoom {:on-click decrease} "-"] - [:span {} (str (mth/round (* 100 zoom)) "%")] - [:span.remove-zoom {:on-click increase} "+"]]])) + [:div.zoom-input + [:span.add-zoom {:on-click decrease} "-"] + [:span {} (str (mth/round (* 100 zoom)) "%")] + [:span.remove-zoom {:on-click increase} "+"]])) ;; --- Header Users @@ -80,113 +79,15 @@ [:a {:on-click #(st/emit! (rt/nav :dashboard-team {:team-id "self"}))} i/logo-icon]] + [:div.menu-btn i/actions] + [:div.project-tree-btn {:alt (tr "header.sitemap") :class (when (contains? layout :sitemap) "selected") :on-click #(st/emit! (dw/toggle-layout-flag :sitemap))} + [:span.project-name "Project name /"] [:span (:name file)]] - [:& active-users] - [:div.workspace-options - [:ul.options-btn - [:li.tooltip.tooltip-bottom - {:alt (tr "workspace.header.frame") - :class (when (= selected-drawtool :frame) "selected") - :on-click (partial select-drawtool :frame)} - i/artboard] - [:li.tooltip.tooltip-bottom - {:alt (tr "workspace.header.rect") - :class (when (= selected-drawtool :rect) "selected") - :on-click (partial select-drawtool :rect)} - i/box - ] - [:li.tooltip.tooltip-bottom - {:alt (tr "workspace.header.circle") - :class (when (= selected-drawtool :circle) "selected") - :on-click (partial select-drawtool :circle)} - i/circle] - [:li.tooltip.tooltip-bottom - {:alt (tr "workspace.header.text") - :class (when (= selected-drawtool :text) "selected") - :on-click (partial select-drawtool :text)} - i/text] - [:li.tooltip.tooltip-bottom - {:alt (tr "workspace.header.path") - :class (when (= selected-drawtool :path) "selected") - :on-click (partial select-drawtool :path)} - i/curve] - [:li.tooltip.tooltip-bottom - {:alt (tr "workspace.header.curve") - :class (when (= selected-drawtool :curve) "selected") - :on-click (partial select-drawtool :curve)} - i/pencil] - [:li.tooltip.tooltip-bottom - {:alt (tr "workspace.header.color-palette") - :class (when (contains? layout :colorpalette) "selected") - :on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))} - i/palette] - [:li.tooltip.tooltip-bottom - {:alt (tr "workspace.header.icons") - :class (when (contains? layout :icons) "selected") - :on-click #(st/emit! (dw/toggle-layout-flag :icons))} - i/icon-set] - ;; [:li.tooltip.tooltip-bottom - ;; {:alt (tr "header.layers") - ;; :class (when (contains? layout :layers) "selected") - ;; :on-click #(st/emit! (dw/toggle-layout-flag :layers))} - ;; i/layers] - ;; [:li.tooltip.tooltip-bottom - ;; {:alt (tr "header.element-options") - ;; :class (when (contains? layout :element-options) "selected") - ;; :on-click #(st/emit! (dw/toggle-layout-flag :element-options))} - ;; i/options] - [:li.tooltip.tooltip-bottom - {:alt (tr "workspace.header.document-history") - :class (when (contains? layout :document-history) "selected") - :on-click #(st/emit! (dw/toggle-layout-flag :document-history))} - i/undo-history] - ;; [:li.tooltip.tooltip-bottom - ;; {:alt (tr "header.undo") - ;; :on-click on-undo} - ;; i/undo] - ;; [:li.tooltip.tooltip-bottom - ;; {:alt (tr "header.redo") - ;; :on-click on-redo} - ;; i/redo] - [:li.tooltip.tooltip-bottom - {:alt (tr "workspace.header.download") - ;; :on-click on-download - } - i/download] - [:li.tooltip.tooltip-bottom - {:alt (tr "workspace.header.image") - :on-click on-image} - i/image] - [:li.tooltip.tooltip-bottom - {:alt (tr "workspace.header.rules") - :class (when (contains? layout :rules) "selected") - :on-click (partial toggle-layout :rules)} - i/ruler] - [:li.tooltip.tooltip-bottom - {:alt (tr "workspace.header.grid") - :class (when (contains? layout :grid) "selected") - :on-click (partial toggle-layout :grid)} - i/grid] - [:li.tooltip.tooltip-bottom - {:alt (tr "workspace.header.grid-snap") - :class (when (contains? layout :grid-snap) "selected") - :on-click (partial toggle-layout :grid-snap)} - i/grid-snap]]] - ;; [:li.tooltip.tooltip-bottom - ;; {:alt (tr "header.align")} - ;; i/alignment]] - ;; [:& user] - [:div.secondary-options - [:& zoom-widget] - [:a.tooltip.tooltip-bottom.view-mode - {:alt (tr "workspace.header.view-mode") - ;; :on-click #(st/emit! (dw/->OpenView (:id page))) - } - i/play]] - ])) + [:& active-users]] + [:& zoom-widget]])) diff --git a/frontend/src/uxbox/main/ui/workspace/left-toolbar.cljs b/frontend/src/uxbox/main/ui/workspace/left-toolbar.cljs new file mode 100644 index 0000000000..bfa49d0c36 --- /dev/null +++ b/frontend/src/uxbox/main/ui/workspace/left-toolbar.cljs @@ -0,0 +1,57 @@ +;; 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/. +;; +;; This Source Code Form is "Incompatible With Secondary Licenses", as +;; defined by the Mozilla Public License, v. 2.0. +;; +;; Copyright (c) 2015-2020 Andrey Antukh +;; Copyright (c) 2015-2020 Juan de la Cruz + +(ns uxbox.main.ui.workspace.sidebar + (:require + [rumext.alpha :as mf] + [uxbox.builtins.icons :as i :include-macros true])) + +;; --- Left toolbar (Component) + +(mf/defc left-sidebar + {:wrap [mf/wrap-memo]} + [:div.left-toolbar + [:div.left-toolbar-inside + [:ul.left-toolbar-options + [:li.tooltip.tooltip-right + {:alt "Artboard"} + i/artboard] + [:li.tooltip.tooltip-right + {:alt "Box"} + i/box] + [:li.tooltip.tooltip-right + {:alt "Circle"} + i/circle] + [:li.tooltip.tooltip-right + {:alt "Text"} + i/text] + [:li.tooltip.tooltip-right + {:alt "Insert image"} + i/image] + [:li.tooltip.tooltip-right + {:alt "Pencil tool"} + i/pencil] + [:li.tooltip.tooltip-right + {:alt "Curves tool"} + i/curve]] + + [:ul.left-toolbar-options.panels + [:li.tooltip.tooltip-right + {:alt "Layers"} + i/layers] + [:li.tooltip.tooltip-right + {:alt "Libraries"} + i/icon-set] + [:li.tooltip.tooltip-right + {:alt "History"} + i/undo-history] + [:li.tooltip.tooltip-right + {:alt "Palette"} + i/palette]]]]) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs index e4e7c82a89..ef57c000d7 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs @@ -279,7 +279,8 @@ [:div#layers.tool-window [:div.tool-window-bar [:div.tool-window-icon i/layers] - [:span (t locale "workspace.sidebar.layers")] + ;[:span (t locale "workspace.sidebar.layers")] + [:span "Page 1"] #_[:div.tool-window-close {:on-click on-click} i/close]] [:div.tool-window-content [:& layers-tree]]]))