Merge pull request #1937 from verg/user_dropdown

Add User Avatar Dropdown

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;
+    }
+  }
+});

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>

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>

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;
+    }
+  }
 }

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;
+    }
+  }
 }

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");
+});

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");
+  });
+});