Add implementation for grid settings and page background.

On element options sidebar.

frontend/resources/styles/main/partials/sidebar-element-options.scss

@@ -252,6 +252,7 @@
 
 .color-th {
   background-color: $color-gray-lighter;
+  border: 1px solid #aaa;
   border-radius: 50%;
   cursor: pointer;
   flex-shrink: 0;

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

@@ -27,6 +27,8 @@
 (s/def ::grid-x-axis number?)
 (s/def ::grid-y-axis number?)
 (s/def ::grid-color us/color?)
+(s/def ::background us/color?)
+(s/def ::background-opacity number?)
 (s/def ::grid-alignment boolean?)
 (s/def ::width number?)
 (s/def ::height number?)
@@ -38,9 +40,10 @@
                    ::grid-x-axis
                    ::grid-color
                    ::grid-alignment
+                   ::background
+                   ::background-opacity
                    ::layout]))
 
-
 ;; --- Protocols
 
 (defprotocol IPageUpdate

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

@@ -210,7 +210,7 @@
   ptk/WatchEvent
   (watch [_ state s]
     (let [page (get-in state [:pages id])
-          opts (:options page)
+          opts (:metadata page)
           message {:cmd :grid-init
                    :width c/viewport-width
                    :height c/viewport-height

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

@@ -32,12 +32,13 @@
 ;; --- Background
 
 (mx/defc background
-  []
+  {:mixins [mx/static]}
+  [{:keys [background] :as metadata}]
   [:rect
    {:x 0 :y 0
     :width "100%"
     :height "100%"
-    :fill "white"}])
+    :fill (or background "#000000")}])
 
 ;; --- Canvas
 
@@ -53,7 +54,7 @@
                        :ref (str "canvas" id)
                        :width width
                        :height height}
-     (background)
+     (background metadata)
      [:svg.page-layout
       [:g.main {}
        (for [item (reverse (:shapes page))]

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

@@ -6,32 +6,31 @@
 ;; Copyright (c) 2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 (ns uxbox.main.ui.workspace.colorpicker
-  (:require [sablono.core :as html :refer-macros [html]]
+  (:require [lentes.core :as l]
-            [rum.core :as rum]
+            [uxbox.util.router :as rt]
-            [lentes.core :as l]
-            [uxbox.util.i18n :refer (tr)]
-            [uxbox.util.router :as r]
             [potok.core :as ptk]
             [uxbox.store :as st]
             [uxbox.main.data.workspace :as udw]
+            [uxbox.main.data.pages :as udp]
             [uxbox.main.data.shapes :as uds]
             [uxbox.main.ui.workspace.base :as wb]
             [uxbox.main.ui.icons :as i]
-            [uxbox.util.mixins :as mx :include-macros true]
             [uxbox.main.ui.lightbox :as lbx]
             [uxbox.main.ui.colorpicker :as cp]
-            [uxbox.main.ui.workspace.recent-colors :refer (recent-colors)]
+            [uxbox.main.ui.workspace.recent-colors :refer [recent-colors]]
             [uxbox.main.ui.workspace.base :as wb]
             [uxbox.main.geom :as geom]
+            [uxbox.util.mixins :as mx :include-macros true]
             [uxbox.util.dom :as dom]
-            [uxbox.util.data :refer (parse-int parse-float read-string)]))
+            [uxbox.util.data :refer [parse-int parse-float read-string]]))
 
 (defn- focus-shape
   [id]
   (-> (l/in [:shapes id])
       (l/derive st/state)))
 
-(defn- colorpicker-render
+(mx/defcs shape-colorpicker
+  {:mixins [mx/reactive mx/static]}
   [own {:keys [x y shape attr] :as opts}]
   (let [shape (mx/react (focus-shape shape))
         left (- x 260)
@@ -41,28 +40,38 @@
                 (st/emit!
                  (case attr
                    :stroke (uds/update-stroke-attrs (:id shape) attrs)
-                   :fill (uds/update-fill-attrs (:id shape) attrs)))))
+                   :fill (uds/update-fill-attrs (:id shape) attrs)))))]
-            (on-change-color [event]
+      [:div.colorpicker-tooltip
-              (let [color (dom/event->value event)]
+       {:style {:left (str left "px")
-                (change-color color)))]
+                :top (str top "px")}}
-      (html
-       [:div.colorpicker-tooltip
-        {:style {:left (str left "px")
-                 :top (str top "px")}}
 
-        (cp/colorpicker
+       (cp/colorpicker
-         :theme :small
+        :theme :small
-         :value (get shape attr "#000000")
+        :value (get shape attr "#000000")
-         :on-change change-color)
+        :on-change change-color)
+       (recent-colors shape change-color)])))
 
