From 6c08bd42651b73c1d6c175c5a08fa2912dd51f85 Mon Sep 17 00:00:00 2001
From: Sam <sam.saffron@gmail.com>
Date: Wed, 26 Aug 2015 13:10:50 +1000
Subject: [PATCH] UX: improve hamburger in desktop

- dock underneath header
- click anywhere to get it to go away
---
 .../discourse/components/hamburger-menu.js.es6 | 18 ++++++++++++++++++
 .../discourse/templates/application.hbs        |  2 +-
 .../templates/components/hamburger-menu.hbs    |  4 +++-
 .../stylesheets/common/base/hamburger.scss     |  5 +++--
 app/assets/stylesheets/desktop.scss            |  1 +
 app/assets/stylesheets/desktop/hamburger.scss  |  8 ++++++++
 app/assets/stylesheets/mobile/hamburger.scss   |  0
 7 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 app/assets/stylesheets/desktop/hamburger.scss
 create mode 100644 app/assets/stylesheets/mobile/hamburger.scss

diff --git a/app/assets/javascripts/discourse/components/hamburger-menu.js.es6 b/app/assets/javascripts/discourse/components/hamburger-menu.js.es6
index 92a0e5c1f4a..9dc957ed8c0 100644
--- a/app/assets/javascripts/discourse/components/hamburger-menu.js.es6
+++ b/app/assets/javascripts/discourse/components/hamburger-menu.js.es6
@@ -4,6 +4,23 @@ export default Ember.Component.extend({
   classNameBindings: ['visible::slideright'],
   elementId: 'hamburger-menu',
 
+  visibilityChanged: function(){
+    if(this.get("visible")) {
+      $('html').on('click.close-humburger', (e) => {
+        const $target = $(e.target);
+        if ($target.closest('.dropdown.categories').length > 0) {
+          return;
+        }
+        console.log(e.toElement || e.relatedTarget || e.target);
+        this.set("visible", false);
+        $('html').off('click.close-humburger');
+        return true;
+      });
+    } else {
+      $('html').off('click.close-humburger');
+    }
+  }.observes("visible"),
+
   @computed()
   showKeyboardShortcuts() {
     return !Discourse.Mobile.mobileView && !this.capabilities.touch;
@@ -43,6 +60,7 @@ export default Ember.Component.extend({
     $('body').off('keydown.discourse-hambuger');
     $('body').off('swipeleft.discourse-hamburger');
     $('body').off('swiperight.discourse-hamburger');
+    $('body').off('click.close-humburger');
   },
 
   @computed()
diff --git a/app/assets/javascripts/discourse/templates/application.hbs b/app/assets/javascripts/discourse/templates/application.hbs
index 3a3eb195586..24926f44871 100644
--- a/app/assets/javascripts/discourse/templates/application.hbs
+++ b/app/assets/javascripts/discourse/templates/application.hbs
@@ -1,4 +1,5 @@
 {{render "header"}}
+{{hamburger-menu visible=hamburgerVisible showKeyboardAction="showKeyboardShortcutsHelp"}}
 
 <div id="main-outlet" class="wrap">
   <div class="container">
@@ -19,4 +20,3 @@
 {{render "topic-entrance"}}
 {{render "composer"}}
 
-{{hamburger-menu visible=hamburgerVisible showKeyboardAction="showKeyboardShortcutsHelp"}}
diff --git a/app/assets/javascripts/discourse/templates/components/hamburger-menu.hbs b/app/assets/javascripts/discourse/templates/components/hamburger-menu.hbs
index 58e2b1150ed..b85ffb0b92c 100644
--- a/app/assets/javascripts/discourse/templates/components/hamburger-menu.hbs
+++ b/app/assets/javascripts/discourse/templates/components/hamburger-menu.hbs
@@ -1,5 +1,7 @@
 {{#if visible}}
-  <a href {{action "close"}} class='close-hamburger'>{{fa-icon 'times'}}</a>
+  <div class='hamburger-header clearfix'>
+    <a href {{action "close"}} class='close-hamburger'>{{fa-icon 'times'}}</a>
+  </div>
   <ul class="location-links">
     {{#if currentUser.staff}}
       <li>
diff --git a/app/assets/stylesheets/common/base/hamburger.scss b/app/assets/stylesheets/common/base/hamburger.scss
index b73a8b4a1d9..ca61474f796 100644
--- a/app/assets/stylesheets/common/base/hamburger.scss
+++ b/app/assets/stylesheets/common/base/hamburger.scss
@@ -9,7 +9,7 @@
   transition: 0.3s ease-in-out;
   @include transform(translateX(0));
 
-  box-shadow: 4px 0 4px 5px rgba(0,0,0, .25);
+  box-shadow: 0 4px 4px 4px rgba(0,0,0, .25);
   padding: 0.5em 0.5em 0.5em 0.5em;
   width: 300px;
 
@@ -17,10 +17,11 @@
     float: right;
     color: dark-light-choose(scale-color($header_primary, $lightness: 50%), $header_primary);
     font-size: 1.5em;
-    margin-right: 0.1em;
+    margin-right: 0.5em;
     margin-top: 0.1em;
   }
 
+
   ul {
     list-style: none;
     margin: 0;
diff --git a/app/assets/stylesheets/desktop.scss b/app/assets/stylesheets/desktop.scss
index 426146d3bea..929f4727b93 100644
--- a/app/assets/stylesheets/desktop.scss
+++ b/app/assets/stylesheets/desktop.scss
@@ -17,6 +17,7 @@
 @import "desktop/user";
 @import "desktop/history";
 @import "desktop/queued-posts";
+@import "desktop/hamburger";
 
 /* These files doesn't actually exist, they are injected by DiscourseSassImporter. */
 
diff --git a/app/assets/stylesheets/desktop/hamburger.scss b/app/assets/stylesheets/desktop/hamburger.scss
new file mode 100644
index 00000000000..d883ab25018
--- /dev/null
+++ b/app/assets/stylesheets/desktop/hamburger.scss
@@ -0,0 +1,8 @@
+.docked #hamburger-menu {
+  position: fixed;
+}
+
+#hamburger-menu {
+  position: absolute;
+  top: 63px
+}
diff --git a/app/assets/stylesheets/mobile/hamburger.scss b/app/assets/stylesheets/mobile/hamburger.scss
new file mode 100644
index 00000000000..e69de29bb2d