mirror of
https://github.com/penpot/penpot.git
synced 2025-07-05 21:17:20 +02:00
♻️ Refactor shape options sidebar.
This commit is contained in:
parent
8b7d613b99
commit
54f6e7cc9e
11 changed files with 378 additions and 268 deletions
|
@ -330,8 +330,9 @@ ul.slider-dots {
|
||||||
// Input elements
|
// Input elements
|
||||||
.input-element {
|
.input-element {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-shrink: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 75px;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
color: $color-gray-20;
|
color: $color-gray-20;
|
||||||
|
@ -756,7 +757,8 @@ input[type=checkbox]:checked + label{
|
||||||
input[type=range] {
|
input[type=range] {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
margin: 10px 0;
|
margin: 10px 0 10px 3px;
|
||||||
|
max-width: 70px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
input[type=range]:focus {
|
input[type=range]:focus {
|
||||||
|
@ -764,7 +766,7 @@ input[type=range]:focus {
|
||||||
}
|
}
|
||||||
input[type=range]::-webkit-slider-runnable-track {
|
input[type=range]::-webkit-slider-runnable-track {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 8px;
|
height: 6px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
animate: 0.2s;
|
animate: 0.2s;
|
||||||
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
||||||
|
@ -775,13 +777,13 @@ input[type=range]::-webkit-slider-runnable-track {
|
||||||
input[type=range]::-webkit-slider-thumb {
|
input[type=range]::-webkit-slider-thumb {
|
||||||
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
||||||
border: 0px solid #000000;
|
border: 0px solid #000000;
|
||||||
height: 24px;
|
height: 18px;
|
||||||
width: 8px;
|
width: 6px;
|
||||||
border-radius: 7px;
|
border-radius: 7px;
|
||||||
background: $color-gray-20;
|
background: $color-gray-20;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
margin-top: -8px;
|
margin-top: -6px;
|
||||||
}
|
}
|
||||||
input[type=range]:focus::-webkit-slider-runnable-track {
|
input[type=range]:focus::-webkit-slider-runnable-track {
|
||||||
background: $color-gray-60;
|
background: $color-gray-60;
|
||||||
|
|
|
@ -154,16 +154,18 @@
|
||||||
|
|
||||||
.color-info {
|
.color-info {
|
||||||
input {
|
input {
|
||||||
border: 1px solid $color-gray-40;
|
background-color: $color-gray-50;
|
||||||
|
border: 1px solid $color-gray-30;
|
||||||
border-radius: $br-small;
|
border-radius: $br-small;
|
||||||
color: $color-gray-10;
|
color: $color-gray-20;
|
||||||
margin: 3px 0 0 $x-small;
|
height: 25px;
|
||||||
|
margin: 5px 0 0 0;
|
||||||
padding: 0 $x-small;
|
padding: 0 $x-small;
|
||||||
width: 58px;
|
width: 58px;
|
||||||
font-size: $fs13;
|
font-size: $fs13;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: $color-gray-10;
|
color: $color-white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -214,9 +214,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
.element-set-subtitle {
|
||||||
color: $color-gray-10;
|
color: $color-gray-10;
|
||||||
font-size: $fs12;
|
font-size: $fs12;
|
||||||
|
width: 12rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lock-size {
|
.lock-size {
|
||||||
|
@ -255,6 +256,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-select {
|
.custom-select {
|
||||||
|
cursor: pointer;
|
||||||
border: 1px solid $color-gray-40;
|
border: 1px solid $color-gray-40;
|
||||||
padding: $x-small $big $x-small $x-small;
|
padding: $x-small $big $x-small $x-small;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -271,6 +273,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: $fs13;
|
||||||
|
}
|
||||||
|
|
||||||
.custom-select-dropdown {
|
.custom-select-dropdown {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
@ -343,12 +349,12 @@
|
||||||
|
|
||||||
.color-th {
|
.color-th {
|
||||||
background-color: $color-gray-lighter;
|
background-color: $color-gray-lighter;
|
||||||
border: 1px solid $color-gray-40;
|
border: 1px solid $color-gray-10;
|
||||||
border-radius: $br-small;
|
border-radius: $br-small;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
margin: 5px 4px 0 4px;
|
margin: 5px 4px 0 0;
|
||||||
width: 25px;
|
width: 25px;
|
||||||
|
|
||||||
&.palette-th {
|
&.palette-th {
|
||||||
|
@ -436,10 +442,11 @@
|
||||||
margin-left: $small;
|
margin-left: $small;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
|
cursor: pointer;
|
||||||
|
height: 20px;
|
||||||
stroke: $color-gray-40;
|
stroke: $color-gray-40;
|
||||||
stroke-width: 30px;
|
stroke-width: 30px;
|
||||||
height: 25px;
|
width: 20px;
|
||||||
width: 25px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
|
@ -2,8 +2,10 @@
|
||||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||||
;;
|
;;
|
||||||
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
;; This Source Code Form is "Incompatible With Secondary Licenses", as
|
||||||
;; Copyright (c) 2015-2019 Andrey Antukh <niwi@niwi.nz>
|
;; defined by the Mozilla Public License, v. 2.0.
|
||||||
|
;;
|
||||||
|
;; Copyright (c) 2020 UXBOX Labs SL
|
||||||
|
|
||||||
(ns uxbox.main.ui.workspace.sidebar.options.circle
|
(ns uxbox.main.ui.workspace.sidebar.options.circle
|
||||||
(:require
|
(:require
|
||||||
|
@ -17,12 +19,14 @@
|
||||||
[uxbox.main.ui.workspace.sidebar.options.stroke :refer [stroke-menu]]
|
[uxbox.main.ui.workspace.sidebar.options.stroke :refer [stroke-menu]]
|
||||||
[uxbox.util.dom :as dom]
|
[uxbox.util.dom :as dom]
|
||||||
[uxbox.util.geom.point :as gpt]
|
[uxbox.util.geom.point :as gpt]
|
||||||
[uxbox.util.i18n :refer [tr]]
|
[uxbox.util.i18n :as i18n :refer [tr t]]
|
||||||
[uxbox.util.math :as math :refer (precision-or-0)]))
|
[uxbox.util.math :as math]))
|
||||||
|
|
||||||
(mf/defc measures-menu
|
(mf/defc measures-menu
|
||||||
[{:keys [shape] :as props}]
|
[{:keys [shape] :as props}]
|
||||||
(let [on-size-change
|
(let [locale (i18n/use-locale)
|
||||||
|
|
||||||
|
on-size-change
|
||||||
(fn [event attr]
|
(fn [event attr]
|
||||||
(let [value (-> (dom/get-target event)
|
(let [value (-> (dom/get-target event)
|
||||||
(dom/get-value)
|
(dom/get-value)
|
||||||
|
@ -40,7 +44,7 @@
|
||||||
(fn [event attr]
|
(fn [event attr]
|
||||||
(let [value (-> (dom/get-target event)
|
(let [value (-> (dom/get-target event)
|
||||||
(dom/get-value)
|
(dom/get-value)
|
||||||
(d/parse-integer))]
|
(d/parse-integer 0))]
|
||||||
(st/emit! (udw/update-position (:id shape) {attr value}))))
|
(st/emit! (udw/update-position (:id shape) {attr value}))))
|
||||||
|
|
||||||
on-pos-cx-change #(on-position-change % :x)
|
on-pos-cx-change #(on-position-change % :x)
|
||||||
|
@ -57,71 +61,83 @@
|
||||||
(fn [event]
|
(fn [event]
|
||||||
(let [value (-> (dom/get-target event)
|
(let [value (-> (dom/get-target event)
|
||||||
(dom/get-value)
|
(dom/get-value)
|
||||||
(d/parse-double 0))]
|
(d/parse-integer 0))]
|
||||||
(st/emit! (udw/update-shape (:id shape) {:rx value :ry value}))))]
|
(st/emit! (udw/update-shape (:id shape) {:rx value :ry value}))))]
|
||||||
|
|
||||||
[:div.element-set
|
[:div.element-set
|
||||||
[:div.element-set-title (tr "workspace.options.measures")]
|
|
||||||
[:div.element-set-content
|
[:div.element-set-content
|
||||||
|
|
||||||
;; SIZE
|
;; SIZE
|
||||||
[:span (tr "workspace.options.size")]
|
|
||||||
[:div.row-flex
|
[:div.row-flex
|
||||||
[:div.input-element.pixels
|
[:span.element-set-subtitle (t locale "workspace.options.size")]
|
||||||
[:input.input-text {:type "number"
|
|
||||||
:min "0"
|
|
||||||
:on-change on-size-rx-change
|
|
||||||
:value (-> (:rx shape)
|
|
||||||
(math/precision 2)
|
|
||||||
(d/coalesce-str "0"))}]]
|
|
||||||
[:div.lock-size {:class (when (:proportion-lock shape) "selected")
|
[:div.lock-size {:class (when (:proportion-lock shape) "selected")
|
||||||
:on-click on-proportion-lock-change}
|
:on-click on-proportion-lock-change}
|
||||||
(if (:proportion-lock shape)
|
(if (:proportion-lock shape)
|
||||||
i/lock
|
i/lock
|
||||||
i/unlock)]
|
i/unlock)]
|
||||||
|
[:div.input-element.pixels
|
||||||
|
[:input.input-text {:type "number"
|
||||||
|
:min "0"
|
||||||
|
:on-change on-size-rx-change
|
||||||
|
:value (str (-> (:rx shape)
|
||||||
|
(d/coalesce 0)
|
||||||
|
(math/round)))}]]
|
||||||
[:div.input-element.pixels
|
[:div.input-element.pixels
|
||||||
[:input.input-text {:type "number"
|
[:input.input-text {:type "number"
|
||||||
:min "0"
|
:min "0"
|
||||||
:on-change on-size-ry-change
|
:on-change on-size-ry-change
|
||||||
:value (-> (:ry shape)
|
:value (str (-> (:ry shape)
|
||||||
(math/precision 2)
|
(d/coalesce 0)
|
||||||
(d/coalesce-str "0"))}]]]
|
(math/round)))}]]]
|
||||||
|
|
||||||
;; POSITION
|
;; POSITION
|
||||||
[:span (tr "workspace.options.position")]
|
|
||||||
[:div.row-flex
|
[:div.row-flex
|
||||||
|
[:span.element-set-subtitle (t locale "workspace.options.position")]
|
||||||
[:div.input-element.pixels
|
[:div.input-element.pixels
|
||||||
[:input.input-text {:type "number"
|
[:input.input-text {:type "number"
|
||||||
:on-change on-pos-cx-change
|
:on-change on-pos-cx-change
|
||||||
:value (-> (:cx shape)
|
:value (str (-> (:cx shape)
|
||||||
(math/precision 2)
|
(d/coalesce 0)
|
||||||
(d/coalesce-str "0"))}]]
|
(math/round)))}]]
|
||||||
[:div.input-element.pixels
|
[:div.input-element.pixels
|
||||||
[:input.input-text {:type "number"
|
[:input.input-text {:type "number"
|
||||||
:on-change on-pos-cy-change
|
:on-change on-pos-cy-change
|
||||||
:value (-> (:cy shape)
|
:value (str (-> (:cy shape)
|
||||||
(math/precision 2)
|
(d/coalesce 0)
|
||||||
(d/coalesce-str "0"))}]]]
|
(math/round)))}]]]
|
||||||
;; ROTATION & RADIUS
|
|
||||||
[:span (tr "workspace.options.rotation-radius")]
|
|
||||||
[:div.row-flex
|
|
||||||
[:div.input-element.degrees
|
|
||||||
[:input.input-text {:placeholder ""
|
|
||||||
:type "number"
|
|
||||||
:min 0
|
|
||||||
:max 360
|
|
||||||
:on-change on-rotation-change
|
|
||||||
:value (-> (:rotation shape)
|
|
||||||
(math/precision 2)
|
|
||||||
(d/coalesce-str "0"))}]]
|
|
||||||
|
|
||||||
|
[:div.row-flex
|
||||||
|
[:span.element-set-subtitle (t locale "workspace.options.rotation")]
|
||||||
|
[:div.input-element.degrees
|
||||||
|
[:input.input-text
|
||||||
|
{:type "number"
|
||||||
|
:min "0"
|
||||||
|
:max "360"
|
||||||
|
:on-change on-rotation-change
|
||||||
|
:value (str (-> (:rotation shape)
|
||||||
|
(d/coalesce 0)
|
||||||
|
(math/round)))}]]
|
||||||
|
|
||||||
|
[:input.slidebar
|
||||||
|
{:type "range"
|
||||||
|
:min "0"
|
||||||
|
:max "360"
|
||||||
|
:on-change on-rotation-change
|
||||||
|
:value (str (-> (:rotation shape)
|
||||||
|
(d/coalesce 0)
|
||||||
|
(math/round)))
|
||||||
|
:step "1"}]]
|
||||||
|
|
||||||
|
[:div.row-flex
|
||||||
|
[:span.element-set-subtitle (t locale "workspace.options.radius")]
|
||||||
[:div.input-element.pixels
|
[:div.input-element.pixels
|
||||||
[:input.input-text {:type "number"
|
[:input.input-text
|
||||||
|
{:type "number"
|
||||||
:on-change on-radius-change
|
:on-change on-radius-change
|
||||||
:value (-> (:rx shape)
|
:value (str (-> (:rx shape)
|
||||||
(math/precision 2)
|
(d/coalesce 0)
|
||||||
(d/coalesce-str "0"))}]]]]]))
|
(math/round)))}]]
|
||||||
|
[:div.input-element]]]]))
|
||||||
|
|
||||||
(mf/defc options
|
(mf/defc options
|
||||||
[{:keys [shape] :as props}]
|
[{:keys [shape] :as props}]
|
||||||
|
|
|
@ -2,8 +2,10 @@
|
||||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||||
;;
|
;;
|
||||||
;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
;; This Source Code Form is "Incompatible With Secondary Licenses", as
|
||||||
;; Copyright (c) 2015-2019 Andrey Antukh <niwi@niwi.nz>
|
;; defined by the Mozilla Public License, v. 2.0.
|
||||||
|
;;
|
||||||
|
;; Copyright (c) 2020 UXBOX Labs SL
|
||||||
|
|
||||||
(ns uxbox.main.ui.workspace.sidebar.options.fill
|
(ns uxbox.main.ui.workspace.sidebar.options.fill
|
||||||
(:require
|
(:require
|
||||||
|
@ -15,52 +17,66 @@
|
||||||
[uxbox.main.ui.modal :as modal]
|
[uxbox.main.ui.modal :as modal]
|
||||||
[uxbox.main.ui.workspace.colorpicker :refer [colorpicker-modal]]
|
[uxbox.main.ui.workspace.colorpicker :refer [colorpicker-modal]]
|
||||||
[uxbox.util.dom :as dom]
|
[uxbox.util.dom :as dom]
|
||||||
[uxbox.util.i18n :refer [tr]]))
|
[uxbox.util.math :as math]
|
||||||
|
[uxbox.util.i18n :as i18n :refer [tr t]]))
|
||||||
|
|
||||||
(mf/defc fill-menu
|
(mf/defc fill-menu
|
||||||
[{:keys [shape] :as props}]
|
[{:keys [shape] :as props}]
|
||||||
(letfn [(update-shape! [attr value]
|
(let [locale (i18n/use-locale)
|
||||||
(st/emit! (udw/update-shape (:id shape) {attr value})))
|
|
||||||
(on-color-change [event]
|
on-color-change
|
||||||
(let [value (-> (dom/get-target event)
|
(fn [color]
|
||||||
(dom/get-value))]
|
(st/emit! (udw/update-shape (:id shape) {:fill-color color})))
|
||||||
(update-shape! :fill-color value)))
|
|
||||||
(on-opacity-change [event]
|
on-opacity-change
|
||||||
|
(fn [event]
|
||||||
(let [value (-> (dom/get-target event)
|
(let [value (-> (dom/get-target event)
|
||||||
(dom/get-value)
|
(dom/get-value)
|
||||||
(d/parse-double 1)
|
(d/parse-integer 1)
|
||||||
(/ 10000))]
|
(/ 100))]
|
||||||
(update-shape! :fill-opacity value)))
|
(st/emit! (udw/update-shape (:id shape) {:fill-opacity value}))))
|
||||||
(show-color-picker [event]
|
|
||||||
|
show-color-picker
|
||||||
|
(fn [event]
|
||||||
(let [x (.-clientX event)
|
(let [x (.-clientX event)
|
||||||
y (.-clientY event)
|
y (.-clientY event)
|
||||||
props {:x x :y y
|
props {:x x :y y
|
||||||
:on-change #(update-shape! :fill-color %)
|
:on-change on-color-change
|
||||||
:default "#ffffff"
|
:default "#ffffff"
|
||||||
:value (:fill-color shape)
|
:value (:fill-color shape)
|
||||||
:transparent? true}]
|
:transparent? true}]
|
||||||
(modal/show! colorpicker-modal props)))]
|
(modal/show! colorpicker-modal props)))]
|
||||||
|
|
||||||
[:div.element-set
|
[:div.element-set
|
||||||
[:div.element-set-title (tr "element.fill")]
|
[:div.element-set-title (t locale "workspace.options.fill")]
|
||||||
[:div.element-set-content
|
[:div.element-set-content
|
||||||
|
|
||||||
[:span (tr "workspace.options.color")]
|
|
||||||
[:div.row-flex.color-data
|
[:div.row-flex.color-data
|
||||||
[:span.color-th
|
[:span.color-th
|
||||||
{:style {:background-color (:fill-color shape "#000000")}
|
{:style {:background-color (:fill-color shape)}
|
||||||
:on-click show-color-picker}]
|
:on-click show-color-picker}]
|
||||||
[:div.color-info
|
|
||||||
[:input
|
|
||||||
{:on-change on-color-change
|
|
||||||
:value (:fill-color shape "")}]]]
|
|
||||||
|
|
||||||
;; SLIDEBAR FOR ROTATION AND OPACITY
|
[:div.color-info
|
||||||
[:span (tr "workspace.options.opacity")]
|
[:input {:read-only true
|
||||||
[:div.row-flex
|
:key (:fill-color shape)
|
||||||
[:input.slidebar
|
:default-value (:fill-color shape)}]]
|
||||||
{:type "range"
|
|
||||||
|
[: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"
|
:min "0"
|
||||||
:max "10000"
|
:max "100"}]]
|
||||||
:value (str (* 10000 (:fill-opacity shape 1)))
|
|
||||||
|
[:input.slidebar {:type "range"
|
||||||
|
:min "0"
|
||||||
|
:max "100"
|
||||||
|
:value (str (-> (:fill-opacity shape)
|
||||||
|
(d/coalesce 1)
|
||||||
|
(* 100)
|
||||||
|
(math/round)))
|
||||||
:step "1"
|
:step "1"
|
||||||
:on-change on-opacity-change}]]]]))
|
:on-change on-opacity-change}]]]]))
|
||||||
|
|
|
@ -73,7 +73,6 @@
|
||||||
on-pos-y-change #(on-position-change % :y)]
|
on-pos-y-change #(on-position-change % :y)]
|
||||||
|
|
||||||
[:div.element-set
|
[:div.element-set
|
||||||
[:div.element-set-title (tr "workspace.options.measures")]
|
|
||||||
|
|
||||||
[:div.element-set-content
|
[:div.element-set-content
|
||||||
|
|
||||||
|
@ -96,10 +95,15 @@
|
||||||
[:span.orientation-icon {on-click #(on-orientation-clicked :horiz)} i/size-horiz]
|
[:span.orientation-icon {on-click #(on-orientation-clicked :horiz)} i/size-horiz]
|
||||||
]
|
]
|
||||||
|
|
||||||
[:span (tr "workspace.options.size")]
|
|
||||||
|
|
||||||
;; WIDTH & HEIGHT
|
;; WIDTH & HEIGHT
|
||||||
[:div.row-flex
|
[:div.row-flex
|
||||||
|
[:span.element-set-subtitle (tr "workspace.options.size")]
|
||||||
|
[:div.lock-size {:class (when (:proportion-lock shape) "selected")
|
||||||
|
:on-click on-proportion-lock-change}
|
||||||
|
(if (:proportion-lock shape)
|
||||||
|
i/lock
|
||||||
|
i/unlock)]
|
||||||
[:div.input-element.pixels
|
[:div.input-element.pixels
|
||||||
[:input.input-text {:type "number"
|
[:input.input-text {:type "number"
|
||||||
:min "0"
|
:min "0"
|
||||||
|
@ -108,11 +112,6 @@
|
||||||
(math/precision 2)
|
(math/precision 2)
|
||||||
(d/coalesce-str "0"))}]]
|
(d/coalesce-str "0"))}]]
|
||||||
|
|
||||||
[:div.lock-size {:class (when (:proportion-lock shape) "selected")
|
|
||||||
:on-click on-proportion-lock-change}
|
|
||||||
(if (:proportion-lock shape)
|
|
||||||
i/lock
|
|
||||||
i/unlock)]
|
|
||||||
|
|
||||||
[:div.input-element.pixels
|
[:div.input-element.pixels
|
||||||
[:input.input-text {:type "number"
|
[:input.input-text {:type "number"
|
||||||
|
@ -123,8 +122,8 @@
|
||||||
(d/coalesce-str "0"))}]]]
|
(d/coalesce-str "0"))}]]]
|
||||||
|
|
||||||
;; POSITION
|
;; POSITION
|
||||||
[:span (tr "workspace.options.position")]
|
|
||||||
[:div.row-flex
|
[:div.row-flex
|
||||||
|
[:span.element-set-subtitle (tr "workspace.options.position")]
|
||||||
[:div.input-element.pixels
|
[:div.input-element.pixels
|
||||||
[:input.input-text {:placeholder "x"
|
[:input.input-text {:placeholder "x"
|
||||||
:type "number"
|
:type "number"
|
||||||
|
|
|
@ -20,12 +20,14 @@
|
||||||
[uxbox.main.ui.workspace.sidebar.options.stroke :refer [stroke-menu]]
|
[uxbox.main.ui.workspace.sidebar.options.stroke :refer [stroke-menu]]
|
||||||
[uxbox.util.dom :as dom]
|
[uxbox.util.dom :as dom]
|
||||||
[uxbox.util.geom.point :as gpt]
|
[uxbox.util.geom.point :as gpt]
|
||||||
[uxbox.util.i18n :refer [tr]]
|
[uxbox.util.i18n :as i18n :refer [tr t]]
|
||||||
[uxbox.util.math :as math]))
|
[uxbox.util.math :as math]))
|
||||||
|
|
||||||
(mf/defc measures-menu
|
(mf/defc measures-menu
|
||||||
[{:keys [shape] :as props}]
|
[{:keys [shape] :as props}]
|
||||||
(let [on-size-change
|
(let [locale (i18n/use-locale)
|
||||||
|
|
||||||
|
on-size-change
|
||||||
(fn [event attr]
|
(fn [event attr]
|
||||||
(let [value (-> (dom/get-target event)
|
(let [value (-> (dom/get-target event)
|
||||||
(dom/get-value)
|
(dom/get-value)
|
||||||
|
@ -40,7 +42,7 @@
|
||||||
(fn [event attr]
|
(fn [event attr]
|
||||||
(let [value (-> (dom/get-target event)
|
(let [value (-> (dom/get-target event)
|
||||||
(dom/get-value)
|
(dom/get-value)
|
||||||
(d/parse-integer))]
|
(d/parse-integer 0))]
|
||||||
(st/emit! (udw/update-position (:id shape) {attr value}))))
|
(st/emit! (udw/update-position (:id shape) {attr value}))))
|
||||||
|
|
||||||
on-rotation-change
|
on-rotation-change
|
||||||
|
@ -54,7 +56,7 @@
|
||||||
(fn [event]
|
(fn [event]
|
||||||
(let [value (-> (dom/get-target event)
|
(let [value (-> (dom/get-target event)
|
||||||
(dom/get-value)
|
(dom/get-value)
|
||||||
(d/parse-double 0))]
|
(d/parse-integer 0))]
|
||||||
(st/emit! (udw/update-shape (:id shape) {:rx value :ry value}))))
|
(st/emit! (udw/update-shape (:id shape) {:rx value :ry value}))))
|
||||||
|
|
||||||
on-width-change #(on-size-change % :width)
|
on-width-change #(on-size-change % :width)
|
||||||
|
@ -63,72 +65,89 @@
|
||||||
on-pos-y-change #(on-position-change % :y)]
|
on-pos-y-change #(on-position-change % :y)]
|
||||||
|
|
||||||
[:div.element-set
|
[:div.element-set
|
||||||
[:div.element-set-title (tr "workspace.options.measures")]
|
|
||||||
[:div.element-set-content
|
[:div.element-set-content
|
||||||
[:span (tr "workspace.options.size")]
|
|
||||||
|
|
||||||
;; WIDTH & HEIGHT
|
;; WIDTH & HEIGHT
|
||||||
[:div.row-flex
|
[:div.row-flex
|
||||||
[:div.input-element.pixels
|
[:span.element-set-subtitle (t locale "workspace.options.size")]
|
||||||
[:input.input-text {:type "number"
|
|
||||||
:min "0"
|
|
||||||
:on-change on-width-change
|
|
||||||
:value (-> (:width shape)
|
|
||||||
(math/precision 2)
|
|
||||||
(d/coalesce-str "0"))}]]
|
|
||||||
|
|
||||||
[:div.lock-size {:class (when (:proportion-lock shape) "selected")
|
[:div.lock-size {:class (when (:proportion-lock shape) "selected")
|
||||||
:on-click on-proportion-lock-change}
|
:on-click on-proportion-lock-change}
|
||||||
(if (:proportion-lock shape)
|
(if (:proportion-lock shape)
|
||||||
i/lock
|
i/lock
|
||||||
i/unlock)]
|
i/unlock)]
|
||||||
|
[:div.input-element.pixels
|
||||||
|
[:input.input-text {:type "number"
|
||||||
|
:min "0"
|
||||||
|
:no-validate true
|
||||||
|
:on-change on-width-change
|
||||||
|
:value (str (-> (:width shape)
|
||||||
|
(d/coalesce 0)
|
||||||
|
(math/round)))}]]
|
||||||
|
|
||||||
|
|
||||||
[:div.input-element.pixels
|
[:div.input-element.pixels
|
||||||
[:input.input-text {:type "number"
|
[:input.input-text {:type "number"
|
||||||
:min "0"
|
:min "0"
|
||||||
|
:no-validate true
|
||||||
:on-change on-height-change
|
:on-change on-height-change
|
||||||
:value (-> (:height shape)
|
:value (str (-> (:height shape)
|
||||||
(math/precision 2)
|
(d/coalesce 0)
|
||||||
(d/coalesce-str "0"))}]]]
|
(math/round)))}]]]
|
||||||
|
|
||||||
;; POSITION
|
;; POSITION
|
||||||
[:span (tr "workspace.options.position")]
|
|
||||||
[:div.row-flex
|
[:div.row-flex
|
||||||
|
[:span.element-set-subtitle (t locale "workspace.options.position")]
|
||||||
[:div.input-element.pixels
|
[:div.input-element.pixels
|
||||||
[:input.input-text {:placeholder "x"
|
[:input.input-text {:placeholder "x"
|
||||||
:type "number"
|
:type "number"
|
||||||
|
:no-validate true
|
||||||
:on-change on-pos-x-change
|
:on-change on-pos-x-change
|
||||||
:value (-> (:x shape)
|
:value (str (-> (:x shape)
|
||||||
(math/precision 2)
|
(d/coalesce 0)
|
||||||
(d/coalesce-str "0"))}]]
|
(math/round)))}]]
|
||||||
[:div.input-element.pixels
|
[:div.input-element.pixels
|
||||||
[:input.input-text {:placeholder "y"
|
[:input.input-text {:placeholder "y"
|
||||||
:type "number"
|
:type "number"
|
||||||
|
:no-validate true
|
||||||
:on-change on-pos-y-change
|
:on-change on-pos-y-change
|
||||||
:value (-> (:y shape)
|
:value (str (-> (:y shape)
|
||||||
(math/precision 2)
|
(d/coalesce 0)
|
||||||
(d/coalesce-str "0"))}]]]
|
(math/round)))}]]]
|
||||||
|
|
||||||
[:span (tr "workspace.options.rotation-radius")]
|
|
||||||
[:div.row-flex
|
[:div.row-flex
|
||||||
|
[:span.element-set-subtitle (t locale "workspace.options.rotation")]
|
||||||
[:div.input-element.degrees
|
[:div.input-element.degrees
|
||||||
[:input.input-text {:placeholder ""
|
[:input.input-text
|
||||||
|
{:placeholder ""
|
||||||
:type "number"
|
:type "number"
|
||||||
:min 0
|
:no-validate true
|
||||||
:max 360
|
:min "0"
|
||||||
|
:max "360"
|
||||||
:on-change on-rotation-change
|
:on-change on-rotation-change
|
||||||
:value (-> (:rotation shape 0)
|
:value (str (-> (:rotation shape)
|
||||||
(math/precision 2)
|
(d/coalesce 0)
|
||||||
(d/coalesce-str "0"))}]]
|
(math/round)))}]]
|
||||||
|
[:input.slidebar
|
||||||
|
{:type "range"
|
||||||
|
:min "0"
|
||||||
|
:max "360"
|
||||||
|
:step "1"
|
||||||
|
:no-validate true
|
||||||
|
:on-change on-rotation-change
|
||||||
|
:value (str (-> (:rotation shape)
|
||||||
|
(d/coalesce 0)))}]]
|
||||||
|
|
||||||
|
[:div.row-flex
|
||||||
|
[:span.element-set-subtitle (t locale "workspace.options.radius")]
|
||||||
[:div.input-element.pixels
|
[:div.input-element.pixels
|
||||||
[:input.input-text
|
[:input.input-text
|
||||||
{:placeholder "rx"
|
{:placeholder "rx"
|
||||||
:type "number"
|
:type "number"
|
||||||
:on-change on-radius-change
|
:on-change on-radius-change
|
||||||
:value (-> (:rx shape)
|
:value (str (-> (:rx shape)
|
||||||
(math/precision 2)
|
(d/coalesce 0)
|
||||||
(d/coalesce-str "0"))}]]]]]))
|
(math/round)))}]]
|
||||||
|
[:div.input-element]]]]))
|
||||||
|
|
||||||
|
|
||||||
(mf/defc options
|
(mf/defc options
|
||||||
|
|
|
@ -15,12 +15,15 @@
|
||||||
[uxbox.main.store :as st]
|
[uxbox.main.store :as st]
|
||||||
[uxbox.util.dom :as dom]
|
[uxbox.util.dom :as dom]
|
||||||
[uxbox.util.geom.point :as gpt]
|
[uxbox.util.geom.point :as gpt]
|
||||||
[uxbox.util.i18n :refer [tr]]
|
[uxbox.util.i18n :as i18n :refer [t]]
|
||||||
[uxbox.util.math :as math]))
|
[uxbox.util.math :as math]))
|
||||||
|
|
||||||
|
|
||||||
(mf/defc measures-menu
|
(mf/defc measures-menu
|
||||||
[{:keys [shape] :as props}]
|
[{:keys [shape] :as props}]
|
||||||
(let [on-size-change
|
(let [locale (i18n/use-locale)
|
||||||
|
|
||||||
|
on-size-change
|
||||||
(fn [event attr]
|
(fn [event attr]
|
||||||
(let [value (-> (dom/get-target event)
|
(let [value (-> (dom/get-target event)
|
||||||
(dom/get-value)
|
(dom/get-value)
|
||||||
|
@ -35,9 +38,8 @@
|
||||||
(fn [event attr]
|
(fn [event attr]
|
||||||
(let [value (-> (dom/get-target event)
|
(let [value (-> (dom/get-target event)
|
||||||
(dom/get-value)
|
(dom/get-value)
|
||||||
(d/parse-integer))
|
(d/parse-integer 0))]
|
||||||
point (gpt/point {attr value})]
|
(st/emit! (udw/update-position (:id shape) {attr value}))))
|
||||||
(st/emit! (udw/update-position (:id shape) point))))
|
|
||||||
|
|
||||||
on-rotation-change
|
on-rotation-change
|
||||||
(fn [event]
|
(fn [event]
|
||||||
|
@ -50,7 +52,7 @@
|
||||||
(fn [event]
|
(fn [event]
|
||||||
(let [value (-> (dom/get-target event)
|
(let [value (-> (dom/get-target event)
|
||||||
(dom/get-value)
|
(dom/get-value)
|
||||||
(d/parse-double 0))]
|
(d/parse-integer 0))]
|
||||||
(st/emit! (udw/update-shape (:id shape) {:rx value :ry value}))))
|
(st/emit! (udw/update-shape (:id shape) {:rx value :ry value}))))
|
||||||
|
|
||||||
on-width-change #(on-size-change % :width)
|
on-width-change #(on-size-change % :width)
|
||||||
|
@ -59,72 +61,89 @@
|
||||||
on-pos-y-change #(on-position-change % :y)]
|
on-pos-y-change #(on-position-change % :y)]
|
||||||
|
|
||||||
[:div.element-set
|
[:div.element-set
|
||||||
[:div.element-set-title (tr "workspace.options.measures")]
|
|
||||||
[:div.element-set-content
|
[:div.element-set-content
|
||||||
[:span (tr "workspace.options.size")]
|
|
||||||
|
|
||||||
;; WIDTH & HEIGHT
|
;; WIDTH & HEIGHT
|
||||||
[:div.row-flex
|
[:div.row-flex
|
||||||
[:div.input-element.pixels
|
[:span.element-set-subtitle (t locale "workspace.options.size")]
|
||||||
[:input.input-text {:type "number"
|
|
||||||
:min "0"
|
|
||||||
:on-change on-width-change
|
|
||||||
:value (-> (:width shape)
|
|
||||||
(math/precision 2)
|
|
||||||
(d/coalesce-str "0"))}]]
|
|
||||||
|
|
||||||
[:div.lock-size {:class (when (:proportion-lock shape) "selected")
|
[:div.lock-size {:class (when (:proportion-lock shape) "selected")
|
||||||
:on-click on-proportion-lock-change}
|
:on-click on-proportion-lock-change}
|
||||||
(if (:proportion-lock shape)
|
(if (:proportion-lock shape)
|
||||||
i/lock
|
i/lock
|
||||||
i/unlock)]
|
i/unlock)]
|
||||||
|
[:div.input-element.pixels
|
||||||
|
[:input.input-text {:type "number"
|
||||||
|
:min "0"
|
||||||
|
:no-validate true
|
||||||
|
:on-change on-width-change
|
||||||
|
:value (str (-> (:width shape)
|
||||||
|
(d/coalesce 0)
|
||||||
|
(math/round)))}]]
|
||||||
|
|
||||||
|
|
||||||
[:div.input-element.pixels
|
[:div.input-element.pixels
|
||||||
[:input.input-text {:type "number"
|
[:input.input-text {:type "number"
|
||||||
:min "0"
|
:min "0"
|
||||||
|
:no-validate true
|
||||||
:on-change on-height-change
|
:on-change on-height-change
|
||||||
:value (-> (:height shape)
|
:value (str (-> (:height shape)
|
||||||
(math/precision 2)
|
(d/coalesce 0)
|
||||||
(d/coalesce-str "0"))}]]]
|
(math/round)))}]]]
|
||||||
|
|
||||||
;; POSITION
|
;; POSITION
|
||||||
[:span (tr "workspace.options.position")]
|
|
||||||
[:div.row-flex
|
[:div.row-flex
|
||||||
|
[:span.element-set-subtitle (t locale "workspace.options.position")]
|
||||||
[:div.input-element.pixels
|
[:div.input-element.pixels
|
||||||
[:input.input-text {:placeholder "x"
|
[:input.input-text {:placeholder "x"
|
||||||
:type "number"
|
:type "number"
|
||||||
|
:no-validate true
|
||||||
:on-change on-pos-x-change
|
:on-change on-pos-x-change
|
||||||
:value (-> (:x shape)
|
:value (str (-> (:x shape)
|
||||||
(math/precision 2)
|
(d/coalesce 0)
|
||||||
(d/coalesce-str "0"))}]]
|
(math/round)))}]]
|
||||||
[:div.input-element.pixels
|
[:div.input-element.pixels
|
||||||
[:input.input-text {:placeholder "y"
|
[:input.input-text {:placeholder "y"
|
||||||
:type "number"
|
:type "number"
|
||||||
|
:no-validate true
|
||||||
:on-change on-pos-y-change
|
:on-change on-pos-y-change
|
||||||
:value (-> (:y shape)
|
:value (str (-> (:y shape)
|
||||||
(math/precision 2)
|
(d/coalesce 0)
|
||||||
(d/coalesce-str "0"))}]]]
|
(math/round)))}]]]
|
||||||
|
|
||||||
[:span (tr "workspace.options.rotation-radius")]
|
|
||||||
[:div.row-flex
|
[:div.row-flex
|
||||||
|
[:span.element-set-subtitle (t locale "workspace.options.rotation")]
|
||||||
[:div.input-element.degrees
|
[:div.input-element.degrees
|
||||||
[:input.input-text {:placeholder ""
|
[:input.input-text
|
||||||
|
{:placeholder ""
|
||||||
:type "number"
|
:type "number"
|
||||||
:min 0
|
:no-validate true
|
||||||
:max 360
|
:min "0"
|
||||||
|
:max "360"
|
||||||
:on-change on-rotation-change
|
:on-change on-rotation-change
|
||||||
:value (-> (:rotation shape 0)
|
:value (str (-> (:rotation shape)
|
||||||
(math/precision 2)
|
(d/coalesce 0)
|
||||||
(d/coalesce-str "0"))}]]
|
(math/round)))}]]
|
||||||
|
[:input.slidebar
|
||||||
|
{:type "range"
|
||||||
|
:min "0"
|
||||||
|
:max "360"
|
||||||
|
:step "1"
|
||||||
|
:no-validate true
|
||||||
|
:on-change on-rotation-change
|
||||||
|
:value (str (-> (:rotation shape)
|
||||||
|
(d/coalesce 0)))}]]
|
||||||
|
|
||||||
|
[:div.row-flex
|
||||||
|
[:span.element-set-subtitle (t locale "workspace.options.radius")]
|
||||||
[:div.input-element.pixels
|
[:div.input-element.pixels
|
||||||
[:input.input-text
|
[:input.input-text
|
||||||
{:placeholder "rx"
|
{:placeholder "rx"
|
||||||
:type "number"
|
:type "number"
|
||||||
:on-change on-radius-change
|
:on-change on-radius-change
|
||||||
:value (-> (:rx shape)
|
:value (str (-> (:rx shape)
|
||||||
(math/precision 2)
|
(d/coalesce 0)
|
||||||
(d/coalesce-str "0"))}]]]]]))
|
(math/round)))}]]
|
||||||
|
[:div.input-element]]]]))
|
||||||
|
|
||||||
|
|
||||||
(mf/defc options
|
(mf/defc options
|
||||||
|
|
|
@ -111,8 +111,8 @@
|
||||||
[:div.element-set
|
[:div.element-set
|
||||||
[:div.element-set-title (tr "workspace.options.grid-options")]
|
[:div.element-set-title (tr "workspace.options.grid-options")]
|
||||||
[:div.element-set-content
|
[:div.element-set-content
|
||||||
[:span (tr "workspace.options.size")]
|
|
||||||
[:div.row-flex
|
[:div.row-flex
|
||||||
|
[:span.element-set-subtitle (tr "workspace.options.size")]
|
||||||
[:div.input-element.pixels
|
[:div.input-element.pixels
|
||||||
[:input.input-text {:type "number"
|
[:input.input-text {:type "number"
|
||||||
:value (:grid-x options)
|
:value (:grid-x options)
|
||||||
|
@ -121,8 +121,8 @@
|
||||||
[:input.input-text {:type "number"
|
[:input.input-text {:type "number"
|
||||||
:value (:grid-y options)
|
:value (:grid-y options)
|
||||||
:on-change on-y-change}]]]
|
:on-change on-y-change}]]]
|
||||||
[:span (tr "workspace.options.color")]
|
|
||||||
[:div.row-flex.color-data
|
[:div.row-flex.color-data
|
||||||
|
[:span.element-set-subtitle (tr "workspace.options.color")]
|
||||||
[:span.color-th {:style {:background-color (:grid-color options)}
|
[:span.color-th {:style {:background-color (:grid-color options)}
|
||||||
:on-click show-color-picker}]
|
:on-click show-color-picker}]
|
||||||
[:div.color-info
|
[:div.color-info
|
||||||
|
|
|
@ -5,8 +5,7 @@
|
||||||
;; This Source Code Form is "Incompatible With Secondary Licenses", as
|
;; This Source Code Form is "Incompatible With Secondary Licenses", as
|
||||||
;; defined by the Mozilla Public License, v. 2.0.
|
;; defined by the Mozilla Public License, v. 2.0.
|
||||||
;;
|
;;
|
||||||
;; Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
|
;; Copyright (c) 2020 UXBOX Labs SL
|
||||||
;; Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
|
||||||
|
|
||||||
(ns uxbox.main.ui.workspace.sidebar.options.rect
|
(ns uxbox.main.ui.workspace.sidebar.options.rect
|
||||||
(:require
|
(:require
|
||||||
|
@ -20,12 +19,14 @@
|
||||||
[uxbox.main.ui.workspace.sidebar.options.stroke :refer [stroke-menu]]
|
[uxbox.main.ui.workspace.sidebar.options.stroke :refer [stroke-menu]]
|
||||||
[uxbox.util.dom :as dom]
|
[uxbox.util.dom :as dom]
|
||||||
[uxbox.util.geom.point :as gpt]
|
[uxbox.util.geom.point :as gpt]
|
||||||
[uxbox.util.i18n :refer [tr]]
|
[uxbox.util.i18n :as i18n :refer [tr t]]
|
||||||
[uxbox.util.math :as math]))
|
[uxbox.util.math :as math]))
|
||||||
|
|
||||||
(mf/defc measures-menu
|
(mf/defc measures-menu
|
||||||
[{:keys [shape] :as props}]
|
[{:keys [shape] :as props}]
|
||||||
(let [on-size-change
|
(let [locale (i18n/use-locale)
|
||||||
|
|
||||||
|
on-size-change
|
||||||
(fn [event attr]
|
(fn [event attr]
|
||||||
(let [value (-> (dom/get-target event)
|
(let [value (-> (dom/get-target event)
|
||||||
(dom/get-value)
|
(dom/get-value)
|
||||||
|
@ -40,7 +41,7 @@
|
||||||
(fn [event attr]
|
(fn [event attr]
|
||||||
(let [value (-> (dom/get-target event)
|
(let [value (-> (dom/get-target event)
|
||||||
(dom/get-value)
|
(dom/get-value)
|
||||||
(d/parse-integer))]
|
(d/parse-integer 0))]
|
||||||
(st/emit! (udw/update-position (:id shape) {attr value}))))
|
(st/emit! (udw/update-position (:id shape) {attr value}))))
|
||||||
|
|
||||||
on-rotation-change
|
on-rotation-change
|
||||||
|
@ -54,7 +55,7 @@
|
||||||
(fn [event]
|
(fn [event]
|
||||||
(let [value (-> (dom/get-target event)
|
(let [value (-> (dom/get-target event)
|
||||||
(dom/get-value)
|
(dom/get-value)
|
||||||
(d/parse-double 0))]
|
(d/parse-integer 0))]
|
||||||
(st/emit! (udw/update-shape (:id shape) {:rx value :ry value}))))
|
(st/emit! (udw/update-shape (:id shape) {:rx value :ry value}))))
|
||||||
|
|
||||||
on-width-change #(on-size-change % :width)
|
on-width-change #(on-size-change % :width)
|
||||||
|
@ -63,72 +64,89 @@
|
||||||
on-pos-y-change #(on-position-change % :y)]
|
on-pos-y-change #(on-position-change % :y)]
|
||||||
|
|
||||||
[:div.element-set
|
[:div.element-set
|
||||||
[:div.element-set-title (tr "workspace.options.measures")]
|
|
||||||
[:div.element-set-content
|
[:div.element-set-content
|
||||||
[:span (tr "workspace.options.size")]
|
|
||||||
|
|
||||||
;; WIDTH & HEIGHT
|
;; WIDTH & HEIGHT
|
||||||
[:div.row-flex
|
[:div.row-flex
|
||||||
[:div.input-element.pixels
|
[:span.element-set-subtitle (t locale "workspace.options.size")]
|
||||||
[:input.input-text {:type "number"
|
|
||||||
:min "0"
|
|
||||||
:on-change on-width-change
|
|
||||||
:value (-> (:width shape)
|
|
||||||
(math/precision 2)
|
|
||||||
(d/coalesce-str "0"))}]]
|
|
||||||
|
|
||||||
[:div.lock-size {:class (when (:proportion-lock shape) "selected")
|
[:div.lock-size {:class (when (:proportion-lock shape) "selected")
|
||||||
:on-click on-proportion-lock-change}
|
:on-click on-proportion-lock-change}
|
||||||
(if (:proportion-lock shape)
|
(if (:proportion-lock shape)
|
||||||
i/lock
|
i/lock
|
||||||
i/unlock)]
|
i/unlock)]
|
||||||
|
[:div.input-element.pixels
|
||||||
|
[:input.input-text {:type "number"
|
||||||
|
:min "0"
|
||||||
|
:no-validate true
|
||||||
|
:on-change on-width-change
|
||||||
|
:value (str (-> (:width shape)
|
||||||
|
(d/coalesce 0)
|
||||||
|
(math/round)))}]]
|
||||||
|
|
||||||
|
|
||||||
[:div.input-element.pixels
|
[:div.input-element.pixels
|
||||||
[:input.input-text {:type "number"
|
[:input.input-text {:type "number"
|
||||||
:min "0"
|
:min "0"
|
||||||
|
:no-validate true
|
||||||
:on-change on-height-change
|
:on-change on-height-change
|
||||||
:value (-> (:height shape)
|
:value (str (-> (:height shape)
|
||||||
(math/precision 2)
|
(d/coalesce 0)
|
||||||
(d/coalesce-str "0"))}]]]
|
(math/round)))}]]]
|
||||||
|
|
||||||
;; POSITION
|
;; POSITION
|
||||||
[:span (tr "workspace.options.position")]
|
|
||||||
[:div.row-flex
|
[:div.row-flex
|
||||||
|
[:span.element-set-subtitle (t locale "workspace.options.position")]
|
||||||
[:div.input-element.pixels
|
[:div.input-element.pixels
|
||||||
[:input.input-text {:placeholder "x"
|
[:input.input-text {:placeholder "x"
|
||||||
:type "number"
|
:type "number"
|
||||||
|
:no-validate true
|
||||||
:on-change on-pos-x-change
|
:on-change on-pos-x-change
|
||||||
:value (-> (:x shape)
|
:value (str (-> (:x shape)
|
||||||
(math/precision 2)
|
(d/coalesce 0)
|
||||||
(d/coalesce-str "0"))}]]
|
(math/round)))}]]
|
||||||
[:div.input-element.pixels
|
[:div.input-element.pixels
|
||||||
[:input.input-text {:placeholder "y"
|
[:input.input-text {:placeholder "y"
|
||||||
:type "number"
|
:type "number"
|
||||||
|
:no-validate true
|
||||||
:on-change on-pos-y-change
|
:on-change on-pos-y-change
|
||||||
:value (-> (:y shape)
|
:value (str (-> (:y shape)
|
||||||
(math/precision 2)
|
(d/coalesce 0)
|
||||||
(d/coalesce-str "0"))}]]]
|
(math/round)))}]]]
|
||||||
|
|
||||||
[:span (tr "workspace.options.rotation-radius")]
|
|
||||||
[:div.row-flex
|
[:div.row-flex
|
||||||
|
[:span.element-set-subtitle (t locale "workspace.options.rotation")]
|
||||||
[:div.input-element.degrees
|
[:div.input-element.degrees
|
||||||
[:input.input-text {:placeholder ""
|
[:input.input-text
|
||||||
|
{:placeholder ""
|
||||||
:type "number"
|
:type "number"
|
||||||
:min 0
|
:no-validate true
|
||||||
:max 360
|
:min "0"
|
||||||
|
:max "360"
|
||||||
:on-change on-rotation-change
|
:on-change on-rotation-change
|
||||||
:value (-> (:rotation shape 0)
|
:value (str (-> (:rotation shape)
|
||||||
(math/precision 2)
|
(d/coalesce 0)
|
||||||
(d/coalesce-str "0"))}]]
|
(math/round)))}]]
|
||||||
|
[:input.slidebar
|
||||||
|
{:type "range"
|
||||||
|
:min "0"
|
||||||
|
:max "360"
|
||||||
|
:step "1"
|
||||||
|
:no-validate true
|
||||||
|
:on-change on-rotation-change
|
||||||
|
:value (str (-> (:rotation shape)
|
||||||
|
(d/coalesce 0)))}]]
|
||||||
|
|
||||||
|
[:div.row-flex
|
||||||
|
[:span.element-set-subtitle (t locale "workspace.options.radius")]
|
||||||
[:div.input-element.pixels
|
[:div.input-element.pixels
|
||||||
[:input.input-text
|
[:input.input-text
|
||||||
{:placeholder "rx"
|
{:placeholder "rx"
|
||||||
:type "number"
|
:type "number"
|
||||||
:on-change on-radius-change
|
:on-change on-radius-change
|
||||||
:value (-> (:rx shape)
|
:value (str (-> (:rx shape)
|
||||||
(math/precision 2)
|
(d/coalesce 0)
|
||||||
(d/coalesce-str "0"))}]]]]]))
|
(math/round)))}]]
|
||||||
|
[:div.input-element]]]]))
|
||||||
|
|
||||||
|
|
||||||
(mf/defc options
|
(mf/defc options
|
||||||
|
|
|
@ -2,8 +2,10 @@
|
||||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||||
;;
|
;;
|
||||||
;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
;; This Source Code Form is "Incompatible With Secondary Licenses", as
|
||||||
;; Copyright (c) 2015-2019 Andrey Antukh <niwi@niwi.nz>
|
;; defined by the Mozilla Public License, v. 2.0.
|
||||||
|
;;
|
||||||
|
;; Copyright (c) 2020 UXBOX Labs SL
|
||||||
|
|
||||||
(ns uxbox.main.ui.workspace.sidebar.options.stroke
|
(ns uxbox.main.ui.workspace.sidebar.options.stroke
|
||||||
(:require
|
(:require
|
||||||
|
@ -14,14 +16,14 @@
|
||||||
[uxbox.main.store :as st]
|
[uxbox.main.store :as st]
|
||||||
[uxbox.main.ui.modal :as modal]
|
[uxbox.main.ui.modal :as modal]
|
||||||
[uxbox.main.ui.workspace.colorpicker :refer [colorpicker-modal]]
|
[uxbox.main.ui.workspace.colorpicker :refer [colorpicker-modal]]
|
||||||
[uxbox.util.data :refer [parse-int parse-float read-string]]
|
|
||||||
[uxbox.util.dom :as dom]
|
[uxbox.util.dom :as dom]
|
||||||
[uxbox.util.i18n :refer [tr]]
|
[uxbox.util.i18n :as i18n :refer [tr t]]
|
||||||
[uxbox.util.math :as math]))
|
[uxbox.util.math :as math]))
|
||||||
|
|
||||||
(mf/defc stroke-menu
|
(mf/defc stroke-menu
|
||||||
[{:keys [shape] :as props}]
|
[{:keys [shape] :as props}]
|
||||||
(let [show-options (not= (:stroke-style shape) :none)
|
(let [locale (i18n/use-locale)
|
||||||
|
show-options (not= (:stroke-style shape) :none)
|
||||||
|
|
||||||
on-stroke-style-change
|
on-stroke-style-change
|
||||||
(fn [event]
|
(fn [event]
|
||||||
|
@ -34,15 +36,15 @@
|
||||||
(fn [event]
|
(fn [event]
|
||||||
(let [value (-> (dom/get-target event)
|
(let [value (-> (dom/get-target event)
|
||||||
(dom/get-value)
|
(dom/get-value)
|
||||||
(d/parse-double 1))]
|
(d/parse-integer 0))]
|
||||||
(st/emit! (udw/update-shape (:id shape) {:stroke-width value}))))
|
(st/emit! (udw/update-shape (:id shape) {:stroke-width value}))))
|
||||||
|
|
||||||
on-stroke-opacity-change
|
on-stroke-opacity-change
|
||||||
(fn [event]
|
(fn [event]
|
||||||
(let [value (-> (dom/get-target event)
|
(let [value (-> (dom/get-target event)
|
||||||
(dom/get-value)
|
(dom/get-value)
|
||||||
(d/parse-double 1)
|
(d/parse-integer 0)
|
||||||
(/ 10000))]
|
(/ 100))]
|
||||||
(st/emit! (udw/update-shape (:id shape) {:stroke-opacity value}))))
|
(st/emit! (udw/update-shape (:id shape) {:stroke-opacity value}))))
|
||||||
|
|
||||||
show-color-picker
|
show-color-picker
|
||||||
|
@ -56,50 +58,60 @@
|
||||||
:transparent? true}]
|
:transparent? true}]
|
||||||
(modal/show! colorpicker-modal props)))]
|
(modal/show! colorpicker-modal props)))]
|
||||||
|
|
||||||
|
;; COLLAPSED
|
||||||
|
;; [:div.element-set
|
||||||
|
;; [:div.element-set-title (tr "workspace.options.stroke")]
|
||||||
|
;; [:div.add-page i/close]]
|
||||||
|
|
||||||
|
;; EXPANDED
|
||||||
[:div.element-set
|
[:div.element-set
|
||||||
[:div.element-set-title (tr "workspace.options.stroke")]
|
[:div.element-set-title (t locale "workspace.options.stroke")]
|
||||||
[:div.element-set-content
|
[:div.element-set-content
|
||||||
|
|
||||||
;; Stroke Style & Width
|
|
||||||
[:span (tr "workspace.options.stroke.style")]
|
|
||||||
[:div.row-flex
|
|
||||||
[:select#style.input-select {:value (pr-str (:stroke-style shape))
|
|
||||||
:on-change on-stroke-style-change}
|
|
||||||
[:option {:value ":none"} (tr "workspace.options.stroke.none")]
|
|
||||||
[:option {:value ":solid"} (tr "workspace.options.stroke.solid")]
|
|
||||||
[:option {:value ":dotted"} (tr "workspace.options.stroke.dotted")]
|
|
||||||
[:option {:value ":dashed"} (tr "workspace.options.stroke.dashed")]
|
|
||||||
[:option {:value ":mixed"} (tr "workspace.options.stroke.mixed")]]
|
|
||||||
|
|
||||||
[:div.input-element {:class (when show-options "pixels")}
|
|
||||||
(when show-options
|
|
||||||
[:input.input-text {:type "number"
|
|
||||||
:min "0"
|
|
||||||
:value (-> (:stroke-width shape)
|
|
||||||
(math/precision 2)
|
|
||||||
(d/coalesce-str "1"))
|
|
||||||
:on-change on-stroke-width-change}])]]
|
|
||||||
|
|
||||||
;; Stroke Color
|
;; Stroke Color
|
||||||
(when show-options
|
|
||||||
[:*
|
|
||||||
[:span (tr "workspace.options.color")]
|
|
||||||
|
|
||||||
[:div.row-flex.color-data
|
[:div.row-flex.color-data
|
||||||
[:span.color-th {:style {:background-color (:stroke-color shape)}
|
[:span.color-th {:style {:background-color (:stroke-color shape)}
|
||||||
:on-click show-color-picker}]
|
:on-click show-color-picker}]
|
||||||
[:div.color-info
|
[:div.color-info
|
||||||
[:input {:read-only true
|
[:input {:read-only true
|
||||||
:default-value (:stroke-color shape "")}]]]
|
:key (:stroke-color shape)
|
||||||
|
:default-value (:stroke-color shape)}]]
|
||||||
|
|
||||||
[:span (tr "workspace.options.opacity")]
|
[: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"}]]
|
||||||
|
|
||||||
[:div.row-flex
|
|
||||||
[:input.slidebar {:type "range"
|
[:input.slidebar {:type "range"
|
||||||
:min "0"
|
:min "0"
|
||||||
:max "10000"
|
:max "100"
|
||||||
:value (-> (:stroke-opacity shape 1)
|
:value (str (-> (:stroke-opacity shape)
|
||||||
(* 10000)
|
(d/coalesce 1)
|
||||||
(d/coalesce-str "1"))
|
(* 100)
|
||||||
|
(math/round)))
|
||||||
:step "1"
|
:step "1"
|
||||||
:on-change on-stroke-opacity-change}]]])]]))
|
:on-change on-stroke-opacity-change}]]
|
||||||
|
|
||||||
|
;; Stroke Style & Width
|
||||||
|
[:div.row-flex
|
||||||
|
[:select#style.input-select {:value (pr-str (:stroke-style shape))
|
||||||
|
:on-change on-stroke-style-change}
|
||||||
|
[:option {:value ":none"} (t locale "workspace.options.stroke.none")]
|
||||||
|
[:option {:value ":solid"} (t locale "workspace.options.stroke.solid")]
|
||||||
|
[:option {:value ":dotted"} (t locale "workspace.options.stroke.dotted")]
|
||||||
|
[:option {:value ":dashed"} (t locale "workspace.options.stroke.dashed")]
|
||||||
|
[:option {:value ":mixed"} (t locale "workspace.options.stroke.mixed")]]
|
||||||
|
|
||||||
|
[:div.input-element.pixels
|
||||||
|
[:input.input-text {:type "number"
|
||||||
|
:min "0"
|
||||||
|
:value (str (-> (:stroke-width shape)
|
||||||
|
(d/coalesce 1)
|
||||||
|
(math/round)))
|
||||||
|
:on-change on-stroke-width-change}]]]]]))
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue