From 9da623e3af655497dd2036e544691cdd94077bba Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Fri, 3 Mar 2017 14:39:34 +0100 Subject: [PATCH] Add image element options. --- frontend/src/uxbox/main/ui/shapes/attrs.cljs | 1 + .../main/ui/workspace/sidebar/options.cljs | 9 +- .../sidebar/options/image_measures.cljs | 124 ++++++++++++++++++ 3 files changed, 132 insertions(+), 2 deletions(-) create mode 100644 frontend/src/uxbox/main/ui/workspace/sidebar/options/image_measures.cljs diff --git a/frontend/src/uxbox/main/ui/shapes/attrs.cljs b/frontend/src/uxbox/main/ui/shapes/attrs.cljs index 10d2ade0e..93c741ea0 100644 --- a/frontend/src/uxbox/main/ui/shapes/attrs.cljs +++ b/frontend/src/uxbox/main/ui/shapes/attrs.cljs @@ -13,6 +13,7 @@ :stroke-opacity :stroke-width :stroke-style + :opacity :rx :ry}) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs index 35d432d92..58593af32 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options.cljs @@ -8,7 +8,7 @@ (ns uxbox.main.ui.workspace.sidebar.options (:require [lentes.core :as l] - [uxbox.util.i18n :refer (tr)] + [uxbox.util.i18n :refer [tr]] [uxbox.util.router :as r] [potok.core :as ptk] [uxbox.main.store :as st] @@ -17,6 +17,7 @@ [uxbox.builtins.icons :as i] [uxbox.main.ui.shapes.attrs :refer [shape-default-attrs]] [uxbox.main.ui.workspace.sidebar.options.icon-measures :as options-iconm] + [uxbox.main.ui.workspace.sidebar.options.image-measures :as options-imagem] [uxbox.main.ui.workspace.sidebar.options.circle-measures :as options-circlem] [uxbox.main.ui.workspace.sidebar.options.rect-measures :as options-rectm] [uxbox.main.ui.workspace.sidebar.options.fill :as options-fill] @@ -37,7 +38,7 @@ :path [::fill ::stroke ::interactions] :circle [::circle-measures ::fill ::stroke ::interactions] :text [::fill ::text ::interactions] - :image [::interactions] + :image [::image-measures ::interactions] :group [::fill ::stroke ::interactions] ::page [::page-measures ::page-grid-options]}) @@ -46,6 +47,10 @@ :id ::icon-measures :icon i/infocard :comp options-iconm/icon-measures-menu} + {:name "Size, position & rotation" + :id ::image-measures + :icon i/infocard + :comp options-imagem/image-measures-menu} {:name "Size, position & rotation" :id ::rect-measures :icon i/infocard diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/image_measures.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/image_measures.cljs new file mode 100644 index 000000000..a19de6c72 --- /dev/null +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/image_measures.cljs @@ -0,0 +1,124 @@ +;; 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-2017 Andrey Antukh +;; Copyright (c) 2015-2017 Juan de la Cruz + +(ns uxbox.main.ui.workspace.sidebar.options.image-measures + (:require [lentes.core :as l] + [uxbox.util.i18n :refer (tr)] + [uxbox.util.router :as r] + [potok.core :as ptk] + [uxbox.main.store :as st] + [uxbox.main.data.workspace :as udw] + [uxbox.main.data.shapes :as uds] + [uxbox.builtins.icons :as i] + [uxbox.main.geom :as geom] + [uxbox.util.dom :as dom] + [uxbox.util.geom.point :as gpt] + [uxbox.util.data :refer (parse-int parse-float read-string)] + [uxbox.util.math :refer (precision-or-0)] + [uxbox.util.mixins :as mx :include-macros true])) + +(mx/defc image-measures-menu + {:mixins [mx/static]} + [menu {:keys [id] :as shape}] + (letfn [(on-size-change [attr event] + (let [value (dom/event->value event) + value (parse-int value 0) + props {attr value}] + (st/emit! (uds/update-dimensions id props)))) + (on-rotation-change [event] + (let [value (dom/event->value event) + value (parse-int value 0)] + (st/emit! (uds/update-rotation id value)))) + (on-opacity-change [event] + (let [value (dom/event->value event) + value (parse-float value 1) + value (/ value 10000)] + (st/emit! (uds/update-attrs id {:opacity value})))) + (on-pos-change [attr event] + (let [value (dom/event->value event) + value (parse-int value nil) + point (gpt/point {attr value})] + (st/emit! (uds/update-position id point)))) + (on-proportion-lock-change [event] + (if (:proportion-lock shape) + (st/emit! (uds/unlock-proportions id)) + (st/emit! (uds/lock-proportions id))))] + (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 "Size"] + [:div.row-flex + [:div.input-element.pixels + [:input.input-text + {:placeholder "Width" + :type "number" + :min "0" + :value (precision-or-0 (:width size) 2) + :on-change (partial on-size-change :width)}]] + [: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 + {:placeholder "Height" + :type "number" + :min "0" + :value (precision-or-0 (:height size) 2) + :on-change (partial on-size-change :height)}]]] + + [:span "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 (partial on-pos-change :x)}]] + [:div.input-element.pixels + [:input.input-text + {:placeholder "Y" + :type "number" + :value (precision-or-0 (:y1 shape 0) 2) + :on-change (partial on-pos-change :y)}]]] + + ;; [:span "Rotation"] + ;; [:div.row-flex + ;; [:input.slidebar + ;; {:type "range" + ;; :min 0 + ;; :max 360 + ;; :value (:rotation shape 0) + ;; :on-change on-rotation-change}]] + + ;; [: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"}}]] + + + [:span "Opacity"] + [:div.row-flex + [:input.slidebar + {:type "range" + :min "0" + :max "10000" + :value (* 10000 (:opacity shape 1)) + :step "1" + :on-change on-opacity-change}]] + + ]])))