mirror of
https://github.com/penpot/penpot.git
synced 2025-03-15 17:21:17 -05:00
Project search, needs UX/UI review
This commit is contained in:
parent
0551e1729a
commit
33cc0fe925
4 changed files with 67 additions and 6 deletions
|
@ -73,6 +73,28 @@
|
||||||
(-pr-writer [mv writer _]
|
(-pr-writer [mv writer _]
|
||||||
(-write writer "#<event:u.d.d/set-project-ordering>"))))
|
(-write writer "#<event:u.d.d/set-project-ordering>"))))
|
||||||
|
|
||||||
|
(defn set-project-filtering
|
||||||
|
[term]
|
||||||
|
(reify
|
||||||
|
rs/UpdateEvent
|
||||||
|
(-apply-update [_ state]
|
||||||
|
(assoc-in state [:dashboard :project-filter] term))
|
||||||
|
|
||||||
|
IPrintWithWriter
|
||||||
|
(-pr-writer [mv writer _]
|
||||||
|
(-write writer "#<event:u.d.d/set-project-filtering>"))))
|
||||||
|
|
||||||
|
(defn clear-project-filtering
|
||||||
|
[]
|
||||||
|
(reify
|
||||||
|
rs/UpdateEvent
|
||||||
|
(-apply-update [_ state]
|
||||||
|
(assoc-in state [:dashboard :project-filter] ""))
|
||||||
|
|
||||||
|
IPrintWithWriter
|
||||||
|
(-pr-writer [mv writer _]
|
||||||
|
(-write writer "#<event:u.d.d/clear-project-filtering>"))))
|
||||||
|
|
||||||
(defn set-collection-type
|
(defn set-collection-type
|
||||||
[type]
|
[type]
|
||||||
{:pre [(contains? #{:builtin :own} type)]}
|
{:pre [(contains? #{:builtin :own} type)]}
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
(ns uxbox.data.projects
|
(ns uxbox.data.projects
|
||||||
(:require [bouncer.validators :as v]
|
(:require [bouncer.validators :as v]
|
||||||
|
[cuerdas.core :as str]
|
||||||
[uxbox.rstore :as rs]
|
[uxbox.rstore :as rs]
|
||||||
[uxbox.router :as r]
|
[uxbox.router :as r]
|
||||||
[uxbox.state :as st]
|
[uxbox.state :as st]
|
||||||
|
@ -64,6 +65,16 @@
|
||||||
:created (reverse (sort-by :created projs))
|
:created (reverse (sort-by :created projs))
|
||||||
projs))
|
projs))
|
||||||
|
|
||||||
|
(defn contains-term?
|
||||||
|
[phrase term]
|
||||||
|
(str/contains? (str/lower phrase) (str/lower term)))
|
||||||
|
|
||||||
|
(defn filter-projects-by
|
||||||
|
[term projs]
|
||||||
|
(if (= term "")
|
||||||
|
projs
|
||||||
|
(filter #(contains-term? (:name %) term) projs)))
|
||||||
|
|
||||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||||
;; Events
|
;; Events
|
||||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||||
|
|
|
@ -7,7 +7,8 @@
|
||||||
(defonce stream
|
(defonce stream
|
||||||
(rs/init {:user {:fullname "Cirilla Fiona"
|
(rs/init {:user {:fullname "Cirilla Fiona"
|
||||||
:avatar "http://lorempixel.com/50/50/"}
|
:avatar "http://lorempixel.com/50/50/"}
|
||||||
:dashboard {:project-ordering :name}
|
:dashboard {:project-order :name
|
||||||
|
:project-filter ""}
|
||||||
:workspace {}
|
:workspace {}
|
||||||
:shapes-by-id {}
|
:shapes-by-id {}
|
||||||
:elements-by-id {}
|
:elements-by-id {}
|
||||||
|
|
|
@ -155,7 +155,11 @@
|
||||||
(l/focus-atom $ s/state)))
|
(l/focus-atom $ s/state)))
|
||||||
|
|
||||||
(def ^:static project-ordering-l
|
(def ^:static project-ordering-l
|
||||||
(as-> (l/in [:dashboard :project-ordering]) $
|
(as-> (l/in [:dashboard :project-order]) $
|
||||||
|
(l/focus-atom $ s/state)))
|
||||||
|
|
||||||
|
(def ^:static project-filtering-l
|
||||||
|
(as-> (l/in [:dashboard :project-filter]) $
|
||||||
(l/focus-atom $ s/state)))
|
(l/focus-atom $ s/state)))
|
||||||
|
|
||||||
(defn project-sort-render
|
(defn project-sort-render
|
||||||
|
@ -176,12 +180,32 @@
|
||||||
:value option-value}
|
:value option-value}
|
||||||
option-text])]])))
|
option-text])]])))
|
||||||
|
|
||||||
(def project-sort-selector
|
(def project-sorting
|
||||||
(mx/component
|
(mx/component
|
||||||
{:render project-sort-render
|
{:render project-sort-render
|
||||||
:name "project-sort-order"
|
:name "project-sort-order"
|
||||||
:mixins [rum/reactive]}))
|
:mixins [rum/reactive]}))
|
||||||
|
|
||||||
|
(defn project-search-render
|
||||||
|
[]
|
||||||
|
(html
|
||||||
|
[:form
|
||||||
|
[:input
|
||||||
|
{:type "text"
|
||||||
|
:on-change #(rs/emit! (dd/set-project-filtering (.-value (.-target %))))
|
||||||
|
:auto-focus true
|
||||||
|
:value (rum/react project-filtering-l)}]
|
||||||
|
[:input
|
||||||
|
{:type "button"
|
||||||
|
:on-click #(rs/emit! (dd/clear-project-filtering))
|
||||||
|
:value "X"}]]))
|
||||||
|
|
||||||
|
(def project-search
|
||||||
|
(mx/component
|
||||||
|
{:render project-search-render
|
||||||
|
:name "project-search"
|
||||||
|
:mixins [rum/reactive]}))
|
||||||
|
|
||||||
(defn menu-render
|
(defn menu-render
|
||||||
[]
|
[]
|
||||||
(let [projects (rum/react menu-l)
|
(let [projects (rum/react menu-l)
|
||||||
|
@ -190,7 +214,8 @@
|
||||||
[:section#dashboard-bar.dashboard-bar
|
[:section#dashboard-bar.dashboard-bar
|
||||||
[:div.dashboard-info
|
[:div.dashboard-info
|
||||||
[:span.dashboard-projects (tr "ds.num-projects" (t/c pcount))]
|
[:span.dashboard-projects (tr "ds.num-projects" (t/c pcount))]
|
||||||
(project-sort-selector)]
|
(project-sorting)
|
||||||
|
(project-search)]
|
||||||
[:div.dashboard-search
|
[:div.dashboard-search
|
||||||
i/search]])))
|
i/search]])))
|
||||||
|
|
||||||
|
@ -254,14 +279,16 @@
|
||||||
(dom/prevent-default e)
|
(dom/prevent-default e)
|
||||||
(lightbox/open! :new-project))]
|
(lightbox/open! :new-project))]
|
||||||
(let [state (rum/react grid-l)
|
(let [state (rum/react grid-l)
|
||||||
ordering (rum/react project-ordering-l)]
|
ordering (rum/react project-ordering-l)
|
||||||
|
filtering (rum/react project-filtering-l)
|
||||||
|
projects (dp/filter-projects-by filtering (vals (:projects-by-id state)))]
|
||||||
(html
|
(html
|
||||||
[:section.dashboard-grid
|
[:section.dashboard-grid
|
||||||
[:h2 "Your projects"]
|
[:h2 "Your projects"]
|
||||||
[:div.dashboard-grid-content
|
[:div.dashboard-grid-content
|
||||||
[:div.grid-item.add-project {:on-click on-click}
|
[:div.grid-item.add-project {:on-click on-click}
|
||||||
[:span "+ New project"]]
|
[:span "+ New project"]]
|
||||||
(for [item (dp/sort-projects-by ordering (vals (:projects-by-id state)))]
|
(for [item (dp/sort-projects-by ordering projects)]
|
||||||
(rum/with-key (project-item item) (:id item)))]]))))
|
(rum/with-key (project-item item) (:id item)))]]))))
|
||||||
|
|
||||||
(def grid
|
(def grid
|
||||||
|
|
Loading…
Add table
Reference in a new issue