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

HTML and CSS improvements for listed items in the controlbox 

Fixes #1348

Tried to get the unread messages indicator to line up properly with the
text and icons in a room list item.

Also tried to reuse styles where appropriate, specifically
`.list-container` and `.list-toggle`.
This commit is contained in:
JC Brand 2018-12-07 11:27:57 +01:00
parent c55e25fa5f
commit 90bf42a002
14 changed files with 83 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGES.md
View File

@ -7,6 +7,7 @@
- Bugfix: MUC messages sometimes appear twice after resync.
- #1331 Fix missing checkmarks in old muc messages
- #1333 Don't send receipt requests in MUCs
- #1348 Font gets cut off in Firefox #1348
## 4.0.5 (2018-11-15)

47
css/converse.css
View File

@ -3804,6 +3804,10 @@ readers do not read off random characters that represent icons */
position: static;
width: auto; }
/* Apparent font-awesome bug? The circle has some kind of bottom margin */
#conversejs .fa-info-circle {
height: 1em; }
#conversejs :root {
--blue: #007bff;
--indigo: #6610f2;
@ -9311,7 +9315,6 @@ readers do not read off random characters that represent icons */
--send-button-height: 27px;
--send-button-margin: 3px;
--roster-height: 194px;
--roster-group-toggle-hover-color: #585B51;
--flyout-padding: 1.2em;
--chat-head-color: #3AA569;
--chat-head-color-lighten-50-percent: #e7f7ee;
@ -9401,8 +9404,8 @@ readers do not read off random characters that represent icons */
--overlayed-emoji-picker-height: 100px;
--overlayed-max-chat-textarea-height: 200px;
--overlayed-badge-color: #818479;
--list-toggle-color: #585B51;
--list-toggle-hover-color: #818479;
--list-toggle-color: #818479;
--list-toggle-hover-color: #585B51;
--list-toggle-font-weight: normal;
--list-item-action-color: #e3eef3;
--list-item-link-color: inherit;
@ -9894,6 +9897,8 @@ body.reset {
#conversejs .list-group-item.active {
background-color: var(--primary-color);
border-color: var(--primary-color-dark); }
#conversejs .badge {
text-shadow: none; }
#conversejs .btn-primary, #conversejs .button-primary, #conversejs .badge-primary {
color: white;
background-color: var(--primary-color);
@ -10780,7 +10785,7 @@ body.reset {
color: var(--controlbox-heading-color);
font-weight: var(--controlbox-heading-font-weight);
padding: 0;
margin: 0.75em 0;
margin: 1em 0 0.5em 0;
font-size: 1.1em;
text-transform: uppercase; }
#conversejs #controlbox .controlbox-section .controlbox-heading__btn {
@ -11164,13 +11169,10 @@ body.reset {
margin: 0.75em 0 0.75em 0; }
#conversejs #converse-roster .roster-contacts .roster-group .group-toggle {
font-family: var(--heading-font);
color: var(--text-color);
display: block;
width: 100%;
padding-top: 0;
padding-bottom: 0.3rem; }
#conversejs #converse-roster .roster-contacts .roster-group .group-toggle:hover {
color: var(--roster-group-toggle-hover-color); }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a {
line-height: var(--line-height); }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a.far, #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a.fas, #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a.fa {
@ -11232,10 +11234,10 @@ body.reset {
font-family: var(--heading-font);
font-weight: var(--list-toggle-font-weight);
display: block;
color: var(--text-color);
color: var(--list-toggle-color);
padding: 0 0 0.5rem 0; }
#conversejs .list-container .list-toggle:hover {
color: var(--list-toggle-color); }
color: var(--list-toggle-hover-color); }
#conversejs .items-list {
text-align: left; }
@ -11243,22 +11245,26 @@ body.reset {
border: none;
clear: both;
color: var(--text-color);
display: block;
height: 2em;
overflow: hidden;
padding-top: 0.5em;
padding: 0.5em 0;
text-shadow: 0 1px 0 var(--text-shadow-color);
word-wrap: break-word; }
#conversejs .items-list .list-item .list-item-link {
color: var(--list-item-link-color);
margin: auto;
font-size: var(--font-size);
line-height: var(--font-size);
padding-right: 0.5em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; }
text-overflow: ellipsis;
vertical-align: baseline; }
#conversejs .items-list .list-item .list-item-link:hover {
color: var(--list-item-link-hover-color); }
#conversejs .items-list .list-item .list-item-badge {
opacity: 1;
border-radius: 25%;
color: white;
font-size: var(--font-size-small);
line-height: var(--font-size-small); }
#conversejs .items-list .list-item .list-item-action {
opacity: 0;
font-size: var(--font-size-tiny);
@ -11300,13 +11306,10 @@ body.reset {
background-color: var(--controlbox-head-color-lighten-45-percent); }
#conversejs .items-list .list-item:hover .fa, #conversejs .items-list .list-item:hover .far, #conversejs .items-list .list-item:hover .fas {
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 .badge-room-color,
#conversejs .badge-room-color {
background-color: var(--chatroom-head-color); }
#conversejs.converse-embedded .add-chatroom input[type="submit"],
#conversejs.converse-embedded .add-chatroom input[type="button"],

