3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-07 14:47:17 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Refactor shape options sidebar.

Browse source
This commit is contained in:
Andrey Antukh 2020-04-07 19:52:37 +02:00
parent 8b7d613b99
commit 54f6e7cc9e
11 changed files with 378 additions and 268 deletions
Download patch file Download diff file Expand all files Collapse all files

14
frontend/resources/styles/common/framework.scss
View file

@ -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;

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

@ -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;
} }
} }
} }

17
frontend/resources/styles/main/partials/sidebar-element-options.scss
View file

@ -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 {

102
frontend/src/uxbox/main/ui/workspace/sidebar/options/circle.cljs
View file

@ -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}]

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

@ -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}]]]]))

15
frontend/src/uxbox/main/ui/workspace/sidebar/options/frame.cljs
View file

@ -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"

87
frontend/src/uxbox/main/ui/workspace/sidebar/options/icon.cljs
View file

@ -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

91
frontend/src/uxbox/main/ui/workspace/sidebar/options/image.cljs
View file

@ -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

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

@ -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

90
frontend/src/uxbox/main/ui/workspace/sidebar/options/rect.cljs
View file

@ -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

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

@ -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}]]]]]))