mirror of
https://github.com/penpot/penpot.git
synced 2025-02-10 00:58:26 -05:00
🎉 Add icon element options sidebar.
This commit is contained in:
Andrey Antukh
parent
bbd7e33059
commit
47ab946f81
6 changed files with 149 additions and 158 deletions
|
|
@ -980,6 +980,12 @@
|
|||
"fr" : "Couches"
|
||||
}
|
||||
},
|
||||
"workspace.sidebar.icons" : {
|
||||
"translations" : {
|
||||
"en" : "Icons",
|
||||
"fr" : "Icône"
|
||||
}
|
||||
},
|
||||
"workspace.sidebar.sitemap" : {
|
||||
"used-in" : [ "src/uxbox/main/ui/workspace/sidebar/sitemap.cljs:135" ],
|
||||
"translations" : {
|
||||
|
|
|
|||
|
|
@ -80,12 +80,10 @@
|
|||
(mf/use-effect
|
||||
{:fn #(st/emit! di/fetch-collections)})
|
||||
|
||||
(prn "icons-toolbox")
|
||||
|
||||
[:div#form-figures.tool-window
|
||||
[:div.tool-window-bar
|
||||
[:div.tool-window-icon i/icon-set]
|
||||
[:span (t locale "ds.settings.icons")]
|
||||
[:span (t locale "workspace.sidebar.icons")]
|
||||
[:div.tool-window-close #_{:on-click on-close} i/close]]
|
||||
[:div.tool-window-content
|
||||
[:& icons-collections {:collections collections
|
||||
|
|
@ -93,44 +91,3 @@
|
|||
:on-change (constantly nil)
|
||||
}]
|
||||
[:& icons-list {:collection-id nil}]]]))
|
||||
|
||||
|
||||
|
||||
;; #_(let [drawing (mx/react drawing-shape-ref)
|
||||
;; selected (mx/react icons-toolbox-ref)
|
||||
;; colls (mx/react icons/collections-ref)
|
||||
;; selected-coll (get colls selected)
|
||||
|
||||
;; colls (->> (vals (mx/react icons/collections-ref))
|
||||
;; (sort-by :name))
|
||||
;; icons (->> (vals (mx/react icons/icons-ref))
|
||||
;; (filter #(= (:id selected-coll) (:collection %))))]
|
||||
;; (letfn [(on-close [event]
|
||||
;; (st/emit! (dw/toggle-flag :icons)))
|
||||
;; (on-select [icon event]
|
||||
;; (st/emit! (dw/select-for-drawing icon)))
|
||||
;; (on-change [event]
|
||||
;; (let [value (read-string (dom/event->value event))]
|
||||
;; (st/emit! (dw/select-for-drawing nil)
|
||||
;; (dw/select-icons-toolbox-collection value))))]
|
||||
;; [:div#form-figures.tool-window
|
||||
;; [:div.tool-window-bar
|
||||
;; [:div.tool-window-icon i/icon-set]
|
||||
;; [:span (tr "ds.settings.icons")]
|
||||
;; [:div.tool-window-close {:on-click on-close} i/close]]
|
||||
;; [:div.tool-window-content
|
||||
;; [:div.figures-catalog
|
||||
;; ;; extract component: set selector
|
||||
;; [:select.input-select.small {:on-change on-change
|
||||
;; :value (pr-str (:id selected-coll))}
|
||||
;; [:option {:value (pr-str nil)} "Storage"]
|
||||
;; (for [coll colls]
|
||||
;; [:option {:key (str "icon-coll" (:id coll))
|
||||
;; :value (pr-str (:id coll))}
|
||||
;; (:name coll)])]]
|
||||
;; (for [icon icons
|
||||
;; :let [selected? (= drawing icon)]]
|
||||
;; [:div.figure-btn {:key (str (:id icon))
|
||||
;; :class (when selected? "selected")
|
||||
;; :on-click (partial on-select icon)}
|
||||
;; (icon-wrapper icon)])]])))
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
:circle i/circle
|
||||
:path i/curve
|
||||
:rect i/box
|
||||
:curve i/curve
|
||||
:text i/text
|
||||
nil))
|
||||
|
||||
|
|
@ -145,7 +146,6 @@
|
|||
:on-click toggle-blocking}
|
||||
i/lock]]
|
||||
[:& element-icon {:shape shape}]
|
||||
;; [:div.element-icon (element-icon shape)]
|
||||
[:& layer-name {:shape shape}]]]))
|
||||
|
||||
(mf/defc canvas-item
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.ui.workspace.sidebar.options.canvas :as canvas]
|
||||
[uxbox.main.ui.workspace.sidebar.options.rect :as rect]
|
||||
[uxbox.main.ui.workspace.sidebar.options.icon :as icon]
|
||||
[uxbox.main.ui.workspace.sidebar.options.circle :as circle]
|
||||
[uxbox.main.ui.workspace.sidebar.options.path :as path]
|
||||
[uxbox.main.ui.workspace.sidebar.options.image :as image]
|
||||
|
|
@ -31,6 +32,7 @@
|
|||
:canvas [:& canvas/options {:shape shape}]
|
||||
:text [:& text/options {:shape shape}]
|
||||
:rect [:& rect/options {:shape shape}]
|
||||
:icon [:& icon/options {:shape shape}]
|
||||
:circle [:& circle/options {:shape shape}]
|
||||
:path [:& path/options {:shape shape}]
|
||||
:curve [:& path/options {:shape shape}]
|
||||
|
|
|
|||
139
frontend/src/uxbox/main/ui/workspace/sidebar/options/icon.cljs
Normal file
139
frontend/src/uxbox/main/ui/workspace/sidebar/options/icon.cljs
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
||||
;; 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/.
|
||||
;;
|
||||
;; 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>
|
||||
|
||||
(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.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 :refer [tr]]
|
||||
[uxbox.util.math :as math]))
|
||||
|
||||
(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-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-title (tr "workspace.options.measures")]
|
||||
[:div.element-set-content
|
||||
[:span (tr "workspace.options.size")]
|
||||
|
||||
;; WIDTH & HEIGHT
|
||||
[:div.row-flex
|
||||
[: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"))}]]]]]))
|
||||
|
||||
|
||||
(mf/defc options
|
||||
[{:keys [shape] :as props}]
|
||||
[:div
|
||||
[:& measures-menu {:shape shape}]
|
||||
[:& fill-menu {:shape shape}]
|
||||
[:& stroke-menu {:shape shape}]])
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
||||
;; 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>
|
||||
|
||||
(ns uxbox.main.ui.workspace.sidebar.options.icon-measures
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.main.data.workspace :as udw]
|
||||
[uxbox.main.geom :as geom]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.util.data :refer [parse-int parse-float read-string]]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[uxbox.util.i18n :refer [tr]]
|
||||
[uxbox.util.math :refer [precision-or-0]]))
|
||||
|
||||
(declare on-size-change)
|
||||
(declare on-rotation-change)
|
||||
(declare on-position-change)
|
||||
(declare on-proportion-lock-change)
|
||||
|
||||
(mf/defc icon-measures-menu
|
||||
[{:keys [menu shape] :as props}]
|
||||
(let [size (geom/size shape)]
|
||||
[:div.element-set {:key (str (:id menu))}
|
||||
[:div.element-set-title (:name menu)]
|
||||
[:div.element-set-content
|
||||
;; SLIDEBAR FOR ROTATION AND OPACITY
|
||||
[:span (tr "ds.size")]
|
||||
[:div.row-flex
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text {:placeholder (tr "ds.width")
|
||||
:type "number"
|
||||
:min "0"
|
||||
:value (precision-or-0 (:width size) 2)
|
||||
:on-change #(on-size-change % shape :width)}]]
|
||||
[:div.lock-size {:class (when (:proportion-lock shape) "selected")
|
||||
:on-click #(on-proportion-lock-change % shape)}
|
||||
(if (:proportion-lock shape) i/lock i/unlock)]
|
||||
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text {:placeholder (tr "ds.height")
|
||||
:type "number"
|
||||
:min "0"
|
||||
:value (precision-or-0 (:height size) 2)
|
||||
:on-change #(on-size-change % shape :height)}]]]
|
||||
|
||||
[:span (tr "ds.position")]
|
||||
[:div.row-flex
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text
|
||||
{:placeholder "X"
|
||||
:type "number"
|
||||
:value (precision-or-0 (:x1 shape 0) 2)
|
||||
:on-change #(on-position-change % shape :x)}]]
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text
|
||||
{:placeholder "Y"
|
||||
:type "number"
|
||||
:value (precision-or-0 (:y1 shape 0) 2)
|
||||
:on-change #(on-position-change % shape :y)}]]]
|
||||
|
||||
[:span (tr "ds.rotation")]
|
||||
[:div.row-flex
|
||||
[:input.slidebar
|
||||
{:type "range"
|
||||
:min 0
|
||||
:max 360
|
||||
:value (:rotation shape 0)
|
||||
:on-change #(on-rotation-change % shape)}]]
|
||||
|
||||
[:div.row-flex
|
||||
[:div.input-element.degrees
|
||||
[:input.input-text {:placeholder ""
|
||||
:type "number"
|
||||
:min 0
|
||||
:max 360
|
||||
:value (precision-or-0 (:rotation shape 0) 2)
|
||||
:on-change on-rotation-change}]]
|
||||
[:input.input-text {:style {:visibility "hidden"}}]]]]))
|
||||
|
||||
(defn- on-size-change
|
||||
[event shape attr]
|
||||
(let [value (dom/event->value event)
|
||||
value (parse-int value 0)
|
||||
sid (:id shape)
|
||||
props {attr value}]
|
||||
(st/emit! (udw/update-dimensions sid props))))
|
||||
|
||||
(defn- on-rotation-change
|
||||
[event shape]
|
||||
(let [value (dom/event->value event)
|
||||
value (parse-int value 0)]
|
||||
#_(st/emit! (udw/update-shape-attrs (:id shape) {:rotation value}))))
|
||||
|
||||
(defn- on-position-change
|
||||
[event shape attr]
|
||||
(let [value (dom/event->value event)
|
||||
value (parse-int value nil)
|
||||
sid (:id shape)
|
||||
point (gpt/point {attr value})]
|
||||
(st/emit! (udw/update-position sid point))))
|
||||
|
||||
(defn- on-proportion-lock-change
|
||||
[event shape]
|
||||
#_(if (:proportion-lock shape)
|
||||
(st/emit! (udw/unlock-proportions (:id shape)))
|
||||
(st/emit! (udw/lock-proportions (:id shape)))))
|
||||
|
||||
Loading…
Add table
Reference in a new issue