diff --git a/frontend/resources/styles/main/layouts/library-page.scss b/frontend/resources/styles/main/layouts/library-page.scss index eeadae7fe..5fcb82b82 100644 --- a/frontend/resources/styles/main/layouts/library-page.scss +++ b/frontend/resources/styles/main/layouts/library-page.scss @@ -317,7 +317,7 @@ flex-direction: column; align-items: center; - & .sketch-picker { + & .sketch-picker, .chrome-picker { box-shadow: none !important; border: 1px solid $color-gray-10 !important; border-radius: 0 !important; diff --git a/frontend/src/uxbox/main/data/workspace/grid.cljs b/frontend/src/uxbox/main/data/workspace/grid.cljs index 31e666e7b..cce5c49ea 100644 --- a/frontend/src/uxbox/main/data/workspace/grid.cljs +++ b/frontend/src/uxbox/main/data/workspace/grid.cljs @@ -21,7 +21,7 @@ (defonce ^:private default-square-params {:size 16 :color {:value "#59B9E2" - :opacity 0.9}}) + :opacity 0.2}}) (defonce ^:private default-layout-params {:size 12 diff --git a/frontend/src/uxbox/main/ui/colorpicker.cljs b/frontend/src/uxbox/main/ui/colorpicker.cljs index ce7b33336..d94ab358e 100644 --- a/frontend/src/uxbox/main/ui/colorpicker.cljs +++ b/frontend/src/uxbox/main/ui/colorpicker.cljs @@ -10,19 +10,23 @@ [uxbox.main.store :as st] [goog.object :as gobj] [rumext.alpha :as mf] - ["react-color/lib/components/sketch/Sketch" :as sketch])) + [uxbox.util.color :refer [hex->rgb]] + ["react-color/lib/components/chrome/Chrome" :as pickerskin])) (mf/defc colorpicker - [{:keys [on-change value colors] :as props}] - (let [local-value (mf/use-state value) - on-change-complete #(do - (reset! local-value %) - (on-change (gobj/get % "hex")))] + [{:keys [on-change value opacity colors] :as props}] + (let [hex-value (mf/use-state (or value "#FFFFFF")) + alpha-value (mf/use-state (or opacity 1)) + [r g b] (hex->rgb @hex-value) + on-change-complete #(let [hex (gobj/get % "hex") + opacity (-> % (gobj/get "rgb") (gobj/get "a"))] + (reset! hex-value hex) + (reset! alpha-value opacity) + (on-change hex opacity))] - [:> sketch/default {:color @local-value - :disableAlpha true + [:> pickerskin/default {:color #js { :r r :g g :b b :a @alpha-value} :presetColors colors - :onChangeComplete on-change-complete + :onChange on-change-complete :style {:box-shadow "none"}}])) (def most-used-colors diff --git a/frontend/src/uxbox/main/ui/workspace/colorpicker.cljs b/frontend/src/uxbox/main/ui/workspace/colorpicker.cljs index 120a448ef..bc0dbba1f 100644 --- a/frontend/src/uxbox/main/ui/workspace/colorpicker.cljs +++ b/frontend/src/uxbox/main/ui/workspace/colorpicker.cljs @@ -14,11 +14,12 @@ ;; --- Color Picker Modal (mf/defc colorpicker-modal - [{:keys [x y default value page on-change] :as props}] + [{:keys [x y default value opacity page on-change] :as props}] [:div.colorpicker-tooltip {:style {:left (str (- x 260) "px") :top (str (- y 50) "px")}} [:& cp/colorpicker {:value (or value default) + :opacity (or opacity 1) :colors (into-array @cp/most-used-colors) :on-change on-change}]]) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/fill.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/fill.cljs index 3f3b7d340..17a82ae6f 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/fill.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/fill.cljs @@ -10,15 +10,10 @@ (ns uxbox.main.ui.workspace.sidebar.options.fill (:require [rumext.alpha :as mf] - [uxbox.main.ui.icons :as i] - [uxbox.common.data :as d] [uxbox.main.data.workspace :as udw] [uxbox.main.store :as st] - [uxbox.main.ui.modal :as modal] - [uxbox.main.ui.workspace.colorpicker :refer [colorpicker-modal]] - [uxbox.util.dom :as dom] + [uxbox.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] [uxbox.util.object :as obj] - [uxbox.util.math :as math] [uxbox.util.i18n :as i18n :refer [tr t]])) (defn- fill-menu-memo-equals? @@ -36,70 +31,14 @@ {::mf/wrap [#(mf/memo' % fill-menu-memo-equals?)]} [{:keys [shape] :as props}] (let [locale (i18n/use-locale) - - on-color-change - (fn [color] - (st/emit! (udw/update-shape (:id shape) {:fill-color color}))) - - on-color-input-change - (fn [event] - (let [input (dom/get-target event) - value (dom/get-value input)] - (when (dom/valid? input) - (on-color-change value)))) - - on-opacity-change - (fn [event] - (let [value (-> (dom/get-target event) - (dom/get-value) - (d/parse-integer 1) - (/ 100))] - (st/emit! (udw/update-shape (:id shape) {:fill-opacity value})))) - - show-color-picker - (fn [event] - (let [x (.-clientX event) - y (.-clientY event) - props {:x x :y y - :on-change on-color-change - :default "#ffffff" - :value (:fill-color shape) - :transparent? true}] - (modal/show! colorpicker-modal props)))] - + color {:value (:fill-color shape) + :opacity (:fill-opacity shape)} + handle-change-color (fn [value opacity] + (let [change {:fill-color value + :fill-opacity opacity}] + (st/emit! (udw/update-shape (:id shape) change))))] [:div.element-set [:div.element-set-title (t locale "workspace.options.fill")] [:div.element-set-content - - [:div.row-flex.color-data - [:span.color-th - {:style {:background-color (:fill-color shape)} - :on-click show-color-picker}] - - [:div.color-info - [:input {:default-value (:fill-color shape) - :ref (fn [el] - (when el - (set! (.-value el) (:fill-color shape)))) - :pattern "^#(?:[0-9a-fA-F]{3}){1,2}$" - :on-change on-color-input-change}]] - - [:div.input-element.percentail - [:input.input-text {:type "number" - :value (str (-> (:fill-opacity shape) - (d/coalesce 1) - (* 100) - (math/round))) - :on-change on-opacity-change - :min "0" - :max "100"}]] - - [:input.slidebar {:type "range" - :min "0" - :max "100" - :value (str (-> (:fill-opacity shape) - (d/coalesce 1) - (* 100) - (math/round))) - :step "1" - :on-change on-opacity-change}]]]])) + [:& color-row {:value color + :on-change handle-change-color}]]])) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs index 5e2fc522f..6b5ec94cb 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs @@ -102,6 +102,12 @@ (assoc-in [:params :size] size) (assoc-in [:params :item-length] item-length))))) + handle-change-color + (fn [value opacity] + (emit-changes! #(-> % + (assoc-in [:params :color :value] value) + (assoc-in [:params :color :opacity] opacity)))) + handle-use-default (fn [] (emit-changes! #(hash-map :params ((:type grid) default-grid-params)))) @@ -200,7 +206,7 @@ :on-change (handle-change :params :margin)}]]) [:& color-row {:value (:color params) - :on-change (handle-change :params :color)}] + :on-change handle-change-color}] [:div.row-flex [:button.btn-options {:disabled is-default :on-click handle-use-default} (t locale "workspace.options.grid.params.use-default")] diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/rows/color_row.cljs index b5f0d7b31..fd3e69bf5 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/rows/color_row.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/rows/color_row.cljs @@ -24,41 +24,53 @@ :y y :on-change handle-change-color :value (:value color) + :opacity (:opacity color) :transparent? true}] (modal/show! colorpicker-modal props)))) (defn opacity->string [opacity] - (str (-> opacity - (d/coalesce 1) - (* 100) - (math/round)))) + (if (and opacity (not= opacity "")) + (str (-> opacity + (d/coalesce 1) + (* 100) + (math/round))) + "")) (defn string->opacity [opacity-str] - (-> opacity-str - (d/parse-integer 1) - (/ 100))) + (when (and opacity-str (not= "" opacity-str)) + (-> opacity-str + (d/parse-integer 1) + (/ 100)))) (mf/defc color-row [{:keys [value on-change]}] - (let [value (or value {:value "#FFFFFF" :opacity 1}) - state (mf/use-state value) - change-color (fn [color] - (let [update-color (fn [state] (assoc state :value color))] - (swap! state update-color) - (when on-change (on-change (update-color @state))))) + (let [default-value {:value "#000000" :opacity 1} - change-opacity (fn [opacity] - (let [update-opacity (fn [state] (assoc state :opacity opacity))] - (swap! state update-opacity) - (when on-change (on-change (update-opacity @state))))) + parse-value (fn [value] + (-> (merge default-value value) + (update :value #(or % "#000000")) + (update :opacity #(or % 1)))) - handle-pick-color (fn [color] - (change-color color)) + state (mf/use-state (parse-value value)) + + change-color (fn [new-value] + (let [{:keys [value opacity]} @state] + (swap! state assoc :value new-value) + (when on-change (on-change new-value opacity)))) + + change-opacity (fn [new-opacity] + (let [{:keys [value opacity]} @state] + (swap! state assoc :opacity new-opacity) + (when (and new-opacity on-change) (on-change value new-opacity)))) + + handle-pick-color (fn [color opacity] + (reset! state {:value color :opacity opacity}) + (when on-change (on-change color opacity))) handle-input-color-change (fn [event] (let [target (dom/get-target event) value (dom/get-value target)] (when (dom/valid? target) - (change-color value)))) + (change-color (str "#" value))))) handle-opacity-change (fn [event] (-> event dom/get-target @@ -68,7 +80,7 @@ (mf/use-effect (mf/deps value) - #(reset! state value)) + #(reset! state (parse-value value))) [:div.row-flex.color-data [:span.color-th @@ -76,8 +88,8 @@ :on-click (color-picker-callback @state handle-pick-color)}] [:div.color-info - [:input {:value (-> @state :value) - :pattern "^#(?:[0-9a-fA-F]{3}){1,2}$" + [:input {:value (-> @state :value (subs 1)) + :pattern "^[0-9a-fA-F]{0,6}$" :on-change handle-input-color-change}]] [:div.input-element.percentail @@ -87,7 +99,7 @@ :min "0" :max "100"}]] - [:input.slidebar {:type "range" + #_[:input.slidebar {:type "range" :min "0" :max "100" :value (-> @state :opacity opacity->string) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs index a548e5ee8..63c1839a8 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs @@ -19,7 +19,8 @@ [uxbox.util.dom :as dom] [uxbox.util.object :as obj] [uxbox.util.i18n :as i18n :refer [tr t]] - [uxbox.util.math :as math])) + [uxbox.util.math :as math] + [uxbox.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]])) (defn- stroke-menu-memo-equals? [np op] @@ -75,35 +76,13 @@ (fn [event] (st/emit! (udw/update-shape (:id shape) {:stroke-style :none}))) - on-stroke-opacity-change - (fn [event] - (let [value (-> (dom/get-target event) - (dom/get-value) - (d/parse-integer 0) - (/ 100))] - (st/emit! (udw/update-shape (:id shape) {:stroke-opacity value})))) + current-stroke-color {:value (:stroke-color shape) + :opacity (:stroke-opacity shape)} - on-color-change - (fn [color] - (st/emit! (udw/update-shape (:id shape) {:stroke-color color}))) - - on-color-input-change - (fn [event] - (let [input (dom/get-target event) - value (dom/get-value input)] - (when (dom/valid? input) - (on-color-change value)))) - - show-color-picker - (fn [event] - (let [x (.-clientX event) - y (.-clientY event) - props {:x x :y y - :default "#ffffff" - :value (:stroke-color shape) - :on-change on-color-change - :transparent? true}] - (modal/show! colorpicker-modal props)))] + handle-change-stroke-color + (fn [value opacity] + (st/emit! (udw/update-shape (:id shape) {:stroke-color value + :stroke-opacity opacity})))] (if (not= :none (:stroke-style shape :none)) [:div.element-set @@ -112,39 +91,9 @@ [:div.add-page {:on-click on-del-stroke} i/minus]] [:div.element-set-content - ;; Stroke Color - [:div.row-flex.color-data - [:span.color-th {:style {:background-color (:stroke-color shape)} - :on-click show-color-picker}] - [:div.color-info - [:input {:default-value (:stroke-color shape) - :ref (fn [el] - (when el - (set! (.-value el) (:stroke-color shape)))) - :pattern "^#(?:[0-9a-fA-F]{3}){1,2}$" - :on-change on-color-input-change}]] - - [:div.input-element.percentail - [:input.input-text {:placeholder "" - :value (str (-> (:stroke-opacity shape) - (d/coalesce 1) - (* 100) - (math/round))) - :type "number" - :on-change on-stroke-opacity-change - :min "0" - :max "100"}]] - - [:input.slidebar {:type "range" - :min "0" - :max "100" - :value (str (-> (:stroke-opacity shape) - (d/coalesce 1) - (* 100) - (math/round))) - :step "1" - :on-change on-stroke-opacity-change}]] + [:& color-row {:value current-stroke-color + :on-change handle-change-stroke-color}] ;; Stroke Width, Alignment & Style [:div.row-flex diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/text.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/text.cljs index fa0483b29..7f2d3f517 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/text.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/text.cljs @@ -18,12 +18,10 @@ [uxbox.main.data.workspace.texts :as dwt] [uxbox.main.store :as st] [uxbox.main.refs :as refs] - [uxbox.main.ui.modal :as modal] - [uxbox.main.ui.workspace.colorpicker :refer [colorpicker-modal]] [uxbox.main.ui.workspace.sidebar.options.measures :refer [measures-menu]] + [uxbox.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] [uxbox.util.dom :as dom] [uxbox.main.fonts :as fonts] - [uxbox.util.math :as math] [uxbox.util.i18n :as i18n :refer [tr t]] ["slate" :refer [Transforms]])) @@ -186,85 +184,24 @@ (mf/defc text-fill-options [{:keys [editor shape] :as props}] - (let [{:keys [fill opacity] - :or {fill "#000000" - opacity 1}} - (dwt/current-text-values - {:editor editor - :shape shape - :attrs [:fill :opacity]}) + (let [text-color (dwt/current-text-values + {:editor editor + :shape shape + :attrs [:fill :opacity]}) - opacity (math/round (* opacity 100)) + current-color {:value (:fill text-color) + :opacity (:opacity text-color)} - on-color-change - (fn [color] - (st/emit! (dwt/update-text-attrs - {:id (:id shape) - :editor editor - :attrs {:fill color}}))) + handle-change-color + (fn [value opacity] + (st/emit! (dwt/update-text-attrs {:id (:id shape) + :editor editor + :attrs {:fill value + :opacity opacity}})))] - on-color-input-change - (fn [event] - (let [input (dom/get-target event) - value (dom/get-value input)] - (when (dom/valid? input) - (on-color-change value)))) - - on-opacity-change - (fn [event] - (let [value (-> (dom/get-target event) - (dom/get-value))] - (when (str/numeric? value) - (let [value (-> (d/parse-integer value 1) - (/ 100))] - (st/emit! (dwt/update-text-attrs - {:id (:id shape) - :editor editor - :attrs {:opacity value}})))))) - - show-color-picker - (fn [event] - (let [x (.-clientX event) - y (.-clientY event) - props {:x x :y y - :on-change on-color-change - :default "#ffffff" - :value fill - :transparent? true}] - (modal/show! colorpicker-modal props)))] - - [:div.row-flex.color-data - [:span.color-th - {:style {:background-color fill} - :on-click show-color-picker - }] - - [:div.color-info - [:input {:default-value fill - :pattern "^#(?:[0-9a-fA-F]{3}){1,2}$" - :ref (fn [el] - (when el - (set! (.-value el) fill))) - :on-change on-color-input-change - }]] - - [:div.input-element.percentail - [:input.input-text {:type "number" - :ref (fn [el] - (when el - (set! (.-value el) opacity))) - :default-value opacity - :on-change on-opacity-change - :min "0" - :max "100"}]] - - [:input.slidebar {:type "range" - :min "0" - :max "100" - :value opacity - :step "1" - :on-change on-opacity-change - }]])) + [:& color-row {:value current-color + :on-change handle-change-color}] + )) (mf/defc spacing-options [{:keys [editor shape locale] :as props}]