Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Add a close button on the occupants sidebar

Browse Source
This commit is contained in:
JC Brand 2018-05-30 16:55:14 +02:00
parent 8c983ab2a3
commit 5e97db95f9
4 changed files with 41 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
css/converse.css
View File

@ -8494,10 +8494,18 @@ body.reset {
border-left: 1px solid #666; border-left: 1px solid #666;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
padding: 0.5em; } padding: 0.5em; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .occupants-heading, #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .occupants-header,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading { #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-header {
font-family: "Century Gothic", futura, "URW Gothic L", Verdana, sans-serif; display: flex;
padding: 0.3em 0; } flex-direction: column; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .occupants-header .hide-occupants,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-header .hide-occupants {
align-self: flex-end;
cursor: pointer; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .occupants-header .occupants-heading,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-header .occupants-heading {
font-family: "Century Gothic", futura, "URW Gothic L", Verdana, sans-serif;
padding: 0.3em 0; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .chatroom-features, #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features { #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
width: 100%; } width: 100%; }

14
sass/_chatrooms.scss
View File

@ -120,9 +120,17 @@
border-bottom-right-radius: $chatbox-border-radius; border-bottom-right-radius: $chatbox-border-radius;
padding: 0.5em; padding: 0.5em;
.occupants-heading { .occupants-header {
font-family: $heading-font; display: flex;
padding: 0.3em 0; flex-direction: column;
.hide-occupants {
align-self: flex-end;
cursor: pointer;
}
.occupants-heading {
font-family: $heading-font;
padding: 0.3em 0;
}
} }
.chatroom-features { .chatroom-features {

14
src/converse-muc-views.js
View File

@ -499,6 +499,7 @@
'click .send-button': 'onFormSubmitted', 'click .send-button': 'onFormSubmitted',
'click .toggle-call': 'toggleCall', 'click .toggle-call': 'toggleCall',
'click .toggle-occupants': 'toggleOccupants', 'click .toggle-occupants': 'toggleOccupants',
'click .hide-occupants': 'hideOccupants',
'click .toggle-smiley ul.emoji-picker li': 'insertEmoji', 'click .toggle-smiley ul.emoji-picker li': 'insertEmoji',
'click .toggle-smiley': 'toggleEmojiMenu', 'click .toggle-smiley': 'toggleEmojiMenu',
'click .upload-file': 'toggleFileUpload', 'click .upload-file': 'toggleFileUpload',
@ -710,6 +711,19 @@
this.occupantsview.setOccupantsHeight(); this.occupantsview.setOccupantsHeight();
}, },
hideOccupants (ev, preserve_state) {
/* Show or hide the right sidebar containing the chat
* occupants (and the invite widget).
*/
if (ev) {
ev.preventDefault();
ev.stopPropagation();
}
this.model.save({'hidden_occupants': true});
this.setOccupantsVisibility();
this.scrollDown();
},
toggleOccupants (ev, preserve_state) { toggleOccupants (ev, preserve_state) {
/* Show or hide the right sidebar containing the chat /* Show or hide the right sidebar containing the chat
* occupants (and the invite widget). * occupants (and the invite widget).

5
src/templates/chatroom_sidebar.html
View File

@ -1,5 +1,8 @@
<!-- <div class="occupants"> --> <!-- <div class="occupants"> -->
<p class="occupants-heading">{{{o.label_occupants}}}</p> <div class="occupants-header">
<i class="hide-occupants fa fa-times"></i>
<p class="occupants-heading">{{{o.label_occupants}}}</p>
</div>
<ul class="occupant-list"></ul> <ul class="occupant-list"></ul>
<div class="chatroom-features"></div> <div class="chatroom-features"></div>
<!-- </div> --> <!-- </div> -->