Add the ability to rename layer.

resources/styles/main/partials/sidebar-layers.scss

@@ -178,7 +178,11 @@
 
       }
 
-      span {
+      span.element-name {
+        min-width: 40px;
+        min-height: 16px;
+        display: block;
+
         color: $medium-ui-text;
         font-size: $fs13;
         overflow-x: hidden;
@@ -186,6 +190,14 @@
         white-space: nowrap;
       }
 
+      input.element-name {
+        margin: 0px;
+        border: 1px solid #eee;
+        padding: 3px;
+        font-size: $fs13;
+        width: 120px;
+      }
+
       &.selected {
 
         .element-icon {

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

@@ -6,9 +6,8 @@
 ;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 (ns uxbox.main.ui.workspace.sidebar.layers
-  (:require [sablono.core :as html :refer-macros [html]]
+  (:require [lentes.core :as l]
-            [rum.core :as rum]
+            [cuerdas.core :as str]
-            [lentes.core :as l]
             [goog.events :as events]
             [uxbox.util.router :as r]
             [uxbox.util.rstore :as rs]
@@ -25,18 +24,12 @@
             [uxbox.util.dom :as dom])
   (:import goog.events.EventType))
 
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; --- Helpers
-;; Lenses
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (defn- focus-page
-  [pageid]
+  [id]
-  (as-> (l/in [:pages-by-id pageid]) $
+  (-> (l/in [:pages-by-id id])
-    (l/derive $ st/state)))
+      (l/derive st/state)))
-
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; Components
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (defn- select-shape
   [selected item event]
@@ -117,7 +110,38 @@
         :bottom
         :top))))
 
-(defn- layer-element-render
+;; --- Shape Name (Component)
+
+(mx/defcs shape-name
+  "A generic component that displays the shape name
+  if it is available and allows inline edition of it."
+  {:mixins [mx/static (mx/local)]}
+  [own shape]
+  (let [local (:rum/local own)]
+    (letfn [(on-blur [event]
+              (let [parent (.-parentNode (.-target event))]
+                (set! (.-draggable parent) true))
+              (swap! local assoc :edition false))
+            (on-click [event]
+              (dom/stop-propagation event)
+              (dom/prevent-default event)
+              (let [parent (.-parentNode (.-target event))]
+                (set! (.-draggable parent) false))
+              (swap! local assoc :edition true))]
+      (if (:edition @local)
+        [:input.element-name
+         {:type "text"
+          :on-blur on-blur
+          :auto-focus true
+          :default-value (:name shape "")}]
+        [:span.element-name
+         {:on-click on-click}
+         (:name shape "")]))))
+
+;; --- Layer Simple (Component)
+
+(mx/defcs layer-simple
+  {:mixins [mx/static (mx/local)]}
   [own item selected]
   (let [selected? (contains? selected (:id item))
         select #(select-shape selected item %)
@@ -155,7 +179,6 @@
               (swap! local assoc :over true))
             (on-drag-leave [event]
               (swap! local assoc :over false))]
-      (html
       [:li {:key (str (:id item))
             :class (when selected? "selected")}
        [:div.element-list-body
@@ -182,17 +205,12 @@
            :on-click toggle-blocking}
           i/lock]]
         [:div.element-icon (element-icon item)]
-         [:span (:name item "Unnamed")]]]))))
+        (shape-name item)]])))
 
-(def ^:private layer-element
+;; --- Layer Group (Component)
-  (mx/component
-   {:render layer-element-render
-    :name "layer-element"
-    :mixins [mx/static (mx/local)]}))
 
-(declare layer-group)
+(mx/defcs layer-group
-
+  {:mixins [mx/static mx/reactive (mx/local)]}
-(defn- layer-group-render
   [own item selected]
   (let [local (:rum/local own)
         selected? (contains? selected (:id item))
@@ -235,7 +253,6 @@
               (swap! local assoc :over true))
             (on-drag-leave [event]
               (swap! local assoc :over false))]
-      (html
       [:li.group {:class (when open? "open")}
        [:div.element-list-body
         {:class classes
@@ -261,7 +278,7 @@
            :on-click toggle-locking}
           i/chain]]
         [:div.element-icon i/folder]
-         [:span (:name item "Unnamed group")]
+        (shape-name item)
         [:span.toggle-content
          {:on-click toggle-open
           :class (when open? "inverse")}
@@ -272,18 +289,15 @@
                 :let [key (str (:id shape))]]
             (if (= (:type shape) :group)
               (-> (layer-group shape selected)
-                   (rum/with-key key))
+                  (mx/with-key key))
-               (-> (layer-element shape selected)
+              (-> (layer-simple shape selected)
-                   (rum/with-key key))))])]))))
+                  (mx/with-key key))))])])))
 
-(def ^:private layer-group
+;; --- Layers Toolbox (Component)
-  (mx/component
-   {:render layer-group-render
-    :name "layer-group"
-    :mixins [mx/static mx/reactive (mx/local)]}))
 
-(defn layers-render
+(mx/defc layers-toolbox
-  [own]
+  {:mixins [mx/reactive]}
+  []
   (let [workspace (mx/react wb/workspace-ref)
         selected (:selected workspace)
         shapes-by-id (mx/react wb/shapes-by-id-ref)
@@ -294,7 +308,6 @@
         degroup #(rs/emit! (uds/degroup-selected))
         delete #(rs/emit! (uds/delete-selected))
         dragel (volatile! nil)]
-    (html
     [:div#layers.tool-window
      [:div.tool-window-bar
       [:div.tool-window-icon i/layers]
@@ -306,18 +319,12 @@
              :let [key (str (:id shape))]]
          (if (= (:type shape) :group)
            (-> (layer-group shape selected)
-                (rum/with-key key))
+               (mx/with-key key))
-            (-> (layer-element shape selected)
+           (-> (layer-simple shape selected)
-                (rum/with-key key))))]]
+               (mx/with-key key))))]]
      [:div.layers-tools
       [:ul.layers-tools-content
        [:li.clone-layer {:on-click duplicate} i/copy]
        [:li.group-layer {:on-click group} i/folder]
        [:li.degroup-layer {:on-click degroup} i/ungroup]
-        [:li.delete-layer {:on-click delete} i/trash]]]])))
+       [:li.delete-layer {:on-click delete} i/trash]]]]))
-
-(def layers-toolbox
-  (mx/component
-   {:render layers-render
-    :name "layers"
-    :mixins [mx/reactive]}))