Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-13 18:48:37 -05:00
Code Issues Activity

Add recent colors component.

Browse source
This commit is contained in:
Andrey Antukh 2016-01-20 20:03:25 +02:00
parent 0de4f9074d
commit 6183e5ef00
2 changed files with 71 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/uxbox/ui/workspace/options.cljs
View file

@ -8,6 +8,7 @@
[uxbox.ui.mixins :as mx]
[uxbox.ui.dom :as dom]
[uxbox.ui.colorpicker :refer (colorpicker)]
[uxbox.ui.workspace.recent-colors :refer (recent-colors)]
[uxbox.ui.workspace.base :as wb]
[uxbox.util.data :refer (parse-int parse-float)]))
@ -43,13 +44,9 @@
(defmulti -render-menu
(fn [menu own shape] (:id menu)))
(def ^:private ^:static toggle-colorpalette
#(rs/emit! (dw/toggle-tool :workspace/colorpalette)))
(defmethod -render-menu :menu/fill
[menu own shape]
(letfn [(change-fill [value]
(println value)
(let [sid (:id shape)]
(-> (dw/update-shape-fill sid value)
(rs/emit!))))
@ -78,16 +75,7 @@
:value (:fill shape "")
:on-change on-color-change}]]
;; RECENT COLORS
[:span "Recent colors"]
[:div.row-flex
[:span.color-th]
[:span.color-th {:style {:background "#c5cb7f"}}]
[:span.color-th {:style {:background "#6cb533"}}]
[:span.color-th {:style {:background "#67c6b5"}}]
[:span.color-th {:style {:background "#a178e3"}}]
[:span.color-th.palette-th {:on-click toggle-colorpalette}
i/palette]]
(recent-colors shape)
;; SLIDEBAR FOR ROTATION AND OPACITY
[:span "Opacity"]

69
src/uxbox/ui/workspace/recent_colors.cljs Normal file
View file

@ -0,0 +1,69 @@
(ns uxbox.ui.workspace.recent-colors
(:require [sablono.core :as html :refer-macros [html]]
[rum.core :as rum]
[cats.labs.lens :as l]
[uxbox.rstore :as rs]
[uxbox.state :as st]
[uxbox.data.workspace :as dw]
[uxbox.ui.icons :as i]
[uxbox.ui.mixins :as mx]
[uxbox.ui.dom :as dom]
[uxbox.ui.workspace.base :as wb]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Lenses
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(def ^:static ^:private shapes-by-id
(as-> (l/key :shapes-by-id) $
(l/focus-atom $ st/state)))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Helpers
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(def ^:private ^:static toggle-colorpalette
#(rs/emit! (dw/toggle-tool :workspace/colorpalette)))
(defn- count-color
[state shape]
(let [color (:fill shape)]
(if (contains? state color)
(update state color inc)
(assoc state color 1))))
(defn- calculate-colors
[shapes]
(let [result (reduce count-color {} shapes)]
(take 5 (map first (sort-by second (into [] result))))))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Component
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn- recent-colors-render
[own {:keys [page id] :as shape}]
(let [shapes-by-id (rum/react shapes-by-id)
shapes (->> (vals shapes-by-id)
(filter #(= (:page %) page)))
colors (calculate-colors shapes)
on-click #(rs/emit! (dw/update-shape-fill id {:fill %}))]
(html
[:div
[:span "Recent colors"]
[:div.row-flex
(for [color colors]
[:span.color-th {:style {:background color}
:on-click (partial on-click color)}])
(for [i (range (- 5 (count colors)))]
[:span.color-th])
[:span.color-th.palette-th {:on-click toggle-colorpalette}
i/palette]]])))
(def ^:static recent-colors
(mx/component
{:render recent-colors-render
:name "recent-colors"
:mixins [mx/static rum/reactive]}))