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

Update CSS of controlbox list items

Browse Source 
Trying to use more generic CSS selectors and to extract out common patterns.
This commit is contained in:
JC Brand 2018-07-04 10:46:52 +02:00
parent 47ec7501ed
commit 388719ff2d
12 changed files with 232 additions and 341 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

346
css/converse.css
View File

@ -8258,153 +8258,6 @@ body.reset {
#conversejs.converse-mobile #controlbox #converse-login input[type=button] {
width: auto; }
#conversejs .list-container {
text-align: left;
padding: 0.3em 0; }
#conversejs .list-container .rooms-toggle {
font-family: "Century Gothic", futura, "URW Gothic L", Verdana, sans-serif;
display: block;
color: #666;
padding: 0 0 0.5rem 0; }
#conversejs .list-container .rooms-toggle:hover {
color: #585B51; }
#conversejs .items-list {
text-align: left; }
#conversejs .items-list .list-item {
border: none;
clear: both;
color: #666;
display: block;
height: 2em;
overflow: hidden;
padding-top: 0.5em;
text-shadow: 0 1px 0 #FAFAFA;
word-wrap: break-word; }
#conversejs .items-list .list-item.open {
background-color: #578EA9; }
#conversejs .items-list .list-item.open:hover {
background-color: #578EA9 !important; }
#conversejs .items-list .list-item.open a {
color: white !important; }
#conversejs .items-list .list-item.open .fa:hover {
color: white; }
#conversejs .items-list .list-item.open .fa-circle {
color: #89d6ab; }
#conversejs .items-list .list-item.open .fa-minus-circle {
color: #f0a794; }
#conversejs .items-list .list-item.open .fa-dot-circle-o {
color: #f0c594; }
#conversejs .items-list .list-item.open .fa-circle-o,
#conversejs .items-list .list-item.open .fa-times-circle {
color: #e6e7e4; }
#conversejs .items-list .available-chatroom:hover,
#conversejs .items-list .open-headline:hover,
#conversejs .items-list .open-chatroom:hover,
#conversejs .items-list .list-item:hover {
background-color: #eff4f7; }
#conversejs .items-list .available-chatroom:hover .fa,
#conversejs .items-list .open-headline:hover .fa,
#conversejs .items-list .open-chatroom:hover .fa,
#conversejs .items-list .list-item:hover .fa {
display: block !important; }
#conversejs .items-list .available-chatroom.unread-msgs .msgs-indicator,
#conversejs .items-list .open-headline.unread-msgs .msgs-indicator,
#conversejs .items-list .open-chatroom.unread-msgs .msgs-indicator,
#conversejs .items-list .list-item.unread-msgs .msgs-indicator {
border-radius: 10%;
opacity: 1; }
#conversejs .items-list .available-chatroom.unread-msgs .available-room,
#conversejs .items-list .available-chatroom.unread-msgs .open-room,
#conversejs .items-list .open-headline.unread-msgs .available-room,
#conversejs .items-list .open-headline.unread-msgs .open-room,
#conversejs .items-list .open-chatroom.unread-msgs .available-room,
#conversejs .items-list .open-chatroom.unread-msgs .open-room,
#conversejs .items-list .list-item.unread-msgs .available-room,
#conversejs .items-list .list-item.unread-msgs .open-room {
width: 100%;
font-weight: bold; }
#conversejs .items-list .available-chatroom a:hover,
#conversejs .items-list .open-headline a:hover,
#conversejs .items-list .open-chatroom a:hover,
#conversejs .items-list .list-item a:hover {
color: #206485; }
#conversejs .items-list .available-chatroom a.fa,
#conversejs .items-list .open-headline a.fa,
#conversejs .items-list .open-chatroom a.fa,
#conversejs .items-list .list-item a.fa {
display: none; }
#conversejs .items-list .available-chatroom a.fa:before,
#conversejs .items-list .open-headline a.fa:before,
#conversejs .items-list .open-chatroom a.fa:before,
#conversejs .items-list .list-item a.fa:before {
font-size: 15px; }
#conversejs .items-list .available-chatroom a.open-room,
#conversejs .items-list .open-headline a.open-room,
#conversejs .items-list .open-chatroom a.open-room,
#conversejs .items-list .list-item a.open-room {
width: 68%;
float: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 0.5em; }
#conversejs .items-list .available-chatroom a.available-room,
#conversejs .items-list .open-headline a.available-room,
#conversejs .items-list .open-chatroom a.available-room,
#conversejs .items-list .list-item a.available-room {
width: 85%; }
#conversejs .items-list .available-chatroom .add-bookmark,
#conversejs .items-list .available-chatroom .remove-bookmark,
#conversejs .items-list .available-chatroom .close-room,
#conversejs .items-list .available-chatroom .room-info,
#conversejs .items-list .open-headline .add-bookmark,
#conversejs .items-list .open-headline .remove-bookmark,
#conversejs .items-list .open-headline .close-room,
#conversejs .items-list .open-headline .room-info,
#conversejs .items-list .open-chatroom .add-bookmark,
#conversejs .items-list .open-chatroom .remove-bookmark,
#conversejs .items-list .open-chatroom .close-room,
#conversejs .items-list .open-chatroom .room-info,
#conversejs .items-list .list-item .add-bookmark,
#conversejs .items-list .list-item .remove-bookmark,
#conversejs .items-list .list-item .close-room,
#conversejs .items-list .list-item .room-info {
color: #A8ABA1; }
#conversejs .items-list .available-chatroom .add-bookmark.button-on,
#conversejs .items-list .available-chatroom .remove-bookmark.button-on,
#conversejs .items-list .available-chatroom .close-room.button-on,
#conversejs .items-list .available-chatroom .room-info.button-on,
#conversejs .items-list .open-headline .add-bookmark.button-on,
#conversejs .items-list .open-headline .remove-bookmark.button-on,
#conversejs .items-list .open-headline .close-room.button-on,
#conversejs .items-list .open-headline .room-info.button-on,
#conversejs .items-list .open-chatroom .add-bookmark.button-on,
#conversejs .items-list .open-chatroom .remove-bookmark.button-on,
#conversejs .items-list .open-chatroom .close-room.button-on,
#conversejs .items-list .open-chatroom .room-info.button-on,
#conversejs .items-list .list-item .add-bookmark.button-on,
#conversejs .items-list .list-item .remove-bookmark.button-on,
#conversejs .items-list .list-item .close-room.button-on,
#conversejs .items-list .list-item .room-info.button-on {
color: #578EA9; }
#conversejs .items-list .available-chatroom .add-bookmark.button-on:hover,
#conversejs .items-list .available-chatroom .remove-bookmark.button-on:hover,
#conversejs .items-list .available-chatroom .close-room.button-on:hover,
#conversejs .items-list .available-chatroom .room-info.button-on:hover,
#conversejs .items-list .open-headline .add-bookmark.button-on:hover,
#conversejs .items-list .open-headline .remove-bookmark.button-on:hover,
#conversejs .items-list .open-headline .close-room.button-on:hover,
#conversejs .items-list .open-headline .room-info.button-on:hover,
#conversejs .items-list .open-chatroom .add-bookmark.button-on:hover,
#conversejs .items-list .open-chatroom .remove-bookmark.button-on:hover,
#conversejs .items-list .open-chatroom .close-room.button-on:hover,
#conversejs .items-list .open-chatroom .room-info.button-on:hover,
#conversejs .items-list .list-item .add-bookmark.button-on:hover,
#conversejs .items-list .list-item .remove-bookmark.button-on:hover,
#conversejs .items-list .list-item .close-room.button-on:hover,
#conversejs .items-list .list-item .room-info.button-on:hover {
color: #206485; }
#conversejs #converse-roster {
text-align: left;
width: 100%;
@ -8454,83 +8307,142 @@ body.reset {
padding-bottom: 0.3rem; }
#conversejs #converse-roster .roster-contacts .roster-group .group-toggle:hover {
color: #585B51; }
#conversejs #converse-roster .roster-contacts .roster-group li {
border: none;
clear: both;
color: #666;
display: block;
overflow-y: hidden;
text-shadow: 0 1px 0 #FAFAFA;
line-height: 14px;
width: 100%;
height: 2em;
padding-top: 0.5em; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a {
line-height: 16px; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a.fa {
width: 1.5em; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .req-contact-name {
padding: 0 0.2em 0 0; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat {
margin: 0;
padding: 0; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat.unread-msgs {
font-weight: bold; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat.unread-msgs .contact-name {
width: 70%; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat .msgs-indicator {
color: white;
background-color: #3AA569;
opacity: 1;
border-radius: 10%;
padding: 0.2em;
font-size: 12px; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat .contact-name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0;
margin: 0;
max-width: 80%;
float: none;
height: 100%; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat .contact-name.unread-msgs {
max-width: 60%; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat .avatar {
float: left;
display: inline-block; }
#conversejs #converse-roster .roster-contacts .roster-group li.current-xmpp-contact span {
font-size: 14px;
float: left;
margin-right: 0.5em; }
#conversejs #converse-roster .roster-contacts .roster-group li.odd {
background-color: #DCEAC5;
/* Make this difference */ }
#conversejs #converse-roster .roster-contacts .roster-group li a, #conversejs #converse-roster .roster-contacts .roster-group li span {
display: inline-block;
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a {
line-height: 16px; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a.fa {
width: 1.5em; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .req-contact-name {
padding: 0 0.2em 0 0; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat {
margin: 0;
padding: 0; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat.unread-msgs {
font-weight: bold; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat.unread-msgs .contact-name {
width: 70%; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat .msgs-indicator {
color: white;
background-color: #3AA569;
opacity: 1;
border-radius: 10%;
padding: 0.2em;
font-size: 12px; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat .contact-name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; }
#conversejs #converse-roster .roster-contacts .roster-group li span {
padding: 0; }
#conversejs #converse-roster .roster-contacts .roster-group li .decline-xmpp-request {
margin-left: 5px; }
#conversejs #converse-roster .roster-contacts .roster-group li .remove-xmpp-contact {
font-size: 10px;
margin: 0;
text-overflow: ellipsis;
padding: 0;
width: 2em;
display: none; }
#conversejs #converse-roster .roster-contacts .roster-group li .remove-xmpp-contact:before {
font-size: 14px; }
#conversejs #converse-roster .roster-contacts .roster-group li:hover {
background-color: #eff4f7; }
#conversejs #converse-roster .roster-contacts .roster-group li:hover .remove-xmpp-contact {
display: inline-block; }
margin: 0;
max-width: 90%;
float: none;
height: 100%; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat .contact-name.unread-msgs {
max-width: 60%; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat .avatar {
float: left;
display: inline-block; }
#conversejs #converse-roster .roster-contacts .roster-group li.current-xmpp-contact span {
font-size: 14px;
float: left;
margin-right: 0.5em; }
#conversejs #converse-roster .roster-contacts .roster-group li.odd {
background-color: #DCEAC5;
/* Make this difference */ }
#conversejs #converse-roster .roster-contacts .roster-group li a, #conversejs #converse-roster .roster-contacts .roster-group li span {
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; }
#conversejs #converse-roster .roster-contacts .roster-group li .decline-xmpp-request {
margin-left: 5px; }
#conversejs #converse-roster .roster-contacts .roster-group li:hover {
background-color: #eff4f7; }
#conversejs #converse-roster .roster-contacts .roster-group li:hover .remove-xmpp-contact {
display: inline-block; }
#conversejs #converse-roster span.pending-contact-name {
line-height: 16px;
width: 100%; }
#conversejs .list-container {
text-align: left;
padding: 0.3em 0; }
#conversejs .list-container .list-toggle {
font-family: "Century Gothic", futura, "URW Gothic L", Verdana, sans-serif;
display: block;
color: #666;
padding: 0 0 0.5rem 0; }
#conversejs .list-container .list-toggle:hover {
color: #585B51; }
#conversejs .items-list {
text-align: left; }
#conversejs .items-list .list-item {
border: none;
clear: both;
color: #666;
display: block;
height: 2em;
overflow: hidden;
padding-top: 0.5em;
text-shadow: 0 1px 0 #FAFAFA;
word-wrap: break-word; }
#conversejs .items-list .list-item .list-item-link {
font-size: 14px;
line-height: 14px;
padding-right: 0.5em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; }
#conversejs .items-list .list-item .list-item-link:hover {
color: #206485; }
#conversejs .items-list .list-item .list-item-action {
opacity: 0;
font-size: 10px;
padding: 0;
margin: 0 0 0 0.4em;
width: 1.6em;
color: #A8ABA1; }
#conversejs .items-list .list-item .list-item-action:before {
font-size: 14px; }
#conversejs .items-list .list-item .list-item-action.button-on {
color: #578EA9; }
#conversejs .items-list .list-item .list-item-action.button-on:hover {
color: #206485; }
#conversejs .items-list .list-item .list-item-action:hover {
color: #818479;
opacity: 1; }
#conversejs .items-list .list-item.open {
background-color: #578EA9; }
#conversejs .items-list .list-item.open:hover {
background-color: #578EA9 !important; }
#conversejs .items-list .list-item.open a {
color: white; }
#conversejs .items-list .list-item.open .list-item-link:hover {
color: white; }
#conversejs .items-list .list-item.open .list-item-action {
color: #e3eef3; }
#conversejs .items-list .list-item.open .list-item-action:hover {
color: white; }
#conversejs .items-list .list-item.open .fa-circle {
color: #89d6ab; }
#conversejs .items-list .list-item.open .fa-minus-circle {
color: #f0a794; }
#conversejs .items-list .list-item.open .fa-dot-circle-o {
color: #f0c594; }
#conversejs .items-list .list-item.open .fa-circle-o,
#conversejs .items-list .list-item.open .fa-times-circle {
color: #e6e7e4; }
#conversejs .items-list .list-item:hover {
background-color: #eff4f7; }
#conversejs .items-list .list-item:hover .fa {
opacity: 1; }
#conversejs .items-list .list-item.unread-msgs .msgs-indicator {
border-radius: 10%;
opacity: 1; }
#conversejs .items-list .list-item.unread-msgs .available-room,
#conversejs .items-list .list-item.unread-msgs .open-room {
width: 100%;
font-weight: bold; }
#conversejs.converse-embedded .add-chatroom input[type="submit"],
#conversejs.converse-embedded .add-chatroom input[type="button"],
#conversejs .add-chatroom input[type="submit"],

