3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-10 20:36:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(frontend): refactor dashboard components

Browse source
This commit is contained in:
Andrey Antukh 2019-07-18 12:28:22 +02:00
parent 891361b80c
commit c4d7d545ae
8 changed files with 1240 additions and 1196 deletions
Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/uxbox/main/data/icons.cljs
View file

@ -26,11 +26,9 @@
(defrecord Initialize [type id] (defrecord Initialize [type id]
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(let [type (or type :own) (-> state
data {:type type :id id :selected #{}}] (assoc-in [:dashboard :icons] {:selected #{}})
(-> state (assoc-in [:dashboard :section] :dashboard/icons)))
(assoc-in [:dashboard :icons] data)
(assoc-in [:dashboard :section] :dashboard/icons))))
ptk/WatchEvent ptk/WatchEvent
(watch [_ state s] (watch [_ state s]

26
frontend/src/uxbox/main/ui/dashboard.cljs
View file

@ -1,12 +1,28 @@
(ns uxbox.main.ui.dashboard (ns uxbox.main.ui.dashboard
(:require [uxbox.main.ui.dashboard.projects :as projects] (:require
;; [uxbox.main.ui.dashboard.elements :as elements] [rumext.core :as mx :include-macros true]
[uxbox.main.ui.dashboard.icons :as icons] [uxbox.main.ui.dashboard.header :refer [header]]
[uxbox.main.ui.dashboard.images :as images] [uxbox.main.ui.dashboard.projects :as projects]
[uxbox.main.ui.dashboard.colors :as colors])) ;; [uxbox.main.ui.dashboard.elements :as elements]
[uxbox.main.ui.dashboard.icons :as icons]
[uxbox.main.ui.dashboard.images :as images]
[uxbox.main.ui.dashboard.colors :as colors]
[uxbox.main.ui.messages :refer [messages-widget]]))
(def projects-page projects/projects-page) (def projects-page projects/projects-page)
;; (def elements-page elements/elements-page) ;; (def elements-page elements/elements-page)
(def icons-page icons/icons-page) (def icons-page icons/icons-page)
(def images-page images/images-page) (def images-page images/images-page)
(def colors-page colors/colors-page) (def colors-page colors/colors-page)
(mx/defc dashboard
[props]
(prn "dashboard" props)
[:main.dashboard-main
(messages-widget)
(header)
(case (:section props)
:icons (icons/icons-page props)
:images (images/images-page props)
:projects (projects/projects-page props)
:colors (colors/colors-page props))])

556
frontend/src/uxbox/main/ui/dashboard/colors.cljs
View file

@ -28,311 +28,321 @@
;; --- Refs ;; --- Refs
(def dashboard-ref
(-> (l/in [:dashboard :colors])
(l/derive st/state)))
(def collections-ref (def collections-ref
(-> (l/key :colors-collections) (-> (l/key :colors-collections)
(l/derive st/state))) (l/derive st/state)))
(def opts-ref
(-> (l/in [:dashboard :colors])
(l/derive st/state)))
;; --- Page Title ;; --- Page Title
(mx/defcs page-title (mx/def page-title
{:mixins [(mx/local) mx/static mx/reactive]} :mixins [(mx/local) mx/static mx/reactive]
[{:keys [rum/local] :as own} {:keys [id] :as coll}]
(let [dashboard (mx/react dashboard-ref) :render
own? (= :own (:type coll)) (fn [{:keys [::mx/local] :as own}
edit? (:edit @local)] {:keys [id] :as coll}]
(letfn [(save [] (let [own? (= :own (:type coll))
(let [dom (mx/ref-node own "input") edit? (:edit @local)]
name (dom/get-inner-text dom)] (letfn [(save []
(st/emit! (dc/rename-collection id (str/trim name))) (let [dom (mx/ref-node own "input")
(swap! local assoc :edit false))) name (dom/get-inner-text dom)]
(cancel [] (st/emit! (dc/rename-collection id (str/trim name)))
(swap! local assoc :edit false)) (swap! local assoc :edit false)))
(edit [] (cancel []
(swap! local assoc :edit true)) (swap! local assoc :edit false))
(on-input-keydown [e] (edit []
(cond (swap! local assoc :edit true))
(k/esc? e) (cancel) (on-input-keydown [e]
(k/enter? e) (cond
(do (k/esc? e) (cancel)
(dom/prevent-default e) (k/enter? e)
(dom/stop-propagation e) (do
(save)))) (dom/prevent-default e)
(delete [] (dom/stop-propagation e)
(st/emit! (dc/delete-collection id))) (save))))
(on-delete [] (delete []
(udl/open! :confirm {:on-accept delete}))] (st/emit! (dc/delete-collection id)))
[:div.dashboard-title {} (on-delete []
[:h2 {} (udl/open! :confirm {:on-accept delete}))]
(if edit? [:div.dashboard-title
[:div.dashboard-title-field {} [:h2
[:span.edit {:content-editable true
:ref "input"
:on-key-down on-input-keydown}
(:name coll)]
[:span.close {:on-click cancel} i/close]]
(if own?
[:span.dashboard-title-field {:on-double-click edit}
(:name coll)]
[:span.dashboard-title-field {}
(:name coll)]))]
(when (and own? coll)
[:div.edition {}
(if edit? (if edit?
[:span {:on-click save} ^:inline i/save] [:div.dashboard-title-field
[:span {:on-click edit} ^:inline i/pencil]) [:span.edit {:content-editable true
[:span {:on-click on-delete} ^:inline i/trash]])]))) :ref "input"
:on-key-down on-input-keydown}
(:name coll)]
[:span.close {:on-click cancel} i/close]]
(if own?
[:span.dashboard-title-field {:on-double-click edit}
(:name coll)]
[:span.dashboard-title-field
(:name coll)]))]
(when (and own? coll)
[:div.edition
(if edit?
[:span {:on-click save} i/save]
[:span {:on-click edit} i/pencil])
[:span {:on-click on-delete} i/trash]])]))))
;; --- Nav ;; --- Nav
(mx/defcs nav-item (mx/def nav-item
{:mixins [(mx/local) mx/static]} :mixins [(mx/local) mx/static]
[{:keys [rum/local]} {:keys [id type name] :as coll} selected?]
(let [colors (count (:colors coll)) :render
editable? (= type :own)] (fn [{:keys [::mx/local] :as own}
(letfn [(on-click [event] {:keys [id type name ::selected?] :as coll}]
(let [type (or type :own)] (let [colors (count (:colors coll))
(st/emit! (rt/navigate :dashboard/colors nil {:type type :id id})))) editable? (= type :own)]
(on-input-change [event] (letfn [(on-click [event]
(let [value (dom/get-target event) (let [type (or type :own)]
value (dom/get-value value)] (st/emit! (rt/navigate :dashboard/colors nil {:type type :id id}))))
(swap! local assoc :name value))) (on-input-change [event]
(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) (let [value (dom/get-target event)
value (dom/get-value value)] value (dom/get-value value)]
(st/emit! (dc/rename-collection id (str/trim (:name @local)))) (swap! local assoc :name value)))
(swap! local assoc :edit false))))] (on-cancel [event]
[:li {:on-click on-click (swap! local dissoc :name)
:on-double-click on-double-click (swap! local dissoc :edit))
:class-name (when selected? "current")} (on-double-click [event]
(if (:edit @local) (when editable?
[:div {} (swap! local assoc :edit true)))
[:input.element-title (on-input-keyup [event]
{:value (if (:name @local) (:name @local) name) (when (k/enter? event)
:on-change on-input-change (let [value (dom/get-target event)
:on-key-down on-input-keyup}] value (dom/get-value value)]
[:span.close {:on-click on-cancel} i/close]] (st/emit! (dc/rename-collection id (str/trim (:name @local))))
[:span.element-title {} name]) (swap! local assoc :edit false))))]
[:span.element-subtitle {} [:li {:on-click on-click
(tr "ds.num-elements" (t/c colors))]]))) :on-double-click on-double-click
:class-name (when selected? "current")}
(if (:edit @local)
[:div
[:input.element-title
{:value (if (:name @local) (:name @local) name)
:on-change on-input-change
:on-key-down on-input-keyup}]
[:span.close {:on-click on-cancel} i/close]]
[:span.element-title name])
[:span.element-subtitle
(tr "ds.num-elements" (t/c colors))]]))))
(mx/defc nav-section (mx/def nav
{:mixins [mx/static]} :mixins [mx/static mx/reactive]
[type selected colls]
(let [own? (= type :own)
builtin? (= type :builtin)
colls (cond->> (vals colls)
own? (filter #(= :own (:type %)))
builtin? (filter #(= :builtin (:type %)))
own? (sort-by :created-at)
builtin? (sort-by :created-at))]
[:ul.library-elements {}
(when own?
[:li {}
[:a.btn-primary {:on-click #(st/emit! (dc/create-collection))}
(tr "ds.colors-collection.new")]])
(for [coll colls]
(let [id (:id coll)
selected? (= id selected)]
(-> (nav-item coll selected?)
(mx/with-key id))))]))
(mx/defc nav :render
{:mixins [mx/static]} (fn [own {:keys [id type] :as props}]
[{:keys [id type] :as state} colls]2 (let [own? (= type :own)
(letfn [(select-tab [type] builtin? (= type :builtin)
(if-let [coll (->> (map second colls) colls (mx/react collections-ref)
(filter #(= type (:type %))) select-tab (fn [type]
(sort-by :created-at) (if-let [coll (->> (vals colls)
(first))] (filter #(= type (:type %)))
(st/emit! (rt/nav :dashboard/colors nil {:type type :id (:id coll)})) (sort-by :created-at)
(st/emit! (rt/nav :dashboard/colors nil {:type type}))))] (first))]
[:div.library-bar {} (st/emit! (rt/nav :dashboard/colors nil {:type type :id (:id coll)}))
[:div.library-bar-inside {} (st/emit! (rt/nav :dashboard/colors nil {:type type}))))]
[:ul.library-tabs {}
[:li {:class-name (when (= type :own) "current") [:div.library-bar
:on-click (partial select-tab :own)} [:div.library-bar-inside
(tr "ds.your-colors-title")] [:ul.library-tabs
[:li {:class-name (when (= type :builtin) "current") [:li {:class-name (when own? "current")
:on-click (partial select-tab :builtin)} :on-click (partial select-tab :own)}
(tr "ds.store-colors-title")]] (tr "ds.your-colors-title")]
(nav-section type id colls)]])) [:li {:class-name (when builtin? "current")
:on-click (partial select-tab :builtin)}
(tr "ds.store-colors-title")]]
[:ul.library-elements
(when own?
[:li
[:a.btn-primary {:on-click #(st/emit! (dc/create-collection))}
(tr "ds.colors-collection.new")]])
(for [coll (cond->> (vals colls)
own? (filter #(= :own (:type %)))
builtin? (filter #(= :builtin (:type %)))
true (sort-by :created-at))]
(let [selected? (= (:id coll) id)]
(nav-item (assoc coll ::selected? selected?))))]]])))
;; --- Grid ;; --- Grid
(mx/defc grid-form (mx/defc grid-form
[coll-id] [coll-id]
[:div.grid-item.small-item.add-project {:on-click #(udl/open! :color-form {:coll coll-id})} [:div.grid-item.small-item.add-project
[:span {} (tr "ds.color-new")]]) {:on-click #(udl/open! :color-form {:coll coll-id})}
[:span (tr "ds.color-new")]])
(mx/defc grid-options-tooltip (mx/def grid-options-tooltip
{:mixins [mx/reactive mx/static]} :mixins [mx/reactive mx/static]
[& {:keys [selected on-select title]}]
{:pre [(uuid? selected)
(fn? on-select)
(string? title)]}
(let [colls (mx/react collections-ref)
colls (->> (vals colls)
(filter #(= :own (:type %)))
(remove #(= selected (:id %)))
(sort-by :name colls))
on-select (fn [event id]
(dom/prevent-default event)
(dom/stop-propagation event)
(on-select id))]
[:ul.move-list {}
[:li.title {} title]
(for [{:keys [id name] :as coll} colls]
[:li {:key (str id)}
[:a {:on-click #(on-select % id)} name]])]))
(mx/defcs grid-options :render
{:mixins [mx/static (mx/local)]} (fn [own {:keys [selected on-select title]}]
[{:keys [rum/local]} {:keys [type id] :as coll}] {:pre [(uuid? selected)
(letfn [(delete [event] (fn? on-select)
(st/emit! (dc/delete-selected-colors))) (string? title)]}
(on-delete [event] (let [colls (mx/react collections-ref)
(udl/open! :confirm {:on-accept delete})) colls (->> (vals colls)
(on-toggle-copy [event] (filter #(= :own (:type %)))
(swap! local update :show-copy-tooltip not) (remove #(= selected (:id %)))
(swap! local assoc :show-move-tooltip false)) (sort-by :name colls))
(on-toggle-move [event] on-select (fn [event id]
(swap! local update :show-move-tooltip not) (dom/prevent-default event)
(swap! local assoc :show-copy-tooltip false)) (dom/stop-propagation event)
(on-copy [selected] (on-select id))]
(swap! local assoc [:ul.move-list
:show-move-tooltip false [:li.title title]
:show-copy-tooltip false) (for [{:keys [id name] :as coll} colls]
(st/emit! (dc/copy-selected selected))) [:li {:key (str id)}
(on-move [selected] [:a {:on-click #(on-select % id)} name]])])))
(swap! local assoc
:show-move-tooltip false
:show-copy-tooltip false)
(st/emit! (dc/move-selected id selected)))]
;; MULTISELECT OPTIONS BAR (mx/def grid-options
[:div.multiselect-bar :mixins [mx/static (mx/local)]
(if (or (= type :own) (nil? id))
;; if editable
[:div.multiselect-nav {}
[:span.move-item.tooltip.tooltip-top
{:alt (tr "ds.multiselect-bar.copy")
:on-click on-toggle-copy}
(when (:show-copy-tooltip @local)
(grid-options-tooltip :selected id
:title (tr "ds.multiselect-bar.copy-to-library")
:on-select on-copy))
i/copy]
[:span.move-item.tooltip.tooltip-top
{:alt (tr "ds.multiselect-bar.move")
:on-click on-toggle-move}
(when (:show-move-tooltip @local)
(grid-options-tooltip :selected id
:title (tr "ds.multiselect-bar.move-to-library")
:on-select on-move))
i/move]
[:span.delete.tooltip.tooltip-top
{:alt (tr "ds.multiselect-bar.delete")
:on-click on-delete}
i/trash]]
;; if not editable :render
[:div.multiselect-nav {} (fn [{:keys [::mx/local] :as own}
[:span.move-item.tooltip.tooltip-top {:keys [type id] :as coll}]
{:alt (tr "ds.multiselect-bar.copy") (letfn [(delete [event]
:on-click on-toggle-copy} (st/emit! (dc/delete-selected-colors)))
(when (:show-copy-tooltip @local) (on-delete [event]
(grid-options-tooltip :selected id (udl/open! :confirm {:on-accept delete}))
:title (tr "ds.multiselect-bar.copy-to-library") (on-toggle-copy [event]
:on-select on-copy)) (swap! local update :show-copy-tooltip not)
i/organize]])])) (swap! local assoc :show-move-tooltip false))
(on-toggle-move [event]
(swap! local update :show-move-tooltip not)
(swap! local assoc :show-copy-tooltip false))
(on-copy [selected]
(swap! local assoc
:show-move-tooltip false
:show-copy-tooltip false)
(st/emit! (dc/copy-selected selected)))
(on-move [selected]
(swap! local assoc
:show-move-tooltip false
:show-copy-tooltip false)
(st/emit! (dc/move-selected id selected)))]
(mx/defc grid-item ;; MULTISELECT OPTIONS BAR
{:mixins [mx/static]} [:div.multiselect-bar
[color selected?] (if (or (= type :own) (nil? id))
(letfn [(toggle-selection [event] ;; if editable
(st/emit! (dc/toggle-color-selection color)))] [:div.multiselect-nav
[:div.grid-item.small-item.project-th {:on-click toggle-selection} [:span.move-item.tooltip.tooltip-top
[:span.color-swatch {:style {:background-color color}}] {:alt (tr "ds.multiselect-bar.copy")
[:div.input-checkbox.check-primary {} :on-click on-toggle-copy}
[:input {:type "checkbox" (when (:show-copy-tooltip @local)
:id color (grid-options-tooltip {:selected id
:on-click toggle-selection :title (tr "ds.multiselect-bar.copy-to-library")
:checked selected?}] :on-select on-copy}))
[:label {:for color}]] i/copy]
[:span.color-data {} color] [:span.move-item.tooltip.tooltip-top
[:span.color-data {} (apply str "RGB " (interpose ", " (hex->rgb color)))]])) {:alt (tr "ds.multiselect-bar.move")
:on-click on-toggle-move}
(when (:show-move-tooltip @local)
(grid-options-tooltip {:selected id
:title (tr "ds.multiselect-bar.move-to-library")
:on-select on-move}))
i/move]
[:span.delete.tooltip.tooltip-top
{:alt (tr "ds.multiselect-bar.delete")
:on-click on-delete}
i/trash]]
(mx/defc grid ;; if not editable
{:mixins [mx/static]} [:div.multiselect-nav
[{:keys [id type colors] :as coll} selected] [:span.move-item.tooltip.tooltip-top
(let [editable? (or (= :own type) (nil? id)) {:alt (tr "ds.multiselect-bar.copy")
colors (->> (remove nil? colors) :on-click on-toggle-copy}
(sort-by identity))] (when (:show-copy-tooltip @local)
[:div.dashboard-grid-content {} (grid-options-tooltip {:selected id
[:div.dashboard-grid-row {} :title (tr "ds.multiselect-bar.copy-to-library")
(when editable? (grid-form id)) :on-select on-copy}))
(for [color colors] i/organize]])])))
(let [selected? (contains? selected color)]
(-> (grid-item color selected?)
(mx/with-key (str color)))))]]))
(mx/defc content (mx/def grid-item
{:mixins [mx/static]} :key-fn :color
[{:keys [selected] :as state} coll] :mixins [mx/static]
[:section.dashboard-grid.library {}
(page-title coll) :render
(grid coll selected) (fn [own {:keys [color selected?] :as props}]
(when (and (seq selected)) (letfn [(toggle-selection [event]
(grid-options coll))]) (st/emit! (dc/toggle-color-selection color)))]
[:div.grid-item.small-item.project-th {:on-click toggle-selection}
[:span.color-swatch {:style {:background-color color}}]
[:div.input-checkbox.check-primary
[:input {:type "checkbox"
:id color
:on-change toggle-selection
:checked selected?}]
[:label {:for color}]]
[:span.color-data color]
[:span.color-data (apply str "RGB " (interpose ", " (hex->rgb color)))]])))
(mx/def grid
:mixins [mx/static]
:render
(fn [own {:keys [selected ::coll] :as props}]
(let [{:keys [id type colors]} coll
editable? (or (= :own type) (nil? id))
colors (->> (remove nil? colors)
(sort-by identity))]
[:div.dashboard-grid-content
[:div.dashboard-grid-row
(when editable? (grid-form props))
(for [color colors]
(let [selected? (contains? selected color)]
(grid-item {:color color :selected? selected?})))]])))
(mx/def content
:mixins [mx/reactive mx/static]
:init
(fn [own {:keys [id] :as props}]
(assoc own ::coll-ref (-> (l/in [:colors-collections id])
(l/derive st/state))))
:render
(fn [own props]
(let [opts (mx/react opts-ref)
coll (mx/react (::coll-ref own))
props (merge opts props)]
[:section.dashboard-grid.library
(page-title coll)
(grid (assoc props ::coll coll))
(when (seq (:selected opts))
(grid-options props))])))
;; --- Colors Page ;; --- Colors Page
(defn- colors-page-will-mount (mx/def colors-page
[own] :key-fn identity
(let [[type id] (:rum/args own)] :mixins #{mx/static mx/reactive}
(st/emit! (dc/initialize type id))
own))
(defn- colors-page-did-remount :init
[old-own own] (fn [own props]
(let [[old-type old-id] (:rum/args old-own) (let [{:keys [type id]} (::mx/props own)]
[new-type new-id] (:rum/args own)] (st/emit! (dc/initialize type id))
(when (or (not= old-type new-type) own))
(not= old-id new-id))
(st/emit! (dc/initialize new-type new-id)))
own))
(mx/defc colors-page :render
{:will-mount colors-page-will-mount (fn [own {:keys [type] :as props}]
:did-remount colors-page-did-remount (let [type (or type :own)
:mixins [mx/static mx/reactive]} props (assoc props :type type)]
[_ _] [:section.dashboard-content
(let [state (mx/react dashboard-ref) (nav props)
colls (mx/react collections-ref) (content props)])))
coll (get colls (:id state))]
[:main.dashboard-main {}
(messages-widget)
(header)
[:section.dashboard-content {}
(nav state colls)
(content state coll)]]))
;; --- Colors Lightbox (Component) ;; --- Colors Lightbox (Component)
(mx/defcs color-lightbox (mx/defcs color-lightbox
{:mixins [(mx/local {}) mx/static]} {:mixins [(mx/local {}) mx/static]}
[{:keys [rum/local]} {:keys [coll color] :as params}] [{:keys [::mx/local]} {:keys [coll color] :as params}]
(letfn [(on-submit [event] (letfn [(on-submit [event]
(let [params {:id coll (let [params {:id coll
:from color :from color
@ -344,10 +354,10 @@
(swap! local assoc :hex value))) (swap! local assoc :hex value)))
(on-close [event] (on-close [event]
(udl/close!))] (udl/close!))]
[:div.lightbox-body {} [:div.lightbox-body
[:h3 {} (tr "ds.color-lightbox.title")] [:h3 (tr "ds.color-lightbox.title")]
[:form {} [:form
[:div.row-flex.center {} [:div.row-flex.center
(colorpicker (colorpicker
:value (or (:hex @local) color "#00ccff") :value (or (:hex @local) color "#00ccff")
:on-change #(swap! local assoc :hex %))] :on-change #(swap! local assoc :hex %))]

10
frontend/src/uxbox/main/ui/dashboard/elements.cljs
View file

@ -140,21 +140,15 @@
;; (page-title) ;; (page-title)
;; (grid)]]])) ;; (grid)]]]))
;; (defn elements-page-will-mount ;; (defn elements-page-init
;; [own] ;; [own]
;; (st/emit! (dd/initialize :dashboard/elements)) ;; (st/emit! (dd/initialize :dashboard/elements))
;; own) ;; own)
;; (defn elements-page-did-remount
;; [old-state state]
;; (st/emit! (dd/initialize :dashboard/elements))
;; state)
;; (def elements-page ;; (def elements-page
;; (mx/component ;; (mx/component
;; {:render elements-page-render ;; {:render elements-page-render
;; :will-mount elements-page-will-mount ;; :init elements-page-init
;; :did-remount elements-page-did-remount
;; :name "elements-page" ;; :name "elements-page"
;; :mixins [mx/static]})) ;; :mixins [mx/static]}))

47
frontend/src/uxbox/main/ui/dashboard/header.cljs
View file

@ -16,38 +16,45 @@
[uxbox.util.router :as rt] [uxbox.util.router :as rt]
[rumext.core :as mx :include-macros true])) [rumext.core :as mx :include-macros true]))
(def header-ref
(-> (l/key :dashboard)
(l/derive st/state)))
(mx/defc header-link (mx/defc header-link
[section content] [{:keys [section content] :as props}]
(let [on-click #(st/emit! (rt/navigate section))] (let [on-click #(st/emit! (rt/navigate section))]
[:a {:on-click on-click} content])) [:a {:on-click on-click} content]))
(mx/defc header (mx/def header
{:mixins [mx/static mx/reactive]} :mixins [mx/static mx/reactive]
[] :init
(let [local (mx/react header-ref) (fn [own props]
projects? (= (:section local) :dashboard/projects) (assoc own ::section-ref (-> (l/in [:dashboard :section])
elements? (= (:section local) :dashboard/elements) (l/derive st/state))))
icons? (= (:section local) :dashboard/icons)
images? (= (:section local) :dashboard/images) :render
colors? (= (:section local) :dashboard/colors)] (fn [own props]
(let [section (mx/react (::section-ref own))
projects? (= section :dashboard/projects)
elements? (= section :dashboard/elements)
icons? (= section :dashboard/icons)
images? (= section :dashboard/images)
colors? (= section :dashboard/colors)]
[:header#main-bar.main-bar [:header#main-bar.main-bar
[:div.main-logo [:div.main-logo
(header-link :dashboard/projects i/logo)] (header-link {:section :dashboard/projects
:content i/logo})]
[:ul.main-nav [:ul.main-nav
[:li {:class (when projects? "current")} [:li {:class (when projects? "current")}
(header-link :dashboard/projects (tr "ds.projects"))] (header-link {:section :dashboard/projects
:content (tr "ds.projects")})]
#_[:li {:class (when elements? "current")} #_[:li {:class (when elements? "current")}
(header-link :dashboard/elements (tr "ds.elements"))] (header-link :dashboard/elements (tr "ds.elements"))]
[:li {:class (when icons? "current")} [:li {:class (when icons? "current")}
(header-link :dashboard/icons (tr "ds.icons"))] (header-link {:section :dashboard/icons
:content (tr "ds.icons")})]
[:li {:class (when images? "current")} [:li {:class (when images? "current")}
(header-link :dashboard/images (tr "ds.images"))] (header-link {:section :dashboard/images
:content (tr "ds.images")})]
[:li {:class (when colors? "current")} [:li {:class (when colors? "current")}
(header-link :dashboard/colors (tr "ds.colors"))]] (header-link {:section :dashboard/colors
(ui.u/user)])) :content (tr "ds.colors")})]]
(ui.u/user)])))

671
frontend/src/uxbox/main/ui/dashboard/icons.cljs
View file

@ -2,30 +2,31 @@
;; License, v. 2.0. If a copy of the MPL was not distributed with this ;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/. ;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;; ;;
;; Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com> ;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
;; Copyright (c) 2015-2019 Andrey Antukh <niwi@niwi.nz>
(ns uxbox.main.ui.dashboard.icons (ns uxbox.main.ui.dashboard.icons
(:require [lentes.core :as l] (:require
[cuerdas.core :as str] [cuerdas.core :as str]
[uxbox.main.store :as st] [lentes.core :as l]
[uxbox.main.data.lightbox :as udl] [potok.core :as ptk]
[uxbox.main.data.icons :as di] [rumext.core :as mx :include-macros true]
[uxbox.builtins.icons :as i] [uxbox.builtins.icons :as i]
[uxbox.main.ui.shapes.icon :as icon] [uxbox.main.data.icons :as di]
[uxbox.main.ui.lightbox :as lbx] [uxbox.main.data.lightbox :as udl]
[uxbox.main.ui.dashboard.header :refer (header)] [uxbox.main.store :as st]
[uxbox.main.ui.keyboard :as kbd] [uxbox.main.ui.dashboard.header :refer (header)]
[uxbox.util.router :as rt] [uxbox.main.ui.keyboard :as kbd]
[uxbox.util.i18n :as t :refer (tr)] [uxbox.main.ui.lightbox :as lbx]
[uxbox.util.data :refer (read-string)] [uxbox.main.ui.shapes.icon :as icon]
[rumext.core :as mx :include-macros true] [uxbox.util.data :refer (read-string)]
[uxbox.util.time :as dt] [uxbox.util.dom :as dom]
[potok.core :as ptk] [uxbox.util.forms :as sc]
[uxbox.util.forms :as sc] [uxbox.util.i18n :as t :refer (tr)]
[uxbox.util.lens :as ul] [uxbox.util.i18n :refer (tr)]
[uxbox.util.i18n :refer (tr)] [uxbox.util.lens :as ul]
[uxbox.util.dom :as dom])) [uxbox.util.router :as rt]
[uxbox.util.time :as dt]))
;; --- Helpers & Constants ;; --- Helpers & Constants
@ -55,163 +56,165 @@
;; --- Refs ;; --- Refs
(def ^:private dashboard-ref
(-> (l/in [:dashboard :icons])
(l/derive st/state)))
(def collections-ref (def collections-ref
(-> (l/key :icons-collections) (-> (l/key :icons-collections)
(l/derive st/state))) (l/derive st/state)))
(def opts-ref
(-> (l/in [:dashboard :icons])
(l/derive st/state)))
;; TODO: remove when sidebar is refactored
(def icons-ref (def icons-ref
(-> (l/key :icons) (-> (l/key :icons)
(l/derive st/state))) (l/derive st/state)))
;; --- Page Title ;; --- Page Title
(mx/defcs page-title (mx/def page-title
{:mixins [(mx/local) mx/static mx/reactive]} :mixins [(mx/local) mx/static]
[{:keys [rum/local] :as own} {:keys [id] :as coll}]
(let [dashboard (mx/react dashboard-ref) :render
own? (= :own (:type coll)) (fn [{:keys [::mx/local] :as own} {:keys [id type] :as coll}]
edit? (:edit @local)] (let [own? (= :own (:type coll))
(letfn [(on-save [e] edit? (:edit @local)]
(let [dom (mx/ref-node own "input") (letfn [(on-save [e]
name (.-innerText dom)] (let [dom (mx/ref-node own "input")
(st/emit! (di/rename-collection id (str/trim name))) name (.-innerText dom)]
(swap! local assoc :edit false))) (st/emit! (di/rename-collection id (str/trim name)))
(on-cancel [e] (swap! local assoc :edit false)))
(swap! local assoc :edit false)) (on-cancel [e]
(on-edit [e] (swap! local assoc :edit false))
(swap! local assoc :edit true)) (on-edit [e]
(on-input-keydown [e] (swap! local assoc :edit true))
(cond (on-input-keydown [e]
(kbd/esc? e) (on-cancel e) (cond
(kbd/enter? e) (kbd/esc? e) (on-cancel e)
(do (kbd/enter? e)
(dom/prevent-default e) (do
(dom/stop-propagation e) (dom/prevent-default e)
(on-save e)))) (dom/stop-propagation e)
(delete [] (on-save e))))
(st/emit! (di/delete-collection id))) (delete []
(on-delete [] (st/emit! (di/delete-collection id)))
(udl/open! :confirm {:on-accept delete}))] (on-delete []
[:div.dashboard-title {} (udl/open! :confirm {:on-accept delete}))]
[:h2 {} [:div.dashboard-title
(if edit? [:h2
[:div.dashboard-title-field {}
[:span.edit
{:content-editable true
:ref "input"
:on-key-down on-input-keydown}
(:name coll)]
[:span.close {:on-click on-cancel} i/close]]
(if own?
[:span.dashboard-title-field
{:on-double-click on-edit}
(:name coll)]
[:span.dashboard-title-field
(:name coll "Storage")]))]
(when (and own? coll)
[:div.edition {}
(if edit? (if edit?
[:span {:on-click on-save} i/save] [:div.dashboard-title-field
[:span {:on-click on-edit} i/pencil]) [:span.edit
[:span {:on-click on-delete} i/trash]])]))) {:content-editable true
:ref "input"
:on-key-down on-input-keydown}
(:name coll)]
[:span.close {:on-click on-cancel} i/close]]
(if own?
[:span.dashboard-title-field
{:on-double-click on-edit}
(:name coll)]
[:span.dashboard-title-field
(:name coll "Storage")]))]
(when (and own? coll)
[:div.edition
(if edit?
[:span {:on-click on-save} i/save]
[:span {:on-click on-edit} i/pencil])
[:span {:on-click on-delete} i/trash]])]))))
;; --- Nav ;; --- Nav
(defn react-count-icons (defn num-icons-ref
[id] [id]
(->> (mx/react icons-ref) (let [selector (fn [icons] (count (filter #(= id (:collection %)) (vals icons))))]
(vals) (-> (comp (l/key :icons)
(filter #(= id (:collection %))) (l/lens selector))
(count))) (l/derive st/state))))
(mx/defcs nav-item (mx/def nav-item
{:mixins [(mx/local) mx/static mx/reactive]} :key-fn :id
[own {:keys [id type name num-icons] :as coll} selected?] :mixins [(mx/local) mx/static mx/reactive]
(let [num-icons (or num-icons (react-count-icons id))
editable? (= type :own) :init
local (:rum/local own)] (fn [own {:keys [id] :as props}]
(letfn [(on-click [event] (assoc own ::num-icons-ref (num-icons-ref id)))
(let [type (or type :own)]
(st/emit! (rt/navigate :dashboard/icons {} {:type type :id id})))) :render
(on-input-change [event] (fn [{:keys [::mx/local] :as own}
(let [value (dom/get-target event) {:keys [id type name num-icons ::selected?] :as coll}]
value (dom/get-value value)] (let [num-icons (or num-icons (mx/react (::num-icons-ref own)))
(swap! local assoc :name value))) editable? (= type :own)]
(on-cancel [event] (letfn [(on-click [event]
(swap! local dissoc :name) (let [type (or type :own)]
(swap! local dissoc :edit)) (st/emit! (rt/navigate :dashboard/icons {} {:type type :id id}))))
(on-double-click [event] (on-input-change [event]
(when editable?
(swap! local assoc :edit true)))
(on-input-keyup [event]
(when (kbd/enter? event)
(let [value (dom/get-target event) (let [value (dom/get-target event)
value (dom/get-value value)] value (dom/get-value value)]
(st/emit! (di/rename-collection id (str/trim (:name @local)))) (swap! local assoc :name value)))
(swap! local assoc :edit false))))] (on-cancel [event]
[:li {:on-click on-click (swap! local dissoc :name)
:on-double-click on-double-click (swap! local dissoc :edit))
:class-name (when selected? "current")} (on-double-click [event]
(if (:edit @local) (when editable?
[:div {} (swap! local assoc :edit true)))
[:input.element-title (on-input-keyup [event]
{:value (if (:name @local) (:name @local) (if coll name "Storage")) (when (kbd/enter? event)
:on-change on-input-change (let [value (dom/get-target event)
:on-key-down on-input-keyup}] value (dom/get-value value)]
[:span.close {:on-click on-cancel} i/close]] (st/emit! (di/rename-collection id (str/trim (:name @local))))
[:span.element-title {} (swap! local assoc :edit false))))]
(if coll name "Storage")]) [:li {:on-click on-click
[:span.element-subtitle {} :on-double-click on-double-click
(tr "ds.num-elements" (t/c num-icons))]]))) :class-name (when selected? "current")}
(if (:edit @local)
[:div
[:input.element-title
{:value (if (:name @local) (:name @local) (if id 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 id name "Storage")])
[:span.element-subtitle
(tr "ds.num-elements" (t/c num-icons))]]))))
(mx/defc nav-section (mx/def nav
{:mixins [mx/static mx/reactive]} :mixins [mx/static mx/reactive]
[type selected colls]
(let [own? (= type :own)
builtin? (= type :builtin)
colls (cond->> (vals colls)
own? (filter #(= :own (:type %)))
builtin? (filter #(= :builtin (:type %))))
colls (sort-by :name colls)]
[:ul.library-elements {}
(when own?
[:li {}
[:a.btn-primary
{:on-click #(st/emit! (di/create-collection))}
(tr "ds.icons-collection.new")]])
(when own?
(nav-item nil (nil? selected)))
(for [coll colls]
(let [selected? (= (:id coll) selected)]
(-> (nav-item coll selected?)
(mx/with-key (:id coll)))))]))
(mx/defc nav :render
{:mixins [mx/static]} (fn [own {:keys [id type] :as props}]
[{:keys [type id] :as state} colls] (let [own? (= type :own)
(let [own? (= type :own) builtin? (= type :builtin)
builtin? (= type :builtin)] colls (mx/react collections-ref)
(letfn [(select-tab [type] select-tab (fn [type]
(if-let [coll (->> (map second colls) (if-let [coll (->> (vals colls)
(filter #(= type (:type %))) (filter #(= type (:type %)))
(sort-by :created-at) (sort-by :created-at)
(first))] (first))]
(st/emit! (rt/nav :dashboard/icons nil {:type type :id (:id coll)})) (st/emit! (rt/nav :dashboard/icons nil {:type type :id (:id coll)}))
(st/emit! (rt/nav :dashboard/icons nil {:type type}))))] (st/emit! (rt/nav :dashboard/icons nil {:type type}))))]
[:div.library-bar {} [:div.library-bar
[:div.library-bar-inside {} [:div.library-bar-inside
[:ul.library-tabs {} [:ul.library-tabs
[:li {:class-name (when own? "current") [:li {:class-name (when own? "current")
:on-click (partial select-tab :own)} :on-click (partial select-tab :own)}
(tr "ds.your-icons-title")] (tr "ds.your-icons-title")]
[:li {:class-name (when builtin? "current") [:li {:class-name (when builtin? "current")
:on-click (partial select-tab :builtin)} :on-click (partial select-tab :builtin)}
(tr "ds.store-icons-title")]] (tr "ds.store-icons-title")]]
(nav-section type id colls)]]))) [:ul.library-elements
(when own?
[:li
[:a.btn-primary {:on-click #(st/emit! (di/create-collection))}
(tr "ds.icons-collection.new")]])
(when own?
(nav-item {::selected? (nil? id)}))
(for [coll (cond->> (vals colls)
own? (filter #(= :own (:type %)))
builtin? (filter #(= :builtin (:type %)))
true (sort-by :name))]
(let [selected? (= (:id coll) id)]
(nav-item (assoc coll ::selected? selected?))))]]])))
;; --- Grid ;; --- Grid
@ -224,7 +227,7 @@
(let [files (dom/get-event-files event)] (let [files (dom/get-event-files event)]
(st/emit! (di/create-icons coll-id files))))] (st/emit! (di/create-icons coll-id files))))]
[:div.grid-item.small-item.add-project {:on-click forward-click} [:div.grid-item.small-item.add-project {:on-click forward-click}
[:span {} (tr "ds.icon.new")] [:span (tr "ds.icon.new")]
[:input.upload-image-input [:input.upload-image-input
{:style {:display "none"} {:style {:display "none"}
:multiple true :multiple true
@ -234,34 +237,37 @@
:type "file" :type "file"
:on-change on-file-selected}]])) :on-change on-file-selected}]]))
(mx/defc grid-options-tooltip (mx/def grid-options-tooltip
{:mixins [mx/reactive mx/static]} :mixins [mx/reactive mx/static]
[& {:keys [selected on-select title]}]
{:pre [(uuid? selected)
(fn? on-select)
(string? title)]}
(let [colls (mx/react collections-ref)
colls (->> (vals colls)
(filter #(= :own (:type %)))
(remove #(= selected (:id %)))
(sort-by :name colls))
on-select (fn [event id]
(dom/prevent-default event)
(dom/stop-propagation event)
(on-select id))]
[:ul.move-list {}
[:li.title {} title]
[:li {}
[:a {:href "#" :on-click #(on-select % nil)} "Storage"]]
(for [{:keys [id name] :as coll} colls]
[:li {:key (str id)}
[:a {:on-click #(on-select % id)} name]])]))
(mx/defcs grid-options :render
{:mixins [(mx/local) mx/static]} (fn [own {:keys [selected on-select title]}]
[own {:keys [type id] :as coll} selected] {:pre [(uuid? selected)
(let [editable? (or (= type :own) (nil? coll)) (fn? on-select)
local (:rum/local own)] (string? title)]}
(let [colls (mx/react collections-ref)
colls (->> (vals colls)
(filter #(= :own (:type %)))
(remove #(= selected (:id %)))
(sort-by :name colls))
on-select (fn [event id]
(dom/prevent-default event)
(dom/stop-propagation event)
(on-select id))]
[:ul.move-list
[:li.title title]
[:li
[:a {:href "#" :on-click #(on-select % nil)} "Storage"]]
(for [{:keys [id name] :as coll} colls]
[:li {:key (pr-str id)}
[:a {:on-click #(on-select % id)} name]])])))
(mx/def grid-options
:mixins [(mx/local) mx/static]
:render
(fn [{:keys [::mx/local] :as own}
{:keys [id type selected] :as props}]
(letfn [(delete [] (letfn [(delete []
(st/emit! (di/delete-selected))) (st/emit! (di/delete-selected)))
(on-delete [event] (on-delete [event]
@ -283,26 +289,27 @@
(on-rename [event] (on-rename [event]
(let [selected (first selected)] (let [selected (first selected)]
(st/emit! (di/update-opts :edition selected))))] (st/emit! (di/update-opts :edition selected))))]
;; MULTISELECT OPTIONS BAR ;; MULTISELECT OPTIONS BAR
[:div.multiselect-bar {} [:div.multiselect-bar
(if (or (= type :own) (nil? coll)) (if (or (= type :own) (nil? id))
;; if editable ;; if editable
[:div.multiselect-nav {} [:div.multiselect-nav {}
[:span.move-item.tooltip.tooltip-top [:span.move-item.tooltip.tooltip-top
{:alt (tr "ds.multiselect-bar.copy") {:alt (tr "ds.multiselect-bar.copy")
:on-click on-toggle-copy} :on-click on-toggle-copy}
(when (:show-copy-tooltip @local) (when (:show-copy-tooltip @local)
(grid-options-tooltip :selected id (grid-options-tooltip {:selected id
:title (tr "ds.multiselect-bar.copy-to-library") :title (tr "ds.multiselect-bar.copy-to-library")
:on-select on-copy)) :on-select on-copy}))
i/copy] i/copy]
[:span.move-item.tooltip.tooltip-top [:span.move-item.tooltip.tooltip-top
{:alt (tr "ds.multiselect-bar.move") {:alt (tr "ds.multiselect-bar.move")
:on-click on-toggle-move} :on-click on-toggle-move}
(when (:show-move-tooltip @local) (when (:show-move-tooltip @local)
(grid-options-tooltip :selected id (grid-options-tooltip {:selected id
:title (tr "ds.multiselect-bar.move-to-library") :title (tr "ds.multiselect-bar.move-to-library")
:on-select on-move)) :on-select on-move}))
i/move] i/move]
(when (= 1 (count selected)) (when (= 1 (count selected))
[:span.move-item.tooltip.tooltip-top [:span.move-item.tooltip.tooltip-top
@ -320,158 +327,164 @@
{:alt (tr "ds.multiselect-bar.copy") {:alt (tr "ds.multiselect-bar.copy")
:on-click on-toggle-copy} :on-click on-toggle-copy}
(when (:show-copy-tooltip @local) (when (:show-copy-tooltip @local)
(grid-options-tooltip :selected id (grid-options-tooltip {:selected id
:title (tr "ds.multiselect-bar.copy-to-library") :title (tr "ds.multiselect-bar.copy-to-library")
:on-select on-copy)) :on-select on-copy}))
i/organize]])]))) i/organize]])])))
(mx/defc grid-item (mx/def grid-item
{:mixins [mx/static]} :key-fn :id
[{:keys [id created-at] :as icon} selected? edition?] :mixins [mx/static]
(letfn [(toggle-selection [event] :render
(st/emit! (di/toggle-icon-selection id))) (fn [own {:keys [id created-at ::selected? ::edition?] :as icon}]
(toggle-selection-shifted [event] (letfn [(toggle-selection [event]
(when (kbd/shift? event) (prn "toggle-selection")
(toggle-selection event))) (st/emit! (di/toggle-icon-selection id)))
(on-blur [event] (on-key-down [event]
(let [target (dom/event->target event) (when (kbd/enter? event)
name (dom/get-value target)] (on-blur event)))
(st/emit! (di/update-opts :edition false) (on-blur [event]
(di/rename-icon id name)))) (let [target (dom/event->target event)
(on-key-down [event] name (dom/get-value target)]
(when (kbd/enter? event) (st/emit! (di/update-opts :edition false)
(on-blur event))) (di/rename-icon id name))))
(ignore-click [event] (ignore-click [event]
(dom/stop-propagation event) (dom/stop-propagation event)
(dom/prevent-default event)) (dom/prevent-default event))
(on-edit [event] (on-edit [event]
(dom/stop-propagation event) (dom/stop-propagation event)
(dom/prevent-default event) (dom/prevent-default event)
(st/emit! (di/update-opts :edition id)))] (st/emit! (di/update-opts :edition id)))]
[:div.grid-item.small-item.project-th [:div.grid-item.small-item.project-th {:id (str "grid-item-" id)}
{:on-click toggle-selection [:div.input-checkbox.check-primary
:id (str "grid-item-" id)} [:input {:type "checkbox"
[:div.input-checkbox.check-primary {} :id (:id icon)
[:input {:type "checkbox" :on-change toggle-selection
:id (:id icon) :checked selected?}]
:on-click toggle-selection [:label {:for (:id icon)}]]
:checked selected?}] [:span.grid-item-image (icon/icon-svg icon)]
[:label {:for (:id icon)}]] [:div.item-info {:on-click ignore-click}
[:span.grid-item-image (icon/icon-svg icon)] (if edition?
[:div.item-info [:input.element-name {:type "text"
{:on-click ignore-click} :auto-focus true
(if edition? :on-key-down on-key-down
[:input.element-name {:type "text" :on-blur on-blur
:auto-focus true :on-click on-edit
:on-key-down on-key-down :default-value (:name icon)}]
:on-blur on-blur [:h3 {:on-double-click on-edit}
:on-click on-edit (:name icon)])
:default-value (:name icon)}] (str (tr "ds.uploaded-at" (dt/format created-at "DD/MM/YYYY")))]])))
[:h3 {:on-double-click on-edit}
(:name icon)])
(str (tr "ds.uploaded-at" (dt/format created-at "DD/MM/YYYY")))]]))
(mx/defc grid (mx/def grid
{:mixins [mx/static mx/reactive]} :mixins [mx/reactive]
[{:keys [selected edition id type] :as state}] :init
(let [editable? (or (= type :own) (nil? id)) (fn [own {:keys [id] :as props}]
ordering (:order state :name) (let [selector (fn [icons]
filtering (:filter state "") (->> (vals icons)
icons (mx/react icons-ref) (filter #(= id (:collection %)))))]
icons (->> (vals icons) (assoc own ::icons-ref (-> (comp (l/key :icons)
(filter #(= id (:collection %))) (l/lens selector))
(filter-icons-by filtering) (l/derive st/state)))))
(sort-icons-by ordering))]
[:div.dashboard-grid-content {}
[:div.dashboard-grid-row {}
(when editable? (grid-form id))
(for [{:keys [id] :as icon} icons]
(let [edition? (= edition id)
selected? (contains? selected id)]
(-> (grid-item icon selected? edition?)
(mx/with-key (str id)))))]]))
(mx/defc content :render
{:mixins [mx/static]} (fn [own {:keys [selected edition id type] :as props}]
[{:keys [selected] :as state} coll] (let [editable? (or (= type :own) (nil? id))
[:section.dashboard-grid.library {} icons (->> (mx/react (::icons-ref own))
(page-title coll) (filter-icons-by (:filter props ""))
(grid state) (sort-icons-by (:order props :name)))]
(when (seq selected)
(grid-options coll selected))]) [:div.dashboard-grid-content
[:div.dashboard-grid-row
(when editable? (grid-form id))
(for [icon icons]
(let [edition? (= edition (:id icon))
selected? (contains? selected (:id icon))]
(grid-item (assoc icon ::selected? selected? ::edition? edition?))))]])))
;; --- Menu ;; --- Menu
(mx/defc menu (mx/def menu
{:mixins [mx/static mx/reactive]} :mixins [mx/static mx/reactive]
[state {:keys [id num-icons] :as coll}]
(let [ordering (:order state :name)
filtering (:filter state "")
num-icons (or num-icons (react-count-icons id))]
(letfn [(on-term-change [event]
(let [term (-> (dom/get-target event)
(dom/get-value))]
(st/emit! (di/update-opts :filter term))))
(on-ordering-change [event]
(let [value (dom/event->value event)
value (read-string value)]
(st/emit! (di/update-opts :order value))))
(on-clear [event]
(st/emit! (di/update-opts :filter "")))]
[:section.dashboard-bar.library-gap {}
[:div.dashboard-info {}
;; Counter :init
[:span.dashboard-icons {} (tr "ds.num-icons" (t/c num-icons))] (fn [own {:keys [id] :as props}]
(assoc own ::num-icons-ref (num-icons-ref id)))
:render
(fn [own props]
(let [{:keys [id num-icons] :as coll} (::coll props)
num-icons (or num-icons (mx/react (::num-icons-ref own)))]
(letfn [(on-term-change [event]
(let [term (-> (dom/get-target event)
(dom/get-value))]
(st/emit! (di/update-opts :filter term))))
(on-ordering-change [event]
(let [value (dom/event->value event)
value (read-string value)]
(st/emit! (di/update-opts :order value))))
(on-clear [event]
(st/emit! (di/update-opts :filter "")))]
[:section.dashboard-bar.library-gap
[:div.dashboard-info
;; Counter
[:span.dashboard-icons (tr "ds.num-icons" (t/c num-icons))]
;; Sorting
[:div
[:span (tr "ds.ordering")]
[:select.input-select {:on-change on-ordering-change
:value (pr-str (:order props :name))}
(for [[key value] (seq +ordering-options+)]
[:option {:key key :value (pr-str key)} (tr value)])]]
;; Search
[:form.dashboard-search
[:input.input-text {:key :icons-search-box
:type "text"
:on-change on-term-change
:auto-focus true
:placeholder (tr "ds.search.placeholder")
:value (:filter props "")}]
[:div.clear-search {:on-click on-clear}
i/close]]]]))))
(mx/def content
:mixins [mx/reactive mx/static]
:init
(fn [own {:keys [id] :as props}]
(assoc own ::coll-ref (-> (l/in [:icons-collections id])
(l/derive st/state))))
:render
(fn [own props]
(let [opts (mx/react opts-ref)
coll (mx/react (::coll-ref own))
props (merge opts props)]
[:*
(menu (assoc props ::coll coll))
[:section.dashboard-grid.library
(page-title coll)
(grid props)
(when (seq (:selected opts))
(grid-options props))]])))
;; Sorting
[:div {}
[:span {} (tr "ds.ordering")]
[:select.input-select
{:on-change on-ordering-change
:value (pr-str ordering)}
(for [[key value] (seq +ordering-options+)]
(let [key (pr-str key)]
[:option {:key key :value key} (tr value)]))]]
;; Search
[:form.dashboard-search {}
[:input.input-text
{:key :icons-search-box
:type "text"
:on-change on-term-change
:auto-focus true
:placeholder (tr "ds.search.placeholder")
:value (or filtering "")}]
[:div.clear-search {:on-click on-clear} i/close]]]])))
;; --- Icons Page ;; --- Icons Page
(defn- icons-page-will-mount (mx/def icons-page
[own] :key-fn identity
(let [[type id] (:rum/args own)] :mixins #{mx/static mx/reactive}
(st/emit! (di/initialize type id))
own))
(defn- icons-page-did-remount :init
[old-own own] (fn [own props]
(let [[old-type old-id] (:rum/args old-own) (let [{:keys [type id]} (::mx/props own)]
[new-type new-id] (:rum/args own)] (st/emit! (di/initialize type id))
(when (or (not= old-type new-type) own))
(not= old-id new-id))
(st/emit! (di/initialize new-type new-id)))
own))
(mx/defc icons-page :render
{:will-mount icons-page-will-mount (fn [own {:keys [type] :as props}]
:did-remount icons-page-did-remount (let [type (or type :own)
:mixins [mx/static mx/reactive]} props (assoc props :type type)]
[] [:section.dashboard-content
(let [state (mx/react dashboard-ref) (nav props)
colls (mx/react collections-ref) (content props)])))
coll (get colls (:id state))]
[:main.dashboard-main {}
(header)
[:section.dashboard-content {}
(nav state colls)
(menu state coll)
(content state coll)]]))

750
frontend/src/uxbox/main/ui/dashboard/images.cljs
View file

@ -6,21 +6,22 @@
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com> ;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
(ns uxbox.main.ui.dashboard.images (ns uxbox.main.ui.dashboard.images
(:require [cuerdas.core :as str] (:require
[lentes.core :as l] [cuerdas.core :as str]
[rumext.core :as mx :include-macros true] [lentes.core :as l]
[uxbox.util.i18n :as t :refer [tr]] [rumext.core :as mx :include-macros true]
[uxbox.main.store :as st] [uxbox.builtins.icons :as i]
[uxbox.main.data.lightbox :as udl] [uxbox.main.data.images :as di]
[uxbox.main.data.images :as di] [uxbox.main.data.lightbox :as udl]
[uxbox.builtins.icons :as i] [uxbox.main.store :as st]
[uxbox.main.ui.lightbox :as lbx] [uxbox.main.ui.dashboard.header :refer [header]]
[uxbox.main.ui.keyboard :as kbd] [uxbox.main.ui.keyboard :as kbd]
[uxbox.main.ui.dashboard.header :refer [header]] [uxbox.main.ui.lightbox :as lbx]
[uxbox.util.router :as rt] [uxbox.util.data :refer [read-string jscoll->vec]]
[uxbox.util.time :as dt] [uxbox.util.dom :as dom]
[uxbox.util.data :refer [read-string jscoll->vec]] [uxbox.util.i18n :as t :refer [tr]]
[uxbox.util.dom :as dom])) [uxbox.util.router :as rt]
[uxbox.util.time :as dt]))
;; --- Helpers & Constants ;; --- Helpers & Constants
@ -48,88 +49,89 @@
;; --- Refs ;; --- Refs
(def ^:private dashboard-ref (def collections-ref
(-> (l/in [:dashboard :images])
(l/derive st/state)))
(def ^:private collections-ref
(-> (l/key :images-collections) (-> (l/key :images-collections)
(l/derive st/state))) (l/derive st/state)))
(def ^:private images-ref (def opts-ref
(-> (l/key :images) (-> (l/in [:dashboard :images])
(l/derive st/state))) (l/derive st/state)))
(def ^:private uploading?-ref
(-> (l/key :uploading)
(l/derive dashboard-ref)))
;; --- Page Title ;; --- Page Title
(mx/defcs page-title (mx/def page-title
{:mixins [(mx/local {}) mx/static mx/reactive]} :mixins [(mx/local) mx/reactive]
[own {:keys [id] :as coll}]
(let [local (:rum/local own) :render
dashboard (mx/react dashboard-ref) (fn [{:keys [::mx/local] :as own}
own? (= :own (:type coll)) {:keys [id type] :as coll}]
edit? (:edit @local)] (let [own? (= :own (:type coll))
(letfn [(on-save [e] edit? (:edit @local)]
(let [dom (mx/ref-node own "input") (letfn [(on-save [e]
name (dom/get-inner-text dom)] (let [dom (mx/ref-node own "input")
(st/emit! (di/rename-collection id (str/trim name))) name (dom/get-inner-text dom)]
(swap! local assoc :edit false))) (st/emit! (di/rename-collection id (str/trim name)))
(on-cancel [e] (swap! local assoc :edit false)))
(swap! local assoc :edit false)) (on-cancel [e]
(on-edit [e] (swap! local assoc :edit false))
(swap! local assoc :edit true)) (on-edit [e]
(on-input-keydown [e] (swap! local assoc :edit true))
(cond (on-input-keydown [e]
(kbd/esc? e) (on-cancel e) (cond
(kbd/enter? e) (kbd/esc? e) (on-cancel e)
(do (kbd/enter? e)
(dom/prevent-default e) (do
(dom/stop-propagation e) (dom/prevent-default e)
(on-save e)))) (dom/stop-propagation e)
(delete [] (on-save e))))
(st/emit! (di/delete-collection id))) (delete []
(on-delete [] (st/emit! (di/delete-collection id)))
(udl/open! :confirm {:on-accept delete}))] (on-delete []
[:div.dashboard-title {} (udl/open! :confirm {:on-accept delete}))]
[:h2 {} [:div.dashboard-title
(if edit? [:h2
[:div.dashboard-title-field {}
[:span.edit
{:content-editable true
:ref "input"
:on-key-down on-input-keydown}
(:name coll)]
[:span.close {:on-click on-cancel} i/close]]
(if own?
[:span.dashboard-title-field
{:on-double-click on-edit}
(:name coll)]
[:span.dashboard-title-field
(:name coll "Storage")]))]
(when (and own? coll)
[:div.edition {}
(if edit? (if edit?
[:span {:on-click on-save} ^:inline i/save] [:div.dashboard-title-field
[:span {:on-click on-edit} ^:inline i/pencil]) [:span.edit
[:span {:on-click on-delete} ^:inline i/trash]])]))) {:content-editable true
:ref "input"
:on-key-down on-input-keydown}
(:name coll)]
[:span.close {:on-click on-cancel} i/close]]
(if own?
[:span.dashboard-title-field
{:on-double-click on-edit}
(:name coll)]
[:span.dashboard-title-field
(:name coll "Storage")]))]
(when (and own? coll)
[:div.edition
(if edit?
[:span {:on-click on-save} ^:inline i/save]
[:span {:on-click on-edit} ^:inline i/pencil])
[:span {:on-click on-delete} ^:inline i/trash]])]))))
;; --- Nav ;; --- Nav
(defn react-count-images (defn num-images-ref
[id] [id]
(->> (mx/react images-ref) (let [selector (fn [images] (count (filter #(= id (:collection %)) (vals images))))]
(vals) (-> (comp (l/key :images)
(filter #(= id (:collection %))) (l/lens selector))
(count))) (l/derive st/state))))
(mx/defcs nav-item (mx/def nav-item
{:mixins [(mx/local) mx/static mx/reactive]} :key-fn :id
[{:keys [rum/local] :as own} {:keys [id type name num-images] :as coll} selected?] :mixins [(mx/local) mx/static mx/reactive]
(letfn [(on-click [event]
:init
(fn [own {:keys [id] :as props}]
(assoc own ::num-images-ref (num-images-ref id)))
:render
(fn [{:keys [::mx/local] :as own}
{:keys [id type name num-images selected?] :as coll}]
(letfn [(on-click [event]
(let [type (or type :own)] (let [type (or type :own)]
(st/emit! (rt/nav :dashboard/images {} {:type type :id id})))) (st/emit! (rt/nav :dashboard/images {} {:type type :id id}))))
(on-input-change [event] (on-input-change [event]
@ -148,59 +150,40 @@
value (dom/get-value value)] value (dom/get-value value)]
(st/emit! (di/rename-collection id (str/trim (:name @local)))) (st/emit! (di/rename-collection id (str/trim (:name @local))))
(swap! local assoc :edit false))))] (swap! local assoc :edit false))))]
[:li {:on-click on-click [:li {:on-click on-click
:on-double-click on-double-click :on-double-click on-double-click
:class-name (when selected? "current")} :class-name (when selected? "current")}
(if (:edit @local) (if (:edit @local)
[:div {} [:div
[:input.element-title [:input.element-title
{:value (if (:name @local) (:name @local) (if coll name "Storage")) {:value (if (:name @local) (:name @local) (if id name "Storage"))
:on-change on-input-change :on-change on-input-change
:on-key-down on-input-keyup}] :on-key-down on-input-keyup}]
[:span.close {:on-click on-cancel} ^:inline i/close]] [:span.close {:on-click on-cancel} ^:inline i/close]]
[:span.element-title {} [:span.element-title {}
(if coll name "Storage")]) (if id name "Storage")])
[:span.element-subtitle [:span.element-subtitle
(tr "ds.num-elements" (t/c (or num-images (react-count-images id))))]])) (tr "ds.num-elements" (t/c (or num-images (mx/react (::num-images-ref own)))))]])))
(mx/defc nav-section (mx/def nav
{:mixins [mx/static]} :mixins [mx/static mx/reactive]
[type selected colls]
(let [own? (= type :own)
builtin? (= type :builtin)
collections (cond->> (vals colls)
own? (filter #(= :own (:type %)))
builtin? (filter #(= :builtin (:type %)))
own? (sort-by :name))]
[:ul.library-elements {}
(when own?
[:li {}
[:a.btn-primary
{:on-click #(st/emit! (di/create-collection))}
(tr "ds.images-collection.new")]])
(when own?
(nav-item nil (nil? selected)))
(for [coll collections]
(let [selected? (= (:id coll) selected)
key (str (:id coll))]
(-> (nav-item coll selected?)
(mx/with-key key))))]))
(mx/defc nav :render
{:mixins [mx/static]} (fn [own {:keys [id type] :as props}]
[{:keys [type id] :as state} colls] (let [own? (= type :own)
(let [own? (= type :own) builtin? (= type :builtin)
builtin? (= type :builtin)] colls (mx/react collections-ref)
(letfn [(select-tab [type] select-tab (fn [type]
(if-let [coll (->> (map second colls) (if-let [coll (->> (vals colls)
(filter #(= type (:type %))) (filter #(= type (:type %)))
(sort-by :name) (sort-by :created-at)
(first))] (first))]
(st/emit! (rt/nav :dashboard/images nil {:type type :id (:id coll)})) (st/emit! (rt/nav :dashboard/images nil {:type type :id (:id coll)}))
(st/emit! (rt/nav :dashboard/images nil {:type type}))))] (st/emit! (rt/nav :dashboard/images nil {:type type}))))]
[:div.library-bar {}
[:div.library-bar-inside {} [:div.library-bar
[:ul.library-tabs {} [:div.library-bar-inside
[:ul.library-tabs
[:li {:class-name (when own? "current") [:li {:class-name (when own? "current")
:on-click (partial select-tab :own)} :on-click (partial select-tab :own)}
(tr "ds.your-images-title")] (tr "ds.your-images-title")]
@ -208,261 +191,298 @@
:on-click (partial select-tab :builtin)} :on-click (partial select-tab :builtin)}
(tr "ds.store-images-title")]] (tr "ds.store-images-title")]]
(nav-section type id colls)]]))) [:ul.library-elements
(when own?
[:li
[:a.btn-primary {:on-click #(st/emit! (di/create-collection))}
(tr "ds.images-collection.new")]])
(when own?
(nav-item {:selected? (nil? id)}))
(for [coll (cond->> (vals colls)
own? (filter #(= :own (:type %)))
builtin? (filter #(= :builtin (:type %)))
own? (sort-by :name))]
(let [selected? (= (:id coll) id)]
(nav-item (assoc coll :selected? selected?))))]]])))
;; --- Grid ;; --- Grid
(mx/defcs grid-form (mx/def grid-form
{:mixins [mx/static mx/reactive]} :mixins #{mx/static}
[own coll-id]
(letfn [(forward-click [event] :init
(dom/click (mx/ref-node own "file-input"))) (fn [own props]
(on-file-selected [event] (assoc own ::file-input (mx/create-ref)))
(let [files (dom/get-event-files event)
files (jscoll->vec files)] :render
(st/emit! (di/create-images coll-id files))))] (fn [own {:keys [id] :as props}]
(let [uploading? (mx/react uploading?-ref)] (letfn [(forward-click [event]
(dom/click (mx/ref-node (::file-input own))))
(on-file-selected [event]
(let [files (dom/get-event-files event)
files (jscoll->vec files)]
(st/emit! (di/create-images id files))))]
(let [uploading? (:uploading props)]
[:div.grid-item.add-project {:on-click forward-click} [:div.grid-item.add-project {:on-click forward-click}
(if uploading? (if uploading?
[:div {} ^:inline i/loader-pencil] [:div i/loader-pencil]
[:span {} (tr "ds.image-new")]) [:span (tr "ds.image-new")])
[:input.upload-image-input [:input.upload-image-input
{:style {:display "none"} {:style {:display "none"}
:multiple true :multiple true
:ref "file-input" :ref (::file-input own)
:value "" :value ""
:accept "image/jpeg,image/png" :accept "image/jpeg,image/png"
:type "file" :type "file"
:on-change on-file-selected}]]))) :on-change on-file-selected}]]))))
(mx/defc grid-options-tooltip (mx/def grid-options-tooltip
{:mixins [mx/reactive mx/static]} :mixins [mx/reactive mx/static]
[& {:keys [selected on-select title]}]
{:pre [(uuid? selected)
(fn? on-select)
(string? title)]}
(let [colls (mx/react collections-ref)
colls (->> (vals colls)
(filter #(= :own (:type %)))
(remove #(= selected (:id %)))
(sort-by :name colls))
on-select (fn [event id]
(dom/prevent-default event)
(dom/stop-propagation event)
(on-select id))]
[:ul.move-list {}
[:li.title {} title]
[:li {}
[:a {:href "#" :on-click #(on-select % nil)} "Storage"]]
(for [{:keys [id name] :as coll} colls]
[:li {:key (str id)}
[:a {:on-click #(on-select % id)} name]])]))
(mx/defcs grid-options :render
{:mixins [(mx/local) mx/static]} (fn [own {:keys [selected on-select title]}]
[{:keys [rum/local] :as own} {:keys [type id] :as coll} selected] {:pre [(uuid? selected)
(letfn [(delete [] (fn? on-select)
(st/emit! (di/delete-selected))) (string? title)]}
(on-delete [event] (let [colls (mx/react collections-ref)
(udl/open! :confirm {:on-accept delete})) colls (->> (vals colls)
(on-toggle-copy [event] (filter #(= :own (:type %)))
(swap! local update :show-copy-tooltip not)) (remove #(= selected (:id %)))
(on-toggle-move [event] (sort-by :name colls))
(swap! local update :show-move-tooltip not)) on-select (fn [event id]
(on-copy [selected] (dom/prevent-default event)
(swap! local assoc (dom/stop-propagation event)
:show-move-tooltip false (on-select id))]
:show-copy-tooltip false) [:ul.move-list
(st/emit! (di/copy-selected selected))) [:li.title title]
(on-move [selected] [:li
(swap! local assoc [:a {:href "#" :on-click #(on-select % nil)} "Storage"]]
:show-move-tooltip false (for [{:keys [id name] :as coll} colls]
:show-copy-tooltip false) [:li {:key (pr-str id)}
(st/emit! (di/move-selected selected))) [:a {:on-click #(on-select % id)} name]])])))
(on-rename [event]
(let [selected (first selected)] (mx/def grid-options
(st/emit! (di/update-opts :edition selected))))] :mixins [(mx/local)]
;; MULTISELECT OPTIONS BAR
[:div.multiselect-bar {} :render
(if (or (= type :own) (nil? coll)) (fn [{:keys [::mx/local] :as own}
;; If editable {:keys [id type selected] :as props}]
[:div.multiselect-nav {} (letfn [(delete []
[:span.move-item.tooltip.tooltip-top (st/emit! (di/delete-selected)))
{:alt (tr "ds.multiselect-bar.copy") (on-delete [event]
:on-click on-toggle-copy} (udl/open! :confirm {:on-accept delete}))
(when (:show-copy-tooltip @local) (on-toggle-copy [event]
(grid-options-tooltip :selected id (swap! local update :show-copy-tooltip not))
:title (tr "ds.multiselect-bar.copy-to-library") (on-toggle-move [event]
:on-select on-copy)) (swap! local update :show-move-tooltip not))
^:inline i/copy] (on-copy [selected]
[:span.move-item.tooltip.tooltip-top (swap! local assoc
{:alt (tr "ds.multiselect-bar.move") :show-move-tooltip false
:on-click on-toggle-move} :show-copy-tooltip false)
(when (:show-move-tooltip @local) (st/emit! (di/copy-selected selected)))
(grid-options-tooltip :selected id (on-move [selected]
:title (tr "ds.multiselect-bar.move-to-library") (swap! local assoc
:on-select on-move)) :show-move-tooltip false
^:inline i/move] :show-copy-tooltip false)
(when (= 1 (count selected)) (st/emit! (di/move-selected selected)))
(on-rename [event]
(let [selected (first selected)]
(st/emit! (di/update-opts :edition selected))))]
;; MULTISELECT OPTIONS BAR
[:div.multiselect-bar
(if (or (= type :own) (nil? id))
;; If editable
[:div.multiselect-nav
[:span.move-item.tooltip.tooltip-top [:span.move-item.tooltip.tooltip-top
{:alt (tr "ds.multiselect-bar.rename") {:alt (tr "ds.multiselect-bar.copy")
:on-click on-rename} :on-click on-toggle-copy}
^:inline i/pencil]) (when (:show-copy-tooltip @local)
[:span.delete.tooltip.tooltip-top (grid-options-tooltip {:selected id
{:alt (tr "ds.multiselect-bar.delete") :title (tr "ds.multiselect-bar.copy-to-library")
:on-click on-delete} :on-select on-copy}))
^:inline i/trash]] ^:inline i/copy]
[:span.move-item.tooltip.tooltip-top
{:alt (tr "ds.multiselect-bar.move")
:on-click on-toggle-move}
(when (:show-move-tooltip @local)
(grid-options-tooltip {:selected id
:title (tr "ds.multiselect-bar.move-to-library")
:on-select on-move}))
^:inline i/move]
(when (= 1 (count selected))
[:span.move-item.tooltip.tooltip-top
{:alt (tr "ds.multiselect-bar.rename")
:on-click on-rename}
^:inline i/pencil])
[:span.delete.tooltip.tooltip-top
{:alt (tr "ds.multiselect-bar.delete")
:on-click on-delete}
^:inline i/trash]]
;; If not editable ;; If not editable
[:div.multiselect-nav {} [:div.multiselect-nav
[:span.move-item.tooltip.tooltip-top [:span.move-item.tooltip.tooltip-top
{:alt (tr "ds.multiselect-bar.copy") {:alt (tr "ds.multiselect-bar.copy")
:on-click on-toggle-copy} :on-click on-toggle-copy}
(when (:show-copy-tooltip @local) (when (:show-copy-tooltip @local)
(grid-options-tooltip :selected id (grid-options-tooltip {:selected id
:title (tr "ds.multiselect-bar.copy-to-library") :title (tr "ds.multiselect-bar.copy-to-library")
:on-select on-copy)) :on-select on-copy}))
^:inline i/organize]])])) ^:inline i/organize]])])))
(mx/defc grid-item (mx/def grid-item
{:mixins [mx/static]} :key-fn :id
[{:keys [id created-at] :as image} selected? edition?] :mixins [mx/static]
(letfn [(toggle-selection [event]
(st/emit! (di/toggle-image-selection id)))
(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)]
(st/emit! (di/update-opts :edition false)
(di/rename-image id name))))
(on-edit [event]
(dom/stop-propagation event)
(dom/prevent-default event)
(st/emit! (di/update-opts :edition id)))]
[:div.grid-item.images-th {}
[:div.grid-item-th {:on-click toggle-selection
: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)}]]]
[:div.item-info {}
(if edition?
[:input.element-name {:type "text"
:auto-focus true
:on-key-down on-key-down
:on-blur on-blur
:on-click on-edit
:default-value (:name image)}]
[:h3 {:on-double-click on-edit} (:name image)])
[:span.date {} (str (tr "ds.uploaded-at" (dt/format created-at "L")))]]]))
(mx/defc grid :render
{:mixins [mx/static mx/reactive]} (fn [own {:keys [id created-at ::selected? ::edition?] :as image}]
[{:keys [id type selected edition] :as state}] (letfn [(toggle-selection [event]
(let [editable? (or (= type :own) (nil? id)) (st/emit! (di/toggle-image-selection id)))
ordering (:order state :name) (on-key-down [event]
filtering (:filter state "") (when (kbd/enter? event)
images-map (mx/react images-ref) (on-blur event)))
images (->> (vals images-map) (on-blur [event]
(filter #(= id (:collection %))) (let [target (dom/event->target event)
(filter-images-by filtering) name (dom/get-value target)]
(sort-images-by ordering))] (st/emit! (di/update-opts :edition false)
[:div.dashboard-grid-content {} (di/rename-image id name))))
[:div.dashboard-grid-row {} (on-edit [event]
(when editable? (dom/stop-propagation event)
(grid-form id)) (dom/prevent-default event)
(for [{:keys [id] :as image} images] (st/emit! (di/update-opts :edition id)))]
(let [edition? (= edition id) [:div.grid-item.images-th
selected? (contains? selected id)] [:div.grid-item-th {:style {:background-image (str "url('" (:thumbnail image) "')")}}
(-> (grid-item image selected? edition?) [:div.input-checkbox.check-primary
(mx/with-key (str id)))))]])) [:input {:type "checkbox"
:id (:id image)
:on-change toggle-selection
:checked selected?}]
[:label {:for (:id image)}]]]
[:div.item-info
(if edition?
[:input.element-name {:type "text"
:auto-focus true
:on-key-down on-key-down
:on-blur on-blur
:on-click on-edit
:default-value (:name image)}]
[:h3 {:on-double-click on-edit} (:name image)])
[:span.date (str (tr "ds.uploaded-at" (dt/format created-at "DD/MM/YYYY")))]]])))
(mx/defc content (mx/def grid
{:mixins [mx/static]} :mixins [mx/reactive]
[{:keys [selected] :as state} coll] :init
[:section.dashboard-grid.library {} (fn [own {:keys [id] :as props}]
(page-title coll) (let [selector (fn [images]
(grid state) (->> (vals images)
(when (seq selected) (filter #(= id (:collection %)))))]
(grid-options coll selected))]) (assoc own ::images-ref (-> (comp (l/key :images)
(l/lens selector))
(l/derive st/state)))))
:render
(fn [own {:keys [selected edition id type] :as props}]
(let [editable? (or (= type :own) (nil? id))
images (->> (mx/react (::images-ref own))
(filter-images-by (:filter props ""))
(sort-images-by (:order props :name)))]
[:div.dashboard-grid-content
[:div.dashboard-grid-row
(when editable?
(grid-form props))
(for [{:keys [id] :as image} images]
(let [edition? (= edition id)
selected? (contains? selected id)]
(grid-item (assoc image ::selected? selected? ::edition? edition?))))]])))
;; --- Menu ;; --- Menu
(mx/defc menu (mx/def menu
{:mixins [mx/static mx/reactive]} :mixins [mx/reactive mx/static]
[coll]
(let [state (mx/react dashboard-ref)
ordering (:order state :name)
filtering (:filter state "")
icount (count (:images coll))]
(letfn [(on-term-change [event]
(let [term (-> (dom/get-target event)
(dom/get-value))]
(st/emit! (di/update-opts :filter term))))
(on-ordering-change [event]
(let [value (dom/event->value event)
value (read-string value)]
(st/emit! (di/update-opts :order value))))
(on-clear [event]
(st/emit! (di/update-opts :filter "")))]
[:section.dashboard-bar.library-gap {}
[:div.dashboard-info {}
;; Counter ;; :init
[:span.dashboard-images {} (tr "ds.num-images" (t/c icount))] ;; (fn [own {:keys [id] :as props}]
;; (assoc own ::num-images-ref (num-images-ref id)))
;; Sorting :render
[:div {} (fn [own props]
[:span {} (tr "ds.ordering")] (let [{:keys [id] :as coll} (::coll props)
[:select.input-select {:on-change on-ordering-change ordering (:order props :name)
:value (pr-str ordering)} filtering (:filter props "")
(for [[key value] (seq +ordering-options+)] icount (count (:images coll))]
(let [key (pr-str key) (letfn [(on-term-change [event]
label (tr value)] (let [term (-> (dom/get-target event)
[:option {:key key :value key} label]))]] (dom/get-value))]
;; Search (prn "on-term-change" term)
[:form.dashboard-search {} (st/emit! (di/update-opts :filter term))))
[:input.input-text {:key :images-search-box (on-ordering-change [event]
:type "text" (let [value (dom/event->value event)
:on-change on-term-change value (read-string value)]
:auto-focus true (st/emit! (di/update-opts :order value))))
:placeholder (tr "ds.search.placeholder") (on-clear [event]
:value (or filtering "")}] (st/emit! (di/update-opts :filter "")))]
[:div.clear-search {:on-click on-clear} i/close]]]]))) [:section.dashboard-bar.library-gap
[:div.dashboard-info
;; Counter
[:span.dashboard-images (tr "ds.num-images" (t/c icount))]
;; Sorting
[:div
[:span (tr "ds.ordering")]
[:select.input-select {:on-change on-ordering-change
:value (pr-str ordering)}
(for [[key value] (seq +ordering-options+)]
[:option {:key key :value (pr-str key)} (tr value)])]]
;; Search
[:form.dashboard-search
[:input.input-text {:key :images-search-box
:type "text"
:on-change on-term-change
:auto-focus true
:placeholder (tr "ds.search.placeholder")
:value filtering}]
[:div.clear-search {:on-click on-clear}
i/close]]]]))))
(mx/def content
:mixins [mx/reactive mx/static]
:init
(fn [own {:keys [id] :as props}]
(assoc own ::coll-ref (-> (l/in [:images-collections id])
(l/derive st/state))))
:render
(fn [own props]
(let [opts (mx/react opts-ref)
coll (mx/react (::coll-ref own))
props (merge opts props)]
[:*
(menu (assoc props ::coll coll))
[:section.dashboard-grid.library
(page-title coll)
(grid props)
(when (seq (:selected opts))
(grid-options props))]])))
;; --- Images Page ;; --- Images Page
(defn- images-page-will-mount (mx/def images-page
[own] :key-fn identity
(let [[type id] (:rum/args own)] :mixins #{mx/static mx/reactive}
(st/emit! (di/initialize type id))
own))
(defn- images-page-did-remount :init
[old-own own] (fn [own props]
(let [[old-type old-id] (:rum/args old-own) (let [{:keys [type id]} (::mx/props own)]
[new-type new-id] (:rum/args own)] (st/emit! (di/initialize type id))
(when (or (not= old-type new-type) own))
(not= old-id new-id))
(st/emit! (di/initialize new-type new-id)))
own))
(mx/defc images-page :render
{:will-mount images-page-will-mount (fn [own {:keys [type] :as props}]
:did-remount images-page-did-remount (let [type (or type :own)
:mixins [mx/static mx/reactive]} props (assoc props :type type)]
[_ _] [:section.dashboard-content
(let [state (mx/react dashboard-ref) (nav props)
colls (mx/react collections-ref) (content props)])))
coll (get colls (:id state))]
[:main.dashboard-main {}
(header)
[:section.dashboard-content {}
(nav state colls)
(menu coll)
(content state coll)]]))

368
frontend/src/uxbox/main/ui/dashboard/projects.cljs
View file

@ -6,26 +6,25 @@
;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com> ;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
(ns uxbox.main.ui.dashboard.projects (ns uxbox.main.ui.dashboard.projects
(:require [lentes.core :as l] (:require
[cuerdas.core :as str] [cuerdas.core :as str]
[uxbox.builtins.icons :as i] [lentes.core :as l]
[uxbox.main.store :as st] [rumext.core :as mx]
[uxbox.main.constants :as c] [rumext.func :as mxf]
[uxbox.main.data.projects :as udp] [uxbox.builtins.icons :as i]
[uxbox.main.data.lightbox :as udl] [uxbox.main.constants :as c]
[uxbox.main.ui.dashboard.header :refer [header]] [uxbox.main.data.lightbox :as udl]
[uxbox.main.ui.dashboard.projects-createform] [uxbox.main.data.projects :as udp]
[uxbox.main.ui.lightbox :as lbx] [uxbox.main.exports :as exports]
[uxbox.main.ui.messages :refer [messages-widget]] [uxbox.main.store :as st]
[uxbox.main.ui.keyboard :as kbd] [uxbox.main.ui.dashboard.projects-createform]
[uxbox.main.exports :as exports] [uxbox.main.ui.keyboard :as kbd]
[uxbox.util.i18n :as t :refer (tr)] [uxbox.util.blob :as blob]
[uxbox.util.router :as r] [uxbox.util.data :refer [read-string]]
[uxbox.util.data :refer [read-string]] [uxbox.util.dom :as dom]
[uxbox.util.dom :as dom] [uxbox.util.i18n :as t :refer (tr)]
[uxbox.util.blob :as blob] [uxbox.util.router :as r]
[rumext.core :as mx :include-macros true] [uxbox.util.time :as dt]))
[uxbox.util.time :as dt]))
;; --- Helpers & Constants ;; --- Helpers & Constants
@ -35,22 +34,10 @@
;; --- Refs ;; --- Refs
(def projects-map-ref (def opts-ref
(-> (l/key :projects)
(l/derive st/state)))
(def dashboard-ref
(-> (l/in [:dashboard :projects]) (-> (l/in [:dashboard :projects])
(l/derive st/state))) (l/derive st/state)))
(def project-ordering-ref
(-> (l/key :project-order)
(l/derive dashboard-ref)))
(def project-filtering-ref
(-> (l/in [:project-filter])
(l/derive dashboard-ref)))
;; --- Helpers ;; --- Helpers
(defn sort-projects-by (defn sort-projects-by
@ -73,181 +60,180 @@
;; --- Menu (Filter & Sort) ;; --- Menu (Filter & Sort)
(mx/defc menu (mx/def menu
{:mixins [mx/static]} :mixins #{mx/static mx/reactive}
[state projects] :init
(let [ordering (:order state :created) (fn [own props]
filtering (:filter state "") (assoc own ::num-projects (-> (comp (l/key :projects)
count (count projects)] (l/lens #(-> % vals count)))
(letfn [(on-term-change [event] (l/derive st/state))))
(let [term (-> (dom/get-target event) :render
(dom/get-value))] (fn [own props]
(st/emit! (udp/update-opts :filter term)))) (let [ordering (:order props :created)
(on-ordering-change [event] filtering (:filter props "")
(let [value (dom/event->value event) num-projects (mx/react (::num-projects own))]
value (read-string value)] (letfn [(on-term-change [event]
(st/emit! (udp/update-opts :order value)))) (let [term (-> (dom/get-target event)
(on-clear [event] (dom/get-value))]
(st/emit! (udp/update-opts :filter "")))] (st/emit! (udp/update-opts :filter term))))
[:section.dashboard-bar {} (on-ordering-change [event]
[:div.dashboard-info {} (let [value (dom/event->value event)
value (read-string value)]
(st/emit! (udp/update-opts :order value))))
(on-clear [event]
(st/emit! (udp/update-opts :filter "")))]
[:section.dashboard-bar
[:div.dashboard-info
;; Counter ;; Counter
[:span.dashboard-images {} (tr "ds.num-projects" (t/c count))] [:span.dashboard-images (tr "ds.num-projects" (t/c num-projects))]
;; Sorting ;; Sorting
[:div {} [:div
[:span {} (tr "ds.ordering")] [:span (tr "ds.ordering")]
[:select.input-select [:select.input-select
{:on-change on-ordering-change {:on-change on-ordering-change
:value (pr-str ordering)} :value (pr-str ordering)}
(for [[key value] (seq +ordering-options+)] (for [[key value] (seq +ordering-options+)]
(let [key (pr-str key)] (let [key (pr-str key)]
[:option {:key key :value key} (tr value)]))]] [:option {:key key :value key} (tr value)]))]]
;; Search ;; Search
[: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.search.placeholder") :placeholder (tr "ds.search.placeholder")
:value (or filtering "")}] :value (or filtering "")}]
[:div.clear-search {:on-click on-clear} i/close]]]]))) [:div.clear-search {:on-click on-clear} i/close]]]]))))
;; --- Grid Item Thumbnail ;; --- Grid Item Thumbnail
(defn- grid-item-thumbnail-will-mount (mx/def grid-item-thumbnail
[own] :mixins #{mx/static}
(let [[project] (:rum/args own)
svg (exports/render-page (:page-id project))
url (some-> svg
(blob/create "image/svg+xml")
(blob/create-uri))]
(assoc own ::url url)))
(defn- grid-item-thumbnail-will-unmount :init
[own] (fn [own project]
(let [url (::url own)] (let [svg (exports/render-page (:page-id project))
(when url (blob/revoke-uri url)) url (some-> svg
own)) (blob/create "image/svg+xml")
(blob/create-uri))]
(assoc own ::url url)))
(defn- grid-item-thumbnail-did-remount :will-unmount
[oldown own] (fn [own]
(when-let [url (::url oldown)] (let [url (::url own)]
(blob/revoke-uri url)) (when url (blob/revoke-uri url))
(grid-item-thumbnail-will-mount own)) own))
(mx/defcs grid-item-thumbnail :render
{:mixins [mx/static] (fn [own project]
:will-mount grid-item-thumbnail-will-mount (if-let [url (::url own)]
:will-unmount grid-item-thumbnail-will-unmount [:div.grid-item-th
:did-remount grid-item-thumbnail-did-remount} {:style {:background-image (str "url('" url "')")}}]
[own project] [:div.grid-item-th
(if-let [url (::url own)] [:img.img-th {:src "/images/project-placeholder.svg"
[:div.grid-item-th :alt "Project title"}]])))
{:style {:background-image (str "url('" url "')")}}]
[:div.grid-item-th
[:img.img-th {:src "/images/project-placeholder.svg" :alt "Project title"}]]))
;; --- Grid Item ;; --- Grid Item
(mx/defcs grid-item (mx/def grid-item
{:mixins [mx/static (mx/local)]} :key-fn :id
[{:keys [rum/local] :as own} project] :mixins #{mx/static (mx/local)}
(letfn [(on-navigate [event]
(st/emit! (udp/go-to (:id project)))) :render
(delete [] (fn [{:keys [::mx/local] :as own} project]
(st/emit! (udp/delete-project project))) (letfn [(on-navigate [event]
(on-delete [event] (st/emit! (udp/go-to (:id project))))
(dom/stop-propagation event) (delete []
(udl/open! :confirm {:on-accept delete})) (st/emit! (udp/delete-project project)))
(on-key-down [event] (on-delete [event]
(when (kbd/enter? event) (dom/stop-propagation event)
(on-blur event))) (udl/open! :confirm {:on-accept delete}))
(on-blur [event] (on-key-down [event]
(let [target (dom/event->target event) (when (kbd/enter? event)
name (dom/get-value target) (on-blur event)))
id (:id project)] (on-blur [event]
(swap! local assoc :edition false) (let [target (dom/event->target event)
(st/emit! (udp/rename-project id name)))) name (dom/get-value target)
(on-edit [event] id (:id project)]
(dom/stop-propagation event) (swap! local assoc :edition false)
(dom/prevent-default event) (st/emit! (udp/rename-project id name))))
(swap! local assoc :edition true))] (on-edit [event]
[:div.grid-item.project-th {:on-click on-navigate} (dom/stop-propagation event)
(grid-item-thumbnail project) (dom/prevent-default event)
[:div.item-info {} (swap! local assoc :edition true))]
(if (:edition @local) [:div.grid-item.project-th {:on-click on-navigate}
[:input.element-name {:type "text" (grid-item-thumbnail project)
:auto-focus true [:div.item-info
:on-key-down on-key-down (if (:edition @local)
:on-blur on-blur [:input.element-name {:type "text"
:on-click on-edit :auto-focus true
:default-value (:name project)}] :on-key-down on-key-down
[:h3 {} (:name project)]) :on-blur on-blur
[:span.date {} :on-click on-edit
(str "Updated " (dt/timeago (:modified-at project)))]] :default-value (:name project)}]
[:div.project-th-actions {} [:h3 (:name project)])
[:div.project-th-icon.pages {} [:span.date
i/page (str "Updated " (dt/timeago (:modified-at project)))]]
[:span {} (:total-pages project)]] [:div.project-th-actions
#_[:div.project-th-icon.comments [:div.project-th-icon.pages
i/chat i/page
[:span "0"]] [:span (:total-pages project)]]
[:div.project-th-icon.edit #_[:div.project-th-icon.comments
{:on-click on-edit} i/chat
i/pencil] [:span "0"]]
[:div.project-th-icon.delete [:div.project-th-icon.edit
{:on-click on-delete} {:on-click on-edit}
i/trash]]])) i/pencil]
[:div.project-th-icon.delete
{:on-click on-delete}
i/trash]]])))
;; --- Grid ;; --- Grid
(mx/defc grid (mx/def grid
{:mixins [mx/static]} :mixins #{mx/static mx/reactive}
[state projects]
(let [ordering (:order state :created) :init
filtering (:filter state "") (fn [own props]
projects (->> (vals projects) (assoc own ::projects (-> (l/key :projects)
(filter-projects-by filtering) (l/derive st/state))))
(sort-projects-by ordering))]
(letfn [(on-click [e] :render
(dom/prevent-default e) (fn [own props]
(udl/open! :create-project))] (let [ordering (:order props :created)
[:section.dashboard-grid {} filtering (:filter props "")
[:h2 {} (tr "ds.project-title")] projects (->> (vals (mx/react (::projects own)))
[:div.dashboard-grid-content {} (filter-projects-by filtering)
[:div.dashboard-grid-row {} (sort-projects-by ordering))]
[:div.grid-item.add-project [:section.dashboard-grid
{:on-click on-click} [:h2 (tr "ds.project-title")]
[:span {} (tr "ds.project-new")]] [:div.dashboard-grid-content
[:div.dashboard-grid-row
[:div.grid-item.add-project {:on-click (fn [e]
(dom/prevent-default e)
(udl/open! :create-project))}
[:span (tr "ds.project-new")]]
(for [item projects] (for [item projects]
(-> (grid-item item) (grid-item item))]]])))
(mx/with-key (:id item))))]]])))
;; --- Projects Page ;; --- Projects Page
(defn projects-page-will-mount (mx/def projects-page
[own] :mixins [mx/static mx/reactive]
(st/emit! (udp/initialize))
own)
(defn projects-page-did-remount :init
[old-own own] (fn [own props]
(st/emit! (udp/initialize)) (st/emit! (udp/initialize))
own) own)
:render
(fn [own props]
(let [opts (mx/react opts-ref)
props (merge opts props)]
[:section.dashboard-content
(menu props)
(grid props)])))
(mx/defc projects-page
{:will-mount projects-page-will-mount
:did-remount projects-page-did-remount
:mixins [mx/static mx/reactive]}
[]
(let [state (mx/react dashboard-ref)
projects-map (mx/react projects-map-ref)]
[:main.dashboard-main {}
(messages-widget)
(header)
[:section.dashboard-content {}
(menu state projects-map)
(grid state projects-map)]]))