Merge pull request #222 from uxbox/random_fixes

Random fixes

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

@@ -217,5 +217,19 @@
     }
 
   }
-
+}
+
+.chrome-picker {
+  font-family: inherit !important;
+
+  input {
+    margin-bottom: auto;
+  }
+
+  & > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
+    width: 25px !important;
+    height: 25px !important;
+    border-radius: 20px !important;
+    margin: 0 !important;
+  }
 }

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

@@ -118,6 +118,8 @@
       cursor: pointer;
       font-size: $fs12;
       padding: $small $x-small;
+      display: flex;
+      justify-content: space-between;
 
       svg {
         fill: $color-gray-60;
@@ -130,6 +132,10 @@
         margin: 0 $x-small;
       }
 
+      .shortcut {
+        color: $color-gray-20;
+      }
+
       &:hover {
         background-color: $color-primary-lighter;
       }

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

@@ -1516,11 +1516,14 @@
 ;; Shortcuts impl https://github.com/ccampbell/mousetrap
 
 (def shortcuts
-  {"ctrl+shift+m" #(st/emit! (toggle-layout-flag :sitemap))
+  {"ctrl+m" #(st/emit! (toggle-layout-flag :sitemap))
-   "ctrl+shift+i" #(st/emit! (toggle-layout-flag :libraries))
+   "ctrl+i" #(st/emit! (toggle-layout-flag :libraries))
-   "ctrl+shift+l" #(st/emit! (toggle-layout-flag :layers))
+   "ctrl+l" #(st/emit! (toggle-layout-flag :layers))
-   "ctrl+shift+r" #(st/emit! (toggle-layout-flag :rules))
+   "ctrl+r" #(st/emit! (toggle-layout-flag :rules))
-   "ctrl+shift+d" #(st/emit! (toggle-layout-flag :dynamic-alignment))
+   "ctrl+a" #(st/emit! (toggle-layout-flag :dynamic-alignment))
+   "ctrl+p" #(st/emit! (toggle-layout-flag :colorpalette))
+   "ctrl+'" #(st/emit! (toggle-layout-flag :display-grid))
+   "ctrl+shift+'" #(st/emit! (toggle-layout-flag :snap-grid))
    "+" #(st/emit! (increase-zoom nil))
    "-" #(st/emit! (decrease-zoom nil))
    "g" #(st/emit! create-group)

frontend/src/uxbox/main/ui/components/editable_select.cljs

@@ -16,7 +16,7 @@
    [uxbox.main.ui.icons :as i]
    [uxbox.main.ui.components.dropdown :refer [dropdown]]))
 
-(mf/defc editable-select [{:keys [value type options class on-change]}]
+(mf/defc editable-select [{:keys [value type options class on-change placeholder]}]
   (let [state (mf/use-state {:id (uuid/next)
                              :is-open? false
                              :current-value value})
@@ -52,6 +52,7 @@
     [:div.editable-select {:class class}
      [:input.input-text {:value (or (-> @state :current-value value->label) "")
                          :on-change handle-change-input
+                         :placeholder placeholder
                          :type type}]
      [:span.dropdown-button {:on-click open-dropdown} i/arrow-down]
 

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

@@ -116,8 +116,9 @@
         (rx/of handle-drawing-generic)))))
 
 (def handle-drawing-generic
-  (letfn [(resize-shape [{:keys [x y] :as shape} initial point lock? point-snap]
+  (letfn [(resize-shape [{:keys [x y] :as shape} point lock? point-snap]
-            (let [shape' (geom/shape->rect-shape shape)
+            (let [initial (gpt/point x y)
+                  shape' (geom/shape->rect-shape shape)
                   shapev (gpt/point (:width shape') (:height shape'))
                   deltav (gpt/to-vec initial point-snap)
                   scalev (gpt/divide (gpt/add shapev deltav) shapev)
@@ -130,8 +131,8 @@
                   (assoc-in [:modifiers :resize-origin] (gpt/point x y))
                   (assoc-in [:modifiers :resize-rotation] 0))))
 
-          (update-drawing [state initial point lock? point-snap]
+          (update-drawing [state point lock? point-snap]
-            (update-in state [:workspace-local :drawing] resize-shape initial point lock? point-snap))]
+            (update-in state [:workspace-local :drawing] resize-shape point lock? point-snap))]
 
     (ptk/reify ::handle-drawing-generic
       ptk/WatchEvent
@@ -140,7 +141,6 @@
               stoper? #(or (ms/mouse-up? %) (= % :interrupt))
               stoper (rx/filter stoper? stream)
               initial @ms/mouse-position
-              mouse ms/mouse-position
               
               page-id (get state :current-page-id)
               objects (get-in state [:workspace-data page-id :objects])
@@ -165,12 +165,18 @@
           (rx/concat
            (rx/of #(assoc-in state [:workspace-local :drawing] shape))
 
-           (->> mouse
+           (->> (snap/closest-snap-point page-id [shape] layout initial)
+                (rx/map (fn [{:keys [x y]}]
+                          #(-> %
+                               (assoc-in [:workspace-local :drawing :x] x)
+                               (assoc-in [:workspace-local :drawing :y] y)))))
+
+           (->> ms/mouse-position
                 (rx/with-latest vector ms/mouse-position-ctrl)
                 (rx/switch-map (fn [[point :as current]]
                                  (->> (snap/closest-snap-point page-id [shape] layout point)
                                       (rx/map #(conj current %)))))
-                (rx/map (fn [[pt ctrl? point-snap]] #(update-drawing % initial pt ctrl? point-snap)))
+                (rx/map (fn [[pt ctrl? point-snap]] #(update-drawing % pt ctrl? point-snap)))
                 (rx/take-until stoper))
            (rx/of handle-finish-drawing)))))))
 

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

@@ -42,7 +42,16 @@
                           :stroke-width (str (/ 1 zoom))}}])]])))
 
 (mf/defc layout-grid [{:keys [key frame zoom grid]}]
-  (let [{color-value :value color-opacity :opacity} (-> grid :params :color)]
+  (let [{color-value :value color-opacity :opacity} (-> grid :params :color)
+        gutter (-> grid :params :gutter)
+        gutter? (and (not (nil? gutter)) (not= gutter 0))
+
+        style (if gutter?
+                #js {:fill color-value
+                     :opacity color-opacity}
+                #js {:stroke color-value
+                     :strokeOpacity color-opacity
+                     :fill "transparent"})]
     [:g.grid
      (for [{:keys [x y width height]} (gg/grid-areas frame grid)]
        [:rect {:key (str key "-" x "-" y)
@@ -50,8 +59,7 @@
                :y y
                :width width
                :height height
-               :style {:fill color-value
+               :style style}])]))
-                       :opacity color-opacity}}])]))
 
 (mf/defc grid-display-frame [{:keys [frame zoom]}]
   (let [grids (:grids frame)]

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

@@ -75,43 +75,50 @@
         [:span
          (if (contains? layout :rules)
            (t locale "workspace.header.menu.hide-rules")
-           (t locale "workspace.header.menu.show-rules"))]]
+           (t locale "workspace.header.menu.show-rules"))]
+        [:span.shortcut "Ctrl+r"]]
 
        [:li {:on-click #(st/emit! (dw/toggle-layout-flag :display-grid))}
         [:span
          (if (contains? layout :display-grid)
            (t locale "workspace.header.menu.hide-grid")
-           (t locale "workspace.header.menu.show-grid"))]]
+           (t locale "workspace.header.menu.show-grid"))]
+        [:span.shortcut "Ctrl+'"]]
 
        [:li {:on-click #(st/emit! (dw/toggle-layout-flag :snap-grid))}
         [:span
          (if (contains? layout :snap-grid)
            (t locale "workspace.header.menu.disable-snap-grid")
-           (t locale "workspace.header.menu.enable-snap-grid"))]]
+           (t locale "workspace.header.menu.enable-snap-grid"))]
+        [:span.shortcut "Ctrl+Shift+'"]]
 
        [:li {:on-click #(st/emit! (dw/toggle-layout-flag :sitemap :layers))}
         [:span
          (if (or (contains? layout :sitemap) (contains? layout :layers))
            (t locale "workspace.header.menu.hide-layers")
-           (t locale "workspace.header.menu.show-layers"))]]
+           (t locale "workspace.header.menu.show-layers"))]
+        [:span.shortcut "Ctrl+l"]]
 
        [:li {:on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))}
         [:span
          (if (contains? layout :colorpalette)
            (t locale "workspace.header.menu.hide-palette")
-           (t locale "workspace.header.menu.show-palette"))]]
+           (t locale "workspace.header.menu.show-palette"))]
+        [:span.shortcut "Ctrl+p"]]
 
        [:li {:on-click #(st/emit! (dw/toggle-layout-flag :libraries))}
         [:span
          (if (contains? layout :libraries)
            (t locale "workspace.header.menu.hide-libraries")
-           (t locale "workspace.header.menu.show-libraries"))]]
+           (t locale "workspace.header.menu.show-libraries"))]
+        [:span.shortcut "Ctrl+i"]]
 
        [:li {:on-click #(st/emit! (dw/toggle-layout-flag :dynamic-alignment))}
         [:span
          (if (contains? layout :dynamic-alignment)
            (t locale "workspace.header.menu.disable-dynamic-alignment")
-           (t locale "workspace.header.menu.enable-dynamic-alignment"))]]
+           (t locale "workspace.header.menu.enable-dynamic-alignment"))]
+        [:span.shortcut "Ctrl+a"]]
        ]]]))
 
 ;; --- Header Component

frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs

@@ -146,6 +146,7 @@
                              :type (when (number? (:size params)) "number" )
                              :class "input-option"
                              :options size-options
+                             :placeholder "Auto"
                              :on-change handle-change-size}])
 
       [:div.grid-option-main-actions
@@ -167,6 +168,7 @@
                        :options size-options
                        :value (:size params)
                        :min 1
+                       :placeholder "Auto"
                        :on-change handle-change-size}])
 
       (when (= :column type)
@@ -175,6 +177,7 @@
                        :options size-options
                        :value (:size params)
                        :min 1
+                       :placeholder "Auto"
                        :on-change handle-change-size}])
 
       (when (#{:row :column} type)
@@ -196,6 +199,7 @@
                                 (t locale "workspace.options.grid.params.height")
                                 (t locale "workspace.options.grid.params.width"))
                        :class "pixels"
+                       :placeholder "Auto"
                        :value (or (:item-length params) "")
                        :on-change handle-change-item-length}])
 
@@ -205,10 +209,12 @@
                         :class "pixels"
                         :value (:gutter params)
                         :min 0
+                        :placeholder "0"
                         :on-change (handle-change :params :gutter)}]
          [:& input-row {:label (t locale "workspace.options.grid.params.margin")
                         :class "pixels"
                         :min 0
+                        :placeholder "0"
                         :value (:margin params)
                         :on-change (handle-change :params :margin)}]])
 