8
dist/converse.js vendored
View File

@ -93107,7 +93107,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/group_header.html -->\n<a href="#" class="group-toggle controlbox-padded" title="' +
__p += '<!-- src/templates/group_header.html -->\n<a href="#" class="list-toggle group-toggle controlbox-padded" title="' +
__e(o.desc_group_toggle) +
'">\n <span class="fa ';
if (o.toggle_state === o._converse.OPENED) { ;
@ -94176,9 +94176,9 @@ __p += ' unread-msgs ';
} ;
__p += '"\n data-room-jid="' +
__e(o.jid) +
'">\n';
'">\n\n';
if (o.num_unread) { ;
__p += '\n <span class="msgs-indicator badge badge-info">' +
__p += '\n <span class="list-item-badge badge badge-room-color msgs-indicator">' +
__e( o.num_unread ) +
'</span>\n';
} ;
@ -94267,7 +94267,7 @@ __p += '\n <a class="controlbox-heading__btn add-contact fa fa-user-plus"
__e(o.title_add_contact) +
'"\n data-toggle="modal"\n data-target="#add-contact-modal"></a>\n ';
} ;
__p += '\n</div>\n\n<form class="roster-filter-form"></form>\n\n<div class="roster-contacts"></div>\n';
__p += '\n</div>\n\n<form class="roster-filter-form"></form>\n\n<div class="list-container roster-contacts"></div>\n';
return __p
};

32
mockup/user-panel.html
View File

