Fully integrate new color picker in workspace.

2025-03-17 18:21:23 -05:00 · 2016-05-19 21:36:57 +03:00 · 2016-05-19 21:36:57 +03:00 · 1da54f0c73
commit 1da54f0c73
parent 249414c051
8 changed files with 85 additions and 62 deletions
--- a/resources/styles/partials/lightbox.scss
+++ b/resources/styles/partials/lightbox.scss
@ -17,6 +17,10 @@
  width: 100%;
  z-index: 1000;

+  &.transparent {
+    background-color: rgba(0,0,0,0);
+  }
+
  .lightbox-body {
    align-items: center;
    background-color: $color-white;
--- a/src/uxbox/ui/colorpicker.cljs
+++ b/src/uxbox/ui/colorpicker.cljs
@ -11,8 +11,8 @@
            [goog.events :as events]
            [uxbox.schema :as sc]
            [uxbox.ui.mixins :as mx]
-            [uxbox.util.color :as color]
            [uxbox.util.math :as mth]
+            [uxbox.util.data :as data]
            [uxbox.util.dom :as dom]
            [uxbox.util.color :as color])
  (:import goog.events.EventType))
@ -117,6 +117,7 @@
  [own & {:keys [value on-change theme]
          :or {value "#d4edfb" theme :default}}]
  (let [local (:rum/local own)
+        value-rgb (color/hex->rgb value)
        classes (case theme
                  :default "theme-default"
                  :small "theme-small")
@ -148,7 +149,15 @@
              (let [value (-> (dom/get-target event)
                              (dom/get-value))]
                (when (color/hex? value)
-                  (on-change value))))]
+                  (on-change value))))
+            (on-rgb-change [rgb id event]
+              (let [value (-> (dom/get-target event)
+                              (dom/get-value)
+                              (data/parse-int 0))
+                    rgb (assoc rgb id value)
+                    hex (color/rgb->hex rgb)]
+                (when (color/hex? hex)
+                  (on-change hex))))]
      (html
       [:div.color-picker {:class classes}
        [:div.picker-area
@ -192,13 +201,19 @@
         [:div.row-flex
          [:input.input-text
           {:placeholder "R"
-            :type "text"}]
+            :on-change (partial on-rgb-change value-rgb 0)
+            :value (nth value-rgb 0)
+            :type "number"}]
          [:input.input-text
           {:placeholder "G"
-            :type "text"}]
+            :on-change (partial on-rgb-change value-rgb 1)
+            :value (nth value-rgb 1)
+            :type "number"}]
          [:input.input-text
           {:placeholder "B"
-            :type "text"}]]]]))))
+            :on-change (partial on-rgb-change value-rgb 2)
+            :value (nth value-rgb 2)
+            :type "number"}]]]]))))



--- a/src/uxbox/ui/lightbox.cljs
+++ b/src/uxbox/ui/lightbox.cljs
@ -7,6 +7,7 @@
            [uxbox.ui.mixins :as mx]
            [uxbox.ui.keyboard :as k]
            [uxbox.util.dom :as dom]
+            [uxbox.util.data :refer (classnames)]
            [goog.events :as events])
  (:import goog.events.EventType))

@ -52,10 +53,13 @@

 (defn- lightbox-render
  [own]
-  (let [data (rum/react lightbox-l)]
+  (let [data (rum/react lightbox-l)
+        classes (classnames
+                 :hide (nil? data)
+                 :transparent (:transparent? data))]
    (html
     [:div.lightbox
-      {:class (when (nil? data) "hide")
+      {:class classes
       :ref "parent"
       :on-click (partial on-out-clicked own)}
      (render-lightbox data)])))
--- a/src/uxbox/ui/workspace/colorpicker.cljs
+++ b/src/uxbox/ui/workspace/colorpicker.cljs
@ -26,18 +26,26 @@
            [uxbox.util.dom :as dom]
            [uxbox.util.data :refer (parse-int parse-float read-string)]))

