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

Merge pull request #220 from uxbox/408/color_picker_fixes

Browse source 
Color picker fixes
This commit is contained in:
Andrey Antukh 2020-05-20 13:32:17 +02:00 • committed by GitHub
commit 0f7b33837c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 168 additions and 299 deletions
Download patch file Download diff file Expand all files Collapse all files

104
frontend/resources/locales.json
View file

@ -962,7 +962,7 @@
} }
}, },
"workspace.options.fill" : { "workspace.options.fill" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:446", "src/uxbox/main/ui/workspace/sidebar/options/fill.cljs:71" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/fill.cljs:41", "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:383" ],
"translations" : { "translations" : {
"en" : "Fill", "en" : "Fill",
"fr" : "Fond" "fr" : "Fond"
@ -976,116 +976,116 @@
"unused" : true "unused" : true
}, },
"workspace.options.font-options" : { "workspace.options.font-options" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:452" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:389" ],
"translations" : { "translations" : {
"en" : "Text", "en" : "Text",
"fr" : "TODO" "fr" : "TODO"
} }
}, },
"workspace.options.font-options.align-bottom" : { "workspace.options.font-options.align-bottom" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:357" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:294" ],
"translations" : { "translations" : {
"en" : "Align bottom" "en" : "Align bottom"
} }
}, },
"workspace.options.font-options.align-center" : { "workspace.options.font-options.align-center" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:171" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:169" ],
"translations" : { "translations" : {
"en" : "Align center" "en" : "Align center"
} }
}, },
"workspace.options.font-options.align-justify" : { "workspace.options.font-options.align-justify" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:181" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:179" ],
"translations" : { "translations" : {
"en" : "Justify" "en" : "Justify"
} }
}, },
"workspace.options.font-options.align-left" : { "workspace.options.font-options.align-left" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:166" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:164" ],
"translations" : { "translations" : {
"en" : "Align left" "en" : "Align left"
} }
}, },
"workspace.options.font-options.align-middle" : { "workspace.options.font-options.align-middle" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:352" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:289" ],
"translations" : { "translations" : {
"en" : "Align middle" "en" : "Align middle"
} }
}, },
"workspace.options.font-options.align-right" : { "workspace.options.font-options.align-right" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:176" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:174" ],
"translations" : { "translations" : {
"en" : "Align right" "en" : "Align right"
} }
}, },
"workspace.options.font-options.align-top" : { "workspace.options.font-options.align-top" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:347" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:284" ],
"translations" : { "translations" : {
"en" : "Align top" "en" : "Align top"
} }
}, },
"workspace.options.font-options.decoration" : { "workspace.options.font-options.decoration" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:378" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:315" ],
"translations" : { "translations" : {
"en" : "Decoration" "en" : "Decoration"
} }
}, },
"workspace.options.font-options.letter-spacing" : { "workspace.options.font-options.letter-spacing" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:304" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:241" ],
"translations" : { "translations" : {
"en" : "Letter Spacing" "en" : "Letter Spacing"
} }
}, },
"workspace.options.font-options.line-height" : { "workspace.options.font-options.line-height" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:292" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:229" ],
"translations" : { "translations" : {
"en" : "Line height" "en" : "Line height"
} }
}, },
"workspace.options.font-options.lowercase" : { "workspace.options.font-options.lowercase" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:427" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:364" ],
"translations" : { "translations" : {
"en" : "Lowercase" "en" : "Lowercase"
} }
}, },
"workspace.options.font-options.none" : { "workspace.options.font-options.none" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:381", "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:417" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:318", "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:354" ],
"translations" : { "translations" : {
"en" : "None" "en" : "None"
} }
}, },
"workspace.options.font-options.strikethrough" : { "workspace.options.font-options.strikethrough" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:393" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:330" ],
"translations" : { "translations" : {
"en" : "Strikethrough" "en" : "Strikethrough"
} }
}, },
"workspace.options.font-options.text-case" : { "workspace.options.font-options.text-case" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:414" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:351" ],
"translations" : { "translations" : {
"en" : "Case" "en" : "Case"
} }
}, },
"workspace.options.font-options.titlecase" : { "workspace.options.font-options.titlecase" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:432" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:369" ],
"translations" : { "translations" : {
"en" : "Titlecase" "en" : "Titlecase"
} }
}, },
"workspace.options.font-options.underline" : { "workspace.options.font-options.underline" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:387" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:324" ],
"translations" : { "translations" : {
"en" : "Underline" "en" : "Underline"
} }
}, },
"workspace.options.font-options.uppercase" : { "workspace.options.font-options.uppercase" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:422" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:359" ],
"translations" : { "translations" : {
"en" : "Uppercase" "en" : "Uppercase"
} }
}, },
"workspace.options.font-options.vertical-align" : { "workspace.options.font-options.vertical-align" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:344" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/text.cljs:281" ],
"translations" : { "translations" : {
"en" : "Vertical align" "en" : "Vertical align"
} }
@ -1111,109 +1111,121 @@
} }
}, },
"workspace.options.grid.column" : { "workspace.options.grid.column" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:125" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:132" ],
"translations" : { "translations" : {
"en" : "Columns" "en" : "Columns"
} }
}, },
"workspace.options.grid.params.columns" : { "workspace.options.grid.params.columns" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:164" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:171" ],
"translations" : { "translations" : {
"en" : "Columns" "en" : "Columns"
} }
}, },
"workspace.options.grid.params.gutter" : { "workspace.options.grid.params.gutter" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:191" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:202" ],
"translations" : { "translations" : {
"en" : "Gutter" "en" : "Gutter"
} }
}, },
"workspace.options.grid.params.height" : { "workspace.options.grid.params.height" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:184" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:194" ],
"translations" : { "translations" : {
"en" : "Height" "en" : "Height"
} }
}, },
"workspace.options.grid.params.margin" : { "workspace.options.grid.params.margin" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:196" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:207" ],
"translations" : { "translations" : {
"en" : "Margin" "en" : "Margin"
} }
}, },
"workspace.options.grid.params.rows" : { "workspace.options.grid.params.rows" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:156" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:163" ],
"translations" : { "translations" : {
"en" : "Rows" "en" : "Rows"
} }
}, },
"workspace.options.grid.params.set-default" : { "workspace.options.grid.params.set-default" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:208" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:219" ],
"translations" : { "translations" : {
"en" : "Set as default" "en" : "Set as default"
} }
}, },
"workspace.options.grid.params.size" : { "workspace.options.grid.params.size" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:149" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:156" ],
"translations" : { "translations" : {
"en" : "Size" "en" : "Size"
} }
}, },
"workspace.options.grid.params.type" : { "workspace.options.grid.params.type" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:172" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:179" ],
"translations" : { "translations" : {
"en" : "Type" "en" : "Type"
} }
}, },
"workspace.options.grid.params.type.bottom" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:187" ],
"translations" : {
"en" : "Bottom"
}
},
"workspace.options.grid.params.type.center" : { "workspace.options.grid.params.type.center" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:176" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:185" ],
"translations" : { "translations" : {
"en" : "Center" "en" : "Center"
} }
}, },
"workspace.options.grid.params.type.left" : { "workspace.options.grid.params.type.left" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:175" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:184" ],
"translations" : { "translations" : {
"en" : "Left" "en" : "Left"
} }
}, },
"workspace.options.grid.params.type.right" : { "workspace.options.grid.params.type.right" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:177" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:188" ],
"translations" : { "translations" : {
"en" : "Right" "en" : "Right"
} }
}, },
"workspace.options.grid.params.type.stretch" : { "workspace.options.grid.params.type.stretch" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:174" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:181" ],
"translations" : { "translations" : {
"en" : "Stretch" "en" : "Stretch"
} }
}, },
"workspace.options.grid.params.type.top" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:183" ],
"translations" : {
"en" : "Top"
}
},
"workspace.options.grid.params.use-default" : { "workspace.options.grid.params.use-default" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:206" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:217" ],
"translations" : { "translations" : {
"en" : "Use default" "en" : "Use default"
} }
}, },
"workspace.options.grid.params.width" : { "workspace.options.grid.params.width" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:183" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:195" ],
"translations" : { "translations" : {
"en" : "Width" "en" : "Width"
} }
}, },
"workspace.options.grid.row" : { "workspace.options.grid.row" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:126" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:133" ],
"translations" : { "translations" : {
"en" : "Rows" "en" : "Rows"
} }
}, },
"workspace.options.grid.square" : { "workspace.options.grid.square" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:124" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:131" ],
"translations" : { "translations" : {
"en" : "Square" "en" : "Square"
} }
}, },
"workspace.options.grid.title" : { "workspace.options.grid.title" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:220" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs:231" ],
"translations" : { "translations" : {
"en" : "Grid & Layouts" "en" : "Grid & Layouts"
} }
@ -1311,53 +1323,53 @@
} }
}, },
"workspace.options.stroke" : { "workspace.options.stroke" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:111", "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:175" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:90", "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:124" ],
"translations" : { "translations" : {
"en" : "Stroke", "en" : "Stroke",
"fr" : null "fr" : null
} }
}, },
"workspace.options.stroke.center" : { "workspace.options.stroke.center" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:161" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:110" ],
"translations" : { "translations" : {
"en" : "Center" "en" : "Center"
} }
}, },
"workspace.options.stroke.dashed" : { "workspace.options.stroke.dashed" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:169" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:118" ],
"translations" : { "translations" : {
"en" : "Dashed", "en" : "Dashed",
"fr" : "Tiré" "fr" : "Tiré"
} }
}, },
"workspace.options.stroke.dotted" : { "workspace.options.stroke.dotted" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:168" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:117" ],
"translations" : { "translations" : {
"en" : "Dotted", "en" : "Dotted",
"fr" : "Pointillé" "fr" : "Pointillé"
} }
}, },
"workspace.options.stroke.inner" : { "workspace.options.stroke.inner" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:162" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:111" ],
"translations" : { "translations" : {
"en" : "Inside" "en" : "Inside"
} }
}, },
"workspace.options.stroke.mixed" : { "workspace.options.stroke.mixed" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:170" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:119" ],
"translations" : { "translations" : {
"en" : "Mixed", "en" : "Mixed",
"fr" : "Mixte" "fr" : "Mixte"
} }
}, },
"workspace.options.stroke.outer" : { "workspace.options.stroke.outer" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:163" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:112" ],
"translations" : { "translations" : {
"en" : "Outside" "en" : "Outside"
} }
}, },
"workspace.options.stroke.solid" : { "workspace.options.stroke.solid" : {
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:167" ], "used-in" : [ "src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs:116" ],
"translations" : { "translations" : {
"en" : "Solid", "en" : "Solid",
"fr" : "Solide" "fr" : "Solide"

2
frontend/resources/styles/main/layouts/library-page.scss
View file

@ -317,7 +317,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
& .sketch-picker { & .sketch-picker, .chrome-picker {
box-shadow: none !important; box-shadow: none !important;
border: 1px solid $color-gray-10 !important; border: 1px solid $color-gray-10 !important;
border-radius: 0 !important; border-radius: 0 !important;

2
frontend/src/uxbox/main/data/workspace/grid.cljs
View file

@ -21,7 +21,7 @@
(defonce ^:private default-square-params (defonce ^:private default-square-params
{:size 16 {:size 16
:color {:value "#59B9E2" :color {:value "#59B9E2"
:opacity 0.9}}) :opacity 0.2}})
(defonce ^:private default-layout-params (defonce ^:private default-layout-params
{:size 12 {:size 12

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

@ -10,19 +10,23 @@
[uxbox.main.store :as st] [uxbox.main.store :as st]
[goog.object :as gobj] [goog.object :as gobj]
[rumext.alpha :as mf] [rumext.alpha :as mf]
["react-color/lib/components/sketch/Sketch" :as sketch])) [uxbox.util.color :refer [hex->rgb]]
["react-color/lib/components/chrome/Chrome" :as pickerskin]))
(mf/defc colorpicker (mf/defc colorpicker
[{:keys [on-change value colors] :as props}] [{:keys [on-change value opacity colors] :as props}]
(let [local-value (mf/use-state value) (let [hex-value (mf/use-state (or value "#FFFFFF"))
on-change-complete #(do alpha-value (mf/use-state (or opacity 1))
(reset! local-value %) [r g b] (hex->rgb @hex-value)
(on-change (gobj/get % "hex")))] on-change-complete #(let [hex (gobj/get % "hex")
opacity (-> % (gobj/get "rgb") (gobj/get "a"))]
(reset! hex-value hex)
(reset! alpha-value opacity)
(on-change hex opacity))]
[:> sketch/default {:color @local-value [:> pickerskin/default {:color #js { :r r :g g :b b :a @alpha-value}
:disableAlpha true
:presetColors colors :presetColors colors
:onChangeComplete on-change-complete :onChange on-change-complete
:style {:box-shadow "none"}}])) :style {:box-shadow "none"}}]))
(def most-used-colors (def most-used-colors

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

@ -14,11 +14,12 @@
;; --- Color Picker Modal ;; --- Color Picker Modal
(mf/defc colorpicker-modal (mf/defc colorpicker-modal
[{:keys [x y default value page on-change] :as props}] [{:keys [x y default value opacity page on-change] :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)
:colors (into-array @cp/most-used-colors) :colors (into-array @cp/most-used-colors)
:on-change on-change}]]) :on-change on-change}]])

