diff --git a/background.html b/background.html index 085779d46..6740b802b 100644 --- a/background.html +++ b/background.html @@ -57,8 +57,12 @@
-
-
+
+

Conversations

+
+

Friends

+
+
@@ -131,16 +135,16 @@
- +
{{ android-length-warning }}
- +
diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js index be5b864b9..4a6dcb54c 100644 --- a/js/views/inbox_view.js +++ b/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.friendListView.$el.show(); + this.$('.conversations-list').show(); }); this.listenTo(this.searchView, 'show', function toggleVisibility() { this.searchView.$el.show(); - this.inboxListView.$el.hide(); - this.friendListView.$el.hide(); + this.$('.conversations-list').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) { diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss index c497d9d06..428f00560 100644 --- a/stylesheets/_index.scss +++ b/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; diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss index acb46a0a7..21ac12366 100644 --- a/stylesheets/_variables.scss +++ b/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;