Add page menu to element options widget.

src/uxbox/main/ui/workspace/sidebar/options.cljs

@@ -26,77 +26,98 @@
    [uxbox.main.ui.workspace.sidebar.options.fill :as options-fill]
    [uxbox.main.ui.workspace.sidebar.options.text :as options-text]
    [uxbox.main.ui.workspace.sidebar.options.stroke :as options-stroke]
+   [uxbox.main.ui.workspace.sidebar.options.page :as options-page]
    [uxbox.main.ui.workspace.sidebar.options.interactions :as options-interactions]
    [uxbox.main.geom :as geom]
    [uxbox.util.dom :as dom]
-   [uxbox.util.data :refer (parse-int parse-float read-string)]))
+   [uxbox.util.data :as data]))
 
 ;; --- Constants
 
 (def ^:private +menus-map+
-  {:icon [:menu/icon-measures :menu/fill :menu/stroke :menu/interactions]
+  {:icon [::icon-measures ::fill ::stroke ::interactions]
-   :rect [:menu/rect-measures :menu/fill :menu/stroke :menu/interactions]
+   :rect [::rect-measures ::fill ::stroke ::interactions]
-   :line [:menu/line-measures :menu/stroke :menu/interactions]
+   :line [::line-measures ::stroke ::interactions]
-   :path [:menu/fill :menu/stroke :menu/interactions]
+   :path [::fill ::stroke ::interactions]
-   :circle [:menu/circle-measures :menu/fill :menu/stroke :menu/interactions]
+   :circle [::circle-measures ::fill ::stroke ::interactions]
-   :text [:menu/fill :menu/text :menu/interactions]
+   :text [::fill ::text ::interactions]
-   :group []})
+   :image [::interactions]
+   :group [::interactions]
+   ::page [::page-measures ::page-grid-options]})
 
 (def ^:private +menus+
   [{:name "Size, position & rotation"
-    :id :menu/icon-measures
+    :id ::icon-measures
     :icon i/infocard
     :comp options-iconm/icon-measures-menu}
    {:name "Size, position & rotation"
-    :id :menu/rect-measures
+    :id ::rect-measures
     :icon i/infocard
     :comp options-rectm/rect-measures-menu}
    {:name "Size, position & rotation"
-    :id :menu/line-measures
+    :id ::line-measures
     :icon i/infocard
     :comp options-linem/line-measures-menu}
    {:name "Size, position & rotation"
-    :id :menu/circle-measures
+    :id ::circle-measures
     :icon i/infocard
     :comp options-circlem/circle-measures-menu}
    {:name "Fill"
-    :id :menu/fill
+    :id ::fill
     :icon i/fill
     :comp options-fill/fill-menu}
    {:name "Stroke"
-    :id :menu/stroke
+    :id ::stroke
     :icon i/stroke
     :comp options-stroke/stroke-menu}
    {:name "Text"
-    :id :menu/text
+    :id ::text
     :icon i/text
     :comp options-text/text-menu}
    {:name "Interactions"
-    :id :menu/interactions
+    :id ::interactions
     :icon i/action
-    :comp options-interactions/interactions-menu}])
+    :comp options-interactions/interactions-menu}
+   {:name "Page Measures (TODO)"
+    :id ::page-measures
+    :icon i/action
+    :comp options-page/measures-menu}
+   {:name "Grid Options (TODO)"
+    :id ::page-grid-options
+    :icon i/action
+    :comp options-page/grid-options-menu}])
 
 (def ^:private +menus-by-id+
-  (into {} (map #(vector (:id %) %)) +menus+))
+  (data/index-by-id +menus+))
 
 ;; --- Options
 
+(defn- options-did-remount
+  [old-own own]
+  (let [[prev-shape] (:rum/args old-own)
+        [curr-shape] (:rum/args own)]
+    (when (not (identical? prev-shape curr-shape))
+      (reset! (:rum/local own) {}))
+    own))
+
 (mx/defcs options
-  {:mixins [mx/static (mx/local)]}
+  {:mixins [mx/static (mx/local)]
-  [own shape]
+   :did-remount options-did-remount}
-  (let [local (:rum/local own)
+  [{:keys [rum/local] :as own} shape]
-        menus (get +menus-map+ (:type shape))
+  (let [menus (get +menus-map+ (:type shape ::page))
-        active-menu (:menu @local (first menus))]
+        contained-in? (into #{} menus)
+        active (:menu @local (first menus))]
+    (println "options" active)
     [:div
      [:ul.element-icons
-      (for [menu-id (get +menus-map+ (:type shape))
+      (for [menu-id (get +menus-map+ (:type shape ::page))
             :let [menu (get +menus-by-id+ menu-id)
-                  selected? (= active-menu menu-id)]]
+                  selected? (= active menu-id)]]
         [:li#e-info {:on-click #(swap! local assoc :menu menu-id)
                      :key (str "menu-" (:id menu))
                      :class (when selected? "selected")}
          (:icon menu)])]
-     (when-let [menu (get +menus-by-id+ active-menu)]
+     (when-let [menu (get +menus-by-id+ active)]
        ((:comp menu) menu shape))]))
 
 (def selected-shape-ref
@@ -119,6 +140,5 @@
       [:div.tool-window-close {:on-click close} i/close]]
      [:div.tool-window-content
       [:div.element-options
-       (if shape
+       (options shape)]]]))
-         (options shape))]]]))
 

src/uxbox/main/ui/workspace/sidebar/options/page.cljs

@@ -0,0 +1,41 @@
+;; 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 Andrey Antukh <niwi@niwi.nz>
+;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+
+(ns uxbox.main.ui.workspace.sidebar.options.page
+  "Page options menu entries."
+  (:require [lentes.core :as l]
+            [uxbox.util.i18n :refer (tr)]
+            [uxbox.util.router :as r]
+            [uxbox.util.rstore :as rs]
+            [uxbox.main.state :as st]
+            [uxbox.main.data.workspace :as udw]
+            [uxbox.main.data.shapes :as uds]
+            [uxbox.main.ui.icons :as i]
+            [uxbox.util.mixins :as mx :include-macros true]
+            [uxbox.main.ui.workspace.colorpicker :refer (colorpicker)]
+            [uxbox.main.ui.workspace.recent-colors :refer (recent-colors)]
+            [uxbox.main.geom :as geom]
+            [uxbox.util.dom :as dom]))
+
+
+(mx/defc measures-menu
+  {:mixins [mx/static]}
+  [menu]
+  [:div.element-set
+   [:div.element-set-title (:name menu)]
+   [:div.element-set-content
+    [:strong "Content here"]]])
+
+(mx/defc grid-options-menu
+  {:mixins [mx/static]}
+  [menu]
+  [:div.element-set
+   [:div.element-set-title (:name menu)]
+   [:div.element-set-content
+    [:strong "Content here"]]])
+
+

src/uxbox/main/ui/workspace/sidebar/options/rect_measures.cljs

@@ -51,7 +51,7 @@
               (rs/emit! (uds/unlock-proportions id))
               (rs/emit! (uds/lock-proportions id))))]
     (let [size (geom/size shape)]
-      [:div.element-set {:key (str (:id menu))}
+      [:div.element-set
        [:div.element-set-title (:name menu)]
        [:div.element-set-content
         ;; SLIDEBAR FOR ROTATION AND OPACITY