Moved MainHeader into its own Backbone View.

background.html

@@ -87,6 +87,12 @@
       <div class='lightbox-container'></div>
     </div>
   </script>
+  <script type='text/x-tmpl-mustache' id='main-header-placeholder'>
+    <div class='main-header-title-wrapper'>
+      <div class='main-header-content-toggle'/>
+    </div>
+    <div class='main-header-content-wrapper'><div>
+  </script>
   <script type='text/x-tmpl-mustache' id='scroll-down-button-view'>
     <button class='text module-scroll-down__button {{ buttonClass }}' alt='{{ moreBelow }}'>
       <div class='module-scroll-down__icon'></div>
@@ -652,6 +658,7 @@
   <script type='text/javascript' src='js/views/conversation_list_item_view.js'></script>
   <script type='text/javascript' src='js/views/conversation_list_view.js'></script>
   <script type='text/javascript' src='js/views/contact_list_view.js'></script>
+  <script type='text/javascript' src='js/views/main_header_view.js'></script>
   <script type='text/javascript' src='js/views/new_group_update_view.js'></script>
   <script type='text/javascript' src='js/views/attachment_view.js'></script>
   <script type='text/javascript' src='js/views/timestamp_view.js'></script>

js/views/inbox_view.js

@@ -104,16 +104,9 @@
       // eslint-disable-next-line no-new
       new Whisper.FontSizeView({ el: this.$el });
 
-      const ourNumber = textsecure.storage.user.getNumber();
-      const me = ConversationController.getOrCreate(ourNumber, 'private');
-      this.mainHeaderView = new Whisper.ReactWrapperView({
-        className: 'main-header-wrapper',
-        Component: Signal.Components.MainHeader,
-        props: me.format(),
+      this.mainHeaderView = new Whisper.MainHeaderView({
+        el: this.$('.main-header-placeholder'),
       });
-      const update = () => this.mainHeaderView.update(me.format());
-      this.listenTo(me, 'change', update);
-      this.$('.main-header-placeholder').append(this.mainHeaderView.el);
 
       this.conversation_stack = new Whisper.ConversationStack({
         el: this.$('.conversation-stack'),

js/views/main_header_view.js

@@ -0,0 +1,38 @@
+/* global Whisper, textsecure, ConversationController, Signal */
+
+// eslint-disable-next-line func-names
+(function() {
+    'use strict';
+
+    window.Whisper = window.Whisper || {};
+
+    Whisper.MainHeaderView = Whisper.View.extend({
+      templateName: 'main-header-placeholder',
+      events: {
+        'click .main-header-title-wrapper': 'onClick',
+      },
+      initialize() {
+        const ourNumber = textsecure.storage.user.getNumber();
+        const me = ConversationController.getOrCreate(ourNumber, 'private');
+
+        this.mainHeaderView = new Whisper.ReactWrapperView({
+          className: 'main-header-wrapper',
+          Component: Signal.Components.MainHeader,
+          props: me.format(),
+        });
+        const update = () => this.mainHeaderView.update(me.format());
+        this.listenTo(me, 'change', update);
+
+        this.render();
+
+        this.$('.main-header-title-wrapper').prepend(this.mainHeaderView.el);
+        this.$content = this.$('.main-header-content-wrapper');
+        this.$toggle = this.$('.main-header-content-toggle');
+      },
+      onClick() {
+        // Toggle section visibility
+        this.$content.slideToggle('fast');
+        this.$toggle.toggleClass('main-header-content-toggle-visible');
+      },
+    });
+  })();

stylesheets/_modules.scss

@@ -2180,6 +2180,23 @@
 
 // Module: Main Header
 
+.main-header-title-wrapper {
+  flex: 1;
+  flex-direction: row;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.main-header-title-wrapper:hover {
+  background-color: $color-dark-75;
+}
+
+.main-header-wrapper {
+  overflow-x: hidden;
+  flex: 1;
+}
+
 .module-main-header {
   height: $header-height;
   padding-left: 16px;
@@ -2187,14 +2204,9 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  cursor: pointer;
-}
-
-.module-main-header:hover {
-  background-color: $color-dark-75;
 }
 
-.module-main-header__expand-icon {
+.main-header-content-toggle{
   width: 3em;
   line-height: 3em;
   font-weight: bold;
@@ -2204,7 +2216,7 @@
   text-align: center;
 }
 
-.module-main-header__expand-icon::after {
+.main-header-content-toggle::after {
   -webkit-transition: all .35s;
   -o-transition: all .35s;
   transition: all .35s;
@@ -2215,7 +2227,7 @@
   display: inline-block;
 }
 
-.module-main-header__expanded::after {
+.main-header-content-toggle-visible::after {
   transform: rotate(180deg);
 }
 

test/index.html

@@ -374,6 +374,7 @@
   <script type='text/javascript' src='../js/views/conversation_list_item_view.js' data-cover></script>
   <script type='text/javascript' src='../js/views/conversation_list_view.js' data-cover></script>
   <script type='text/javascript' src='../js/views/contact_list_view.js' data-cover></script>
+  <script type='text/javascript' src='js/views/main_header_view.js'></script>
   <script type='text/javascript' src='../js/views/new_group_update_view.js' data-cover></script>
   <script type="text/javascript" src="../js/views/group_update_view.js"></script>
   <script type='text/javascript' src='../js/views/attachment_view.js' data-cover></script>

ts/components/MainHeader.tsx

@@ -48,9 +48,6 @@ export class MainHeader extends React.Component<Props> {
             i18n={i18n}
           />
         </div>
-        <div
-          className="module-main-header__expand-icon"
-        />
       </div>
     );
   }