frontend/src/uxbox/main/ui/workspace/sidebar/options/rows/input_row.cljs

@@ -15,7 +15,7 @@
    [uxbox.main.ui.components.editable-select :refer [editable-select]]
    [uxbox.util.dom :as dom]))
 
-(mf/defc input-row [{:keys [label options value class min max on-change type]}]
+(mf/defc input-row [{:keys [label options value class min max on-change type placeholder]}]
   [:div.row-flex.input-row
    [:span.element-set-subtitle label]
    [:div.input-element {:class class}
@@ -26,11 +26,13 @@
                   :class "input-option"
                   :options options
                   :on-change on-change}]
+
       :editable-select
       [:& editable-select {:value value
                            :class "input-option"
                            :options options
                            :type (when (number? value) "number")
+                           :placeholder placeholder
                            :on-change on-change}]
 
       (let [handle-change
@@ -41,9 +43,9 @@
                            (or (not max) (<= value max)))
                   (on-change value))))]
         [:input.input-text
-         {:placeholder label
+         {:placeholder placeholder
           :type "number"
           :on-change handle-change
-          :value value}]))
+          :value (or value "")}]))
     
     ]])

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

@@ -56,12 +56,16 @@
                                        (when (not-empty snaps) (map #(vector point %) snaps))) @state))]
     (mf/use-effect
      (fn []
+       (let [sub
              (->> subject
                   (rx/switch-map #(rx/combine-latest
                                    concat
                                    (get-snap :y %)
                                    (get-snap :x %)))
-            (rx/subs #(reset! state %)))))
+                  (rx/subs #(reset! state %)))]
+         
+         ;; On unmount callback
+         #(rx/dispose! sub))))
 
     (mf/use-effect
      (mf/deps shapes)

frontend/src/uxbox/util/color.cljs

@@ -33,7 +33,7 @@
   [v]
   (try
     (into [] (gcolor/hexToRgb v))
-    (catch js/Object e [0 0 0])))
+    (catch :default e [0 0 0])))
 
 (defn rgb->hex
   [[r g b]]

frontend/src/uxbox/util/geom/grid.cljs

@@ -30,7 +30,7 @@
   [{:keys [width height x y] :as frame} {:keys [size gutter margin item-length type] :as params}]
   (let [size (if (number? size) size (calculate-size width item-length margin gutter))
         parts (/ width size)
-        item-width (or item-length (+ parts (- gutter) (/ gutter size) (- (/ (* margin 2) size))))
+        item-width (min (or item-length ##Inf) (+ parts (- gutter) (/ gutter size) (- (/ (* margin 2) size))))
         item-height height
         initial-offset (case type
                          :right (- width (* item-width size) (* gutter (dec size)) margin)
@@ -46,7 +46,7 @@
   (let [size (if (number? size) size (calculate-size height item-length margin gutter))
         parts (/ height size)
         item-width width
-        item-height (or item-length (+ parts (- gutter) (/ gutter size) (- (/ (* margin 2) size))))
+        item-height (min (or item-length ##Inf) (+ parts (- gutter) (/ gutter size) (- (/ (* margin 2) size))))
         initial-offset (case type
                          :right (- height (* item-height size) (* gutter (dec size)) margin)
                          :center (/ (- height (* item-height size) (* gutter (dec size))) 2)