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;