Add new header to profile.

src/uxbox/ui/settings/header.cljs

@@ -0,0 +1,57 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
+;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+
+(ns uxbox.ui.settings.header
+  (:require [sablono.core :as html :refer-macros [html]]
+            [rum.core :as rum]
+            [lentes.core :as l]
+            [uxbox.locales :refer (tr)]
+            [uxbox.router :as r]
+            [uxbox.rstore :as rs]
+            [uxbox.state :as st]
+            [uxbox.data.projects :as dp]
+            [uxbox.ui.navigation :as nav]
+            [uxbox.ui.icons :as i]
+            [uxbox.ui.users :refer (user)]
+            [uxbox.ui.mixins :as mx]))
+
+(def ^:private section-l
+  (-> (l/in [:route :id])
+      (l/focus-atom st/state)))
+
+(defn- header-link
+  [section content]
+  (let [link (r/route-for section)]
+    (html
+     [:a {:href (str "/#" link)} content])))
+
+(defn header-render
+  [own]
+  (let [section (rum/react section-l)
+        profile? (= section :settings/profile)
+        password? (= section :settings/password)
+        notifications? (= section :settings/notifications)]
+    (println "header-render" section)
+    (html
+     [:header#main-bar.main-bar
+      [:div.main-logo
+       (header-link :dashboard/projects i/logo)]
+      [:ul.main-nav
+       [:li {:class (when profile? "current")}
+        (header-link :settings/profile (tr "settings.profile"))]
+       [:li {:class (when password? "current")}
+        (header-link :settings/password (tr "settings.password"))]
+       [:li {:class (when notifications? "current")}
+        (header-link :settings/notifications (tr "settings.notifications"))]]
+      (user)])))
+
+(def header
+  (mx/component
+   {:render header-render
+    :name "header"
+    :mixins [rum/static
+             rum/reactive]}))

src/uxbox/ui/settings/notifications.cljs

@@ -15,7 +15,7 @@
             [uxbox.ui.mixins :as mx]
             [uxbox.util.dom :as dom]
             [uxbox.data.dashboard :as dd]
-            [uxbox.ui.dashboard.header :refer (header)]))
+            [uxbox.ui.settings.header :refer (header)]))
 
 (defn notifications-page-render
   [own]
@@ -23,12 +23,6 @@
    [:main.dashboard-main
     (header)
     [:section.dashboard-content.user-settings
-     [:div.user-settings-nav
-      [:ul.user-settings-nav-inside
-       [:li {:on-click #(r/go :settings/profile)} "Profile"]
-       [:li {:on-click #(r/go :settings/password)} "Password"]
-       [:li.current {:on-click #(r/go :settings/notifications)} "Notifications"]]]
-
      [:section.user-settings-content
       [:span.user-settings-label "Prototype notifications"]
       [:p "Get a roll up of prototype changes in your inbox."]

src/uxbox/ui/settings/password.cljs

@@ -21,7 +21,7 @@
             [uxbox.ui.forms :as forms]
             [uxbox.ui.messages :as uum]
             [uxbox.ui.mixins :as mx]
-            [uxbox.ui.dashboard.header :refer (header)]
+            [uxbox.ui.settings.header :refer (header)]
             [uxbox.util.dom :as dom]))
 
 ;; --- Password Form
@@ -93,12 +93,6 @@
     (header)
     (uum/messages)
     [:section.dashboard-content.user-settings
-     [:div.user-settings-nav
-      [:ul.user-settings-nav-inside
-       [:li {:on-click #(r/go :settings/profile)} "Profile"]
-       [:li.current {:on-click #(r/go :settings/password)} "Password"]
-       [:li {:on-click #(r/go :settings/notifications)} "Notifications"]]]
-
      [:section.user-settings-content
       (password-form)]]]))
 

src/uxbox/ui/settings/profile.cljs

@@ -17,7 +17,7 @@
             [uxbox.ui.icons :as i]
             [uxbox.ui.mixins :as mx]
             [uxbox.ui.forms :as forms]
-            [uxbox.ui.dashboard.header :refer (header)]
+            [uxbox.ui.settings.header :refer (header)]
             [uxbox.ui.messages :as uum]
             [uxbox.data.users :as udu]
             [uxbox.data.forms :as udf]
@@ -53,15 +53,7 @@
     (letfn [(on-change [field event]
               (let [value (dom/event->value event)]
                 (rs/emit! (assign-field-value field value))))
-
-            ;; (on-theme-change [event]
-            ;;   (let [value (dom/event->value event)]
-            ;;     (println "on-theme-change" value)
-            ;;     (swap! local assoc-in [:metadata :theme] value)))
-
-
             (on-submit [event]
-              ;; (println form)
               (rs/emit! (udu/update-profile form)))]
       (html
        [:form.profile-form
@@ -134,11 +126,6 @@
     (header)
     (uum/messages)
     [:section.dashboard-content.user-settings
-     [:div.user-settings-nav
-      [:ul.user-settings-nav-inside
-       [:li.current {:on-click #(r/go :settings/profile)} "Profile"]
-       [:li {:on-click #(r/go :settings/password)} "Password"]
-       [:li {:on-click #(r/go :settings/notifications)} "Notifications"]]]
      [:section.user-settings-content
       [:span.user-settings-label "Your avatar"]
       [:form.avatar-form