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

Don't put #chatrooms inside #converse-roster and remove users id

Browse Source
This commit is contained in:
JC Brand 2018-02-15 15:49:16 +01:00
parent 1405884c59
commit 5401998558
10 changed files with 76 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
css/converse.css
View File

@ -5722,18 +5722,15 @@ body.reset {
display: block; display: block;
font-weight: normal; font-weight: normal;
margin: 1em 0; } margin: 1em 0; }
#conversejs #controlbox #users .add-converse-contact {
margin: 0 0 0.75em 0; }
#conversejs #controlbox #users .chatbox-btn {
margin: 0; }
#conversejs #controlbox #chatrooms, #conversejs #controlbox #contacts { #conversejs #controlbox #chatrooms, #conversejs #controlbox #contacts {
margin-top: 0.75em; } margin-top: 0.75em;
#conversejs #controlbox #users .userinfo { padding-bottom: 0.75em; }
#conversejs #controlbox .controlbox-pane .userinfo {
padding-bottom: 1em; padding-bottom: 1em;
border-bottom: 1px solid #818479; } border-bottom: 1px solid #818479; }
#conversejs #controlbox #users .userinfo .username { #conversejs #controlbox .controlbox-pane .userinfo .username {
margin-left: 0.5em; } margin-left: 0.5em; }
#conversejs #controlbox #users .userinfo .d-flex { #conversejs #controlbox .controlbox-pane .userinfo .d-flex {
margin-bottom: 0.2em; } margin-bottom: 0.2em; }
#conversejs #controlbox #chatrooms { #conversejs #controlbox #chatrooms {
border-bottom: 1px solid #818479; } border-bottom: 1px solid #818479; }
@ -5923,6 +5920,10 @@ body.reset {
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
border-radius: 4px; } border-radius: 4px; }
#conversejs #controlbox .controlbox-pane .add-converse-contact {
margin: 0 0 0.75em 0; }
#conversejs #controlbox .controlbox-pane .chatbox-btn {
margin: 0; }
#conversejs #controlbox .controlbox-pane .switch-form { #conversejs #controlbox .controlbox-pane .switch-form {
padding-bottom: 2em; } padding-bottom: 2em; }
#conversejs #controlbox .controlbox-pane .switch-form p { #conversejs #controlbox .controlbox-pane .switch-form p {
@ -5987,15 +5988,14 @@ body.reset {
left: 0; } left: 0; }
#conversejs #controlbox .sidebar { #conversejs #controlbox .sidebar {
display: block; } display: block; }
#conversejs #controlbox #users { #conversejs #controlbox .controlbox-pane {
position: absolute; position: absolute;
top: 0; top: 0;
display: none; } display: none;
#conversejs #controlbox #users.controlbox-pane { width: 100%; }
width: 100%; }
#conversejs.sidebar-open .chatbox:not(#controlbox) { #conversejs.sidebar-open .chatbox:not(#controlbox) {
display: none; } display: none; }
#conversejs.sidebar-open #controlbox #users { #conversejs.sidebar-open #controlbox .controlbox-pane {
display: block; } } display: block; } }
#conversejs:not(.fullscreen) #controlbox { #conversejs:not(.fullscreen) #controlbox {
order: -1; } order: -1; }

28
css/inverse.css
View File