-        (recent-colors shape change-color)]))))
+(mx/defcs page-colorpicker
+  {:mixins [mx/reactive mx/static]}
+  [own {:keys [x y attr default] :as opts}]
+  (let [{:keys [id metadata] :as page} (mx/react wb/page-ref)]
+    (letfn [(change-color [color]
+              (let [metadata (assoc metadata attr color)]
+                (st/emit! (udp/update-metadata id metadata))))]
+      [:div.colorpicker-tooltip
+       {:style {:left (str (- x 260) "px")
+                :top (str (- y 50) "px")}}
 
-(def colorpicker
+       (cp/colorpicker
-  (mx/component
+        :theme :small
-   {:render colorpicker-render
+        :value (get metadata attr default)
-    :name "colorpicker"
+        :on-change change-color)])))
-    :mixins [mx/reactive mx/static]}))
 
-(defmethod lbx/render-lightbox :workspace/colorpicker
+(defmethod lbx/render-lightbox :workspace/shape-colorpicker
   [params]
-  (colorpicker params))
+  (shape-colorpicker params))
+
+(defmethod lbx/render-lightbox :workspace/page-colorpicker
+  [params]
+  (println "kakakaka")
+  (page-colorpicker params))

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

@@ -6,9 +6,7 @@
 ;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 (ns uxbox.main.ui.workspace.grid
-  (:require [sablono.core :as html :refer-macros [html]]
+  (:require [cuerdas.core :as str]
-            [rum.core :as rum]
-            [cuerdas.core :as str]
             [uxbox.main.constants :as c]
             [uxbox.util.mixins :as mx :include-macros true]
             [uxbox.main.ui.workspace.base :as wb]))
@@ -18,9 +16,10 @@
 (declare vertical-line)
 (declare horizontal-line)
 
-(defn- grid-render
+(mx/defcs grid
+  {:mixins [mx/static mx/reactive]}
   [own]
-  (let [options (:options (mx/react wb/page-ref))
+  (let [options (:metadata (mx/react wb/page-ref))
         color (:grid-color options "#cccccc")
         width c/viewport-width
         height c/viewport-height
@@ -35,15 +34,8 @@
         path (as-> [] $
                (reduce (partial vertical-line height) $ x-ticks)
                (reduce (partial horizontal-line width) $ y-ticks))]
-    (html
+    [:g.grid {:style {:pointer-events "none"}}
-     [:g.grid {:style {:pointer-events "none"}}
+     [:path {:d (str/join " " path) :stroke color :opacity "0.3"}]]))
-      [:path {:d (str/join " " path) :stroke color :opacity "0.3"}]])))
-
-(def grid
-  (mx/component
-   {:render grid-render
-    :name "grid"
-    :mixins [mx/static mx/reactive]}))
 
 ;; --- Helpers
 

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

@@ -17,8 +17,6 @@
    [uxbox.main.ui.workspace.base :as wb]
    [uxbox.main.ui.icons :as i]
    [uxbox.util.mixins :as mx :include-macros true]
-   [uxbox.main.ui.workspace.colorpicker :refer (colorpicker)]
-   [uxbox.main.ui.workspace.recent-colors :refer (recent-colors)]
    [uxbox.main.ui.workspace.sidebar.options.icon-measures :as options-iconm]
    [uxbox.main.ui.workspace.sidebar.options.circle-measures :as options-circlem]
    [uxbox.main.ui.workspace.sidebar.options.rect-measures :as options-rectm]

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

@@ -17,8 +17,6 @@
             [uxbox.main.data.shapes :as uds]
             [uxbox.main.ui.icons :as i]
             [uxbox.util.mixins :as mx :include-macros true]
-            [uxbox.main.ui.workspace.colorpicker :refer (colorpicker)]
-            [uxbox.main.ui.workspace.recent-colors :refer (recent-colors)]
             [uxbox.main.geom :as geom]
             [uxbox.util.dom :as dom]
             [uxbox.util.data :refer (parse-int parse-float read-string)]))

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

@@ -42,7 +42,7 @@
                         :shape (:id shape)
                         :attr :fill
                         :transparent? true}]
