diff --git a/src/uxbox/main/data/icons.cljs b/src/uxbox/main/data/icons.cljs index c06bdeeda..409304a3a 100644 --- a/src/uxbox/main/data/icons.cljs +++ b/src/uxbox/main/data/icons.cljs @@ -245,32 +245,32 @@ {:pre [(or (uuid? id) (nil? id))]} (CreateIcons. id files)) -;; --- Icon Updated +;; --- Icon Persisted -(defrecord IconUpdated [id data] +(defrecord IconPersisted [id data] rs/UpdateEvent (-apply-update [_ state] (assoc-in state [:icons id] data))) -(defn icon-updated +(defn icon-persisted [{:keys [id] :as data}] {:pre [(map? data)]} - (IconUpdated. id data)) + (IconPersisted. id data)) -;; --- Update Icon +;; --- Persist Icon -(defrecord UpdateIcon [id] +(defrecord PersistIcon [id] rs/WatchEvent (-apply-watch [_ state stream] (let [icon (get-in state [:icons id])] (->> (rp/req :update/icon icon) (rx/map :payload) - (rx/map icon-updated))))) + (rx/map icon-persisted))))) -(defn update-icon +(defn persist-icon [id] {:pre [(uuid? id)]} - (UpdateIcon. id)) + (PersistIcon. id)) ;; --- Icons Fetched @@ -321,6 +321,22 @@ {:pre [(uuid? id)]} (DeleteIcon. id)) +;; --- Rename Icon + +(defrecord RenameIcon [id name] + rs/UpdateEvent + (-apply-update [_ state] + (assoc-in state [:icons id :name] name)) + + rs/WatchEvent + (-apply-watch [_ state stream] + (rx/of (persist-icon id)))) + +(defn rename-icon + [id name] + {:pre [(uuid? id) (string? name)]} + (RenameIcon. id name)) + ;; --- Select icon (defrecord SelectIcon [id] @@ -389,7 +405,7 @@ (let [selected (get-in state [:dashboard :icons :selected])] (rx/merge (->> (rx/from-coll selected) - (rx/map update-icon)) + (rx/map persist-icon)) (->> (rx/from-coll selected) (rx/map deselect-icon)))))) @@ -413,13 +429,16 @@ ;; --- Update Opts (Filtering & Ordering) -(defrecord UpdateOpts [order filter] +(defrecord UpdateOpts [order filter edition] rs/UpdateEvent (-apply-update [_ state] (update-in state [:dashboard :icons] merge + {:edition edition} (when order {:order order}) (when filter {:filter filter})))) (defn update-opts - [& {:keys [order filter] :as opts}] - (UpdateOpts. order filter)) + [& {:keys [order filter edition] + :or {edition false} + :as opts}] + (UpdateOpts. order filter edition)) diff --git a/src/uxbox/main/data/images.cljs b/src/uxbox/main/data/images.cljs index 3da19eefa..ac533d13b 100644 --- a/src/uxbox/main/data/images.cljs +++ b/src/uxbox/main/data/images.cljs @@ -446,13 +446,16 @@ ;; --- Update Opts (Filtering & Ordering) -(defrecord UpdateOpts [order filter] +(defrecord UpdateOpts [order filter edition] rs/UpdateEvent (-apply-update [_ state] (update-in state [:dashboard :images] merge + {:edition edition} (when order {:order order}) (when filter {:filter filter})))) (defn update-opts - [& {:keys [order filter] :as opts}] - (UpdateOpts. order filter)) + [& {:keys [order filter edition] + :or {edition false} + :as opts}] + (UpdateOpts. order filter edition)) diff --git a/src/uxbox/main/ui/dashboard/icons.cljs b/src/uxbox/main/ui/dashboard/icons.cljs index 503151bfc..92485410d 100644 --- a/src/uxbox/main/ui/dashboard/icons.cljs +++ b/src/uxbox/main/ui/dashboard/icons.cljs @@ -236,9 +236,8 @@ (mx/defcs grid-options {:mixins [(mx/local) mx/static]} - [own {:keys [type id] :as coll}] - (let [editable? (or (= type :own) - (nil? coll)) + [own {:keys [type id] :as coll} selected] + (let [editable? (or (= type :own) (nil? coll)) local (:rum/local own)] (letfn [(delete [] (rs/emit! (di/delete-selected))) @@ -258,7 +257,10 @@ (swap! local assoc :show-move-tooltip false :show-copy-tooltip false) - (rs/emit! (di/move-selected selected)))] + (rs/emit! (di/move-selected selected))) + (on-rename [event] + (let [selected (first selected)] + (rs/emit! (di/update-opts :edition selected))))] ;; MULTISELECT OPTIONS BAR [:div.multiselect-bar (if editable? @@ -277,9 +279,11 @@ :title "Move to library" :on-select on-move)) i/organize] - [:span.move-item.tooltip.tooltip-top - {:alt "Rename"} - i/pencil] + (when (= 1 (count selected)) + [:span.move-item.tooltip.tooltip-top + {:alt "Rename" + :on-click on-rename} + i/pencil]) [:span.delete.tooltip.tooltip-top {:alt "Delete" :on-click on-delete} @@ -294,12 +298,25 @@ i/organize]])]))) (mx/defc grid-item - [{:keys [id created-at] :as icon} selected?] + {:mixins [mx/static]} + [{:keys [id created-at] :as icon} selected? edition?] (letfn [(toggle-selection [event] (rs/emit! (di/toggle-icon-selection id))) (toggle-selection-shifted [event] (when (kbd/shift? event) - (toggle-selection event)))] + (toggle-selection event))) + (on-key-down [event] + (when (kbd/enter? event) + (on-blur event))) + (on-blur [event] + (let [target (dom/event->target event) + name (dom/get-value target)] + (rs/emit! (di/update-opts :edition false) + (di/rename-icon id name)))) + (on-edit [event] + (dom/stop-propagation event) + (dom/prevent-default event) + (rs/emit! (di/update-opts :edition id)))] [:div.grid-item.small-item.project-th {:on-click toggle-selection-shifted :id (str "grid-item-" id)} @@ -312,15 +329,20 @@ [:span.grid-item-image (icon/icon-svg icon)] [:div.item-info - [:h3 (:name icon)] - (str "Uploaded at " (dt/format created-at "L"))] - #_[:div.project-th-actions - [:div.project-th-icon.edit i/pencil] - [:div.project-th-icon.delete i/trash]]])) + (if edition? + [:input {:type "text" + :auto-focus true + :on-key-down on-key-down + :on-blur on-blur + :on-click on-edit + :default-value (:name icon)}] + [:h3 {:on-double-click on-edit} + (:name icon)]) + (str "Uploaded at " (dt/format created-at "L"))]])) (mx/defc grid {:mixins [mx/static mx/reactive]} - [{:keys [selected id type] :as state}] + [{:keys [selected edition id type] :as state}] (let [editable? (or (= type :own) (nil? id)) ordering (:order state :name) filtering (:filter state "") @@ -334,8 +356,9 @@ (when editable? (grid-form id)) (for [icon icons :let [id (:id icon) + edition? (= edition id) selected? (contains? selected id)]] - (-> (grid-item icon selected?) + (-> (grid-item icon selected? edition?) (mx/with-key (str id))))]])) (mx/defc content @@ -345,7 +368,7 @@ (page-title coll) (grid state) (when (seq selected) - (grid-options coll))]) + (grid-options coll selected))]) ;; --- Menu diff --git a/src/uxbox/main/ui/dashboard/images.cljs b/src/uxbox/main/ui/dashboard/images.cljs index 4b8e33865..245959207 100644 --- a/src/uxbox/main/ui/dashboard/images.cljs +++ b/src/uxbox/main/ui/dashboard/images.cljs @@ -240,7 +240,7 @@ (mx/defcs grid-options {:mixins [(mx/local) mx/static]} - [own {:keys [type id] :as coll}] + [own {:keys [type id] :as coll} selected] (let [editable? (or (= type :own) (nil? coll)) local (:rum/local own)] (letfn [(delete [] @@ -260,7 +260,10 @@ (swap! local assoc :show-move-tooltip false :show-copy-tooltip false) - (rs/emit! (di/move-selected selected)))] + (rs/emit! (di/move-selected selected))) + (on-rename [event] + (let [selected (first selected)] + (rs/emit! (di/update-opts :edition selected))))] ;; MULTISELECT OPTIONS BAR [:div.multiselect-bar (if editable? @@ -279,9 +282,11 @@ :title "Move to library" :on-select on-move)) i/organize] - [:span.move-item.tooltip.tooltip-top - {:alt "Rename"} - i/pencil] + (when (= 1 (count selected)) + [:span.move-item.tooltip.tooltip-top + {:alt "Rename" + :on-click on-rename} + i/pencil]) [:span.delete.tooltip.tooltip-top {:alt "Delete" :on-click on-delete} @@ -295,10 +300,9 @@ :on-select on-copy)) i/organize]])]))) -(mx/defcs grid-item - {:mixins [mx/static (mx/local)]} - [{:keys [rum/local] :as own} - {:keys [id created-at] :as image} selected?] +(mx/defc grid-item + {:mixins [mx/static]} + [{:keys [id created-at] :as image} selected? edition?] (letfn [(toggle-selection [event] (rs/emit! (di/toggle-image-selection id))) (toggle-selection-shifted [event] @@ -309,18 +313,15 @@ (on-blur event))) (on-blur [event] (let [target (dom/event->target event) - name (dom/get-value target) - id (:id image)] - (swap! local assoc :edition false) - (rs/emit! (di/rename-image id name)))) + name (dom/get-value target)] + (rs/emit! (di/update-opts :edition false) + (di/rename-image id name)))) (on-edit [event] (dom/stop-propagation event) (dom/prevent-default event) - (swap! local assoc :edition true))] - + (rs/emit! (di/update-opts :edition id)))] [:div.grid-item.images-th - {:on-click toggle-selection-shifted - :on-double-click on-edit} + {:on-click toggle-selection-shifted} [:div.grid-item-th {:style {:background-image (str "url('" (:thumbnail image) "')")}} [:div.input-checkbox.check-primary @@ -330,20 +331,21 @@ :checked selected?}] [:label {:for (:id image)}]]] [:div.item-info - (if (:edition @local) + (if edition? [:input {:type "text" :auto-focus true :on-key-down on-key-down :on-blur on-blur :on-click on-edit :default-value (:name image)}] - [:h3 (:name image)]) + [:h3 {:on-double-click on-edit} + (:name image)]) [:span.date (str "Uploaded at " (dt/format created-at "L"))]]])) (mx/defc grid {:mixins [mx/static mx/reactive]} - [{:keys [id type selected] :as state}] + [{:keys [id type selected edition] :as state}] (let [editable? (or (= type :own) (nil? id)) ordering (:order state :name) filtering (:filter state "") @@ -357,8 +359,9 @@ (when editable? (grid-form id)) (for [image images :let [id (:id image) + edition? (= edition id) selected? (contains? selected id)]] - (-> (grid-item image selected?) + (-> (grid-item image selected? edition?) (mx/with-key (str id))))]])) (mx/defc content @@ -368,7 +371,7 @@ (page-title coll) (grid state) (when (seq selected) - (grid-options coll))]) + (grid-options coll selected))]) ;; --- Menu