+(defn- focus-shape
+  [id]
+  (as-> (l/in [:shapes-by-id id]) $
+    (l/focus-atom $ st/state)))
+
 (defn- colorpicker-render
-  [own {:keys [x y shape] :as opts}]
-  (println opts)
-  (let [shape {}
-        on-change (constantly nil)
+  [own {:keys [x y shape attr] :as opts}]
+  (let [shape (rum/react (focus-shape shape))
        left (- x 260)
-        top (- y 150)]
-    (letfn [(on-color-change [event]
-              (let [value (dom/event->value event)]
-                (on-change {:color value})))]
+        top (- y 50)]
+    (letfn [(change-color [color]
+              (let [attrs {:color color}]
+                (rs/emit!
+                 (case attr
+                   :stroke (uds/update-stroke-attrs (:id shape) attrs)
+                   :fill (uds/update-fill-attrs (:id shape) attrs)))))
+            (on-change-color [event]
+              (let [color (dom/event->value event)]
+                (change-color color)))]
      (html
-       ;; COLOR PICKER TOOLTIP
       [:div.colorpicker-tooltip
        {:style {:left (str left "px")
                 :top (str top "px")}}
@ -45,20 +53,15 @@
        (cp/colorpicker
         :theme :small
         :value (:stroke shape "#000000")
-         :on-change (constantly nil))
+         :on-change change-color)

-        (recent-colors shape (constantly nil) #_#(change-stroke {:color %}))
-
-        #_[:span "Color options"]
-        #_[:div.row-flex
-         [:span.color-th.palette-th i/picker]
-         [:span.color-th.palette-th i/palette]]]))))
+        (recent-colors shape change-color)]))))

 (def colorpicker
  (mx/component
   {:render colorpicker-render
    :name "colorpicker"
-    :mixins []}))
+    :mixins [rum/reactive mx/static]}))

 (defmethod lbx/render-lightbox :workspace/colorpicker
  [params]
--- a/src/uxbox/ui/workspace/header.cljs
+++ b/src/uxbox/ui/workspace/header.cljs
@ -94,6 +94,11 @@
          :class (when (contains? flags :drawtools) "selected")
          :on-click (partial toggle :drawtools)}
         i/shapes]
+        [:li.tooltip.tooltip-bottom
+         {:alt "Color Palette (---)"
+          :class (when (contains? flags :colorpalette) "selected")
+          :on-click (partial toggle :colorpalette)}
+         i/palette]
        [:li.tooltip.tooltip-bottom
         {:alt "Icons (Ctrl + Shift + I)"
          :class (when (contains? flags :icons) "selected")
--- a/src/uxbox/ui/workspace/recent_colors.cljs
+++ b/src/uxbox/ui/workspace/recent_colors.cljs
@ -18,12 +18,7 @@
            [uxbox.util.dom :as dom]
            [uxbox.ui.workspace.base :as wb]))

-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; Helpers
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-
-(def ^:private ^:static toggle-colorpalette
-  #(rs/emit! (dw/toggle-flag :colorpalette)))
+;; --- Helpers

 (defn- count-color
  [state shape prop]
@ -41,9 +36,7 @@
    (sort-by second (into [] $))
    (take 5 (map first $))))

-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; Component
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; --- Component

 (defn- recent-colors-render
  [own {:keys [page id] :as shape} callback]
@ -56,16 +49,14 @@
      [:span (tr "ds.recent-colors")]
      [:div.row-flex
       (for [color colors]
-         [:span.color-th {:style {:background color}
+         [:span.color-th {:style {:background-color color}
                          :key color
                          :on-click (partial callback color)}])
       (for [i (range (- 5 (count colors)))]
         [:span.color-th {:key (str "empty" i)}])
+       [:span.color-th.palette-th i/picker]]])))