-              (udl/open! :workspace/colorpicker opts)))]
+              (udl/open! :workspace/shape-colorpicker opts)))]
 
     (html
      [:div.element-set {:key (str (:id menu))}

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

@@ -17,8 +17,6 @@
             [uxbox.main.data.shapes :as uds]
             [uxbox.main.ui.icons :as i]
             [uxbox.util.mixins :as mx :include-macros true]
-            [uxbox.main.ui.workspace.colorpicker :refer (colorpicker)]
-            [uxbox.main.ui.workspace.recent-colors :refer (recent-colors)]
             [uxbox.main.geom :as geom]
             [uxbox.util.dom :as dom]
             [uxbox.util.data :refer (parse-int parse-float read-string)]))

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

@@ -17,8 +17,6 @@
             [uxbox.main.data.shapes :as uds]
             [uxbox.main.ui.icons :as i]
             [uxbox.util.mixins :as mx :include-macros true]
-            [uxbox.main.ui.workspace.colorpicker :refer (colorpicker)]
-            [uxbox.main.ui.workspace.recent-colors :refer (recent-colors)]
             [uxbox.main.geom :as geom]
             [uxbox.util.dom :as dom]
             [uxbox.util.data :refer (parse-int parse-float read-string)]))

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

@@ -11,10 +11,10 @@
             [potok.core :as ptk]
             [uxbox.store :as st]
             [uxbox.main.data.pages :as udp]
+            [uxbox.main.data.lightbox :as udl]
             [uxbox.main.ui.icons :as i]
             [uxbox.main.ui.workspace.base :refer [page-ref]]
-            [uxbox.main.ui.workspace.colorpicker :refer [colorpicker]]
+            [uxbox.main.ui.workspace.colorpicker]
-            [uxbox.main.ui.workspace.recent-colors :refer [recent-colors]]
             [uxbox.util.mixins :as mx :include-macros true]
             [uxbox.util.data :refer [parse-int]]
             [uxbox.util.dom :as dom]))
@@ -22,8 +22,8 @@
 (mx/defcs measures-menu
   {:mixins [mx/static mx/reactive]}
   [own menu]
-  (let [{:keys [id] :as page} (mx/react page-ref)
+  (let [{:keys [id metadata] :as page} (mx/react page-ref)
-        {:keys [width height] :as metadata} (:metadata page)]
+        {:keys [width height background] :as metadata} metadata]
     (letfn [(on-width-change []
               (when-let [value (-> (mx/ref-node own "width")
                                    (dom/get-value)
@@ -37,7 +37,16 @@
                                    (parse-int nil))]
                 (->> (assoc metadata :height value)
                      (udp/update-metadata id)
-                     (st/emit!))))]
+                     (st/emit!))))
+          (show-color-picker [event]
+            (println "show-color-picker")
+            (let [x (.-clientX event)
+                  y (.-clientY event)
+                  opts {:x x :y y
+                        :default "#ffffff"
+                        :transparent? true
+                        :attr :background}]
+              (udl/open! :workspace/page-colorpicker opts)))]
       [:div.element-set
        [:div.element-set-title (:name menu)]
        [:div.element-set-content
@@ -59,29 +68,77 @@
             :placeholder "height"}]]]
         [:span "Background color"]
         [:div.row-flex.color-data
-         [:span.color-th {:style {:background-color "#d2d2d2"}}]
+         [:span.color-th
+          {:style {:background-color (or background "#ffffff")}
+           :on-click show-color-picker}]
          [:div.color-info
-          [:span "#D2D2D2"]]]]])))
+          [:span (or background "#ffffff")]]]]])))
 
