♻️ Minor refactor of zoom-widget and workspace header.

frontend/resources/styles/main.scss

@@ -45,7 +45,7 @@
 
 @import 'main/partials/main-bar';
 @import 'main/partials/workspace';
-@import 'main/partials/workspace-bar';
+@import 'main/partials/workspace-header';
 @import 'main/partials/workspace-libraries';
 @import 'main/partials/tool-bar';
 @import 'main/partials/project-bar';
@@ -71,6 +71,7 @@
 @import 'main/partials/debug-icons-preview';
 @import 'main/partials/editable-label';
 @import 'main/partials/tab-container';
+@import "main/partials/zoom-widget";
 @import "main/partials/viewer-header";
 @import "main/partials/viewer-thumbnails";
 @import "main/partials/viewer";

frontend/resources/styles/main/partials/workspace-bar.scss

@@ -1,386 +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/.
-//
-// Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
-// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
-
-.workspace-bar {
-  align-items: center;
-  background-color: $color-gray-50;
-  border-bottom: 1px solid  $color-gray-60;
-  display: flex;
-  height: 40px;
-  padding: $x-small $medium $x-small 55px;
-  position: relative;
-  z-index: 12;
-
-  .preview {
-    align-items: center;
-    background-color: $color-gray-60;
-    border-radius: $br-small;
-    cursor: pointer;
-    display: flex;
-    height: 25px;
-    justify-content: center;
-    width: 25px;
-
-    svg {
-      fill: $color-gray-20;
-      width: 15px;
-      height: 15px;
-    }
-
-    &:hover {
-      background-color: $color-primary;
-
-      svg {
-        fill: $color-gray-60;
-      }
-    }
-  }
-
-  .workspace-menu {
-    position: absolute;
-    top: 40px;
-    left: 40px;
-    width: 230px;
-    z-index: 12;
-    @include animation(0,.2s,fadeInDown);
-
-    background-color: $color-white;
-    border-radius: $br-small;
-    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
-
-    li {
-      cursor: pointer;
-      font-size: $fs12;
-      padding: $small $x-small;
-
-      svg {
-        fill: $color-gray-60;
-        height: 12px;
-        width: 12px;
-      }
-
-      span {
-        color: $color-gray-60;
-        margin: 0 $x-small;
-      }
-
-      &:hover {
-        background-color: $color-primary-lighter;
-      }
-    }
-  }
-
-
-  .main-icon {
-    align-items: center;
-    background-color: $color-gray-60;
-    cursor: pointer;
-    display: flex;
-    height: 100%;
-    justify-content: center;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 40px;
-
-    a {
-      height: 30px;
-
-      svg {
-        fill: $color-gray-30;
-        height: 30px;
-        width: 28px;
-
-        }
-
-      &:hover {
-
-        svg {
-          fill: $color-primary;
-        }
-
-      }
-
-    }
-
-  }
-
-  .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;
-    display: flex;
-    padding: $x-small;
-
-    svg {
-      fill: $color-gray-20;
-      height: 20px;
-      margin-right: $small;
-      width: 20px;
-    }
-
-    span {
-      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;
-      }
-    }
-
-  }
-
-  .workspace-options {
-    display: flex;
-    margin: auto;
-  }
-
-}
-
-.zoom-input {
-  align-items: center;
-  display: flex;
-  position: relative;
-
-  span {
-    color: $color-gray-10;
-    font-size: $fs15;
-    margin-left: $x-small;
-  }
-
-  .dropdown-button {
-    svg {
-      fill: $color-gray-10;
-      height: 10px;
-      width: 10px;
-    }
-  }
-
-  .zoom-dropdown {
-    position: absolute;
-    right: 0;
-    z-index: 12;
-    width: 150px;
-    @include animation(0,.2s,fadeInDown);
-
-    background-color: $color-white;
-    border-radius: $br-small;
-    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
-
-    li {
-      color: $color-gray-60;
-      cursor: pointer;
-      font-size: $fs12;
-      display: flex;
-      padding: $small;
-
-      span {
-        color: $color-gray-40;
-        font-size: $fs12;
-        margin-left: auto;
-      }
-
-      &:hover {
-        background-color: $color-primary-lighter;
-      }
-
-    }
-  }
-
-  .add-zoom,
-  .remove-zoom {
-    align-items: center;
-    background-color: $color-gray-60;
-    border-radius: $br-small;
-    cursor: pointer;
-    color: $color-gray-20;
-    display: flex;
-    opacity: 0;
-    flex-shrink: 0;
-    font-size: $fs20;
-    font-weight: bold;
-    height: 20px;
-    justify-content: center;
-    width: 20px;
-
-    &:hover {
-      color: $color-primary;
-    }
-
-  }
-
-  &:hover {
-    .add-zoom,
-    .remove-zoom {
-      opacity: 100%;
-    }
-  }
-
-}
-
-.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: $color-gray-60;
-    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-gray-10;
-      border-color: $color-gray-60;
-    }
-
-    &.selected {
-      background-color: $color-primary;
-
-      svg {
-        fill: $color-white;
-      }
-
-    }
-
-  }
-
-}
-
-.secondary-options {
-  align-items: center;
-  display: flex;
-
-  .view-mode {
-    background-color: $color-gray-20;
-    align-items: center;
-    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-60;
-      height: 18px;
-      width: 18px;
-    }
-
-    &:hover {
-      background-color: $color-primary;
-
-      svg {
-        fill: $color-gray-60;
-      }
-
-    }
-
-  }
-
-}
-
-.user-multi {
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  margin: 0;
-
-  li {
-    margin-left: $small;
-    position: relative;
-
-    img {
-      border: 3px solid #f3dd14;
-      border-radius: 50%;
-      flex-shrink: 0;
-      height: 25px;
-      width: 25px;
-    }
-  }
-}
-
-.multiuser-cursor {
-  align-items: center;
-  display: flex;
-  left: 0;
-  position: absolute;
-  top: 0;
-  z-index: 10000;
-
-  svg {
-    height: 15px;
-    fill: #f3dd14;
-    width: 15px;
-  }
-
-  span {
-    background-color: #f3dd14;
-    border-radius: $br-small;
-    color: $color-black;
-    font-size: $fs12;
-    margin-left: $small;
-    padding: $x-small;
-  }
-}

