Skip to content

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

Update CSS of controlbox list items 

Trying to use more generic CSS selectors and to extract out common patterns.
parent 47ec7501
Hide whitespace changes
Inline Side-by-side
Showing with 232 additions and 341 deletions
css/converse.css
View file @ 388719ff
......@@ -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"],
......
dist/converse.js
View file @ 388719ff
......@@ -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';
} ;
mockup/user-panel.html
View file @ 388719ff
......@@ -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>
......
sass/_lists.scss
View file @ 388719ff
......@@ -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;
}
}
}
}
sass/_roster.scss
View file @ 388719ff
......@@ -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 {
......
sass/converse.scss
View file @ 388719ff
......@@ -43,8 +43,8 @@
@import "profile";
@import "chatbox";
@import "controlbox";
@import "lists";
@import "roster";
@import "lists";
@import "chatrooms";
@import "headline";
@import "messages";
......
src/converse-roomslist.js
View file @ 388719ff
......@@ -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',
},
......
src/templates/bookmark.html
View file @ 388719ff
<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>
src/templates/bookmarks_list.html
View file @ 388719ff
<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>
src/templates/rooms_list.html
View file @ 388719ff
<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>
src/templates/rooms_list_item.html
View file @ 388719ff
......@@ -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>
......
src/templates/roster_item.html
View file @ 388719ff
<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>
{[ } ]}
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