@ -5794,18 +5794,15 @@ body {
display: block; display: block;
font-weight: normal; font-weight: normal;
margin: 1em 0; } margin: 1em 0; }
#conversejs #controlbox #users .add-converse-contact {
margin: 0 0 0.75em 0; }
#conversejs #controlbox #users .chatbox-btn {
margin: 0; }
#conversejs #controlbox #chatrooms, #conversejs #controlbox #contacts { #conversejs #controlbox #chatrooms, #conversejs #controlbox #contacts {
margin-top: 0.75em; } margin-top: 0.75em;
#conversejs #controlbox #users .userinfo { padding-bottom: 0.75em; }
#conversejs #controlbox .controlbox-pane .userinfo {
padding-bottom: 1em; padding-bottom: 1em;
border-bottom: 1px solid #818479; } border-bottom: 1px solid #818479; }
#conversejs #controlbox #users .userinfo .username { #conversejs #controlbox .controlbox-pane .userinfo .username {
margin-left: 0.5em; } margin-left: 0.5em; }
#conversejs #controlbox #users .userinfo .d-flex { #conversejs #controlbox .controlbox-pane .userinfo .d-flex {
margin-bottom: 0.2em; } margin-bottom: 0.2em; }
#conversejs #controlbox #chatrooms { #conversejs #controlbox #chatrooms {
border-bottom: 1px solid #818479; } border-bottom: 1px solid #818479; }
@ -5995,6 +5992,10 @@ body {
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
border-radius: 4px; } border-radius: 4px; }
#conversejs #controlbox .controlbox-pane .add-converse-contact {
margin: 0 0 0.75em 0; }
#conversejs #controlbox .controlbox-pane .chatbox-btn {
margin: 0; }
#conversejs #controlbox .controlbox-pane .switch-form { #conversejs #controlbox .controlbox-pane .switch-form {
padding-bottom: 2em; } padding-bottom: 2em; }
#conversejs #controlbox .controlbox-pane .switch-form p { #conversejs #controlbox .controlbox-pane .switch-form p {
@ -6059,15 +6060,14 @@ body {
left: 0; } left: 0; }
#conversejs #controlbox .sidebar { #conversejs #controlbox .sidebar {
display: block; } display: block; }
#conversejs #controlbox #users { #conversejs #controlbox .controlbox-pane {
position: absolute; position: absolute;
top: 0; top: 0;
display: none; } display: none;
#conversejs #controlbox #users.controlbox-pane { width: 100%; }
width: 100%; }
#conversejs.sidebar-open .chatbox:not(#controlbox) { #conversejs.sidebar-open .chatbox:not(#controlbox) {
display: none; } display: none; }
#conversejs.sidebar-open #controlbox #users { #conversejs.sidebar-open #controlbox .controlbox-pane {
display: block; } } display: block; } }
#conversejs.fullscreen #controlbox { #conversejs.fullscreen #controlbox {
margin: 0; } margin: 0; }
@ -6117,6 +6117,8 @@ body {
width: 100%; width: 100%;
z-index: 1; z-index: 1;
background-color: #578EA9; } background-color: #578EA9; }
#conversejs.fullscreen #controlbox .box-flyout .controlbox-head {
display: none; }
#conversejs.fullscreen #controlbox #converse-register, #conversejs.fullscreen #controlbox #converse-login { #conversejs.fullscreen #controlbox #converse-register, #conversejs.fullscreen #controlbox #converse-login {
margin: 2em 30% 3em 30%; } margin: 2em 30% 3em 30%; }
#conversejs.fullscreen #controlbox #converse-register .title, #conversejs.fullscreen #controlbox #converse-register .instructions, #conversejs.fullscreen #controlbox #converse-login .title, #conversejs.fullscreen #controlbox #converse-login .instructions { #conversejs.fullscreen #controlbox #converse-register .title, #conversejs.fullscreen #controlbox #converse-register .instructions, #conversejs.fullscreen #controlbox #converse-login .title, #conversejs.fullscreen #controlbox #converse-login .instructions {

2
mockup/chatbox.html
View File

@ -15,7 +15,7 @@
<div id="controlbox" class="chatbox col-xl-2 col-md-3"> <div id="controlbox" class="chatbox col-xl-2 col-md-3">
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<div class="controlbox-panes"> <div class="controlbox-panes">
<div id="users" class="controlbox-pane"></div> <div class="controlbox-pane"></div>
</div> </div>
</div> </div>
</div> </div>

2
mockup/chatroom.html
View File

@ -15,7 +15,7 @@
<div id="controlbox" class="chatbox col-xl-2 col-md-3"> <div id="controlbox" class="chatbox col-xl-2 col-md-3">
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<div class="controlbox-panes"> <div class="controlbox-panes">
<div id="users" class="controlbox-pane"></div> <div class="controlbox-pane"></div>
</div> </div>
</div> </div>
</div> </div>

2
mockup/converse.html
View File

@ -19,7 +19,7 @@
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<div class="controlbox-panes"> <div class="controlbox-panes">
<div class="sidebar"></div> <div class="sidebar"></div>
<div id="users" class="controlbox-pane"></div> <div class="controlbox-pane"></div>
</div> </div>
</div> </div>
</div> </div>

2
mockup/sidebar.html
View File

@ -1,5 +1,6 @@
<!-- <div class="sidebar"> --> <!-- <div class="sidebar"> -->
<a class="hamburger chatbox-btn fa fa-bars"></a> <a class="hamburger chatbox-btn fa fa-bars"></a>
<!--
<a class="chatbox-btn fa fa-vcard" title="Your profile" data-toggle="modal" data-target="#userProfileModal"></a> <a class="chatbox-btn fa fa-vcard" title="Your profile" data-toggle="modal" data-target="#userProfileModal"></a>
<a class="chatbox-btn fa fa-pencil" title="Click to change your chat status" data-toggle="modal" data-target="#changeStatusModal"></a> <a class="chatbox-btn fa fa-pencil" title="Click to change your chat status" data-toggle="modal" data-target="#changeStatusModal"></a>
<div class="bottom"> <div class="bottom">
@ -7,4 +8,5 @@
<a class="chatbox-btn fa fa-users" title="Click to change rooms" data-toggle="modal" data-target="#chatroomsModal"></a> <a class="chatbox-btn fa fa-users" title="Click to change rooms" data-toggle="modal" data-target="#chatroomsModal"></a>
<a class="chatbox-btn fa fa-cog" title="Change settings" data-toggle="modal" data-target="#settingsModal"></a> <a class="chatbox-btn fa fa-cog" title="Change settings" data-toggle="modal" data-target="#settingsModal"></a>
</div> </div>
-->
<!-- </div> --> <!-- </div> -->

50
mockup/user-panel.html
View File