-       [:span.color-th.palette-th {:on-click toggle-colorpalette}
-        i/palette]]])))
-
-(def ^:static recent-colors
+(def recent-colors
  (mx/component
   {:render recent-colors-render
    :name "recent-colors"
--- a/src/uxbox/ui/workspace/sidebar/options/fill.cljs
+++ b/src/uxbox/ui/workspace/sidebar/options/fill.cljs
@ -14,13 +14,10 @@
            [uxbox.rstore :as rs]
            [uxbox.state :as st]
            [uxbox.library :as library]
-            [uxbox.data.workspace :as udw]
            [uxbox.data.shapes :as uds]
+            [uxbox.data.lightbox :as udl]
            [uxbox.ui.icons :as i]
            [uxbox.ui.mixins :as mx]
-            [uxbox.ui.workspace.colorpicker :refer (colorpicker)]
-            [uxbox.ui.workspace.recent-colors :refer (recent-colors)]
-            [uxbox.util.geom :as geom]
            [uxbox.util.dom :as dom]
            [uxbox.util.data :refer (parse-int parse-float read-string)]))

@ -38,19 +35,28 @@
                  value (/ value 10000)]
              (change-fill {:opacity value})))
          (on-color-picker-event [color]
-            (change-fill {:color color}))]
+            (change-fill {:color color}))
+          (show-color-picker [event]
+            (let [x (.-clientX event)
+                  y (.-clientY event)
+                  opts {:x x :y y
+                        :shape (:id shape)
+                        :attr :fill
+                        :transparent? true}]
+              (udl/open! :workspace/colorpicker opts)))]
+
    (html
     [:div.element-set {:key (str (:id menu))}
      [:div.element-set-title (:name menu)]
      [:div.element-set-content
-       ;; SLIDEBAR FOR ROTATION AND OPACITY
-       [:span "Color"]

-       ;; [:div.color-picker-small
-       ;;  (colorpicker
-       ;;   :theme :small
-       ;;   :value (:fill shape "#000000")
-       ;;   :on-change #(on-color-picker-event %))]
+       [:span "Color"]
+       [:div.row-flex.color-data
+        [:span.color-th
+         {:style {:background-color (:fill shape)}
+          :on-click show-color-picker}]
+        [:div.color-info
+         [:span (:fill shape)]]]

       [:div.row-flex
        [:input.input-text
@ -59,8 +65,6 @@
          :value (:fill shape "")
          :on-change on-color-change}]]

-       (recent-colors shape #(change-fill {:color %}))
-
       ;; SLIDEBAR FOR ROTATION AND OPACITY
       [:span "Opacity"]
       [:div.row-flex
--- a/src/uxbox/ui/workspace/sidebar/options/stroke.cljs
+++ b/src/uxbox/ui/workspace/sidebar/options/stroke.cljs
@ -14,14 +14,10 @@
            [uxbox.rstore :as rs]
            [uxbox.state :as st]
            [uxbox.library :as library]
-            [uxbox.data.workspace :as udw]
            [uxbox.data.shapes :as uds]
            [uxbox.data.lightbox :as udl]
            [uxbox.ui.icons :as i]
            [uxbox.ui.mixins :as mx]
-            [uxbox.ui.workspace.colorpicker :refer (colorpicker)]
-            [uxbox.ui.workspace.recent-colors :refer (recent-colors)]
-            [uxbox.util.geom :as geom]
            [uxbox.util.dom :as dom]
            [uxbox.util.data :refer (parse-int parse-float read-string)]))

@ -47,9 +43,13 @@
                  value (read-string value)]
              (change-stroke {:type value})))
          (show-color-picker [event]
-            (let [x (.-screenX event)
-                  y (.-screenY event)]
-              (udl/open! :workspace/colorpicker {:x x :y y :shape shape})))]
+            (let [x (.-clientX event)
+                  y (.-clientY event)
+                  opts {:x x :y y
+                        :shape (:id shape)
+                        :attr :stroke
+                        :transparent? true}]
+              (udl/open! :workspace/colorpicker opts)))]
    (let [local (:rum/local own)]
      (html
       [:div.element-set {:key (str (:id menu))}
@ -72,9 +72,7 @@
            :value (:stroke-width shape "1")
            :on-change on-width-change}]]

-         ;; SLIDEBAR FOR ROTATION AND OPACITY
         [:span "Color"]
-
         [:div.row-flex.color-data
          [:span.color-th
           {:style {:background-color (:stroke shape)}
@ -82,7 +80,6 @@
          [:div.color-info
           [:span (:stroke shape)]]]

-         ;; SLIDEBAR FOR ROTATION AND OPACITY
         [:span "Opacity"]
         [:div.row-flex
          [:input.slidebar