From f99b3bfdb8473eeac002c2554424a7594ffadbf5 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Mon, 6 Apr 2020 15:39:28 +0200 Subject: [PATCH] :sparkles: Adds options menu for groups --- .../main/ui/workspace/sidebar/options.cljs | 2 + .../ui/workspace/sidebar/options/group.cljs | 20 +++ .../workspace/sidebar/options/measures.cljs | 145 ++++++++++++++++++ .../ui/workspace/sidebar/options/rect.cljs | 137 +---------------- 4 files changed, 168 insertions(+), 136 deletions(-) create mode 100644 frontend/src/uxbox/main/ui/workspace/sidebar/options/group.cljs create mode 100644 frontend/src/uxbox/main/ui/workspace/sidebar/options/measures.cljs diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs index 17701a409..09f08a852 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs @@ -14,6 +14,7 @@ [uxbox.main.store :as st] [uxbox.main.refs :as refs] [uxbox.main.ui.workspace.sidebar.options.frame :as frame] + [uxbox.main.ui.workspace.sidebar.options.group :as group] [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] @@ -30,6 +31,7 @@ [:div (case (:type shape) :frame [:& frame/options {:shape shape}] + :group [:& group/options {:shape shape}] :text [:& text/options {:shape shape}] :rect [:& rect/options {:shape shape}] :icon [:& icon/options {:shape shape}] diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/group.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/group.cljs new file mode 100644 index 000000000..df0c4f0a4 --- /dev/null +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/group.cljs @@ -0,0 +1,20 @@ +;; 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.group + (:require + [rumext.alpha :as mf] + [uxbox.main.ui.workspace.sidebar.options.measures :refer [measures-menu]])) + +(mf/defc options + [{:keys [shape] :as props}] + [:div + [:& measures-menu {:shape shape}]]) + diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/measures.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/measures.cljs new file mode 100644 index 000000000..1df1d64d7 --- /dev/null +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/measures.cljs @@ -0,0 +1,145 @@ +;; 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) 2020 UXBOX Labs SL + +(ns uxbox.main.ui.workspace.sidebar.options.measures + (:require + [rumext.alpha :as mf] + [uxbox.builtins.icons :as i] + [uxbox.main.store :as st] + [uxbox.common.data :as d] + [uxbox.util.dom :as dom] + [uxbox.main.data.workspace :as udw] + [uxbox.util.math :as math] + [uxbox.util.i18n :refer [t] :as i18n])) + +(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]]]])) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/rect.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/rect.cljs index 1e694142b..f75b68014 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/rect.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/rect.cljs @@ -10,144 +10,9 @@ (ns uxbox.main.ui.workspace.sidebar.options.rect (: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-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}]