From 3a31abac5a46e30c7f4e972d975e9f1da9bcba95 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20G=C3=B3mez?= Date: Tue, 9 Feb 2016 20:28:12 +0100 Subject: [PATCH 1/9] Support 0, 1 or more in plural translations --- src/uxbox/locales.cljs | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/uxbox/locales.cljs b/src/uxbox/locales.cljs index 4c3d05bb0d..f6bcc86075 100644 --- a/src/uxbox/locales.cljs +++ b/src/uxbox/locales.cljs @@ -34,7 +34,14 @@ (let [value (get-in +locales+ [+locale+ t] (name t)) plural (first (filter c? args)) args (mapv #(if (c? %) @% %) args) - value (if vector? + value (cond + (and (vector? value) + (= 3 (count value))) + (nth value (min 2 @plural)) + + (vector? value) (if (= @plural 1) (first value) (second value)) + + :else value)] (apply str/format value args)))) From 7830c11a1649d0a0fdc0493f9a9fa98f5e71169d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20G=C3=B3mez?= Date: Tue, 9 Feb 2016 20:33:19 +0100 Subject: [PATCH 2/9] Show project count in dashboard --- src/uxbox/locales/en.cljs | 4 ++++ src/uxbox/ui/dashboard/projects.cljs | 13 +++++++------ 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/uxbox/locales/en.cljs b/src/uxbox/locales/en.cljs index 63fe70cbd4..a28db5ce8b 100644 --- a/src/uxbox/locales/en.cljs +++ b/src/uxbox/locales/en.cljs @@ -2,6 +2,10 @@ (defonce +locales+ {"ds.projects" "PROJECTS" + "ds.num-projects" ["No projects" + "%s project" + "%s projects"] + "ds.elements" "ELEMENTS" "ds.icons" "ICONS" "ds.colors" "COLORS" diff --git a/src/uxbox/ui/dashboard/projects.cljs b/src/uxbox/ui/dashboard/projects.cljs index 7d02a31f65..6e3b4fda4e 100644 --- a/src/uxbox/ui/dashboard/projects.cljs +++ b/src/uxbox/ui/dashboard/projects.cljs @@ -3,6 +3,7 @@ [rum.core :as rum] [cats.labs.lens :as l] [cuerdas.core :as str] + [uxbox.locales :as t :refer (tr)] [uxbox.router :as r] [uxbox.rstore :as rs] [uxbox.state :as s] @@ -149,9 +150,9 @@ ;; Menu ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; (def ^:static menu-l -;; (as-> (l/select-keys [:projects]) $ -;; (l/focus-atom $ s/state))) +(def ^:static menu-l + (as-> (l/select-keys [:projects-by-id]) $ + (l/focus-atom $ s/state))) (rum/defc project-sort-selector < rum/reactive [sort-order] @@ -166,12 +167,12 @@ (defn menu-render [] - (let [state {:projects []} #_(rum/react menu-l) - pcount (count (:projects state))] + (let [projects (rum/react menu-l) + pcount (count (:projects-by-id projects))] ;; FIXME: redundant project-by-id key (html [:section#dashboard-bar.dashboard-bar [:div.dashboard-info - [:span.dashboard-projects pcount " projects"] + [:span.dashboard-projects (tr "ds.num-projects" (t/c pcount))] [:span "Sort by"]] [:div.dashboard-search i/search]]))) From 0551e1729a9c8edb2fb393868379ffc583e769f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20G=C3=B3mez?= Date: Tue, 9 Feb 2016 20:52:13 +0100 Subject: [PATCH 3/9] Project ordering --- src/uxbox/data/dashboard.cljs | 11 ++++++ src/uxbox/data/projects.cljs | 7 ++++ src/uxbox/locales/en.cljs | 4 +++ src/uxbox/state.cljs | 2 +- src/uxbox/ui/dashboard/projects.cljs | 50 +++++++++++++++++++--------- 5 files changed, 57 insertions(+), 17 deletions(-) diff --git a/src/uxbox/data/dashboard.cljs b/src/uxbox/data/dashboard.cljs index f405e678a2..7b3de1501c 100644 --- a/src/uxbox/data/dashboard.cljs +++ b/src/uxbox/data/dashboard.cljs @@ -62,6 +62,17 @@ (-pr-writer [mv writer _] (-write writer "#")))) +(defn set-project-ordering + [order] + (reify + rs/UpdateEvent + (-apply-update [_ state] + (assoc-in state [:dashboard :project-ordering] order)) + + IPrintWithWriter + (-pr-writer [mv writer _] + (-write writer "#")))) + (defn set-collection-type [type] {:pre [(contains? #{:builtin :own} type)]} diff --git a/src/uxbox/data/projects.cljs b/src/uxbox/data/projects.cljs index 5c8c4e3fa9..883c3ad2da 100644 --- a/src/uxbox/data/projects.cljs +++ b/src/uxbox/data/projects.cljs @@ -57,6 +57,13 @@ (sort-by :created) (into []))) +(defn sort-projects-by + [ordering projs] + (case ordering + :name (sort-by :name projs) + :created (reverse (sort-by :created projs)) + projs)) + ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Events ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; diff --git a/src/uxbox/locales/en.cljs b/src/uxbox/locales/en.cljs index a28db5ce8b..491e75a379 100644 --- a/src/uxbox/locales/en.cljs +++ b/src/uxbox/locales/en.cljs @@ -5,6 +5,10 @@ "ds.num-projects" ["No projects" "%s project" "%s projects"] + "ds.project-ordering" "Sort by" + "ds.project-ordering.by-name" "name" + "ds.project-ordering.by-last-update" "last update" + "ds.project-ordering.by-creation-date" "creation date" "ds.elements" "ELEMENTS" "ds.icons" "ICONS" diff --git a/src/uxbox/state.cljs b/src/uxbox/state.cljs index fcc916dca8..b27c87be4a 100644 --- a/src/uxbox/state.cljs +++ b/src/uxbox/state.cljs @@ -7,7 +7,7 @@ (defonce stream (rs/init {:user {:fullname "Cirilla Fiona" :avatar "http://lorempixel.com/50/50/"} - :dashboard {} + :dashboard {:project-ordering :name} :workspace {} :shapes-by-id {} :elements-by-id {} diff --git a/src/uxbox/ui/dashboard/projects.cljs b/src/uxbox/ui/dashboard/projects.cljs index 6e3b4fda4e..aa35fc26ec 100644 --- a/src/uxbox/ui/dashboard/projects.cljs +++ b/src/uxbox/ui/dashboard/projects.cljs @@ -8,6 +8,7 @@ [uxbox.rstore :as rs] [uxbox.state :as s] [uxbox.time :as time] + [uxbox.data.dashboard :as dd] [uxbox.data.projects :as dp] [uxbox.data.workspace :as dw] [uxbox.ui.icons :as i] @@ -21,9 +22,8 @@ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; FIXME rename -(def +ordering-options+ {:name "name" - :last-updated "date updated" - :created "date created"}) +(def +ordering-options+ {:name "ds.project-ordering.by-name" + :created "ds.project-ordering.by-creation-date"}) (def +layouts+ {:mobile {:name "Mobile" :id "mobile" @@ -154,16 +154,33 @@ (as-> (l/select-keys [:projects-by-id]) $ (l/focus-atom $ s/state))) -(rum/defc project-sort-selector < rum/reactive - [sort-order] - nil) - ;; (let [sort-name (get project-orderings (rum/react sort-order))] - ;; [:select.input-select - ;; {:on-change #(reset! sort-order (name->order (.-value (.-target %)))) - ;; :value sort-name} - ;; (for [order (keys project-orderings) - ;; :let [name (get project-orderings order)]] - ;; [:option {:key name} name])])) +(def ^:static project-ordering-l + (as-> (l/in [:dashboard :project-ordering]) $ + (l/focus-atom $ s/state))) + +(defn project-sort-render + [] + (let [ordering (rum/react project-ordering-l)] + (html + [:div + [:span (tr "ds.project-ordering")] + [:select.input-select + {:on-change #(rs/emit! (dd/set-project-ordering (keyword (.-value (.-target %))))) + :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 project-sort-selector + (mx/component + {:render project-sort-render + :name "project-sort-order" + :mixins [rum/reactive]})) (defn menu-render [] @@ -173,7 +190,7 @@ [:section#dashboard-bar.dashboard-bar [:div.dashboard-info [:span.dashboard-projects (tr "ds.num-projects" (t/c pcount))] - [:span "Sort by"]] + (project-sort-selector)] [:div.dashboard-search i/search]]))) @@ -236,14 +253,15 @@ (letfn [(on-click [e] (dom/prevent-default e) (lightbox/open! :new-project))] - (let [state (rum/react grid-l)] + (let [state (rum/react grid-l) + ordering (rum/react project-ordering-l)] (html [:section.dashboard-grid [:h2 "Your projects"] [:div.dashboard-grid-content [:div.grid-item.add-project {:on-click on-click} [:span "+ New project"]] - (for [item (vals (:projects-by-id state))] + (for [item (dp/sort-projects-by ordering (vals (:projects-by-id state)))] (rum/with-key (project-item item) (:id item)))]])))) (def grid From 33cc0fe925ff6a9950ed23b49cc32764943a967c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20G=C3=B3mez?= Date: Wed, 17 Feb 2016 19:50:08 +0100 Subject: [PATCH 4/9] Project search, needs UX/UI review --- src/uxbox/data/dashboard.cljs | 22 +++++++++++++++++ src/uxbox/data/projects.cljs | 11 +++++++++ src/uxbox/state.cljs | 3 ++- src/uxbox/ui/dashboard/projects.cljs | 37 ++++++++++++++++++++++++---- 4 files changed, 67 insertions(+), 6 deletions(-) diff --git a/src/uxbox/data/dashboard.cljs b/src/uxbox/data/dashboard.cljs index 7b3de1501c..3f88a8c482 100644 --- a/src/uxbox/data/dashboard.cljs +++ b/src/uxbox/data/dashboard.cljs @@ -73,6 +73,28 @@ (-pr-writer [mv writer _] (-write writer "#")))) +(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 "#")))) + +(defn clear-project-filtering + [] + (reify + rs/UpdateEvent + (-apply-update [_ state] + (assoc-in state [:dashboard :project-filter] "")) + + IPrintWithWriter + (-pr-writer [mv writer _] + (-write writer "#")))) + (defn set-collection-type [type] {:pre [(contains? #{:builtin :own} type)]} diff --git a/src/uxbox/data/projects.cljs b/src/uxbox/data/projects.cljs index 883c3ad2da..e7cc4a2baf 100644 --- a/src/uxbox/data/projects.cljs +++ b/src/uxbox/data/projects.cljs @@ -1,5 +1,6 @@ (ns uxbox.data.projects (:require [bouncer.validators :as v] + [cuerdas.core :as str] [uxbox.rstore :as rs] [uxbox.router :as r] [uxbox.state :as st] @@ -64,6 +65,16 @@ :created (reverse (sort-by :created 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 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; diff --git a/src/uxbox/state.cljs b/src/uxbox/state.cljs index b27c87be4a..2d0b290fec 100644 --- a/src/uxbox/state.cljs +++ b/src/uxbox/state.cljs @@ -7,7 +7,8 @@ (defonce stream (rs/init {:user {:fullname "Cirilla Fiona" :avatar "http://lorempixel.com/50/50/"} - :dashboard {:project-ordering :name} + :dashboard {:project-order :name + :project-filter ""} :workspace {} :shapes-by-id {} :elements-by-id {} diff --git a/src/uxbox/ui/dashboard/projects.cljs b/src/uxbox/ui/dashboard/projects.cljs index aa35fc26ec..d7ac9a9105 100644 --- a/src/uxbox/ui/dashboard/projects.cljs +++ b/src/uxbox/ui/dashboard/projects.cljs @@ -155,7 +155,11 @@ (l/focus-atom $ s/state))) (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))) (defn project-sort-render @@ -176,12 +180,32 @@ :value option-value} option-text])]]))) -(def project-sort-selector +(def project-sorting (mx/component {:render project-sort-render :name "project-sort-order" :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 [] (let [projects (rum/react menu-l) @@ -190,7 +214,8 @@ [:section#dashboard-bar.dashboard-bar [:div.dashboard-info [:span.dashboard-projects (tr "ds.num-projects" (t/c pcount))] - (project-sort-selector)] + (project-sorting) + (project-search)] [:div.dashboard-search i/search]]))) @@ -254,14 +279,16 @@ (dom/prevent-default e) (lightbox/open! :new-project))] (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 [:section.dashboard-grid [:h2 "Your projects"] [:div.dashboard-grid-content [:div.grid-item.add-project {:on-click on-click} [: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)))]])))) (def grid From 1258d954d068ba5a39f6d05a32ff22f2020f3883 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20G=C3=B3mez?= Date: Wed, 17 Feb 2016 20:05:31 +0100 Subject: [PATCH 5/9] Don't filter by whitespace --- src/uxbox/data/projects.cljs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/uxbox/data/projects.cljs b/src/uxbox/data/projects.cljs index e7cc4a2baf..0744bb7648 100644 --- a/src/uxbox/data/projects.cljs +++ b/src/uxbox/data/projects.cljs @@ -67,11 +67,11 @@ (defn contains-term? [phrase term] - (str/contains? (str/lower phrase) (str/lower term))) + (str/contains? (str/lower phrase) (str/trim (str/lower term)))) (defn filter-projects-by [term projs] - (if (= term "") + (if (str/blank? term) projs (filter #(contains-term? (:name %) term) projs))) From 9ede688b6eebafd269a831b9f2c1ea3cd5c0972d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20G=C3=B3mez?= Date: Wed, 17 Feb 2016 20:11:24 +0100 Subject: [PATCH 6/9] Extract event handlers to local bindings --- src/uxbox/ui/dashboard/projects.cljs | 29 +++++++++++++++------------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/src/uxbox/ui/dashboard/projects.cljs b/src/uxbox/ui/dashboard/projects.cljs index d7ac9a9105..11e1b4840b 100644 --- a/src/uxbox/ui/dashboard/projects.cljs +++ b/src/uxbox/ui/dashboard/projects.cljs @@ -164,12 +164,13 @@ (defn project-sort-render [] - (let [ordering (rum/react project-ordering-l)] + (let [ordering (rum/react project-ordering-l) + change-order #(rs/emit! (dd/set-project-ordering (keyword (.-value (.-target %)))))] (html [:div [:span (tr "ds.project-ordering")] [:select.input-select - {:on-change #(rs/emit! (dd/set-project-ordering (keyword (.-value (.-target %))))) + {:on-change change-order :value (name ordering)} (for [option (keys +ordering-options+) :let [option-id (get +ordering-options+ option) @@ -188,17 +189,19 @@ (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"}]])) + (let [change-term #(rs/emit! (dd/set-project-filtering (.-value (.-target %)))) + clear-term #(rs/emit! (dd/clear-project-filtering))] + (html + [:form + [:input + {:type "text" + :on-change change-term + :auto-focus true + :value (rum/react project-filtering-l)}] + [:input + {:type "button" + :on-click clear-term + :value "X"}]]))) (def project-search (mx/component From b131dea579572bedfb1814fc065c30d6e776f3dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20G=C3=B3mez?= Date: Wed, 17 Feb 2016 20:12:21 +0100 Subject: [PATCH 7/9] Fix project ordering --- src/uxbox/data/dashboard.cljs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/uxbox/data/dashboard.cljs b/src/uxbox/data/dashboard.cljs index 3f88a8c482..f67f365d21 100644 --- a/src/uxbox/data/dashboard.cljs +++ b/src/uxbox/data/dashboard.cljs @@ -67,7 +67,7 @@ (reify rs/UpdateEvent (-apply-update [_ state] - (assoc-in state [:dashboard :project-ordering] order)) + (assoc-in state [:dashboard :project-order] order)) IPrintWithWriter (-pr-writer [mv writer _] From 5d0e57acb7093d758a8276242fd7a8236f4624e1 Mon Sep 17 00:00:00 2001 From: Juan de la Cruz Date: Thu, 18 Feb 2016 16:33:54 +0100 Subject: [PATCH 8/9] add projects search styles --- .../public/styles/partials/dashboard-bar.scss | 38 +++++++++++++++---- src/uxbox/ui/dashboard/projects.cljs | 17 ++++----- 2 files changed, 37 insertions(+), 18 deletions(-) diff --git a/resources/public/styles/partials/dashboard-bar.scss b/resources/public/styles/partials/dashboard-bar.scss index 19b89c59ae..a632e319d0 100644 --- a/resources/public/styles/partials/dashboard-bar.scss +++ b/resources/public/styles/partials/dashboard-bar.scss @@ -28,22 +28,44 @@ } .dashboard-search { - cursor: pointer; - margin-left: $big; + align-items: center; + display: flex; + margin-left: $small; - svg { - fill: $color-gray-dark; - height: 20px; - width: 20px; + .input-text { + background: rgba(255,255,255,.4); + border: 0; + color: $dark-ui-text; + padding: 4px 8px; + margin: 0; + max-width: 160px; + } + + .clear-search { + align-items: center; + background: rgba(255,255,255,.4); + cursor: pointer; + display: flex; + height: 28px; + padding: 0 5px; + + svg { + fill: $light-ui-icons; + height: 15px; + transform: rotate(45deg); + width: 15px; + + &:hover { + fill: $color-danger; + } - &:hover { - fill: $color-gray-darker; } } } + &.library-gap { padding: $small $medium $small 270px; } diff --git a/src/uxbox/ui/dashboard/projects.cljs b/src/uxbox/ui/dashboard/projects.cljs index 11e1b4840b..4c125b1c77 100644 --- a/src/uxbox/ui/dashboard/projects.cljs +++ b/src/uxbox/ui/dashboard/projects.cljs @@ -192,16 +192,16 @@ (let [change-term #(rs/emit! (dd/set-project-filtering (.-value (.-target %)))) clear-term #(rs/emit! (dd/clear-project-filtering))] (html - [:form - [:input + [:form.dashboard-search + [:input.input-text {:type "text" :on-change change-term :auto-focus true + :placeholder "Search..." :value (rum/react project-filtering-l)}] - [:input - {:type "button" - :on-click clear-term - :value "X"}]]))) + [:div.clear-search + {:on-click clear-term} + i/close]]))) (def project-search (mx/component @@ -218,9 +218,7 @@ [:div.dashboard-info [:span.dashboard-projects (tr "ds.num-projects" (t/c pcount))] (project-sorting) - (project-search)] - [:div.dashboard-search - i/search]]))) + (project-search)]]))) (def menu (mx/component @@ -299,4 +297,3 @@ {:render grid-render :name "grid" :mixins [rum/reactive]})) - From 36051f40ddb83c3d6342188648e139f4cfcb057b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20G=C3=B3mez?= Date: Thu, 18 Feb 2016 16:40:48 +0100 Subject: [PATCH 9/9] I18N-ize search placeholder --- src/uxbox/locales/en.cljs | 1 + src/uxbox/ui/dashboard/projects.cljs | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/uxbox/locales/en.cljs b/src/uxbox/locales/en.cljs index 491e75a379..aa4e3c6da2 100644 --- a/src/uxbox/locales/en.cljs +++ b/src/uxbox/locales/en.cljs @@ -9,6 +9,7 @@ "ds.project-ordering.by-name" "name" "ds.project-ordering.by-last-update" "last update" "ds.project-ordering.by-creation-date" "creation date" + "ds.project-search.placeholder" "Search..." "ds.elements" "ELEMENTS" "ds.icons" "ICONS" diff --git a/src/uxbox/ui/dashboard/projects.cljs b/src/uxbox/ui/dashboard/projects.cljs index 4c125b1c77..55770c7229 100644 --- a/src/uxbox/ui/dashboard/projects.cljs +++ b/src/uxbox/ui/dashboard/projects.cljs @@ -197,7 +197,7 @@ {:type "text" :on-change change-term :auto-focus true - :placeholder "Search..." + :placeholder (tr "ds.project-search.placeholder") :value (rum/react project-filtering-l)}] [:div.clear-search {:on-click clear-term}