mirror of
https://github.com/penpot/penpot.git
synced 2025-08-02 13:08:33 +02:00
Merge pull request #220 from uxbox/408/color_picker_fixes
Color picker fixes
This commit is contained in:
Andrey Antukh
GitHub
commit
0f7b33837c
11 changed files with 168 additions and 299 deletions
|
|
@ -962,7 +962,7 @@
|
|||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Fill",
|
||||
"fr" : "Fond"
|
||||
|
|
@ -976,116 +976,116 @@
|
|||
"unused" : true
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Text",
|
||||
"fr" : "TODO"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Align bottom"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Align center"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Justify"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Align left"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Align middle"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Align right"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Align top"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Decoration"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Letter Spacing"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Line height"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Lowercase"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "None"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Strikethrough"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Case"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Titlecase"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Underline"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Uppercase"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Vertical align"
|
||||
}
|
||||
|
|
@ -1111,109 +1111,121 @@
|
|||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "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" : {
|
||||
"en" : "Columns"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Gutter"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Height"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Margin"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Rows"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Set as default"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Size"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"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" : {
|
||||
"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" : {
|
||||
"en" : "Center"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Left"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Right"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"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" : {
|
||||
"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" : {
|
||||
"en" : "Use default"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Width"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Rows"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Square"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Grid & Layouts"
|
||||
}
|
||||
|
|
@ -1311,53 +1323,53 @@
|
|||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Stroke",
|
||||
"fr" : null
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Center"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Dashed",
|
||||
"fr" : "Tiré"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Dotted",
|
||||
"fr" : "Pointillé"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Inside"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Mixed",
|
||||
"fr" : "Mixte"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Outside"
|
||||
}
|
||||
},
|
||||
"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" : {
|
||||
"en" : "Solid",
|
||||
"fr" : "Solide"
|
||||
|
|
|
|||
|
|
@ -317,7 +317,7 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
& .sketch-picker {
|
||||
& .sketch-picker, .chrome-picker {
|
||||
box-shadow: none !important;
|
||||
border: 1px solid $color-gray-10 !important;
|
||||
border-radius: 0 !important;
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
(defonce ^:private default-square-params
|
||||
{:size 16
|
||||
:color {:value "#59B9E2"
|
||||
:opacity 0.9}})
|
||||
:opacity 0.2}})
|
||||
|
||||
(defonce ^:private default-layout-params
|
||||
{:size 12
|
||||
|
|
|
|||
|
|
@ -10,19 +10,23 @@
|
|||
[uxbox.main.store :as st]
|
||||
[goog.object :as gobj]
|
||||
[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
|
||||
[{:keys [on-change value colors] :as props}]
|
||||
(let [local-value (mf/use-state value)
|
||||
on-change-complete #(do
|
||||
(reset! local-value %)
|
||||
(on-change (gobj/get % "hex")))]
|
||||
[{:keys [on-change value opacity colors] :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)
|
||||
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
|
||||
:disableAlpha true
|
||||
[:> pickerskin/default {:color #js { :r r :g g :b b :a @alpha-value}
|
||||
:presetColors colors
|
||||
:onChangeComplete on-change-complete
|
||||
:onChange on-change-complete
|
||||
:style {:box-shadow "none"}}]))
|
||||
|
||||
(def most-used-colors
|
||||
|
|
|
|||
|
|
@ -14,11 +14,12 @@
|
|||
;; --- Color Picker 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
|
||||
{: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}]])
|
||||
|
||||
|
|
|
|||
|
|
@ -10,15 +10,10 @@
|
|||
(ns uxbox.main.ui.workspace.sidebar.options.fill
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.main.ui.icons :as i]
|
||||
[uxbox.common.data :as d]
|
||||
[uxbox.main.data.workspace :as udw]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.ui.modal :as modal]
|
||||
[uxbox.main.ui.workspace.colorpicker :refer [colorpicker-modal]]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
|
||||
[uxbox.util.object :as obj]
|
||||
[uxbox.util.math :as math]
|
||||
[uxbox.util.i18n :as i18n :refer [tr t]]))
|
||||
|
||||
(defn- fill-menu-memo-equals?
|
||||
|
|
@ -36,70 +31,14 @@
|
|||
{::mf/wrap [#(mf/memo' % fill-menu-memo-equals?)]}
|
||||
[{:keys [shape] :as props}]
|
||||
(let [locale (i18n/use-locale)
|
||||
|
||||
on-color-change
|
||||
(fn [color]
|
||||
(st/emit! (udw/update-shape (:id shape) {:fill-color color})))
|
||||
|
||||
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))))
|
||||
|
||||
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)))]
|
||||
|
||||
color {:value (:fill-color shape)
|
||||
:opacity (:fill-opacity shape)}
|
||||
handle-change-color (fn [value opacity]
|
||||
(let [change {:fill-color value
|
||||
:fill-opacity opacity}]
|
||||
(st/emit! (udw/update-shape (:id shape) change))))]
|
||||
[:div.element-set
|
||||
[:div.element-set-title (t locale "workspace.options.fill")]
|
||||
[:div.element-set-content
|
||||
|
||||
[:div.row-flex.color-data
|
||||
[: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}]]]]))
|
||||
[:& color-row {:value color
|
||||
:on-change handle-change-color}]]]))
|
||||
|
|
|
|||
|
|
@ -36,13 +36,14 @@
|
|||
[:div.advanced-options {}
|
||||
children]]))
|
||||
|
||||
(def ^:private size-options
|
||||
[{:value :auto :label (tr "workspace.options.grid.auto")}
|
||||
(defn- get-size-options [locale]
|
||||
[{:value :auto :label (t locale "workspace.options.grid.auto")}
|
||||
:separator
|
||||
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]}]
|
||||
(let [locale (i18n/use-locale)
|
||||
size-options (get-size-options locale)
|
||||
state (mf/use-state {:show-advanced-options false
|
||||
:changes {}})
|
||||
{:keys [type display params] :as grid} (d/deep-merge grid (:changes @state))
|
||||
|
|
@ -66,7 +67,9 @@
|
|||
(fn [type]
|
||||
(let [defaults (type default-grid-params)
|
||||
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}]
|
||||
(emit-changes! #(d/deep-merge % to-merge))))
|
||||
|
||||
|
|
@ -102,6 +105,12 @@
|
|||
(assoc-in [:params :size] size)
|
||||
(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
|
||||
(fn []
|
||||
(emit-changes! #(hash-map :params ((:type grid) default-grid-params))))
|
||||
|
|
@ -172,9 +181,13 @@
|
|||
[:& input-row {:label (t locale "workspace.options.grid.params.type")
|
||||
:type :select
|
||||
: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 :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)
|
||||
:on-change (handle-change :params :type)}])
|
||||
|
||||
|
|
@ -200,7 +213,7 @@
|
|||
:on-change (handle-change :params :margin)}]])
|
||||
|
||||
[:& color-row {:value (:color params)
|
||||
:on-change (handle-change :params :color)}]
|
||||
:on-change handle-change-color}]
|
||||
[:div.row-flex
|
||||
[:button.btn-options {:disabled is-default
|
||||
:on-click handle-use-default} (t locale "workspace.options.grid.params.use-default")]
|
||||
|
|
|
|||
|
|
@ -24,41 +24,53 @@
|
|||
:y y
|
||||
:on-change handle-change-color
|
||||
:value (:value color)
|
||||
:opacity (:opacity color)
|
||||
:transparent? true}]
|
||||
(modal/show! colorpicker-modal props))))
|
||||
|
||||
(defn opacity->string [opacity]
|
||||
(str (-> opacity
|
||||
(d/coalesce 1)
|
||||
(* 100)
|
||||
(math/round))))
|
||||
(if (and opacity (not= opacity ""))
|
||||
(str (-> opacity
|
||||
(d/coalesce 1)
|
||||
(* 100)
|
||||
(math/round)))
|
||||
""))
|
||||
|
||||
(defn string->opacity [opacity-str]
|
||||
(-> opacity-str
|
||||
(d/parse-integer 1)
|
||||
(/ 100)))
|
||||
(when (and opacity-str (not= "" opacity-str))
|
||||
(-> opacity-str
|
||||
(d/parse-integer 1)
|
||||
(/ 100))))
|
||||
|
||||
(mf/defc color-row [{:keys [value on-change]}]
|
||||
(let [value (or value {:value "#FFFFFF" :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)))))
|
||||
(let [default-value {:value "#000000" :opacity 1}
|
||||
|
||||
change-opacity (fn [opacity]
|
||||
(let [update-opacity (fn [state] (assoc state :opacity opacity))]
|
||||
(swap! state update-opacity)
|
||||
(when on-change (on-change (update-opacity @state)))))
|
||||
parse-value (fn [value]
|
||||
(-> (merge default-value value)
|
||||
(update :value #(or % "#000000"))
|
||||
(update :opacity #(or % 1))))
|
||||
|
||||
handle-pick-color (fn [color]
|
||||
(change-color color))
|
||||
state (mf/use-state (parse-value value))
|
||||
|
||||
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]
|
||||
(let [target (dom/get-target event)
|
||||
value (dom/get-value target)]
|
||||
(when (dom/valid? target)
|
||||
(change-color value))))
|
||||
(change-color (str "#" value)))))
|
||||
handle-opacity-change (fn [event]
|
||||
(-> event
|
||||
dom/get-target
|
||||
|
|
@ -68,7 +80,7 @@
|
|||
|
||||
(mf/use-effect
|
||||
(mf/deps value)
|
||||
#(reset! state value))
|
||||
#(reset! state (parse-value value)))
|
||||
|
||||
[:div.row-flex.color-data
|
||||
[:span.color-th
|
||||
|
|
@ -76,8 +88,8 @@
|
|||
:on-click (color-picker-callback @state handle-pick-color)}]
|
||||
|
||||
[:div.color-info
|
||||
[:input {:value (-> @state :value)
|
||||
:pattern "^#(?:[0-9a-fA-F]{3}){1,2}$"
|
||||
[:input {:value (-> @state :value (subs 1))
|
||||
:pattern "^[0-9a-fA-F]{0,6}$"
|
||||
:on-change handle-input-color-change}]]
|
||||
|
||||
[:div.input-element.percentail
|
||||
|
|
@ -87,7 +99,7 @@
|
|||
:min "0"
|
||||
:max "100"}]]
|
||||
|
||||
[:input.slidebar {:type "range"
|
||||
#_[:input.slidebar {:type "range"
|
||||
:min "0"
|
||||
:max "100"
|
||||
:value (-> @state :opacity opacity->string)
|
||||
|
|
|
|||
|
|
@ -19,7 +19,8 @@
|
|||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.object :as obj]
|
||||
[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?
|
||||
[np op]
|
||||
|
|
@ -75,35 +76,13 @@
|
|||
(fn [event]
|
||||
(st/emit! (udw/update-shape (:id shape) {:stroke-style :none})))
|
||||
|
||||
on-stroke-opacity-change
|
||||
(fn [event]
|
||||
(let [value (-> (dom/get-target event)
|
||||
(dom/get-value)
|
||||
(d/parse-integer 0)
|
||||
(/ 100))]
|
||||
(st/emit! (udw/update-shape (:id shape) {:stroke-opacity value}))))
|
||||
current-stroke-color {:value (:stroke-color shape)
|
||||
:opacity (:stroke-opacity shape)}
|
||||
|
||||
on-color-change
|
||||
(fn [color]
|
||||
(st/emit! (udw/update-shape (:id shape) {:stroke-color color})))
|
||||
|
||||
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)))]
|
||||
handle-change-stroke-color
|
||||
(fn [value opacity]
|
||||
(st/emit! (udw/update-shape (:id shape) {:stroke-color value
|
||||
:stroke-opacity opacity})))]
|
||||
|
||||
(if (not= :none (:stroke-style shape :none))
|
||||
[:div.element-set
|
||||
|
|
@ -112,39 +91,9 @@
|
|||
[:div.add-page {:on-click on-del-stroke} i/minus]]
|
||||
|
||||
[:div.element-set-content
|
||||
|
||||
;; Stroke Color
|
||||
[:div.row-flex.color-data
|
||||
[:span.color-th {:style {:background-color (:stroke-color shape)}
|
||||
: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}]]
|
||||
[:& color-row {:value current-stroke-color
|
||||
:on-change handle-change-stroke-color}]
|
||||
|
||||
;; Stroke Width, Alignment & Style
|
||||
[:div.row-flex
|
||||
|
|
|
|||
|
|
@ -18,12 +18,10 @@
|
|||
[uxbox.main.data.workspace.texts :as dwt]
|
||||
[uxbox.main.store :as st]
|
||||
[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.rows.color-row :refer [color-row]]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.main.fonts :as fonts]
|
||||
[uxbox.util.math :as math]
|
||||
[uxbox.util.i18n :as i18n :refer [tr t]]
|
||||
["slate" :refer [Transforms]]))
|
||||
|
||||
|
|
@ -186,85 +184,24 @@
|
|||
|
||||
(mf/defc text-fill-options
|
||||
[{:keys [editor shape] :as props}]
|
||||
(let [{:keys [fill opacity]
|
||||
:or {fill "#000000"
|
||||
opacity 1}}
|
||||
(dwt/current-text-values
|
||||
{:editor editor
|
||||
:shape shape
|
||||
:attrs [:fill :opacity]})
|
||||
(let [text-color (dwt/current-text-values
|
||||
{: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
|
||||
(fn [color]
|
||||
(st/emit! (dwt/update-text-attrs
|
||||
{:id (:id shape)
|
||||
:editor editor
|
||||
:attrs {:fill color}})))
|
||||
handle-change-color
|
||||
(fn [value opacity]
|
||||
(st/emit! (dwt/update-text-attrs {:id (:id shape)
|
||||
:editor editor
|
||||
:attrs {:fill value
|
||||
: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))))
|
||||
|
||||
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
|
||||
}]]))
|
||||
[:& color-row {:value current-color
|
||||
:on-change handle-change-color}]
|
||||
))
|
||||
|
||||
(mf/defc spacing-options
|
||||
[{:keys [editor shape locale] :as props}]
|
||||
|
|
|
|||
|
|
@ -31,7 +31,9 @@
|
|||
|
||||
(defn hex->rgb
|
||||
[v]
|
||||
(into [] (gcolor/hexToRgb v)))
|
||||
(try
|
||||
(into [] (gcolor/hexToRgb v))
|
||||
(catch js/Object e [0 0 0])))
|
||||
|
||||
(defn rgb->hex
|
||||
[[r g b]]
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue