From 118157e43a05c33ac94463f40f65200fe2091a11 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Tue, 17 Mar 2020 09:30:44 +0100 Subject: [PATCH] :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 25c788f67..84739d23c 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 784236e8f..ee30f1207 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 0dc56cfdf..608c21bcc 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 000000000..e91a03cb6 --- /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 688e31678..adfc4c658 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 92455c7d8..5ca12e96d 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 46d90bc1e..eefa10307 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 bfa49d0c3..000000000 --- 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 000000000..4fef51d79 --- /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 9a7cb52c1..5599d6cb3 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))) - -