✨ New rules styles, resize pages

frontend/resources/styles/main/partials/sidebar-sitemap.scss

@@ -5,8 +5,8 @@
 // Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
 // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
-.sitemap {
+#sitemap {
-  flex: none !important;
+  height: var(--height, 200px);
 
   .element-list {
     li {
@@ -118,6 +118,15 @@
       }
     }
   }
+
+  & .resize-area {
+    position: absolute;
+    width: 100%;
+    height: 16px;
+    bottom: -8px;
+    left: 0;
+    cursor: ns-resize;
+  }
 }
 
 .add-page,

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

@@ -13,6 +13,27 @@
   &.settings-bar-left {
     border-left: none;
     border-right: 1px solid $color-gray-60;
+
+    & .tab-container-tabs {
+      padding-left: 1.5rem;
+    }
+
+    & button.collapse-sidebar {
+      background: none;
+      border: none;
+      cursor: pointer;
+      height: 2.5rem;
+      padding-top: 0.75rem;
+      position: absolute;
+      width: 1rem;
+
+      & svg {
+        width: 12px;
+        height: 12px;
+        fill: $color-gray-20;
+        transform: rotate(180deg);
+      }
+    }
   }
 
   .settings-bar-inside {
@@ -59,7 +80,6 @@
       flex: 1;
       width: 100%;
       height: 100%;
-      overflow: hidden;
 
       .tool-window-bar {
         align-items: center;
@@ -148,7 +168,7 @@
     }
   }
 
-  & .resize-area {
+  & > .resize-area {
     position: absolute;
     width: 8px;
     height: 100%;
@@ -156,11 +176,11 @@
     cursor: ew-resize;
   }
 
-  &.settings-bar-left .resize-area {
+  &.settings-bar-left > .resize-area {
     right: -8px;
   }
 
-  &.settings-bar-right .resize-area {
+  &.settings-bar-right > .resize-area {
     left: -8px;
   }
 }

frontend/resources/styles/main/partials/tab-container.scss

@@ -32,10 +32,6 @@
 
 .tab-container-content {
   flex: 1;
-  height: 100%;
-  max-height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
 }
 
 .tab-element,

frontend/src/app/main/data/workspace.cljs

@@ -528,7 +528,9 @@
     (update [_ state]
       (update state :workspace-local
               (fn [{:keys [vport] :as local}]
-                (if (or (mth/almost-zero? width) (mth/almost-zero? height))
+                (if (or (nil? vport)
+                        (mth/almost-zero? width)
+                        (mth/almost-zero? height))
                   ;; If we have a resize to zero just keep the old value
                   local
                   (let [wprop (/ (:width vport) width)

frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs

@@ -45,8 +45,7 @@
             [:*
              [:span.tool-window-bar-icon
               [:& si/element-icon {:shape first-shape}]]
-             [:span.tool-window-bar-title (->> selected-type d/name (str "handoff.tabs.code.selected.") (tr))]])
+             [:span.tool-window-bar-title (->> selected-type d/name (str "handoff.tabs.code.selected.") (tr))]])]
-          ]
          [:div.tool-window-content
           [:& tab-container {:on-change-tab #(do
                                                (reset! expanded false)

frontend/src/app/main/ui/workspace.cljs

@@ -61,12 +61,12 @@
                      :selected selected
                      :layout layout}]]]
 
-     [:& left-toolbar {:layout layout}]
+     (when-not (:hide-ui layout)
-
+       [:*
-     ;; Aside
+        [:& left-toolbar {:layout layout}]
-     [:& left-sidebar {:layout layout}]
+        [:& left-sidebar {:layout layout}]
-     [:& right-sidebar {:section options-mode
+        [:& right-sidebar {:section options-mode
-                        :selected selected}]]))
+                           :selected selected}]])]))
 
 (def trimmed-page-ref (l/derived :trimmed-page st/state =))
 
