mirror of
https://github.com/penpot/penpot.git
synced 2025-05-08 04:15:53 +02:00
♻️ Refactor all shapes to use the measures component.
This commit is contained in:
Andrey Antukh
parent
344a7cbebe
commit
6731fa1e5e
9 changed files with 78 additions and 591 deletions
|
|
@ -103,7 +103,6 @@
|
|||
:on-change (fm/on-input-change form :theme)}
|
||||
[:option {:value "light"} "Default"]]
|
||||
|
||||
|
||||
[:input.btn-primary
|
||||
{:type "submit"
|
||||
:class (when-not (:valid form) "btn-disabled")
|
||||
|
|
|
|||
|
|
@ -10,138 +10,14 @@
|
|||
(ns uxbox.main.ui.workspace.sidebar.options.circle
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.common.data :as d]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.main.data.workspace :as udw]
|
||||
[uxbox.main.geom :as geom]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.ui.workspace.sidebar.options.fill :refer [fill-menu]]
|
||||
[uxbox.main.ui.workspace.sidebar.options.stroke :refer [stroke-menu]]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[uxbox.util.i18n :as i18n :refer [tr t]]
|
||||
[uxbox.util.math :as math]))
|
||||
|
||||
(mf/defc measures-menu
|
||||
[{:keys [shape] :as props}]
|
||||
(let [locale (i18n/use-locale)
|
||||
|
||||
on-size-change
|
||||
(fn [event attr]
|
||||
(let [value (-> (dom/get-target event)
|
||||
(dom/get-value)
|
||||
(d/parse-integer 0))]
|
||||
(st/emit! (udw/update-circle-dimensions (:id shape) attr value))))
|
||||
|
||||
on-proportion-lock-change
|
||||
(fn [event]
|
||||
(st/emit! (udw/toggle-shape-proportion-lock (:id shape))))
|
||||
|
||||
on-size-rx-change #(on-size-change % :rx)
|
||||
on-size-ry-change #(on-size-change % :ry)
|
||||
|
||||
on-position-change
|
||||
(fn [event attr]
|
||||
(let [value (-> (dom/get-target event)
|
||||
(dom/get-value)
|
||||
(d/parse-integer 0))]
|
||||
(st/emit! (udw/update-position (:id shape) {attr value}))))
|
||||
|
||||
on-pos-cx-change #(on-position-change % :x)
|
||||
on-pos-cy-change #(on-position-change % :y)
|
||||
|
||||
on-rotation-change
|
||||
(fn [event]
|
||||
(let [value (-> (dom/get-target event)
|
||||
(dom/get-value)
|
||||
(d/parse-integer 0))]
|
||||
(st/emit! (udw/update-shape (:id shape) {:rotation value}))))
|
||||
|
||||
on-radius-change
|
||||
(fn [event]
|
||||
(let [value (-> (dom/get-target event)
|
||||
(dom/get-value)
|
||||
(d/parse-integer 0))]
|
||||
(st/emit! (udw/update-shape (:id shape) {:rx value :ry value}))))]
|
||||
|
||||
[:div.element-set
|
||||
[:div.element-set-content
|
||||
|
||||
;; SIZE
|
||||
[:div.row-flex
|
||||
[:span.element-set-subtitle (t locale "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
|
||||
[: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
|
||||
[:input.input-text {:type "number"
|
||||
:min "0"
|
||||
:on-change on-size-ry-change
|
||||
:value (str (-> (:ry shape)
|
||||
(d/coalesce 0)
|
||||
(math/round)))}]]]
|
||||
|
||||
;; POSITION
|
||||
[:div.row-flex
|
||||
[:span.element-set-subtitle (t locale "workspace.options.position")]
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text {:type "number"
|
||||
:on-change on-pos-cx-change
|
||||
:value (str (-> (:cx shape)
|
||||
(d/coalesce 0)
|
||||
(math/round)))}]]
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text {:type "number"
|
||||
:on-change on-pos-cy-change
|
||||
:value (str (-> (:cy shape)
|
||||
(d/coalesce 0)
|
||||
(math/round)))}]]]
|
||||
|
||||
[: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
|
||||
[:input.input-text
|
||||
{:type "number"
|
||||
:on-change on-radius-change
|
||||
:value (str (-> (:rx shape)
|
||||
(d/coalesce 0)
|
||||
(math/round)))}]]
|
||||
[:div.input-element]]]]))
|
||||
[uxbox.main.ui.workspace.sidebar.options.measures :refer [measures-menu]]
|
||||
[uxbox.main.ui.workspace.sidebar.options.stroke :refer [stroke-menu]]))
|
||||
|
||||
(mf/defc options
|
||||
[{:keys [shape] :as props}]
|
||||
[:div
|
||||
[:& measures-menu {:shape shape}]
|
||||
[:& measures-menu {:shape shape
|
||||
:options #{:circle-size :position :rotation}}]
|
||||
[:& fill-menu {:shape shape}]
|
||||
[:& stroke-menu {:shape shape}]])
|
||||
|
|
|
|||
|
|
@ -5,150 +5,14 @@
|
|||
;; This Source Code Form is "Incompatible With Secondary Licenses", as
|
||||
;; defined by the Mozilla Public License, v. 2.0.
|
||||
;;
|
||||
;; Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
|
||||
;; Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
;; Copyright (c) 2020 UXBOX Labs SL
|
||||
|
||||
(ns uxbox.main.ui.workspace.sidebar.options.icon
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.common.data :as d]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.main.data.workspace :as udw]
|
||||
[uxbox.main.geom :as geom]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.ui.workspace.sidebar.options.measures :refer [measures-menu]]
|
||||
[uxbox.main.ui.workspace.sidebar.options.fill :refer [fill-menu]]
|
||||
[uxbox.main.ui.workspace.sidebar.options.stroke :refer [stroke-menu]]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[uxbox.util.i18n :as i18n :refer [tr t]]
|
||||
[uxbox.util.math :as math]))
|
||||
|
||||
(mf/defc measures-menu
|
||||
[{:keys [shape] :as props}]
|
||||
(let [locale (i18n/use-locale)
|
||||
|
||||
on-size-change
|
||||
(fn [event attr]
|
||||
(let [value (-> (dom/get-target event)
|
||||
(dom/get-value)
|
||||
(d/parse-integer 0))]
|
||||
(st/emit! (udw/update-rect-dimensions (:id shape) attr value))))
|
||||
|
||||
on-proportion-lock-change
|
||||
(fn [event]
|
||||
(st/emit! (udw/toggle-shape-proportion-lock (:id shape))))
|
||||
|
||||
on-position-change
|
||||
(fn [event attr]
|
||||
(let [value (-> (dom/get-target event)
|
||||
(dom/get-value)
|
||||
(d/parse-integer 0))]
|
||||
(st/emit! (udw/update-position (:id shape) {attr value}))))
|
||||
|
||||
on-rotation-change
|
||||
(fn [event]
|
||||
(let [value (-> (dom/get-target event)
|
||||
(dom/get-value)
|
||||
(d/parse-integer 0))]
|
||||
(st/emit! (udw/update-shape (:id shape) {:rotation value}))))
|
||||
|
||||
on-radius-change
|
||||
(fn [event]
|
||||
(let [value (-> (dom/get-target event)
|
||||
(dom/get-value)
|
||||
(d/parse-integer 0))]
|
||||
(st/emit! (udw/update-shape (:id shape) {:rx value :ry value}))))
|
||||
|
||||
on-width-change #(on-size-change % :width)
|
||||
on-height-change #(on-size-change % :height)
|
||||
on-pos-x-change #(on-position-change % :x)
|
||||
on-pos-y-change #(on-position-change % :y)]
|
||||
|
||||
[:div.element-set
|
||||
[:div.element-set-content
|
||||
|
||||
;; WIDTH & HEIGHT
|
||||
[:div.row-flex
|
||||
[:span.element-set-subtitle (t locale "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
|
||||
[: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
|
||||
[:input.input-text {:type "number"
|
||||
:min "0"
|
||||
:no-validate true
|
||||
:on-change on-height-change
|
||||
:value (str (-> (:height shape)
|
||||
(d/coalesce 0)
|
||||
(math/round)))}]]]
|
||||
|
||||
;; POSITION
|
||||
[:div.row-flex
|
||||
[:span.element-set-subtitle (t locale "workspace.options.position")]
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text {:placeholder "x"
|
||||
:type "number"
|
||||
:no-validate true
|
||||
:on-change on-pos-x-change
|
||||
:value (str (-> (:x shape)
|
||||
(d/coalesce 0)
|
||||
(math/round)))}]]
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text {:placeholder "y"
|
||||
:type "number"
|
||||
:no-validate true
|
||||
:on-change on-pos-y-change
|
||||
:value (str (-> (:y shape)
|
||||
(d/coalesce 0)
|
||||
(math/round)))}]]]
|
||||
|
||||
[:div.row-flex
|
||||
[:span.element-set-subtitle (t locale "workspace.options.rotation")]
|
||||
[:div.input-element.degrees
|
||||
[:input.input-text
|
||||
{:placeholder ""
|
||||
:type "number"
|
||||
:no-validate true
|
||||
: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"
|
||||
: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
|
||||
[:input.input-text
|
||||
{:placeholder "rx"
|
||||
:type "number"
|
||||
:on-change on-radius-change
|
||||
:value (str (-> (:rx shape)
|
||||
(d/coalesce 0)
|
||||
(math/round)))}]]
|
||||
[:div.input-element]]]]))
|
||||
|
||||
[uxbox.main.ui.workspace.sidebar.options.stroke :refer [stroke-menu]]))
|
||||
|
||||
(mf/defc options
|
||||
[{:keys [shape] :as props}]
|
||||
|
|
|
|||
|
|
@ -2,153 +2,17 @@
|
|||
;; 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/.
|
||||
;;
|
||||
;; Copyright (c) 2015-2017 Andrey Antukh <niwi@niwi.nz>
|
||||
;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
;; This Source Code Form is "Incompatible With Secondary Licenses", as
|
||||
;; defined by the Mozilla Public License, v. 2.0.
|
||||
;;
|
||||
;; Copyright (c) 2020 UXBOX Labs SL
|
||||
|
||||
(ns uxbox.main.ui.workspace.sidebar.options.image
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.common.data :as d]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.main.data.workspace :as udw]
|
||||
[uxbox.main.geom :as geom]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[uxbox.util.i18n :as i18n :refer [t]]
|
||||
[uxbox.util.math :as math]))
|
||||
|
||||
|
||||
(mf/defc measures-menu
|
||||
[{:keys [shape] :as props}]
|
||||
(let [locale (i18n/use-locale)
|
||||
|
||||
on-size-change
|
||||
(fn [event attr]
|
||||
(let [value (-> (dom/get-target event)
|
||||
(dom/get-value)
|
||||
(d/parse-integer 0))]
|
||||
(st/emit! (udw/update-rect-dimensions (:id shape) attr value))))
|
||||
|
||||
on-proportion-lock-change
|
||||
(fn [event]
|
||||
(st/emit! (udw/toggle-shape-proportion-lock (:id shape))))
|
||||
|
||||
on-position-change
|
||||
(fn [event attr]
|
||||
(let [value (-> (dom/get-target event)
|
||||
(dom/get-value)
|
||||
(d/parse-integer 0))]
|
||||
(st/emit! (udw/update-position (:id shape) {attr value}))))
|
||||
|
||||
on-rotation-change
|
||||
(fn [event]
|
||||
(let [value (-> (dom/get-target event)
|
||||
(dom/get-value)
|
||||
(d/parse-integer 0))]
|
||||
(st/emit! (udw/update-shape (:id shape) {:rotation value}))))
|
||||
|
||||
on-radius-change
|
||||
(fn [event]
|
||||
(let [value (-> (dom/get-target event)
|
||||
(dom/get-value)
|
||||
(d/parse-integer 0))]
|
||||
(st/emit! (udw/update-shape (:id shape) {:rx value :ry value}))))
|
||||
|
||||
on-width-change #(on-size-change % :width)
|
||||
on-height-change #(on-size-change % :height)
|
||||
on-pos-x-change #(on-position-change % :x)
|
||||
on-pos-y-change #(on-position-change % :y)]
|
||||
|
||||
[:div.element-set
|
||||
[:div.element-set-content
|
||||
|
||||
;; WIDTH & HEIGHT
|
||||
[:div.row-flex
|
||||
[:span.element-set-subtitle (t locale "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
|
||||
[: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
|
||||
[:input.input-text {:type "number"
|
||||
:min "0"
|
||||
:no-validate true
|
||||
:on-change on-height-change
|
||||
:value (str (-> (:height shape)
|
||||
(d/coalesce 0)
|
||||
(math/round)))}]]]
|
||||
|
||||
;; POSITION
|
||||
[:div.row-flex
|
||||
[:span.element-set-subtitle (t locale "workspace.options.position")]
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text {:placeholder "x"
|
||||
:type "number"
|
||||
:no-validate true
|
||||
:on-change on-pos-x-change
|
||||
:value (str (-> (:x shape)
|
||||
(d/coalesce 0)
|
||||
(math/round)))}]]
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text {:placeholder "y"
|
||||
:type "number"
|
||||
:no-validate true
|
||||
:on-change on-pos-y-change
|
||||
:value (str (-> (:y shape)
|
||||
(d/coalesce 0)
|
||||
(math/round)))}]]]
|
||||
|
||||
[:div.row-flex
|
||||
[:span.element-set-subtitle (t locale "workspace.options.rotation")]
|
||||
[:div.input-element.degrees
|
||||
[:input.input-text
|
||||
{:placeholder ""
|
||||
:type "number"
|
||||
:no-validate true
|
||||
: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"
|
||||
: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
|
||||
[:input.input-text
|
||||
{:placeholder "rx"
|
||||
:type "number"
|
||||
:on-change on-radius-change
|
||||
:value (str (-> (:rx shape)
|
||||
(d/coalesce 0)
|
||||
(math/round)))}]]
|
||||
[:div.input-element]]]]))
|
||||
|
||||
[uxbox.main.ui.workspace.sidebar.options.measures :refer [measures-menu]]))
|
||||
|
||||
(mf/defc options
|
||||
[{:keys [shape] :as props}]
|
||||
[:div
|
||||
[:& measures-menu {:shape shape}]
|
||||
#_[:& fill-menu {:shape shape}]
|
||||
#_[:& stroke-menu {:shape shape}]])
|
||||
[:& measures-menu {:shape shape}]])
|
||||
|
|
|
|||
|
|
@ -30,6 +30,13 @@
|
|||
(d/parse-integer 0))]
|
||||
(st/emit! (udw/update-rect-dimensions (:id shape) attr value))))
|
||||
|
||||
on-circle-size-change
|
||||
(fn [event attr]
|
||||
(let [value (-> (dom/get-target event)
|
||||
(dom/get-value)
|
||||
(d/parse-integer 0))]
|
||||
(st/emit! (udw/update-circle-dimensions (:id shape) attr value))))
|
||||
|
||||
on-proportion-lock-change
|
||||
(fn [event]
|
||||
(st/emit! (udw/toggle-shape-proportion-lock (:id shape))))
|
||||
|
|
@ -58,7 +65,9 @@
|
|||
on-width-change #(on-size-change % :width)
|
||||
on-height-change #(on-size-change % :height)
|
||||
on-pos-x-change #(on-position-change % :x)
|
||||
on-pos-y-change #(on-position-change % :y)]
|
||||
on-pos-y-change #(on-position-change % :y)
|
||||
on-size-rx-change #(on-circle-size-change % :rx)
|
||||
on-size-ry-change #(on-circle-size-change % :ry)]
|
||||
|
||||
[:div.element-set
|
||||
[:div.element-set-content
|
||||
|
|
@ -91,6 +100,30 @@
|
|||
(d/coalesce 0)
|
||||
(math/round)))}]]])
|
||||
|
||||
;; Circle RX RY
|
||||
(when (options :circle-size)
|
||||
[:div.row-flex
|
||||
[:span.element-set-subtitle (t locale "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
|
||||
[: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
|
||||
[:input.input-text {:type "number"
|
||||
:min "0"
|
||||
:on-change on-size-ry-change
|
||||
:value (str (-> (:ry shape)
|
||||
(d/coalesce 0)
|
||||
(math/round)))}]]])
|
||||
|
||||
;; POSITION
|
||||
(when (options :position)
|
||||
[:div.row-flex
|
||||
|
|
|
|||
|
|
@ -2,8 +2,10 @@
|
|||
;; 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/.
|
||||
;;
|
||||
;; Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
|
||||
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
;; This Source Code Form is "Incompatible With Secondary Licenses", as
|
||||
;; defined by the Mozilla Public License, v. 2.0.
|
||||
;;
|
||||
;; Copyright (c) 2020 UXBOX Labs SL
|
||||
|
||||
(ns uxbox.main.ui.workspace.sidebar.options.page
|
||||
"Page options menu entries."
|
||||
|
|
@ -13,52 +15,14 @@
|
|||
[okulary.core :as l]
|
||||
[uxbox.common.data :as d]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.main.constants :as c]
|
||||
[uxbox.main.data.workspace :as udw]
|
||||
[uxbox.main.data.workspace :as dw]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.ui.modal :as modal]
|
||||
[uxbox.main.ui.workspace.colorpicker :refer [colorpicker-modal]]
|
||||
[uxbox.util.data :refer [parse-int]]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.i18n :refer [tr]]))
|
||||
|
||||
;; (mf/defc metadata-options
|
||||
;; [{:keys [page] :as props}]
|
||||
;; (let [metadata (:metadata page)
|
||||
;; change-color
|
||||
;; (fn [color]
|
||||
;; #_(st/emit! (->> (assoc metadata :background color)
|
||||
;; (udp/update-metadata (:id page)))))
|
||||
;; on-color-change
|
||||
;; (fn [event]
|
||||
;; (let [value (dom/event->value event)]
|
||||
;; (change-color value)))
|
||||
|
||||
;; show-color-picker
|
||||
;; (fn [event]
|
||||
;; (let [x (.-clientX event)
|
||||
;; y (.-clientY event)
|
||||
;; props {:x x :y y
|
||||
;; :default "#ffffff"
|
||||
;; :value (:background metadata)
|
||||
;; :transparent? true
|
||||
;; :on-change change-color}]
|
||||
;; (modal/show! colorpicker-modal props)))]
|
||||
|
||||
;; [:div.element-set
|
||||
;; [:div.element-set-title (tr "workspace.options.page-measures")]
|
||||
;; [:div.element-set-content
|
||||
;; [:span (tr "workspace.options.background-color")]
|
||||
;; [:div.row-flex.color-data
|
||||
;; [:span.color-th
|
||||
;; {:style {:background-color (:background metadata "#ffffff")}
|
||||
;; :on-click show-color-picker}]
|
||||
;; [:div.color-info
|
||||
;; [:input
|
||||
;; {:on-change on-color-change
|
||||
;; :value (:background metadata "#ffffff")}]]]]]))
|
||||
|
||||
(def default-options
|
||||
"Default data for page metadata."
|
||||
{:grid-x 10
|
||||
|
|
@ -78,18 +42,18 @@
|
|||
(let [value (-> (dom/get-target event)
|
||||
(dom/get-value)
|
||||
(d/parse-integer 0))]
|
||||
(st/emit! (udw/update-options {:grid-x value}))))
|
||||
(st/emit! (dw/update-options {:grid-x value}))))
|
||||
|
||||
on-y-change
|
||||
(fn [event]
|
||||
(let [value (-> (dom/get-target event)
|
||||
(dom/get-value)
|
||||
(d/parse-integer 0))]
|
||||
(st/emit! (udw/update-options {:grid-y value}))))
|
||||
(st/emit! (dw/update-options {:grid-y value}))))
|
||||
|
||||
change-color
|
||||
(fn [color]
|
||||
(st/emit! (udw/update-options {:grid-color color})))
|
||||
(st/emit! (dw/update-options {:grid-color color})))
|
||||
|
||||
on-color-change
|
||||
(fn [event]
|
||||
|
|
|
|||
|
|
@ -2,8 +2,10 @@
|
|||
;; 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/.
|
||||
;;
|
||||
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
;; Copyright (c) 2015-2019 Andrey Antukh <niwi@niwi.nz>
|
||||
;; This Source Code Form is "Incompatible With Secondary Licenses", as
|
||||
;; defined by the Mozilla Public License, v. 2.0.
|
||||
;;
|
||||
;; Copyright (c) 2020 UXBOX Labs SL
|
||||
|
||||
(ns uxbox.main.ui.workspace.sidebar.options.path
|
||||
(:require
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@
|
|||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.main.ui.workspace.sidebar.options.fill :refer [fill-menu]]
|
||||
[uxbox.main.ui.workspace.sidebar.options.stroke :refer [stroke-menu]]
|
||||
[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.stroke :refer [stroke-menu]]))
|
||||
|
||||
(mf/defc options
|
||||
[{:keys [shape] :as props}]
|
||||
|
|
|
|||
|
|
@ -2,136 +2,21 @@
|
|||
;; 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/.
|
||||
;;
|
||||
;; Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
|
||||
;; Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
;; This Source Code Form is "Incompatible With Secondary Licenses", as
|
||||
;; defined by the Mozilla Public License, v. 2.0.
|
||||
;;
|
||||
;; Copyright (c) 2020 UXBOX Labs SL
|
||||
|
||||
(ns uxbox.main.ui.workspace.sidebar.options.text
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[potok.core :as ptk]
|
||||
[uxbox.common.data :as d]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.geom :as geom]
|
||||
[uxbox.main.data.workspace :as udw]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.util.i18n :refer (tr)]
|
||||
[uxbox.util.router :as r]
|
||||
[uxbox.common.data :as d]
|
||||
[uxbox.main.data.workspace :as dw]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.ui.workspace.sidebar.options.measures :refer [measures-menu]]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[uxbox.util.math :as math :refer [precision-or-0]]
|
||||
[uxbox.util.data :refer [parse-int
|
||||
parse-float
|
||||
read-string
|
||||
index-by-id]]))
|
||||
|
||||
|
||||
(mf/defc measures-menu
|
||||
[{:keys [shape] :as props}]
|
||||
(let [on-size-change
|
||||
(fn [event attr]
|
||||
(let [value (-> (dom/get-target event)
|
||||
(dom/get-value)
|
||||
(d/parse-integer 0))]
|
||||
(st/emit! (udw/update-rect-dimensions (:id shape) attr value))))
|
||||
|
||||
on-proportion-lock-change
|
||||
(fn [event]
|
||||
(st/emit! (udw/toggle-shape-proportion-lock (:id shape))))
|
||||
|
||||
on-position-change
|
||||
(fn [event attr]
|
||||
(let [value (-> (dom/get-target event)
|
||||
(dom/get-value)
|
||||
(d/parse-integer))]
|
||||
(st/emit! (udw/update-position (:id shape) {attr value}))))
|
||||
|
||||
on-rotation-change
|
||||
(fn [event]
|
||||
(let [value (-> (dom/get-target event)
|
||||
(dom/get-value)
|
||||
(d/parse-integer 0))]
|
||||
(st/emit! (udw/update-shape (:id shape) {:rotation value}))))
|
||||
|
||||
on-radius-change
|
||||
(fn [event]
|
||||
(let [value (-> (dom/get-target event)
|
||||
(dom/get-value)
|
||||
(d/parse-double 0))]
|
||||
(st/emit! (udw/update-shape (:id shape) {:rx value :ry value}))))
|
||||
|
||||
on-width-change #(on-size-change % :width)
|
||||
on-height-change #(on-size-change % :height)
|
||||
on-pos-x-change #(on-position-change % :x)
|
||||
on-pos-y-change #(on-position-change % :y)]
|
||||
|
||||
[:div.element-set
|
||||
[:div.element-set-content
|
||||
|
||||
;; WIDTH & HEIGHT
|
||||
[:div.row-flex
|
||||
[:span (tr "workspace.options.size")]
|
||||
[:div.input-element.pixels
|
||||
[: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")
|
||||
:on-click on-proportion-lock-change}
|
||||
(if (:proportion-lock shape)
|
||||
i/lock
|
||||
i/unlock)]
|
||||
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text {:type "number"
|
||||
:min "0"
|
||||
:on-change on-height-change
|
||||
:value (-> (:height shape)
|
||||
(math/precision 2)
|
||||
(d/coalesce-str "0"))}]]]
|
||||
|
||||
;; POSITION
|
||||
[:span (tr "workspace.options.position")]
|
||||
[:div.row-flex
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text {:placeholder "x"
|
||||
:type "number"
|
||||
:on-change on-pos-x-change
|
||||
:value (-> (:x shape)
|
||||
(math/precision 2)
|
||||
(d/coalesce-str "0"))}]]
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text {:placeholder "y"
|
||||
:type "number"
|
||||
:on-change on-pos-y-change
|
||||
:value (-> (:y shape)
|
||||
(math/precision 2)
|
||||
(d/coalesce-str "0"))}]]]
|
||||
|
||||
[: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 0)
|
||||
(math/precision 2)
|
||||
(d/coalesce-str "0"))}]]
|
||||
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text
|
||||
{:placeholder "rx"
|
||||
:type "number"
|
||||
:on-change on-radius-change
|
||||
:value (-> (:rx shape)
|
||||
(math/precision 2)
|
||||
(d/coalesce-str "0"))}]]]]]))
|
||||
|
||||
|
||||
[uxbox.util.i18n :refer [tr]]))
|
||||
|
||||
(declare +fonts+)
|
||||
|
||||
|
|
@ -155,7 +40,7 @@
|
|||
attrs {:font-family value
|
||||
:font-weight "normal"
|
||||
:font-style "normal"}]
|
||||
(st/emit! (udw/update-shape id attrs))))
|
||||
(st/emit! (dw/update-shape id attrs))))
|
||||
|
||||
on-font-size-change
|
||||
(fn [event]
|
||||
|
|
@ -163,7 +48,7 @@
|
|||
(dom/get-value)
|
||||
(d/parse-integer 0))
|
||||
attrs {:font-size value}]
|
||||
(st/emit! (udw/update-shape id attrs))))
|
||||
(st/emit! (dw/update-shape id attrs))))
|
||||
|
||||
on-font-letter-spacing-change
|
||||
(fn [event]
|
||||
|
|
@ -171,7 +56,7 @@
|
|||
(dom/get-value)
|
||||
(d/parse-double 0))
|
||||
attrs {:letter-spacing value}]
|
||||
(st/emit! (udw/update-shape id attrs))))
|
||||
(st/emit! (dw/update-shape id attrs))))
|
||||
|
||||
on-font-line-height-change
|
||||
(fn [event]
|
||||
|
|
@ -179,12 +64,12 @@
|
|||
(dom/get-value)
|
||||
(d/parse-double 0))
|
||||
attrs {:line-height value}]
|
||||
(st/emit! (udw/update-shape id attrs))))
|
||||
(st/emit! (dw/update-shape id attrs))))
|
||||
|
||||
on-font-align-change
|
||||
(fn [event value]
|
||||
(let [attrs {:text-align value}]
|
||||
(st/emit! (udw/update-shape id attrs))))
|
||||
(st/emit! (dw/update-shape id attrs))))
|
||||
|
||||
on-font-style-change
|
||||
(fn [event]
|
||||
|
|
@ -193,7 +78,7 @@
|
|||
(d/read-string))
|
||||
attrs {:font-style style
|
||||
:font-weight weight}]
|
||||
(st/emit! (udw/update-shape id attrs))))
|
||||
(st/emit! (dw/update-shape id attrs))))
|
||||
]
|
||||
[:div.element-set
|
||||
[:div.element-set-title (tr "workspace.options.font-options")]
|
||||
|
|
@ -262,7 +147,7 @@
|
|||
[:div.row-flex
|
||||
[:div.input-icon
|
||||
[:span.icon-before.tooltip.tooltip-bottom
|
||||
{:alt "Line height"}
|
||||
{:alt "Line height"}
|
||||
i/line-height]
|
||||
[:input.input-text {:type "number"
|
||||
:step "0.1"
|
||||
|
|
@ -274,7 +159,7 @@
|
|||
:on-change on-font-line-height-change}]]
|
||||
[:div.input-icon
|
||||
[:span.icon-before.tooltip.tooltip-bottom
|
||||
{:alt "Letter spacing"}
|
||||
{:alt "Letter spacing"}
|
||||
i/letter-spacing]
|
||||
[:input.input-text {:type "number"
|
||||
:step "0.1"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue