Merge pull request #147 from uxbox/task/151/workspace-menu-integration

🎉 Add workspace menu integration.

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" : {

frontend/resources/styles/main/partials/context-menu.scss

@@ -30,6 +30,6 @@
 
     &:hover {
         color: $color-black;
-        background: $color-gray-lightest;
+        background: $color-primary-lighter;
     } 
 }

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;
+      cursor: pointer;
-      padding: $small 0;
+      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 {
+        background-color: $color-primary-lighter;
-          color: $color-primary;
-        }
-        svg {
-          fill: $color-primary;
-        }
-
       }
     }
   }

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?
+     [:& menu {:layout layout}]
-                   :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")