From edac830371ad8061b2fb16ec381df6167cbc5b47 Mon Sep 17 00:00:00 2001
From: Toby Zerner <toby.zerner@gmail.com>
Date: Thu, 12 Mar 2015 12:59:32 +1030
Subject: [PATCH] Add user profile side nav

---
 ember/app/models/user.js               |  2 +-
 ember/app/router.js                    |  3 ++-
 ember/app/routes/user.js               |  6 +++++
 ember/app/styles/flarum/dropdowns.less | 27 ++++++++++++++++++++
 ember/app/styles/flarum/index.less     | 33 ++++++------------------
 ember/app/templates/index.hbs          |  2 +-
 ember/app/templates/user.hbs           |  2 +-
 ember/app/views/user.js                | 35 +++++++++++++++++++++++++-
 8 files changed, 80 insertions(+), 30 deletions(-)

diff --git a/ember/app/models/user.js b/ember/app/models/user.js
index 3b8039a64..5235b9a3f 100644
--- a/ember/app/models/user.js
+++ b/ember/app/models/user.js
@@ -20,7 +20,7 @@ export default DS.Model.extend(HasItemLists, {
   readTime: DS.attr('date'),
 
   discussionsCount: DS.attr('number'),
-  postsCount: DS.attr('number'),
+  commentsCount: DS.attr('number'),
 
   canEdit: DS.attr('boolean'),
   canDelete: DS.attr('boolean'),
diff --git a/ember/app/router.js b/ember/app/router.js
index 33a4c27a2..2f8398d42 100644
--- a/ember/app/router.js
+++ b/ember/app/router.js
@@ -13,7 +13,8 @@ Router.map(function() {
   });
 
   this.resource('user', {path: '/u/:username'}, function() {
-    this.route('activity');
+    this.route('activity', {path: '/'});
+    this.route('discussions');
     this.route('posts');
     this.route('edit');
   });
diff --git a/ember/app/routes/user.js b/ember/app/routes/user.js
index d4efb89ca..77c199a0e 100644
--- a/ember/app/routes/user.js
+++ b/ember/app/routes/user.js
@@ -3,5 +3,11 @@ import Ember from 'ember';
 export default Ember.Route.extend({
   model: function(params) {
     return this.store.find('user', params.username);
+  },
+
+  afterModel: function(model) {
+    if (!model.get('joinTime')) {
+      return model.reload();
+    }
   }
 });
diff --git a/ember/app/styles/flarum/dropdowns.less b/ember/app/styles/flarum/dropdowns.less
index 2587fcd04..73da070e0 100644
--- a/ember/app/styles/flarum/dropdowns.less
+++ b/ember/app/styles/flarum/dropdowns.less
@@ -21,6 +21,11 @@
     margin: 10px 0;
     background-color: @fl-body-control-bg;
   }
+  & .count {
+    font-weight: bold;
+    font-size: 12px;
+    margin-left: 5px;
+  }
 }
 .dropdown-split.item-count-1 {
   & .btn {
@@ -105,3 +110,25 @@
     .box-shadow(none);
   }
 }
+
+.nav-list() {
+  & > li > a {
+    padding: 8px 0;
+    color: @fl-body-muted-color;
+
+    &:hover {
+      background: none;
+      color: @link-hover-color;
+    }
+
+    & .fa {
+      margin-right: 8px;
+      font-size: 15px;
+    }
+  }
+  & > li.active > a {
+    background: none;
+    color: @fl-body-primary-color;
+    font-weight: bold;
+  }
+}
diff --git a/ember/app/styles/flarum/index.less b/ember/app/styles/flarum/index.less
index db21897ed..91f992b77 100644
--- a/ember/app/styles/flarum/index.less
+++ b/ember/app/styles/flarum/index.less
@@ -1,7 +1,7 @@
 // ------------------------------------
 // Sidebar
 
