From b13e36a11ced9c63349cffce4ebbae2ce39b8014 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Mon, 26 Jan 2015 10:37:13 -1000
Subject: [PATCH] Style conversation menu

---
 conversation.html                   | 21 ++++++++++++--------
 js/views/conversation_view.js       |  7 ++++++-
 stylesheets/manifest.css            | 23 ++++++++++++++++++++++
 stylesheets/view/_conversation.scss | 30 +++++++++++++++++++++++++++++
 4 files changed, 72 insertions(+), 9 deletions(-)

diff --git a/conversation.html b/conversation.html
index dd2fff9d..96f497c3 100644
--- a/conversation.html
+++ b/conversation.html
@@ -15,14 +15,19 @@
         <div id='file-modal'></div>
         <script type='text/x-tmpl-mustache' id='conversation'>
             <div class='title-bar' id='header'>
-                {{#group}}
-                    <button class='new-group-update'>Update group</button>
-                    <button class='leave-group'>Leave group</button>
-                {{/group}}
-                {{^group}}
-                    <button class='end-session'>End Session</button>
-                {{/group}}
-                <button class='destroy'>Delete this conversation</button>
+                <div class='menu'>
+                  <button class='hamburger'></button>
+                  <ul class='menu-list'>
+                      {{#group}}
+                          <li><a class='new-group-update'>Update group</a></li>
+                          <li><a class='leave-group'>Leave group</a></li>
+                      {{/group}}
+                      {{^group}}
+                          <li><a class='end-session'>End Session</a></li>
+                      {{/group}}
+                      <li><a class='destroy'>Delete messages</a></li>
+                  </ul>
+                </div>
             </div>
 
             <div class='discussion-container'></div>
diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js
index b5a615aa..bb0f87e9 100644
--- a/js/views/conversation_view.js
+++ b/js/views/conversation_view.js
@@ -50,7 +50,12 @@
             'click .destroy': 'destroyMessages',
             'click .new-group-update': 'newGroupUpdate',
             'click .settings-btn': 'toggleSettings',
-            'click .go-back': 'toggleSettings'
+            'click .go-back': 'toggleSettings',
+            'click .hamburger': 'toggleMenu'
+        },
+
+        toggleMenu: function() {
+            this.$el.find('.menu-list').toggle();
         },
 
         newGroupUpdate: function() {
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 734553d3..61689fe1 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -134,6 +134,29 @@ body {
     outline: 0;
     color: white; }
 
+.menu {
+  position: relative;
+  float: left;
+  height: 36px;
+  line-height: 36px;
+  padding-left: 8px; }
+  .menu .hamburger {
+    width: 36px;
+    background: url("/images/menu.png") no-repeat center; }
+  .menu .menu-list {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin: 0;
+    padding: 0;
+    border: solid 1px #2a92e7; }
+    .menu .menu-list li {
+      display: block;
+      cursor: pointer;
+      white-space: nowrap;
+      padding: 5px; }
+
 button {
   cursor: pointer; }
 
diff --git a/stylesheets/view/_conversation.scss b/stylesheets/view/_conversation.scss
index b5e0f5f0..d94f0f5d 100644
--- a/stylesheets/view/_conversation.scss
+++ b/stylesheets/view/_conversation.scss
@@ -30,6 +30,36 @@ body {
     outline: 0;
     color: white;
   }
+
+}
+
+.menu {
+  position: relative;
+  float: left;
+  height: 36px;
+  line-height: 36px;
+  padding-left: 8px;
+
+  .hamburger {
+    width: 36px;
+    background: url('/images/menu.png') no-repeat center;
+  }
+  .menu-list {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin: 0;
+    padding: 0;
+    border: solid 1px $blue;
+
+    li {
+      display: block;
+      cursor: pointer;
+      white-space: nowrap;
+      padding: 5px;
+    }
+  }
 }