@@ -125,10 +125,11 @@
       [:& (mf/provider ctx/current-project-id) {:value (:id project)}
        [:& (mf/provider ctx/current-page-id) {:value page-id}
         [:section#workspace
-         [:& header {:file file
+         (when (not (:hide-ui layout))
-                     :page-id page-id
+           [:& header {:file file
-                     :project project
+                       :page-id page-id
-                     :layout layout}]
+                       :project project
+                       :layout layout}])
 
          [:& context-menu]
 

frontend/src/app/main/ui/workspace/left_toolbar.cljs

@@ -120,20 +120,13 @@
 
       [:ul.left-toolbar-options.panels
        [:li.tooltip.tooltip-right
-        {:alt (tr "workspace.sidebar.layers" (sc/get-tooltip :toggle-layers))
+        {;;:alt (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-textpalette))
-         :class (when (contains? layout :layers) "selected")
+         :class (when (contains? layout :textpalette) "selected")
-         :on-click (st/emitf (dw/go-to-layout :layers))}
+         :on-click (do
-        i/layers]
+                     (r/set-resize-type! :bottom)
-       [:li.tooltip.tooltip-right
+                     (st/emitf (dw/toggle-layout-flags :textpalette)))}
-        {:alt (tr "workspace.toolbar.assets" (sc/get-tooltip :toggle-assets))
+        i/palette]
-         :class (when (contains? layout :assets) "selected")
+       
-         :on-click (st/emitf (dw/go-to-layout :assets))}
-        i/library]
-       [:li.tooltip.tooltip-right
-        {:alt (tr "workspace.sidebar.history" (sc/get-tooltip :toggle-history))
-         :class (when (contains? layout :document-history) "selected")
-         :on-click (st/emitf (dw/go-to-layout :document-history))}
-        i/recent]
        [:li.tooltip.tooltip-right
         {:alt (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-palette))
          :class (when (contains? layout :colorpalette) "selected")

frontend/src/app/main/ui/workspace/sidebar.cljs

@@ -6,6 +6,8 @@
 
 (ns app.main.ui.workspace.sidebar
   (:require
+   [app.main.ui.components.tab-container :refer [tab-container tab-element]]
+   [app.main.data.workspace :as dw]
    [app.main.refs :as refs]
    [app.main.ui.hooks.resize :refer [use-resize-hook]]
    [app.main.ui.workspace.comments :refer [comments-sidebar]]
@@ -15,14 +17,20 @@
    [app.main.ui.workspace.sidebar.options :refer [options-toolbox]]
    [app.main.ui.workspace.sidebar.sitemap :refer [sitemap]]
    [cuerdas.core :as str]
-   [rumext.alpha :as mf]))
+   [rumext.alpha :as mf]
+   [app.main.store :as st]
+   [app.main.ui.icons :as i]
+   ))
 
 ;; --- Left Sidebar (Component)
 
 (mf/defc left-sidebar
   {:wrap [mf/memo]}
   [{:keys [layout ] :as props}]
-  (let [{:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
+  (let [section (cond (contains? layout :layers) :layers
+                      (contains? layout :assets) :assets)
+
+        {:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
         (use-resize-hook 255 255 500 :x false :left)]
 
     [:aside.settings-bar.settings-bar-left {:ref parent-ref
@@ -30,18 +38,21 @@
      [:div.resize-area {:on-pointer-down on-pointer-down
                         :on-lost-pointer-capture on-lost-pointer-capture
                         :on-mouse-move on-mouse-move}]
+
+
      [:div.settings-bar-inside
-      {:data-layout (str/join "," layout)}
+      [:button.collapse-sidebar i/arrow-slide]
-      (when (contains? layout :layers)
+      [:& tab-container {:on-change-tab #(st/emit! (dw/go-to-layout %))
-        [:*
+                         :selected section}
-         [:& sitemap {:layout layout}]
-         [:& layers-toolbox]])
 
-      (when (contains? layout :document-history)
+       [:& tab-element {:id :layers :title "Layers"}
-        [:& history-toolbox])
+        [:& sitemap {:layout layout}]
+        [:& layers-toolbox]]
 
-      (when (contains? layout :assets)
+       [:& tab-element {:id :assets :title "Library"}
-        [:& assets-toolbox])]]))
+        [:& assets-toolbox]]]]
+     
+     ]))
 
 ;; --- Right Sidebar (Component)
 

frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs

@@ -20,7 +20,9 @@
    [app.util.keyboard :as kbd]
    [cuerdas.core :as str]
    [okulary.core :as l]
-   [rumext.alpha :as mf]))
+   [rumext.alpha :as mf]
+   [app.main.ui.hooks.resize :refer [use-resize-hook]]
+   ))
 
 ;; --- Page Item
 
@@ -205,10 +207,14 @@
                                                   :project-id (:project-id file)}))))
         show-pages? (mf/use-state true)
 
+        {:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]}
+        (use-resize-hook 200 38 400 :y false nil)
+
         toggle-pages
         (mf/use-callback #(reset! show-pages? not))]
 
-    [:div.sitemap.tool-window
+    [:div#sitemap.tool-window {:ref parent-ref
+                               :style #js {"--height" (str size "px")}}
      [:div.tool-window-bar
       [:span (tr "workspace.sidebar.sitemap")]
       [:div.add-page {:on-click create} i/close]
@@ -216,4 +222,10 @@
 
      (when @show-pages?
        [:div.tool-window-content
-        [:& pages-list {:file file :key (:id file)}]])]))
+        [:& pages-list {:file file :key (:id file)}]])
+
+     [:div.resize-area {:on-pointer-down on-pointer-down
+                        :on-lost-pointer-capture on-lost-pointer-capture
+                        :on-mouse-move on-mouse-move}]
+
+     ]))

frontend/src/app/main/ui/workspace/viewport.cljs

@@ -156,7 +156,7 @@
         show-selrect?            (and selrect (empty? drawing))
         show-measures?           (and (not transform) (not node-editing?) show-distances?)
         show-artboard-names?     (contains? layout :display-artboard-names)
