mirror of
https://github.com/penpot/penpot.git
synced 2025-06-07 13:51:37 +02:00
Refactor icons page.
This commit is contained in:
Andrey Antukh
parent
10930fff2e
commit
a325e2e3ae
1 changed files with 323 additions and 114 deletions
|
|
@ -9,148 +9,357 @@
|
||||||
(:require [sablono.core :refer-macros [html]]
|
(:require [sablono.core :refer-macros [html]]
|
||||||
[rum.core :as rum]
|
[rum.core :as rum]
|
||||||
[lentes.core :as l]
|
[lentes.core :as l]
|
||||||
|
[cuerdas.core :as str]
|
||||||
[uxbox.main.state :as st]
|
[uxbox.main.state :as st]
|
||||||
[uxbox.util.rstore :as rs]
|
|
||||||
[uxbox.util.schema :as sc]
|
|
||||||
[uxbox.util.i18n :refer (tr)]
|
|
||||||
[uxbox.main.library :as library]
|
[uxbox.main.library :as library]
|
||||||
[uxbox.main.data.dashboard :as dd]
|
|
||||||
[uxbox.main.data.lightbox :as udl]
|
[uxbox.main.data.lightbox :as udl]
|
||||||
|
[uxbox.main.data.icons :as di]
|
||||||
[uxbox.main.ui.icons :as i]
|
[uxbox.main.ui.icons :as i]
|
||||||
[uxbox.main.ui.shapes.icon :as icon]
|
[uxbox.main.ui.shapes.icon :as icon]
|
||||||
[uxbox.main.ui.lightbox :as lbx]
|
[uxbox.main.ui.lightbox :as lbx]
|
||||||
[uxbox.util.mixins :as mx]
|
|
||||||
[uxbox.main.ui.dashboard.header :refer (header)]
|
[uxbox.main.ui.dashboard.header :refer (header)]
|
||||||
|
[uxbox.main.ui.keyboard :as kbd]
|
||||||
|
[uxbox.util.i18n :as t :refer (tr)]
|
||||||
|
[uxbox.util.data :refer (read-string)]
|
||||||
|
[uxbox.util.mixins :as mx :include-macros true]
|
||||||
|
[uxbox.util.rstore :as rs]
|
||||||
|
[uxbox.util.schema :as sc]
|
||||||
|
[uxbox.util.lens :as ul]
|
||||||
|
[uxbox.util.i18n :refer (tr)]
|
||||||
[uxbox.util.dom :as dom]))
|
[uxbox.util.dom :as dom]))
|
||||||
|
|
||||||
;; --- Lenses
|
;; --- Helpers & Constants
|
||||||
|
|
||||||
(def dashboard-ref
|
(def +ordering-options+
|
||||||
(as-> (l/in [:dashboard]) $
|
{:name "ds.project-ordering.by-name"
|
||||||
(l/derive $ st/state)))
|
:created "ds.project-ordering.by-creation-date"})
|
||||||
|
|
||||||
|
(defn- sort-icons-by
|
||||||
|
[ordering icons]
|
||||||
|
(case ordering
|
||||||
|
:name (sort-by :name icons)
|
||||||
|
:created (reverse (sort-by :created-at icons))
|
||||||
|
icons))
|
||||||
|
|
||||||
|
(defn- contains-term?
|
||||||
|
[phrase term]
|
||||||
|
(let [term (name term)]
|
||||||
|
(str/includes? (str/lower phrase) (str/trim (str/lower term)))))
|
||||||
|
|
||||||
|
(defn- filter-icons-by
|
||||||
|
[term icons]
|
||||||
|
(if (str/blank? term)
|
||||||
|
icons
|
||||||
|
(filter #(contains-term? (:name %) term) icons)))
|
||||||
|
|
||||||
|
;; --- Refs
|
||||||
|
|
||||||
|
(def ^:private dashboard-ref
|
||||||
|
(-> (l/in [:dashboard :icons])
|
||||||
|
(l/derive st/state)))
|
||||||
|
|
||||||
|
(def ^:private collections-map-ref
|
||||||
|
(-> (comp (l/key :icon-colls-by-id)
|
||||||
|
(ul/merge library/+icon-collections-by-id+))
|
||||||
|
(l/derive st/state)))
|
||||||
|
|
||||||
|
(def ^:private collections-ref
|
||||||
|
(-> (l/lens vals)
|
||||||
|
(l/derive collections-map-ref)))
|
||||||
|
|
||||||
|
(defn- focus-collection
|
||||||
|
[id]
|
||||||
|
(-> (l/key id)
|
||||||
|
(l/derive collections-map-ref)))
|
||||||
|
|
||||||
;; --- Page Title
|
;; --- Page Title
|
||||||
|
|
||||||
(defn- page-title-render
|
(mx/defcs page-title
|
||||||
[own coll]
|
{:mixins [(mx/local {}) mx/static mx/reactive]}
|
||||||
(let [dashboard (mx/react dashboard-ref)
|
[own {:keys [id] :as coll}]
|
||||||
own? (:builtin coll false)]
|
(let [local (:rum/local own)
|
||||||
(html
|
dashboard (mx/react dashboard-ref)
|
||||||
[:div.dashboard-title {}
|
own? (= :builtin (:type coll))
|
||||||
[:h2 {}
|
edit? (:edit @local)]
|
||||||
[:span (tr "ds.library-title")]
|
(letfn [(on-save [e]
|
||||||
[:span {:content-editable ""
|
(let [dom (mx/ref-node own "input")
|
||||||
:on-key-up (constantly nil)}
|
name (.-innerText dom)]
|
||||||
(:name coll)]]
|
#_(rs/emit! (di/rename-collection id (str/trim name)))
|
||||||
(if (and (not own?) coll)
|
(swap! local assoc :edit false)))
|
||||||
[:div.edition {}
|
(on-cancel [e]
|
||||||
[:span {:on-click (constantly nil)}
|
(swap! local assoc :edit false))
|
||||||
i/trash]])])))
|
(on-edit [e]
|
||||||
|
(swap! local assoc :edit true))
|
||||||
|
(on-input-keydown [e]
|
||||||
|
(cond
|
||||||
|
(kbd/esc? e) (on-cancel e)
|
||||||
|
(kbd/enter? e)
|
||||||
|
(do
|
||||||
|
(dom/prevent-default e)
|
||||||
|
(dom/stop-propagation e)
|
||||||
|
(on-save e))))
|
||||||
|
|
||||||
(def ^:private page-title
|
(delete []
|
||||||
(mx/component
|
#_(rs/emit! (di/delete-collection (:id coll))))
|
||||||
{:render page-title-render
|
(on-delete []
|
||||||
:name "page-title"
|
(udl/open! :confirm {:on-accept delete}))]
|
||||||
:mixins [mx/static mx/reactive]}))
|
[:div.dashboard-title
|
||||||
|
[:h2
|
||||||
|
(if edit?
|
||||||
|
[: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]]
|
||||||
|
[:span.dashboard-title-field
|
||||||
|
{:on-double-click on-edit}
|
||||||
|
(:name coll)])]
|
||||||
|
(if (and (not 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 nav-render
|
(mx/defc nav-item
|
||||||
[own]
|
{:mixins [mx/static]}
|
||||||
(let [dashboard (mx/react dashboard-ref)
|
[collection selected?]
|
||||||
collid (:collection-id dashboard)
|
(letfn [(on-click [event]
|
||||||
own? (= (:collection-type dashboard) :own)
|
(let [type (:type collection)
|
||||||
builtin? (= (:collection-type dashboard) :builtin)
|
id (:id collection)]
|
||||||
collections (if own?
|
(rs/emit! (di/select-collection type id))))]
|
||||||
[] #_(sort-by :id (vals colors))
|
(let [icons (count (:icons collection))]
|
||||||
library/+icon-collections+)]
|
[:li {:on-click on-click
|
||||||
(html
|
:class-name (when selected? "current")}
|
||||||
[:div.library-bar
|
[:span.element-title (:name collection)]
|
||||||
[:div.library-bar-inside
|
[:span.element-subtitle
|
||||||
[:ul.library-tabs
|
(tr "ds.num-elements" (t/c icons))]])))
|
||||||
[:li {:class-name (when builtin? "current")
|
|
||||||
:on-click #(rs/emit! (dd/set-collection-type :builtin))}
|
|
||||||
(tr "ds.standard-title")]
|
|
||||||
[:li {:class-name (when own? "current")
|
|
||||||
:on-click #(rs/emit! (dd/set-collection-type :own))}
|
|
||||||
(tr "ds.your-libraries-title")]]
|
|
||||||
[:ul.library-elements
|
|
||||||
(when own?
|
|
||||||
[:li
|
|
||||||
[:a.btn-primary
|
|
||||||
{:on-click (constantly nil)}
|
|
||||||
"+ New library"]])
|
|
||||||
(for [props collections]
|
|
||||||
[:li {:key (str (:id props))
|
|
||||||
:on-click #(rs/emit! (dd/set-collection (:id props)))
|
|
||||||
:class-name (when (= (:id props) collid) "current")}
|
|
||||||
[:span.element-title (:name props)]
|
|
||||||
[:span.element-subtitle
|
|
||||||
(str (count (:icons props)) " elements")]])]]])))
|
|
||||||
|
|
||||||
(def ^:private nav
|
(mx/defc nav-section
|
||||||
(mx/component
|
{:mixins [mx/static mx/reactive]}
|
||||||
{:render nav-render
|
[type selected]
|
||||||
:name "nav"
|
(let [own? (= type :own)
|
||||||
:mixins [mx/reactive]}))
|
builtin? (= type :builtin)
|
||||||
|
collections (cond->> (mx/react collections-ref)
|
||||||
|
own? (filter #(= :own (:type %)))
|
||||||
|
builtin? (filter #(= :builtin (:type %)))
|
||||||
|
own? (sort-by :id))]
|
||||||
|
[:ul.library-elements
|
||||||
|
(when own?
|
||||||
|
[:li
|
||||||
|
[:a.btn-primary
|
||||||
|
#_{:on-click #(rs/emit! (di/create-collection))}
|
||||||
|
"+ New library"]])
|
||||||
|
(for [coll collections
|
||||||
|
:let [selected? (= (:id coll) selected)
|
||||||
|
key (str (:id coll))]]
|
||||||
|
(-> (nav-item coll selected?)
|
||||||
|
(mx/with-key key)))]))
|
||||||
|
|
||||||
|
(mx/defc nav
|
||||||
|
{:mixins [mx/static]}
|
||||||
|
[state]
|
||||||
|
(let [selected (:id state)
|
||||||
|
type (:type state)
|
||||||
|
own? (= type :own)
|
||||||
|
builtin? (= type :builtin)]
|
||||||
|
(letfn [(select-tab [type]
|
||||||
|
(let [xf (filter #(= type (:type %)))
|
||||||
|
colls (sequence xf @collections-ref)]
|
||||||
|
(if-let [item (first colls)]
|
||||||
|
(rs/emit! (di/select-collection type (:id item)))
|
||||||
|
(rs/emit! (di/select-collection type)))))]
|
||||||
|
[:div.library-bar
|
||||||
|
[:div.library-bar-inside
|
||||||
|
[:ul.library-tabs
|
||||||
|
[:li {:class-name (when builtin? "current")
|
||||||
|
:on-click (partial select-tab :builtin)}
|
||||||
|
"STANDARD"]
|
||||||
|
[:li {:class-name (when own? "current")
|
||||||
|
:on-click (partial select-tab :own)}
|
||||||
|
"YOUR LIBRARIES"]]
|
||||||
|
(nav-section type selected)]])))
|
||||||
|
|
||||||
;; --- Grid
|
;; --- Grid
|
||||||
|
|
||||||
(defn grid-render
|
;; (defn grid-render
|
||||||
[own]
|
;; [own]
|
||||||
(let [dashboard (mx/react dashboard-ref)
|
;; (let [dashboard (mx/react dashboard-ref)
|
||||||
coll-type (:collection-type dashboard)
|
;; coll-type (:collection-type dashboard)
|
||||||
coll-id (:collection-id dashboard)
|
;; coll-id (:collection-id dashboard)
|
||||||
own? (= coll-type :own)
|
;; own? (= coll-type :own)
|
||||||
coll (get library/+icon-collections-by-id+ coll-id)]
|
;; coll (get library/+icon-collections-by-id+ coll-id)]
|
||||||
(when coll
|
;; (when coll
|
||||||
(html
|
;; (html
|
||||||
[:section.dashboard-grid.library
|
;; [:section.dashboard-grid.library
|
||||||
(page-title coll)
|
;; (page-title coll)
|
||||||
[:div.dashboard-grid-content
|
;; [:div.dashboard-grid-content
|
||||||
[:div.dashboard-grid-row
|
;; [:div.dashboard-grid-row
|
||||||
(for [icon (:icons coll)]
|
;; (for [icon (:icons coll)]
|
||||||
[:div.grid-item.small-item.project-th {}
|
;; [:div.grid-item.small-item.project-th {}
|
||||||
[:span.grid-item-image (icon/icon-svg icon)]
|
;; [:span.grid-item-icon (icon/icon-svg icon)]
|
||||||
[:h3 (:name icon)]
|
;; [:h3 (:name icon)]
|
||||||
#_[:div.project-th-actions
|
;; #_[:div.project-th-actions
|
||||||
[:div.project-th-icon.edit i/pencil]
|
;; [:div.project-th-icon.edit i/pencil]
|
||||||
[:div.project-th-icon.delete i/trash]]])]]]))))
|
;; [:div.project-th-icon.delete i/trash]]])]]]))))
|
||||||
|
|
||||||
(def grid
|
;; (def grid
|
||||||
(mx/component
|
;; (mx/component
|
||||||
{:render grid-render
|
;; {:render grid-render
|
||||||
:name "grid"
|
;; :name "grid"
|
||||||
:mixins [mx/static mx/reactive]}))
|
;; :mixins [mx/static mx/reactive]}))
|
||||||
|
|
||||||
|
(mx/defc grid-options
|
||||||
|
[coll]
|
||||||
|
(let [own? (= (:type coll) :own)]
|
||||||
|
(letfn [(delete []
|
||||||
|
#_(rs/emit! (di/delete-selected)))
|
||||||
|
(on-delete [event]
|
||||||
|
(udl/open! :confirm {:on-accept delete}))]
|
||||||
|
;; MULTISELECT OPTIONS BAR
|
||||||
|
[:div.multiselect-bar
|
||||||
|
(if own?
|
||||||
|
[:div.multiselect-nav
|
||||||
|
#_[:span.move-item.tooltip.tooltip-top
|
||||||
|
{:alt "Move to"}
|
||||||
|
i/organize]
|
||||||
|
[:span.delete.tooltip.tooltip-top
|
||||||
|
{:alt "Delete"
|
||||||
|
:on-click on-delete}
|
||||||
|
i/trash]]
|
||||||
|
[:div.multiselect-nav
|
||||||
|
[:span.move-item.tooltip.tooltip-top
|
||||||
|
{:alt "Copy to"}
|
||||||
|
i/organize]])])))
|
||||||
|
|
||||||
|
(mx/defc grid-item
|
||||||
|
[{:keys [id] :as icon} selected?]
|
||||||
|
(letfn [(toggle-selection [event]
|
||||||
|
(rs/emit! (di/toggle-icon-selection id)))
|
||||||
|
(toggle-selection-shifted [event]
|
||||||
|
(when (kbd/shift? event)
|
||||||
|
(toggle-selection event)))]
|
||||||
|
[:div.grid-item.small-item.project-th
|
||||||
|
{:on-click toggle-selection-shifted}
|
||||||
|
[:span.grid-item-image (icon/icon-svg icon)]
|
||||||
|
[:h3 (:name icon)]
|
||||||
|
#_[:div.project-th-actions
|
||||||
|
[:div.project-th-icon.edit i/pencil]
|
||||||
|
[:div.project-th-icon.delete i/trash]]]))
|
||||||
|
|
||||||
|
(mx/defc grid
|
||||||
|
{:mixins [mx/static]}
|
||||||
|
[state selected {:keys [id type icons] :as coll}]
|
||||||
|
(let [own? (= type :own)
|
||||||
|
ordering (:order state)
|
||||||
|
filtering (:filter state)
|
||||||
|
icons (->> icons
|
||||||
|
(remove nil?)
|
||||||
|
(filter-icons-by filtering)
|
||||||
|
(sort-icons-by ordering))]
|
||||||
|
[:div.dashboard-grid-content
|
||||||
|
[:div.dashboard-grid-row
|
||||||
|
#_(when own?
|
||||||
|
(grid-form id))
|
||||||
|
(for [icon icons
|
||||||
|
:let [id (:id icon)
|
||||||
|
selected? (contains? selected id)]]
|
||||||
|
(-> (grid-item icon selected?)
|
||||||
|
(mx/with-key (str id))))]]))
|
||||||
|
|
||||||
|
(mx/defc content
|
||||||
|
{:mixins [mx/static]}
|
||||||
|
[state coll]
|
||||||
|
(let [selected (:selected state)
|
||||||
|
coll-type (:type coll)
|
||||||
|
own? (= coll-type :own)]
|
||||||
|
(when coll
|
||||||
|
[:section.dashboard-grid.library
|
||||||
|
(page-title coll)
|
||||||
|
(grid state selected coll)
|
||||||
|
(when (seq selected)
|
||||||
|
(grid-options coll))])))
|
||||||
|
|
||||||
|
;; --- Menu
|
||||||
|
|
||||||
|
(mx/defc menu
|
||||||
|
{:mixins [mx/static]}
|
||||||
|
[state coll]
|
||||||
|
(let [ordering (:order state :name)
|
||||||
|
filtering (:filter state "")
|
||||||
|
icount (count (:icons coll))]
|
||||||
|
(letfn [(on-term-change [event]
|
||||||
|
(let [term (-> (dom/get-target event)
|
||||||
|
(dom/get-value))]
|
||||||
|
(rs/emit! (di/update-opts :filter term))))
|
||||||
|
(on-ordering-change [event]
|
||||||
|
(let [value (dom/event->value event)
|
||||||
|
value (read-string value)]
|
||||||
|
(rs/emit! (di/update-opts :order value))))
|
||||||
|
(on-clear [event]
|
||||||
|
(rs/emit! (di/update-opts :filter "")))]
|
||||||
|
[:section.dashboard-bar.library-gap
|
||||||
|
[:div.dashboard-info
|
||||||
|
|
||||||
|
;; Counter
|
||||||
|
[:span.dashboard-icons (tr "ds.num-icons" (t/c icount))]
|
||||||
|
|
||||||
|
;; Sorting
|
||||||
|
[:div
|
||||||
|
[:span (tr "ds.project-ordering")]
|
||||||
|
[:select.input-select
|
||||||
|
{:on-change on-ordering-change
|
||||||
|
:value (pr-str ordering)}
|
||||||
|
(for [[key value] (seq +ordering-options+)
|
||||||
|
:let [ovalue (pr-str key)
|
||||||
|
olabel (tr value)]]
|
||||||
|
[:option {:key ovalue :value ovalue} olabel])]]
|
||||||
|
;; Search
|
||||||
|
[:form.dashboard-search
|
||||||
|
[:input.input-text
|
||||||
|
{:key :icons-search-box
|
||||||
|
:type "text"
|
||||||
|
:on-change on-term-change
|
||||||
|
:auto-focus true
|
||||||
|
:placeholder (tr "ds.project-search.placeholder")
|
||||||
|
:value (or filtering "")}]
|
||||||
|
[:div.clear-search {:on-click on-clear} i/close]]]])))
|
||||||
|
|
||||||
;; --- Icons Page
|
;; --- Icons Page
|
||||||
|
|
||||||
(defn icons-page-render
|
(defn- icons-page-will-mount
|
||||||
[own]
|
[own]
|
||||||
(html
|
(let [[type id] (:rum/args own)]
|
||||||
[:main.dashboard-main
|
(rs/emit! (di/initialize type id))
|
||||||
(header)
|
own))
|
||||||
[:section.dashboard-content
|
|
||||||
(nav)
|
|
||||||
(grid)]]))
|
|
||||||
|
|
||||||
(defn icons-page-will-mount
|
(defn- icons-page-did-remount
|
||||||
[own]
|
[old-own own]
|
||||||
(rs/emit! (dd/initialize :dashboard/icons))
|
(let [[old-type old-id] (:rum/args old-own)
|
||||||
own)
|
[new-type new-id] (:rum/args own)]
|
||||||
|
(when (or (not= old-type new-type)
|
||||||
|
(not= old-id new-id))
|
||||||
|
(rs/emit! (di/initialize new-type new-id)))
|
||||||
|
own))
|
||||||
|
|
||||||
(defn icons-page-did-remount
|
(mx/defc icons-page
|
||||||
[old-state state]
|
{:will-mount icons-page-will-mount
|
||||||
(rs/emit! (dd/initialize :dashboard/icons))
|
:did-remount icons-page-did-remount
|
||||||
state)
|
:mixins [mx/static mx/reactive]}
|
||||||
|
[]
|
||||||
(def icons-page
|
(let [state (mx/react dashboard-ref)
|
||||||
(mx/component
|
coll-id (:id state)
|
||||||
{:render icons-page-render
|
coll (mx/react (focus-collection coll-id))]
|
||||||
:will-mount icons-page-will-mount
|
[:main.dashboard-main
|
||||||
:did-remount icons-page-did-remount
|
(header)
|
||||||
:name "icons-page"
|
[:section.dashboard-content
|
||||||
:mixins [mx/static]}))
|
(nav state)
|
||||||
|
(menu state coll)
|
||||||
|
(content state coll)]]))
|
||||||
|
|
||||||
;; --- New Icon Lightbox (TODO)
|
;; --- New Icon Lightbox (TODO)
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue