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

70
frontend/resources/locales.json
View file

@ -14,14 +14,14 @@
} }
}, },
"auth.create-demo-profile" : { "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" : { "translations" : {
"en" : "Create demo account", "en" : "Create demo account",
"fr" : null "fr" : null
} }
}, },
"auth.create-demo-profile-label" : { "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" : { "translations" : {
"en" : "Just wanna try it?" "en" : "Just wanna try it?"
} }
@ -33,7 +33,7 @@
} }
}, },
"auth.email-label" : { "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" : { "translations" : {
"en" : "Email", "en" : "Email",
"fr" : "adresse email" "fr" : "adresse email"
@ -119,7 +119,7 @@
} }
}, },
"auth.password-label" : { "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" : { "translations" : {
"en" : "Password", "en" : "Password",
"fr" : "Mot de passe" "fr" : "Mot de passe"
@ -343,7 +343,7 @@
} }
}, },
"dashboard.sidebar.drafts" : { "dashboard.sidebar.drafts" : {
"used-in" : [ "src/uxbox/main/ui/dashboard/sidebar.cljs:111" ], "used-in" : [ "src/uxbox/main/ui/dashboard/sidebar.cljs:112" ],
"translations" : { "translations" : {
"en" : "Drafts" "en" : "Drafts"
} }
@ -355,7 +355,7 @@
} }
}, },
"dashboard.sidebar.recent" : { "dashboard.sidebar.recent" : {
"used-in" : [ "src/uxbox/main/ui/dashboard/sidebar.cljs:104" ], "used-in" : [ "src/uxbox/main/ui/dashboard/sidebar.cljs:105" ],
"translations" : { "translations" : {
"en" : "Recent" "en" : "Recent"
} }
@ -456,7 +456,7 @@
} }
}, },
"ds.search.placeholder" : { "ds.search.placeholder" : {
"used-in" : [ "src/uxbox/main/ui/dashboard/sidebar.cljs:168" ], "used-in" : [ "src/uxbox/main/ui/dashboard/sidebar.cljs:171" ],
"translations" : { "translations" : {
"en" : "Search...", "en" : "Search...",
"fr" : "Rechercher..." "fr" : "Rechercher..."
@ -533,32 +533,32 @@
} }
}, },
"errors.email-already-exists" : { "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" : { "translations" : {
"en" : "Email already used" "en" : "Email already used"
} }
}, },
"errors.generic" : { "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" : { "translations" : {
"en" : "Something wrong has happened.", "en" : "Something wrong has happened.",
"fr" : "Quelque chose c'est mal passé." "fr" : "Quelque chose c'est mal passé."
} }
}, },
"errors.image-format-unsupported" : { "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" : { "translations" : {
"en" : "The image format is not supported (must be svg, jpg or png)." "en" : "The image format is not supported (must be svg, jpg or png)."
} }
}, },
"errors.image-too-large" : { "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" : { "translations" : {
"en" : "The image is too large to be inserted (must be under 5mb)." "en" : "The image is too large to be inserted (must be under 5mb)."
} }
}, },
"errors.network" : { "errors.network" : {
"used-in" : [ "src/uxbox/main/ui.cljs:178" ], "used-in" : [ "src/uxbox/main/ui.cljs:184" ],
"translations" : { "translations" : {
"en" : "Unable to connect to backend server.", "en" : "Unable to connect to backend server.",
"fr" : "Impossible de se connecter au serveur principal." "fr" : "Impossible de se connecter au serveur principal."
@ -585,7 +585,7 @@
} }
}, },
"errors.unexpected-error" : { "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" : { "translations" : {
"en" : "An unexpected error occurred.", "en" : "An unexpected error occurred.",
"fr" : "Une erreur inattendue c'est produite" "fr" : "Une erreur inattendue c'est produite"
@ -626,7 +626,7 @@
"unused" : true "unused" : true
}, },
"image.loading" : { "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" : { "translations" : {
"en" : "Loading image..." "en" : "Loading image..."
} }
@ -861,7 +861,7 @@
} }
}, },
"settings.profile-submit-label" : { "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" : { "translations" : {
"en" : "Update settings", "en" : "Update settings",
"fr" : "Mettre à jour les paramètres" "fr" : "Mettre à jour les paramètres"
@ -1140,41 +1140,47 @@
} }
}, },
"workspace.library.all" : { "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" : { "translations" : {
"en" : "All libraries" "en" : "All libraries"
} }
}, },
"workspace.library.icons" : { "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" : { "translations" : {
"en" : "Icons" "en" : "Icons"
} }
}, },
"workspace.library.images" : { "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" : { "translations" : {
"en" : "Images" "en" : "Images"
} }
}, },
"workspace.library.libraries" : { "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" : { "translations" : {
"en" : "Libraries" "en" : "Libraries"
} }
}, },
"workspace.library.own" : { "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" : { "translations" : {
"en" : "My libraries" "en" : "My libraries"
} }
}, },
"workspace.library.store" : { "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" : { "translations" : {
"en" : "Store libraries" "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" : { "workspace.options.color" : {
"translations" : { "translations" : {
"en" : "Color", "en" : "Color",
@ -1189,7 +1195,7 @@
} }
}, },
"workspace.options.fill" : { "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" : { "translations" : {
"en" : "Fill", "en" : "Fill",
"fr" : "Fond" "fr" : "Fond"
@ -1644,21 +1650,21 @@
} }
}, },
"workspace.toolbar.circle" : { "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" : { "translations" : {
"en" : "Circle (E)", "en" : "Circle (E)",
"fr" : "Cercle (E)" "fr" : "Cercle (E)"
} }
}, },
"workspace.toolbar.color-palette" : { "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" : { "translations" : {
"en" : "Color Palette (---)", "en" : "Color Palette (---)",
"fr" : "Palette de couleurs (---)" "fr" : "Palette de couleurs (---)"
} }
}, },
"workspace.toolbar.curve" : { "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" : { "translations" : {
"en" : "Curve", "en" : "Curve",
"fr" : "Courbe" "fr" : "Courbe"
@ -1672,7 +1678,7 @@
"unused" : true "unused" : true
}, },
"workspace.toolbar.frame" : { "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" : { "translations" : {
"en" : "Artboard (A)", "en" : "Artboard (A)",
"fr" : null "fr" : null
@ -1693,20 +1699,20 @@
"unused" : true "unused" : true
}, },
"workspace.toolbar.image" : { "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" : { "translations" : {
"en" : "Image (Ctrl + I)", "en" : "Image (Ctrl + I)",
"fr" : "Image (Ctrl + I)" "fr" : "Image (Ctrl + I)"
} }
}, },
"workspace.toolbar.libraries" : { "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" : { "translations" : {
"en" : "Libraries (Ctrl + Shift + L)" "en" : "Libraries (Ctrl + Shift + L)"
} }
}, },
"workspace.toolbar.path" : { "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" : { "translations" : {
"en" : "Path", "en" : "Path",
"fr" : "Chemin" "fr" : "Chemin"
@ -1720,7 +1726,7 @@
"unused" : true "unused" : true
}, },
"workspace.toolbar.rect" : { "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" : { "translations" : {
"en" : "Box (B)", "en" : "Box (B)",
"fr" : "Boîte (B)" "fr" : "Boîte (B)"
@ -1734,14 +1740,14 @@
"unused" : true "unused" : true
}, },
"workspace.toolbar.text" : { "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" : { "translations" : {
"en" : "Text (T)", "en" : "Text (T)",
"fr" : "Texte (T)" "fr" : "Texte (T)"
} }
}, },
"workspace.viewport.click-to-close-path" : { "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" : { "translations" : {
"en" : "Click to close the path" "en" : "Click to close the path"
} }

7
frontend/resources/styles/main/partials/colorpicker.scss
View file

@ -225,11 +225,4 @@
input { input {
margin-bottom: auto; 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;
}
} }

4
frontend/resources/styles/main/partials/workspace.scss
View file

@ -158,10 +158,6 @@
.empty-rule-square { .empty-rule-square {
grid-column: 1 / span 1; grid-column: 1 / span 1;
grid-row: 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 { .horizontal-rule {

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

@ -1329,6 +1329,26 @@
(rx/of (update-shape shape-id (rx/of (update-shape shape-id
{:interactions []})))))))) {: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 ;; 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.text :as text]
[uxbox.main.ui.shapes.group :as group])) [uxbox.main.ui.shapes.group :as group]))
(def ^:private background-color "#E8E9EA") ;; $color-canvas (def ^:private default-color "#E8E9EA") ;; $color-canvas
(mf/defc background (mf/defc background
[] [{:keys [vbox color]}]
[:rect [:rect
{:x 0 :y 0 {:x (:x vbox)
:width "100%" :y (:y vbox)
:height "100%" :width (:width vbox)
:fill background-color}]) :height (:height vbox)
:fill color}])
(defn- calculate-dimensions (defn- calculate-dimensions
[{:keys [objects] :as data} vport] [{:keys [objects] :as data} vport]
@ -100,7 +101,7 @@
(:y dim 0) " " (:y dim 0) " "
(:width dim 100) " " (:width dim 100) " "
(:height dim 100)) (:height dim 100))
background-color (get-in data [:options :background] default-color)
frame-wrapper frame-wrapper
(mf/use-memo (mf/use-memo
(mf/deps objects) (mf/deps objects)
@ -114,7 +115,7 @@
:version "1.1" :version "1.1"
:xmlnsXlink "http://www.w3.org/1999/xlink" :xmlnsXlink "http://www.w3.org/1999/xlink"
:xmlns "http://www.w3.org/2000/svg"} :xmlns "http://www.w3.org/2000/svg"}
[:& background] [:& background {:vbox dim :color background-color}]
(for [item shapes] (for [item shapes]
(if (= (:type item) :frame) (if (= (:type item) :frame)
[:& frame-wrapper {:shape item [:& 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])) ["react-color/lib/components/chrome/Chrome" :as pickerskin]))
(mf/defc colorpicker (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")) (let [hex-value (mf/use-state (or value "#FFFFFF"))
alpha-value (mf/use-state (or opacity 1)) alpha-value (mf/use-state (or opacity 1))
[r g b] (hex->rgb @hex-value) [r g b] (hex->rgb @hex-value)
@ -25,9 +25,10 @@
(on-change hex opacity))] (on-change hex opacity))]
[:> pickerskin/default {:color #js { :r r :g g :b b :a @alpha-value} [:> pickerskin/default {:color #js { :r r :g g :b b :a @alpha-value}
:presetColors colors :presetColors colors
:onChange on-change-complete :onChange on-change-complete
:style {:box-shadow "none"}}])) :disableAlpha disable-opacity
:style {:box-shadow "none"}}]))
(def most-used-colors (def most-used-colors
(letfn [(selector [{:keys [objects]}] (letfn [(selector [{:keys [objects]}]

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

@ -34,7 +34,8 @@
(run! fonts/ensure-loaded! fonts) (run! fonts/ensure-loaded! fonts)
(when-let [node (mf/ref-val container)] (when-let [node (mf/ref-val container)]
(set! (.-innerHTML ^js node) svg))))))) (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 ;; --- Grid Item

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

@ -14,13 +14,14 @@
;; --- Color Picker Modal ;; --- Color Picker Modal
(mf/defc colorpicker-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 [:div.colorpicker-tooltip
{:style {:left (str (- x 260) "px") {:style {:left (str (- x 260) "px")
:top (str (- y 50) "px")}} :top (str (- y 50) "px")}}
[:& cp/colorpicker {:value (or value default) [:& cp/colorpicker {:value (or value default)
:opacity (or opacity 1) :opacity (or opacity 1)
:colors (into-array @cp/most-used-colors) :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) minv (mth/round start)
maxv (mth/round (+ start (/ size zoom))) maxv (mth/round (+ start (/ size zoom)))
step (calculate-step-size zoom)] step (calculate-step-size zoom)]
(obj/set! dctx "fillStyle" "#E8E9EA")
(if (= type :horizontal) (if (= type :horizontal)
(do (.translate dctx txfm 0)
(.fillRect dctx 0 0 size 20) (.translate dctx 0 txfm))
(.translate dctx txfm 0))
(do
(.fillRect dctx 0 0 20 size)
(.translate dctx 0 txfm)))
(obj/set! dctx "font" "12px sourcesanspro") (obj/set! dctx "font" "12px sourcesanspro")
(obj/set! dctx "fillStyle" "#7B7D85") (obj/set! dctx "fillStyle" "#7B7D85")

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

@ -12,12 +12,33 @@
(:require (:require
[rumext.alpha :as mf] [rumext.alpha :as mf]
[okulary.core :as l] [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 (def options-iref
(l/derived :options refs/workspace-data)) (l/derived :options refs/workspace-data))
(mf/defc options (defn use-change-color [page]
;; TODO: Define properties for page (mf/use-callback
[{:keys [page] :as props}]) (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.main.ui.workspace.colorpicker :refer [colorpicker-modal]]
[uxbox.common.data :as d])) [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] (fn [event]
(let [x (.-clientX event) (let [x (.-clientX event)
y (.-clientY event) y (.-clientY event)
@ -25,7 +25,8 @@
:on-change handle-change-color :on-change handle-change-color
:value (:value color) :value (:value color)
:opacity (:opacity color) :opacity (:opacity color)
:transparent? true}] :transparent? true
:disable-opacity disable-opacity}]
(modal/show! colorpicker-modal props)))) (modal/show! colorpicker-modal props))))
(defn opacity->string [opacity] (defn opacity->string [opacity]
@ -42,7 +43,7 @@
(d/parse-integer 1) (d/parse-integer 1)
(/ 100)))) (/ 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} (let [default-value {:value "#000000" :opacity 1}
parse-value (fn [value] parse-value (fn [value]
@ -85,19 +86,20 @@
[:div.row-flex.color-data [:div.row-flex.color-data
[:span.color-th [:span.color-th
{:style {:background-color (-> @state :value)} {: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 [:div.color-info
[:input {:value (-> @state :value (subs 1)) [:input {:value (-> @state :value (subs 1))
:pattern "^[0-9a-fA-F]{0,6}$" :pattern "^[0-9a-fA-F]{0,6}$"
:on-change handle-input-color-change}]] :on-change handle-input-color-change}]]
[:div.input-element.percentail (when (not disable-opacity)
[:input.input-text {:type "number" [:div.input-element.percentail
:value (-> @state :opacity opacity->string) [:input.input-text {:type "number"
:on-change handle-opacity-change :value (-> @state :opacity opacity->string)
:min "0" :on-change handle-opacity-change
:max "100"}]] :min "0"
:max "100"}]])
#_[:input.slidebar {:type "range" #_[:input.slidebar {:type "range"
:min "0" :min "0"

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

@ -377,6 +377,7 @@
(events/unlistenByKey key5) (events/unlistenByKey key5)
))) )))
options (mf/deref refs/workspace-page-options)
] ]
(mf/use-effect on-mount) (mf/use-effect on-mount)
@ -399,7 +400,8 @@
(= drawing-tool :path) cur/pen (= drawing-tool :path) cur/pen
(= drawing-tool :curve)cur/pencil (= drawing-tool :curve)cur/pencil
drawing-tool cur/create-shape 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-context-menu on-context-menu
:on-click on-click :on-click on-click
:on-double-click on-double-click :on-double-click on-double-click
@ -410,6 +412,7 @@
:on-drag-enter on-drag-enter :on-drag-enter on-drag-enter
:on-drag-over on-drag-over :on-drag-over on-drag-over
:on-drop on-drop} :on-drop on-drop}
[:g [:g
[:& frames {:key (:id page)}] [:& frames {:key (:id page)}]