From aebea8ed5f86932958e591e080d43dd7dc75ea5c Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 19 Mar 2020 18:10:35 +0100 Subject: [PATCH 1/2] :tada: Add workspace menu integration. --- frontend/resources/locales.json | 11 ++++ .../src/uxbox/main/ui/workspace/header.cljs | 57 ++++++++++++++++--- 2 files changed, 59 insertions(+), 9 deletions(-) diff --git a/frontend/resources/locales.json b/frontend/resources/locales.json index 3a8f9b54a..155778fed 100644 --- a/frontend/resources/locales.json +++ b/frontend/resources/locales.json @@ -804,6 +804,17 @@ "fr" : "MOT DE PASSE" } }, + "workspace.header.menu.hide-rules": "Hide rules", + "workspace.header.menu.show-rules": "Show rules", + "workspace.header.menu.hide-grid": "Hide grid", + "workspace.header.menu.show-grid": "Show grid", + "workspace.header.menu.hide-layers": "Hide layers", + "workspace.header.menu.show-layers": "Show layers", + "workspace.header.menu.hide-palette": "Hide color palette", + "workspace.header.menu.show-palette": "Show color palette", + "workspace.header.menu.hide-libraries": "Hide libraries", + "workspace.header.menu.show-libraries": "Show libraries", + "settings.password.change-password" : { "used-in" : [ "src/uxbox/main/ui/settings/password.cljs:64" ], "translations" : { diff --git a/frontend/src/uxbox/main/ui/workspace/header.cljs b/frontend/src/uxbox/main/ui/workspace/header.cljs index eefa10307..8c529b151 100644 --- a/frontend/src/uxbox/main/ui/workspace/header.cljs +++ b/frontend/src/uxbox/main/ui/workspace/header.cljs @@ -60,6 +60,53 @@ [:& user-widget {:user (get-in users [:by-id id]) :key id}])])) +(mf/defc menu + [{:keys [layout] :as props}] + (let [show-menu? (mf/use-state false) + locale (i18n/use-locale)] + + [:* + [: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 {:on-click #(st/emit! (dw/toggle-layout-flag :rules))} + [:span i/ruler] + [:span + (if (contains? layout :rules) + (t locale "workspace.header.menu.hide-rules") + (t locale "workspace.header.menu.show-rules"))]] + + [:li {:on-click #(st/emit! (dw/toggle-layout-flag :grid))} + [:span i/grid] + [:span + (if (contains? layout :grid) + (t locale "workspace.header.menu.hide-grid") + (t locale "workspace.header.menu.show-grid"))]] + + [:li {:on-click #(st/emit! (dw/toggle-layout-flag :layers))} + [:span i/layers] + [:span + (if (contains? layout :layers) + (t locale "workspace.header.menu.hide-layers") + (t locale "workspace.header.menu.show-layers"))]] + + [:li {:on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))} + [:span i/palette] + [:span + (if (contains? layout :colorpalette) + (t locale "workspace.header.menu.hide-palette") + (t locale "workspace.header.menu.show-palette"))]] + + [:li {:on-click #(st/emit! (dw/toggle-layout-flag :libraries))} + [:span i/icon-set] + [:span + (if (contains? layout :libraries) + (t locale "workspace.header.menu.hide-libraries") + (t locale "workspace.header.menu.show-libraries"))]] + ]]])) + ;; --- Header Component (mf/defc header @@ -69,8 +116,6 @@ 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) selected-drawtool (mf/deref refs/selected-drawing-tool) @@ -83,14 +128,8 @@ [:a {:on-click #(st/emit! (rt/nav :dashboard-team {:team-id "self"}))} i/logo-icon]] - [: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")]]]] + [:& menu {:layout layout}] [:div.project-tree-btn {:alt (tr "header.sitemap") From c846521c92d4e36a7fe6e71dc946a17c6cbe0bef Mon Sep 17 00:00:00 2001 From: Juan de la Cruz Date: Fri, 20 Mar 2020 15:55:44 +0100 Subject: [PATCH 2/2] :tada: Add styles to workspace menu. --- .../styles/main/partials/context-menu.scss | 2 +- .../styles/main/partials/workspace-bar.scss | 22 ++++++++----------- 2 files changed, 10 insertions(+), 14 deletions(-) diff --git a/frontend/resources/styles/main/partials/context-menu.scss b/frontend/resources/styles/main/partials/context-menu.scss index 047195574..e6acef56b 100644 --- a/frontend/resources/styles/main/partials/context-menu.scss +++ b/frontend/resources/styles/main/partials/context-menu.scss @@ -30,6 +30,6 @@ &:hover { color: $color-black; - background: $color-gray-lightest; + background: $color-primary-lighter; } } diff --git a/frontend/resources/styles/main/partials/workspace-bar.scss b/frontend/resources/styles/main/partials/workspace-bar.scss index 0cead97b7..f19f875e5 100644 --- a/frontend/resources/styles/main/partials/workspace-bar.scss +++ b/frontend/resources/styles/main/partials/workspace-bar.scss @@ -23,32 +23,28 @@ z-index: 12; @include animation(0,.2s,fadeInDown); - background-color: $color-gray-60; + background-color: $color-white; border-radius: $br-small; - padding: 0 $small; + box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25); li { - font-size: $fs13; - padding: $small 0; + cursor: pointer; + font-size: $fs12; + padding: $small $x-small; svg { - fill: $color-gray-20; + fill: $color-gray-60; height: 12px; width: 12px; } span { - color: $color-white; + color: $color-gray-60; + margin: 0 $x-small; } &:hover { - span { - color: $color-primary; - } - svg { - fill: $color-primary; - } - + background-color: $color-primary-lighter; } } }