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

Improve and update roster markup

Browse Source
This commit is contained in:
JC Brand 2018-02-19 15:01:02 +01:00
parent e6fdcc610f
commit 2fa8304945
10 changed files with 63 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
css/converse.css
View File

@ -6106,21 +6106,17 @@ body.reset {
overflow-y: hidden;
text-shadow: 0 1px 0 #FAFAFA;
line-height: 14px;
height: 30px;
width: 100%; }
width: 100%;
margin-top: 0.5em; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a.fa {
width: 2em; }
width: 1.5em; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .req-contact-name {
width: 69%;
padding: 0; }
padding: 0 0.2em 0 0; }
#conversejs #converse-roster .roster-contacts .roster-group li a:hover {
color: #206485; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat {
margin: auto;
margin-top: 0.5em;
margin-bottom: 0;
padding: 0;
width: 85%; }
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 {
@ -6175,7 +6171,6 @@ body.reset {
#conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:hover {
color: #818479; }
#conversejs #converse-roster span.pending-contact-name {
margin-top: 0.5em;
line-height: 16px;
width: 100%; }

17
css/inverse.css
View File

@ -6232,21 +6232,17 @@ body {
overflow-y: hidden;
text-shadow: 0 1px 0 #FAFAFA;
line-height: 16px;
height: 30px;
width: 100%; }
width: 100%;
margin-top: 0.5em; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a.fa {
width: 2em; }
width: 1.5em; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .req-contact-name {
width: 69%;
padding: 0; }
padding: 0 0.2em 0 0; }
#conversejs #converse-roster .roster-contacts .roster-group li a:hover {
color: #206485; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat {
margin: auto;
margin-top: 0.5em;
margin-bottom: 0;
padding: 0;
width: 85%; }
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 {
@ -6301,7 +6297,6 @@ body {
#conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:hover {
color: #818479; }
#conversejs #converse-roster span.pending-contact-name {
margin-top: 0.5em;
line-height: 22px;
width: 100%; }

38
mockup/user-panel.html
View File

@ -22,19 +22,19 @@
<div class="rooms-list">
<div class="available-chatroom d-flex flex-row">
<a class="open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="#">public</a>
<a href="#" class="room-info fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info"
<a href="#" class="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 align-self-center" title="Click to bookmark this room">&nbsp;</a>
<a href="#" class="fa fa-times align-self-center" title="Click to leave this room">&nbsp;</a>
<a href="#" class="fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
<a href="#" class="fa fa-times" title="Click to leave this room">&nbsp;</a>
</div>
<div class="available-chatroom d-flex flex-row">
<a class="open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="#">team</a>
<a href="#" class="room-info fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info"
<a href="#" class="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>team@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
</div>
<div class="available-chatroom d-flex flex-row">
<a class="open-room available-room w-100" data-room-jid="test@conference.test.com" title="Click to open this room" href="#">test</a>
<a href="#" class="room-info fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info"
<a href="#" class="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>test@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
</div>
</div>
@ -64,13 +64,13 @@
<ul class="roster-group-contacts">
<li class="offline requesting-xmpp-contact d-flex">
<span class="req-contact-name w-100">Bob Skinstad</span>
<a class="accept-xmpp-request fa fa-check align-self-center" title="Click here to accept this contact's request" href="#"></a>
<a class="decline-xmpp-request fa fa-times align-self-center" title="Click here to decline this contact's request" href="#"></a>
<a class="accept-xmpp-request fa fa-check" title="Click here to accept this contact's request" href="#"></a>
<a class="decline-xmpp-request fa fa-times" title="Click here to decline this contact's request" href="#"></a>
</li>
<li class="offline requesting-xmpp-contact d-flex">
<span class="req-contact-name w-100">André Vos</span>
<a class="accept-xmpp-request fa fa-check align-self-center" title="Click here to accept this contact's request" href="#"></a>
<a class="decline-xmpp-request fa fa-times align-self-center" title="Click here to decline this contact's request" href="#"></a>
<a class="accept-xmpp-request fa fa-check" title="Click here to accept this contact's request" href="#"></a>
<a class="decline-xmpp-request fa fa-times" title="Click here to decline this contact's request" href="#"></a>
</li>
</ul>
</div>
@ -83,17 +83,17 @@
<li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-circle" title="This contact is online"></span> Victor Matfield</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="away current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-circle-o" title="this contact is away"></span> William Winterbottom</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="dnd current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-minus-circle" title="This contact is busy"></span> Gary Teichmann</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
</li>
</div>
@ -105,12 +105,12 @@
<li class="away current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-circle-o" title="this contact is away"></span> Allan Donald</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="offline current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-times-circle" title="This contact is offline"></span> Corné Krige</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
</ul>
</div>
@ -122,12 +122,12 @@
<li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-circle" title="This contact is online"></span> John Smit</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-circle" title="This contact is online"></span> Bakkies Botha</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
</ul>
</div>
@ -139,7 +139,7 @@
<li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-circle" title="This contact is online"></span> James Small</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
</ul>
</div>
@ -150,11 +150,11 @@
<ul>
<li class="offline pending-xmpp-contact d-flex">
<span class="pending-contact-name w-100">Rassie Erasmus</span>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="offline pending-xmpp-contact d-flex">
<span class="pending-contact-name w-100">Victor Matfield</span>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
</ul>
</div>

8
sass/_fonts.scss
View File

@ -1,10 +1,10 @@
@font-face {
font-family: 'Converse-js';
src: url($font-path + 'icomoon.eot?wvi0ht');
src: url($font-path + 'icomoon.eot?wvi0ht#iefix') format('embedded-opentype'),
url($font-path + 'icomoon.ttf?wvi0ht') format('truetype'),
url($font-path + 'icomoon.woff?wvi0ht') format('woff'),
url($font-path + 'icomoon.svg?wvi0ht#icomoon') format('svg');
src: url($font-path + 'icomoon.eot?wvi0ht#iefix') format('embedded-opentype'),
url($font-path + 'icomoon.ttf?wvi0ht') format('truetype'),
url($font-path + 'icomoon.woff?wvi0ht') format('woff'),
url($font-path + 'icomoon.svg?wvi0ht#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

13
sass/_roster.scss
View File

@ -118,16 +118,15 @@
overflow-y: hidden;
text-shadow: 0 1px 0 $text-shadow-color;
line-height: $font-size;
height: 30px;
width: 100%;
margin-top: 0.5em;
&.requesting-xmpp-contact {
a.fa {
width: 2em;
width: 1.5em;
}
.req-contact-name {
width: 69%;
padding: 0;
padding: 0 0.2em 0 0;
}
}
@ -136,11 +135,8 @@
}
.open-chat {
margin: auto;
margin-top: 0.5em;
margin-bottom: 0;
margin: 0;
padding: 0;
width: 85%;
&.unread-msgs {
font-weight: bold;
.contact-name {
@ -219,7 +215,6 @@
}
span {
&.pending-contact-name {
margin-top: 0.5em;
line-height: $line-height;
width: 100%;
}

12
src/converse-rosterview.js
View File

@ -356,9 +356,19 @@
},
renderRosterItem (item) {
let status_icon = 'fa-times-circle';
const chat_status = item.get('chat_status') || 'offline';
if (chat_status === 'online') {
status_icon = 'fa-circle';
} else if (chat_status === 'away' || chat_status === 'dnd') {
status_icon = 'fa-circle-o';
} else if (chat_status === 'busy') {
status_icon = 'fa-minus-circle';
}
this.el.innerHTML = tpl_roster_item(
_.extend(item.toJSON(), {
'desc_status': STATUSES[item.get('chat_status')||'offline'],
'desc_status': STATUSES[chat_status],
'status_icon': status_icon,
'desc_chat': __('Click to chat with %1$s (JID: %2$s)', item.get('fullname'), item.get('jid')),
'desc_remove': __('Click to remove %1$s as a contact', item.get('fullname')),
'allow_contact_removal': _converse.allow_contact_removal,

10
src/templates/pending_contact.html
View File

@ -1,9 +1,7 @@
{[ if (o.allow_chat_pending_contacts) { ]}
<a class="open-chat"href="#">
<a class="open-chat w-100" href="#">
{[ } ]}
<span class="pending-contact-name" title="Name: {{{o.fullname}}}
JID: {{{o.jid}}}">{{{o.fullname}}}</span>
{[ if (o.allow_chat_pending_contacts) { ]}
</a>
<span class="pending-contact-name w-100" title="Name: {{{o.fullname}}} JID: {{{o.jid}}}">{{{o.fullname}}}</span>
{[ if (o.allow_chat_pending_contacts) { ]}</a>
{[ } ]}
<a class="remove-xmpp-contact icon-remove" title="{{{o.desc_remove}}}" href="#"></a>
<a class="remove-xmpp-contact fa fa-trash" title="{{{o.desc_remove}}}" href="#"></a>

6
src/templates/requesting_contact.html
View File

@ -1,12 +1,12 @@
{[ if (o.allow_chat_pending_contacts) { ]}
<a class="open-chat"href="#">
<a class="open-chat w-100"href="#">
{[ } ]}
<span class="req-contact-name w-100" title="Name: {{{o.fullname}}}
JID: {{{o.jid}}}">{{{o.fullname}}}</span>
{[ if (o.allow_chat_pending_contacts) { ]}
</a>
{[ } ]}
<a class="accept-xmpp-request fa fa-check align-self-center"
<a class="accept-xmpp-request fa fa-check"
aria-label="{{{o.desc_accept}}}" title="{{{o.desc_accept}}}" href="#"></a>
<a class="decline-xmpp-request fa fa-times align-self-center"
<a class="decline-xmpp-request fa fa-times"
aria-label="{{{o.desc_decline}}}" title="{{{o.desc_decline}}}" href="#"></a>

2
src/templates/roster_filter.html
View File

@ -1,7 +1,7 @@
<form class="roster-filter-form input-button-group {[ if (!o.visible) { ]} hidden {[ } ]}">
<div class="form-group form-inline">
<input value="{{{o.filter_text}}}"
class="roster-filter roster-filter-{{{o.filter_type}}}"
class="roster-filter form-control roster-filter-{{{o.filter_type}}}"
placeholder="{{{o.placeholder}}}">
<select class="state-type state-type-{{{o.filter_type}}}">

16
src/templates/roster_item.html
View File

@ -1,16 +1,10 @@
<a class="open-chat {[ if (o.num_unread) { ]} unread-msgs {[ } ]}"
title="{{{o.desc_chat}}}"
href="#">
<div class="avatar avatar-{{{o.chat_status}}}">
<span class="status-icon icon-{{{o.chat_status}}}" title="{{{o.desc_status}}}"></span>
</div>
<a class="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) { ]}
<span class="msgs-indicator">{{{ o.num_unread }}}</span>
{[ } ]}
<span class="contact-name {[ if (o.num_unread) { ]} unread-msgs {[ } ]}">{{{o.fullname}}}</span>
</a>
<span class="contact-name {[ if (o.num_unread) { ]} unread-msgs {[ } ]}">{{{o.fullname}}}</span></a>
{[ if (o.allow_contact_removal) { ]}
<a class="remove-xmpp-contact icon-remove" title="{{{o.desc_remove}}}" href="#"></a>
<a class="remove-xmpp-contact fa fa-trash" title="{{{o.desc_remove}}}" href="#"></a>
{[ } ]}