0
Fork 0
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:
Alejandro Gómez 2016-02-17 19:50:08 +01:00
parent 0551e1729a
commit 33cc0fe925
4 changed files with 67 additions and 6 deletions

View file

@ -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)]}

View file

@ -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
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

View file

@ -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 {}

View file

@ -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