@ -13,35 +13,35 @@
</div> </div>
</div> </div>
<div id="converse-roster"> <div id="chatrooms">
<div id="chatrooms"> <div class="d-flex">
<div class="d-flex"> <span class="w-100">Chatrooms</span>
<span class="w-100">Chatrooms</span> <a class="chatbox-btn fa fa-users" title="Click to change rooms" data-toggle="modal" data-target="#chatroomsModal"></a>
<a class="chatbox-btn fa fa-users" title="Click to change rooms" data-toggle="modal" data-target="#chatroomsModal"></a> </div>
</div> <div class="list-container rooms-list-container">
<div class="list-container rooms-list-container"> <div class="rooms-list">
<div class="rooms-list"> <div class="available-chatroom d-flex flex-row">
<div class="available-chatroom d-flex flex-row"> <a class="open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="#">public</a>
<a class="open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="#">public</a> <a href="#" class="fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info"
<a href="#" class="fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info" data-html="true" data-content="<b>Room Address (JID): </b><br>public@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
data-html="true" data-content="<b>Room Address (JID): </b><br>public@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a> <a href="#" class="fa fa-bookmark-o align-self-center" title="Click to bookmark this room">&nbsp;</a>
<a href="#" class="fa fa-bookmark-o align-self-center" title="Click to bookmark this room">&nbsp;</a> <a href="#" class="fa fa-times align-self-center" title="Click to leave this room">&nbsp;</a>
<a href="#" class="fa fa-times align-self-center" title="Click to leave this room">&nbsp;</a> </div>
</div> <div class="available-chatroom d-flex flex-row">
<div class="available-chatroom d-flex flex-row"> <a class="open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="#">team</a>
<a class="open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="#">team</a> <a href="#" class="fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info"
<a href="#" class="fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info" data-html="true" data-content="<b>Room Address (JID): </b><br>team@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
data-html="true" data-content="<b>Room Address (JID): </b><br>team@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a> </div>
</div> <div class="available-chatroom d-flex flex-row">
<div class="available-chatroom d-flex flex-row"> <a class="open-room available-room w-100" data-room-jid="test@conference.test.com" title="Click to open this room" href="#">test</a>
<a class="open-room available-room w-100" data-room-jid="test@conference.test.com" title="Click to open this room" href="#">test</a> <a href="#" class="fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info"
<a href="#" class="fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info" data-html="true" data-content="<b>Room Address (JID): </b><br>test@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
data-html="true" data-content="<b>Room Address (JID): </b><br>test@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div id="converse-roster">
<div id="contacts"> <div id="contacts">
<div class="d-flex"> <div class="d-flex">
<span class="w-100">Contacts</span> <span class="w-100">Contacts</span>

2
mockup/user-panel.js
View File

@ -1,6 +1,6 @@
/*global Backbone, _, window */ /*global Backbone, _, window */
const UserPanel = Backbone.NativeView.extend({ const UserPanel = Backbone.NativeView.extend({
el: 'div#users', el: '.controlbox-pane',
initialize () { initialize () {
this.render(); this.render();

29
sass/_controlbox.scss
View File

@ -157,21 +157,12 @@
} }
#users {
.add-converse-contact {
margin: 0 0 0.75em 0;
}
.chatbox-btn {
margin: 0;
}
}
#chatrooms, #contacts { #chatrooms, #contacts {
margin-top: 0.75em; margin-top: 0.75em;
padding-bottom: 0.75em;
} }
#users { .controlbox-pane {
.userinfo { .userinfo {
padding-bottom: 1em; padding-bottom: 1em;
border-bottom: 1px solid $gray-color; border-bottom: 1px solid $gray-color;
@ -420,6 +411,14 @@
overflow-x: hidden; overflow-x: hidden;
border-radius: $chatbox-border-radius; border-radius: $chatbox-border-radius;
.add-converse-contact {
margin: 0 0 0.75em 0;
}
.chatbox-btn {
margin: 0;
}
.switch-form { .switch-form {
padding-bottom: 2em; padding-bottom: 2em;
p { p {
@ -521,13 +520,11 @@
display: block; display: block;
} }
#users { .controlbox-pane {
position: absolute; position: absolute;
top: 0; top: 0;
display: none; display: none;
&.controlbox-pane { width: 100%;
width: 100%;
}
} }
} }
@ -537,7 +534,7 @@
display: none; display: none;
} }
#controlbox { #controlbox {
#users { .controlbox-pane {
display: block; display: block;
} }
} }

5
sass/inverse/_controlbox.scss
View File

@ -1,7 +1,6 @@
#conversejs.fullscreen { #conversejs.fullscreen {
#controlbox { #controlbox {
margin: 0; margin: 0;
// margin-left: -$chat-gutter; // Mystery why this is necessary
.controlbox-pane { .controlbox-pane {
border-radius: 0; border-radius: 0;
@ -51,6 +50,10 @@
width: 100%; width: 100%;
z-index: 1; z-index: 1;
background-color: $controlbox-head-color; background-color: $controlbox-head-color;
.controlbox-head {
display: none;
}
} }
#converse-register, #converse-login { #converse-register, #converse-login {