@ -32,24 +32,25 @@
<div id="chatrooms" class="controlbox-section">
<div class="d-flex controlbox-padded">
<span class="w-100 controlbox-heading">Group Chats</span>
<span class="w-100 controlbox-heading">Groupchats</span>
<a class="controlbox-heading__btn show-list-muc-modal fa fa-list-ul" title="Query for groupchats" data-toggle="modal" data-target="#list-chatrooms-modal"></a>
<a class="controlbox-heading__btn fa fa-plus" title="Click to add a new room" data-toggle="modal" data-target="#chatroomsModal"></a>
</div>
<div class="list-container items-list-container">
<div class="items-list">
<div class="controlbox-padded list-item available-chatroom d-flex flex-row open">
<div class="items-list rooms-list">
<div class="list-item controlbox-padded room-item available-chatroom d-flex flex-row open">
<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="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="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="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>
<div class="list-item controlbox-padded room-item available-chatroom d-flex flex-row">
<span class="list-item-badge badge badge-room-color msgs-indicator">18</span>
<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="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">
@ -65,17 +66,16 @@
<span class="w-100 controlbox-heading">Bookmarks</span>
</div>
<div class="list-container items-list-container">
<div class="items-list">
<div class="controlbox-padded list-item available-chatroom d-flex flex-row">
<div class="items-list rooms-list">
<div class="list-item controlbox-padded room-item available-chatroom d-flex flex-row">
<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="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="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">
<div class="list-item controlbox-padded room-item available-chatroom d-flex flex-row">
<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="list-item-action room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
@ -107,7 +107,7 @@
</div>
</form>
<div class="roster-contacts">
<div class="list-container roster-contacts">
<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>
@ -126,7 +126,7 @@
</div>
<div class="roster-group" data-group="Colleagues">
<a href="#" data-group="Colleagues" class="group-toggle controlbox-padded " title="Click to hide these contacts">
<a href="#" data-group="Colleagues" class="list-toggle group-toggle controlbox-padded " title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Colleagues</a>
<ul class="items-list roster-group-contacts">
<li class="list-item controlbox-padded away current-xmpp-contact d-flex">
@ -143,7 +143,7 @@
</div>
<div class="roster-group" data-group="Family">
<a href="#" data-group="Family" class="group-toggle controlbox-padded " title="Click to hide these contacts">
<a href="#" data-group="Family" class="list-toggle group-toggle controlbox-padded" title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Family</a>
<ul class="items-list roster-group-contacts">
<li class="list-item controlbox-padded online current-xmpp-contact d-flex">
@ -165,7 +165,7 @@
</div>
<div class="roster-group" data-group="Friends">
<a href="#" data-group="Friends" class="group-toggle controlbox-padded " title="Click to hide these contacts">
<a href="#" data-group="Friends" class="list-toggle group-toggle controlbox-padded" title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Friends</a>
<ul class="items-list roster-group-contacts">
<li class="list-item controlbox-padded online current-xmpp-contact d-flex">
@ -177,7 +177,7 @@
</div>
<div class="roster-group" data-group="Ungrouped">
<a href="#" class="group-toggle controlbox-padded " title="Click to hide these contacts">
<a href="#" class="list-toggle group-toggle controlbox-padded" title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Ungrouped</a>
<ul class="items-list roster-group-contacts">
<li class="list-item controlbox-padded online current-xmpp-contact d-flex">
@ -199,7 +199,7 @@
</div>
<div class="roster-group" id="pending-xmpp-contacts">
<a href="#" class="group-toggle controlbox-padded " title="Click to hide these contacts">
<a href="#" class="list-toggle group-toggle controlbox-padded" title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Pending Contacts</a>
<ul class="items-list roster-group-contacts">
<li class="list-item controlbox-padded offline pending-xmpp-contact d-flex">

6
sass/_chatrooms.scss
View File

@ -1,5 +1,11 @@
#conversejs.converse-embedded,
#conversejs {
.badge-room-color {
background-color: var(--chatroom-head-color);
}
.add-chatroom {
input[type="submit"],
input[type="button"] {

2
sass/_controlbox.scss
View File

@ -218,7 +218,7 @@
color: var(--controlbox-heading-color);
font-weight: var(--controlbox-heading-font-weight);
padding: 0;
margin: 0.75em 0;
margin: 1em 0 0.5em 0;
font-size: 1.1em;
text-transform: uppercase;
}

4
sass/_core.scss
View File

@ -466,6 +466,10 @@ body.reset {
border-color: var(--primary-color-dark);
}
.badge {
text-shadow: none;
}
.btn-primary, .button-primary, .badge-primary {
color: white;
background-color: var(--primary-color);

31
sass/_lists.scss
View File

@ -7,10 +7,10 @@
font-family: var(--heading-font);
font-weight: var(--list-toggle-font-weight);
display: block;
color: var(--text-color);
color: var(--list-toggle-color);
padding: 0 0 0.5rem 0;
&:hover {
color: var(--list-toggle-color);
color: var(--list-toggle-hover-color);
}
}
}
@ -22,10 +22,8 @@
border: none;
clear: both;
color: var(--text-color);
display: block;
height: 2em;
overflow: hidden;
padding-top: 0.5em;
padding: 0.5em 0;
text-shadow: 0 1px 0 var(--text-shadow-color);
word-wrap: break-word;
@ -34,12 +32,20 @@
&:hover {
color: var(--list-item-link-hover-color);
}
margin: auto;
font-size: var(--font-size);
line-height: var(--font-size);
padding-right: 0.5em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: baseline;
}
.list-item-badge {
opacity: 1;
border-radius: 25%;
color: white;
font-size: var(--font-size-small);
line-height: var(--font-size-small);
}
.list-item-action {
@ -104,17 +110,6 @@
opacity: 1;
}
}
&.unread-msgs {
.msgs-indicator {
border-radius: 10%;
opacity: 1;
}
.available-room,
.open-room {
width: 100%;
font-weight: bold;
}
}
}
}
}