-(mx/defc grid-options-menu
+(mx/defcs grid-options-menu
-  {:mixins [mx/static]}
+  {:mixins [mx/static mx/reactive]}
-  [menu]
+  [own menu]
-  [:div.element-set
+  (let [{:keys [id metadata] :as page} (mx/react page-ref)]
-   [:div.element-set-title (:name menu)]
+    (letfn [(on-x-change []
-   [:div.element-set-content
+              (when-let [value (-> (mx/ref-node own "x-axis")
-    [:span "Size"]
+                                   (dom/get-value)
-    [:div.row-flex
+                                   (parse-int nil))]
-     [:div.input-element.pixels
+                (->> (assoc metadata :grid-x-axis value)
-      [:input.input-text {:type "number" :placeholder "x"}]]
+                     (udp/update-metadata id)
-     [:div.input-element.pixels
+                     (st/emit!))))
-      [:input.input-text {:type "number" :placeholder "y"}]]]
+            (on-y-change []
-    [:span "Color"]
+              (when-let [value (-> (mx/ref-node own "y-axis")
-    [:div.row-flex.color-data
+                                   (dom/get-value)
-     [:span.color-th {:style {:background-color "#d2d2d2"}}]
+                                   (parse-int nil))]
-     [:div.color-info
+                (->> (assoc metadata :grid-y-axis value)
-      [:span "#D2D2D2"]]]
+                     (udp/update-metadata id)
-    [:span "Magnet option"]
+                     (st/emit!))))
-    [:div.row-flex
+            (on-magnet-change []
-     [:div.input-checkbox.check-primary
+              (let [checked? (dom/checked? (mx/ref-node own "magnet"))]
-      [:input {:type "checkbox" :id "magnet" :value "Yes"}]
+                (->> (assoc metadata :grid-alignment checked?)
-      [:label {:for "magnet"} "Activate magnet"]]]]])
+                     (udp/update-metadata id)
+                     (st/emit!))))
+          (show-color-picker [event]
+            (let [x (.-clientX event)
+                  y (.-clientY event)
+                  opts {:x x :y y
+                        :transparent? true
+                        :default "#cccccc"
+                        :attr :grid-color}]
+              (udl/open! :workspace/page-colorpicker opts)))]
+    [:div.element-set
+     [:div.element-set-title (:name menu)]
+     [:div.element-set-content
+      [:span "Size"]
+      [:div.row-flex
+       [:div.input-element.pixels
+        [:input.input-text
+         {:type "number"
+          :ref "x-axis"
+          :value (:grid-x-axis metadata 10)
+          :on-change on-x-change
+          :placeholder "x"}]]
+       [:div.input-element.pixels
+        [:input.input-text
+         {:type "number"
+          :ref "y-axis"
+          :value (:grid-y-axis metadata 10)
+          :on-change on-y-change
+          :placeholder "y"}]]]
+      [:span "Color"]
+      [:div.row-flex.color-dat
+       [:span.color-th
+        {:style {:background-color (:grid-color metadata "#cccccc")}
+         :on-click show-color-picker}]
+       [:div.color-info
+        [:span (:grid-color metadata "#cccccc")]]]
+
+      [:span "Magnet option"]
+      [:div.row-flex
+       [:div.input-checkbox.check-primary
+        [:input
+         {:type "checkbox"
+          :ref "magnet"
+          :id "magnet"
+          :on-change on-magnet-change
+          :checked (when (:grid-alignment metadata) "checked")}]
+        [:label {:for "magnet"} "Activate magnet"]]]]])))

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

@@ -15,8 +15,6 @@
             [uxbox.main.data.shapes :as uds]
             [uxbox.main.ui.icons :as i]
             [uxbox.util.mixins :as mx :include-macros true]
-            [uxbox.main.ui.workspace.colorpicker :refer (colorpicker)]
-            [uxbox.main.ui.workspace.recent-colors :refer (recent-colors)]
             [uxbox.main.geom :as geom]
             [uxbox.util.dom :as dom]
             [uxbox.util.data :refer (parse-int parse-float read-string)]))

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

@@ -34,9 +34,6 @@
                   value (parse-float value 1)
                   value (/ value 10000)]
               (change-stroke {:opacity value})))
-          (on-color-change [event]
-            (let [value (dom/event->value event)]
-              (change-stroke {:color value})))
           (on-stroke-style-change [event]
             (let [value (dom/event->value event)
                   value (read-string value)]
@@ -48,7 +45,7 @@
                         :shape (:id shape)
                         :attr :stroke
                         :transparent? true}]
-              (udl/open! :workspace/colorpicker opts)))]
+              (udl/open! :workspace/shape-colorpicker opts)))]
     (let [local (:rum/local own)]
       (html
        [:div.element-set {:key (str (:id menu))}

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

@@ -18,8 +18,6 @@
             [uxbox.main.ui.workspace.base :as wb]
             [uxbox.main.ui.icons :as i]
             [uxbox.util.mixins :as mx :include-macros true]
-            [uxbox.main.ui.workspace.colorpicker :refer (colorpicker)]
-            [uxbox.main.ui.workspace.recent-colors :refer (recent-colors)]
             [uxbox.main.ui.workspace.base :as wb]
             [uxbox.main.geom :as geom]
             [uxbox.util.dom :as dom]