From b81fb55d2c6f2eccbccf07be16ab6368b20e0dbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Moya?= <andres.moya@kaleidos.net>
Date: Mon, 23 Mar 2020 15:11:29 +0100
Subject: [PATCH] Improve zoom control in workspace header

---
 .../styles/main/partials/workspace-bar.scss   | 53 +++++++++++++++++--
 frontend/src/uxbox/main/constants.cljs        |  4 +-
 frontend/src/uxbox/main/data/workspace.cljs   | 12 +++++
 .../src/uxbox/main/ui/workspace/header.cljs   | 23 +++++++-
 4 files changed, 85 insertions(+), 7 deletions(-)

diff --git a/frontend/resources/styles/main/partials/workspace-bar.scss b/frontend/resources/styles/main/partials/workspace-bar.scss
index f19f875e5..6a075a47f 100644
--- a/frontend/resources/styles/main/partials/workspace-bar.scss
+++ b/frontend/resources/styles/main/partials/workspace-bar.scss
@@ -146,11 +146,51 @@
 .zoom-input {
   align-items: center;
   display: flex;
+  position: relative;
 
   span {
     color: $color-gray-10;
     font-size: $fs15;
-    margin: 0 $x-small;
+    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,
@@ -161,6 +201,7 @@
     cursor: pointer;
     color: $color-gray-20;
     display: flex;
+    opacity: 0;
     flex-shrink: 0;
     font-size: $fs20;
     font-weight: bold;
@@ -169,12 +210,18 @@
     width: 20px;
 
     &:hover {
-      background-color: $color-primary;
-      color: $color-gray-60;
+      color: $color-primary;
     }
 
   }
 
+  &:hover {
+    .add-zoom,
+    .remove-zoom {
+      opacity: 100%;
+    }
+  }
+
 }
 
 .options-btn {
diff --git a/frontend/src/uxbox/main/constants.cljs b/frontend/src/uxbox/main/constants.cljs
index f3ec1a52f..f2b852de3 100644
--- a/frontend/src/uxbox/main/constants.cljs
+++ b/frontend/src/uxbox/main/constants.cljs
@@ -28,7 +28,7 @@
 
 (def zoom-levels
   [0.20 0.21 0.22 0.23 0.24 0.25 0.27 0.28 0.30 0.32 0.34
-   0.36 0.38 0.40 0.42 0.44 0.46 0.48 0.51 0.54 0.57 0.60
+   0.36 0.38 0.40 0.42 0.44 0.46 0.48 0.50 0.54 0.57 0.60
    0.63 0.66 0.69 0.73 0.77 0.81 0.85 0.90 0.95 1.00 1.05
    1.10 1.15 1.21 1.27 1.33 1.40 1.47 1.54 1.62 1.70 1.78
-   1.87 1.96 2.06 2.16 2.27 2.38 2.50 2.62 2.75 2.88 3.00])
+   1.87 1.96 2.00 2.16 2.27 2.38 2.50 2.62 2.75 2.88 3.00])
diff --git a/frontend/src/uxbox/main/data/workspace.cljs b/frontend/src/uxbox/main/data/workspace.cljs
index a735df079..b72b87a16 100644
--- a/frontend/src/uxbox/main/data/workspace.cljs
+++ b/frontend/src/uxbox/main/data/workspace.cljs
@@ -809,6 +809,18 @@
     (update [_ state]
       (assoc-in state [:workspace-local :zoom] 1))))
 
+(def zoom-to-50
+  (ptk/reify ::zoom-to-50
+    ptk/UpdateEvent
+    (update [_ state]
+      (assoc-in state [:workspace-local :zoom] 0.5))))
+
+(def zoom-to-200
+  (ptk/reify ::zoom-to-200
+    ptk/UpdateEvent
+    (update [_ state]
+      (assoc-in state [:workspace-local :zoom] 2))))
+
 ;; --- Grid Alignment
 
 ;; (defn initialize-alignment
diff --git a/frontend/src/uxbox/main/ui/workspace/header.cljs b/frontend/src/uxbox/main/ui/workspace/header.cljs
index 8c529b151..1ca2d3ef0 100644
--- a/frontend/src/uxbox/main/ui/workspace/header.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/header.cljs
@@ -31,11 +31,30 @@
   {:wrap [mf/wrap-memo]}
   [props]
   (let [zoom (mf/deref refs/selected-zoom)
+        show-dropdown? (mf/use-state false)
         increase #(st/emit! dw/increase-zoom)
-        decrease #(st/emit! dw/decrease-zoom)]
+        decrease #(st/emit! dw/decrease-zoom)
+        zoom-to-50 #(st/emit! dw/zoom-to-50)
+        zoom-to-100 #(st/emit! dw/reset-zoom)
+        zoom-to-200 #(st/emit! dw/zoom-to-200)]
     [:div.zoom-input
      [:span.add-zoom {:on-click decrease} "-"]
-     [:span {} (str (mth/round (* 100 zoom)) "%")]
+     [:div {: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} "+"]]))
 
 ;; --- Header Users