diff --git a/src/uxbox/data/workspace.cljs b/src/uxbox/data/workspace.cljs index e089a91c0..5774a826d 100644 --- a/src/uxbox/data/workspace.cljs +++ b/src/uxbox/data/workspace.cljs @@ -64,7 +64,7 @@ rs/UpdateEvent (-apply-update [_ state] (let [s {:project projectid - :flags #{:layers} + :flags #{:layers :element-options} :drawing nil :selected #{} :page pageid}] diff --git a/src/uxbox/ui/workspace.cljs b/src/uxbox/ui/workspace.cljs index 67a9d3ae6..76fdd359b 100644 --- a/src/uxbox/ui/workspace.cljs +++ b/src/uxbox/ui/workspace.cljs @@ -11,7 +11,6 @@ [uxbox.ui.icons :as i] [uxbox.ui.mixins :as mx] [uxbox.ui.workspace.base :as wb] - [uxbox.ui.workspace.options :refer (element-opts)] [uxbox.ui.workspace.shortcuts :as wshortcuts] [uxbox.ui.workspace.pagesmngr :refer (pagesmngr)] [uxbox.ui.workspace.header :refer (header)] @@ -60,7 +59,8 @@ [own projectid] (let [{:keys [flags] :as workspace} (rum/react wb/workspace-l) left-sidebar? (not (empty? (keep flags [:layers :sitemap]))) - right-sidebar? (not (empty? (keep flags [:icons :drawtools]))) + right-sidebar? (not (empty? (keep flags [:icons :drawtools + :element-options]))) classes (classnames :no-tool-bar-right (not right-sidebar?) :no-tool-bar-left (not left-sidebar?))] diff --git a/src/uxbox/ui/workspace/canvas.cljs b/src/uxbox/ui/workspace/canvas.cljs index d1af6c2a4..b17ae409b 100644 --- a/src/uxbox/ui/workspace/canvas.cljs +++ b/src/uxbox/ui/workspace/canvas.cljs @@ -23,8 +23,7 @@ [uxbox.ui.workspace.canvas.ruler :refer (ruler)] [uxbox.ui.workspace.canvas.selection :refer (shapes-selection)] [uxbox.ui.workspace.canvas.selrect :refer (selrect)] - [uxbox.ui.workspace.grid :refer (grid)] - [uxbox.ui.workspace.options :refer (element-opts)]) + [uxbox.ui.workspace.grid :refer (grid)]) (:import goog.events.EventType)) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; diff --git a/src/uxbox/ui/workspace/sidebar.cljs b/src/uxbox/ui/workspace/sidebar.cljs index e33d80ab5..ec38bf06c 100644 --- a/src/uxbox/ui/workspace/sidebar.cljs +++ b/src/uxbox/ui/workspace/sidebar.cljs @@ -7,6 +7,7 @@ [uxbox.rstore :as rs] [uxbox.ui.mixins :as mx] [uxbox.ui.workspace.base :as wb] + [uxbox.ui.workspace.sidebar.options :refer (options-toolbox)] [uxbox.ui.workspace.sidebar.layers :refer (layers-toolbox)] [uxbox.ui.workspace.sidebar.sitemap :refer (sitemap-toolbox)] [uxbox.ui.workspace.sidebar.icons :refer (icons-toolbox)] @@ -30,7 +31,7 @@ (def left-sidebar (mx/component {:render left-sidebar-render - :name "aside" + :name "left-sidebar" :mixins [rum/reactive mx/static]})) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; @@ -43,6 +44,8 @@ (html [:aside#settings-bar.settings-bar [:div.settings-bar-inside + (when (contains? flags :element-options) + (options-toolbox)) (when (contains? flags :drawtools) (draw-toolbox)) (when (contains? flags :icons) @@ -51,5 +54,5 @@ (def right-sidebar (mx/component {:render right-sidebar-render - :name "aside" + :name "right-sidebar" :mixins [rum/reactive mx/static]})) diff --git a/src/uxbox/ui/workspace/options.cljs b/src/uxbox/ui/workspace/sidebar/options.cljs similarity index 89% rename from src/uxbox/ui/workspace/options.cljs rename to src/uxbox/ui/workspace/sidebar/options.cljs index 7f130f527..f049701a9 100644 --- a/src/uxbox/ui/workspace/options.cljs +++ b/src/uxbox/ui/workspace/sidebar/options.cljs @@ -1,17 +1,21 @@ -(ns uxbox.ui.workspace.options +(ns uxbox.ui.workspace.sidebar.options (:require [sablono.core :as html :refer-macros [html]] [rum.core :as rum] + [cats.labs.lens :as l] + [uxbox.locales :refer (tr)] + [uxbox.router :as r] [uxbox.rstore :as rs] [uxbox.state :as st] [uxbox.shapes :as sh] + [uxbox.library :as library] [uxbox.data.workspace :as dw] + [uxbox.ui.workspace.base :as wb] [uxbox.ui.icons :as i] [uxbox.ui.mixins :as mx] - [uxbox.util.geom.point :as gpt] - [uxbox.util.dom :as dom] [uxbox.ui.colorpicker :refer (colorpicker)] [uxbox.ui.workspace.recent-colors :refer (recent-colors)] [uxbox.ui.workspace.base :as wb] + [uxbox.util.dom :as dom] [uxbox.util.data :refer (parse-int parse-float read-string)])) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; @@ -50,17 +54,6 @@ {:name "Stroke" :icon i/stroke}}) -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; Helpers -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; - -(defn- get-position - [{:keys [page] :as shape}] - (let [{:keys [x y width]} (sh/-outer-rect shape) - bpt (get @wb/bounding-rect page) - vpt (gpt/point (+ x width 50) (- y 50))] - (gpt/add vpt bpt))) - ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Implementation ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; @@ -489,35 +482,59 @@ -(defn element-opts-render + +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; Components +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; + +(defn options-menus-render [own shape] (let [local (:rum/local own) - zoom 1 shape (rum/react shape) - scroll (rum/react wb/scroll-a) - pos (-> (get-position shape) - (gpt/subtract scroll)) ;; and multiply by zoom in future menus (get +menus-map+ (:type shape)) active-menu (:menu @local (first menus))] - (when (seq menus) - (html - [:div#element-options.element-options - {:style {:left (:x pos) :top (:y pos)}} - [:ul.element-icons - (for [menu-id (get +menus-map+ (:type shape)) - :let [menu (get +menus-by-id+ menu-id) - menu (assoc menu :id menu-id) - selected? (= active-menu menu-id)]] - [:li#e-info {:on-click #(swap! local assoc :menu menu-id) - :key (str "menu-" (:id menu)) - :class (when selected? "selected")} - (:icon menu)])] - (let [menu (get +menus-by-id+ active-menu) - menu (assoc menu :id active-menu)] - (-render-menu menu own shape local))])))) + (html + [:div + [:ul.element-icons + (for [menu-id (get +menus-map+ (:type shape)) + :let [menu (get +menus-by-id+ menu-id) + menu (assoc menu :id menu-id) + selected? (= active-menu menu-id)]] + [:li#e-info {:on-click #(swap! local assoc :menu menu-id) + :key (str "menu-" (:id menu)) + :class (when selected? "selected")} + (:icon menu)])] + (let [menu (get +menus-by-id+ active-menu) + menu (assoc menu :id active-menu)] + (-render-menu menu own shape local))]))) -(def ^:static element-opts +(def ^:static ^:private options-menus (mx/component - {:render element-opts-render - :name "element-opts" - :mixins [rum/reactive (mx/local {})]})) + {:render options-menus-render + :name "options-menus" + :mixins [mx/static rum/reactive (mx/local)]})) + +(defn options-toolbox-render + [own shape] + (let [workspace (rum/react wb/workspace-l) + close #(rs/emit! (dw/toggle-flag :element-options)) + shape (when (and (:selected workspace) + (= (count (:selected workspace)) 1)) + (let [shape-id (first (:selected workspace))] + (l/focus-atom (l/in [:shapes-by-id shape-id]) st/state)))] + (html + [:div.elementa-options.tool-window + [:div.tool-window-bar + [:div.tool-window-icon i/project-tree] + [:span (tr "ds.element-options")] + [:div.tool-window-close {:on-click close} i/close]] + [:div.tool-window-content + [:div.element-options.tool-window + (if shape + (options-menus shape))]]]))) + +(def ^:static options-toolbox + (mx/component + {:render options-toolbox-render + :name "options-toolbox" + :mixins [mx/static rum/reactive (mx/local)]}))