From 95f4c0f5835e23716f7335b0a8ea52418ae93157 Mon Sep 17 00:00:00 2001
From: verg <ryanvergeront@gmail.com>
Date: Tue, 11 Feb 2014 20:56:49 -0500
Subject: [PATCH] Add User dropdown menu to Header

---
 .../controllers/user_dropdown_controller.js   | 10 ++++++++
 .../discourse/templates/header.js.handlebars  | 13 +++++++++--
 .../templates/user_dropdown.js.handlebars     | 11 +++++++++
 app/assets/stylesheets/desktop/header.scss    | 12 ++++++++++
 app/assets/stylesheets/mobile/header.scss     | 10 ++++++++
 .../user_dropdown_controller_test.js          | 23 +++++++++++++++++++
 test/javascripts/integration/header_test.js   | 19 +++++++++++++++
 7 files changed, 96 insertions(+), 2 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/controllers/user_dropdown_controller.js
 create mode 100644 app/assets/javascripts/discourse/templates/user_dropdown.js.handlebars
 create mode 100644 test/javascripts/controllers/user_dropdown_controller_test.js

diff --git a/app/assets/javascripts/discourse/controllers/user_dropdown_controller.js b/app/assets/javascripts/discourse/controllers/user_dropdown_controller.js
new file mode 100644
index 000000000..4110dd01c
--- /dev/null
+++ b/app/assets/javascripts/discourse/controllers/user_dropdown_controller.js
@@ -0,0 +1,10 @@
+Discourse.UserDropdownController = Ember.ArrayController.extend(Discourse.HasCurrentUser, {
+  showAdminLinks: Em.computed.alias("currentUser.staff"),
+
+  actions: {
+    logout: function() {
+      Discourse.logout();
+      return false;
+    }
+  }
+});
diff --git a/app/assets/javascripts/discourse/templates/header.js.handlebars b/app/assets/javascripts/discourse/templates/header.js.handlebars
index 0b5601e5a..e850f5fd8 100644
--- a/app/assets/javascripts/discourse/templates/header.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/header.js.handlebars
@@ -89,9 +89,16 @@
             <a href='/admin/flags/active' title='{{i18n notifications.total_flagged}}' class='badge-notification flagged-posts'>{{currentUser.site_flagged_posts_count}}</a>
           {{/if}}
         </li>
