Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-13 10:38:13 -05:00
Code Issues 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
Show stats Download patch file Download diff file Expand all files Collapse all files

3
common/app/common/pages.cljc
View file

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

4
frontend/resources/images/icons/picker-ramp.svg
View file

@ -1 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" height="500" width="500"><path d="M24.7-.203C11.421-.203.001 11.217.001 24.494v451.012c0 13.277 11.417 24.695 24.691 24.697h450.608c13.28 0 24.697-11.42 24.697-24.697V24.494c0-13.276-11.42-24.697-24.697-24.697H24.699zm4.142 31.35h442.316v437.707H28.842V31.146z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<path d="M24.7-.203C11.421-.203.001 11.217.001 24.494v451.012c0 13.277 11.417 24.695 24.691 24.697H475.3c13.28 0 24.697-11.42 24.697-24.697V24.494c0-13.276-11.42-24.697-24.697-24.697H24.699zm12.142 39.35h426.316v421.707H36.842V39.146z"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 332 B

After

Width:  |  Height:  |  Size: 310 B

2
frontend/resources/styles/main/partials/color-bullet.scss
View file

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

23
frontend/resources/styles/main/partials/colorpicker.scss
View file

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

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

7
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)
(on-accept (state->data @state))
(modal/hide!))}
(t locale "workspace.libraries.colors.save-color")]])])
(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}])])]))