From 68b5f9c2eaa6e4889ad033c2012545c62d4f31a9 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Sun, 13 Dec 2015 13:04:34 +0200 Subject: [PATCH] WIP --- frontend/uxbox/router.cljs | 15 +- frontend/uxbox/rstore.cljs | 12 +- frontend/uxbox/state.cljs | 13 +- frontend/uxbox/ui.cljs | 10 +- frontend/uxbox/ui/dashboard.cljs | 241 +++++++++++++++++++++++++++++++ frontend/uxbox/ui/users.cljs | 24 +-- 6 files changed, 291 insertions(+), 24 deletions(-) create mode 100644 frontend/uxbox/ui/dashboard.cljs diff --git a/frontend/uxbox/router.cljs b/frontend/uxbox/router.cljs index f34068c88..a8bbe42dd 100644 --- a/frontend/uxbox/router.cljs +++ b/frontend/uxbox/router.cljs @@ -14,10 +14,17 @@ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; (defn update-location - [{:keys [handler route-params]}] + [{:keys [handler route-params] :as params}] (reify + IPrintWithWriter + (-pr-writer [mv writer x] + (-write writer "#")) + rs/UpdateEvent (-apply-update [_ state] + (println "-apply-update" handler route-params) (merge state {:location handler} (when route-params @@ -28,6 +35,10 @@ ([name params] {:pre [(keyword? name)]} (reify + IPrintWithWriter + (-pr-writer [mv writer _] + (-write writer "#")) + rs/EffectEvent (-apply-effect [_ state] (let [loc (merge {:handler name} @@ -60,7 +71,7 @@ (defonce +router+ (bidi.router/start-router! routes {:on-navigate on-navigate - :default-location {:handler :login}})) + :default-location {:handler :auth/login}})) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Public Api ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; diff --git a/frontend/uxbox/rstore.cljs b/frontend/uxbox/rstore.cljs index a06507eca..5165166f8 100644 --- a/frontend/uxbox/rstore.cljs +++ b/frontend/uxbox/rstore.cljs @@ -51,6 +51,7 @@ "Emits an event or a collection of them. The order of events does not matters." ([event] + (println "emit! " event) (rx/push! bus event)) ([event & events] (run! #(rx/push! bus %) (into [event] events)))) @@ -73,13 +74,16 @@ the provided value." [state] (reify + IPrintWithWriter + (-pr-writer [_ writer x] + (-write writer "#")) + UpdateEvent (-apply-update [_ _] - state) + state))) - IPrintWithWriter - (-pr-writer [mv writer _] - (-write writer "#")))) (defn init "Initializes the stream event loop and diff --git a/frontend/uxbox/state.cljs b/frontend/uxbox/state.cljs index 64550fcc6..743546841 100644 --- a/frontend/uxbox/state.cljs +++ b/frontend/uxbox/state.cljs @@ -3,12 +3,15 @@ [beicon.core :as rx])) (defonce stream - (rs/init {})) + (rs/init {:location :auth/login + :location-params nil + :projects-by-id {} + :pages-by-id {}})) (defonce state (atom {})) (rx/to-atom stream state) -(rs/emit! (rs/reset-state {:location :auth/login - :location-params nil - :projects-by-id {} - :pages-by-id {}})) +;; (rs/emit! (rs/reset-state {:location :auth/login +;; :location-params nil +;; :projects-by-id {} +;; :pages-by-id {}})) diff --git a/frontend/uxbox/ui.cljs b/frontend/uxbox/ui.cljs index b33f41f16..f653bf9fb 100644 --- a/frontend/uxbox/ui.cljs +++ b/frontend/uxbox/ui.cljs @@ -3,7 +3,8 @@ [cats.labs.lens :as l] [uxbox.state :as s] [uxbox.util :as util] - [uxbox.ui.users :as u])) + [uxbox.ui.users :as ui.u] + [uxbox.ui.dashboard :as ui.d])) (def ^:private ^:static state (as-> (l/select-keys [:location]) $ @@ -11,15 +12,16 @@ (defn app-render [own] + (println "KAKA: " @state) (let [{:keys [location location-params]} (rum/react state)] - (println @state) (case location - :auth/login (u/login) + :auth/login (ui.u/login) ;; :auth/register (u/register) ;; :auth/recover (u/recover-password) - ;; :main/dashboard (d/dashboard) + :main/dashboard (ui.d/dashboard) ;; :main/project (w/workspace conn location-params) ;; :main/page (w/workspace conn location-params)))) + nil ))) (def app diff --git a/frontend/uxbox/ui/dashboard.cljs b/frontend/uxbox/ui/dashboard.cljs new file mode 100644 index 000000000..5609d0c2b --- /dev/null +++ b/frontend/uxbox/ui/dashboard.cljs @@ -0,0 +1,241 @@ +(ns uxbox.ui.dashboard + (:require [sablono.core :as html :refer-macros [html]] + [rum.core :as rum] + [cuerdas.core :refer [trim]] + [uxbox.util :as util] + [uxbox.router :as r] + [uxbox.ui.navigation :as nav] + ;; [uxbox.ui.mixins :as mx] + [uxbox.ui.icons :as i] + [uxbox.ui.users :as ui.u] + ;; [uxbox.ui.lightbox :refer [lightbox + ;; render-lightbox + ;; set-lightbox! + ;; close-lightbox!]] + ;; [uxbox.ui.activity :refer [timeline]] + [uxbox.ui.icons.dashboard :as icons] + ;; [uxbox.projects.queries :as q] + ;; [uxbox.projects.actions :as actions] + [uxbox.time :refer [ago]])) + +(def lightbox (constantly nil)) +(def render-lightbox (constantly nil)) +(def set-lightbox! (constantly nil)) +(def close-lightbox! (constantly nil)) + +;; Config +;; TODO: i18nized names +(def project-orderings {:project/name "name" + :project/last-updated "date updated" + :project/created "date created"}) + +(def project-layouts {:mobile {:name "Mobile" + :id "mobile" + :width 320 + :height 480} + :tablet {:name "Tablet" + :id "tablet" + :width 1024 + :height 768} + :notebook {:name "Notebook" + :id "notebook" + :width 1366 + :height 768} + :desktop {:name "Desktop" + :id "desktop" + :width 1920 + :height 1080}}) + +(def new-project-defaults {:name "" + :width 1920 + :height 1080 + :layout :desktop}) + +(def name->order (into {} (for [[k v] project-orderings] [v k]))) + +;; Views + +(defn layout-input + [layout new-project] + (let [human-name (get-in project-layouts [layout :name]) + id (str "project-" (get-in project-layouts [layout :id])) + tag (str "input#" id) + tag (keyword tag)] + [[tag + {:type "radio" + :key id + :name "project-layout" + :value human-name + :checked (= layout (:layout @new-project)) + :on-change #(swap! new-project merge {:layout layout + :width (get-in project-layouts [layout :width]) + :height (get-in project-layouts [layout :height])})}] + [:label + {:value name + :for id} + human-name]])) + +(rum/defc layout-selector + [new-project] + (vec (cons :div.input-radio.radio-primary + (mapcat #(layout-input % new-project) (keys project-layouts))))) + +(rum/defcs new-project-lightbox < (rum/local new-project-defaults :new-project) + [{:keys [new-project]} conn] + (let [{:keys [name width height layout]} @new-project] + [:div.lightbox-body + [:h3 "New project"] + [:form + {:on-submit (fn [e] + (.preventDefault e) + (let [new-project-attributes {:name (trim name) + :width (int width) + :height (int height) + :layout layout}] + ;; (actions/create-project conn new-project-attributes) + (close-lightbox!)))} + [:input#project-name.input-text + {:placeholder "New project name" + :type "text" + :value name + :auto-focus true + :on-change #(swap! new-project assoc :name (.-value (.-target %)))}] + [:div.project-size + [:input#project-witdh.input-text + {:placeholder "Width" + :type "number" + :min 0 ;;TODO check this value + :max 666666 ;;TODO check this value + :value width + :on-change #(swap! new-project assoc :width (.-value (.-target %)))}] + [:a.toggle-layout + {:href "#" + :on-click #(swap! new-project assoc :width height :height width)} + i/toggle] + [:input#project-height.input-text + {:placeholder "Height" + :type "number" + :min 0 ;;TODO check this value + :max 666666 ;;TODO check this value + :value height + :on-change #(swap! new-project assoc :height (.-value (.-target %)))}]] + ;; Layout selector + (layout-selector new-project) + ;; Submit + (when-not (empty? (trim name)) + [:input#project-btn.btn-primary + {:value "Go go go!" + :type "submit"}])] + [:a.close + {:href "#" + :on-click #(close-lightbox!)} + i/close]])) + +;; (defmethod render-lightbox :new-project +;; [_ conn] +;; (new-project-lightbox conn)) + +(rum/defc header + [] + [:header#main-bar.main-bar + [:div.main-logo + (nav/link "/" i/logo)] + (ui.u/user)]) + +(rum/defc project-count < rum/static + [n] + [:span.dashboard-projects n " projects"]) + +(rum/defc project-sort-selector < rum/reactive + [sort-order] + (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])])) + +(rum/defc dashboard-bar + [] + [:section#dashboard-bar.dashboard-bar + [:div.dashboard-info + (project-count 0) + [:span "Sort by"] + (project-sort-selector (atom :name))] + [:div.dashboard-search + icons/search]]) + +(rum/defc project-card < rum/static + [conn + {uuid :project/uuid + last-update :project/last-updated + name :project/name + pages :project/pages + comment-count :project/comment-count}] + [:div.grid-item.project-th + {:on-click #(r/go :project {:project-uuid uuid}) + :key uuid} + [:h3 + name] + [:span.project-th-update "Updated " (ago last-update)] + [:div.project-th-actions + [:div.project-th-icon.pages + icons/page + [:span pages]] + [:div.project-th-icon.comments + i/chat + [:span comment-count]] + [:div.project-th-icon.delete + {:on-click #(do (.stopPropagation %) + ;; (actions/delete-project conn uuid) + %)} + icons/trash]]]) + +(rum/defc new-project < rum/static + [] + [:div.grid-item.add-project + {:on-click #(set-lightbox! :new-project)} + [:span "+ New project"]]) + +;; (defn sorted-projects +;; [projects sort-order] +;; (let [project-cards (map (partial project-card conn) (sort-by sort-order projects))] +;; (if (= sort-order :project/name) +;; project-cards +;; (reverse project-cards)))) + +(rum/defc dashboard-grid < rum/reactive + [projects sort-order] + [:section.dashboard-grid + [:h2 "Your projects"] + [:div.dashboard-grid-content + (vec + (concat [:div.dashboard-grid-content + (new-project)] + #_(sorted-projects projects + (rum/react sort-order))))]]) + +(defn dashboard-render + [own] + (println "2222") + (html + [:main.dashboard-main + (header) + [:section.dashboard-content + #_(dashboard-bar sort-order @project-count) + (dashboard-bar) + (dashboard-grid [] (atom :name))] + #_(timeline conn)])) + + +(def dashboard + (util/component {:render dashboard-render + :mixins [rum/reactive] + :name "dashboard"})) + +;; (rum/defc dashboard +;; [conn] +;; [:div +;; (dashboard* conn) +;; #_(lightbox conn)]) diff --git a/frontend/uxbox/ui/users.cljs b/frontend/uxbox/ui/users.cljs index 3a8fee4f7..e0fc634f6 100644 --- a/frontend/uxbox/ui/users.cljs +++ b/frontend/uxbox/ui/users.cljs @@ -1,5 +1,6 @@ (ns uxbox.ui.users (:require [rum.core :as rum] + [uxbox.router :as r] ;; [uxbox.users.queries :as q] ;; [uxbox.ui.mixins :as mx] [uxbox.ui.icons :as icons] @@ -25,8 +26,13 @@ icons/exit [:span "Save & Exit"]]]) +;; FIXME this is a temporal +(def current-user (atom {:user/fullname "Cirilla" + :user/avatar "http://lorempixel.com/50/50/"})) +(def menu-open? (atom false)) + (rum/defcs user < (rum/local false :menu-open?) - [{:keys [menu-open? current-user]} conn] + [own] (let [usr @current-user] [:div.user-zone {:on-mouse-enter #(reset! menu-open? true) :on-mouse-leave #(reset! menu-open? false)} @@ -54,10 +60,10 @@ {:name "login" :value "Continue" :type "submit" - :on-click #(nav/navigate! :dashboard)}] + :on-click #(r/go :main/dashboard)}] [:div.login-links [:a - {:on-click #(nav/navigate! :login)} + {:on-click #(r/go :auth/login)} "You already have an account?"]]]) (rum/defc register < rum/static @@ -78,13 +84,13 @@ {:name "login" :value "Continue" :type "submit" - :on-click #(nav/navigate! :dashboard)}] + :on-click #(r/go :main/dashboard)}] [:div.login-links [:a - {:on-click #(nav/navigate! :login)} + {:on-click #(r/go :auth/login)} "You have remembered your password?"] [:a - {:on-click #(nav/navigate! :register)} + {:on-click #(r/go :auth/register)} "Don't have an account?"]]]) (rum/defc recover-password < rum/static @@ -113,10 +119,10 @@ {:name "login" :value "Continue" :type "submit" - :on-click #(nav/navigate! :dashboard)}] + :on-click #(r/go :main/dashboard)}] [:div.login-links - [:a {:on-click #(nav/navigate! :recover-password)} "Forgot your password?"] - [:a {:on-click #(nav/navigate! :register)} "Don't have an account?"]]]) + [:a {:on-click #(r/go :auth/recover-password)} "Forgot your password?"] + [:a {:on-click #(r/go :auth/register)} "Don't have an account?"]]]) (rum/defc login []