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

Now working color palette pagination

Browse source
This commit is contained in:
Jesús Espino 2016-12-21 12:12:36 +01:00
parent cbbfab438e
commit 54385ecfdb
2 changed files with 17 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/resources/styles/main/partials/color-palette.scss
View file

@ -31,6 +31,9 @@
fill: $color-gray-darker; fill: $color-gray-darker;
} }
} }
&.disabled {
display: none;
}
} }
.left-arrow { .left-arrow {
transform: rotate(180deg); transform: rotate(180deg);

20
frontend/src/uxbox/main/ui/workspace/colorpalette.cljs
View file

@ -31,14 +31,14 @@
(mx/defc palette-items (mx/defc palette-items
{:mixins [mx/static]} {:mixins [mx/static]}
[colors] [colors position]
(letfn [(select-color [event color] (letfn [(select-color [event color]
(dom/prevent-default event) (dom/prevent-default event)
(if (kbd/shift? event) (if (kbd/shift? event)
(st/emit! (uds/update-selected-shapes-stroke {:color color})) (st/emit! (uds/update-selected-shapes-stroke {:color color}))
(st/emit! (uds/update-selected-shapes-fill {:color color}))))] (st/emit! (uds/update-selected-shapes-fill {:color color}))))]
[:div.color-palette-content [:div.color-palette-content
[:div.color-palette-inside [:div.color-palette-inside {:style {:position "relative" :right (str (* position 52 10) "px")}}
(for [hex-color colors (for [hex-color colors
:let [rgb-vec (hex->rgb hex-color) :let [rgb-vec (hex->rgb hex-color)
rgb-color (apply str "" (interpose ", " rgb-vec))]] rgb-color (apply str "" (interpose ", " rgb-vec))]]
@ -58,7 +58,7 @@
collection (get-selected-collection local collections)] collection (get-selected-collection local collections)]
(letfn [(select-collection [event] (letfn [(select-collection [event]
(let [value (read-string (dom/event->value event))] (let [value (read-string (dom/event->value event))]
(swap! local assoc :selected value))) (swap! local assoc :selected value :position 0)))
(close [event] (close [event]
(st/emit! (dw/toggle-flag :colorpalette)))] (st/emit! (dw/toggle-flag :colorpalette)))]
[:div.color-palette [:div.color-palette
@ -71,9 +71,17 @@
#_[:div.color-palette-buttons #_[:div.color-palette-buttons
[:div.btn-palette.edit.current i/pencil] [:div.btn-palette.edit.current i/pencil]
[:div.btn-palette.create i/close]]] [:div.btn-palette.create i/close]]]
[:span.left-arrow i/arrow-slide] [:span.left-arrow
(palette-items (:colors collection)) (if (> (:position @local) 0)
[:span.right-arrow i/arrow-slide] {:on-click #(swap! local update :position dec)}
{:class :disabled})
i/arrow-slide]
(palette-items (:colors collection) (:position @local))
[:span.right-arrow
(if (< (* (+ 1 (:position @local)) 10) (count (:colors collection)))
{:on-click #(swap! local update :position inc)}
{:class :disabled})
i/arrow-slide]
[:span.close-palette {:on-click close} [:span.close-palette {:on-click close}
i/close]]))) i/close]])))