From 25437fafc2e0a9eab857ffe46e0edef6a0830e6e Mon Sep 17 00:00:00 2001 From: Juan de la Cruz Date: Fri, 13 Mar 2020 22:29:28 +0100 Subject: [PATCH 1/2] :tada: Adapt workspace to new visual layout. --- frontend/resources/locales.json | 4 +- .../resources/styles/common/framework.scss | 13 ++ frontend/resources/styles/main.scss | 1 + .../styles/main/partials/left-toolbar.scss | 79 +++++++ .../styles/main/partials/sidebar.scss | 6 +- .../styles/main/partials/workspace-bar.scss | 196 ++++++------------ frontend/src/uxbox/main/ui/workspace.cljs | 42 ++++ .../src/uxbox/main/ui/workspace/header.cljs | 117 +---------- .../uxbox/main/ui/workspace/left-toolbar.cljs | 57 +++++ .../main/ui/workspace/sidebar/layers.cljs | 3 +- 10 files changed, 269 insertions(+), 249 deletions(-) create mode 100644 frontend/resources/styles/main/partials/left-toolbar.scss create mode 100644 frontend/src/uxbox/main/ui/workspace/left-toolbar.cljs 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]]])) From 118157e43a05c33ac94463f40f65200fe2091a11 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Tue, 17 Mar 2020 09:30:44 +0100 Subject: [PATCH 2/2] :construction: Initial integration of workspace toolbar. --- .../styles/main/partials/main-bar.scss | 60 +++++++------- .../styles/main/partials/workspace-bar.scss | 45 +++++++++- .../styles/main/partials/workspace.scss | 2 +- .../uxbox/main/ui/components/dropdown.cljs | 39 +++++++++ .../src/uxbox/main/ui/dashboard/profile.cljs | 55 ++++++------ frontend/src/uxbox/main/ui/workspace.cljs | 48 ++--------- .../src/uxbox/main/ui/workspace/header.cljs | 17 +++- .../uxbox/main/ui/workspace/left-toolbar.cljs | 57 ------------- .../uxbox/main/ui/workspace/left_toolbar.cljs | 83 +++++++++++++++++++ frontend/src/uxbox/util/components.cljs | 3 +- 10 files changed, 243 insertions(+), 166 deletions(-) create mode 100644 frontend/src/uxbox/main/ui/components/dropdown.cljs delete mode 100644 frontend/src/uxbox/main/ui/workspace/left-toolbar.cljs create mode 100644 frontend/src/uxbox/main/ui/workspace/left_toolbar.cljs diff --git a/frontend/resources/styles/main/partials/main-bar.scss b/frontend/resources/styles/main/partials/main-bar.scss index 25c788f67f..84739d23c5 100644 --- a/frontend/resources/styles/main/partials/main-bar.scss +++ b/frontend/resources/styles/main/partials/main-bar.scss @@ -15,7 +15,7 @@ position: relative; z-index: 10; - + .btn-dashboard { margin-left: auto; } @@ -84,7 +84,7 @@ padding: 0 $x-small 0 $small; position: relative; width: 180px; - + span { @include text-ellipsis; color: $color-black; @@ -100,45 +100,47 @@ } .dropdown { - background-color: $color-gray-60; - border-radius: $br-small; - min-width: 150px; - padding: 0 $small; position: absolute; top: 0; - right: 0; - width: 100%; + left: 0; z-index: 12; - @include animation(0,.2s,fadeInDown); + width: 180px; - li { - font-size: $fs13; - padding: $small 0; + ul.profile-menu { + background-color: $color-gray-60; + border-radius: $br-small; + padding: 0 $small; - svg { - fill: $color-gray-20; - height: 12px; - width: 12px; - } + @include animation(0,.2s,fadeInDown); - span { - color: $color-white; - } - - &:hover { - - span { - color: $color-primary; - } + li { + font-size: $fs13; + padding: $small 0; svg { - fill: $color-primary; + fill: $color-gray-20; + height: 12px; + width: 12px; + } + + span { + color: $color-white; + } + + &:hover { + + span { + color: $color-primary; + } + + svg { + fill: $color-primary; + } + } } - } - } } diff --git a/frontend/resources/styles/main/partials/workspace-bar.scss b/frontend/resources/styles/main/partials/workspace-bar.scss index 784236e8f2..ee30f12079 100644 --- a/frontend/resources/styles/main/partials/workspace-bar.scss +++ b/frontend/resources/styles/main/partials/workspace-bar.scss @@ -15,6 +15,47 @@ position: relative; z-index: 12; + .dropdown { + position: absolute; + top: 40px; + left: 40px; + width: 230px; + z-index: 12; + @include animation(0,.2s,fadeInDown); + + .workspace-menu { + background-color: $color-gray-60; + border-radius: $br-small; + padding: 0 $small; + + li { + font-size: $fs13; + padding: $small 0; + + svg { + fill: $color-gray-20; + height: 12px; + width: 12px; + } + + span { + color: $color-white; + } + + &:hover { + span { + color: $color-primary; + } + svg { + fill: $color-primary; + } + + } + } + } + } + + .main-icon { align-items: center; background-color: $color-gray-60; @@ -239,7 +280,7 @@ cursor: pointer; display: flex; margin: 0; - + li { margin-left: $small; position: relative; @@ -276,4 +317,4 @@ margin-left: $small; padding: $x-small; } -} \ No newline at end of file +} diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss index 0dc56cfdfe..608c21bcc9 100644 --- a/frontend/resources/styles/main/partials/workspace.scss +++ b/frontend/resources/styles/main/partials/workspace.scss @@ -16,7 +16,7 @@ padding: 0; margin: 0; position: fixed; - right: 230px; + right: 190px; &.scrolling { cursor: grab; diff --git a/frontend/src/uxbox/main/ui/components/dropdown.cljs b/frontend/src/uxbox/main/ui/components/dropdown.cljs new file mode 100644 index 0000000000..e91a03cb61 --- /dev/null +++ b/frontend/src/uxbox/main/ui/components/dropdown.cljs @@ -0,0 +1,39 @@ +(ns uxbox.main.ui.components.dropdown + (:require + [rumext.alpha :as mf] + [uxbox.util.uuid :as uuid] + [goog.events :as events] + [goog.object :as gobj]) + (:import goog.events.EventType + goog.events.KeyCodes)) + +(mf/defrc dropdown' + [props] + (let [children (gobj/get props "children") + on-close (gobj/get props "on-close") + + on-document-clicked + (fn [event] + (on-close)) + + on-document-keyup + (fn [event] + (when (= (.-keyCode event) 27) ; ESC + (on-close))) + + on-mount + (fn [] + (let [lkey1 (events/listen js/document EventType.CLICK on-document-clicked) + lkey2 (events/listen js/document EventType.KEYUP on-document-keyup)] + #(do + (events/unlistenByKey lkey1) + (events/unlistenByKey lkey2))))] + + (mf/use-effect {:fn on-mount}) + [:div.dropdown + children])) + +(mf/defrc dropdown + [props] + (when (gobj/get props "show") + (mf/element dropdown' props))) diff --git a/frontend/src/uxbox/main/ui/dashboard/profile.cljs b/frontend/src/uxbox/main/ui/dashboard/profile.cljs index 688e316789..adfc4c6587 100644 --- a/frontend/src/uxbox/main/ui/dashboard/profile.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/profile.cljs @@ -19,46 +19,41 @@ [uxbox.main.refs :as refs] [uxbox.main.ui.navigation :as nav] [uxbox.util.dom :as dom] + [uxbox.main.ui.components.dropdown :refer [dropdown]] [uxbox.util.i18n :as i18n :refer [t]] [uxbox.util.router :as rt])) -;; --- Component: User Menu +;; --- Component: Profile -(mf/defc profile-menu - [props] - (let [locale (i18n/use-locale) +(mf/defc profile-section + [{:keys [profile] :as props}] + (let [show (mf/use-state false) + photo (:photo-uri profile "") + photo (if (str/empty? photo) + "/images/avatar.jpg" + photo) + + locale (i18n/use-locale) on-click (fn [event section] (dom/stop-propagation event) (if (keyword? section) (st/emit! (rt/nav section)) (st/emit! section)))] - [:ul.dropdown - [:li {:on-click #(on-click % :settings-profile)} - i/user - [:span (t locale "dashboard.header.profile-menu.profile")]] - [:li {:on-click #(on-click % :settings-password)} - i/lock - [:span (t locale "dashboard.header.profile-menu.password")]] - [:li {:on-click #(on-click % da/logout)} - i/exit - [:span (t locale "dashboard.header.profile-menu.logout")]]])) - - -;; --- Component: Profile - -(mf/defc profile-section - [{:keys [profile] :as props}] - (let [open (mf/use-state false) - photo (:photo-uri profile "") - photo (if (str/empty? photo) - "/images/avatar.jpg" - photo)] - [:div.user-zone {:on-click #(st/emit! (rt/nav :settings-profile)) - :on-mouse-enter #(reset! open true) - :on-mouse-leave #(reset! open false)} + [:div.user-zone {:on-click #(reset! show true)} [:img {:src photo}] [:span (:fullname profile)] - (when @open - [:& profile-menu])])) + + [:& dropdown {:on-close #(reset! show false) + :show @show} + [:ul.profile-menu + [:li {:on-click #(on-click % :settings-profile)} + i/user + [:span (t locale "dashboard.header.profile-menu.profile")]] + [:li {:on-click #(on-click % :settings-password)} + i/lock + [:span (t locale "dashboard.header.profile-menu.password")]] + [:li {:on-click #(on-click % da/logout)} + i/exit + [:span (t locale "dashboard.header.profile-menu.logout")]]]]])) diff --git a/frontend/src/uxbox/main/ui/workspace.cljs b/frontend/src/uxbox/main/ui/workspace.cljs index 92455c7d84..5ca12e96d5 100644 --- a/frontend/src/uxbox/main/ui/workspace.cljs +++ b/frontend/src/uxbox/main/ui/workspace.cljs @@ -10,7 +10,7 @@ [beicon.core :as rx] [lentes.core :as l] [rumext.alpha :as mf] - [uxbox.builtins.icons :as i :include-macros true] + [uxbox.builtins.icons :as i] [uxbox.main.constants :as c] [uxbox.main.data.history :as udh] [uxbox.main.data.workspace :as dw] @@ -30,6 +30,7 @@ [uxbox.main.ui.workspace.shortcuts :as shortcuts] [uxbox.main.ui.workspace.sidebar :refer [left-sidebar right-sidebar]] [uxbox.main.ui.workspace.sidebar.history :refer [history-dialog]] + [uxbox.main.ui.workspace.left-toolbar :refer [left-toolbar]] [uxbox.util.data :refer [classnames]] [uxbox.util.dom :as dom] [uxbox.util.geom.point :as gpt] @@ -86,49 +87,12 @@ [:& horizontal-rule] [:& vertical-rule]]) - [:section.workspace-viewport {:id "workspace-viewport" :ref frame} + [: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]]]] + [:& left-toolbar {:page page + :layout layout}] ;; Aside (when left-sidebar? diff --git a/frontend/src/uxbox/main/ui/workspace/header.cljs b/frontend/src/uxbox/main/ui/workspace/header.cljs index 46d90bc1ef..eefa103072 100644 --- a/frontend/src/uxbox/main/ui/workspace/header.cljs +++ b/frontend/src/uxbox/main/ui/workspace/header.cljs @@ -20,7 +20,8 @@ [uxbox.main.store :as st] [uxbox.main.ui.modal :as modal] [uxbox.main.ui.workspace.images :refer [import-image-modal]] - [uxbox.util.i18n :refer [tr]] + [uxbox.main.ui.components.dropdown :refer [dropdown]] + [uxbox.util.i18n :as i18n :refer [tr t]] [uxbox.util.math :as mth] [uxbox.util.router :as rt])) @@ -66,6 +67,9 @@ (let [toggle-layout #(st/emit! (dw/toggle-layout-flag %)) on-undo (constantly nil) on-redo (constantly nil) + locale (i18n/use-locale) + + show-menu? (mf/use-state false) on-image #(modal/show! import-image-modal {}) ;;on-download #(udl/open! :download) @@ -74,12 +78,19 @@ #_(dw/deactivate-ruler) (dw/select-for-drawing %))] - [:header#workspace-bar.workspace-bar + [:header.workspace-bar [:div.main-icon [:a {:on-click #(st/emit! (rt/nav :dashboard-team {:team-id "self"}))} i/logo-icon]] - [:div.menu-btn i/actions] + [:div.menu-btn {:on-click #(reset! show-menu? true)} i/actions] + + [:& dropdown {:show @show-menu? + :on-close #(reset! show-menu? false)} + [:ul.workspace-menu + [:li i/user [:span (t locale "dashboard.header.profile-menu.profile")]] + [:li i/lock [:span (t locale "dashboard.header.profile-menu.password")]] + [:li i/exit [:span (t locale "dashboard.header.profile-menu.logout")]]]] [:div.project-tree-btn {:alt (tr "header.sitemap") diff --git a/frontend/src/uxbox/main/ui/workspace/left-toolbar.cljs b/frontend/src/uxbox/main/ui/workspace/left-toolbar.cljs deleted file mode 100644 index bfa49d0c36..0000000000 --- a/frontend/src/uxbox/main/ui/workspace/left-toolbar.cljs +++ /dev/null @@ -1,57 +0,0 @@ -;; 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/left_toolbar.cljs b/frontend/src/uxbox/main/ui/workspace/left_toolbar.cljs new file mode 100644 index 0000000000..4fef51d798 --- /dev/null +++ b/frontend/src/uxbox/main/ui/workspace/left_toolbar.cljs @@ -0,0 +1,83 @@ +;; 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.left-toolbar + (:require + [rumext.alpha :as mf] + [uxbox.main.refs :as refs] + [uxbox.main.data.workspace :as dw] + [uxbox.main.store :as st] + [uxbox.main.ui.modal :as modal] + [uxbox.main.ui.workspace.images :refer [import-image-modal]] + [uxbox.builtins.icons :as i])) + +;; --- Component: Left toolbar + +(mf/defc left-toolbar + [{:keys [page layout] :as props}] + (let [selected-drawtool (mf/deref refs/selected-drawing-tool) + select-drawtool #(st/emit! :interrupt + (dw/select-for-drawing %)) + on-image #(modal/show! import-image-modal {})] + [:div.left-toolbar + [:div.left-toolbar-inside + [:ul.left-toolbar-options + [:li.tooltip.tooltip-right + {:alt "Artboard" + :class (when (= selected-drawtool :frame) "selected") + :on-click (partial select-drawtool :frame)} + i/artboard] + [:li.tooltip.tooltip-right + {:alt "Box" + :class (when (= selected-drawtool :rect) "selected") + :on-click (partial select-drawtool :rect)} + i/box] + [:li.tooltip.tooltip-right + {:alt "Circle" + :class (when (= selected-drawtool :circle) "selected") + :on-click (partial select-drawtool :circle)} + i/circle] + [:li.tooltip.tooltip-right + {:alt "Text" + :class (when (= selected-drawtool :text) "selected") + :on-click (partial select-drawtool :text)} + i/text] + [:li.tooltip.tooltip-right + {:alt "Insert image" + :on-click on-image} + i/image] + [:li.tooltip.tooltip-right + {:alt "Pencil tool" + :class (when (= selected-drawtool :path) "selected") + :on-click (partial select-drawtool :path)} + i/pencil] + [:li.tooltip.tooltip-right + {:alt "Curves tool" + :class (when (= selected-drawtool :curve) "selected") + :on-click (partial select-drawtool :curve)} + i/curve]] + + [:ul.left-toolbar-options.panels + [:li.tooltip.tooltip-right + {:alt "Layers" + :class (when (contains? layout :layers) "selected") + :on-click #(st/emit! (dw/toggle-layout-flag :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" + :class (when (contains? layout :colorpalette) "selected") + :on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))} + i/palette]]]])) diff --git a/frontend/src/uxbox/util/components.cljs b/frontend/src/uxbox/util/components.cljs index 9a7cb52c18..5599d6cb38 100644 --- a/frontend/src/uxbox/util/components.cljs +++ b/frontend/src/uxbox/util/components.cljs @@ -11,6 +11,7 @@ [rumext.alpha :as mf] [uxbox.util.timers :refer [schedule-on-idle]])) + (mf/defc chunked-list [{:keys [items children initial-size chunk-size] :or {initial-size 30 chunk-size 5} @@ -72,5 +73,3 @@ (mf/element component #js {})))))) ctor))) - -