From 1da54f0c73d7d624670f5278a99d19e2ea2ca61e Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 19 May 2016 21:36:57 +0300 Subject: [PATCH] Fully integrate new color picker in workspace. --- resources/styles/partials/lightbox.scss | 4 ++ src/uxbox/ui/colorpicker.cljs | 25 ++++++++++--- src/uxbox/ui/lightbox.cljs | 8 +++- src/uxbox/ui/workspace/colorpicker.cljs | 37 ++++++++++--------- src/uxbox/ui/workspace/header.cljs | 5 +++ src/uxbox/ui/workspace/recent_colors.cljs | 19 +++------- .../ui/workspace/sidebar/options/fill.cljs | 32 +++++++++------- .../ui/workspace/sidebar/options/stroke.cljs | 17 ++++----- 8 files changed, 85 insertions(+), 62 deletions(-) diff --git a/resources/styles/partials/lightbox.scss b/resources/styles/partials/lightbox.scss index b602ab2b08..0eb2364c47 100644 --- 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; diff --git a/src/uxbox/ui/colorpicker.cljs b/src/uxbox/ui/colorpicker.cljs index 0e42f922a6..b8486238c1 100644 --- 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"}]]]])))) diff --git a/src/uxbox/ui/lightbox.cljs b/src/uxbox/ui/lightbox.cljs index 5af848c830..186f0b7cd1 100644 --- 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)]))) diff --git a/src/uxbox/ui/workspace/colorpicker.cljs b/src/uxbox/ui/workspace/colorpicker.cljs index 5a61d758be..5afdfbd3e6 100644 --- 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] diff --git a/src/uxbox/ui/workspace/header.cljs b/src/uxbox/ui/workspace/header.cljs index 1dad5d9961..4f33031291 100644 --- 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") diff --git a/src/uxbox/ui/workspace/recent_colors.cljs b/src/uxbox/ui/workspace/recent_colors.cljs index 0fb4dac7ed..d14de70f81 100644 --- 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" diff --git a/src/uxbox/ui/workspace/sidebar/options/fill.cljs b/src/uxbox/ui/workspace/sidebar/options/fill.cljs index e75427172a..9dcfa67010 100644 --- 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 diff --git a/src/uxbox/ui/workspace/sidebar/options/stroke.cljs b/src/uxbox/ui/workspace/sidebar/options/stroke.cljs index e2b14bed14..a7fc4a36ca 100644 --- 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