-.index-nav > ul {
+.side-nav > ul {
   margin: 0;
   padding: 0;
   list-style: none;
@@ -13,41 +13,22 @@
 // larger than a phone, however, we need to affix the sidebar and expand the
 // .dropdown-select into a plain list.
 @media @tablet, @desktop, @desktop-hd {
-  .index-nav {
-    // Expand the dropdown-select component into a normal nav list
-    // @todo Extract this into a mixin as we'll probably need to do it elsewhere.
+  .side-nav {
+    // Expand the dropdown-select component into a normal nav list.
     & .dropdown-select {
       display: block;
 
       .expand-dropdown();
 
       & .dropdown-menu {
-        & > li > a {
-          padding: 8px 0;
-          color: @fl-body-muted-color;
-
-          &:hover {
-            background: none;
-            color: @link-hover-color;
-          }
-
-          & .fa {
-            margin-right: 8px;
-            font-size: 15px;
-          }
-        }
-        & > li.active > a {
-          background: none;
-          color: @fl-body-primary-color;
-          font-weight: bold;
-        }
+        .nav-list();
       }
     }
   }
 }
 
 @media @tablet {
-  .index-nav {
+  .side-nav {
     padding: 15px 0;
     white-space: nowrap;
     overflow: auto;
@@ -78,7 +59,7 @@
 }
 
 @media @desktop, @desktop-hd {
-  .index-nav {
+  .side-nav {
     float: left;
 
     &, & > ul {
@@ -94,6 +75,8 @@
         margin-bottom: 10px;
       }
     }
+  }
+  .index-nav {
     & .new-discussion {
       display: block;
       margin-bottom: 20px;
diff --git a/ember/app/templates/index.hbs b/ember/app/templates/index.hbs
index d703f65c4..1d0e0152f 100644
--- a/ember/app/templates/index.hbs
+++ b/ember/app/templates/index.hbs
@@ -6,7 +6,7 @@
 
   <div class="container">
 
-    <nav class="index-nav">
+    <nav class="side-nav index-nav">
       {{ui/item-list items=view.sidebar}}
     </nav>
 
diff --git a/ember/app/templates/user.hbs b/ember/app/templates/user.hbs
index c9421f2f9..fdada9a5a 100644
--- a/ember/app/templates/user.hbs
+++ b/ember/app/templates/user.hbs
@@ -1,7 +1,7 @@
 {{user/user-card user=model class="hero user-hero" editable=true controlsButtonClass="btn btn-default"}}
 
 <div class="container">
-  <nav class="user-nav">
+  <nav class="side-nav user-nav">
     {{ui/item-list items=view.sidebar}}
   </nav>
 
diff --git a/ember/app/views/user.js b/ember/app/views/user.js
index 9ad36642a..77b7b9980 100644
--- a/ember/app/views/user.js
+++ b/ember/app/views/user.js
@@ -1,7 +1,40 @@
 import Ember from 'ember';
 
 import HasItemLists from 'flarum/mixins/has-item-lists';
+import NavItem from 'flarum/components/ui/nav-item';
+import DropdownSelect from 'flarum/components/ui/dropdown-select';
+
+var precompileTemplate = Ember.Handlebars.compile;
 
 export default Ember.View.extend(HasItemLists, {
-  itemLists: ['sidebar']
+  itemLists: ['sidebar'],
+
+  populateSidebar: function(items) {
+    var nav = this.populateItemList('nav');
+    items.pushObjectWithTag(DropdownSelect.extend({items: nav, listItemClass: 'title-control'}), 'nav');
+  },
+
+  populateNav: function(items) {
+    items.pushObjectWithTag(NavItem.extend({
+      label: 'Activity',
+      icon: 'user',
+      layout: precompileTemplate('{{#link-to "user.activity"}}{{fa-icon icon}} {{label}}{{/link-to}}')
+    }), 'activity');
+
+    items.pushObjectWithTag(NavItem.extend({
+      label: 'Discussions',
+      icon: 'reorder',
+      badge: Ember.computed.alias('user.discussionsCount'),
+      user: this.get('controller.model'),
+      layout: precompileTemplate('{{#link-to "user.discussions"}}{{fa-icon icon}} {{label}} <span class="count">{{badge}}</span>{{/link-to}}')
+    }), 'discussions');
+
+    items.pushObjectWithTag(NavItem.extend({
+      label: 'Posts',
+      icon: 'comment-o',
+      badge: Ember.computed.alias('user.commentsCount'),
+      user: this.get('controller.model'),
+      layout: precompileTemplate('{{#link-to "user.posts"}}{{fa-icon icon}} {{label}} <span class="count">{{badge}}</span>{{/link-to}}')
+    }), 'posts');
+  }
 });