mirror of
https://github.com/penpot/penpot.git
synced 2025-04-05 19:41:27 -05:00
Merge pull request #240 from uxbox/460/canvas_background_color
Allows user to change canvas background color
This commit is contained in:
Hirunatan
GitHub
commit
2447375925
12 changed files with 121 additions and 80 deletions
frontend
|
|
@ -14,14 +14,14 @@
|
|||
}
|
||||
},
|
||||
"auth.create-demo-profile" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/auth/register.cljs:116", "src/uxbox/main/ui/auth/login.cljs:115" ],
|
||||
"used-in" : [ "src/uxbox/main/ui/auth/login.cljs:115", "src/uxbox/main/ui/auth/register.cljs:116" ],
|
||||
"translations" : {
|
||||
"en" : "Create demo account",
|
||||
"fr" : null
|
||||
}
|
||||
},
|
||||
"auth.create-demo-profile-label" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/auth/register.cljs:113", "src/uxbox/main/ui/auth/login.cljs:112" ],
|
||||
"used-in" : [ "src/uxbox/main/ui/auth/login.cljs:112", "src/uxbox/main/ui/auth/register.cljs:113" ],
|
||||
"translations" : {
|
||||
"en" : "Just wanna try it?"
|
||||
}
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
}
|
||||
},
|
||||
"auth.email-label" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/auth/register.cljs:82", "src/uxbox/main/ui/auth/recovery_request.cljs:45", "src/uxbox/main/ui/auth/login.cljs:73" ],
|
||||
"used-in" : [ "src/uxbox/main/ui/auth/login.cljs:73", "src/uxbox/main/ui/auth/recovery_request.cljs:45", "src/uxbox/main/ui/auth/register.cljs:82" ],
|
||||
"translations" : {
|
||||
"en" : "Email",
|
||||
"fr" : "adresse email"
|
||||
|
|
@ -119,7 +119,7 @@
|
|||
}
|
||||
},
|
||||
"auth.password-label" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/auth/register.cljs:86", "src/uxbox/main/ui/auth/login.cljs:79" ],
|
||||
"used-in" : [ "src/uxbox/main/ui/auth/login.cljs:79", "src/uxbox/main/ui/auth/register.cljs:86" ],
|
||||
"translations" : {
|
||||
"en" : "Password",
|
||||
"fr" : "Mot de passe"
|
||||
|
|
@ -343,7 +343,7 @@
|
|||
}
|
||||
},
|
||||
"dashboard.sidebar.drafts" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/dashboard/sidebar.cljs:111" ],
|
||||
"used-in" : [ "src/uxbox/main/ui/dashboard/sidebar.cljs:112" ],
|
||||
"translations" : {
|
||||
"en" : "Drafts"
|
||||
}
|
||||
|
|
@ -355,7 +355,7 @@
|
|||
}
|
||||
},
|
||||
"dashboard.sidebar.recent" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/dashboard/sidebar.cljs:104" ],
|
||||
"used-in" : [ "src/uxbox/main/ui/dashboard/sidebar.cljs:105" ],
|
||||
"translations" : {
|
||||
"en" : "Recent"
|
||||
}
|
||||
|
|
@ -456,7 +456,7 @@
|
|||
}
|
||||
},
|
||||
"ds.search.placeholder" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/dashboard/sidebar.cljs:168" ],
|
||||
"used-in" : [ "src/uxbox/main/ui/dashboard/sidebar.cljs:171" ],
|
||||
"translations" : {
|
||||
"en" : "Search...",
|
||||
"fr" : "Rechercher..."
|
||||
|
|
@ -533,32 +533,32 @@
|
|||
}
|
||||
},
|
||||
"errors.email-already-exists" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/auth.cljs:87", "src/uxbox/main/ui/settings/change_email.cljs:38" ],
|
||||
"used-in" : [ "src/uxbox/main/ui/settings/change_email.cljs:38", "src/uxbox/main/ui/auth.cljs:87" ],
|
||||
"translations" : {
|
||||
"en" : "Email already used"
|
||||
}
|
||||
},
|
||||
"errors.generic" : {
|
||||
"used-in" : [ "src/uxbox/main/ui.cljs:184", "src/uxbox/main/ui/auth.cljs:91", "src/uxbox/main/ui/settings/profile.cljs:37" ],
|
||||
"used-in" : [ "src/uxbox/main/ui/settings/profile.cljs:37", "src/uxbox/main/ui/auth.cljs:91", "src/uxbox/main/ui.cljs:190" ],
|
||||
"translations" : {
|
||||
"en" : "Something wrong has happened.",
|
||||
"fr" : "Quelque chose c'est mal passé."
|
||||
}
|
||||
},
|
||||
"errors.image-format-unsupported" : {
|
||||
"used-in" : [ "src/uxbox/main/data/images.cljs:375", "src/uxbox/main/data/workspace/persistence.cljs:318" ],
|
||||
"used-in" : [ "src/uxbox/main/data/workspace/persistence.cljs:317", "src/uxbox/main/data/images.cljs:375" ],
|
||||
"translations" : {
|
||||
"en" : "The image format is not supported (must be svg, jpg or png)."
|
||||
}
|
||||
},
|
||||
"errors.image-too-large" : {
|
||||
"used-in" : [ "src/uxbox/main/data/images.cljs:373", "src/uxbox/main/data/workspace/persistence.cljs:316" ],
|
||||
"used-in" : [ "src/uxbox/main/data/workspace/persistence.cljs:315", "src/uxbox/main/data/images.cljs:373" ],
|
||||
"translations" : {
|
||||
"en" : "The image is too large to be inserted (must be under 5mb)."
|
||||
}
|
||||
},
|
||||
"errors.network" : {
|
||||
"used-in" : [ "src/uxbox/main/ui.cljs:178" ],
|
||||
"used-in" : [ "src/uxbox/main/ui.cljs:184" ],
|
||||
"translations" : {
|
||||
"en" : "Unable to connect to backend server.",
|
||||
"fr" : "Impossible de se connecter au serveur principal."
|
||||
|
|
@ -585,7 +585,7 @@
|
|||
}
|
||||
},
|
||||
"errors.unexpected-error" : {
|
||||
"used-in" : [ "src/uxbox/main/data/images.cljs:384", "src/uxbox/main/data/workspace/persistence.cljs:327", "src/uxbox/main/ui/auth/register.cljs:54", "src/uxbox/main/ui/settings/change_email.cljs:42" ],
|
||||
"used-in" : [ "src/uxbox/main/data/workspace/persistence.cljs:326", "src/uxbox/main/data/images.cljs:384", "src/uxbox/main/ui/settings/change_email.cljs:42", "src/uxbox/main/ui/auth/register.cljs:54" ],
|
||||
"translations" : {
|
||||
"en" : "An unexpected error occurred.",
|
||||
"fr" : "Une erreur inattendue c'est produite"
|
||||
|
|
@ -626,7 +626,7 @@
|
|||
"unused" : true
|
||||
},
|
||||
"image.loading" : {
|
||||
"used-in" : [ "src/uxbox/main/data/images.cljs:392", "src/uxbox/main/data/workspace/persistence.cljs:335" ],
|
||||
"used-in" : [ "src/uxbox/main/data/workspace/persistence.cljs:334", "src/uxbox/main/data/images.cljs:392" ],
|
||||
"translations" : {
|
||||
"en" : "Loading image..."
|
||||
}
|
||||
|
|
@ -861,7 +861,7 @@
|
|||
}
|
||||
},
|
||||
"settings.profile-submit-label" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/settings/password.cljs:94", "src/uxbox/main/ui/settings/options.cljs:65", "src/uxbox/main/ui/settings/profile.cljs:89" ],
|
||||
"used-in" : [ "src/uxbox/main/ui/settings/options.cljs:65", "src/uxbox/main/ui/settings/password.cljs:94", "src/uxbox/main/ui/settings/profile.cljs:89" ],
|
||||
"translations" : {
|
||||
"en" : "Update settings",
|
||||
"fr" : "Mettre à jour les paramètres"
|
||||
|
|
@ -1140,41 +1140,47 @@
|
|||
}
|
||||
},
|
||||
"workspace.library.all" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:121" ],
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:123" ],
|
||||
"translations" : {
|
||||
"en" : "All libraries"
|
||||
}
|
||||
},
|
||||
"workspace.library.icons" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:171" ],
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:173" ],
|
||||
"translations" : {
|
||||
"en" : "Icons"
|
||||
}
|
||||
},
|
||||
"workspace.library.images" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:176" ],
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:178" ],
|
||||
"translations" : {
|
||||
"en" : "Images"
|
||||
}
|
||||
},
|
||||
"workspace.library.libraries" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:153" ],
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:155" ],
|
||||
"translations" : {
|
||||
"en" : "Libraries"
|
||||
}
|
||||
},
|
||||
"workspace.library.own" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:122" ],
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:124" ],
|
||||
"translations" : {
|
||||
"en" : "My libraries"
|
||||
}
|
||||
},
|
||||
"workspace.library.store" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:123" ],
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/libraries.cljs:125" ],
|
||||
"translations" : {
|
||||
"en" : "Store libraries"
|
||||
}
|
||||
},
|
||||
"workspace.options.canvas_background" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/page.cljs:39" ],
|
||||
"translations" : {
|
||||
"en" : "Canvas background"
|
||||
}
|
||||
},
|
||||
"workspace.options.color" : {
|
||||
"translations" : {
|
||||
"en" : "Color",
|
||||
|
|
@ -1189,7 +1195,7 @@
|
|||
}
|
||||
},
|
||||
"workspace.options.fill" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/fill.cljs:41", "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:383" ],
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:383", "src/uxbox/main/ui/workspace/sidebar/options/fill.cljs:41" ],
|
||||
"translations" : {
|
||||
"en" : "Fill",
|
||||
"fr" : "Fond"
|
||||
|
|
@ -1644,21 +1650,21 @@
|
|||
}
|
||||
},
|
||||
"workspace.toolbar.circle" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:63" ],
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:64" ],
|
||||
"translations" : {
|
||||
"en" : "Circle (E)",
|
||||
"fr" : "Cercle (E)"
|
||||
}
|
||||
},
|
||||
"workspace.toolbar.color-palette" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:107" ],
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:108" ],
|
||||
"translations" : {
|
||||
"en" : "Color Palette (---)",
|
||||
"fr" : "Palette de couleurs (---)"
|
||||
}
|
||||
},
|
||||
"workspace.toolbar.curve" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:82" ],
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:83" ],
|
||||
"translations" : {
|
||||
"en" : "Curve",
|
||||
"fr" : "Courbe"
|
||||
|
|
@ -1672,7 +1678,7 @@
|
|||
"unused" : true
|
||||
},
|
||||
"workspace.toolbar.frame" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:53" ],
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:54" ],
|
||||
"translations" : {
|
||||
"en" : "Artboard (A)",
|
||||
"fr" : null
|
||||
|
|
@ -1693,20 +1699,20 @@
|
|||
"unused" : true
|
||||
},
|
||||
"workspace.toolbar.image" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:73" ],
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:74" ],
|
||||
"translations" : {
|
||||
"en" : "Image (Ctrl + I)",
|
||||
"fr" : "Image (Ctrl + I)"
|
||||
}
|
||||
},
|
||||
"workspace.toolbar.libraries" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:99" ],
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:100" ],
|
||||
"translations" : {
|
||||
"en" : "Libraries (Ctrl + Shift + L)"
|
||||
}
|
||||
},
|
||||
"workspace.toolbar.path" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:87" ],
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:88" ],
|
||||
"translations" : {
|
||||
"en" : "Path",
|
||||
"fr" : "Chemin"
|
||||
|
|
@ -1720,7 +1726,7 @@
|
|||
"unused" : true
|
||||
},
|
||||
"workspace.toolbar.rect" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:58" ],
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:59" ],
|
||||
"translations" : {
|
||||
"en" : "Box (B)",
|
||||
"fr" : "Boîte (B)"
|
||||
|
|
@ -1734,14 +1740,14 @@
|
|||
"unused" : true
|
||||
},
|
||||
"workspace.toolbar.text" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:68" ],
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/left_toolbar.cljs:69" ],
|
||||
"translations" : {
|
||||
"en" : "Text (T)",
|
||||
"fr" : "Texte (T)"
|
||||
}
|
||||
},
|
||||
"workspace.viewport.click-to-close-path" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/drawarea.cljs:373" ],
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/drawarea.cljs:54" ],
|
||||
"translations" : {
|
||||
"en" : "Click to close the path"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -225,11 +225,4 @@
|
|||
input {
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
& > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
|
||||
width: 25px !important;
|
||||
height: 25px !important;
|
||||
border-radius: 20px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -158,10 +158,6 @@
|
|||
.empty-rule-square {
|
||||
grid-column: 1 / span 1;
|
||||
grid-row: 1 / span 1;
|
||||
background-color: $color-canvas;
|
||||
z-index: 13;
|
||||
border-right: 1px solid $color-gray-30;
|
||||
border-bottom: 1px solid $color-gray-30;
|
||||
}
|
||||
|
||||
.horizontal-rule {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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]}]
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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}]])
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -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}]]])
|
||||
)
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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)}]
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue