3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-05 07:51:41 +02:00
Code Issues Projects Releases Packages Wiki Activity

Minor refactor on projects page (ui components).

Browse source
This commit is contained in:
Andrey Antukh 2016-09-27 09:30:03 +03:00
parent 40b71fda5e
commit 692f066cf4
No known key found for this signature in database
GPG key ID: 4DFEBCB8316A8B95
1 changed files with 154 additions and 189 deletions
Download patch file Download diff file Expand all files Collapse all files

343
src/uxbox/main/ui/dashboard/projects.cljs
View file

@ -6,24 +6,21 @@
;; 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.projects (ns uxbox.main.ui.dashboard.projects
(:require [sablono.core :as html :refer-macros [html]] (:require [lentes.core :as l]
[rum.core :as rum]
[lentes.core :as l]
[cuerdas.core :as str] [cuerdas.core :as str]
[uxbox.util.i18n :as t :refer (tr)] [uxbox.main.state :as st]
[uxbox.util.router :as r]
[uxbox.util.rstore :as rs]
[uxbox.main.state :as s]
[uxbox.main.data.dashboard :as dd]
[uxbox.main.data.projects :as dp] [uxbox.main.data.projects :as dp]
[uxbox.main.data.workspace :as dw]
[uxbox.main.data.lightbox :as udl] [uxbox.main.data.lightbox :as udl]
[uxbox.main.ui.icons :as i] [uxbox.main.ui.icons :as i]
[uxbox.util.dom :as dom]
[uxbox.main.ui.dashboard.header :refer (header)] [uxbox.main.ui.dashboard.header :refer (header)]
[uxbox.main.ui.lightbox :as lbx] [uxbox.main.ui.lightbox :as lbx]
[uxbox.main.ui.messages :as uum] [uxbox.main.ui.messages :as uum]
[uxbox.util.mixins :as mx] [uxbox.util.i18n :as t :refer (tr)]
[uxbox.util.router :as r]
[uxbox.util.rstore :as rs]
[uxbox.util.data :refer (read-string)]
[uxbox.util.dom :as dom]
[uxbox.util.mixins :as mx :include-macros true]
[uxbox.util.datetime :as dt])) [uxbox.util.datetime :as dt]))
;; --- Helpers & Constants ;; --- Helpers & Constants
@ -60,100 +57,94 @@
{:name "ds.project-ordering.by-name" {:name "ds.project-ordering.by-name"
:created "ds.project-ordering.by-creation-date"}) :created "ds.project-ordering.by-creation-date"})
;; --- Lenses ;; --- Refs
(def projects-by-id-ref (def projects-map-ref
(as-> (l/key :projects-by-id) $ (-> (l/key :projects-by-id)
(l/derive $ s/state))) (l/derive st/state)))
(def dashboard-ref
(-> (l/in [:dashboard :projects])
(l/derive st/state)))
(def project-ordering-ref (def project-ordering-ref
(as-> (l/in [:dashboard :project-order]) $ (-> (l/key :project-order)
(l/derive $ s/state))) (l/derive dashboard-ref)))
(def project-filtering-ref (def project-filtering-ref
(as-> (l/in [:dashboard :project-filter]) $ (-> (l/in [:project-filter])
(l/derive $ s/state))) (l/derive dashboard-ref)))
;; --- Sort Widget ;; --- Helpers
(defn sort-widget-render (defn sort-projects-by
[] [ordering projs]
(let [ordering (mx/react project-ordering-ref) (case ordering
on-change #(rs/emit! (dp/set-project-ordering :name (sort-by :name projs)
(keyword (.-value (.-target %)))))] :created (reverse (sort-by :created-at projs))
(html projs))
[:div
[:span (tr "ds.project-ordering")]
[:select.input-select
{:on-change on-change
:value (name ordering)}
(for [option (keys +ordering-options+)
:let [option-id (get +ordering-options+ option)
option-value (name option)
option-text (tr option-id)]]
[:option
{:key option-id
:value option-value}
option-text])]])))
(def ^:private sort-widget (defn contains-term?
(mx/component [phrase term]
{:render sort-widget-render (let [term (name term)]
:name "sort-widget-render" (str/includes? (str/lower phrase) (str/trim (str/lower term)))))
:mixins [mx/reactive mx/static]}))
;; --- Filtering Widget (defn filter-projects-by
[term projs]
(if (str/blank? term)
projs
(filter #(contains-term? (:name %) term) projs)))
(defn search-widget-render ;; --- Menu (Filter & Sort)
[]
(letfn [(on-term-change [event]
(-> (dom/get-target event)
(dom/get-value)
(dp/set-project-filtering)
(rs/emit!)))
(on-clear [event]
(rs/emit! (dp/clear-project-filtering)))]
(html
[:form.dashboard-search
[:input.input-text
{:type "text"
:on-change on-term-change
:auto-focus true
:placeholder (tr "ds.project-search.placeholder")
:value (mx/react project-filtering-ref)}]
[:div.clear-search
{:on-click on-clear}
i/close]])))
(def ^:private search-widget (mx/defc menu
(mx/component {:mixins [mx/static]}
{:render search-widget-render [state projects]
:name "search-widget" (let [ordering (:order state :name)
:mixins [mx/reactive mx/static]})) filtering (:filter state "")
count (count projects)]
(letfn [(on-term-change [event]
(let [term (-> (dom/get-target event)
(dom/get-value))]
(rs/emit! (dp/update-opts :filter term))))
(on-ordering-change [event]
(let [value (dom/event->value event)
value (read-string value)]
(rs/emit! (dp/update-opts :order value))))
(on-clear [event]
(rs/emit! (dp/update-opts :filter "")))]
[:section.dashboard-bar
[:div.dashboard-info
;; --- Sort & Search Menu ;; Counter
[:span.dashboard-images (tr "ds.num-projects" (t/c count))]
(defn menu-render ;; Sorting
[] [:div
(let [projects (mx/react projects-by-id-ref) [:span (tr "ds.project-ordering")]
pcount (count projects)] [:select.input-select
(html {:on-change on-ordering-change
[:section.dashboard-bar :value (pr-str ordering)}
[:div.dashboard-info (for [[key value] (seq +ordering-options+)
[:span.dashboard-projects (tr "ds.num-projects" (t/c pcount))] :let [ovalue (pr-str key)
(sort-widget) olabel (tr value)]]
(search-widget)]]))) [:option {:key ovalue :value ovalue} olabel])]]
;; Search
(def menu [:form.dashboard-search
(mx/component [:input.input-text
{:render menu-render {:key :images-search-box
:name "menu" :type "text"
:mixins [mx/reactive mx/static]})) :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]]]])))
;; --- Grid Item ;; --- Grid Item
(defn grid-item-render (mx/defc grid-item
[own project] {:mixins [mx/static]}
[project]
(letfn [(on-navigate [event] (letfn [(on-navigate [event]
(rs/emit! (dp/go-to (:id project)))) (rs/emit! (dp/go-to (:id project))))
(delete [] (delete []
@ -161,135 +152,115 @@
(on-delete [event] (on-delete [event]
(dom/stop-propagation event) (dom/stop-propagation event)
(udl/open! :confirm {:on-accept delete}))] (udl/open! :confirm {:on-accept delete}))]
(html [:div.grid-item.project-th {:on-click on-navigate}
[:div.grid-item.project-th {:on-click on-navigate [:h3 (:name project)]
:key (:id project)} [:span.project-th-update
[:h3 (:name project)] (str "Updated " (dt/timeago (:modified-at project)))]
[:span.project-th-update [:div.project-th-actions
(str "Updated " (dt/timeago (:modified-at project)))] [:div.project-th-icon.pages
[:div.project-th-actions i/page
[:div.project-th-icon.pages [:span (:total-pages project)]]
i/page #_[:div.project-th-icon.comments
[:span (:total-pages project)]] i/chat
#_[:div.project-th-icon.comments
i/chat
[:span "0"]] [:span "0"]]
#_[:div.project-th-icon.edit #_[:div.project-th-icon.edit
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]]]))
(def ^:private grid-item
(mx/component
{:render grid-item-render
:name "grid-item"
:mixins [rum/static]}))
;; --- Grid ;; --- Grid
(defn grid-render (mx/defc grid
[own] {:mixins [mx/static]}
(let [projects (mx/react projects-by-id-ref) [state projects]
ordering (mx/react project-ordering-ref) {:pre [(map? projects)]}
filtering (mx/react project-filtering-ref)] (let [ordering (:order state :name)
filtering (:filter state "")
projects (->> (vals projects)
(filter-projects-by filtering)
(sort-projects-by ordering))]
(letfn [(on-click [e] (letfn [(on-click [e]
(dom/prevent-default e) (dom/prevent-default e)
(udl/open! :new-project))] (udl/open! :new-project))]
(html [:section.dashboard-grid
[:section.dashboard-grid [:h2 "Your projects"]
[:h2 "Your projects"] [:div.dashboard-grid-content
[:div.dashboard-grid-content [:div.dashboard-grid-row
[:div.dashboard-grid-row [:div.grid-item.add-project
[:div.grid-item.add-project {:on-click on-click}
{:on-click on-click} [:span "+ New project"]]
[:span "+ New project"]] (for [item projects]
(for [item (->> (vals projects) (-> (grid-item item)
(dp/filter-projects-by filtering) (mx/with-key (:id item))))]]])))
(dp/sort-projects-by ordering))]
(-> (grid-item item)
(rum/with-key (:id item))))]]]))))
(def grid ;; --- Projects Page
(mx/component
{:render grid-render
:name "grid"
:mixins [mx/reactive]}))
;; --- Page
(defn projects-page-render
[own]
(html
[:main.dashboard-main
(uum/messages)
(header)
[:section.dashboard-content
(menu)
(grid)]]))
(defn projects-page-will-mount (defn projects-page-will-mount
[own] [own]
(rs/emit! (dd/initialize :dashboard/projects) (rs/emit! (dp/initialize))
(dp/initialize))
own) own)
(defn projects-page-did-remount (defn projects-page-did-remount
[old-state state] [old-own own]
(rs/emit! (dd/initialize :dashboard/projects)) (rs/emit! (dp/initialize))
state) own)
(def projects-page (mx/defc projects-page
(mx/component {:will-mount projects-page-will-mount
{:render projects-page-render :did-remount projects-page-did-remount
:will-mount projects-page-will-mount :mixins [mx/static mx/reactive]}
:did-remount projects-page-did-remount []
:name "projects-page" (let [state (mx/react dashboard-ref)
:mixins [rum/static]})) projects-map (mx/react projects-map-ref)]
[:main.dashboard-main
(uum/messages)
(header)
[:section.dashboard-content
(menu state projects-map)
(grid state projects-map)]]))
;; --- Lightbox: Layout input ;; --- Lightbox: Layout input
(defn- layout-input (mx/defc layout-input
[local layout-id] [local layout-id]
(let [layout (get-in +layouts+ [layout-id]) (let [layout (get-in +layouts+ [layout-id])
id (:id layout) id (:id layout)
name (:name layout) name (:name layout)
width (:width layout) width (:width layout)
height (:height layout)] height (:height layout)]
(html [:div
[:div [:input
[:input {:type "radio"
{:type "radio" :key id
:key id :id id
:id id :name "project-layout"
:name "project-layout" :value name
:value name :checked (= layout-id (:layout @local))
:checked (= layout-id (:layout @local)) :on-change #(swap! local merge {:layout layout-id
:on-change #(swap! local merge {:layout layout-id :width width
:width width :height height})}]
:height height})}] [:label {:value (:name @local) :for id} name]]))
[:label {:value (:name @local) :for id} name]])))
;; --- Lightbox: Layout selector ;; --- Lightbox: Layout selector
(defn- layout-selector (mx/defc layout-selector
[local] [local]
(html [:div.input-radio.radio-primary
[:div.input-radio.radio-primary (layout-input local "mobile")
(layout-input local "mobile") (layout-input local "tablet")
(layout-input local "tablet") (layout-input local "notebook")
(layout-input local "notebook") (layout-input local "desktop")])
(layout-input local "desktop")]))
;; -- New Project Lightbox ;; -- New Project Lightbox
(defn- new-project-lightbox-render (mx/defcs new-project-lightbox
{:mixins [(mx/local +project-defaults+)]}
[own] [own]
(let [local (:rum/local own) (let [local (:rum/local own)
name (:name @local) name (:name @local)
width (:width @local) width (:width @local)
height (:height @local)] height (:height @local)]
(html
[:div.lightbox-body [:div.lightbox-body
[:h3 "New project"] [:h3 "New project"]
[:form {:on-submit (constantly nil)} [:form {:on-submit (constantly nil)}
@ -333,13 +304,7 @@
[:a.close {:href "#" [:a.close {:href "#"
:on-click #(do (dom/prevent-default %) :on-click #(do (dom/prevent-default %)
(udl/close!))} (udl/close!))}
i/close]]))) i/close]]))
(def new-project-lightbox
(mx/component
{:render new-project-lightbox-render
:name "new-project-lightbox"
:mixins [(rum/local +project-defaults+)]}))
(defmethod lbx/render-lightbox :new-project (defmethod lbx/render-lightbox :new-project
[_] [_]