Move element options to sidebar.

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}]

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?))]

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.grid :refer (grid)])
-            [uxbox.ui.workspace.options :refer (element-opts)])
   (:import goog.events.EventType))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

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]}))

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,20 +482,19 @@
 
 
 
-(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
+     [:div
-        {: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)
@@ -514,10 +506,35 @@
           (:icon menu)])]
       (let [menu (get +menus-by-id+ active-menu)
             menu (assoc menu :id active-menu)]
-          (-render-menu menu own shape local))]))))
+        (-render-menu menu own shape local))])))
 
-(def ^:static element-opts
+(def ^:static ^:private options-menus
   (mx/component
-   {:render element-opts-render
+   {:render options-menus-render
-    :name "element-opts"
+    :name "options-menus"
-    :mixins [rum/reactive (mx/local {})]}))
+    :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)]}))