frontend/resources/styles/main/partials/workspace-header.scss

@@ -0,0 +1,209 @@
+// 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-2016 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+
+.workspace-header {
+  align-items: center;
+  background-color: $color-gray-50;
+  border-bottom: 1px solid  $color-gray-60;
+  display: flex;
+  height: 40px;
+  padding: $x-small $medium $x-small 55px;
+  position: relative;
+  z-index: 12;
+  justify-content: space-between;
+
+  .main-icon {
+    align-items: center;
+    background-color: $color-gray-60;
+    cursor: pointer;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 40px;
+
+    a {
+      height: 30px;
+
+      svg {
+        fill: $color-gray-30;
+        height: 30px;
+        width: 28px;
+
+        }
+
+      &:hover {
+
+        svg {
+          fill: $color-primary;
+        }
+
+      }
+
+    }
+  }
+
+  .menu-section {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .users-section {
+    display: flex;
+  }
+
+  .options-section {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    position: relative;
+
+    > * {
+      margin-left: $big;
+    }
+
+    .zoom-dropdown {
+      top: 45px;
+      left: -30px;
+    }
+  }
+
+  .menu-button {
+    align-items: center;
+    background-color: $color-gray-60;
+    cursor: pointer;
+    border-radius: $br-small;
+    display: flex;
+    margin-right: $x-small;
+    padding: $x-small;
+    width: 25px;
+    height: 25px;
+
+    svg {
+      height: 15px;
+      fill: $color-gray-20;
+      width: 15px;
+    }
+
+    &:hover {
+      background-color: $color-primary;
+
+      svg {
+        fill: $color-gray-60;
+      }
+    }
+  }
+
+  .project-tree {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    padding: $x-small;
+
+    svg {
+      fill: $color-gray-20;
+      height: 20px;
+      margin-right: $small;
+      width: 20px;
+    }
+
+    span {
+      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;
+      }
+    }
+  }
+
+  .preview-button {
+    align-items: center;
+    background-color: $color-gray-60;
+    border-radius: $br-small;
+    cursor: pointer;
+    display: flex;
+    height: 25px;
+    justify-content: center;
+    width: 25px;
+
+    svg {
+      fill: $color-gray-20;
+      width: 15px;
+      height: 15px;
+    }
+
+    &:hover {
+      background-color: $color-primary;
+
+      svg {
+        fill: $color-gray-60;
+      }
+    }
+  }
+
+  .menu {
+    position: absolute;
+    top: 40px;
+    left: 40px;
+    width: 230px;
+    z-index: 12;
+    @include animation(0,.2s,fadeInDown);
+
+    background-color: $color-white;
+    border-radius: $br-small;
+    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
+
+    li {
+      cursor: pointer;
+      font-size: $fs12;
+      padding: $small $x-small;
+
+      svg {
+        fill: $color-gray-60;
+        height: 12px;
+        width: 12px;
+      }
+
+      span {
+        color: $color-gray-60;
+        margin: 0 $x-small;
+      }
+
+      &:hover {
+        background-color: $color-primary-lighter;
+      }
+    }
+  }
+
+  .active-users {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    margin: 0;
+
+    li {
+      margin-left: $small;
+      position: relative;
+
+      img {
+        border: 3px solid #f3dd14;
+        border-radius: 50%;
+        flex-shrink: 0;
+        height: 25px;
+        width: 25px;
+      }
+    }
+  }
+}

