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

🎉 Allows user to change canvas background color

Browse source
This commit is contained in:
alonso.torres 2020-06-03 14:38:03 +02:00
parent 8989591b04
commit b441ac64d0
12 changed files with 121 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

20
frontend/src/uxbox/main/data/workspace.cljs
View file

@ -1329,6 +1329,26 @@
(rx/of (update-shape shape-id
{:interactions []}))))))))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; CANVAS OPTIONS
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn change-canvas-color
[color]
(ptk/reify ::change-canvas-color
ptk/WatchEvent
(watch [_ state stream]
(let [pid (get state :current-page-id)
current-color (get-in state [:workspace-data pid :options :background])]
(rx/of (dwc/commit-changes
[{:type :set-option
:option :background
:value color}]
[{:type :set-option
:option :background
:value current-color}]
{:commit-local? true}))))))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Exports
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

17
frontend/src/uxbox/main/exports.cljs
View file

@ -26,15 +26,16 @@
[uxbox.main.ui.shapes.text :as text]
[uxbox.main.ui.shapes.group :as group]))
(def ^:private background-color "#E8E9EA") ;; $color-canvas
(def ^:private default-color "#E8E9EA") ;; $color-canvas
(mf/defc background
[]
[{:keys [vbox color]}]
[:rect
{:x 0 :y 0
:width "100%"
:height "100%"
:fill background-color}])
{:x (:x vbox)
:y (:y vbox)
:width (:width vbox)
:height (:height vbox)
:fill color}])
(defn- calculate-dimensions
[{:keys [objects] :as data} vport]
@ -100,7 +101,7 @@
(:y dim 0) " "
(:width dim 100) " "
(:height dim 100))
background-color (get-in data [:options :background] default-color)
frame-wrapper
(mf/use-memo
(mf/deps objects)
@ -114,7 +115,7 @@
:version "1.1"
:xmlnsXlink "http://www.w3.org/1999/xlink"
:xmlns "http://www.w3.org/2000/svg"}
[:& background]
[:& background {:vbox dim :color background-color}]
(for [item shapes]
(if (= (:type item) :frame)
[:& frame-wrapper {:shape item

9
frontend/src/uxbox/main/ui/colorpicker.cljs
View file

@ -14,7 +14,7 @@
["react-color/lib/components/chrome/Chrome" :as pickerskin]))
(mf/defc colorpicker
[{:keys [on-change value opacity colors] :as props}]
[{:keys [on-change value opacity colors disable-opacity] :as props}]
(let [hex-value (mf/use-state (or value "#FFFFFF"))
alpha-value (mf/use-state (or opacity 1))
[r g b] (hex->rgb @hex-value)
@ -25,9 +25,10 @@
(on-change hex opacity))]
[:> pickerskin/default {:color #js { :r r :g g :b b :a @alpha-value}
:presetColors colors
:onChange on-change-complete
:style {:box-shadow "none"}}]))
:presetColors colors
:onChange on-change-complete
:disableAlpha disable-opacity
:style {:box-shadow "none"}}]))
(def most-used-colors
(letfn [(selector [{:keys [objects]}]

3
frontend/src/uxbox/main/ui/dashboard/grid.cljs
View file

@ -34,7 +34,8 @@
(run! fonts/ensure-loaded! fonts)
(when-let [node (mf/ref-val container)]
(set! (.-innerHTML ^js node) svg)))))))
[:div.grid-item-th {:ref container}]))
[:div.grid-item-th {:style {:background-color (get-in file [:data :options :background])}
:ref container}]))
;; --- Grid Item

5
frontend/src/uxbox/main/ui/workspace/colorpicker.cljs
View file

@ -14,13 +14,14 @@
;; --- Color Picker Modal
(mf/defc colorpicker-modal
[{:keys [x y default value opacity page on-change] :as props}]
[{:keys [x y default value opacity page on-change disable-opacity] :as props}]
[:div.colorpicker-tooltip
{:style {:left (str (- x 260) "px")
:top (str (- y 50) "px")}}
[:& cp/colorpicker {:value (or value default)
:opacity (or opacity 1)
:colors (into-array @cp/most-used-colors)
:on-change on-change}]])
:on-change on-change
:disable-opacity disable-opacity}]])

10
frontend/src/uxbox/main/ui/workspace/rules.cljs
View file