-        <li class='current-user'>
+        <li class='current-user dropdown'>
           {{#if currentUser}}
-            {{#titledLinkTo 'userActivity.index' currentUser titleKey="current_user" class="icon"}}{{boundAvatar currentUser imageSize="medium" }}{{/titledLinkTo}}
+            <a class='icon'
+               data-dropdown="user-dropdown"
+               data-render="renderUserDropdown"
+               href="#"
+               title='{{i18n user.avatar.title}}'
+               id="current-user">
+                 {{boundAvatar currentUser imageSize="medium" }}
+            </a>
           {{else}}
             <div class="icon not-logged-in-avatar" {{action showLogin}}><i class='fa fa-user' title='{{i18n not_logged_in_user}}'></i></div>
           {{/if}}
@@ -106,6 +113,8 @@
         {{render siteMap}}
       {{/if}}
 
+      {{ render userDropdown }}
+
     </div>
   </div>
 </div>
diff --git a/app/assets/javascripts/discourse/templates/user_dropdown.js.handlebars b/app/assets/javascripts/discourse/templates/user_dropdown.js.handlebars
new file mode 100644
index 000000000..4791a2f5d
--- /dev/null
+++ b/app/assets/javascripts/discourse/templates/user_dropdown.js.handlebars
@@ -0,0 +1,11 @@
+<section class='d-dropdown' id='user-dropdown'>
+  <ul class='user-dropdown-links'>
+    <li>{{#link-to 'userActivity' currentUser class="user-activity-link" }}{{i18n activity}}{{/link-to}}</li>
+    {{#if showAdminLinks}}
+      <li>{{#link-to 'adminUser' currentUser.username }}{{i18n admin_title}}{{/link-to}}</li>
+    {{/if}}
+    <li>{{#link-to 'userPrivateMessages.index' currentUser}}{{i18n user.private_messages}}{{/link-to}}</li>
+    <li>{{#link-to 'preferences' currentUser}}{{i18n user.preferences}}{{/link-to}}</li>
+    <li><button {{action "logout"}} class='btn btn-danger right logout'><i class='fa fa-sign-out'></i>{{i18n user.log_out}}</button></li>
+  </ul>
+</section>
diff --git a/app/assets/stylesheets/desktop/header.scss b/app/assets/stylesheets/desktop/header.scss
index 4275cbf08..7cdd0fde4 100644
--- a/app/assets/stylesheets/desktop/header.scss
+++ b/app/assets/stylesheets/desktop/header.scss
@@ -237,4 +237,16 @@
     background-color: transparent;
     line-height: 20px;
   }
+
+  &#user-dropdown {
+    width: 154px;
+  }
+
+  .btn {
+    padding: 2px 8px;
+    margin-bottom: 2px;
+    .fa {
+      margin-right: 5px;
+    }
+  }
 }
diff --git a/app/assets/stylesheets/mobile/header.scss b/app/assets/stylesheets/mobile/header.scss
index 6ff15754d..791625111 100644
--- a/app/assets/stylesheets/mobile/header.scss
+++ b/app/assets/stylesheets/mobile/header.scss
@@ -240,4 +240,14 @@
     line-height: 20px;
   }
 
+  &#user-dropdown {
+    width: 154px;
+  }
+
+  .btn {
+    padding: 2px 8px;
+    .fa {
+      margin-right: 5px;
+    }
+  }
 }
diff --git a/test/javascripts/controllers/user_dropdown_controller_test.js b/test/javascripts/controllers/user_dropdown_controller_test.js
new file mode 100644
index 000000000..05855d00e
--- /dev/null
+++ b/test/javascripts/controllers/user_dropdown_controller_test.js
@@ -0,0 +1,23 @@
+module("Discourse.UserDropdownController");
+
+test("logout action logs out the current user", function () {
+  var logout_mock = sinon.mock(Discourse, "logout");
+  logout_mock.expects("logout").once();
+
+  var controller = Discourse.UserDropdownController.create();
+  controller.send("logout");
+
+  logout_mock.verify();
+});
+
+test("showAdminLinks", function() {
+  var currentUserStub = Ember.Object.create();
+  this.stub(Discourse.User, "current").returns(currentUserStub);
+
+  var controller = Discourse.UserDropdownController.create();
+  currentUserStub.set("staff", true);
+  equal(controller.get("showAdminLinks"), true, "is true when current user is a staff member");
+
+  currentUserStub.set("staff", false);
+  equal(controller.get("showAdminLinks"), false, "is false when current user is not a staff member");
+});
diff --git a/test/javascripts/integration/header_test.js b/test/javascripts/integration/header_test.js
index 746406559..987e32ddb 100644
--- a/test/javascripts/integration/header_test.js
+++ b/test/javascripts/integration/header_test.js
@@ -171,3 +171,22 @@ test("search dropdown", function() {
     equal(find("#search-dropdown .selected a").attr("href"), "another-url", "after clicking 'more of type' link, results are reloaded");
   });
 });
+
+test("user dropdown when logged in", function() {
+  expect(3);
+
+  var userDropdownSelector = "#user-dropdown";
+
+  visit("/")
+  .then(function() {
+    not(exists(userDropdownSelector + ":visible"), "initially user dropdown is closed");
+  })
+  .click("#current-user")
+  .then(function() {
+    var $userDropdown = $(userDropdownSelector);
+
+    ok(exists(userDropdownSelector + ":visible"), "is lazily rendered after user opens it");
+
+    ok(exists($userDropdown.find(".user-dropdown-links")), "has showing / hiding user-dropdown links correctly bound");
+  });
+});