Allow edition on collections lists, and adding images counter (except for Storage)

frontend/resources/styles/main/partials/library-bar.scss

@@ -67,7 +67,7 @@
         flex-shrink: 0;
         padding: 10px;
 
-        .element-title {
+        span.element-title {
           color: $color-gray-dark;
           font-weight: bold;
           margin-bottom: 5px;
@@ -76,6 +76,25 @@
           white-space: nowrap;
         }
 
+        input.element-title {
+          border: 0;
+          height: 30px;
+          padding: 5px;
+        }
+
+        .close {
+            background: $color-white;
+            cursor: pointer;
+            padding: 5px 10px;
+
+            svg {
+              fill: $color-gray;
+              height: 20px;
+              transform: rotate(45deg) translateY(7px);
+              width: 20px;
+            }
+        }
+
         .element-subtitle {
           color: $color-gray-light;
           font-style: italic;
@@ -85,10 +104,13 @@
         &.current {
           background-color: $main-ui-color;
 
-          .element-title,
+          span.element-title,
           .element-subtitle {
             color: $color-white;
           }
+          input.element-title {
+            color: $color-gray-dark;
+          }
         }
 
       }

frontend/src/uxbox/main/ui/dashboard/colors.cljs

@@ -90,17 +90,43 @@
 
 ;; --- Nav
 
-(mx/defc nav-item
+(mx/defcs nav-item
-  {:mixins [mx/static]}
+  {:mixins [(mx/local) mx/static]}
-  [{:keys [id type name] :as coll} selected?]
+  [own {:keys [id type name] :as coll} selected?]
-  (letfn [(on-click [event]
+  (let [colors (count (:colors coll))
-            (let [type (or type :own)]
+        editable? (= type :own)
-              (st/emit! (dc/select-collection type id))))]
+        local (:rum/local own)]
-    (let [colors (count (:colors coll))]
+    (letfn [(on-click [event]
+              (let [type (or type :own)]
+                (st/emit! (dc/select-collection type id))))
+            (on-input-change [event]
+              (let [value (dom/get-target event)
+                    value (dom/get-value value)]
+                (swap! local assoc :name value)))
+            (on-cancel [event]
+                (swap! local dissoc :name)
+                (swap! local dissoc :edit))
+            (on-double-click [event]
+              (when editable?
+                (swap! local assoc :edit true)))
+            (on-input-keyup [event]
+              (when (k/enter? event)
+                (let [value (dom/get-target event)
+                      value (dom/get-value value)]
+                  (st/emit! (dc/rename-collection id (str/trim (:name @local))))
+                  (swap! local assoc :edit false))))]
       [:li {:on-click on-click
+            :on-double-click on-double-click
             :class-name (when selected? "current")}
-       [:span.element-title
+       (if (:edit @local)
-        (if coll name "Storage")]
+         [:div
+          [:input.element-title
+            {:value (if (:name @local) (:name @local) (if coll name "Storage"))
+             :on-change on-input-change
+             :on-key-down on-input-keyup}]
+          [:span.close {:on-click on-cancel} i/close]]
+         [:span.element-title
+          (if coll name "Storage")])
        [:span.element-subtitle
         (tr "ds.num-elements" (t/c colors))]])))
 

frontend/src/uxbox/main/ui/dashboard/icons.cljs

@@ -128,17 +128,43 @@
        (filter #(= id (:collection %)))
        (count)))
 
-(mx/defc nav-item
+(mx/defcs nav-item
-  {:mixins [mx/static mx/reactive]}
+  {:mixins [(mx/local) mx/static mx/reactive]}
-  [{:keys [id type name num-icons] :as coll} selected?]
+  [own {:keys [id type name num-icons] :as coll} selected?]
-  (letfn [(on-click [event]
+  (let [num-icons (or num-icons (react-count-icons id))
-            (let [type (or type :own)]
+        editable? (= type :own)
-              (st/emit! (di/select-collection type id))))]
+        local (:rum/local own)]
-    (let [num-icons (or num-icons (react-count-icons id))]
+    (letfn [(on-click [event]
+              (let [type (or type :own)]
+                (st/emit! (di/select-collection type id))))
+            (on-input-change [event]
+              (let [value (dom/get-target event)
+                    value (dom/get-value value)]
+                (swap! local assoc :name value)))
+            (on-cancel [event]
+                (swap! local dissoc :name)
+                (swap! local dissoc :edit))
+            (on-double-click [event]
+              (when editable?
+                (swap! local assoc :edit true)))
+            (on-input-keyup [event]
+              (when (kbd/enter? event)
+                (let [value (dom/get-target event)
+                      value (dom/get-value value)]
+                  (st/emit! (di/rename-collection id (str/trim (:name @local))))
+                  (swap! local assoc :edit false))))]
       [:li {:on-click on-click
+            :on-double-click on-double-click
             :class-name (when selected? "current")}
-       [:span.element-title
+       (if (:edit @local)
-        (if coll name "Storage")]
+         [:div
+          [:input.element-title
+            {:value (if (:name @local) (:name @local) (if coll name "Storage"))
+             :on-change on-input-change
+             :on-key-down on-input-keyup}]
+          [:span.close {:on-click on-cancel} i/close]]
+         [:span.element-title
+          (if coll name "Storage")])
        [:span.element-subtitle
         (tr "ds.num-elements" (t/c num-icons))]])))
 

frontend/src/uxbox/main/ui/dashboard/images.cljs

@@ -126,19 +126,44 @@
        (filter #(= id (:collection %)))
        (count)))
 
-(mx/defc nav-item
+(mx/defcs nav-item
-  {:mixins [mx/static mx/reactive]}
+  {:mixins [(mx/local) mx/static mx/reactive]}
-  [{:keys [id type name] :as coll} selected?]
+  [own {:keys [id type name num-images] :as coll} selected?]
-  (letfn [(on-click [event]
+  (let [editable? (= type :own)
-            (let [type (or type :own)]
+        local (:rum/local own)]
-              (st/emit! (di/select-collection type id))))]
+    (letfn [(on-click [event]
-    (let [num-images (react-count-images id)]
+              (let [type (or type :own)]
+                (st/emit! (di/select-collection type id))))
+            (on-input-change [event]
+              (let [value (dom/get-target event)
+                    value (dom/get-value value)]
+                (swap! local assoc :name value)))
+            (on-cancel [event]
+                (swap! local dissoc :name)
+                (swap! local dissoc :edit))
+            (on-double-click [event]
+              (when editable?
+                (swap! local assoc :edit true)))
+            (on-input-keyup [event]
+              (when (kbd/enter? event)
+                (let [value (dom/get-target event)
+                      value (dom/get-value value)]
+                  (st/emit! (di/rename-collection id (str/trim (:name @local))))
+                  (swap! local assoc :edit false))))]
       [:li {:on-click on-click
+            :on-double-click on-double-click
             :class-name (when selected? "current")}
-       [:span.element-title
+       (if (:edit @local)
-        (if coll name "Storage")]
+         [:div
+          [:input.element-title
+            {:value (if (:name @local) (:name @local) (if coll name "Storage"))
+             :on-change on-input-change
+             :on-key-down on-input-keyup}]
+          [:span.close {:on-click on-cancel} i/close]]
+         [:span.element-title
+          (if coll name "Storage")])
        [:span.element-subtitle
-        (tr "ds.num-elements" (t/c num-images))]])))
+        (tr "ds.num-elements" (t/c (or num-images (react-count-images id))))]])))
 
 (mx/defc nav-section
   {:mixins [mx/static]}