frontend/resources/styles/main/partials/workspace.scss

@@ -183,3 +183,28 @@
   fill: $color-primary-dark;
 }
 
+
+
+.multiuser-cursor {
+  align-items: center;
+  display: flex;
+  left: 0;
+  position: absolute;
+  top: 0;
+  z-index: 10000;
+
+  svg {
+    height: 15px;
+    fill: #f3dd14;
+    width: 15px;
+  }
+
+  span {
+    background-color: #f3dd14;
+    border-radius: $br-small;
+    color: $color-black;
+    font-size: $fs12;
+    margin-left: $small;
+    padding: $x-small;
+  }
+}

frontend/resources/styles/main/partials/zoom-widget.scss

@@ -0,0 +1,45 @@
+.zoom-widget {
+  cursor: pointer;
+  display: flex;
+
+  span {
+    color: $color-gray-10;
+    font-size: $fs14;
+    margin-left: $x-small;
+  }
+
+  .dropdown-button svg {
+    fill: $color-gray-10;
+    height: 10px;
+    width: 10px;
+  }
+
+  .zoom-dropdown {
+    position: absolute;
+    z-index: 12;
+    width: 150px;
+
+    background-color: $color-white;
+    border-radius: $br-small;
+    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
+
+    li {
+      color: $color-gray-60;
+      cursor: pointer;
+      font-size: $fs12;
+      display: flex;
+      padding: $small;
+
+      span {
+        color: $color-gray-40;
+        font-size: $fs12;
+        margin-left: auto;
+      }
+
+      &:hover {
+        background-color: $color-primary-lighter;
+      }
+
+    }
+  }
+}

frontend/src/uxbox/main/ui/viewer/header.cljs

@@ -17,6 +17,7 @@
    [uxbox.builtins.icons :as i]
    [uxbox.main.store :as st]
    [uxbox.main.ui.components.dropdown :refer [dropdown]]
+   [uxbox.main.ui.workspace.header :refer [zoom-widget]]
    [uxbox.main.data.viewer :as dv]
    [uxbox.main.refs :as refs]
    [uxbox.util.data :refer [classnames]]
@@ -28,34 +29,6 @@
   (:import goog.events.EventType
            goog.events.KeyCodes))
 
