From 47ab946f81718e2645b41a50cad7b630e3c954a9 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Mon, 27 Jan 2020 15:33:21 +0100 Subject: [PATCH] :tada: Add icon element options sidebar. --- frontend/resources/locales.json | 6 + .../main/ui/workspace/sidebar/icons.cljs | 45 +----- .../main/ui/workspace/sidebar/layers.cljs | 2 +- .../main/ui/workspace/sidebar/options.cljs | 2 + .../ui/workspace/sidebar/options/icon.cljs | 139 ++++++++++++++++++ .../sidebar/options/icon_measures.cljs | 113 -------------- 6 files changed, 149 insertions(+), 158 deletions(-) create mode 100644 frontend/src/uxbox/main/ui/workspace/sidebar/options/icon.cljs delete mode 100644 frontend/src/uxbox/main/ui/workspace/sidebar/options/icon_measures.cljs diff --git a/frontend/resources/locales.json b/frontend/resources/locales.json index 0a957f265..509acab54 100644 --- a/frontend/resources/locales.json +++ b/frontend/resources/locales.json @@ -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" : { diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/icons.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/icons.cljs index 151fa238e..4741a7c52 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/icons.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/icons.cljs @@ -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)])]]))) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs index a4aa3b4bf..dae036fa5 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs @@ -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 diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs index e59681bb8..84f046366 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs @@ -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}] diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/icon.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/icon.cljs new file mode 100644 index 000000000..028e8f87e --- /dev/null +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/icon.cljs @@ -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 +;; Copyright (c) 2015-2020 Juan de la Cruz + +(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}]]) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/icon_measures.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/icon_measures.cljs deleted file mode 100644 index 881a63af0..000000000 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/icon_measures.cljs +++ /dev/null @@ -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 -;; Copyright (c) 2015-2019 Andrey Antukh - -(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))))) -