From 4bb832b597eba8ec7d42cecf121121f5b6825fcf Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 15 Oct 2020 09:35:29 +0200 Subject: [PATCH] :sparkles: Fixes issues with some shapes --- .../styles/main/partials/color-bullet.scss | 7 ++++ .../src/app/main/data/workspace/grid.cljs | 4 +- .../app/main/data/workspace/selection.cljs | 12 ++++-- .../app/main/ui/components/color_bullet.cljs | 32 +++++---------- frontend/src/app/main/ui/shapes/filters.cljs | 13 +++--- .../app/main/ui/workspace/colorpicker.cljs | 8 +++- .../ui/workspace/colorpicker/libraries.cljs | 13 ++++-- .../src/app/main/ui/workspace/frame_grid.cljs | 8 +++- .../workspace/sidebar/options/frame_grid.cljs | 14 ++++--- .../sidebar/options/rows/color_row.cljs | 40 ++++++++++++------- .../ui/workspace/sidebar/options/shadow.cljs | 6 ++- frontend/src/app/util/color.cljs | 6 +++ 12 files changed, 101 insertions(+), 62 deletions(-) diff --git a/frontend/resources/styles/main/partials/color-bullet.scss b/frontend/resources/styles/main/partials/color-bullet.scss index ba0d980c3..abde93a40 100644 --- a/frontend/resources/styles/main/partials/color-bullet.scss +++ b/frontend/resources/styles/main/partials/color-bullet.scss @@ -102,6 +102,13 @@ ul.palette-menu .color-bullet { } } +.color-data .color-bullet.multiple { + background: transparent; + + &::before { + content: "?" + } +} .color-data .color-bullet { background-color: $color-gray-30; diff --git a/frontend/src/app/main/data/workspace/grid.cljs b/frontend/src/app/main/data/workspace/grid.cljs index 9d7019087..feacd4fbf 100644 --- a/frontend/src/app/main/data/workspace/grid.cljs +++ b/frontend/src/app/main/data/workspace/grid.cljs @@ -21,7 +21,7 @@ (defonce ^:private default-square-params {:size 16 - :color {:value "#59B9E2" + :color {:color "#59B9E2" :opacity 0.2}}) (defonce ^:private default-layout-params @@ -30,7 +30,7 @@ :item-length nil :gutter 8 :margin 0 - :color {:value "#DE4762" + :color {:color "#DE4762" :opacity 0.1}}) (defonce default-grid-params diff --git a/frontend/src/app/main/data/workspace/selection.cljs b/frontend/src/app/main/data/workspace/selection.cljs index 928e87da4..d4b4ee3be 100644 --- a/frontend/src/app/main/data/workspace/selection.cljs +++ b/frontend/src/app/main/data/workspace/selection.cljs @@ -22,6 +22,7 @@ [app.common.spec :as us] [app.common.uuid :as uuid] [app.main.data.workspace.common :as dwc] + [app.main.data.modal :as md] [app.main.streams :as ms] [app.main.worker :as uw])) @@ -123,9 +124,14 @@ (ptk/reify ::deselect-all ptk/UpdateEvent (update [_ state] - (update state :workspace-local #(-> % - (assoc :selected (d/ordered-set)) - (dissoc :selected-frame)))))) + + ;; Only deselect if there is no modal openned + (cond-> state + (not (::md/modal state)) + (update :workspace-local + #(-> % + (assoc :selected (d/ordered-set)) + (dissoc :selected-frame))))))) ;; --- Select Shapes (By selrect) diff --git a/frontend/src/app/main/ui/components/color_bullet.cljs b/frontend/src/app/main/ui/components/color_bullet.cljs index f3bb31826..b1d19b666 100644 --- a/frontend/src/app/main/ui/components/color_bullet.cljs +++ b/frontend/src/app/main/ui/components/color_bullet.cljs @@ -9,32 +9,20 @@ (ns app.main.ui.components.color-bullet (:require - #_[beicon.core :as rx] - #_[goog.events :as events] - #_[okulary.core :as l] [rumext.alpha :as mf] - [app.util.color :as uc] - #_[cuerdas.core :as str] - #_[app.common.math :as mth] - #_[app.main.data.colors :as mdc] - #_[app.main.data.workspace :as udw] - #_[app.main.store :as st] - #_[app.main.ui.components.dropdown :refer [dropdown]] - #_[app.main.ui.icons :as i] - #_[app.main.ui.keyboard :as kbd] - #_[app.util.color :refer [hex->rgb]] - #_[app.util.dom :as dom] - #_[app.util.object :as obj] - #_[app.main.refs :as refs] - #_[app.util.i18n :as i18n :refer [t]])) + [app.util.color :as uc])) (mf/defc color-bullet [{:keys [color on-click]}] - (let [color (if (string? color) {:color color :opacity 1} color)] - [:div.color-bullet {:on-click #(when on-click (on-click %))} - (when (not (:gradient color)) - [:div.color-bullet-left {:style {:background (uc/color->background (assoc color :opacity 1))}}]) + (if (uc/multiple? color) + [:div.color-bullet.multiple {:on-click #(when on-click (on-click %))}] - [:div.color-bullet-right {:style {:background (uc/color->background color)}}]])) + ;; No multiple selection + (let [color (if (string? color) {:color color :opacity 1} color)] + [:div.color-bullet {:on-click #(when on-click (on-click %))} + (when (not (:gradient color)) + [:div.color-bullet-left {:style {:background (uc/color->background (assoc color :opacity 1))}}]) + + [:div.color-bullet-right {:style {:background (uc/color->background color)}}]]))) (defn gradient-type->string [{:keys [type]}] (case type diff --git a/frontend/src/app/main/ui/shapes/filters.cljs b/frontend/src/app/main/ui/shapes/filters.cljs index 5f583b2dc..e7286e858 100644 --- a/frontend/src/app/main/ui/shapes/filters.cljs +++ b/frontend/src/app/main/ui/shapes/filters.cljs @@ -25,8 +25,9 @@ (str/fmt "url(#$0)" [filter-id]))) (mf/defc color-matrix - [{:keys [color opacity]}] - (let [[r g b a] (color/hex->rgba color opacity) + [{:keys [color]}] + (let [{:keys [color opacity]} color + [r g b a] (color/hex->rgba color opacity) [r g b] [(/ r 255) (/ g 255) (/ b 255)]] [:feColorMatrix {:type "matrix" @@ -36,7 +37,7 @@ [{:keys [filter-id filter shape]}] (let [{:keys [x y width height]} (:selrect shape) - {:keys [id in-filter color opacity offset-x offset-y blur spread]} filter] + {:keys [id in-filter color offset-x offset-y blur spread]} filter] [:* [:feColorMatrix {:in "SourceAlpha" :type "matrix" :values "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"}] @@ -48,7 +49,7 @@ [:feOffset {:dx offset-x :dy offset-y}] [:feGaussianBlur {:stdDeviation (/ blur 2)}] - [:& color-matrix {:color color :opacity opacity}] + [:& color-matrix {:color color}] [:feBlend {:mode "normal" :in2 in-filter @@ -58,7 +59,7 @@ [{:keys [filter-id filter shape]}] (let [{:keys [x y width height]} (:selrect shape) - {:keys [id in-filter color opacity offset-x offset-y blur spread]} filter] + {:keys [id in-filter color offset-x offset-y blur spread]} filter] [:* [:feColorMatrix {:in "SourceAlpha" :type "matrix" :values "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" @@ -78,7 +79,7 @@ :k2 "-1" :k3 "1"}] - [:& color-matrix {:color color :opacity opacity}] + [:& color-matrix {:color color}] [:feBlend {:mode "normal" :in2 in-filter diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs index b63d2e29d..a328b2cbf 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs @@ -155,7 +155,9 @@ (st/emit! (dc/select-gradient-stop offset))))) on-select-library-color - (fn [color] (reset! state (data->state color))) + (fn [color] + (reset! dirty? true) + (reset! state (data->state color))) on-add-library-color (fn [color] (st/emit! (dwl/add-color (state->data @state)))) @@ -216,7 +218,7 @@ (handle-change-color {:hex hex :r r :g g :b b :h h :s s :v v - :alpha alpha}))))) + :alpha (/ alpha 255)}))))) ;; Changes when another gradient handler is selected (mf/use-effect @@ -297,6 +299,8 @@ :on-change handle-change-color}] [:& libraries {:current-color current-color + :disable-gradient disable-gradient + :disable-opacity disable-opacity :on-select-color on-select-library-color :on-add-library-color on-add-library-color}] diff --git a/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs b/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs index 09d5b9518..a28100789 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs @@ -32,7 +32,8 @@ [app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector]] [app.main.ui.workspace.colorpicker.color-inputs :refer [color-inputs]])) -(mf/defc libraries [{:keys [current-color on-select-color on-add-library-color]}] +(mf/defc libraries [{:keys [current-color on-select-color on-add-library-color + disable-gradient disable-opacity]}] (let [selected-library (mf/use-state "recent") current-library-colors (mf/use-state []) @@ -45,7 +46,11 @@ (fn [selected] (if (#{"recent" "file"} selected) (keyword selected) - (uuid selected)) )] + (uuid selected)) ) + + check-valid-color? (fn [color] + (and (or (not disable-gradient) (not (:gradient color))) + (or (not disable-opacity) (= 1 (:opacity color)))))] ;; Load library colors when the select is changed (mf/use-effect @@ -63,14 +68,14 @@ :else ;; Library UUID (map #(merge {:file-id (uuid @selected-library)}) (vals (get-in shared-libs [(uuid @selected-library) :data :colors]))))] - (reset! current-library-colors (into [] mapped-colors))))) + (reset! current-library-colors (into [] (filter check-valid-color?) mapped-colors))))) ;; If the file colors change and the file option is selected updates the state (mf/use-effect (mf/deps file-colors) (fn [] (when (= @selected-library "file") (let [colors (vals file-colors)] - (reset! current-library-colors (into [] colors)))))) + (reset! current-library-colors (into [] (filter check-valid-color?) colors)))))) [:div.libraries diff --git a/frontend/src/app/main/ui/workspace/frame_grid.cljs b/frontend/src/app/main/ui/workspace/frame_grid.cljs index 969a55414..88b200096 100644 --- a/frontend/src/app/main/ui/workspace/frame_grid.cljs +++ b/frontend/src/app/main/ui/workspace/frame_grid.cljs @@ -18,7 +18,9 @@ (mf/defc square-grid [{:keys [frame zoom grid] :as props}] (let [{:keys [color size] :as params} (-> grid :params) - {color-value :value color-opacity :opacity} (-> grid :params :color) + {color-value :color color-opacity :opacity} (-> grid :params :color) + ;; Support for old color format + color-value (or color-value (:value (get-in grid [:params :color :value]))) {frame-width :width frame-height :height :keys [x y]} frame] (when (> size 0) [:g.grid @@ -43,7 +45,9 @@ :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 :color color-opacity :opacity} (-> grid :params :color) + ;; Support for old color format + color-value (or color-value (:value (get-in grid [:params :color :value]))) gutter (-> grid :params :gutter) gutter? (and (not (nil? gutter)) (not= gutter 0)) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/frame_grid.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/frame_grid.cljs index 04e55265d..d1aba7a4f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/frame_grid.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/frame_grid.cljs @@ -101,14 +101,17 @@ (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)))) + (fn [color] + (emit-changes! #(-> % (assoc-in [:params :color] color)))) handle-use-default (fn [] - (emit-changes! #(hash-map :params ((:type grid) default-grid-params)))) + (let [params ((:type grid) default-grid-params) + color (or (get-in params [:color :value]) (get-in params [:color :color])) + params (-> params + (assoc-in [:color :color] color) + (update :color dissoc :value))] + (emit-changes! #(hash-map :params params)))) handle-set-as-default (fn [] @@ -214,6 +217,7 @@ :on-change (handle-change :params :margin)}]]) [:& color-row {:color (:color params) + :disable-gradient true :on-change handle-change-color}] [:div.row-flex [:button.btn-options {:disabled is-default diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs index 2812a9056..ae30c7584 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs @@ -12,14 +12,15 @@ [rumext.alpha :as mf] [cuerdas.core :as str] [app.common.math :as math] - [app.main.ui.components.color-bullet :refer [color-bullet color-name]] + [app.common.pages :as cp] + [app.common.data :as d] [app.util.dom :as dom] [app.util.data :refer [classnames]] [app.util.i18n :as i18n :refer [tr]] - [app.main.data.modal :as modal] - [app.common.data :as d] + [app.util.color :as uc] [app.main.refs :as refs] - [app.util.color :as uc])) + [app.main.data.modal :as modal] + [app.main.ui.components.color-bullet :refer [color-bullet color-name]])) (defn color-picker-callback [color disable-gradient disable-opacity handle-change-color handle-open handle-close] @@ -73,7 +74,9 @@ (update :color #(or % (:value color))))) change-value (fn [new-value] - (when on-change (on-change (assoc color :color new-value)))) + (when on-change (on-change (-> color + (assoc :color new-value) + (dissoc :gradient))))) change-opacity (fn [new-opacity] (when on-change (on-change (assoc color :opacity new-opacity)))) @@ -107,8 +110,16 @@ handle-click-color (mf/use-callback (mf/deps color) - (color-picker-callback color disable-gradient disable-opacity - handle-pick-color handle-open handle-close))] + (let [;; If multiple, we change to default color + color (if (uc/multiple? color) + {:color cp/default-color :opacity 1} + color)] + (color-picker-callback color + disable-gradient + disable-opacity + handle-pick-color + handle-open + handle-close)))] (mf/use-effect (mf/deps color) @@ -118,11 +129,6 @@ [:div.row-flex.color-data [:& color-bullet {:color color :on-click handle-click-color}] - #_[:span.color-th - {:class (when (and (:id color) (not= (:id color) :multiple)) "color-name") - :style {:background (uc/color->background color)} - :on-click handle-click-color} - (when (= (:color color) :multiple) "?")] (cond ;; Rendering a color with ID @@ -131,7 +137,8 @@ [:div.color-name (str (get-color-name color))]] ;; Rendering a gradient - (and (:gradient color) (get-in color [:gradient :type])) + (and (not (uc/multiple? color)) + (:gradient color) (get-in color [:gradient :type])) [:div.color-info [:div.color-name (case (get-in color [:gradient :type]) @@ -142,13 +149,16 @@ :else [:* [:div.color-info - [:input {:value (-> color :color remove-hash) + [:input {:value (if (uc/multiple? color) + "" + (-> color :color remove-hash)) :pattern "^[0-9a-fA-F]{0,6}$" :placeholder (tr "settings.multiple") :on-click select-all :on-change handle-value-change}]] - (when (not disable-opacity) + (when (and (not disable-opacity) + (not (:gradient color))) [:div.input-element {:class (classnames :percentail (not= (:opacity color) :multiple))} [:input.input-text {:type "number" diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shadow.cljs index 0f13a906b..ceedd32f0 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shadow.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shadow.cljs @@ -174,7 +174,11 @@ [:span.after (t locale "workspace.options.shadow-options.spread")]]] [:div.color-row-wrap - [:& color-row {:color {:value (:color value) :opacity (:opacity value)} + [:& color-row {:color (if (string? (:color value)) + ;; Support for old format colors + {:color (:color value) :opacity (:opacity value)} + (:color value)) + :disable-gradient true :on-change (update-color index) :on-open #(st/emit! dwc/start-undo-transaction) :on-close #(st/emit! dwc/commit-undo-transaction)}]]]])) diff --git a/frontend/src/app/util/color.cljs b/frontend/src/app/util/color.cljs index a77a63d0f..2ed47a672 100644 --- a/frontend/src/app/util/color.cljs +++ b/frontend/src/app/util/color.cljs @@ -103,3 +103,9 @@ (str/fmt "rgba(%s, %s, %s, %s)" r g b opacity)) :else "transparent"))) + +(defn multiple? [{:keys [value color gradient]}] + (or (= value :multiple) + (= color :multiple) + (= gradient :multiple) + (and gradient color)))