-(mf/defc zoom-widget
-  {:wrap [mf/memo]}
-  [{:keys [zoom] :as props}]
-  (let [show-dropdown? (mf/use-state false)
-        increase #(st/emit! dv/increase-zoom)
-        decrease #(st/emit! dv/decrease-zoom)
-        zoom-to-50 #(st/emit! dv/zoom-to-50)
-        zoom-to-100 #(st/emit! dv/reset-zoom)
-        zoom-to-200 #(st/emit! dv/zoom-to-200)]
-    [:div.zoom-widget
-     [:span.add-zoom {:on-click decrease} "-"]
-     [:div.input-container {:on-click #(reset! show-dropdown? true)}
-      [:span {} (str (mth/round (* 100 zoom)) "%")]
-      [:span.dropdown-button i/arrow-down]
-      [:& dropdown {:show @show-dropdown?
-                    :on-close #(reset! show-dropdown? false)}
-       [:ul.zoom-dropdown
-        [:li {:on-click increase}
-         "Zoom in" [:span "+"]]
-        [:li {:on-click decrease}
-         "Zoom out" [:span "-"]]
-        [:li {:on-click zoom-to-50}
-         "Zoom to 50%"]
-        [:li {:on-click zoom-to-100}
-         "Zoom to 100%" [:span "Shift + 0"]]
-        [:li {:on-click zoom-to-200}
-         "Zoom to 200%"]]]]
-     [:span.remove-zoom {:on-click increase} "+"]]))
 
 (mf/defc share-link
   [{:keys [page] :as props}]
@@ -123,8 +96,16 @@
       (when-not anonymous?
         [:& share-link {:page (:page data)}])
       (when-not anonymous?
-        [:span.btn-primary {:on-click on-edit} "Edit page"])
+        [:a {:on-click on-edit} "Edit page"])
-      [:& zoom-widget {:zoom (:zoom local)}]
+
+      [:& zoom-widget
+       {:zoom (:zoom local)
+        :on-increase #(st/emit! dv/increase-zoom)
+        :on-decrease #(st/emit! dv/decrease-zoom)
+        :on-zoom-to-50 #(st/emit! dv/zoom-to-50)
+        :on-zoom-to-100 #(st/emit! dv/reset-zoom)
+        :on-zoom-to-200 #(st/emit! dv/zoom-to-200)}]
+
       [:span.btn-fullscreen.tooltip.tooltip-bottom
        {:alt "Full Screen"
         :on-click toggle-fullscreen}

frontend/src/uxbox/main/ui/workspace/header.cljs

@@ -30,33 +30,38 @@
 
 (mf/defc zoom-widget
   {:wrap [mf/memo]}
-  [props]
+  [{:keys [zoom
-  (let [zoom (mf/deref refs/selected-zoom)
+           on-increase
-        show-dropdown? (mf/use-state false)
+           on-decrease
-        increase #(st/emit! dw/increase-zoom)
+           on-zoom-to-50
-        decrease #(st/emit! dw/decrease-zoom)
+           on-zoom-to-100
-        zoom-to-50 #(st/emit! dw/zoom-to-50)
+           on-zoom-to-200]
-        zoom-to-100 #(st/emit! dw/reset-zoom)
+    :as props}]
-        zoom-to-200 #(st/emit! dw/zoom-to-200)]
+  (let [show-dropdown? (mf/use-state false)
-    [:div.zoom-input
+        ;; increase #(st/emit! dv/increase-zoom)
-     [:span.add-zoom {:on-click decrease} "-"]
+        ;; decrease #(st/emit! dv/decrease-zoom)
-     [:div {:on-click #(reset! show-dropdown? true)}
+        ;; zoom-to-50 #(st/emit! dv/zoom-to-50)
-      [:span {} (str (mth/round (* 100 zoom)) "%")]
+        ;; zoom-to-100 #(st/emit! dv/reset-zoom)
-      [:span.dropdown-button i/arrow-down]
+        ;; zoom-to-200 #(st/emit! dv/zoom-to-200)
-      [:& dropdown {:show @show-dropdown?
+        ]
-                    :on-close #(reset! show-dropdown? false)}
+    [:div.zoom-widget {:on-click #(reset! show-dropdown? true)}
-       [:ul.zoom-dropdown
+     [:span {} (str (mth/round (* 100 zoom)) "%")]
-        [:li {:on-click increase}
+     [:span.dropdown-button i/arrow-down]
-         "Zoom in" [:span "+"]]
+     [:& dropdown {:show @show-dropdown?
-        [:li {:on-click decrease}
+                   :on-close #(reset! show-dropdown? false)}
-         "Zoom out" [:span "-"]]
+      [:ul.zoom-dropdown
-        [:li {:on-click zoom-to-50}
+       [:li {:on-click on-increase}
-         "Zoom to 50%" [:span "Shift + 0"]]
+        "Zoom in" [:span "+"]]
-        [:li {:on-click zoom-to-100}
+       [:li {:on-click on-decrease}
-         "Zoom to 100%" [:span "Shift + 1"]]
+        "Zoom out" [:span "-"]]
-        [:li {:on-click zoom-to-200}
+       [:li {:on-click on-zoom-to-50}
-         "Zoom to 200%" [:span "Shift + 2"]]]]]
+        "Zoom to 50%"]
-     [:span.remove-zoom {:on-click increase} "+"]]))
+       [:li {:on-click on-zoom-to-100}
+        "Zoom to 100%" [:span "Shift + 0"]]
+       [:li {:on-click on-zoom-to-200}
+        "Zoom to 200%"]]]]))
+
+
 
 ;; --- Header Users
 
@@ -77,7 +82,7 @@
   [props]
   (let [profile (mf/deref refs/profile)
         users (mf/deref refs/workspace-users)]
-    [:ul.user-multi
+    [:ul.active-users
      [:& user-widget {:user profile :self? true}]
      (for [id (->> (:active users)
                    (remove #(= % (:id profile))))]
@@ -85,16 +90,22 @@
                         :key id}])]))
 
 (mf/defc menu
-  [{:keys [layout] :as props}]
+  [{:keys [layout project file] :as props}]
   (let [show-menu? (mf/use-state false)
+        toggle-sitemap #(st/emit! (dw/toggle-layout-flag :sitemap))
         locale (i18n/use-locale)]
 
-    [:*
+    [:div.menu-section
-     [:div.menu-btn {:on-click #(reset! show-menu? true)} i/actions]
+     [:div.menu-button {:on-click #(reset! show-menu? true)} i/actions]
+     [:div.project-tree {:alt (t locale "header.sitemap")
+                         :class (classnames :selected (contains? layout :sitemap))
+                         :on-click toggle-sitemap}
+      [:span.project-name (:name project) " /"]
+      [:span (:name file)]]
 
      [:& dropdown {:show @show-menu?
                    :on-close #(reset! show-menu? false)}
-      [:ul.workspace-menu
+      [:ul.menu
        [:li {:on-click #(st/emit! (dw/toggle-layout-flag :rules))}
         [:span i/ruler]
         [:span
@@ -139,28 +150,33 @@
 
 (mf/defc header
   [{:keys [page file layout project] :as props}]
-  (let [go-to-dashboard #(st/emit! (rt/nav :dashboard-team {:team-id "self"}))
+  (let [locale (i18n/use-locale)
-        toggle-sitemap #(st/emit! (dw/toggle-layout-flag :sitemap))
+        go-to-dashboard #(st/emit! (rt/nav :dashboard-team {:team-id "self"}))
+        zoom (mf/deref refs/selected-zoom)
         locale (i18n/use-locale)
         router (mf/deref router-ref)
         view-url (rt/resolve router :viewer {:page-id (:id page)} {:index 0})]
-    [:header.workspace-bar
+    [:header.workspace-header
      [:div.main-icon
       [:a {:on-click go-to-dashboard} i/logo-icon]]
 
-     [:& menu {:layout layout}]
+     [:& menu {:layout layout
+               :project project
+               :file file}]
 
-     [:div.project-tree-btn {:alt (tr "header.sitemap")
+     [:div.users-section
-                             :class (classnames :selected (contains? layout :sitemap))
-                             :on-click toggle-sitemap}
-      [:span.project-name (:name project) " /"]
-      [:span (:name file)]]
-
-     [:div.workspace-options
       [:& active-users]]
 
-     [:& zoom-widget]
+     [:div.options-section
+      [:& zoom-widget
+       {:zoom zoom
+        :on-increase #(st/emit! dw/increase-zoom)
+        :on-decrease #(st/emit! dw/decrease-zoom)
+        :on-zoom-to-50 #(st/emit! dw/zoom-to-50)
+        :on-zoom-to-100 #(st/emit! dw/reset-zoom)
+        :on-zoom-to-200 #(st/emit! dw/zoom-to-200)}]
+
+      [:a.preview-button
+       {;; :target "__blank"
+        :href (str "#" view-url)} i/play]]]))
 
-     [:a.preview {
-                  ;; :target "__blank"
-                  :href (str "#" view-url)} i/play]]))