Skip to content

C
converse.js
Commit ede21e7c authored by JC Brand's avatar JC Brand
Browse files
Options

Remove controlbox tabs and show rooms and contacts panels together

parent b6501bcf
Hide whitespace changes
Inline Side-by-side
Showing with 307 additions and 398 deletions
css/converse.css
View file @ ede21e7c
...@@ -5722,17 +5722,17 @@ body.reset { ...@@ -5722,17 +5722,17 @@ body.reset {
display: block; display: block;
font-weight: normal; font-weight: normal;
margin: 1em 0; } margin: 1em 0; }
#conversejs #controlbox #chatrooms, #conversejs #controlbox #contacts {
margin-top: 0.75em;
padding-bottom: 0.75em; }
#conversejs #controlbox .controlbox-pane .userinfo { #conversejs #controlbox .controlbox-pane .userinfo {
padding-bottom: 1em; padding-bottom: 1em;
border-bottom: 1px solid #818479; } border-bottom: 1px solid #818479; }
#conversejs #controlbox .controlbox-pane .userinfo .username { #conversejs #controlbox .controlbox-pane .userinfo .username {
margin-left: 0.5em; } margin-left: 0.5em;
overflow: hidden;
text-overflow: ellipsis; }
#conversejs #controlbox .controlbox-pane .userinfo .d-flex { #conversejs #controlbox .controlbox-pane .userinfo .d-flex {
margin-bottom: 0.2em; } margin-bottom: 0.2em; }
#conversejs #controlbox #chatrooms { #conversejs #controlbox #chatrooms {
padding: 0;
border-bottom: 1px solid #818479; } border-bottom: 1px solid #818479; }
#conversejs #controlbox #chatrooms form.add-chatroom { #conversejs #controlbox #chatrooms form.add-chatroom {
margin: 0; margin: 0;
...@@ -5827,6 +5827,9 @@ body.reset { ...@@ -5827,6 +5827,9 @@ body.reset {
padding: 0.3em 0; padding: 0.3em 0;
clear: left; clear: left;
width: 100%; } width: 100%; }
#conversejs #controlbox #chatrooms, #conversejs #controlbox #converse-roster {
margin-top: 0.75em;
padding-bottom: 0.75em; }
#conversejs #controlbox .dropdown a { #conversejs #controlbox .dropdown a {
width: 143px; width: 143px;
display: inline-block; } display: inline-block; }
......
css/inverse.css
View file @ ede21e7c
...@@ -5794,17 +5794,17 @@ body { ...@@ -5794,17 +5794,17 @@ body {
display: block; display: block;
font-weight: normal; font-weight: normal;
margin: 1em 0; } margin: 1em 0; }
#conversejs #controlbox #chatrooms, #conversejs #controlbox #contacts {
margin-top: 0.75em;
padding-bottom: 0.75em; }
#conversejs #controlbox .controlbox-pane .userinfo { #conversejs #controlbox .controlbox-pane .userinfo {
padding-bottom: 1em; padding-bottom: 1em;
border-bottom: 1px solid #818479; } border-bottom: 1px solid #818479; }
#conversejs #controlbox .controlbox-pane .userinfo .username { #conversejs #controlbox .controlbox-pane .userinfo .username {
margin-left: 0.5em; } margin-left: 0.5em;
overflow: hidden;
text-overflow: ellipsis; }
#conversejs #controlbox .controlbox-pane .userinfo .d-flex { #conversejs #controlbox .controlbox-pane .userinfo .d-flex {
margin-bottom: 0.2em; } margin-bottom: 0.2em; }
#conversejs #controlbox #chatrooms { #conversejs #controlbox #chatrooms {
padding: 0;
border-bottom: 1px solid #818479; } border-bottom: 1px solid #818479; }
#conversejs #controlbox #chatrooms form.add-chatroom { #conversejs #controlbox #chatrooms form.add-chatroom {
margin: 0; margin: 0;
...@@ -5899,6 +5899,9 @@ body { ...@@ -5899,6 +5899,9 @@ body {
padding: 0.3em 0; padding: 0.3em 0;
clear: left; clear: left;
width: 100%; } width: 100%; }
#conversejs #controlbox #chatrooms, #conversejs #controlbox #converse-roster {
margin-top: 0.75em;
padding-bottom: 0.75em; }
#conversejs #controlbox .dropdown a { #conversejs #controlbox .dropdown a {
width: 143px; width: 143px;
display: inline-block; } display: inline-block; }
......
mockup/converse.html
View file @ ede21e7c
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
</div> </div>
</div> </div>
<div class="chatbox col col col-lg-2 col-md-3 col-sm-4 col-sx-12 w-100" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f"> <div class="chatbox col col-lg-2 col-md-3 col-sm-4 col-sx-12 w-100" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f">
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<div class="chat-head chat-head-chatbox row no-gutters"> <div class="chat-head chat-head-chatbox row no-gutters">
......
mockup/user-panel.html
View file @ ede21e7c
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<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 add a new room" 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">
...@@ -42,123 +42,121 @@ ...@@ -42,123 +42,121 @@
</div> </div>
<div id="converse-roster"> <div id="converse-roster">
<div id="contacts"> <div class="d-flex">
<div class="d-flex"> <span class="w-100">Contacts</span>
<span class="w-100">Contacts</span> <a class="chatbox-btn fa fa-user-plus" title="Click to add new chat contacts" data-toggle="modal" data-target="#addContactModal"></a>
<a class="chatbox-btn fa fa-user-plus" title="Click to add new chat contacts" data-toggle="modal" data-target="#addContactModal"></a> </div>
</div> <form class="pure-form roster-filter-form input-button-group">
<form class="pure-form roster-filter-form input-button-group"> <div class="form-group form-inline">
<div class="form-group form-inline"> <input value="" class="roster-filter form-control" placeholder="Filter">
<input value="" class="roster-filter form-control" placeholder="Filter"> <div class="filter-by">
<div class="filter-by"> <span class="fa fa-user" title="Filter by contacts"></span>
<span class="fa fa-user" title="Filter by contacts"></span> <span class="fa fa-users" title="Filter by groups"></span>
<span class="fa fa-users" title="Filter by groups"></span> <span class="fa fa-circle" title="Filter by status"></span>
<span class="fa fa-circle" title="Filter by status"></span>
</div>
</div> </div>
</form> </div>
</form>
<div class="roster-contacts"> <div class="roster-contacts">
<div class="roster-group" id="xmpp-contact-requests"> <div class="roster-group" id="xmpp-contact-requests">
<a href="#" class="group-toggle" title="Click to hide these contacts"> <a href="#" class="group-toggle" title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Contact Requests</a> <span class="fa fa-caret-down"></span> Contact Requests</a>
<ul> <ul>
<li class="offline requesting-xmpp-contact d-flex"> <li class="offline requesting-xmpp-contact d-flex">
<span class="req-contact-name w-100">Bob Skinstad</span> <span class="req-contact-name w-100">Bob Skinstad</span>
<a class="accept-xmpp-request fa fa-check align-self-center" title="Click here to accept this contact's request" href="#"></a> <a class="accept-xmpp-request fa fa-check align-self-center" title="Click here to accept this contact's request" href="#"></a>
<a class="decline-xmpp-request fa fa-times align-self-center" title="Click here to decline this contact's request" href="#"></a> <a class="decline-xmpp-request fa fa-times align-self-center" title="Click here to decline this contact's request" href="#"></a>
</li> </li>
<li class="offline requesting-xmpp-contact d-flex"> <li class="offline requesting-xmpp-contact d-flex">
<span class="req-contact-name w-100">André Vos</span> <span class="req-contact-name w-100">André Vos</span>
<a class="accept-xmpp-request fa fa-check align-self-center" title="Click here to accept this contact's request" href="#"></a> <a class="accept-xmpp-request fa fa-check align-self-center" title="Click here to accept this contact's request" href="#"></a>
<a class="decline-xmpp-request fa fa-times align-self-center" title="Click here to decline this contact's request" href="#"></a> <a class="decline-xmpp-request fa fa-times align-self-center" title="Click here to decline this contact's request" href="#"></a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="roster-group" data-group="Colleagues"> <div class="roster-group" data-group="Colleagues">
<a href="#" data-group="Colleagues" class="group-toggle" title="Click to hide these contacts"> <a href="#" data-group="Colleagues" class="group-toggle" title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Colleagues</a> <span class="fa fa-caret-down"></span> Colleagues</a>
<ul> <ul>
<li class="online current-xmpp-contact d-flex"> <li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#"> <a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-circle" title="This contact is online"></span> Victor Matfield</a> <span class="fa fa-circle" title="This contact is online"></span> Victor Matfield</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
</li>
<li class="away current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-circle-o" title="this contact is away"></span> William Winterbottom</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
</li>
<li class="dnd current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-minus-circle" title="This contact is busy"></span> Gary Teichmann</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
</li>
</li> </li>
</div> <li class="away current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-circle-o" title="this contact is away"></span> William Winterbottom</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
</li>
<li class="dnd current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-minus-circle" title="This contact is busy"></span> Gary Teichmann</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
</li>
</li>
</div>
<div class="roster-group" data-group="Family"> <div class="roster-group" data-group="Family">
<a href="#" data-group="Family" class="group-toggle" title="Click to hide these contacts"> <a href="#" data-group="Family" class="group-toggle" title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Family</a> <span class="fa fa-caret-down"></span> Family</a>
<ul> <ul>
<li class="away current-xmpp-contact d-flex"> <li class="away current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#"> <a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-circle-o" title="this contact is away"></span> Allan Donald</a> <span class="fa fa-circle-o" title="this contact is away"></span> Allan Donald</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
</li> </li>
<li class="offline current-xmpp-contact d-flex"> <li class="offline current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#"> <a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-times-circle" title="This contact is offline"></span> Corné Krige</a> <span class="fa fa-times-circle" title="This contact is offline"></span> Corné Krige</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="roster-group" data-group="Friends"> <div class="roster-group" data-group="Friends">
<a href="#" data-group="Friends" class="group-toggle" title="Click to hide these contacts"> <a href="#" data-group="Friends" class="group-toggle" title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Friends</a> <span class="fa fa-caret-down"></span> Friends</a>
<ul> <ul>
<li class="online current-xmpp-contact d-flex"> <li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#"> <a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-circle" title="This contact is online"></span> John Smit</a> <span class="fa fa-circle" title="This contact is online"></span> John Smit</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
</li> </li>
<li class="online current-xmpp-contact d-flex"> <li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#"> <a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-circle" title="This contact is online"></span> Bakkies Botha</a> <span class="fa fa-circle" title="This contact is online"></span> Bakkies Botha</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="roster-group" data-group="Ungrouped"> <div class="roster-group" data-group="Ungrouped">
<a href="#" class="group-toggle" title="Click to hide these contacts"> <a href="#" class="group-toggle" title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Ungrouped</a> <span class="fa fa-caret-down"></span> Ungrouped</a>
<ul> <ul>
<li class="online current-xmpp-contact d-flex"> <li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#"> <a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-circle" title="This contact is online"></span> James Small</a> <span class="fa fa-circle" title="This contact is online"></span> James Small</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="roster-group" id="pending-xmpp-contacts"> <div class="roster-group" id="pending-xmpp-contacts">
<a href="#" class="group-toggle" title="Click to hide these contacts"> <a href="#" class="group-toggle" title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Pending Contacts</a> <span class="fa fa-caret-down"></span> Pending Contacts</a>
<ul> <ul>
<li class="offline pending-xmpp-contact d-flex"> <li class="offline pending-xmpp-contact d-flex">
<span class="pending-contact-name w-100">Rassie Erasmus</span> <span class="pending-contact-name w-100">Rassie Erasmus</span>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
</li> </li>
<li class="offline pending-xmpp-contact d-flex"> <li class="offline pending-xmpp-contact d-flex">
<span class="pending-contact-name w-100">Victor Matfield</span> <span class="pending-contact-name w-100">Victor Matfield</span>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a> <a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
</li> </li>
</ul> </ul>
</div>
</div> </div>
</div> </div>
</div> </div>
......
sass/_controlbox.scss
View file @ ede21e7c
...@@ -157,11 +157,6 @@ ...@@ -157,11 +157,6 @@
} }
#chatrooms, #contacts {
margin-top: 0.75em;
padding-bottom: 0.75em;
}
.controlbox-pane { .controlbox-pane {
.userinfo { .userinfo {
padding-bottom: 1em; padding-bottom: 1em;
...@@ -169,6 +164,8 @@ ...@@ -169,6 +164,8 @@
.username { .username {
margin-left: 0.5em; margin-left: 0.5em;
overflow: hidden;
text-overflow: ellipsis;
} }
.d-flex { .d-flex {
margin-bottom: 0.2em; margin-bottom: 0.2em;
...@@ -177,6 +174,7 @@ ...@@ -177,6 +174,7 @@
} }
#chatrooms { #chatrooms {
padding: 0;
border-bottom: 1px solid $gray-color; border-bottom: 1px solid $gray-color;
form.add-chatroom { form.add-chatroom {
...@@ -284,6 +282,11 @@ ...@@ -284,6 +282,11 @@
} }
} }
#chatrooms, #converse-roster {
margin-top: 0.75em;
padding-bottom: 0.75em;
}
.dropdown { .dropdown {
a { a {
width: 143px; width: 143px;
......
src/converse-chatview.js
View file @ ede21e7c
...@@ -304,6 +304,7 @@ ...@@ -304,6 +304,7 @@
}, },
render () { render () {
this.setClasses();
this.el.setAttribute('id', this.model.get('box_id')); this.el.setAttribute('id', this.model.get('box_id'));
this.el.innerHTML = tpl_chatbox( this.el.innerHTML = tpl_chatbox(
_.extend(this.model.toJSON(), { _.extend(this.model.toJSON(), {
...@@ -316,6 +317,20 @@ ...@@ -316,6 +317,20 @@
return this; return this;
}, },
setClasses () {
if (_converse.view_mode === 'fullscreen') {
this.el.classList.add('col-xl-10');
this.el.classList.add('col-md-9');
} else {
this.el.classList.add('col');
this.el.classList.add('col-lg-2');
this.el.classList.add('col-md-3');
this.el.classList.add('col-sm-4');
this.el.classList.add('col-sx-12');
this.el.classList.add('w-100');
}
},
renderToolbar (toolbar, options) { renderToolbar (toolbar, options) {
if (!_converse.show_toolbar) { if (!_converse.show_toolbar) {
return this; return this;
...@@ -431,10 +446,7 @@ ...@@ -431,10 +446,7 @@
* as well as src/converse-muc.js (if those plugins are * as well as src/converse-muc.js (if those plugins are
* enabled). * enabled).
*/ */
const container = _converse.root.querySelector('#conversejs'); _converse.chatboxviews.insertRowColumn(this.el);
if (this.el.parentNode !== container) {
container.insertBefore(this.el, container.firstChild);
}
return this; return this;
}, },
......
src/converse-controlbox.js
View file @ ede21e7c
...@@ -12,8 +12,6 @@ ...@@ -12,8 +12,6 @@
"tpl!add_contact_dropdown", "tpl!add_contact_dropdown",
"tpl!add_contact_form", "tpl!add_contact_form",
"tpl!converse_brand_heading", "tpl!converse_brand_heading",
"tpl!contacts_panel",
"tpl!contacts_tab",
"tpl!controlbox", "tpl!controlbox",
"tpl!controlbox_toggle", "tpl!controlbox_toggle",
"tpl!login_panel", "tpl!login_panel",
...@@ -28,8 +26,6 @@ ...@@ -28,8 +26,6 @@
tpl_add_contact_dropdown, tpl_add_contact_dropdown,
tpl_add_contact_form, tpl_add_contact_form,
tpl_brand_heading, tpl_brand_heading,
tpl_contacts_panel,
tpl_contacts_tab,
tpl_controlbox, tpl_controlbox,
tpl_controlbox_toggle, tpl_controlbox_toggle,
tpl_login_panel, tpl_login_panel,
...@@ -37,7 +33,6 @@ ...@@ -37,7 +33,6 @@
) { ) {
"use strict"; "use strict";
const USERS_PANEL_ID = 'users';
const CHATBOX_TYPE = 'chatbox'; const CHATBOX_TYPE = 'chatbox';
const { Strophe, Backbone, Promise, _, moment } = converse.env; const { Strophe, Backbone, Promise, _, moment } = converse.env;
const u = converse.env.utils; const u = converse.env.utils;
...@@ -91,7 +86,7 @@ ...@@ -91,7 +86,7 @@
* *
* NB: These plugins need to have already been loaded via require.js. * NB: These plugins need to have already been loaded via require.js.
*/ */
dependencies: ["converse-chatboxes"], dependencies: ["converse-chatboxes", "converse-rosterview"],
overrides: { overrides: {
// Overrides mentioned here will be picked up by converse.js's // Overrides mentioned here will be picked up by converse.js's
...@@ -201,6 +196,7 @@ ...@@ -201,6 +196,7 @@
}, },
ChatBoxView: { ChatBoxView: {
insertIntoDOM () { insertIntoDOM () {
const view = this.__super__._converse.chatboxviews.get("controlbox"); const view = this.__super__._converse.chatboxviews.get("controlbox");
if (view) { if (view) {
...@@ -248,15 +244,15 @@ ...@@ -248,15 +244,15 @@
className: 'chatbox', className: 'chatbox',
id: 'controlbox', id: 'controlbox',
events: { events: {
'click a.close-chatbox-button': 'close', 'click a.close-chatbox-button': 'close'
'click ul#controlbox-tabs li a': 'switchTab',
}, },
initialize () { initialize () {
if (_.isUndefined(_converse.controlboxtoggle)) { if (_.isUndefined(_converse.controlboxtoggle)) {
_converse.controlboxtoggle = new _converse.ControlBoxToggle(); _converse.controlboxtoggle = new _converse.ControlBoxToggle();
_converse.controlboxtoggle.el.insertAdjacentElement('afterend', this.el);
} }
_converse.controlboxtoggle.el.insertAdjacentElement('afterend', this.el);
this.model.on('change:connected', this.onConnected, this); this.model.on('change:connected', this.onConnected, this);
this.model.on('destroy', this.hide, this); this.model.on('destroy', this.hide, this);
this.model.on('hide', this.hide, this); this.model.on('hide', this.hide, this);
...@@ -277,23 +273,23 @@ ...@@ -277,23 +273,23 @@
this.model.set('closed', !_converse.show_controlbox_by_default); this.model.set('closed', !_converse.show_controlbox_by_default);
} }
} }
if (!this.model.get('closed')) {
this.show();
} else {
this.hide();
}
this.el.innerHTML = tpl_controlbox( this.el.innerHTML = tpl_controlbox(
_.extend(this.model.toJSON(), { _.extend(this.model.toJSON(), {
'sticky_controlbox': _converse.sticky_controlbox 'sticky_controlbox': _converse.sticky_controlbox
})); }));
if (!this.model.get('closed')) {
this.show();
} else {
this.hide();
}
if (!_converse.connection.connected || if (!_converse.connection.connected ||
!_converse.connection.authenticated || !_converse.connection.authenticated ||
_converse.connection.disconnecting) { _converse.connection.disconnecting) {
this.renderLoginPanel(); this.renderLoginPanel();
} else if (this.model.get('connected') && } else if (this.model.get('connected') &&
(!this.contactspanel || !u.isVisible(this.contactspanel.el))) { (!this.controlbox_pane || !u.isVisible(this.controlbox_pane.el))) {
this.renderContactsPanel(); this.renderControlBoxPane();
} }
return this; return this;
}, },
...@@ -310,7 +306,7 @@ ...@@ -310,7 +306,7 @@
insertRoster () { insertRoster () {
/* Place the rosterview inside the "Contacts" panel. */ /* Place the rosterview inside the "Contacts" panel. */
this.contactspanel.el.insertAdjacentElement( this.controlbox_pane.el.insertAdjacentElement(
'beforeEnd', 'beforeEnd',
_converse.rosterview.el _converse.rosterview.el
); );
...@@ -333,6 +329,8 @@ ...@@ -333,6 +329,8 @@
renderLoginPanel () { renderLoginPanel () {
this.el.classList.add("logged-out"); this.el.classList.add("logged-out");
this.el.classList.remove("col-xl-2");
this.el.classList.remove("col-md-3");
if (_.isNil(this.loginpanel)) { if (_.isNil(this.loginpanel)) {
this.loginpanel = new _converse.LoginPanel({ this.loginpanel = new _converse.LoginPanel({
'model': new _converse.LoginPanelModel() 'model': new _converse.LoginPanelModel()
...@@ -347,7 +345,7 @@ ...@@ -347,7 +345,7 @@
return this; return this;
}, },
renderContactsPanel () { renderControlBoxPane () {
/* Renders the "Contacts" panel of the controlbox. /* Renders the "Contacts" panel of the controlbox.
* *
* This will only be called after the user has already been * This will only be called after the user has already been
...@@ -358,19 +356,14 @@ ...@@ -358,19 +356,14 @@
delete this.loginpanel; delete this.loginpanel;
} }
this.el.classList.remove("logged-out"); this.el.classList.remove("logged-out");
this.el.classList.add("col-xl-2");
this.el.classList.add("col-md-3");
if (_.isUndefined(this.model.get('active-panel'))) { this.controlbox_pane = new _converse.ControlBoxPane();
this.model.save({'active-panel': USERS_PANEL_ID}); this.el.querySelector('.controlbox-panes').insertAdjacentElement(
} 'afterBegin',
this.contactspanel = new _converse.ContactsPanel({ this.controlbox_pane.el
'parent_el': this.el.querySelector('.controlbox-panes') )
});
this.contactspanel.insertIntoDOM();
_converse.xmppstatusview = new _converse.XMPPStatusView({
'model': _converse.xmppstatus
});
_converse.xmppstatusview.render();
}, },
close (ev) { close (ev) {
...@@ -421,24 +414,6 @@ ...@@ -421,24 +414,6 @@
return this; return this;
}, },
switchTab (ev) {
if (ev && ev.preventDefault) { ev.preventDefault(); }
const tab = ev.target,
sibling_li = tab.parentNode.nextElementSibling || tab.parentNode.previousElementSibling,
sibling = sibling_li.firstChild,
sibling_panel = _converse.root.querySelector(sibling.getAttribute('href')),
tab_panel = _converse.root.querySelector(tab.getAttribute('href'));
u.hideElement(sibling_panel);
u.removeClass('current', sibling);
u.addClass('current', tab);
u.removeClass('hidden', tab_panel);
if (!_.isUndefined(_converse.chatboxes.browserStorage)) {
this.model.save({'active-panel': tab.getAttribute('data-id')});
}
return this;
},
showHelpMessages () { showHelpMessages () {
/* Override showHelpMessages in ChatBoxView, for now do nothing. /* Override showHelpMessages in ChatBoxView, for now do nothing.
* *
...@@ -553,10 +528,9 @@ ...@@ -553,10 +528,9 @@
}); });
_converse.ContactsPanel = Backbone.NativeView.extend({ _converse.ControlBoxPane = Backbone.NativeView.extend({
tagName: 'div', tagName: 'div',
className: 'controlbox-pane', className: 'controlbox-pane',
id: 'users',
events: { events: {
'click a.toggle-xmpp-contact-form': 'toggleContactForm', 'click a.toggle-xmpp-contact-form': 'toggleContactForm',
'submit form.add-xmpp-contact': 'addContactFromForm', 'submit form.add-xmpp-contact': 'addContactFromForm',
...@@ -564,57 +538,14 @@ ...@@ -564,57 +538,14 @@
'click a.subscribe-to-user': 'addContactFromList' 'click a.subscribe-to-user': 'addContactFromList'
}, },
initialize (cfg) { initialize () {
this.parent_el = cfg.parent_el; _converse.xmppstatusview = new _converse.XMPPStatusView({
this.tab_el = document.createElement('li'); 'model': _converse.xmppstatus
_converse.chatboxes.on('change:num_unread', this.renderTab, this);
_converse.chatboxes.on('add', _.debounce(this.renderTab, 100), this);
},
render () {
this.renderTab();
let widgets = tpl_contacts_panel({
label_online: __('Online'),
label_busy: __('Busy'),
label_away: __('Away'),
label_offline: __('Offline'),
label_logout: __('Log out'),
include_offline_state: _converse.include_offline_state,
allow_logout: _converse.allow_logout
});
if (_converse.allow_contact_requests) {
widgets += tpl_add_contact_dropdown({
label_click_to_chat: __('Click to add new chat contacts'),
label_add_contact: __('Add a contact')
});
}
this.el.innerHTML = widgets;
const controlbox = _converse.chatboxes.get('controlbox');
if (controlbox.get('active-panel') !== USERS_PANEL_ID) {
this.el.classList.add('hidden');
}
return this;
},
renderTab () {
const controlbox = _converse.chatboxes.get('controlbox');
if (_.isNil(controlbox)) {
return;
}
const chats = fp.filter(_.partial(u.isOfType, CHATBOX_TYPE), _converse.chatboxes.models);
this.tab_el.innerHTML = tpl_contacts_tab({
'label_contacts': LABEL_CONTACTS,
'is_current': controlbox.get('active-panel') === USERS_PANEL_ID,
'num_unread': fp.sum(fp.map(fp.curry(u.getAttribute)('num_unread'), chats))
}); });
}, this.el.insertAdjacentElement(
'afterBegin',
insertIntoDOM () { _converse.xmppstatusview.render().el
this.parent_el.appendChild(this.render().el); );
this.tabs = this.parent_el.parentNode.querySelector('#controlbox-tabs');
this.tabs.appendChild(this.tab_el);
return this;
}, },
generateAddContactHTML (settings={}) { generateAddContactHTML (settings={}) {
...@@ -728,11 +659,10 @@ ...@@ -728,11 +659,10 @@
}, },
initialize () { initialize () {
_converse.chatboxviews.el.insertAdjacentElement('afterBegin', this.render().el); _converse.chatboxviews.insertRowColumn(this.render().el);
const that = this; _converse.api.waitUntil('initialized')
_converse.api.waitUntil('initialized').then(() => { .then(this.render.bind(this))
this.render(); .catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL));
}).catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL));
}, },
render () { render () {
...@@ -796,7 +726,6 @@ ...@@ -796,7 +726,6 @@
*/ */
const view = _converse.chatboxviews.get('controlbox'); const view = _converse.chatboxviews.get('controlbox');
view.model.set({connected:false}); view.model.set({connected:false});
view.el.querySelector('#controlbox-tabs').innerHTML = '';
view.renderLoginPanel(); view.renderLoginPanel();
}; };
_converse.on('disconnected', disconnect); _converse.on('disconnected', disconnect);
......
src/converse-dragresize.js
View file @ ede21e7c
...@@ -312,8 +312,8 @@ ...@@ -312,8 +312,8 @@
return result; return result;
}, },
renderContactsPanel () { renderControlBoxPane () {
const result = this.__super__.renderContactsPanel.apply(this, arguments); const result = this.__super__.renderControlBoxPane.apply(this, arguments);
this.initDragResize().setDimensions(); this.initDragResize().setDimensions();
return result; return result;
} }
......
src/converse-muc.js
View file @ ede21e7c
...@@ -26,7 +26,6 @@ ...@@ -26,7 +26,6 @@
"tpl!chatroom_password_form", "tpl!chatroom_password_form",
"tpl!chatroom_sidebar", "tpl!chatroom_sidebar",
"tpl!chatroom_toolbar", "tpl!chatroom_toolbar",
"tpl!chatrooms_tab",
"tpl!info", "tpl!info",
"tpl!occupant", "tpl!occupant",
"tpl!room_description", "tpl!room_description",
...@@ -57,7 +56,6 @@ ...@@ -57,7 +56,6 @@
tpl_chatroom_password_form, tpl_chatroom_password_form,
tpl_chatroom_sidebar, tpl_chatroom_sidebar,
tpl_chatroom_toolbar, tpl_chatroom_toolbar,
tpl_chatrooms_tab,
tpl_info, tpl_info,
tpl_occupant, tpl_occupant,
tpl_room_description, tpl_room_description,
...@@ -69,7 +67,6 @@ ...@@ -69,7 +67,6 @@
) { ) {
"use strict"; "use strict";
const ROOMS_PANEL_ID = 'chatrooms';
const CHATROOMS_TYPE = 'chatroom'; const CHATROOMS_TYPE = 'chatroom';
const MUC_ROLE_WEIGHTS = { const MUC_ROLE_WEIGHTS = {
...@@ -160,17 +157,21 @@ ...@@ -160,17 +157,21 @@
}, },
ControlBoxView: { ControlBoxView: {
renderRoomsPanel () { renderRoomsPanel () {
const { _converse } = this.__super__; const { _converse } = this.__super__;
this.roomspanel = new _converse.RoomsPanel({ this.roomspanel = new _converse.RoomsPanel({
'parent': this.el.querySelector('.controlbox-panes'),
'model': new (_converse.RoomsPanelModel.extend({ 'model': new (_converse.RoomsPanelModel.extend({
id: b64_sha1(`converse.roomspanel${_converse.bare_jid}`), // Required by sessionStorage id: b64_sha1(`converse.roomspanel${_converse.bare_jid}`), // Required by sessionStorage
browserStorage: new Backbone.BrowserStorage[_converse.storage]( browserStorage: new Backbone.BrowserStorage[_converse.storage](
b64_sha1(`converse.roomspanel${_converse.bare_jid}`)) b64_sha1(`converse.roomspanel${_converse.bare_jid}`))
}))() }))()
}); });
this.roomspanel.insertIntoDOM().model.fetch(); this.roomspanel.model.fetch();
this.el.querySelector('.controlbox-pane').insertAdjacentElement(
'beforeEnd', this.roomspanel.render().el);
if (!this.roomspanel.model.get('nick')) { if (!this.roomspanel.model.get('nick')) {
this.roomspanel.model.save({ this.roomspanel.model.save({
nick: Strophe.getNodeFromJid(_converse.bare_jid) nick: Strophe.getNodeFromJid(_converse.bare_jid)
...@@ -179,9 +180,9 @@ ...@@ -179,9 +180,9 @@
_converse.emit('roomsPanelRendered'); _converse.emit('roomsPanelRendered');
}, },
renderContactsPanel () { renderControlBoxPane () {
const { _converse } = this.__super__; const { _converse } = this.__super__;
this.__super__.renderContactsPanel.apply(this, arguments); this.__super__.renderControlBoxPane.apply(this, arguments);
if (_converse.allow_muc) { if (_converse.allow_muc) {
this.renderRoomsPanel(); this.renderRoomsPanel();
} }
...@@ -470,6 +471,7 @@ ...@@ -470,6 +471,7 @@
}, },
render () { render () {
this.setClasses();
this.el.setAttribute('id', this.model.get('box_id')); this.el.setAttribute('id', this.model.get('box_id'));
this.el.innerHTML = tpl_chatroom(); this.el.innerHTML = tpl_chatroom();
this.renderHeading(); this.renderHeading();
...@@ -480,6 +482,20 @@ ...@@ -480,6 +482,20 @@
return this; return this;
}, },
setClasses () {
if (_converse.view_mode === 'fullscreen') {
this.el.classList.add('col-xl-10');
this.el.classList.add('col-md-9');
} else {
this.el.classList.add('col');
this.el.classList.add('col-lg-4');
this.el.classList.add('col-md-6');
this.el.classList.add('col-sm-8');
this.el.classList.add('col-sx-12');
this.el.classList.add('w-100');
}
},
renderHeading () { renderHeading () {
/* Render the heading UI of the chat room. */ /* Render the heading UI of the chat room. */
this.el.querySelector('.chat-head-chatroom').innerHTML = this.generateHeadingHTML(); this.el.querySelector('.chat-head-chatroom').innerHTML = this.generateHeadingHTML();
...@@ -2556,11 +2572,9 @@ ...@@ -2556,11 +2572,9 @@
}); });
_converse.RoomsPanel = Backbone.NativeView.extend({ _converse.RoomsPanel = Backbone.NativeView.extend({
/* Backbone.NativeView which renders the "Rooms" tab and accompanying /* Backbone.NativeView which renders MUC section of the control box.
* panel in the control box.
* *
* In this panel, chat rooms can be listed, joined and new rooms * Chat rooms can be listed, joined and new rooms can be created.
* can be created.
*/ */
tagName: 'div', tagName: 'div',
className: 'controlbox-pane', className: 'controlbox-pane',
...@@ -2576,46 +2590,16 @@ ...@@ -2576,46 +2590,16 @@
initialize (cfg) { initialize (cfg) {
this.join_form = new _converse.MUCJoinForm({'model': this.model}); this.join_form = new _converse.MUCJoinForm({'model': this.model});
this.parent_el = cfg.parent;
this.tab_el = document.createElement('li');
this.model.on('change:muc_domain', this.onDomainChange, this); this.model.on('change:muc_domain', this.onDomainChange, this);
this.model.on('change:nick', this.onNickChange, this); this.model.on('change:nick', this.onNickChange, this);
_converse.chatboxes.on('change:num_unread', this.renderTab, this);
_converse.chatboxes.on('add', _.debounce(this.renderTab, 100), this);
}, },
render () { render () {
this.el.innerHTML = tpl_room_panel(); this.el.innerHTML = tpl_room_panel({
'title_new_room': __('Click to add a new room')
});
this.join_form.setElement(this.el.querySelector('.add-chatroom')); this.join_form.setElement(this.el.querySelector('.add-chatroom'));
this.join_form.render(); this.join_form.render();
this.renderTab();
const controlbox = _converse.chatboxes.get('controlbox');
if (controlbox.get('active-panel') !== ROOMS_PANEL_ID) {
this.el.classList.add('hidden');
} else {
this.el.classList.remove('hidden');
}
return this;
},
renderTab () {
const controlbox = _converse.chatboxes.get('controlbox');
const chatrooms = fp.filter(
_.partial(u.isOfType, CHATROOMS_TYPE),
_converse.chatboxes.models
);
this.tab_el.innerHTML = tpl_chatrooms_tab({
'label_rooms': __('Rooms'),
'is_current': controlbox.get('active-panel') === ROOMS_PANEL_ID,
'num_unread': fp.sum(fp.map(fp.curry(u.getAttribute)('num_unread'), chatrooms))
});
},
insertIntoDOM () {
this.parent_el.appendChild(this.render().el);
this.tabs = this.parent_el.parentNode.querySelector('#controlbox-tabs');
this.tabs.appendChild(this.tab_el);
return this; return this;
}, },
......
src/converse-profile.js
View file @ ede21e7c
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
(function (root, factory) { (function (root, factory) {
define(["converse-core", define(["converse-core",
"tpl!change_status_message", "tpl!change_status_message",
"tpl!chat_status", "tpl!profile_view",
"tpl!choose_status", "tpl!choose_status",
"tpl!status_option", "tpl!status_option",
"converse-vcard" "converse-vcard"
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
}(this, function ( }(this, function (
converse, converse,
tpl_change_status_message, tpl_change_status_message,
tpl_chat_status, tpl_profile_view,
tpl_choose_status, tpl_choose_status,
tpl_status_option tpl_status_option
) { ) {
...@@ -35,8 +35,9 @@ ...@@ -35,8 +35,9 @@
const { _converse } = this, const { _converse } = this,
{ __ } = _converse; { __ } = _converse;
_converse.XMPPStatusView = Backbone.NativeView.extend({
el: "form#set-xmpp-status", _converse.XMPPStatusView = Backbone.VDOMView.extend({
tagName: "div",
events: { events: {
"click a.choose-xmpp-status": "toggleOptions", "click a.choose-xmpp-status": "toggleOptions",
"click #fancy-xmpp-status-select a.change-xmpp-status-message": "renderStatusChangeForm", "click #fancy-xmpp-status-select a.change-xmpp-status-message": "renderStatusChangeForm",
...@@ -50,30 +51,17 @@ ...@@ -50,30 +51,17 @@
this.model.on("update-status-ui", this.updateStatusUI, this); this.model.on("update-status-ui", this.updateStatusUI, this);
}, },
render () { toHTML () {
// Replace the default dropdown with something nicer
const options = this.el.querySelectorAll('#select-xmpp-status option');
const chat_status = this.model.get('status') || 'offline'; const chat_status = this.model.get('status') || 'offline';
this.el.innerHTML = tpl_choose_status(); return tpl_profile_view(_.extend(this.model.toJSON(), {
'fullname': this.model.get('fullname') || _converse.bare_jid,
this.el.querySelector('#fancy-xmpp-status-select') 'status_message': this.model.get('status_message') ||
.innerHTML = tpl_chat_status({ __("I am %1$s", this.getPrettyStatus(chat_status)),
'status_message': this.model.get('status_message') || 'chat_status': chat_status,
__("I am %1$s", this.getPrettyStatus(chat_status)), 'title_change_settings': __('Change settings'),
'chat_status': chat_status, 'title_change_status': __('Click to change your chat status'),
'desc_custom_status': __('Click here to write a custom status message'), 'title_your_profile': __('Your profile')
'desc_change_status': __('Click to change your chat status') }));
});
// iterate through all the <option> elements and add option values
const options_list = _.map(
options,
(el) => tpl_status_option({'value': el.value, 'text': el.text })
);
const options_target = this.el.querySelector(".xmpp-status-menu");
options_target.classList.add('collapsed');
options_target.innerHTML = options_list.join('');
return this;
}, },
toggleOptions (ev) { toggleOptions (ev) {
...@@ -133,14 +121,7 @@ ...@@ -133,14 +121,7 @@
// For translators: the %1$s part gets replaced with the status // For translators: the %1$s part gets replaced with the status
// Example, I am online // Example, I am online
const status_message = model.get('status_message') || __("I am %1$s", this.getPrettyStatus(stat)); const status_message = model.get('status_message') || __("I am %1$s", this.getPrettyStatus(stat));
const fancy_select = this.el.querySelector('#fancy-xmpp-status-select'); // TODO
fancy_select.classList.remove('no-border');
fancy_select.innerHTML = tpl_chat_status({
'chat_status': stat,
'status_message': status_message,
'desc_custom_status': __('Click here to write a custom status message'),
'desc_change_status': __('Click to change your chat status')
});
} }
}); });
} }
......
src/converse-roomslist.js
View file @ ede21e7c
...@@ -131,7 +131,7 @@ ...@@ -131,7 +131,7 @@
_converse.RoomsListView = Backbone.OrderedListView.extend({ _converse.RoomsListView = Backbone.OrderedListView.extend({
tagName: 'div', tagName: 'div',
className: 'open-rooms-list rooms-list-container', className: 'open-rooms-list list-container rooms-list-container',
events: { events: {
'click .add-bookmark': 'addBookmark', 'click .add-bookmark': 'addBookmark',
'click .close-room': 'closeRoom', 'click .close-room': 'closeRoom',
...@@ -177,9 +177,9 @@ ...@@ -177,9 +177,9 @@
const controlboxview = _converse.chatboxviews.get('controlbox'); const controlboxview = _converse.chatboxviews.get('controlbox');
if (!_.isUndefined(controlboxview) && if (!_.isUndefined(controlboxview) &&
!_converse.root.contains(this.el)) { !_converse.root.contains(this.el)) {
const container = controlboxview.el.querySelector('#chatrooms'); const el = controlboxview.el.querySelector('.open-rooms-list');
if (!_.isNull(container)) { if (!_.isNull(el)) {
container.insertBefore(this.el, container.firstChild); el.parentNode.replaceChild(this.el, el);
} }
} }
}, },
......
src/converse-rosterview.js
View file @ ede21e7c
...@@ -129,7 +129,8 @@ ...@@ -129,7 +129,8 @@
}); });
_converse.RosterFilterView = Backbone.VDOMView.extend({ _converse.RosterFilterView = Backbone.VDOMView.extend({
tagName: 'span', tagName: 'form',
className: 'roster-filter-form',
events: { events: {
"keydown .roster-filter": "liveFilter", "keydown .roster-filter": "liveFilter",
"submit form.roster-filter-form": "submitFilter", "submit form.roster-filter-form": "submitFilter",
...@@ -149,9 +150,9 @@ ...@@ -149,9 +150,9 @@
_.extend(this.model.toJSON(), { _.extend(this.model.toJSON(), {
visible: this.shouldBeVisible(), visible: this.shouldBeVisible(),
placeholder: __('Filter'), placeholder: __('Filter'),
label_contacts: LABEL_CONTACTS, title_contact_filter: __('Filter by contact name'),
label_groups: LABEL_GROUPS, title_group_filter: __('Filter by group name'),
label_state: __('State'), title_status_filter: __('Filter by status'),
label_any: __('Any'), label_any: __('Any'),
label_unread_messages: __('Unread'), label_unread_messages: __('Unread'),
label_online: __('Online'), label_online: __('Online'),
...@@ -655,9 +656,14 @@ ...@@ -655,9 +656,14 @@
}, },
render () { render () {
this.el.innerHTML = ""; this.el.innerHTML = tpl_roster({
this.el.appendChild(this.filter_view.render().el); 'heading_contacts': __('Contacts'),
this.renderRoster(); 'title_add_contact': __('Add a contact')
});
const form = this.el.querySelector('.roster-filter-form');
this.el.replaceChild(this.filter_view.render().el, form);
this.roster_el = this.el.querySelector('.roster-contacts');
if (!_converse.allow_contact_requests) { if (!_converse.allow_contact_requests) {
// XXX: if we ever support live editing of config then // XXX: if we ever support live editing of config then
// we'll need to be able to remove this class on the fly. // we'll need to be able to remove this class on the fly.
...@@ -666,13 +672,6 @@ ...@@ -666,13 +672,6 @@
return this; return this;
}, },
renderRoster () {
const div = document.createElement('div');
div.insertAdjacentHTML('beforeend', tpl_roster());
this.roster_el = div.firstChild;
this.el.insertAdjacentElement('beforeend', this.roster_el);
},
createRosterFilter () { createRosterFilter () {
// Create a model on which we can store filter properties // Create a model on which we can store filter properties
const model = new _converse.RosterFilter(); const model = new _converse.RosterFilter();
...@@ -703,16 +702,9 @@ ...@@ -703,16 +702,9 @@
if (!u.isVisible(this.roster_el)) { if (!u.isVisible(this.roster_el)) {
u.showElement(this.roster_el); u.showElement(this.roster_el);
} }
return this.showHideFilter();
}, _converse.animate ? 100 : 0),
showHideFilter () {
if (!u.isVisible(this.el)) {
return;
}
this.filter_view.showOrHide(); this.filter_view.showOrHide();
return this; return this;
}, }, _converse.animate ? 100 : 0),
filter (query, type) { filter (query, type) {
// First we make sure the filter is restored to its // First we make sure the filter is restored to its
......
src/templates/chat_status.html deleted 100644 → 0
View file @ b6501bcf
<div class="xmpp-status">
<a class="choose-xmpp-status {{{o.chat_status}}} icon-{{{o.chat_status}}}" data-value="{{{o.status_message}}}" href="#" title="{{{o.desc_change_status}}}">
{{{o.status_message}}}
</a>
<a class="change-xmpp-status-message icon-pencil" href="#" title="{{{o.desc_custom_status}}}"></a>
</div>
src/templates/chatrooms_tab.html deleted 100644 → 0
View file @ b6501bcf
<a class="s rooms-tab
{[ if (o.is_current) { ]} current {[ } ]}
{[ if (o.num_unread) { ]} unread-msgs {[ } ]}"
data-id="chatrooms" href="#chatrooms">
{{{o.label_rooms}}}
{[ if (o.num_unread) { ]}
<span class="msgs-indicator">{{{o. num_unread }}}</span>
{[ } ]}
</a>
src/templates/contacts_tab.html deleted 100644 → 0
View file @ b6501bcf
<a class="s contacts-tab
{[ if (o.is_current) { ]} current {[ } ]}
{[ if (o.num_unread) { ]} unread-msgs {[ } ]}"
data-id="users" href="#users">
{{{o.label_contacts}}}
{[ if (o.num_unread) { ]}
<span class="msgs-indicator">{{{ o.num_unread }}}</span>
{[ } ]}
</a>
src/templates/controlbox.html
View file @ ede21e7c
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<div class="chat-head controlbox-head"> <div class="chat-head controlbox-head">
<ul id="controlbox-tabs"></ul>
{[ if (!o.sticky_controlbox) { ]} {[ if (!o.sticky_controlbox) { ]}
<a class="chatbox-btn close-chatbox-button icon-close"></a> <a class="chatbox-btn close-chatbox-button icon-close"></a>
{[ } ]} {[ } ]}
......
src/templates/profile_view.html 0 → 100644
View file @ ede21e7c
<div class="userinfo">
<div class="d-flex">
<canvas height="20" width="20" class="avatar align-self-center"></canvas>
<span class="username w-100 align-self-center">{{{o.fullname}}}</span>
<a class="chatbox-btn fa fa-vcard align-self-center" title="{{{o.title_your_profile}}}" data-toggle="modal" data-target="#userProfileModal"></a>
<a class="chatbox-btn fa fa-cog align-self-center" title="{{{o.title_change_status}}}" data-toggle="modal" data-target="#settingsModal"></a>
</div>
<div class="d-flex xmpp-status">
<span class="{{{o.chat_status}}} w-100 align-self-center" data-value="{{{o.chat_status}}}">
<span class="fa fa-circle"></span> {{{o.status_message}}}</span>
<a class="chatbox-btn fa fa-pencil" title="{{{o.title_change_status}}}" data-toggle="modal" data-target="#changeStatusModal"></a>
</div>
</div>
src/templates/room_panel.html
View file @ ede21e7c
<!-- <div id="chatrooms"> -->
<form class="add-chatroom"></form> <form class="add-chatroom"></form>
<div class="list-container rooms-list-container"> <div class="d-flex">
<dl id="available-chatrooms" class="rooms-list"></dl> <span class="w-100">Chatrooms</span>
<a class="chatbox-btn fa fa-users" title="{{{o.title_new_room}}}" data-toggle="modal" data-target="#chatroomsModal"></a>
</div> </div>
<div class="list-container open-rooms-list rooms-list-container">
<div id="available-chatrooms" class="rooms-list"></div>
</div>
<!-- </div> -->
src/templates/roster.html
View file @ ede21e7c
<div class="d-flex">
<span class="w-100">{{{o.heading_contacts}}}</span>
<a class="chatbox-btn fa fa-user-plus" title="{{{o.title_add_contact}}}"
data-toggle="modal" data-target="#addContactModal"></a>
</div>
<form class="roster-filter-form"></form>
<div class="roster-contacts"></div> <div class="roster-contacts"></div>
src/templates/roster_filter.html
View file @ ede21e7c
<span {[ if (!o.visible) { ]} class="hidden" {[ } ]}> <form class="roster-filter-form input-button-group {[ if (!o.visible) { ]} hidden {[ } ]}">
<form class="pure-form roster-filter-form input-button-group"> <div class="form-group form-inline">
<input value="{{{o.filter_text}}}" <input value="{{{o.filter_text}}}"
class="roster-filter roster-filter-{{{o.filter_type}}}" class="roster-filter roster-filter-{{{o.filter_type}}}"
placeholder="{{{o.placeholder}}}"> placeholder="{{{o.placeholder}}}">
<select class="state-type state-type-{{{o.filter_type}}}">
<option value="">{{{o.label_any}}}</option> <select class="state-type state-type-{{{o.filter_type}}}">
<option {[ if (o.chat_state === 'unread_messages') { ]} selected="selected" {[ } ]} <option value="">{{{o.label_any}}}</option>
value="unread_messages">{{{o.label_unread_messages}}}</option> <option {[ if (o.chat_state === 'unread_messages') { ]} selected="selected" {[ } ]}
<option {[ if (o.chat_state === 'online') { ]} selected="selected" {[ } ]} value="unread_messages">{{{o.label_unread_messages}}}</option>
value="online">{{{o.label_online}}}</option> <option {[ if (o.chat_state === 'online') { ]} selected="selected" {[ } ]}
<option {[ if (o.chat_state === 'chat') { ]} selected="selected" {[ } ]} value="online">{{{o.label_online}}}</option>
value="chat">{{{o.label_chatty}}}</option> <option {[ if (o.chat_state === 'chat') { ]} selected="selected" {[ } ]}
<option {[ if (o.chat_state === 'dnd') { ]} selected="selected" {[ } ]} value="chat">{{{o.label_chatty}}}</option>
value="dnd">{{{o.label_busy}}}</option> <option {[ if (o.chat_state === 'dnd') { ]} selected="selected" {[ } ]}
<option {[ if (o.chat_state === 'away') { ]} selected="selected" {[ } ]} value="dnd">{{{o.label_busy}}}</option>
value="away">{{{o.label_away}}}</option> <option {[ if (o.chat_state === 'away') { ]} selected="selected" {[ } ]}
<option {[ if (o.chat_state === 'xa') { ]} selected="selected" {[ } ]} value="away">{{{o.label_away}}}</option>
value="xa">{{{o.label_xa}}}</option> <option {[ if (o.chat_state === 'xa') { ]} selected="selected" {[ } ]}
<option {[ if (o.chat_state === 'offline') { ]} selected="selected" {[ } ]} value="xa">{{{o.label_xa}}}</option>
value="offline">{{{o.label_offline}}}</option> <option {[ if (o.chat_state === 'offline') { ]} selected="selected" {[ } ]}
</select> value="offline">{{{o.label_offline}}}</option>
<select class="filter-type"> </select>
<option {[ if (o.filter_type === 'contacts') { ]} selected="selected" {[ } ]}
value="contacts">{{{o.label_contacts}}}</option> <div class="filter-by">
<option {[ if (o.filter_type === 'groups') { ]} selected="selected" {[ } ]} <span class="fa fa-user" data-type="contact" title="{{{o.title_contact_filter}}}"></span>
value="groups">{{{o.label_groups}}}</option> <span class="fa fa-users" data-type="group" title="{{{o.title_group_filter}}}"></span>
<option {[ if (o.filter_type === 'state') { ]} selected="selected" {[ } ]} <span class="fa fa-circle" data-type="status" title="{{{o.title_status_filter}}}"></span>
value="state">{{{o.label_state}}}</option> </div>
</select> </div>
</form> </form>
</span>
src/utils.js
View file @ ede21e7c
...@@ -655,6 +655,9 @@ ...@@ -655,6 +655,9 @@
} }
u.isVisible = function (el) { u.isVisible = function (el) {
if (u.hasClass('hidden', el)) {
return false;
}
// XXX: Taken from jQuery's "visible" implementation // XXX: Taken from jQuery's "visible" implementation
return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0; return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7