3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-10 23:26:39 +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

6
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)
data {:type type :id id :selected #{}}]
(-> state (-> state
(assoc-in [:dashboard :icons] data) (assoc-in [:dashboard :icons] {:selected #{}})
(assoc-in [:dashboard :section] :dashboard/icons)))) (assoc-in [:dashboard :section] :dashboard/icons)))
ptk/WatchEvent ptk/WatchEvent
(watch [_ state s] (watch [_ state s]

20
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
[rumext.core :as mx :include-macros true]
[uxbox.main.ui.dashboard.header :refer [header]]
[uxbox.main.ui.dashboard.projects :as projects]
;; [uxbox.main.ui.dashboard.elements :as elements] ;; [uxbox.main.ui.dashboard.elements :as elements]
[uxbox.main.ui.dashboard.icons :as icons] [uxbox.main.ui.dashboard.icons :as icons]
[uxbox.main.ui.dashboard.images :as images] [uxbox.main.ui.dashboard.images :as images]
[uxbox.main.ui.dashboard.colors :as colors])) [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))])

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

@ -28,21 +28,24 @@
;; --- 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}
{:keys [id] :as coll}]
(let [own? (= :own (:type coll))
edit? (:edit @local)] edit? (:edit @local)]
(letfn [(save [] (letfn [(save []
(let [dom (mx/ref-node own "input") (let [dom (mx/ref-node own "input")
@ -65,10 +68,10 @@
(st/emit! (dc/delete-collection id))) (st/emit! (dc/delete-collection id)))
(on-delete [] (on-delete []
(udl/open! :confirm {:on-accept delete}))] (udl/open! :confirm {:on-accept delete}))]
[:div.dashboard-title {} [:div.dashboard-title
[:h2 {} [:h2
(if edit? (if edit?
[:div.dashboard-title-field {} [:div.dashboard-title-field
[:span.edit {:content-editable true [:span.edit {:content-editable true
:ref "input" :ref "input"
:on-key-down on-input-keydown} :on-key-down on-input-keydown}
@ -77,20 +80,23 @@
(if own? (if own?
[:span.dashboard-title-field {:on-double-click edit} [:span.dashboard-title-field {:on-double-click edit}
(:name coll)] (:name coll)]
[:span.dashboard-title-field {} [:span.dashboard-title-field
(:name coll)]))] (:name coll)]))]
(when (and own? coll) (when (and own? coll)
[:div.edition {} [:div.edition
(if edit? (if edit?
[:span {:on-click save} ^:inline i/save] [:span {:on-click save} i/save]
[:span {:on-click edit} ^:inline i/pencil]) [:span {:on-click edit} i/pencil])
[:span {:on-click on-delete} ^:inline i/trash]])]))) [: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?]
:render
(fn [{:keys [::mx/local] :as own}
{:keys [id type name ::selected?] :as coll}]
(let [colors (count (:colors coll)) (let [colors (count (:colors coll))
editable? (= type :own)] editable? (= type :own)]
(letfn [(on-click [event] (letfn [(on-click [event]
@ -116,68 +122,66 @@
: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) name) {:value (if (:name @local) (:name @local) name)
: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} i/close]] [:span.close {:on-click on-cancel} i/close]]
[:span.element-title {} name]) [:span.element-title name])
[:span.element-subtitle {} [:span.element-subtitle
(tr "ds.num-elements" (t/c colors))]]))) (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]
:render
(fn [own {:keys [id type] :as props}]
(let [own? (= type :own) (let [own? (= type :own)
builtin? (= type :builtin) builtin? (= type :builtin)
colls (cond->> (vals colls) colls (mx/react collections-ref)
own? (filter #(= :own (:type %))) select-tab (fn [type]
builtin? (filter #(= :builtin (:type %))) (if-let [coll (->> (vals colls)
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
{:mixins [mx/static]}
[{:keys [id type] :as state} colls]2
(letfn [(select-tab [type]
(if-let [coll (->> (map second colls)
(filter #(= type (:type %))) (filter #(= type (:type %)))
(sort-by :created-at) (sort-by :created-at)
(first))] (first))]
(st/emit! (rt/nav :dashboard/colors nil {:type type :id (:id coll)})) (st/emit! (rt/nav :dashboard/colors nil {:type type :id (:id coll)}))
(st/emit! (rt/nav :dashboard/colors nil {:type type}))))] (st/emit! (rt/nav :dashboard/colors nil {:type type}))))]
[:div.library-bar {}
[:div.library-bar-inside {} [:div.library-bar
[:ul.library-tabs {} [:div.library-bar-inside
[:li {:class-name (when (= type :own) "current") [:ul.library-tabs
[:li {:class-name (when own? "current")
:on-click (partial select-tab :own)} :on-click (partial select-tab :own)}
(tr "ds.your-colors-title")] (tr "ds.your-colors-title")]
[:li {:class-name (when (= type :builtin) "current") [:li {:class-name (when builtin? "current")
:on-click (partial select-tab :builtin)} :on-click (partial select-tab :builtin)}
(tr "ds.store-colors-title")]] (tr "ds.store-colors-title")]]
(nav-section type id colls)]])) [: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]}]
:render
(fn [own {:keys [selected on-select title]}]
{:pre [(uuid? selected) {:pre [(uuid? selected)
(fn? on-select) (fn? on-select)
(string? title)]} (string? title)]}
@ -190,15 +194,18 @@
(dom/prevent-default event) (dom/prevent-default event)
(dom/stop-propagation event) (dom/stop-propagation event)
(on-select id))] (on-select id))]
[:ul.move-list {} [:ul.move-list
[:li.title {} title] [:li.title title]
(for [{:keys [id name] :as coll} colls] (for [{:keys [id name] :as coll} colls]
[:li {:key (str id)} [:li {:key (str id)}
[:a {:on-click #(on-select % id)} name]])])) [:a {:on-click #(on-select % id)} name]])])))
(mx/defcs grid-options (mx/def grid-options
{:mixins [mx/static (mx/local)]} :mixins [mx/static (mx/local)]
[{:keys [rum/local]} {:keys [type id] :as coll}]
:render
(fn [{:keys [::mx/local] :as own}
{:keys [type id] :as coll}]
(letfn [(delete [event] (letfn [(delete [event]
(st/emit! (dc/delete-selected-colors))) (st/emit! (dc/delete-selected-colors)))
(on-delete [event] (on-delete [event]
@ -224,22 +231,22 @@
[:div.multiselect-bar [:div.multiselect-bar
(if (or (= type :own) (nil? id)) (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]
[:span.delete.tooltip.tooltip-top [:span.delete.tooltip.tooltip-top
{:alt (tr "ds.multiselect-bar.delete") {:alt (tr "ds.multiselect-bar.delete")
@ -247,92 +254,95 @@
i/trash]] 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}))
i/organize]])])) i/organize]])])))
(mx/defc grid-item (mx/def grid-item
{:mixins [mx/static]} :key-fn :color
[color selected?] :mixins [mx/static]
:render
(fn [own {:keys [color selected?] :as props}]
(letfn [(toggle-selection [event] (letfn [(toggle-selection [event]
(st/emit! (dc/toggle-color-selection color)))] (st/emit! (dc/toggle-color-selection color)))]
[:div.grid-item.small-item.project-th {:on-click toggle-selection} [:div.grid-item.small-item.project-th {:on-click toggle-selection}
[:span.color-swatch {:style {:background-color color}}] [:span.color-swatch {:style {:background-color color}}]
[:div.input-checkbox.check-primary {} [:div.input-checkbox.check-primary
[:input {:type "checkbox" [:input {:type "checkbox"
:id color :id color
:on-click toggle-selection :on-change toggle-selection
:checked selected?}] :checked selected?}]
[:label {:for color}]] [:label {:for color}]]
[:span.color-data {} color] [:span.color-data color]
[:span.color-data {} (apply str "RGB " (interpose ", " (hex->rgb color)))]])) [:span.color-data (apply str "RGB " (interpose ", " (hex->rgb color)))]])))
(mx/defc grid (mx/def grid
{:mixins [mx/static]} :mixins [mx/static]
[{:keys [id type colors] :as coll} selected]
(let [editable? (or (= :own type) (nil? id)) :render
(fn [own {:keys [selected ::coll] :as props}]
(let [{:keys [id type colors]} coll
editable? (or (= :own type) (nil? id))
colors (->> (remove nil? colors) colors (->> (remove nil? colors)
(sort-by identity))] (sort-by identity))]
[:div.dashboard-grid-content {} [:div.dashboard-grid-content
[:div.dashboard-grid-row {} [:div.dashboard-grid-row
(when editable? (grid-form id)) (when editable? (grid-form props))
(for [color colors] (for [color colors]
(let [selected? (contains? selected color)] (let [selected? (contains? selected color)]
(-> (grid-item color selected?) (grid-item {:color color :selected? selected?})))]])))
(mx/with-key (str color)))))]]))
(mx/defc content (mx/def content
{:mixins [mx/static]} :mixins [mx/reactive mx/static]
[{:keys [selected] :as state} coll]
[:section.dashboard-grid.library {} :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) (page-title coll)
(grid coll selected) (grid (assoc props ::coll coll))
(when (and (seq selected)) (when (seq (:selected opts))
(grid-options coll))]) (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}
:init
(fn [own props]
(let [{:keys [type id]} (::mx/props own)]
(st/emit! (dc/initialize type id)) (st/emit! (dc/initialize type id))
own)) own))
(defn- colors-page-did-remount :render
[old-own own] (fn [own {:keys [type] :as props}]
(let [[old-type old-id] (:rum/args old-own) (let [type (or type :own)
[new-type new-id] (:rum/args own)] props (assoc props :type type)]
(when (or (not= old-type new-type) [:section.dashboard-content
(not= old-id new-id)) (nav props)
(st/emit! (dc/initialize new-type new-id))) (content props)])))
own))
(mx/defc colors-page
{:will-mount colors-page-will-mount
:did-remount colors-page-did-remount
:mixins [mx/static mx/reactive]}
[_ _]
(let [state (mx/react dashboard-ref)
colls (mx/react collections-ref)
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)])))

391
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.store :as st]
[uxbox.main.ui.dashboard.header :refer (header)] [uxbox.main.ui.dashboard.header :refer (header)]
[uxbox.main.ui.keyboard :as kbd] [uxbox.main.ui.keyboard :as kbd]
[uxbox.util.router :as rt] [uxbox.main.ui.lightbox :as lbx]
[uxbox.util.i18n :as t :refer (tr)] [uxbox.main.ui.shapes.icon :as icon]
[uxbox.util.data :refer (read-string)] [uxbox.util.data :refer (read-string)]
[rumext.core :as mx :include-macros true] [uxbox.util.dom :as dom]
[uxbox.util.time :as dt]
[potok.core :as ptk]
[uxbox.util.forms :as sc] [uxbox.util.forms :as sc]
[uxbox.util.lens :as ul] [uxbox.util.i18n :as t :refer (tr)]
[uxbox.util.i18n :refer (tr)] [uxbox.util.i18n :refer (tr)]
[uxbox.util.dom :as dom])) [uxbox.util.lens :as ul]
[uxbox.util.router :as rt]
[uxbox.util.time :as dt]))
;; --- Helpers & Constants ;; --- Helpers & Constants
@ -55,25 +56,27 @@
;; --- 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}]
(let [own? (= :own (:type coll))
edit? (:edit @local)] edit? (:edit @local)]
(letfn [(on-save [e] (letfn [(on-save [e]
(let [dom (mx/ref-node own "input") (let [dom (mx/ref-node own "input")
@ -96,10 +99,10 @@
(st/emit! (di/delete-collection id))) (st/emit! (di/delete-collection id)))
(on-delete [] (on-delete []
(udl/open! :confirm {:on-accept delete}))] (udl/open! :confirm {:on-accept delete}))]
[:div.dashboard-title {} [:div.dashboard-title
[:h2 {} [:h2
(if edit? (if edit?
[:div.dashboard-title-field {} [:div.dashboard-title-field
[:span.edit [:span.edit
{:content-editable true {:content-editable true
:ref "input" :ref "input"
@ -113,27 +116,34 @@
[:span.dashboard-title-field [:span.dashboard-title-field
(:name coll "Storage")]))] (:name coll "Storage")]))]
(when (and own? coll) (when (and own? coll)
[:div.edition {} [:div.edition
(if edit? (if edit?
[:span {:on-click on-save} i/save] [:span {:on-click on-save} i/save]
[:span {:on-click on-edit} i/pencil]) [:span {:on-click on-edit} i/pencil])
[:span {:on-click on-delete} i/trash]])]))) [: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}]
(assoc own ::num-icons-ref (num-icons-ref id)))
:render
(fn [{:keys [::mx/local] :as own}
{:keys [id type name num-icons ::selected?] :as coll}]
(let [num-icons (or num-icons (mx/react (::num-icons-ref own)))
editable? (= type :own)]
(letfn [(on-click [event] (letfn [(on-click [event]
(let [type (or type :own)] (let [type (or type :own)]
(st/emit! (rt/navigate :dashboard/icons {} {:type type :id id})))) (st/emit! (rt/navigate :dashboard/icons {} {:type type :id id}))))
@ -157,61 +167,54 @@
: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} i/close]] [:span.close {:on-click on-cancel} 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 num-icons))]]))) (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]
:render
(fn [own {:keys [id type] :as props}]
(let [own? (= type :own) (let [own? (= type :own)
builtin? (= type :builtin) builtin? (= type :builtin)
colls (cond->> (vals colls) colls (mx/react collections-ref)
own? (filter #(= :own (:type %))) select-tab (fn [type]
builtin? (filter #(= :builtin (:type %)))) (if-let [coll (->> (vals colls)
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
{:mixins [mx/static]}
[{:keys [type id] :as state} colls]
(let [own? (= type :own)
builtin? (= type :builtin)]
(letfn [(select-tab [type]
(if-let [coll (->> (map second 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,9 +237,11 @@
: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]}]
:render
(fn [own {:keys [selected on-select title]}]
{:pre [(uuid? selected) {:pre [(uuid? selected)
(fn? on-select) (fn? on-select)
(string? title)]} (string? title)]}
@ -249,19 +254,20 @@
(dom/prevent-default event) (dom/prevent-default event)
(dom/stop-propagation event) (dom/stop-propagation event)
(on-select id))] (on-select id))]
[:ul.move-list {} [:ul.move-list
[:li.title {} title] [:li.title title]
[:li {} [:li
[:a {:href "#" :on-click #(on-select % nil)} "Storage"]] [:a {:href "#" :on-click #(on-select % nil)} "Storage"]]
(for [{:keys [id name] :as coll} colls] (for [{:keys [id name] :as coll} colls]
[:li {:key (str id)} [:li {:key (pr-str id)}
[:a {:on-click #(on-select % id)} name]])])) [:a {:on-click #(on-select % id)} name]])])))
(mx/defcs grid-options (mx/def grid-options
{:mixins [(mx/local) mx/static]} :mixins [(mx/local) mx/static]
[own {:keys [type id] :as coll} selected]
(let [editable? (or (= type :own) (nil? coll)) :render
local (:rum/local own)] (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,27 +327,27 @@
{: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]
:render
(fn [own {:keys [id created-at ::selected? ::edition?] :as icon}]
(letfn [(toggle-selection [event] (letfn [(toggle-selection [event]
(prn "toggle-selection")
(st/emit! (di/toggle-icon-selection id))) (st/emit! (di/toggle-icon-selection id)))
(toggle-selection-shifted [event] (on-key-down [event]
(when (kbd/shift? event) (when (kbd/enter? event)
(toggle-selection event))) (on-blur event)))
(on-blur [event] (on-blur [event]
(let [target (dom/event->target event) (let [target (dom/event->target event)
name (dom/get-value target)] name (dom/get-value target)]
(st/emit! (di/update-opts :edition false) (st/emit! (di/update-opts :edition false)
(di/rename-icon id name)))) (di/rename-icon id name))))
(on-key-down [event]
(when (kbd/enter? event)
(on-blur event)))
(ignore-click [event] (ignore-click [event]
(dom/stop-propagation event) (dom/stop-propagation event)
(dom/prevent-default event)) (dom/prevent-default event))
@ -348,18 +355,15 @@
(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)}
[:div.input-checkbox.check-primary {}
[:input {:type "checkbox" [:input {:type "checkbox"
:id (:id icon) :id (:id icon)
:on-click toggle-selection :on-change toggle-selection
:checked selected?}] :checked selected?}]
[:label {:for (:id icon)}]] [:label {:for (:id icon)}]]
[:span.grid-item-image (icon/icon-svg icon)] [:span.grid-item-image (icon/icon-svg icon)]
[:div.item-info [:div.item-info {:on-click ignore-click}
{:on-click ignore-click}
(if edition? (if edition?
[:input.element-name {:type "text" [:input.element-name {:type "text"
:auto-focus true :auto-focus true
@ -369,45 +373,47 @@
:default-value (:name icon)}] :default-value (:name icon)}]
[:h3 {:on-double-click on-edit} [:h3 {:on-double-click on-edit}
(:name icon)]) (:name icon)])
(str (tr "ds.uploaded-at" (dt/format created-at "DD/MM/YYYY")))]])) (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
(fn [own {:keys [id] :as props}]
(let [selector (fn [icons]
(->> (vals icons)
(filter #(= id (:collection %)))))]
(assoc own ::icons-ref (-> (comp (l/key :icons)
(l/lens selector))
(l/derive st/state)))))
:render
(fn [own {:keys [selected edition id type] :as props}]
(let [editable? (or (= type :own) (nil? id)) (let [editable? (or (= type :own) (nil? id))
ordering (:order state :name) icons (->> (mx/react (::icons-ref own))
filtering (:filter state "") (filter-icons-by (:filter props ""))
icons (mx/react icons-ref) (sort-icons-by (:order props :name)))]
icons (->> (vals icons)
(filter #(= id (:collection %)))
(filter-icons-by filtering)
(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 [:div.dashboard-grid-content
{:mixins [mx/static]} [:div.dashboard-grid-row
[{:keys [selected] :as state} coll] (when editable? (grid-form id))
[:section.dashboard-grid.library {} (for [icon icons]
(page-title coll) (let [edition? (= edition (:id icon))
(grid state) selected? (contains? selected (:id icon))]
(when (seq selected) (grid-item (assoc icon ::selected? selected? ::edition? edition?))))]])))
(grid-options coll selected))])
;; --- 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) :init
filtering (:filter state "") (fn [own {:keys [id] :as props}]
num-icons (or num-icons (react-count-icons id))] (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] (letfn [(on-term-change [event]
(let [term (-> (dom/get-target event) (let [term (-> (dom/get-target event)
(dom/get-value))] (dom/get-value))]
@ -418,60 +424,67 @@
(st/emit! (di/update-opts :order value)))) (st/emit! (di/update-opts :order value))))
(on-clear [event] (on-clear [event]
(st/emit! (di/update-opts :filter "")))] (st/emit! (di/update-opts :filter "")))]
[:section.dashboard-bar.library-gap {} [:section.dashboard-bar.library-gap
[:div.dashboard-info {} [:div.dashboard-info
;; Counter ;; Counter
[:span.dashboard-icons {} (tr "ds.num-icons" (t/c num-icons))] [:span.dashboard-icons (tr "ds.num-icons" (t/c num-icons))]
;; 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 (:order props :name))}
:value (pr-str ordering)}
(for [[key value] (seq +ordering-options+)] (for [[key value] (seq +ordering-options+)]
(let [key (pr-str key)] [:option {:key key :value (pr-str 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 :icons-search-box
{:key :icons-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 (:filter props "")}]
[:div.clear-search {:on-click on-clear} i/close]]]]))) [: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))]])))
;; --- 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}
:init
(fn [own props]
(let [{:keys [type id]} (::mx/props own)]
(st/emit! (di/initialize type id)) (st/emit! (di/initialize type id))
own)) own))
(defn- icons-page-did-remount :render
[old-own own] (fn [own {:keys [type] :as props}]
(let [[old-type old-id] (:rum/args old-own) (let [type (or type :own)
[new-type new-id] (:rum/args own)] props (assoc props :type type)]
(when (or (not= old-type new-type) [:section.dashboard-content
(not= old-id new-id)) (nav props)
(st/emit! (di/initialize new-type new-id))) (content props)])))
own))
(mx/defc icons-page
{:will-mount icons-page-will-mount
:did-remount icons-page-did-remount
:mixins [mx/static mx/reactive]}
[]
(let [state (mx/react dashboard-ref)
colls (mx/react collections-ref)
coll (get colls (:id state))]
[:main.dashboard-main {}
(header)
[:section.dashboard-content {}
(nav state colls)
(menu state coll)
(content state coll)]]))

392
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
[cuerdas.core :as str]
[lentes.core :as l] [lentes.core :as l]
[rumext.core :as mx :include-macros true] [rumext.core :as mx :include-macros true]
[uxbox.util.i18n :as t :refer [tr]]
[uxbox.main.store :as st]
[uxbox.main.data.lightbox :as udl]
[uxbox.main.data.images :as di]
[uxbox.builtins.icons :as i] [uxbox.builtins.icons :as i]
[uxbox.main.ui.lightbox :as lbx] [uxbox.main.data.images :as di]
[uxbox.main.ui.keyboard :as kbd] [uxbox.main.data.lightbox :as udl]
[uxbox.main.store :as st]
[uxbox.main.ui.dashboard.header :refer [header]] [uxbox.main.ui.dashboard.header :refer [header]]
[uxbox.util.router :as rt] [uxbox.main.ui.keyboard :as kbd]
[uxbox.util.time :as dt] [uxbox.main.ui.lightbox :as lbx]
[uxbox.util.data :refer [read-string jscoll->vec]] [uxbox.util.data :refer [read-string jscoll->vec]]
[uxbox.util.dom :as dom])) [uxbox.util.dom :as dom]
[uxbox.util.i18n :as t :refer [tr]]
[uxbox.util.router :as rt]
[uxbox.util.time :as dt]))
;; --- Helpers & Constants ;; --- Helpers & Constants
@ -48,30 +49,23 @@
;; --- 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}]
(let [own? (= :own (:type coll))
edit? (:edit @local)] edit? (:edit @local)]
(letfn [(on-save [e] (letfn [(on-save [e]
(let [dom (mx/ref-node own "input") (let [dom (mx/ref-node own "input")
@ -94,10 +88,10 @@
(st/emit! (di/delete-collection id))) (st/emit! (di/delete-collection id)))
(on-delete [] (on-delete []
(udl/open! :confirm {:on-accept delete}))] (udl/open! :confirm {:on-accept delete}))]
[:div.dashboard-title {} [:div.dashboard-title
[:h2 {} [:h2
(if edit? (if edit?
[:div.dashboard-title-field {} [:div.dashboard-title-field
[:span.edit [:span.edit
{:content-editable true {:content-editable true
:ref "input" :ref "input"
@ -111,24 +105,32 @@
[:span.dashboard-title-field [:span.dashboard-title-field
(:name coll "Storage")]))] (:name coll "Storage")]))]
(when (and own? coll) (when (and own? coll)
[:div.edition {} [:div.edition
(if edit? (if edit?
[:span {:on-click on-save} ^:inline i/save] [:span {:on-click on-save} ^:inline i/save]
[:span {:on-click on-edit} ^:inline i/pencil]) [:span {:on-click on-edit} ^:inline i/pencil])
[:span {:on-click on-delete} ^:inline i/trash]])]))) [: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]
: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] (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}))))
@ -152,55 +154,36 @@
: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]
:render
(fn [own {:keys [id type] :as props}]
(let [own? (= type :own) (let [own? (= type :own)
builtin? (= type :builtin) builtin? (= type :builtin)
collections (cond->> (vals colls) colls (mx/react collections-ref)
own? (filter #(= :own (:type %))) select-tab (fn [type]
builtin? (filter #(= :builtin (:type %))) (if-let [coll (->> (vals colls)
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
{:mixins [mx/static]}
[{:keys [type id] :as state} colls]
(let [own? (= type :own)
builtin? (= type :builtin)]
(letfn [(select-tab [type]
(if-let [coll (->> (map second 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,36 +191,56 @@
: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]
:init
(fn [own props]
(assoc own ::file-input (mx/create-ref)))
:render
(fn [own {:keys [id] :as props}]
(letfn [(forward-click [event] (letfn [(forward-click [event]
(dom/click (mx/ref-node own "file-input"))) (dom/click (mx/ref-node (::file-input own))))
(on-file-selected [event] (on-file-selected [event]
(let [files (dom/get-event-files event) (let [files (dom/get-event-files event)
files (jscoll->vec files)] files (jscoll->vec files)]
(st/emit! (di/create-images coll-id files))))] (st/emit! (di/create-images id files))))]
(let [uploading? (mx/react uploading?-ref)] (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]}]
:render
(fn [own {:keys [selected on-select title]}]
{:pre [(uuid? selected) {:pre [(uuid? selected)
(fn? on-select) (fn? on-select)
(string? title)]} (string? title)]}
@ -250,17 +253,20 @@
(dom/prevent-default event) (dom/prevent-default event)
(dom/stop-propagation event) (dom/stop-propagation event)
(on-select id))] (on-select id))]
[:ul.move-list {} [:ul.move-list
[:li.title {} title] [:li.title title]
[:li {} [:li
[:a {:href "#" :on-click #(on-select % nil)} "Storage"]] [:a {:href "#" :on-click #(on-select % nil)} "Storage"]]
(for [{:keys [id name] :as coll} colls] (for [{:keys [id name] :as coll} colls]
[:li {:key (str id)} [:li {:key (pr-str id)}
[:a {:on-click #(on-select % id)} name]])])) [:a {:on-click #(on-select % id)} name]])])))
(mx/defcs grid-options (mx/def grid-options
{:mixins [(mx/local) mx/static]} :mixins [(mx/local)]
[{:keys [rum/local] :as own} {:keys [type id] :as coll} selected]
: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,25 +289,25 @@
(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}))
^:inline i/copy] ^:inline 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}))
^:inline i/move] ^:inline i/move]
(when (= 1 (count selected)) (when (= 1 (count selected))
[:span.move-item.tooltip.tooltip-top [:span.move-item.tooltip.tooltip-top
@ -314,19 +320,22 @@
^:inline i/trash]] ^: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]
:render
(fn [own {:keys [id created-at ::selected? ::edition?] :as image}]
(letfn [(toggle-selection [event] (letfn [(toggle-selection [event]
(st/emit! (di/toggle-image-selection id))) (st/emit! (di/toggle-image-selection id)))
(on-key-down [event] (on-key-down [event]
@ -341,16 +350,15 @@
(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.images-th {} [:div.grid-item.images-th
[:div.grid-item-th {:on-click toggle-selection [: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 toggle-selection :on-change toggle-selection
:checked selected?}] :checked selected?}]
[:label {:for (:id image)}]]] [:label {:for (:id image)}]]]
[:div.item-info {} [:div.item-info
(if edition? (if edition?
[:input.element-name {:type "text" [:input.element-name {:type "text"
:auto-focus true :auto-focus true
@ -359,50 +367,53 @@
:on-click on-edit :on-click on-edit
:default-value (:name image)}] :default-value (:name image)}]
[:h3 {:on-double-click on-edit} (:name image)]) [:h3 {:on-double-click on-edit} (:name image)])
[:span.date {} (str (tr "ds.uploaded-at" (dt/format created-at "L")))]]])) [:span.date (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 [id type selected edition] :as state}] :init
(fn [own {:keys [id] :as props}]
(let [selector (fn [images]
(->> (vals images)
(filter #(= id (:collection %)))))]
(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)) (let [editable? (or (= type :own) (nil? id))
ordering (:order state :name) images (->> (mx/react (::images-ref own))
filtering (:filter state "") (filter-images-by (:filter props ""))
images-map (mx/react images-ref) (sort-images-by (:order props :name)))]
images (->> (vals images-map) [:div.dashboard-grid-content
(filter #(= id (:collection %))) [:div.dashboard-grid-row
(filter-images-by filtering)
(sort-images-by ordering))]
[:div.dashboard-grid-content {}
[:div.dashboard-grid-row {}
(when editable? (when editable?
(grid-form id)) (grid-form props))
(for [{:keys [id] :as image} images] (for [{:keys [id] :as image} images]
(let [edition? (= edition id) (let [edition? (= edition id)
selected? (contains? selected id)] selected? (contains? selected id)]
(-> (grid-item image selected? edition?) (grid-item (assoc image ::selected? selected? ::edition? edition?))))]])))
(mx/with-key (str id)))))]]))
(mx/defc content
{:mixins [mx/static]}
[{:keys [selected] :as state} coll]
[:section.dashboard-grid.library {}
(page-title coll)
(grid state)
(when (seq selected)
(grid-options coll selected))])
;; --- 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) ;; :init
ordering (:order state :name) ;; (fn [own {:keys [id] :as props}]
filtering (:filter state "") ;; (assoc own ::num-images-ref (num-images-ref id)))
:render
(fn [own props]
(let [{:keys [id] :as coll} (::coll props)
ordering (:order props :name)
filtering (:filter props "")
icount (count (:images coll))] icount (count (:images coll))]
(letfn [(on-term-change [event] (letfn [(on-term-change [event]
(let [term (-> (dom/get-target event) (let [term (-> (dom/get-target event)
(dom/get-value))] (dom/get-value))]
(prn "on-term-change" term)
(st/emit! (di/update-opts :filter term)))) (st/emit! (di/update-opts :filter term))))
(on-ordering-change [event] (on-ordering-change [event]
(let [value (dom/event->value event) (let [value (dom/event->value event)
@ -410,59 +421,68 @@
(st/emit! (di/update-opts :order value)))) (st/emit! (di/update-opts :order value))))
(on-clear [event] (on-clear [event]
(st/emit! (di/update-opts :filter "")))] (st/emit! (di/update-opts :filter "")))]
[:section.dashboard-bar.library-gap {} [:section.dashboard-bar.library-gap
[:div.dashboard-info {} [:div.dashboard-info
;; Counter ;; Counter
[:span.dashboard-images {} (tr "ds.num-images" (t/c icount))] [:span.dashboard-images (tr "ds.num-images" (t/c icount))]
;; Sorting ;; Sorting
[:div {} [:div
[:span {} (tr "ds.ordering")] [:span (tr "ds.ordering")]
[:select.input-select {:on-change on-ordering-change [:select.input-select {: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) [:option {:key key :value (pr-str key)} (tr value)])]]
label (tr value)]
[:option {:key key :value key} label]))]]
;; Search ;; Search
[:form.dashboard-search {} [:form.dashboard-search
[:input.input-text {:key :images-search-box [:input.input-text {: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 filtering}]
[:div.clear-search {:on-click on-clear} i/close]]]]))) [: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}
:init
(fn [own props]
(let [{:keys [type id]} (::mx/props own)]
(st/emit! (di/initialize type id)) (st/emit! (di/initialize type id))
own)) own))
(defn- images-page-did-remount :render
[old-own own] (fn [own {:keys [type] :as props}]
(let [[old-type old-id] (:rum/args old-own) (let [type (or type :own)
[new-type new-id] (:rum/args own)] props (assoc props :type type)]
(when (or (not= old-type new-type) [:section.dashboard-content
(not= old-id new-id)) (nav props)
(st/emit! (di/initialize new-type new-id))) (content props)])))
own))
(mx/defc images-page
{:will-mount images-page-will-mount
:did-remount images-page-did-remount
:mixins [mx/static mx/reactive]}
[_ _]
(let [state (mx/react dashboard-ref)
colls (mx/react collections-ref)
coll (get colls (:id state))]
[:main.dashboard-main {}
(header)
[:section.dashboard-content {}
(nav state colls)
(menu coll)
(content state coll)]]))

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

@ -6,25 +6,24 @@
;; 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]
[lentes.core :as l]
[rumext.core :as mx]
[rumext.func :as mxf]
[uxbox.builtins.icons :as i] [uxbox.builtins.icons :as i]
[uxbox.main.store :as st]
[uxbox.main.constants :as c] [uxbox.main.constants :as c]
[uxbox.main.data.projects :as udp]
[uxbox.main.data.lightbox :as udl] [uxbox.main.data.lightbox :as udl]
[uxbox.main.ui.dashboard.header :refer [header]] [uxbox.main.data.projects :as udp]
[uxbox.main.ui.dashboard.projects-createform]
[uxbox.main.ui.lightbox :as lbx]
[uxbox.main.ui.messages :refer [messages-widget]]
[uxbox.main.ui.keyboard :as kbd]
[uxbox.main.exports :as exports] [uxbox.main.exports :as exports]
[uxbox.util.i18n :as t :refer (tr)] [uxbox.main.store :as st]
[uxbox.util.router :as r] [uxbox.main.ui.dashboard.projects-createform]
[uxbox.main.ui.keyboard :as kbd]
[uxbox.util.blob :as blob]
[uxbox.util.data :refer [read-string]] [uxbox.util.data :refer [read-string]]
[uxbox.util.dom :as dom] [uxbox.util.dom :as dom]
[uxbox.util.blob :as blob] [uxbox.util.i18n :as t :refer (tr)]
[rumext.core :as mx :include-macros true] [uxbox.util.router :as r]
[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,12 +60,18 @@
;; --- 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)))
(l/derive st/state))))
:render
(fn [own props]
(let [ordering (:order props :created)
filtering (:filter props "")
num-projects (mx/react (::num-projects own))]
(letfn [(on-term-change [event] (letfn [(on-term-change [event]
(let [term (-> (dom/get-target event) (let [term (-> (dom/get-target event)
(dom/get-value))] (dom/get-value))]
@ -89,15 +82,15 @@
(st/emit! (udp/update-opts :order value)))) (st/emit! (udp/update-opts :order value))))
(on-clear [event] (on-clear [event]
(st/emit! (udp/update-opts :filter "")))] (st/emit! (udp/update-opts :filter "")))]
[:section.dashboard-bar {} [:section.dashboard-bar
[:div.dashboard-info {} [: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)}
@ -105,7 +98,7 @@
(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"
@ -113,48 +106,44 @@
: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)) :init
(fn [own project]
(let [svg (exports/render-page (:page-id project))
url (some-> svg url (some-> svg
(blob/create "image/svg+xml") (blob/create "image/svg+xml")
(blob/create-uri))] (blob/create-uri))]
(assoc own ::url url))) (assoc own ::url url)))
(defn- grid-item-thumbnail-will-unmount :will-unmount
[own] (fn [own]
(let [url (::url own)] (let [url (::url own)]
(when url (blob/revoke-uri url)) (when url (blob/revoke-uri url))
own)) own))
(defn- grid-item-thumbnail-did-remount :render
[oldown own] (fn [own project]
(when-let [url (::url oldown)]
(blob/revoke-uri url))
(grid-item-thumbnail-will-mount own))
(mx/defcs grid-item-thumbnail
{:mixins [mx/static]
:will-mount grid-item-thumbnail-will-mount
:will-unmount grid-item-thumbnail-will-unmount
:did-remount grid-item-thumbnail-did-remount}
[own project]
(if-let [url (::url own)] (if-let [url (::url own)]
[:div.grid-item-th [:div.grid-item-th
{:style {:background-image (str "url('" url "')")}}] {:style {:background-image (str "url('" url "')")}}]
[:div.grid-item-th [:div.grid-item-th
[:img.img-th {:src "/images/project-placeholder.svg" :alt "Project title"}]])) [: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)}
:render
(fn [{:keys [::mx/local] :as own} project]
(letfn [(on-navigate [event] (letfn [(on-navigate [event]
(st/emit! (udp/go-to (:id project)))) (st/emit! (udp/go-to (:id project))))
(delete [] (delete []
@ -177,7 +166,7 @@
(swap! local assoc :edition true))] (swap! local assoc :edition true))]
[:div.grid-item.project-th {:on-click on-navigate} [:div.grid-item.project-th {:on-click on-navigate}
(grid-item-thumbnail project) (grid-item-thumbnail project)
[:div.item-info {} [:div.item-info
(if (:edition @local) (if (:edition @local)
[:input.element-name {:type "text" [:input.element-name {:type "text"
:auto-focus true :auto-focus true
@ -185,13 +174,13 @@
:on-blur on-blur :on-blur on-blur
:on-click on-edit :on-click on-edit
:default-value (:name project)}] :default-value (:name project)}]
[:h3 {} (:name project)]) [:h3 (:name project)])
[:span.date {} [:span.date
(str "Updated " (dt/timeago (:modified-at project)))]] (str "Updated " (dt/timeago (:modified-at project)))]]
[:div.project-th-actions {} [:div.project-th-actions
[:div.project-th-icon.pages {} [:div.project-th-icon.pages
i/page i/page
[:span {} (:total-pages project)]] [:span (:total-pages project)]]
#_[:div.project-th-icon.comments #_[:div.project-th-icon.comments
i/chat i/chat
[:span "0"]] [:span "0"]]
@ -200,54 +189,51 @@
i/pencil] i/pencil]
[:div.project-th-icon.delete [:div.project-th-icon.delete
{:on-click on-delete} {:on-click on-delete}
i/trash]]])) 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)
(l/derive st/state))))
:render
(fn [own props]
(let [ordering (:order props :created)
filtering (:filter props "")
projects (->> (vals (mx/react (::projects own)))
(filter-projects-by filtering) (filter-projects-by filtering)
(sort-projects-by ordering))] (sort-projects-by ordering))]
(letfn [(on-click [e] [:section.dashboard-grid
[:h2 (tr "ds.project-title")]
[:div.dashboard-grid-content
[:div.dashboard-grid-row
[:div.grid-item.add-project {:on-click (fn [e]
(dom/prevent-default e) (dom/prevent-default e)
(udl/open! :create-project))] (udl/open! :create-project))}
[:section.dashboard-grid {} [:span (tr "ds.project-new")]]
[:h2 {} (tr "ds.project-title")]
[:div.dashboard-grid-content {}
[:div.dashboard-grid-row {}
[:div.grid-item.add-project
{:on-click on-click}
[: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]
:init
(fn [own props]
(st/emit! (udp/initialize)) (st/emit! (udp/initialize))
own) own)
(defn projects-page-did-remount :render
[old-own own] (fn [own props]
(st/emit! (udp/initialize)) (let [opts (mx/react opts-ref)
own) 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)]]))