Added accordian

background.html

@@ -57,8 +57,12 @@
         <span class='search-icon'></span>
       </div>
       <div class='content'>
-        <div class='conversations inbox'></div>
+        <div class='conversations-list'>
-        <div class='conversations friends'></div>
+          <h4 class='section-toggle section-toggle-visible'>Conversations</h4>
+          <div class='conversations inbox'></div>
+          <h4 class='section-toggle section-toggle-visible'>Friends</h4>
+          <div class='conversations friends'></div>
+        </div>
         <div class='conversations search-results hide'>
           <div class='new-contact contact hide'></div>
         </div>
@@ -131,16 +135,16 @@
               <div class='flex'>
                 <button class='emoji' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></button>
                 <textarea class='send-message' placeholder='{{ send-message }}' rows='1' dir='auto' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></textarea>
-                <!-- <div class='capture-audio'>
+                <div class='capture-audio' hide>
                     <button class='microphone' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></button>
-                </div> -->
+                </div>
                 <div class='android-length-warning'>
                     {{ android-length-warning }}
                 </div>
-                <!-- <div class='choose-file'>
+                <div class='choose-file' hide>
                     <button class='paperclip thumbnail' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></button>
                     <input type='file' class='file-input'>
-                </div> -->
+                </div>
               </div>
             </form>
           </div>

js/views/inbox_view.js

@@ -197,13 +197,11 @@
 
       this.listenTo(this.searchView, 'hide', function toggleVisibility() {
         this.searchView.$el.hide();
-        this.inboxListView.$el.show();
+        this.$('.conversations-list').show();
-        this.friendListView.$el.show();
       });
       this.listenTo(this.searchView, 'show', function toggleVisibility() {
         this.searchView.$el.show();
-        this.inboxListView.$el.hide();
+        this.$('.conversations-list').hide();
-        this.friendListView.$el.hide();
       });
       this.listenTo(this.searchView, 'open', this.openConversation);
 
@@ -249,6 +247,7 @@
       click: 'onClick',
       'click #header': 'focusHeader',
       'click .conversation': 'focusConversation',
+      'click .section-toggle': 'toggleSection',
       'input input.search': 'filterContacts',
     },
     startConnectionListener() {
@@ -323,6 +322,15 @@
         input.removeClass('active');
       }
     },
+    toggleSection(e) {
+      // Expand or collapse this panel
+      const $target = this.$(e.target);
+      const $next = $target.next();
+
+      // Toggle section visibility
+      $next.slideToggle('fast');
+      $target.toggleClass('section-toggle-visible');
+    },
     openConversation(conversation) {
       this.searchView.hideHints();
       if (conversation) {

stylesheets/_index.scss

@@ -58,6 +58,7 @@
     max-height: calc(100% - 88px);
     min-height: 0px;
     flex: 1 1 auto;
+    color: $color-gray-05;
   }
 
   .loki {
@@ -73,6 +74,38 @@
   }
 }
 
+.section-toggle {
+  position: relative;
+  display: block;
+  padding: 0 0 0 1em;
+  background: $color-dark-75;
+  font-weight: bold;
+  line-height: 3;
+  cursor: pointer;
+  margin-top: 1px;
+  margin-bottom: 1px;
+  overflow: hidden;
+}
+
+.section-toggle::after {
+  position: absolute;
+  right: 0;
+  top: 0;
+  display: block;
+  width: 3em;
+  height: 3em;
+  line-height: 3;
+  text-align: center;
+  -webkit-transition: all .35s;
+  -o-transition: all .35s;
+  transition: all .35s;
+  content: "+";
+}
+
+.section-toggle-visible::after {
+  transform: rotate(315deg);
+}
+
 .network-status-container {
   .network-status {
     background: url('../images/error_red.svg') no-repeat left 10px center;

stylesheets/_variables.scss

@@ -113,6 +113,7 @@ $color-dark-30: #a8a9aa;
 $color-dark-55: #88898c;
 $color-dark-60: #797a7c;
 $color-dark-70: #414347;
+$color-dark-75: #292c33;
 $color-dark-85: #1a1c20;
 $color-black-008: rgba($color-black, 0.08);
 $color-black-008-no-tranparency: #ededed;