79
frontend/src/uxbox/main/ui/workspace/sidebar/options/fill.cljs
View file

@ -10,15 +10,10 @@
(ns uxbox.main.ui.workspace.sidebar.options.fill (ns uxbox.main.ui.workspace.sidebar.options.fill
(:require (:require
[rumext.alpha :as mf] [rumext.alpha :as mf]
[uxbox.main.ui.icons :as i]
[uxbox.common.data :as d]
[uxbox.main.data.workspace :as udw] [uxbox.main.data.workspace :as udw]
[uxbox.main.store :as st] [uxbox.main.store :as st]
[uxbox.main.ui.modal :as modal] [uxbox.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
[uxbox.main.ui.workspace.colorpicker :refer [colorpicker-modal]]
[uxbox.util.dom :as dom]
[uxbox.util.object :as obj] [uxbox.util.object :as obj]
[uxbox.util.math :as math]
[uxbox.util.i18n :as i18n :refer [tr t]])) [uxbox.util.i18n :as i18n :refer [tr t]]))
(defn- fill-menu-memo-equals? (defn- fill-menu-memo-equals?
@ -36,70 +31,14 @@
{::mf/wrap [#(mf/memo' % fill-menu-memo-equals?)]} {::mf/wrap [#(mf/memo' % fill-menu-memo-equals?)]}
[{:keys [shape] :as props}] [{:keys [shape] :as props}]
(let [locale (i18n/use-locale) (let [locale (i18n/use-locale)
color {:value (:fill-color shape)
on-color-change :opacity (:fill-opacity shape)}
(fn [color] handle-change-color (fn [value opacity]
(st/emit! (udw/update-shape (:id shape) {:fill-color color}))) (let [change {:fill-color value
:fill-opacity opacity}]
on-color-input-change (st/emit! (udw/update-shape (:id shape) change))))]
(fn [event]
(let [input (dom/get-target event)
value (dom/get-value input)]
(when (dom/valid? input)
(on-color-change value))))
on-opacity-change
(fn [event]
(let [value (-> (dom/get-target event)
(dom/get-value)
(d/parse-integer 1)
(/ 100))]
(st/emit! (udw/update-shape (:id shape) {:fill-opacity value}))))
show-color-picker
(fn [event]
(let [x (.-clientX event)
y (.-clientY event)
props {:x x :y y
:on-change on-color-change
:default "#ffffff"
:value (:fill-color shape)
:transparent? true}]
(modal/show! colorpicker-modal props)))]
[:div.element-set [:div.element-set
[:div.element-set-title (t locale "workspace.options.fill")] [:div.element-set-title (t locale "workspace.options.fill")]
[:div.element-set-content [:div.element-set-content
[:& color-row {:value color
[:div.row-flex.color-data :on-change handle-change-color}]]]))
[:span.color-th
{:style {:background-color (:fill-color shape)}
:on-click show-color-picker}]
[:div.color-info
[:input {:default-value (:fill-color shape)
:ref (fn [el]
(when el
(set! (.-value el) (:fill-color shape))))
:pattern "^#(?:[0-9a-fA-F]{3}){1,2}$"
:on-change on-color-input-change}]]
[:div.input-element.percentail
[:input.input-text {:type "number"
:value (str (-> (:fill-opacity shape)
(d/coalesce 1)
(* 100)
(math/round)))
:on-change on-opacity-change
:min "0"
:max "100"}]]
[:input.slidebar {:type "range"
:min "0"
:max "100"
:value (str (-> (:fill-opacity shape)
(d/coalesce 1)
(* 100)
(math/round)))
:step "1"
:on-change on-opacity-change}]]]]))

25
frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs
View file

@ -36,13 +36,14 @@
[:div.advanced-options {} [:div.advanced-options {}
children]])) children]]))
(def ^:private size-options (defn- get-size-options [locale]
[{:value :auto :label (tr "workspace.options.grid.auto")} [{:value :auto :label (t locale "workspace.options.grid.auto")}
:separator :separator
18 12 10 8 6 4 3 2]) 18 12 10 8 6 4 3 2])
(mf/defc grid-options [{:keys [frame grid default-grid-params on-change on-remove on-save-grid]}] (mf/defc grid-options [{:keys [frame grid default-grid-params on-change on-remove on-save-grid]}]
(let [locale (i18n/use-locale) (let [locale (i18n/use-locale)
size-options (get-size-options locale)
state (mf/use-state {:show-advanced-options false state (mf/use-state {:show-advanced-options false
:changes {}}) :changes {}})
{:keys [type display params] :as grid} (d/deep-merge grid (:changes @state)) {:keys [type display params] :as grid} (d/deep-merge grid (:changes @state))
@ -66,7 +67,9 @@
(fn [type] (fn [type]
(let [defaults (type default-grid-params) (let [defaults (type default-grid-params)
keys (keys defaults) keys (keys defaults)
params (->> @state :changes params (select-keys keys) (merge defaults)) current-changes (-> @state :changes :params (select-keys keys))
;; We give more priority to the current changes
params (merge defaults current-changes)
to-merge {:type type :params params}] to-merge {:type type :params params}]
(emit-changes! #(d/deep-merge % to-merge)))) (emit-changes! #(d/deep-merge % to-merge))))
@ -102,6 +105,12 @@
(assoc-in [:params :size] size) (assoc-in [:params :size] size)
(assoc-in [:params :item-length] item-length))))) (assoc-in [:params :item-length] item-length)))))
handle-change-color
(fn [value opacity]
(emit-changes! #(-> %
(assoc-in [:params :color :value] value)
(assoc-in [:params :color :opacity] opacity))))
handle-use-default handle-use-default
(fn [] (fn []
(emit-changes! #(hash-map :params ((:type grid) default-grid-params)))) (emit-changes! #(hash-map :params ((:type grid) default-grid-params))))
@ -172,9 +181,13 @@
[:& input-row {:label (t locale "workspace.options.grid.params.type") [:& input-row {:label (t locale "workspace.options.grid.params.type")
:type :select :type :select
:options [{:value :stretch :label (t locale "workspace.options.grid.params.type.stretch")} :options [{:value :stretch :label (t locale "workspace.options.grid.params.type.stretch")}
{:value :left :label (t locale "workspace.options.grid.params.type.left")} {:value :left :label (if (= type :row)
(t locale "workspace.options.grid.params.type.top")
(t locale "workspace.options.grid.params.type.left"))}
{:value :center :label (t locale "workspace.options.grid.params.type.center")} {:value :center :label (t locale "workspace.options.grid.params.type.center")}
{:value :right :label (t locale "workspace.options.grid.params.type.right")}] {:value :right :label (if (= type :row)
(t locale "workspace.options.grid.params.type.bottom")
(t locale "workspace.options.grid.params.type.right"))}]
:value (:type params) :value (:type params)
:on-change (handle-change :params :type)}]) :on-change (handle-change :params :type)}])
@ -200,7 +213,7 @@
:on-change (handle-change :params :margin)}]]) :on-change (handle-change :params :margin)}]])
[:& color-row {:value (:color params) [:& color-row {:value (:color params)
:on-change (handle-change :params :color)}] :on-change handle-change-color}]
[:div.row-flex [:div.row-flex
[:button.btn-options {:disabled is-default [:button.btn-options {:disabled is-default
:on-click handle-use-default} (t locale "workspace.options.grid.params.use-default")] :on-click handle-use-default} (t locale "workspace.options.grid.params.use-default")]

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

@ -24,41 +24,53 @@
:y y :y y
:on-change handle-change-color :on-change handle-change-color
:value (:value color) :value (:value color)
:opacity (:opacity color)
:transparent? true}] :transparent? true}]
(modal/show! colorpicker-modal props)))) (modal/show! colorpicker-modal props))))
(defn opacity->string [opacity] (defn opacity->string [opacity]
(str (-> opacity (if (and opacity (not= opacity ""))
(d/coalesce 1) (str (-> opacity
(* 100) (d/coalesce 1)
(math/round)))) (* 100)
(math/round)))
""))
(defn string->opacity [opacity-str] (defn string->opacity [opacity-str]
(-> opacity-str (when (and opacity-str (not= "" opacity-str))
(d/parse-integer 1) (-> opacity-str
(/ 100))) (d/parse-integer 1)
(/ 100))))
(mf/defc color-row [{:keys [value on-change]}] (mf/defc color-row [{:keys [value on-change]}]
(let [value (or value {:value "#FFFFFF" :opacity 1}) (let [default-value {:value "#000000" :opacity 1}
state (mf/use-state value)
change-color (fn [color]
(let [update-color (fn [state] (assoc state :value color))]
(swap! state update-color)
(when on-change (on-change (update-color @state)))))
change-opacity (fn [opacity] parse-value (fn [value]
(let [update-opacity (fn [state] (assoc state :opacity opacity))] (-> (merge default-value value)
(swap! state update-opacity) (update :value #(or % "#000000"))
(when on-change (on-change (update-opacity @state))))) (update :opacity #(or % 1))))
handle-pick-color (fn [color] state (mf/use-state (parse-value value))
(change-color color))
change-color (fn [new-value]
(let [{:keys [value opacity]} @state]
(swap! state assoc :value new-value)
(when on-change (on-change new-value opacity))))
change-opacity (fn [new-opacity]
(let [{:keys [value opacity]} @state]
(swap! state assoc :opacity new-opacity)
(when (and new-opacity on-change) (on-change value new-opacity))))
handle-pick-color (fn [color opacity]
(reset! state {:value color :opacity opacity})
(when on-change (on-change color opacity)))
handle-input-color-change (fn [event] handle-input-color-change (fn [event]
(let [target (dom/get-target event) (let [target (dom/get-target event)
value (dom/get-value target)] value (dom/get-value target)]
(when (dom/valid? target) (when (dom/valid? target)
(change-color value)))) (change-color (str "#" value)))))
handle-opacity-change (fn [event] handle-opacity-change (fn [event]
(-> event (-> event
dom/get-target dom/get-target
@ -68,7 +80,7 @@
(mf/use-effect (mf/use-effect
(mf/deps value) (mf/deps value)
#(reset! state value)) #(reset! state (parse-value value)))
[:div.row-flex.color-data [:div.row-flex.color-data
[:span.color-th [:span.color-th
@ -76,8 +88,8 @@
:on-click (color-picker-callback @state handle-pick-color)}] :on-click (color-picker-callback @state handle-pick-color)}]
[:div.color-info [:div.color-info
[:input {:value (-> @state :value) [:input {:value (-> @state :value (subs 1))
:pattern "^#(?:[0-9a-fA-F]{3}){1,2}$" :pattern "^[0-9a-fA-F]{0,6}$"
:on-change handle-input-color-change}]] :on-change handle-input-color-change}]]
[:div.input-element.percentail [:div.input-element.percentail
@ -87,7 +99,7 @@
:min "0" :min "0"
:max "100"}]] :max "100"}]]
[:input.slidebar {:type "range" #_[:input.slidebar {:type "range"
:min "0" :min "0"
:max "100" :max "100"
:value (-> @state :opacity opacity->string) :value (-> @state :opacity opacity->string)

71
frontend/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs
View file

@ -19,7 +19,8 @@
[uxbox.util.dom :as dom] [uxbox.util.dom :as dom]
[uxbox.util.object :as obj] [uxbox.util.object :as obj]
[uxbox.util.i18n :as i18n :refer [tr t]] [uxbox.util.i18n :as i18n :refer [tr t]]
[uxbox.util.math :as math])) [uxbox.util.math :as math]
[uxbox.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]))
(defn- stroke-menu-memo-equals? (defn- stroke-menu-memo-equals?
[np op] [np op]
@ -75,35 +76,13 @@
(fn [event] (fn [event]
(st/emit! (udw/update-shape (:id shape) {:stroke-style :none}))) (st/emit! (udw/update-shape (:id shape) {:stroke-style :none})))
on-stroke-opacity-change current-stroke-color {:value (:stroke-color shape)
(fn [event] :opacity (:stroke-opacity shape)}
(let [value (-> (dom/get-target event)
(dom/get-value)
(d/parse-integer 0)
(/ 100))]
(st/emit! (udw/update-shape (:id shape) {:stroke-opacity value}))))
on-color-change handle-change-stroke-color
(fn [color] (fn [value opacity]
(st/emit! (udw/update-shape (:id shape) {:stroke-color color}))) (st/emit! (udw/update-shape (:id shape) {:stroke-color value
:stroke-opacity opacity})))]
on-color-input-change
(fn [event]
(let [input (dom/get-target event)
value (dom/get-value input)]
(when (dom/valid? input)
(on-color-change value))))
show-color-picker
(fn [event]
(let [x (.-clientX event)
y (.-clientY event)
props {:x x :y y
:default "#ffffff"
:value (:stroke-color shape)
:on-change on-color-change
:transparent? true}]
(modal/show! colorpicker-modal props)))]
(if (not= :none (:stroke-style shape :none)) (if (not= :none (:stroke-style shape :none))
[:div.element-set [:div.element-set
@ -112,39 +91,9 @@
[:div.add-page {:on-click on-del-stroke} i/minus]] [:div.add-page {:on-click on-del-stroke} i/minus]]
[:div.element-set-content [:div.element-set-content
;; Stroke Color ;; Stroke Color
[:div.row-flex.color-data [:& color-row {:value current-stroke-color
[:span.color-th {:style {:background-color (:stroke-color shape)} :on-change handle-change-stroke-color}]
:on-click show-color-picker}]
[:div.color-info
[:input {:default-value (:stroke-color shape)
:ref (fn [el]
(when el
(set! (.-value el) (:stroke-color shape))))
:pattern "^#(?:[0-9a-fA-F]{3}){1,2}$"
:on-change on-color-input-change}]]
[:div.input-element.percentail
[:input.input-text {:placeholder ""
:value (str (-> (:stroke-opacity shape)
(d/coalesce 1)
(* 100)
(math/round)))
:type "number"
:on-change on-stroke-opacity-change
:min "0"
:max "100"}]]
[:input.slidebar {:type "range"
:min "0"
:max "100"
:value (str (-> (:stroke-opacity shape)
(d/coalesce 1)
(* 100)
(math/round)))
:step "1"
:on-change on-stroke-opacity-change}]]
;; Stroke Width, Alignment & Style ;; Stroke Width, Alignment & Style
[:div.row-flex [:div.row-flex

95
frontend/src/uxbox/main/ui/workspace/sidebar/options/text.cljs
View file

@ -18,12 +18,10 @@
[uxbox.main.data.workspace.texts :as dwt] [uxbox.main.data.workspace.texts :as dwt]
[uxbox.main.store :as st] [uxbox.main.store :as st]
[uxbox.main.refs :as refs] [uxbox.main.refs :as refs]
[uxbox.main.ui.modal :as modal]
[uxbox.main.ui.workspace.colorpicker :refer [colorpicker-modal]]
[uxbox.main.ui.workspace.sidebar.options.measures :refer [measures-menu]] [uxbox.main.ui.workspace.sidebar.options.measures :refer [measures-menu]]
[uxbox.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
[uxbox.util.dom :as dom] [uxbox.util.dom :as dom]
[uxbox.main.fonts :as fonts] [uxbox.main.fonts :as fonts]
[uxbox.util.math :as math]
[uxbox.util.i18n :as i18n :refer [tr t]] [uxbox.util.i18n :as i18n :refer [tr t]]
["slate" :refer [Transforms]])) ["slate" :refer [Transforms]]))
@ -186,85 +184,24 @@
(mf/defc text-fill-options (mf/defc text-fill-options
[{:keys [editor shape] :as props}] [{:keys [editor shape] :as props}]
(let [{:keys [fill opacity] (let [text-color (dwt/current-text-values
:or {fill "#000000" {:editor editor
opacity 1}} :shape shape
(dwt/current-text-values :attrs [:fill :opacity]})
{:editor editor
:shape shape
:attrs [:fill :opacity]})
opacity (math/round (* opacity 100)) current-color {:value (:fill text-color)
:opacity (:opacity text-color)}
on-color-change handle-change-color
(fn [color] (fn [value opacity]
(st/emit! (dwt/update-text-attrs (st/emit! (dwt/update-text-attrs {:id (:id shape)
{:id (:id shape) :editor editor
:editor editor :attrs {:fill value
:attrs {:fill color}}))) :opacity opacity}})))]
on-color-input-change [:& color-row {:value current-color
(fn [event] :on-change handle-change-color}]
(let [input (dom/get-target event) ))
value (dom/get-value input)]
(when (dom/valid? input)
(on-color-change value))))
on-opacity-change
(fn [event]
(let [value (-> (dom/get-target event)
(dom/get-value))]
(when (str/numeric? value)
(let [value (-> (d/parse-integer value 1)
(/ 100))]
(st/emit! (dwt/update-text-attrs
{:id (:id shape)
:editor editor
:attrs {:opacity value}}))))))
show-color-picker
(fn [event]
(let [x (.-clientX event)
y (.-clientY event)
props {:x x :y y
:on-change on-color-change
:default "#ffffff"
:value fill
:transparent? true}]
(modal/show! colorpicker-modal props)))]
[:div.row-flex.color-data
[:span.color-th
{:style {:background-color fill}
:on-click show-color-picker
}]
[:div.color-info
[:input {:default-value fill
:pattern "^#(?:[0-9a-fA-F]{3}){1,2}$"
:ref (fn [el]
(when el
(set! (.-value el) fill)))
:on-change on-color-input-change
}]]
[:div.input-element.percentail
[:input.input-text {:type "number"
:ref (fn [el]
(when el
(set! (.-value el) opacity)))
:default-value opacity
:on-change on-opacity-change
:min "0"
:max "100"}]]
[:input.slidebar {:type "range"
:min "0"
:max "100"
:value opacity
:step "1"
:on-change on-opacity-change
}]]))
(mf/defc spacing-options (mf/defc spacing-options
[{:keys [editor shape locale] :as props}] [{:keys [editor shape locale] :as props}]

4
frontend/src/uxbox/util/color.cljs
View file

@ -31,7 +31,9 @@
(defn hex->rgb (defn hex->rgb
[v] [v]
(into [] (gcolor/hexToRgb v))) (try
(into [] (gcolor/hexToRgb v))
(catch js/Object e [0 0 0])))
(defn rgb->hex (defn rgb->hex
[[r g b]] [[r g b]]