diff --git a/common/app/common/pages.cljc b/common/app/common/pages.cljc index f9b0c8e5cd..6a947ec779 100644 --- a/common/app/common/pages.cljc +++ b/common/app/common/pages.cljc @@ -869,7 +869,7 @@ (defmethod process-change :mod-color [data {:keys [color]}] - (d/update-in-when data [:colors (:id color)] merge color)) + (d/assoc-in-when data [:colors (:id color)] color)) (defmethod process-change :del-color [data {:keys [id]}] @@ -965,3 +965,4 @@ (ex/raise :type :not-implemented :code :operation-not-implemented :context {:type (:type op)})) + diff --git a/frontend/resources/images/icons/picker-ramp.svg b/frontend/resources/images/icons/picker-ramp.svg index 0e078a017e..815b3a9449 100644 --- a/frontend/resources/images/icons/picker-ramp.svg +++ b/frontend/resources/images/icons/picker-ramp.svg @@ -1 +1,3 @@ - + + + diff --git a/frontend/resources/styles/main/partials/color-bullet.scss b/frontend/resources/styles/main/partials/color-bullet.scss index a8045591c4..ba0d980c35 100644 --- a/frontend/resources/styles/main/partials/color-bullet.scss +++ b/frontend/resources/styles/main/partials/color-bullet.scss @@ -68,7 +68,6 @@ ul.palette-menu .color-bullet { grid-area: color; width: 20px; height: 20px; - background-color: rgba(var(--color)); border-radius: 12px; border: 1px solid $color-gray-10; background-size: 8px; @@ -95,6 +94,7 @@ ul.palette-menu .color-bullet { overflow: hidden; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") left center; + background-color: $color-white; & > * { width: 100%; diff --git a/frontend/resources/styles/main/partials/colorpicker.scss b/frontend/resources/styles/main/partials/colorpicker.scss index e65658d937..05cf8370d6 100644 --- a/frontend/resources/styles/main/partials/colorpicker.scss +++ b/frontend/resources/styles/main/partials/colorpicker.scss @@ -443,13 +443,10 @@ .colorpicker-tabs { display: flex; - margin-top: 0.25rem; + margin: 0.5rem 0; + border-radius: 5px; + border: 1px solid $color-gray-10; height: 2rem; - background-color: $color-gray-10; - - .active { - background-color: $color-white; - } .colorpicker-tab { cursor: pointer; @@ -461,9 +458,21 @@ svg { width: 16px; height: 16px; - fill: $color-gray-30; + fill: $color-gray-20; } } + + .active { + background-color: $color-gray-10; + svg { + fill: $color-gray-60; + } + } + + :hover svg { + fill: $color-primary; + } + } } diff --git a/frontend/src/app/main/data/workspace/libraries.cljs b/frontend/src/app/main/data/workspace/libraries.cljs index 344e483b54..a949430995 100644 --- a/frontend/src/app/main/data/workspace/libraries.cljs +++ b/frontend/src/app/main/data/workspace/libraries.cljs @@ -36,7 +36,12 @@ (defn add-color [color] (let [id (uuid/next) - color (assoc color :id id)] + color (assoc color + :id id + :name (or (:color color) + (case (get-in color [:gradient :type]) + :linear "Linear gradient" + :radial "Radial gradient")))] (us/assert ::cp/color color) (ptk/reify ::add-color ptk/WatchEvent diff --git a/frontend/src/app/main/ui/shapes/attrs.cljs b/frontend/src/app/main/ui/shapes/attrs.cljs index 4c8a4d9e7d..6db6b6f272 100644 --- a/frontend/src/app/main/ui/shapes/attrs.cljs +++ b/frontend/src/app/main/ui/shapes/attrs.cljs @@ -25,7 +25,7 @@ :ry (:ry shape)})) (defn add-fill [attrs shape] - (let [fill-color-gradient-id (str "fill-color-gradient_" (:id shape))] + (let [fill-color-gradient-id (str "fill-color-gradient_" (:render-id shape))] (if (:fill-color-gradient shape) (obj/merge! attrs #js {:fill (str/format "url(#%s)" fill-color-gradient-id)}) (obj/merge! attrs #js {:fill (or (:fill-color shape) "transparent") @@ -33,7 +33,7 @@ (defn add-stroke [attrs shape] (let [stroke-style (:stroke-style shape :none) - stroke-color-gradient-id (str "stroke-color-gradient_" (:id shape))] + stroke-color-gradient-id (str "stroke-color-gradient_" (:render-id shape))] (if (not= stroke-style :none) (if (:stroke-color-gradient shape) (obj/merge! attrs diff --git a/frontend/src/app/main/ui/shapes/gradients.cljs b/frontend/src/app/main/ui/shapes/gradients.cljs index 621f7e278c..a1c216b46c 100644 --- a/frontend/src/app/main/ui/shapes/gradients.cljs +++ b/frontend/src/app/main/ui/shapes/gradients.cljs @@ -49,8 +49,8 @@ scale-factor-x (* scale-factor-y (:width gradient)) scale-vec (gpt/point (* scale-factor-y (/ height 2)) - (* scale-factor-x (/ width 2)) - ) + (* scale-factor-x (/ width 2))) + tr-translate (str/fmt "translate(%s, %s)" (:x translate-vec) (:y translate-vec)) tr-rotate (str/fmt "rotate(%s)" angle) tr-scale (str/fmt "scale(%s, %s)" (:x scale-vec) (:y scale-vec)) @@ -72,8 +72,9 @@ [props] (let [attr (obj/get props "attr") shape (obj/get props "shape") + render-id (obj/get props "render-id") - id (str (name attr) "_" (:id shape)) + id (str (name attr) "_" render-id) gradient (get shape attr) gradient-props #js {:id id :gradient gradient diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs index dd7df33e5c..04be286240 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs @@ -306,16 +306,15 @@ :on-change handle-change-color}] [:& libraries {:current-color current-color - :on-select-color on-select-library-color}]] + :on-select-color on-select-library-color}] - (when on-accept - [:div.actions - [:button.btn-primary.btn-large - {:on-click (fn [] - ;; TODO: REVIEW FOR GRADIENTS - #_(on-accept @value-ref) - (modal/hide!))} - (t locale "workspace.libraries.colors.save-color")]])]) + (when on-accept + [:div.actions + [:button.btn-primary.btn-large + {:on-click (fn [] + (on-accept (state->data @state)) + (modal/hide!))} + (t locale "workspace.libraries.colors.save-color")]])]]) ) (defn calculate-position diff --git a/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs b/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs index ab68a5e578..f88794bab5 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs @@ -25,9 +25,9 @@ [app.main.data.modal :as modal] [app.main.ui.icons :as i] [app.util.i18n :as i18n :refer [t]] + [app.main.ui.components.color-bullet :refer [color-bullet]] [app.main.ui.workspace.colorpicker.slider-selector :refer [slider-selector]])) - (mf/defc value-saturation-selector [{:keys [hue saturation value on-change]}] (let [dragging? (mf/use-state false) calculate-pos @@ -50,7 +50,8 @@ (mf/defc ramp-selector [{:keys [color disable-opacity on-change]}] - (let [{hue :h saturation :s value :v alpha :alpha} color + (let [{hex :hex + hue :h saturation :s value :v alpha :alpha} color on-change-value-saturation (fn [new-saturation new-value] @@ -80,7 +81,8 @@ :on-change on-change-value-saturation}] [:div.shade-selector - [:div.color-bullet] + [:& color-bullet {:color {:color hex + :opacity alpha}}] [:& slider-selector {:class "hue" :max-value 360 :value hue diff --git a/frontend/src/app/main/ui/workspace/shapes/common.cljs b/frontend/src/app/main/ui/workspace/shapes/common.cljs index 762469b14c..62c3466199 100644 --- a/frontend/src/app/main/ui/workspace/shapes/common.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/common.cljs @@ -73,22 +73,24 @@ on-context-menu (mf/use-callback (mf/deps shape) #(on-context-menu % shape)) - filter-id (mf/use-memo filters/get-filter-id)] + render-id (mf/use-memo #(str (uuid/next)))] [:g.shape {:on-mouse-down on-mouse-down :on-context-menu on-context-menu - :filter (filters/filter-str filter-id shape)} + :filter (filters/filter-str (str "filter_" render-id) shape)} - [:& filters/filters {:filter-id filter-id :shape shape}] + [:& filters/filters {:filter-id (str "filter_" render-id) :shape shape}] (when (:fill-color-gradient shape) [:& grad/gradient {:attr :fill-color-gradient + :render-id render-id :shape shape}]) (when (:stroke-color-gradient shape) [:& grad/gradient {:attr :stroke-color-gradient + :render-id render-id :shape shape}]) - [:& component {:shape shape}]]))) + [:& component {:shape (assoc shape :render-id render-id)}]]))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs index 5cc267d926..9596bad092 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs @@ -217,8 +217,9 @@ (st/emit! (dwl/update-color (assoc color :name name)))) edit-color - (fn [value] - (st/emit! (dwl/update-color (assoc color :color value)))) + (fn [new-color] + (let [updated-color (merge new-color (select-keys color [:id :file-id :name]))] + (st/emit! (dwl/update-color updated-color)))) delete-color (fn [] @@ -253,7 +254,6 @@ :y (.-clientY event) :on-accept edit-color :data color - :disable-opacity true :position :right})) on-context-menu @@ -321,8 +321,8 @@ {:x (.-clientX event) :y (.-clientY event) :on-accept add-color - :value "#406280" - :disable-opacity true + :data {:color "#406280" + :opacity 1} :position :right})))] [:div.asset-group [:div.group-title {:class (when (not open?) "closed")} @@ -334,7 +334,12 @@ [:div.group-list (for [color colors] [:& color-item {:key (:id color) - :color color + :color (if (:value color) + (-> color + (assoc :color (:value color) + :opacity 1) + (dissoc :value)) + color) :file-id file-id :local? local? :locale locale}])])]))