4
sass/_roster.scss
View File

@ -60,11 +60,7 @@
margin: 0.75em 0 0.75em 0;
.group-toggle {
&:hover {
color: var(--roster-group-toggle-hover-color);
}
font-family: var(--heading-font);
color: var(--text-color);
display: block;
width: 100%;
padding-top: 0;

5
sass/_variables.scss
View File

@ -39,7 +39,6 @@ $font-path: "webfonts/icomoon/fonts/" !default;
--send-button-margin: 3px;
--roster-height: 194px;
--roster-group-toggle-hover-color: #585B51; // $dark-gray-color
--flyout-padding: 1.2em;
@ -160,8 +159,8 @@ $font-path: "webfonts/icomoon/fonts/" !default;
--overlayed-max-chat-textarea-height: 200px;
--overlayed-badge-color: #818479; // $gray-color
--list-toggle-color: #585B51; // $dark-gray-color
--list-toggle-hover-color: #818479; // $gray-color
--list-toggle-color: #818479; // $gray-color
--list-toggle-hover-color: #585B51; // $dark-gray-color
--list-toggle-font-weight: normal;
--list-item-action-color: #e3eef3; // lighten($lightest-blue, 25%)
--list-item-link-color: inherit;

7
sass/font-awesome.scss vendored
View File

@ -70,3 +70,10 @@
@import "@fortawesome/fontawesome-free/scss/stacked";
@import "@fortawesome/fontawesome-free/scss/icons";
@import "@fortawesome/fontawesome-free/scss/screen-reader";
/* Apparent font-awesome bug? The circle has some kind of bottom margin */
#conversejs {
.fa-info-circle {
height: 1em;
}
}

2
src/templates/group_header.html
View File

@ -1,4 +1,4 @@
<a href="#" class="group-toggle controlbox-padded" title="{{{o.desc_group_toggle}}}">
<a href="#" class="list-toggle group-toggle controlbox-padded" title="{{{o.desc_group_toggle}}}">
<span class="fa {[ if (o.toggle_state === o._converse.OPENED) { ]} fa-caret-down {[ } else { ]} fa-caret-right {[ } ]}">
</span> {{{o.label_group}}}</a>
<ul class="items-list roster-group-contacts {[ if (o.toggle_state === o._converse.CLOSED) { ]} collapsed {[ } ]}"></ul>

3
src/templates/rooms_list_item.html
View File

@ -2,8 +2,9 @@
{[ if (o.currently_open) { ]} open {[ } ]}
{[ if (o.num_unread_general) { ]} unread-msgs {[ } ]}"
data-room-jid="{{{o.jid}}}">
{[ if (o.num_unread) { ]}
<span class="msgs-indicator badge badge-info">{{{ o.num_unread }}}</span>
<span class="list-item-badge badge badge-room-color msgs-indicator">{{{ o.num_unread }}}</span>
{[ } ]}
<a class="list-item-link open-room available-room w-100"
data-room-jid="{{{o.jid}}}"

2
src/templates/roster.html
View File

@ -11,4 +11,4 @@
<form class="roster-filter-form"></form>
<div class="roster-contacts"></div>
<div class="list-container roster-contacts"></div>