From cb7b4164ab4d83edf3227525a19b7525de3bc9e1 Mon Sep 17 00:00:00 2001
From: Sacha Greif <sacha357@gmail.com>
Date: Wed, 8 Apr 2015 11:57:53 +0900
Subject: [PATCH] collapse user menu by default

---
 client/components/menu/menu.scss                | 17 ++++++++++++++++-
 client/components/menu/menu_component.html      |  3 +++
 client/components/menu/menu_component.js        | 12 ++++++++----
 client/views/nav/user_menu.html                 |  2 +-
 .../client/templates/notifications_menu.html    |  2 +-
 .../client/scss/specific/_notifications.scss    | 14 --------------
 6 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/client/components/menu/menu.scss b/client/components/menu/menu.scss
index f561501d6..7d77b13a8 100644
--- a/client/components/menu/menu.scss
+++ b/client/components/menu/menu.scss
@@ -50,6 +50,7 @@ $text: #444444;
 .menu-top-label{
   cursor: pointer;
 }
+
 // ------------------------------------ List ------------------------------------ //
 
 .menu-list{
@@ -166,7 +167,7 @@ $text: #444444;
       display: none;
     }
   }
-  &.menu-long .show-more{
+  &.menu-show-more .show-more{
     display: block; // only show the "show more" button if the menu has more than three items
   }
   &.menu-open{
@@ -187,4 +188,18 @@ $text: #444444;
   &.menu-open .menu-contents{
     max-height: 999px !important;
   }
+  &.menu-collapsed{
+    .menu-contents{
+      max-height: 0px;
+      .dropdown-item:first-child{
+        padding-top: 10px;
+      }
+    }
+    .show-more{
+      margin-top: -1px;
+    }
+    &.menu-has-items .show-more{
+      display: block; // show the "show more" button if the menu has any items
+    }
+  }
 }
\ No newline at end of file
diff --git a/client/components/menu/menu_component.html b/client/components/menu/menu_component.html
index dc997594b..cda8f15e5 100644
--- a/client/components/menu/menu_component.html
+++ b/client/components/menu/menu_component.html
@@ -24,6 +24,9 @@ menuLabel (String) [optional]
 menuClass (String) [optional]
 | An optional default CSS class given to the menu
 
+- menuCollapsed (Boolean) [optional]
+| whether the menu should start out collapsed (only useful for accordion menus)
+
 menuMode (String) [optional]
 | "accordion", "dropdown", or "list" (defaults to "list")
 
diff --git a/client/components/menu/menu_component.js b/client/components/menu/menu_component.js
index e311dd762..95a2597a0 100644
--- a/client/components/menu/menu_component.js
+++ b/client/components/menu/menu_component.js
@@ -28,21 +28,25 @@ Template[getTemplate('menuComponent')].helpers({
 
     classes.push("menu-"+mode);
 
-    if(!!this.menuClass) {
+    if (!!this.menuClass) {
       classes.push(this.menuClass)
     }
 
-    // enable menu if top-nav layout is enabled, if themes supports menus, and if menu isn't empty
+    if (this.menuCollapsed) {
+      classes.push("menu-collapsed");
+      classes.push("menu-show-more");
+    }
+
     if (count) {
       classes.push("menu-has-items");
       if (count > 3) {
-        classes.push("menu-long");
+        classes.push("menu-show-more");
       }
     } else {
       classes.push("menu-no-items");
     }
 
-    return classes.join(" ");
+    return _.unique(classes).join(" ");
   },
   menuLabel: function () {
     // if label is defined, use this. Else default to menu name
diff --git a/client/views/nav/user_menu.html b/client/views/nav/user_menu.html
index 55000598f..d56f11101 100644
--- a/client/views/nav/user_menu.html
+++ b/client/views/nav/user_menu.html
@@ -1,6 +1,6 @@
 <template name="userMenu">
   {{#if isLoggedIn}}
-    {{> menuComponent menuName="user" menuLabel=menuLabel menuItems=menuItems menuClass="header-submodule" menuMode=menuMode}}
+    {{> menuComponent menuName="user" menuLabel=menuLabel menuItems=menuItems menuClass="header-submodule" menuMode=menuMode menuCollapsed=true}}
   {{else}}
     <a class="account-link sign-in" href="{{pathFor route='atSignUp'}}">{{_ "sign_up"}}</a>
     <a class="account-link sign-up" href="{{pathFor route='atSignIn'}}">{{_ "sign_in"}}</a>
diff --git a/packages/telescope-notifications/lib/client/templates/notifications_menu.html b/packages/telescope-notifications/lib/client/templates/notifications_menu.html
index 857effde3..2cd4101f1 100644
--- a/packages/telescope-notifications/lib/client/templates/notifications_menu.html
+++ b/packages/telescope-notifications/lib/client/templates/notifications_menu.html
@@ -1,5 +1,5 @@
 <template name="notificationsMenu">
   {{#if isLoggedIn}}
-    {{> menuComponent menuName="notifications" menuLabel=menuLabel menuItems=menuItems menuClass="header-submodule" menuMode=menuMode}}
+    {{> menuComponent menuName="notifications" menuLabel=menuLabel menuItems=menuItems menuClass="header-submodule" menuMode=menuMode menuCollapsed=true}}
   {{/if}}
 </template>
\ No newline at end of file
diff --git a/packages/telescope-theme-base/lib/client/scss/specific/_notifications.scss b/packages/telescope-theme-base/lib/client/scss/specific/_notifications.scss
index ec0d11020..db426a05c 100644
--- a/packages/telescope-theme-base/lib/client/scss/specific/_notifications.scss
+++ b/packages/telescope-theme-base/lib/client/scss/specific/_notifications.scss
@@ -1,17 +1,3 @@
 .notification-item{
   margin-bottom: 10px;
 }
-.notifications-menu.menu-accordion{
-  .menu-contents{
-    max-height: 0px;
-    .dropdown-item:first-child{
-      padding-top: 10px;
-    }
-  }
-  .show-more{
-    margin-top: -1px;
-  }
-  &.menu-has-items .show-more{
-    display: block; // show the "show more" button if the menu has any items
-  }
-}