From 9edb2a4ee0e573061a76a8d55967d5fa4f53d0c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Espino?= Date: Tue, 20 Dec 2016 11:23:01 +0100 Subject: [PATCH] Allow edition on collections lists, and adding images counter (except for Storage) --- .../styles/main/partials/library-bar.scss | 26 ++++++++++- .../src/uxbox/main/ui/dashboard/colors.cljs | 44 ++++++++++++++---- .../src/uxbox/main/ui/dashboard/icons.cljs | 44 ++++++++++++++---- .../src/uxbox/main/ui/dashboard/images.cljs | 45 ++++++++++++++----- 4 files changed, 129 insertions(+), 30 deletions(-) diff --git a/frontend/resources/styles/main/partials/library-bar.scss b/frontend/resources/styles/main/partials/library-bar.scss index 5141ba594..0e8c26238 100644 --- a/frontend/resources/styles/main/partials/library-bar.scss +++ b/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; + } } } diff --git a/frontend/src/uxbox/main/ui/dashboard/colors.cljs b/frontend/src/uxbox/main/ui/dashboard/colors.cljs index 41c9d6530..f681de868 100644 --- a/frontend/src/uxbox/main/ui/dashboard/colors.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/colors.cljs @@ -90,17 +90,43 @@ ;; --- Nav -(mx/defc nav-item - {:mixins [mx/static]} - [{:keys [id type name] :as coll} selected?] - (letfn [(on-click [event] - (let [type (or type :own)] - (st/emit! (dc/select-collection type id))))] - (let [colors (count (:colors coll))] +(mx/defcs nav-item + {:mixins [(mx/local) mx/static]} + [own {:keys [id type name] :as coll} selected?] + (let [colors (count (:colors coll)) + editable? (= type :own) + local (:rum/local own)] + (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 coll name "Storage")] + (if (:edit @local) + [: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))]]))) diff --git a/frontend/src/uxbox/main/ui/dashboard/icons.cljs b/frontend/src/uxbox/main/ui/dashboard/icons.cljs index 8c828c32b..dac8c0b8f 100644 --- a/frontend/src/uxbox/main/ui/dashboard/icons.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/icons.cljs @@ -128,17 +128,43 @@ (filter #(= id (:collection %))) (count))) -(mx/defc nav-item - {:mixins [mx/static mx/reactive]} - [{:keys [id type name num-icons] :as coll} selected?] - (letfn [(on-click [event] - (let [type (or type :own)] - (st/emit! (di/select-collection type id))))] - (let [num-icons (or num-icons (react-count-icons id))] +(mx/defcs nav-item + {:mixins [(mx/local) mx/static mx/reactive]} + [own {:keys [id type name num-icons] :as coll} selected?] + (let [num-icons (or num-icons (react-count-icons id)) + editable? (= type :own) + local (:rum/local own)] + (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 coll name "Storage")] + (if (:edit @local) + [: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))]]))) diff --git a/frontend/src/uxbox/main/ui/dashboard/images.cljs b/frontend/src/uxbox/main/ui/dashboard/images.cljs index 903e9d20c..ae3859c0f 100644 --- a/frontend/src/uxbox/main/ui/dashboard/images.cljs +++ b/frontend/src/uxbox/main/ui/dashboard/images.cljs @@ -126,19 +126,44 @@ (filter #(= id (:collection %))) (count))) -(mx/defc nav-item - {:mixins [mx/static mx/reactive]} - [{:keys [id type name] :as coll} selected?] - (letfn [(on-click [event] - (let [type (or type :own)] - (st/emit! (di/select-collection type id))))] - (let [num-images (react-count-images id)] +(mx/defcs nav-item + {:mixins [(mx/local) mx/static mx/reactive]} + [own {:keys [id type name num-images] :as coll} selected?] + (let [editable? (= type :own) + local (:rum/local own)] + (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 coll name "Storage")] + (if (:edit @local) + [: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]}