Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-10 17:18:21 -05:00
Code Issues Activity

🐛 problem with palettes

Browse source
This commit is contained in:
alonso.torres 2020-04-15 09:34:02 +02:00
parent 55c85c0d5c
commit 07fb644e07
1 changed files with 62 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -30,8 +30,8 @@
(defn selected-items-ref (defn selected-items-ref
[library-id] [library-id]
(->> #(get-in % [:library-items :palettes library-id]) (-> #(get-in % [:library-items :palettes library-id])
(l/derived st/state))) (l/derived st/state)))
(def selected-library-ref (def selected-library-ref
(-> #(get-in % [:library-selected :palettes]) (-> #(get-in % [:library-selected :palettes])
@ -56,75 +56,77 @@
(mf/defc palette (mf/defc palette
[{:keys [libraries left-sidebar?] :as props}] [{:keys [libraries left-sidebar?] :as props}]
(when (and libraries (-> libraries count (> 0))) (let [current-selection (or (mf/deref selected-library-ref) (-> libraries first :id))
(let [current-selection (or (mf/deref selected-library-ref) (-> libraries first :id)) state (mf/use-state {:show-menu false })]
state (mf/use-state {:show-menu false })]
(mf/use-effect
(mf/deps current-selection)
#(st/emit! (dlib/retrieve-library-data :palettes current-selection)))
(let [items (-> current-selection selected-items-ref mf/deref) (mf/use-effect
doc-width (.. js/document -documentElement -clientWidth) (mf/deps current-selection)
width (:width @state (* doc-width 0.84)) #(when current-selection
offset (:offset @state 0) (st/emit! (dlib/retrieve-library-data :palettes current-selection))))
visible (/ width 86)
invisible (- (count items) visible)
close #(st/emit! (udw/toggle-layout-flag :colorpalette))
container (mf/use-ref nil)
container-child (mf/use-ref nil)
on-left-arrow-click (let [items (or (mf/deref (selected-items-ref current-selection)) [])
(fn [event] doc-width (.. js/document -documentElement -clientWidth)
(when (> offset 0) width (:width @state (* doc-width 0.84))
(let [element (mf/ref-val container-child)] offset (:offset @state 0)
(swap! state update :offset dec)))) visible (/ width 86)
invisible (- (count items) visible)
close #(st/emit! (udw/toggle-layout-flag :colorpalette))
container (mf/use-ref nil)
container-child (mf/use-ref nil)
on-right-arrow-click on-left-arrow-click
(fn [event] (fn [event]
(when (< offset invisible) (when (> offset 0)
(let [element (mf/ref-val container-child)] (let [element (mf/ref-val container-child)]
(swap! state update :offset inc)))) (swap! state update :offset dec))))
on-scroll on-right-arrow-click
(fn [event] (fn [event]
(if (pos? (.. event -nativeEvent -deltaY)) (when (< offset invisible)
(on-right-arrow-click event) (let [element (mf/ref-val container-child)]
(on-left-arrow-click event))) (swap! state update :offset inc))))
after-render on-scroll
(fn [] (fn [event]
(let [dom (mf/ref-val container) (if (pos? (.. event -nativeEvent -deltaY))
width (.-clientWidth dom)] (on-right-arrow-click event)
(when (not= (:width @state) width) (on-left-arrow-click event)))
(swap! state assoc :width width))))
handle-click after-render
(fn [library] (fn []
(st/emit! (dlib/select-library :palettes (:id library))))] (let [dom (mf/ref-val container)
width (.-clientWidth dom)]
(when (not= (:width @state) width)
(swap! state assoc :width width))))
(mf/use-effect nil after-render) handle-click
(fn [library]
(st/emit! (dlib/select-library :palettes (:id library))))]
[:div.color-palette {:class (when left-sidebar? "left-sidebar-open")} (mf/use-effect nil after-render)
[:& context-menu {:selectable true
:selected (->> libraries (filter #(= (:id %) current-selection)) first :name)
:show (:show-menu @state)
:on-close #(swap! state assoc :show-menu false)
:options (mapv #(vector (:name %) (partial handle-click %)) libraries)} ]
[:div.color-palette-actions
{:on-click #(swap! state assoc :show-menu true)}
[:div.color-palette-actions-button i/actions]]
[:span.left-arrow {:on-click on-left-arrow-click} i/arrow-slide] [:div.color-palette {:class (when left-sidebar? "left-sidebar-open")}
[:& context-menu {:selectable true
:selected (->> libraries (filter #(= (:id %) current-selection)) first :name)
:show (:show-menu @state)
:on-close #(swap! state assoc :show-menu false)
:options (mapv #(vector (:name %) (partial handle-click %)) libraries)} ]
[:div.color-palette-actions
{:on-click #(swap! state assoc :show-menu true)}
[:div.color-palette-actions-button i/actions]]
[:div.color-palette-content {:ref container :on-wheel on-scroll} [:span.left-arrow {:on-click on-left-arrow-click} i/arrow-slide]
[:div.color-palette-inside {:ref container-child
:style {:position "relative"
:width (str (* 86 (count items)) "px")
:right (str (* 86 offset) "px")}}
(for [item items]
[:& palette-item {:color (:content item) :key (:id item)}])]]
[:span.right-arrow {:on-click on-right-arrow-click} i/arrow-slide]])))) [:div.color-palette-content {:ref container :on-wheel on-scroll}
[:div.color-palette-inside {:ref container-child
:style {:position "relative"
:width (str (* 86 (count items)) "px")
:right (str (* 86 offset) "px")}}
(for [item items]
[:& palette-item {:color (:content item) :key (:id item)}])]]
[:span.right-arrow {:on-click on-right-arrow-click} i/arrow-slide]]))
)
(mf/defc colorpalette (mf/defc colorpalette
[{:keys [left-sidebar?]}] [{:keys [left-sidebar?]}]