@ -37,14 +37,10 @@
minv (mth/round start)
maxv (mth/round (+ start (/ size zoom)))
step (calculate-step-size zoom)]
(obj/set! dctx "fillStyle" "#E8E9EA")
(if (= type :horizontal)
(do
(.fillRect dctx 0 0 size 20)
(.translate dctx txfm 0))
(do
(.fillRect dctx 0 0 20 size)
(.translate dctx 0 txfm)))
(.translate dctx txfm 0)
(.translate dctx 0 txfm))
(obj/set! dctx "font" "12px sourcesanspro")
(obj/set! dctx "fillStyle" "#7B7D85")

29
frontend/src/uxbox/main/ui/workspace/sidebar/options/page.cljs
View file

@ -12,12 +12,33 @@
(:require
[rumext.alpha :as mf]
[okulary.core :as l]
[uxbox.main.refs :as refs]))
[uxbox.main.refs :as refs]
[uxbox.main.store :as st]
[uxbox.main.data.workspace :as dw]
[uxbox.util.i18n :as i18n :refer [t]]
[uxbox.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]))
(def options-iref
(l/derived :options refs/workspace-data))
(mf/defc options
;; TODO: Define properties for page
[{:keys [page] :as props}])
(defn use-change-color [page]
(mf/use-callback
(mf/deps page)
(fn [value]
(st/emit! (dw/change-canvas-color value)))))
(mf/defc options
[{:keys [page] :as props}]
(let [locale (i18n/use-locale)
options (mf/deref refs/workspace-page-options)
handle-change-color (use-change-color page)]
[:div.element-set
[:div.element-set-title (t locale "workspace.options.canvas_background")]
[:div.element-set-content
[:& color-row {:disable-opacity true
:value {:value (get options :background "#E8E9EA")
:opacity 1}
:on-change handle-change-color}]]])
)

22
frontend/src/uxbox/main/ui/workspace/sidebar/options/rows/color_row.cljs
View file

@ -16,7 +16,7 @@
[uxbox.main.ui.workspace.colorpicker :refer [colorpicker-modal]]
[uxbox.common.data :as d]))
(defn color-picker-callback [color handle-change-color]
(defn color-picker-callback [color handle-change-color disable-opacity]
(fn [event]
(let [x (.-clientX event)
y (.-clientY event)
@ -25,7 +25,8 @@
:on-change handle-change-color
:value (:value color)
:opacity (:opacity color)
:transparent? true}]
:transparent? true
:disable-opacity disable-opacity}]
(modal/show! colorpicker-modal props))))
(defn opacity->string [opacity]
@ -42,7 +43,7 @@
(d/parse-integer 1)
(/ 100))))
(mf/defc color-row [{:keys [value on-change]}]
(mf/defc color-row [{:keys [value on-change disable-opacity]}]
(let [default-value {:value "#000000" :opacity 1}
parse-value (fn [value]
@ -85,19 +86,20 @@
[:div.row-flex.color-data
[:span.color-th
{:style {:background-color (-> @state :value)}
:on-click (color-picker-callback @state handle-pick-color)}]
:on-click (color-picker-callback @state handle-pick-color disable-opacity)}]
[:div.color-info
[:input {:value (-> @state :value (subs 1))
:pattern "^[0-9a-fA-F]{0,6}$"
:on-change handle-input-color-change}]]
[:div.input-element.percentail
[:input.input-text {:type "number"
:value (-> @state :opacity opacity->string)
:on-change handle-opacity-change
:min "0"
:max "100"}]]
(when (not disable-opacity)
[:div.input-element.percentail
[:input.input-text {:type "number"
:value (-> @state :opacity opacity->string)
:on-change handle-opacity-change
:min "0"
:max "100"}]])
#_[:input.slidebar {:type "range"
:min "0"

5
frontend/src/uxbox/main/ui/workspace/viewport.cljs
View file

@ -377,6 +377,7 @@
(events/unlistenByKey key5)
)))
options (mf/deref refs/workspace-page-options)
]
(mf/use-effect on-mount)
@ -399,7 +400,8 @@
(= drawing-tool :path) cur/pen
(= drawing-tool :curve)cur/pencil
drawing-tool cur/create-shape
:else cur/pointer-inner)}
:else cur/pointer-inner)
:background-color (get options :background "#E8E9EA")}
:on-context-menu on-context-menu
:on-click on-click
:on-double-click on-double-click
@ -410,6 +412,7 @@
:on-drag-enter on-drag-enter
:on-drag-over on-drag-over
:on-drop on-drop}
[:g
[:& frames {:key (:id page)}]