-        show-rules?              (contains? layout :rules)
+        show-rules?              (and (contains? layout :rules) (not (contains? layout :hide-ui)))
 
         disabled-guides?         (or drawing-tool transform)]
 

frontend/src/app/main/ui/workspace/viewport/rules.cljs

@@ -53,6 +53,21 @@
           height (- (:height vbox) (/ 21 zoom))]
       {:x x :y y :width width :height height})))
 
+(defn get-background-area
+  [vbox zoom axis]
+  (if (= axis :x)
+    (let [x      (:x vbox)
+          y      (:y vbox)
+          width  (:width vbox)
+          height (/ 22 zoom)]
+      {:x x :y y :width width :height height})
+
+    (let [x      (:x vbox)
+          y      (+ (:y vbox) (/ 22 zoom))
+          width  (/ 22 zoom)
+          height (- (:height vbox) (/ 21 zoom))]
+      {:x x :y y :width width :height height})))
+
 (defn get-rule-params
   [vbox axis]
   (if (= axis :x)
@@ -89,41 +104,48 @@
         step (calculate-step-size zoom)
         clip-id (str "clip-rule-" (d/name axis))]
 
-    [:g.rules {:clipPath (str "url(#" clip-id ")")} 
+    
+    [:*
+     (let [{:keys [x y width height]} (get-background-area vbox zoom axis)]
+       [:rect {:x x :y y :width width :height height :style {:fill "#303236"}}])
 
-     [:defs
+     [:g.rules {:clipPath (str "url(#" clip-id ")")} 
-      [:clipPath {:id clip-id}
-       (let [{:keys [x y width height]} (get-clip-area vbox zoom axis)]
-         [:rect {:x x :y y :width width :height height}])]]
 
-     (let [{:keys [start end]} (get-rule-params vbox axis)
+      [:defs
-           minv (max (mth/round start) -100000)
+       [:clipPath {:id clip-id}
-           minv (* (mth/ceil (/ minv step)) step)
+        (let [{:keys [x y width height]} (get-clip-area vbox zoom axis)]
-           maxv (min (mth/round end) 100000)
+          [:rect {:x x :y y :width width :height height}])]]
-           maxv (* (mth/floor (/ maxv step)) step)]
 
-       (for [step-val (range minv (inc maxv) step)]
+      
-         (let [{:keys [text-x text-y line-x1 line-y1 line-x2 line-y2]}
-               (get-rule-axis step-val vbox zoom axis)]
-           [:* 
-            [:text {:key (str "text-" (d/name axis) "-" step-val)
-                    :x text-x
-                    :y text-y
-                    :text-anchor "middle"
-                    :dominant-baseline "middle"
-                    :transform (when (= axis :y) (str "rotate(-90 " text-x "," text-y ")"))
-                    :style {:font-size (/ 13 zoom)
-                            :font-family "sourcesanspro"
-                            :fill colors/gray-30}}
-             (str (mth/round step-val))]
 
-            [:line {:key (str "line-" (d/name axis) "-"  step-val)
+      (let [{:keys [start end]} (get-rule-params vbox axis)
-                    :x1 line-x1
+            minv (max (mth/round start) -100000)
-                    :y1 line-y1
+            minv (* (mth/ceil (/ minv step)) step)
-                    :x2 line-x2
+            maxv (min (mth/round end) 100000)
-                    :y2 line-y2
+            maxv (* (mth/floor (/ maxv step)) step)]
-                    :style {:stroke colors/gray-30
+
-                            :stroke-width rules-width}}]])))]))
+        (for [step-val (range minv (inc maxv) step)]
+          (let [{:keys [text-x text-y line-x1 line-y1 line-x2 line-y2]}
+                (get-rule-axis step-val vbox zoom axis)]
+            [:* 
+             [:text {:key (str "text-" (d/name axis) "-" step-val)
+                     :x text-x
+                     :y text-y
+                     :text-anchor "middle"
+                     :dominant-baseline "middle"
+                     :transform (when (= axis :y) (str "rotate(-90 " text-x "," text-y ")"))
+                     :style {:font-size (/ 13 zoom)
+                             :font-family "sourcesanspro"
+                             :fill colors/gray-30}}
+              (str (mth/round step-val))]
+
+             [:line {:key (str "line-" (d/name axis) "-"  step-val)
+                     :x1 line-x1
+                     :y1 line-y1
+                     :x2 line-x2
+                     :y2 line-y2
+                     :style {:stroke colors/gray-30
+                             :stroke-width rules-width}}]])))]]))
 
 (mf/defc rules
   {::mf/wrap-props false

frontend/src/debug.cljs

@@ -278,3 +278,8 @@
    dw/reset-zoom
    (dw/update-viewport-position {:x (constantly 0) :y (constantly 0)})))
 
+
+(defn ^:export hide-ui
+  []
+  (st/emit!
+   (dw/toggle-layout-flags :hide-ui)))