20
dist/converse.js vendored
View File

@ -80816,7 +80816,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
events: {
'click .add-bookmark': 'addBookmark',
'click .close-room': 'closeRoom',
'click .rooms-toggle': 'toggleRoomsList',
'click .list-toggle': 'toggleRoomsList',
'click .remove-bookmark': 'removeBookmark',
'click .open-room': 'openRoom'
},
@ -83950,7 +83950,7 @@ __e(o.jid) +
__e(o.open_title) +
'" href="#">' +
__e(o.name) +
'</a>\n <a class="remove-bookmark fa fa-bookmark align-self-center ';
'</a>\n <a class="list-item-action remove-bookmark fa fa-bookmark align-self-center ';
if (o.bookmarked) { ;
__p += ' button-on ';
} ;
@ -83977,7 +83977,7 @@ var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./no
module.exports = function(o) {
var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
function print() { __p += __j.call(arguments, '') }
__p += '<!-- src/templates/bookmarks_list.html -->\n<a href="#" class="rooms-toggle bookmarks-toggle controlbox-padded" title="' +
__p += '<!-- src/templates/bookmarks_list.html -->\n<a href="#" class="list-toggle bookmarks-toggle controlbox-padded" title="' +
__e(o.desc_bookmarks) +
'">\n <span class="fa ';
if (o.toggle_state === o._converse.OPENED) { ;
@ -86177,7 +86177,7 @@ var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./no
module.exports = function(o) {
var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
function print() { __p += __j.call(arguments, '') }
__p += '<!-- src/templates/rooms_list.html -->\n<a href="#" class="rooms-toggle open-rooms-toggle controlbox-padded" title="' +
__p += '<!-- src/templates/rooms_list.html -->\n<a href="#" class="list-toggle open-rooms-toggle controlbox-padded" title="' +
__e(o.desc_rooms) +
'">\n <span class="fa ';
if (o.toggle_state === o._converse.OPENED) { ;
@ -86220,7 +86220,7 @@ __p += '\n <span class="msgs-indicator badge badge-info">' +
__e( o.num_unread ) +
'</span>\n';
} ;
__p += '\n<a class="open-room available-room w-100"\n data-room-jid="' +
__p += '\n<a class="list-item-link open-room available-room w-100"\n data-room-jid="' +
__e(o.jid) +
'"\n title="' +
__e(o.open_title) +
@ -86228,7 +86228,7 @@ __e(o.open_title) +
__e(o.name || o.jid) +
'</a>\n\n';
if (o.allow_bookmarks) { ;
__p += '\n<a class="fa ';
__p += '\n<a class="list-item-action fa ';
if (o.bookmarked) { ;
__p += ' fa-bookmark remove-bookmark button-on ';
} else { ;
@ -86250,11 +86250,11 @@ __e(o.info_add_bookmark) +
} ;
__p += '"\n href="#">&nbsp;</a>\n';
} ;
__p += '\n<a class="room-info fa fa-info-circle" data-room-jid="' +
__p += '\n\n<a class="list-item-action room-info fa fa-info-circle" data-room-jid="' +
__e(o.jid) +
'"\n title="' +
__e(o.info_title) +
'" href="#">&nbsp;</a>\n\n<a class="fa fa-times close-room"\n data-room-jid="' +
'" href="#">&nbsp;</a>\n\n<a class="list-item-action fa fa-times close-room"\n data-room-jid="' +
__e(o.jid) +
'"\n data-room-name="' +
__e(o.name || o.jid) +
@ -86418,7 +86418,7 @@ var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./no
module.exports = function(o) {
var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
function print() { __p += __j.call(arguments, '') }
__p += '<!-- src/templates/roster_item.html -->\n<a class="cbox-list-item open-chat w-100 ';
__p += '<!-- src/templates/roster_item.html -->\n<a class="list-item-link cbox-list-item open-chat w-100 ';
if (o.num_unread) { ;
__p += ' unread-msgs ';
} ;
@ -86442,7 +86442,7 @@ __p += '">' +
__e(o.display_name) +
'</span></a>\n';
if (o.allow_contact_removal) { ;
__p += '\n<a class="remove-xmpp-contact fa fa-trash" title="' +
__p += '\n<a class="list-item-action remove-xmpp-contact fa fa-trash" title="' +
__e(o.desc_remove) +
'" href="#"></a>\n';
} ;

66
mockup/user-panel.html
View File

@ -35,24 +35,24 @@
<span class="w-100 controlbox-heading">Group Chats</span>
<a class="chatbox-btn fa fa-users" title="Click to add a new room" data-toggle="modal" data-target="#chatroomsModal"></a>
</div>
<div class="list-container rooms-list-container">
<div class="rooms-list items-list">
<div class="list-container items-list-container">
<div class="items-list">
<div class="controlbox-padded list-item available-chatroom d-flex flex-row open">
<a class="open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="chatroom.html">Capulet's orchard</a>
<a class="list-item-link open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="chatroom.html">Capulet's orchard</a>
<!-- <span class="badge badge-info msgs-indicator">1</span> -->
<a href="#"
class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
class="list-item-action room-info fa fa-info-circle" 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>
<a href="#" class="fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
<a href="#" class="list-item-action fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
</div>
<div class="controlbox-padded list-item 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="chatroom.html">Juliet's Balcony</a>
<a class="list-item-link open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="chatroom.html">Juliet's Balcony</a>
<a href="#"
class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
class="list-item-action room-info fa fa-info-circle" 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>
<a href="#" class="fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
<a href="#" class="list-item-action fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
</div>
</div>
</div>
@ -62,24 +62,24 @@
<div class="d-flex controlbox-padded">
<span class="w-100 controlbox-heading">Bookmarks</span>
</div>
<div class="list-container rooms-list-container">
<div class="rooms-list items-list">
<div class="list-container items-list-container">
<div class="items-list">
<div class="controlbox-padded list-item 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="chatroom.html">Capulet's orchard</a>
<a class="list-item-link open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="chatroom.html">Capulet's orchard</a>
<!-- <span class="badge badge-info msgs-indicator">1</span> -->
<a href="#"
class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
class="list-item-action room-info fa fa-info-circle" 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>
<a href="#" class="fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
<a href="#" class="list-item-action fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
</div>
<div class="controlbox-padded list-item 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="chatroom.html">Juliet's Balcony</a>
<a class="list-item-link open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="chatroom.html">Juliet's Balcony</a>
<a href="#"
class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
class="list-item-action room-info fa fa-info-circle" 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>
<a href="#" class="fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
<a href="#" class="list-item-action fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
</div>
</div>
</div>
@ -108,7 +108,7 @@
<div class="roster-group" id="xmpp-contact-requests">
<a href="#" class="group-toggle controlbox-padded " title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Contact Requests</a>
<ul class="roster-group-contacts">
<ul class="items-list roster-group-contacts">
<li class="list-item controlbox-padded offline requesting-xmpp-contact d-flex">
<span class="req-contact-name w-100">The Nurse</span>
<a class="accept-xmpp-request fa fa-check" title="Click here to accept this contact's request" href="#"></a>
@ -125,16 +125,16 @@
<div class="roster-group" data-group="Colleagues">
<a href="#" data-group="Colleagues" class="group-toggle controlbox-padded " title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Colleagues</a>
<ul>
<ul class="items-list roster-group-contacts">
<li class="list-item controlbox-padded away current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle-o" title="this contact is away"></span> Balthasar</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
<a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="list-item controlbox-padded dnd current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-minus-circle" title="This contact is busy"></span> Escalus, Prince of Verona</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
<a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
</li>
</div>
@ -142,21 +142,21 @@
<div class="roster-group" data-group="Family">
<a href="#" data-group="Family" class="group-toggle controlbox-padded " title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Family</a>
<ul>
<ul class="items-list roster-group-contacts">
<li class="list-item controlbox-padded online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> Benvolio Montague</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
<a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="list-item controlbox-padded offline current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-times-circle" title="This contact is offline"></span> Montague</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
<a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="list-item controlbox-padded offline current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-times-circle" title="This contact is offline"></span> Lady Montague</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
<a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
</ul>
</div>
@ -164,11 +164,11 @@
<div class="roster-group" data-group="Friends">
<a href="#" data-group="Friends" class="group-toggle controlbox-padded " title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Friends</a>
<ul>
<ul class="items-list roster-group-contacts">
<li class="list-item controlbox-padded online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> Mercutio</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
<a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
</ul>
</div>
@ -176,21 +176,21 @@
<div class="roster-group" data-group="Ungrouped">
<a href="#" class="group-toggle controlbox-padded " title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Ungrouped</a>
<ul>
<ul class="items-list roster-group-contacts">
<li class="list-item controlbox-padded online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> Gregory</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
<a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="list-item controlbox-padded online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> Peter</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
<a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="list-item controlbox-padded online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> Sampson</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
<a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
</ul>
</div>
@ -198,14 +198,14 @@
<div class="roster-group" id="pending-xmpp-contacts">
<a href="#" class="group-toggle controlbox-padded " title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Pending Contacts</a>
<ul>
<ul class="items-list roster-group-contacts">
<li class="list-item controlbox-padded offline pending-xmpp-contact d-flex">
<span class="pending-contact-name w-100">An Apothecary</span>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
<a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="list-item controlbox-padded offline pending-xmpp-contact d-flex">
<span class="pending-contact-name w-100">Abram</span>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
<a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
</ul>
</div>

92
sass/_lists.scss
View File

@ -3,7 +3,7 @@
text-align: left;
padding: 0.3em 0;
.rooms-toggle {
.list-toggle {
font-family: $heading-font;
display: block;
color: $text-color;
@ -28,17 +28,59 @@
text-shadow: 0 1px 0 $text-shadow-color;
word-wrap: break-word;
.list-item-link {
&:hover {
color: $dark-link-color;
}
font-size: $font-size;
line-height: $font-size;
padding-right: 0.5em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.list-item-action {
opacity: 0;
font-size: $font-size-tiny;
padding: 0;
margin: 0 0 0 0.4em;
width: 1.6em;
&:before {
font-size: $font-size;
}
&.button-on {
color: $link-color;
&:hover {
color: $dark-link-color;
}
}
color: $subdued-color;
&:hover {
color: $gray-color;
opacity: 1;
}
}
&.open {
background-color: $controlbox-head-color;
&:hover {
background-color: $controlbox-head-color !important;
}
a {
color: white !important;
}
.fa:hover {
color: white;
}
.list-item-link {
&:hover {
color: white;
}
}
.list-item-action {
color: lighten($lightest-blue, 25%);
&:hover {
color: white;
}
}
.fa-circle {
color: lighten($green, 25%);
}
@ -54,16 +96,10 @@
}
}
}
.available-chatroom,
.open-headline,
.open-chatroom,
.list-item {
&:hover {
background-color: lighten($controlbox-head-color, 45%);
.fa {
display: block !important;
opacity: 1;
}
}
&.unread-msgs {
@ -77,40 +113,6 @@
font-weight: bold;
}
}
a {
&:hover {
color: $dark-link-color;
}
&.fa {
display: none;
&:before {
font-size: 15px;
}
}
&.open-room {
width: 68%;
float: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 0.5em;
}
&.available-room {
width: 85%;
}
}
.add-bookmark,
.remove-bookmark,
.close-room,
.room-info {
&.button-on {
color: $link-color;
&:hover {
color: $dark-link-color;
}
}
color: $subdued-color;
}
}
}
}

26
sass/_roster.scss
View File

@ -72,17 +72,6 @@
}
li {
border: none;
clear: both;
color: $text-color;
display: block;
overflow-y: hidden;
text-shadow: 0 1px 0 $text-shadow-color;
line-height: $font-size;
width: 100%;
height: 2em;
padding-top: 0.5em;
&.requesting-xmpp-contact {
a {
line-height: $line-height;
@ -120,7 +109,7 @@
text-overflow: ellipsis;
padding: 0;
margin: 0;
max-width: 80%;
max-width: 90%;
float: none;
height: 100%;
&.unread-msgs {
@ -148,22 +137,9 @@
white-space: nowrap;
text-overflow: ellipsis;
}
span {
padding: 0;
}
.decline-xmpp-request {
margin-left: 5px;
}
.remove-xmpp-contact {
font-size: $font-size-tiny;
margin: 0;
padding: 0;
width: 2em;
display: none;
&:before {
font-size: $font-size;
}
}
&:hover {
background-color: lighten($controlbox-head-color, 45%);
.remove-xmpp-contact {

2
sass/converse.scss
View File

@ -43,8 +43,8 @@
@import "profile";
@import "chatbox";
@import "controlbox";
@import "lists";
@import "roster";
@import "lists";
@import "chatrooms";
@import "headline";
@import "messages";

2
src/converse-roomslist.js
View File

@ -156,7 +156,7 @@
events: {
'click .add-bookmark': 'addBookmark',
'click .close-room': 'closeRoom',
'click .rooms-toggle': 'toggleRoomsList',
'click .list-toggle': 'toggleRoomsList',
'click .remove-bookmark': 'removeBookmark',
'click .open-room': 'openRoom',
},

2
src/templates/bookmark.html
View File

@ -1,6 +1,6 @@
<div class="list-item controlbox-padded room-item available-chatroom d-flex flex-row {[ if (o.hidden) { ]} hidden {[ } ]}" data-room-jid="{{{o.jid}}}">
<a class="open-room w-100" data-room-jid="{{{o.jid}}}" title="{{{o.open_title}}}" href="#">{{{o.name}}}</a>
<a class="remove-bookmark fa fa-bookmark align-self-center {[ if (o.bookmarked) { ]} button-on {[ } ]}"
<a class="list-item-action remove-bookmark fa fa-bookmark align-self-center {[ if (o.bookmarked) { ]} button-on {[ } ]}"
data-room-jid="{{{o.jid}}}" data-bookmark-name="{{{o.name}}}"
title="{{{o.info_remove_bookmark}}}" href="#">&nbsp;</a>
</div>

2
src/templates/bookmarks_list.html
View File

@ -1,4 +1,4 @@
<a href="#" class="rooms-toggle bookmarks-toggle controlbox-padded" title="{{{o.desc_bookmarks}}}">
<a href="#" class="list-toggle bookmarks-toggle controlbox-padded" title="{{{o.desc_bookmarks}}}">
<span class="fa {[ if (o.toggle_state === o._converse.OPENED) { ]} fa-caret-down {[ } else { ]} fa-caret-right {[ } ]}">
</span> {{{o.label_bookmarks}}}</a>
<div class="items-list bookmarks rooms-list {[ if (o.toggle_state !== o._converse.OPENED) { ]} hidden {[ } ]}"></div>

2
src/templates/rooms_list.html
View File

@ -1,4 +1,4 @@
<a href="#" class="rooms-toggle open-rooms-toggle controlbox-padded" title="{{{o.desc_rooms}}}">
<a href="#" class="list-toggle open-rooms-toggle controlbox-padded" title="{{{o.desc_rooms}}}">
<span class="fa {[ if (o.toggle_state === o._converse.OPENED) { ]} fa-caret-down {[ } else { ]} fa-caret-right {[ } ]}">
</span> {{{o.label_rooms}}}</a>
<div class="items-list rooms-list open-rooms-list"></div>

9
src/templates/rooms_list_item.html
View File

@ -5,20 +5,21 @@
{[ if (o.num_unread) { ]}
<span class="msgs-indicator badge badge-info">{{{ o.num_unread }}}</span>
{[ } ]}
<a class="open-room available-room w-100"
<a class="list-item-link open-room available-room w-100"
data-room-jid="{{{o.jid}}}"
title="{{{o.open_title}}}" href="#">{{{o.name || o.jid}}}</a>
{[ if (o.allow_bookmarks) { ]}
<a class="fa {[ if (o.bookmarked) { ]} fa-bookmark remove-bookmark button-on {[ } else { ]} add-bookmark fa-bookmark-o {[ } ]}"
<a class="list-item-action fa {[ if (o.bookmarked) { ]} fa-bookmark remove-bookmark button-on {[ } else { ]} add-bookmark fa-bookmark-o {[ } ]}"
data-room-jid="{{{o.jid}}}" data-bookmark-name="{{{o.name}}}"
title="{[ if (o.bookmarked) { ]} {{{o.info_remove_bookmark}}} {[ } else { ]} {{{o.info_add_bookmark}}} {[ } ]}"
href="#">&nbsp;</a>
{[ } ]}
<a class="room-info fa fa-info-circle" data-room-jid="{{{o.jid}}}"
<a class="list-item-action room-info fa fa-info-circle" data-room-jid="{{{o.jid}}}"
title="{{{o.info_title}}}" href="#">&nbsp;</a>
<a class="fa fa-times close-room"
<a class="list-item-action fa fa-times close-room"
data-room-jid="{{{o.jid}}}"
data-room-name="{{{o.name || o.jid}}}"
title="{{{o.info_leave_room}}}" href="#">&nbsp;</a>

4
src/templates/roster_item.html
View File

@ -1,4 +1,4 @@
<a class="cbox-list-item open-chat w-100 {[ if (o.num_unread) { ]} unread-msgs {[ } ]}"
<a class="list-item-link cbox-list-item open-chat w-100 {[ if (o.num_unread) { ]} unread-msgs {[ } ]}"
title="{{{o.desc_chat}}}" href="#">
<span class="fa {{{o.status_icon}}}" title="{{{o.desc_status}}}"></span>
{[ if (o.num_unread) { ]}
@ -6,5 +6,5 @@
{[ } ]}
<span class="contact-name {[ if (o.num_unread) { ]} unread-msgs {[ } ]}">{{{o.display_name}}}</span></a>
{[ if (o.allow_contact_removal) { ]}
<a class="remove-xmpp-contact fa fa-trash" title="{{{o.desc_remove}}}" href="#"></a>
<a class="list-item-action remove-xmpp-contact fa fa-trash" title="{{{o.desc_remove}}}" href="#"></a>
{[ } ]}