mirror of
https://github.com/penpot/penpot.git
synced 2025-06-05 11:01:41 +02:00
Major refactor of images page ns (in the same way as colors ns).
This commit is contained in:
Andrey Antukh
parent
9fa4d8f4d9
commit
3ad91671a2
1 changed files with 378 additions and 270 deletions
|
|
@ -50,321 +50,429 @@
|
||||||
projs
|
projs
|
||||||
(filter #(contains-term? (:name %) term) projs)))
|
(filter #(contains-term? (:name %) term) projs)))
|
||||||
|
|
||||||
;; --- Lenses
|
;; --- Refs
|
||||||
|
|
||||||
(def ^:private dashboard-ref
|
(def ^:private dashboard-ref
|
||||||
(-> (l/key :dashboard)
|
(-> (l/key :dashboard)
|
||||||
(l/derive st/state)))
|
(l/derive st/state)))
|
||||||
|
|
||||||
(def ^:private collections-by-id-ref
|
;; (def ^:private collections-by-id-ref
|
||||||
(-> (l/key :images-by-id)
|
;; (-> (l/key :images-by-id)
|
||||||
|
;; (l/derive st/state)))
|
||||||
|
|
||||||
|
;; (def ^:private images-ordering-ref
|
||||||
|
;; (-> (l/in [:dashboard :images-order])
|
||||||
|
;; (l/derive st/state)))
|
||||||
|
|
||||||
|
;; (def ^:private images-filtering-ref
|
||||||
|
;; (-> (l/in [:dashboard :images-filter])
|
||||||
|
;; (l/derive st/state)))
|
||||||
|
|
||||||
|
(def ^:private collections-map-ref
|
||||||
|
(-> (comp (l/key :images-by-id)
|
||||||
|
(ul/merge library/+image-collections-by-id+))
|
||||||
(l/derive st/state)))
|
(l/derive st/state)))
|
||||||
|
|
||||||
(def ^:private images-ordering-ref
|
(def ^:private collections-ref
|
||||||
(-> (l/in [:dashboard :images-order])
|
(-> (l/lens vals)
|
||||||
(l/derive st/state)))
|
(l/derive collections-map-ref)))
|
||||||
|
|
||||||
(def ^:private images-filtering-ref
|
|
||||||
(-> (l/in [:dashboard :images-filter])
|
|
||||||
(l/derive st/state)))
|
|
||||||
|
|
||||||
(defn- focus-collection
|
(defn- focus-collection
|
||||||
[collid]
|
[id]
|
||||||
(-> (l/key collid)
|
(-> (l/key id)
|
||||||
(l/derive collections-by-id-ref)))
|
(l/derive collections-map-ref)))
|
||||||
|
|
||||||
;; --- Page Title
|
;; --- Page Title
|
||||||
|
|
||||||
(defn page-title-render
|
(mx/defcs page-title
|
||||||
[own coll]
|
{:mixins [(mx/local {}) mx/static mx/reactive]}
|
||||||
|
[own {:keys [id] :as coll}]
|
||||||
(let [local (:rum/local own)
|
(let [local (:rum/local own)
|
||||||
dashboard (mx/react dashboard-ref)
|
dashboard (mx/react dashboard-ref)
|
||||||
own? (:builtin coll false)]
|
own? (= :builtin (:type coll))
|
||||||
(letfn [(persist [event]
|
edit? (:edit @local)]
|
||||||
(let [name (:coll-name @local)]
|
(letfn [(on-save [e]
|
||||||
(rs/emit! (di/rename-collection (:id coll) name))
|
(let [dom (mx/ref-node own "input")
|
||||||
|
name (.-innerText dom)]
|
||||||
|
(rs/emit! (di/rename-collection id (str/trim name)))
|
||||||
(swap! local assoc :edit false)))
|
(swap! local assoc :edit false)))
|
||||||
|
(on-cancel [e]
|
||||||
(on-key-down [event]
|
(swap! local assoc :edit false))
|
||||||
(cond
|
|
||||||
(kbd/esc? event)
|
|
||||||
(swap! local assoc :edit false)
|
|
||||||
|
|
||||||
(kbd/enter? event)
|
|
||||||
(do
|
|
||||||
(dom/stop-propagation event)
|
|
||||||
(persist event))))
|
|
||||||
|
|
||||||
(on-input [event]
|
|
||||||
(let [content (dom/event->inner-text event)]
|
|
||||||
(swap! local assoc :coll-name content)))
|
|
||||||
|
|
||||||
(on-edit [e]
|
(on-edit [e]
|
||||||
(swap! local assoc :edit true :coll-name (:name coll)))
|
(swap! local assoc :edit true))
|
||||||
|
(on-input-keydown [e]
|
||||||
(on-delete [e]
|
(cond
|
||||||
|
(kbd/esc? e) (on-cancel e)
|
||||||
|
(kbd/enter? e)
|
||||||
|
(do
|
||||||
|
(dom/prevent-default e)
|
||||||
|
(dom/stop-propagation e)
|
||||||
|
(on-save e))))
|
||||||
|
(on-delete []
|
||||||
(rs/emit! (di/delete-collection (:id coll))))]
|
(rs/emit! (di/delete-collection (:id coll))))]
|
||||||
(html
|
[:div.dashboard-title
|
||||||
[:div.dashboard-title
|
[:h2
|
||||||
[:h2
|
(if edit?
|
||||||
(if (:edit @local)
|
[:div.dashboard-title-field
|
||||||
[:div.dashboard-title-field
|
[:span.edit
|
||||||
[:span.edit
|
{:content-editable true
|
||||||
{:content-editable ""
|
:ref "input"
|
||||||
:on-input on-input
|
:on-key-down on-input-keydown}
|
||||||
:on-key-down on-key-down}
|
(:name coll)]
|
||||||
(:name coll)]
|
[:span.close {:on-click on-cancel} i/close]]
|
||||||
[:span.close
|
[:span.dashboard-title-field
|
||||||
{:on-click #(swap! local assoc :edit false)}
|
{:on-double-click on-edit}
|
||||||
i/close]]
|
(:name coll)])]
|
||||||
[:span.dashboard-title-field
|
(if (and (not own?) coll)
|
||||||
(:name coll)])]
|
[:div.edition
|
||||||
(if (and (not own?) coll)
|
(if edit?
|
||||||
[:div.edition
|
[:span {:on-click on-save} i/save]
|
||||||
(if (:edit @local)
|
[:span {:on-click on-edit} i/pencil])
|
||||||
[:span {:on-click persist} i/save]
|
[:span {:on-click on-delete} i/trash]])])))
|
||||||
[:span {:on-click on-edit} i/pencil])
|
|
||||||
[:span {:on-click on-delete} i/trash]])]))))
|
|
||||||
|
|
||||||
(def ^:private page-title
|
|
||||||
(mx/component
|
|
||||||
{:render page-title-render
|
|
||||||
:name "page-title"
|
|
||||||
:mixins [(mx/local) mx/static mx/reactive]}))
|
|
||||||
|
|
||||||
;; --- Nav
|
;; --- Nav
|
||||||
|
|
||||||
(defn nav-render
|
(mx/defc nav-item
|
||||||
[own]
|
{:mixins [mx/static]}
|
||||||
(let [dashboard (mx/react dashboard-ref)
|
[collection selected?]
|
||||||
collid (:collection-id dashboard)
|
(letfn [(on-click [event]
|
||||||
own? (= (:collection-type dashboard) :own)
|
(let [type (:type collection)
|
||||||
builtin? (= (:collection-type dashboard) :builtin)
|
id (:id collection)]
|
||||||
collections (if builtin?
|
(rs/emit! (di/select-collection type id))))]
|
||||||
(vals library/+image-collections-by-id+)
|
(let [colors (count (:data collection))]
|
||||||
(vals (mx/react collections-by-id-ref)))
|
[:li {:on-click on-click
|
||||||
show-builtin #(rs/emit! (di/set-collection-type :builtin))
|
:class-name (when selected? "current")}
|
||||||
show-own #(rs/emit! (di/set-collection-type :own))
|
[:span.element-title (:name collection)]
|
||||||
new-coll #(rs/emit! (di/create-collection))
|
[:span.element-subtitle
|
||||||
select-coll #(rs/emit! (di/set-collection % builtin?))]
|
(tr "ds.num-elements" (t/c colors))]])))
|
||||||
(html
|
|
||||||
[:div.library-bar
|
|
||||||
[:div.library-bar-inside
|
|
||||||
[:ul.library-tabs
|
|
||||||
[:li {:class-name (when builtin? "current")
|
|
||||||
:on-click show-builtin}
|
|
||||||
"STANDARD"]
|
|
||||||
[:li {:class-name (when own? "current")
|
|
||||||
:on-click show-own}
|
|
||||||
"YOUR LIBRARIES"]]
|
|
||||||
[:ul.library-elements
|
|
||||||
(when own?
|
|
||||||
[:li
|
|
||||||
[:a.btn-primary {:on-click new-coll} "+ New library"]])
|
|
||||||
(for [{:keys [id images name]} collections
|
|
||||||
:let [num (count images)]]
|
|
||||||
[:li {:key (str id)
|
|
||||||
:on-click (partial select-coll id)
|
|
||||||
:class (when (= id collid) "current")}
|
|
||||||
[:span.element-title name]
|
|
||||||
[:span.element-subtitle
|
|
||||||
(tr "ds.num-elements" (t/c num))]])]]])))
|
|
||||||
|
|
||||||
(def ^:private nav
|
(mx/defc nav-section
|
||||||
(mx/component
|
{:mixins [mx/static mx/reactive]}
|
||||||
{:render nav-render
|
[type selected]
|
||||||
:name "nav"
|
(let [own? (= type :own)
|
||||||
:mixins [mx/reactive mx/static]}))
|
builtin? (= type :builtin)
|
||||||
|
collections (cond->> (mx/react collections-ref)
|
||||||
|
own? (filter #(= :own (:type %)))
|
||||||
|
builtin? (filter #(= :builtin (:type %)))
|
||||||
|
own? (sort-by :id))]
|
||||||
|
[:ul.library-elements
|
||||||
|
(when own?
|
||||||
|
[:li
|
||||||
|
[:a.btn-primary
|
||||||
|
{:on-click #(rs/emit! (di/create-collection))}
|
||||||
|
"+ New library"]])
|
||||||
|
(for [coll collections
|
||||||
|
:let [selected? (= (:id coll) selected)
|
||||||
|
key (str (:id coll))]]
|
||||||
|
(-> (nav-item coll selected?)
|
||||||
|
(mx/with-key key)))]))
|
||||||
|
|
||||||
|
(mx/defc nav
|
||||||
|
{:mixins [mx/static mx/reactive]}
|
||||||
|
[]
|
||||||
|
(let [dashboard (mx/react dashboard-ref)
|
||||||
|
collections (mx/react collections-ref)
|
||||||
|
selected (:id dashboard)
|
||||||
|
type (:type dashboard)
|
||||||
|
own? (= type :own)
|
||||||
|
builtin? (= type :builtin)]
|
||||||
|
(letfn [(select-tab [type]
|
||||||
|
(let [xf (filter #(= type (:type %)))
|
||||||
|
colls (sequence xf collections)]
|
||||||
|
(if-let [item (first colls)]
|
||||||
|
(rs/emit! (di/select-collection type (:id item)))
|
||||||
|
(rs/emit! (di/select-collection type)))))]
|
||||||
|
[:div.library-bar
|
||||||
|
[:div.library-bar-inside
|
||||||
|
[:ul.library-tabs
|
||||||
|
[:li {:class-name (when builtin? "current")
|
||||||
|
:on-click (partial select-tab :builtin)}
|
||||||
|
"STANDARD"]
|
||||||
|
[:li {:class-name (when own? "current")
|
||||||
|
:on-click (partial select-tab :own)}
|
||||||
|
"YOUR LIBRARIES"]]
|
||||||
|
(nav-section type selected)]])))
|
||||||
|
|
||||||
;; --- Grid
|
;; --- Grid
|
||||||
|
|
||||||
(defn- grid-render
|
;; (defn- grid-render
|
||||||
[own]
|
;; [own]
|
||||||
(let [local (:rum/local own)
|
;; (let [local (:rum/local own)
|
||||||
dashboard (mx/react dashboard-ref)
|
;; dashboard (mx/react dashboard-ref)
|
||||||
coll-type (:collection-type dashboard)
|
;; coll-type (:collection-type dashboard)
|
||||||
coll-id (:collection-id dashboard)
|
;; coll-id (:collection-id dashboard)
|
||||||
own? (= coll-type :own)
|
;; own? (= coll-type :own)
|
||||||
builtin? (= coll-type :builtin)
|
;; builtin? (= coll-type :builtin)
|
||||||
coll (if builtin?
|
;; coll (if builtin?
|
||||||
(get library/+image-collections-by-id+ coll-id)
|
;; (get library/+image-collections-by-id+ coll-id)
|
||||||
(mx/react (focus-collection coll-id)))
|
;; (mx/react (focus-collection coll-id)))
|
||||||
images-filtering (mx/react images-filtering-ref)
|
;; images-filtering (mx/react images-filtering-ref)
|
||||||
images-ordering (mx/react images-ordering-ref)
|
;; images-ordering (mx/react images-ordering-ref)
|
||||||
images (->> (:images coll)
|
;; images (->> (:images coll)
|
||||||
(remove nil?)
|
;; (remove nil?)
|
||||||
(filter-images-by images-filtering)
|
;; (filter-images-by images-filtering)
|
||||||
(sort-images-by images-ordering))
|
;; (sort-images-by images-ordering))
|
||||||
show-menu? (not (empty? (:selected @local)))]
|
;; show-menu? (not (empty? (:selected @local)))]
|
||||||
(letfn [(toggle-check [image]
|
;; (letfn [(toggle-check [image]
|
||||||
(swap! local update :selected #(data/conj-or-disj % image)))
|
;; (swap! local update :selected #(data/conj-or-disj % image)))
|
||||||
(toggle-check-card [image event]
|
;; (toggle-check-card [image event]
|
||||||
(when (kbd/shift? event)
|
;; (when (kbd/shift? event)
|
||||||
(toggle-check image)))
|
;; (toggle-check image)))
|
||||||
(forward-click [event]
|
;; (delete-selected []
|
||||||
(dom/click (mx/ref-node own "file-input")))
|
;; (->> (:selected @local)
|
||||||
(delete-selected []
|
;; (run! #(rs/emit! (di/delete-image coll-id %)))))
|
||||||
(->> (:selected @local)
|
;; (when coll
|
||||||
(run! #(rs/emit! (di/delete-image coll-id %)))))
|
;; (html
|
||||||
(on-file-selected [event]
|
;; [:section.dashboard-grid.library
|
||||||
(let [files (dom/get-event-files event)]
|
;; (page-title coll)
|
||||||
(rs/emit! (di/create-images coll-id files))))]
|
;; [:div.dashboard-grid-content
|
||||||
(when coll
|
;; [:div.dashboard-grid-row
|
||||||
(html
|
;; (if own?
|
||||||
[:section.dashboard-grid.library
|
;; [:div.grid-item.add-project {:on-click forward-click}
|
||||||
(page-title coll)
|
;; [:span "+ New image"]
|
||||||
[:div.dashboard-grid-content
|
;; [:input.upload-image-input
|
||||||
[:div.dashboard-grid-row
|
;; {:style {:display "none"}
|
||||||
(if own?
|
;; :multiple true
|
||||||
[:div.grid-item.add-project {:on-click forward-click}
|
;; :ref "file-input"
|
||||||
[:span "+ New image"]
|
;; :value ""
|
||||||
[:input.upload-image-input
|
;; :type "file"
|
||||||
{:style {:display "none"}
|
;; :on-change on-file-selected}]])
|
||||||
:multiple true
|
|
||||||
:ref "file-input"
|
|
||||||
:value ""
|
|
||||||
:type "file"
|
|
||||||
:on-change on-file-selected}]])
|
|
||||||
|
|
||||||
(for [image images
|
;; (for [image images
|
||||||
:let [selected? (contains? (:selected @local) image)]]
|
;; :let [selected? (contains? (:selected @local) image)]]
|
||||||
[:div.grid-item.images-th
|
;; [:div.grid-item.images-th
|
||||||
{:key (:id image)
|
;; {:key (:id image)
|
||||||
:on-click (partial toggle-check-card image)}
|
;; :on-click (partial toggle-check-card image)}
|
||||||
[:div.grid-item-th
|
;; [:div.grid-item-th
|
||||||
{:style {:background-image (str "url('" (:thumbnail image) "')")}}
|
;; {:style {:background-image (str "url('" (:thumbnail image) "')")}}
|
||||||
[:div.input-checkbox.check-primary
|
;; [:div.input-checkbox.check-primary
|
||||||
[:input {:type "checkbox"
|
;; [:input {:type "checkbox"
|
||||||
:id (:id image)
|
;; :id (:id image)
|
||||||
:on-click (partial toggle-check image)
|
;; :on-click (partial toggle-check image)
|
||||||
:checked selected?}]
|
;; :checked selected?}]
|
||||||
[:label {:for (:id image)}]]]
|
;; [:label {:for (:id image)}]]]
|
||||||
[:span (:name image)]])]
|
;; [:span (:name image)]])]
|
||||||
|
|
||||||
(when show-menu?
|
;; (when show-menu?
|
||||||
;; MULTISELECT OPTIONS BAR
|
;; ;; MULTISELECT OPTIONS BAR
|
||||||
[:div.multiselect-bar
|
;; [:div.multiselect-bar
|
||||||
[:div.multiselect-nav
|
;; [:div.multiselect-nav
|
||||||
[:span.move-item.tooltip.tooltip-top {:alt "Copy to"} i/organize]
|
;; [:span.move-item.tooltip.tooltip-top {:alt "Copy to"} i/organize]
|
||||||
(if own?
|
;; (if own?
|
||||||
[:span.copy.tooltip.tooltip-top {:alt "Duplicate"} i/copy])
|
;; [:span.copy.tooltip.tooltip-top {:alt "Duplicate"} i/copy])
|
||||||
(if own?
|
;; (if own?
|
||||||
[:span.delete.tooltip.tooltip-top
|
;; [:span.delete.tooltip.tooltip-top
|
||||||
{:alt "Delete"
|
;; {:alt "Delete"
|
||||||
:on-click delete-selected}
|
;; :on-click delete-selected}
|
||||||
i/trash])]])]])))))
|
;; i/trash])]])]])))))
|
||||||
|
|
||||||
(def ^:private grid
|
;; (def ^:private grid
|
||||||
(mx/component
|
;; (mx/component
|
||||||
{:render grid-render
|
;; {:render grid-render
|
||||||
:name "grid"
|
;; :name "grid"
|
||||||
:mixins [(rum/local {:selected #{}}) mx/static mx/reactive]}))
|
;; :mixins [(rum/local {:selected #{}}) mx/static mx/reactive]}))
|
||||||
|
|
||||||
|
(mx/defcs grid-form
|
||||||
|
{:mixins [mx/static]}
|
||||||
|
[own coll-id]
|
||||||
|
(letfn [(forward-click [event]
|
||||||
|
(dom/click (mx/ref-node own "file-input")))
|
||||||
|
(on-file-selected [event]
|
||||||
|
(let [files (dom/get-event-files event)]
|
||||||
|
(rs/emit! (di/create-images coll-id files))))]
|
||||||
|
[:div.grid-item.add-project {:on-click forward-click}
|
||||||
|
[:span "+ New image"]
|
||||||
|
[:input.upload-image-input
|
||||||
|
{:style {:display "none"}
|
||||||
|
:multiple true
|
||||||
|
:ref "file-input"
|
||||||
|
:value ""
|
||||||
|
:type "file"
|
||||||
|
:on-change on-file-selected}]]))
|
||||||
|
|
||||||
|
(mx/defc grid-options
|
||||||
|
[coll]
|
||||||
|
(let [own? (= (:type coll) :own)]
|
||||||
|
(letfn [(on-delete [event]
|
||||||
|
(rs/emit! (di/delete-selected)))]
|
||||||
|
;; MULTISELECT OPTIONS BAR
|
||||||
|
[:div.multiselect-bar
|
||||||
|
(if own?
|
||||||
|
[:div.multiselect-nav
|
||||||
|
#_[:span.move-item.tooltip.tooltip-top
|
||||||
|
{:alt "Move to"}
|
||||||
|
i/organize]
|
||||||
|
[:span.delete.tooltip.tooltip-top
|
||||||
|
{:alt "Delete"
|
||||||
|
:on-click on-delete}
|
||||||
|
i/trash]]
|
||||||
|
[:div.multiselect-nav
|
||||||
|
[:span.move-item.tooltip.tooltip-top
|
||||||
|
{:alt "Copy to"}
|
||||||
|
i/organize]])])))
|
||||||
|
|
||||||
|
(mx/defc grid-item
|
||||||
|
[{:keys [id] :as image} selected?]
|
||||||
|
(letfn [(toggle-selection [event]
|
||||||
|
(rs/emit! (di/toggle-image-selection id)))
|
||||||
|
(toggle-selection-shifted [event]
|
||||||
|
(when (kbd/shift? event)
|
||||||
|
(toggle-selection event)))]
|
||||||
|
[:div.grid-item.images-th
|
||||||
|
{:on-click toggle-selection-shifted}
|
||||||
|
[:div.grid-item-th
|
||||||
|
{:style {:background-image (str "url('" (:thumbnail image) "')")}}
|
||||||
|
[:div.input-checkbox.check-primary
|
||||||
|
[:input {:type "checkbox"
|
||||||
|
:id (:id image)
|
||||||
|
:on-click toggle-selection
|
||||||
|
:checked selected?}]
|
||||||
|
[:label {:for (:id image)}]]]
|
||||||
|
[:span (:name image)]]))
|
||||||
|
|
||||||
|
(mx/defc grid
|
||||||
|
{:mixins [mx/static]}
|
||||||
|
[selected {:keys [id type images] :as coll}]
|
||||||
|
(let [own? (= type :own)]
|
||||||
|
(println (map :id images))
|
||||||
|
[:div.dashboard-grid-content
|
||||||
|
[:div.dashboard-grid-row
|
||||||
|
(when own?
|
||||||
|
(grid-form id))
|
||||||
|
(for [image images
|
||||||
|
:let [id (:id image)
|
||||||
|
selected? (contains? selected id)]]
|
||||||
|
(-> (grid-item image selected?)
|
||||||
|
(mx/with-key (str id))))]]))
|
||||||
|
|
||||||
|
(mx/defc content
|
||||||
|
{:mixins [mx/static mx/reactive]}
|
||||||
|
[]
|
||||||
|
(let [dashboard (mx/react dashboard-ref)
|
||||||
|
selected (:selected dashboard)
|
||||||
|
coll-type (:type dashboard)
|
||||||
|
coll-id (:id dashboard)
|
||||||
|
coll (mx/react (focus-collection coll-id))
|
||||||
|
own? (= coll-type :own)]
|
||||||
|
(when coll
|
||||||
|
[:section.dashboard-grid.library
|
||||||
|
(page-title coll)
|
||||||
|
(grid selected coll)
|
||||||
|
(when (and (seq selected))
|
||||||
|
(grid-options coll))])))
|
||||||
|
|
||||||
;; --- Sort Widget
|
;; --- Sort Widget
|
||||||
|
|
||||||
(defn- sort-widget-render
|
;; (defn- sort-widget-render
|
||||||
[]
|
;; []
|
||||||
(let [ordering (mx/react images-ordering-ref)
|
;; (let [ordering (mx/react images-ordering-ref)
|
||||||
on-change #(rs/emit! (di/set-images-ordering
|
;; on-change #(rs/emit! (di/set-images-ordering
|
||||||
(keyword (.-value (.-target %)))))]
|
;; (keyword (.-value (.-target %)))))]
|
||||||
(html
|
;; (html
|
||||||
[:div
|
;; [:div
|
||||||
[:span (tr "ds.project-ordering")]
|
;; [:span (tr "ds.project-ordering")]
|
||||||
[:select.input-select
|
;; [:select.input-select
|
||||||
{:on-change on-change
|
;; {:on-change on-change
|
||||||
:value (:name ordering "")}
|
;; :value (:name ordering "")}
|
||||||
(for [option (keys +ordering-options+)
|
;; (for [option (keys +ordering-options+)
|
||||||
:let [option-id (get +ordering-options+ option)
|
;; :let [option-id (get +ordering-options+ option)
|
||||||
option-value (:name option)
|
;; option-value (:name option)
|
||||||
option-text (tr option-id)]]
|
;; option-text (tr option-id)]]
|
||||||
[:option
|
;; [:option
|
||||||
{:key option-id
|
;; {:key option-id
|
||||||
:value option-value}
|
;; :value option-value}
|
||||||
option-text])]])))
|
;; option-text])]])))
|
||||||
|
|
||||||
(def ^:private sort-widget
|
;; (def ^:private sort-widget
|
||||||
(mx/component
|
;; (mx/component
|
||||||
{:render sort-widget-render
|
;; {:render sort-widget-render
|
||||||
:name "sort-widget-render"
|
;; :name "sort-widget-render"
|
||||||
:mixins [mx/reactive mx/static]}))
|
;; :mixins [mx/reactive mx/static]}))
|
||||||
|
|
||||||
;; --- Filtering Widget
|
;; --- Filtering Widget
|
||||||
|
|
||||||
(defn- search-widget-render
|
;; (defn- search-widget-render
|
||||||
[]
|
;; []
|
||||||
(letfn [(on-term-change [event]
|
;; (letfn [(on-term-change [event]
|
||||||
(-> (dom/get-target event)
|
;; (-> (dom/get-target event)
|
||||||
(dom/get-value)
|
;; (dom/get-value)
|
||||||
(di/set-images-filtering)
|
;; (di/set-images-filtering)
|
||||||
(rs/emit!)))
|
;; (rs/emit!)))
|
||||||
(on-clear [event]
|
;; (on-clear [event]
|
||||||
(rs/emit! (di/clear-images-filtering)))]
|
;; (rs/emit! (di/clear-images-filtering)))]
|
||||||
(html
|
;; (html
|
||||||
[:form.dashboard-search
|
;; [:form.dashboard-search
|
||||||
[:input.input-text
|
;; [:input.input-text
|
||||||
{:key :images-search-box
|
;; {:key :images-search-box
|
||||||
:type "text"
|
;; :type "text"
|
||||||
:on-change on-term-change
|
;; :on-change on-term-change
|
||||||
:auto-focus true
|
;; :auto-focus true
|
||||||
:placeholder (tr "ds.project-search.placeholder")
|
;; :placeholder (tr "ds.project-search.placeholder")
|
||||||
:value (mx/react images-filtering-ref)}]
|
;; :value (mx/react images-filtering-ref)}]
|
||||||
[:div.clear-search {:on-click on-clear} i/close]])))
|
;; [:div.clear-search {:on-click on-clear} i/close]])))
|
||||||
|
|
||||||
(def ^:private search-widget
|
;; (def ^:private search-widget
|
||||||
(mx/component
|
;; (mx/component
|
||||||
{:render search-widget-render
|
;; {:render search-widget-render
|
||||||
:name "search-widget"
|
;; :name "search-widget"
|
||||||
:mixins [mx/reactive mx/static]}))
|
;; :mixins [mx/reactive mx/static]}))
|
||||||
|
|
||||||
;; --- Menu
|
;; ;; --- Menu
|
||||||
|
|
||||||
(defn- menu-render
|
;; (defn- menu-render
|
||||||
[]
|
;; []
|
||||||
(let [dashboard (mx/react dashboard-ref)
|
;; (let [dashboard (mx/react dashboard-ref)
|
||||||
coll-id (:collection-id dashboard)
|
;; coll-id (:collection-id dashboard)
|
||||||
coll (mx/react (focus-collection coll-id))
|
;; coll (mx/react (focus-collection coll-id))
|
||||||
icount (count (:images coll)) ]
|
;; icount (count (:images coll)) ]
|
||||||
(html
|
;; (html
|
||||||
[:section.dashboard-bar.library-gap
|
;; [:section.dashboard-bar.library-gap
|
||||||
[:div.dashboard-info
|
;; [:div.dashboard-info
|
||||||
[:span.dashboard-images (tr "ds.num-images" (t/c icount))]
|
;; [:span.dashboard-images (tr "ds.num-images" (t/c icount))]
|
||||||
(sort-widget)
|
;; (sort-widget)
|
||||||
(search-widget)]])))
|
;; (search-widget)]])))
|
||||||
|
|
||||||
(def ^:private menu
|
;; (def ^:private menu
|
||||||
(mx/component
|
;; (mx/component
|
||||||
{:render menu-render
|
;; {:render menu-render
|
||||||
:name "menu"
|
;; :name "menu"
|
||||||
:mixins [mx/reactive mx/static]}))
|
;; :mixins [mx/reactive mx/static]}))
|
||||||
|
|
||||||
|
|
||||||
;; --- Images Page
|
;; --- Images Page
|
||||||
|
|
||||||
(defn- images-page-render
|
;; (defn- images-page-render
|
||||||
[own]
|
;; [own]
|
||||||
(html
|
;; (html
|
||||||
[:main.dashboard-main
|
;; [:main.dashboard-main
|
||||||
(header)
|
;; (header)
|
||||||
[:section.dashboard-content
|
;; [:section.dashboard-content
|
||||||
(nav)
|
;; (nav)
|
||||||
(menu)
|
;; (menu)
|
||||||
(grid)]]))
|
;; (grid)]]))
|
||||||
|
|
||||||
(defn- images-page-will-mount
|
(defn- images-page-will-mount
|
||||||
[own]
|
[own]
|
||||||
(rs/emit! (dd/initialize :dashboard/images)
|
(let [[type id] (:rum/args own)]
|
||||||
(di/initialize))
|
(rs/emit! (di/initialize type id))
|
||||||
own)
|
own))
|
||||||
|
|
||||||
(defn- images-page-did-remount
|
(defn- images-page-did-remount
|
||||||
[old-state state]
|
[old-own own]
|
||||||
(rs/emit! (dd/initialize :dashboard/images))
|
(let [[old-type old-id] (:rum/args old-own)
|
||||||
state)
|
[new-type new-id] (:rum/args own)]
|
||||||
|
(when (or (not= old-type new-type)
|
||||||
|
(not= old-id new-id))
|
||||||
|
(rs/emit! (di/initialize new-type new-id)))
|
||||||
|
own))
|
||||||
|
|
||||||
(def images-page
|
(mx/defc images-page
|
||||||
(mx/component
|
{:will-mount images-page-will-mount
|
||||||
{:render images-page-render
|
:did-remount images-page-did-remount
|
||||||
:will-mount images-page-will-mount
|
:mixins [mx/static]}
|
||||||
:did-remount images-page-did-remount
|
[type id]
|
||||||
:name "images-page"
|
[:main.dashboard-main
|
||||||
:mixins [mx/static]}))
|
(header)
|
||||||
|
[:section.dashboard-content
|
||||||
|
(nav)
|
||||||
|
(content)]])
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue