3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-06 00:31:39 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Integration with library new colors

Browse source
This commit is contained in:
alonso.torres 2020-10-14 11:47:11 +02:00
parent 7d7008d405
commit 245c39b1f6
11 changed files with 64 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/app/main/data/workspace/libraries.cljs
View file

@ -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

4
frontend/src/app/main/ui/shapes/attrs.cljs
View file

@ -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

7
frontend/src/app/main/ui/shapes/gradients.cljs
View file

@ -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

17
frontend/src/app/main/ui/workspace/colorpicker.cljs
View file

@ -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

8
frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs
View file

@ -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

10
frontend/src/app/main/ui/workspace/shapes/common.cljs
View file

@ -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)}]])))

17
frontend/src/app/main/ui/workspace/sidebar/assets.cljs
View file

@ -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}])])]))