mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
Added accordian
This commit is contained in:
parent
fbc3832cfb
commit
3eb193cca2
|
@ -57,8 +57,12 @@
|
|||
<span class='search-icon'></span>
|
||||
</div>
|
||||
<div class='content'>
|
||||
<div class='conversations-list'>
|
||||
<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>
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue