mirror of
https://github.com/penpot/penpot.git
synced 2025-02-10 09:08:31 -05:00
Add rename support for icons and images.
This commit is contained in:
Andrey Antukh
parent
e80ecd7175
commit
dcb35084a1
4 changed files with 103 additions and 55 deletions
|
|
@ -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))
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
(when (= 1 (count selected))
|
||||
[:span.move-item.tooltip.tooltip-top
|
||||
{:alt "Rename"}
|
||||
i/pencil]
|
||||
{: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
|
||||
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
(when (= 1 (count selected))
|
||||
[:span.move-item.tooltip.tooltip-top
|
||||
{:alt "Rename"}
|
||||
i/pencil]
|
||||
{: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
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue