3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-07 14:38:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

Improve color palette interaction.

Browse source
This commit is contained in:
Andrey Antukh 2016-12-28 18:37:40 +01:00
parent e6fa720ce1
commit 42e79b483f
No known key found for this signature in database
GPG key ID: 4DFEBCB8316A8B95
2 changed files with 47 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -105,8 +105,9 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-shrink: 0; flex-shrink: 0;
margin: 0 .6rem; margin: 0 10px;
position: relative; position: relative;
flex-basis: 66px;
.color { .color {
background-color: $color-gray-lighter; background-color: $color-gray-lighter;
border: 2px solid $soft-ui-border; border: 2px solid $soft-ui-border;

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

@ -29,34 +29,47 @@
(first (filter #(= selected (:id %)) collections)) (first (filter #(= selected (:id %)) collections))
(first (filter #(and (:id %) (> (count (:colors %)) 0)) collections)))) (first (filter #(and (:id %) (> (count (:colors %)) 0)) collections))))
(mx/defc palette-items (mx/defc palette-item
{:mixins [mx/static]} {:mixins [mx/static]}
[colors position] [color]
(letfn [(select-color [event color] (letfn [(select-color [event]
(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 (let [rgb-vec (hex->rgb color)
[:div.color-palette-inside {:style {:position "relative" :right (str (* position 52 10) "px")}} rgb-color (apply str "" (interpose ", " rgb-vec))]
(for [hex-color colors [:div.color-cell {:key (str color)
:let [rgb-vec (hex->rgb hex-color) :on-click select-color}
rgb-color (apply str "" (interpose ", " rgb-vec))]] [:span.color {:style {:background color}}]
[:div.color-cell {:key (str hex-color) [:span.color-text color]
:on-click #(select-color % hex-color)} [:span.color-text rgb-color]])))
[:span.color {:style {:background hex-color}}]
[:span.color-text hex-color] (defn- palette-after-render
[:span.color-text rgb-color]])]])) [{:keys [rum/local] :as own}]
(let [dom (mx/ref-node own "container")
width (.-clientWidth dom)]
(when (not= (:width @local) width)
(swap! local assoc :width width))
own))
(defn- document-width
[]
(.. js/document -documentElement -clientWidth))
(mx/defcs palette (mx/defcs palette
{:mixins [mx/static mx/reactive (mx/local)]} {:mixins [mx/static mx/reactive (mx/local)]
[own] :after-render palette-after-render}
(let [local (:rum/local own) [{:keys [rum/local] :as own}]
collections (->> (mx/react collections-ref) (let [collections (->> (mx/react collections-ref)
(vals) (vals)
(filter :id) (filter :id)
(sort-by :name)) (sort-by :name))
selected-collection (get-selected-collection local collections)] {:keys [colors] :as selected-coll} (get-selected-collection local collections)
width (:width @local (* (document-width) 0.84))
offset (:offset @local 0)
visible (/ width 86)
invisible (- (count colors) visible)]
(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 :position 0))) (swap! local assoc :selected value :position 0)))
@ -68,21 +81,27 @@
(for [collection collections] (for [collection collections]
[:option {:key (str (:id collection)) [:option {:key (str (:id collection))
:value (pr-str (:id collection)) :value (pr-str (:id collection))
:selected (when (= collection selected-collection) "selected")} :selected (when (= collection selected-coll) "selected")}
(:name collection)])] (:name collection)])]
#_[: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 [:span.left-arrow
(if (> (:position @local) 0) (when (> offset 0)
{:on-click #(swap! local update :position dec)} {:on-click #(swap! local update :offset (fnil dec 1))})
{:class :disabled})
i/arrow-slide] i/arrow-slide]
(palette-items (:colors selected-collection) (:position @local))
[:div.color-palette-content {:ref "container"}
[:div.color-palette-inside {:style {:position "relative"
:right (str (* 86 offset) "px")}}
(for [color colors]
(-> (palette-item color)
(mx/with-key color)))]]
[:span.right-arrow [:span.right-arrow
(if (< (* (+ 1 (:position @local)) 10) (count (:colors selected-collection))) (when (< offset invisible)
{:on-click #(swap! local update :position inc)} {:on-click #(swap! local update :offset (fnil inc 0))})
{:class :disabled})
i/arrow-slide] i/arrow-slide]
[:span.close-palette {:on-click close} [:span.close-palette {:on-click close}
i/close]]))) i/close]])))