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

Show chat room occupants' states.

Browse Source
This commit is contained in:
JC Brand 2017-02-28 05:27:30 +00:00
parent f2f05ff484
commit f20d391ea6
6 changed files with 49 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
css/converse.css
View File

@ -1164,6 +1164,9 @@
#conversejs {
width: 100%;
width: 100vw; } }
#converse-embedded-chat .circle,
#conversejs .circle {
border-radius: 50%; }
#converse-embedded-chat ::selection,
#conversejs ::selection {
background-color: #DCF9F6; }
@ -2353,7 +2356,7 @@
display: block;
font-size: 12px;
overflow: hidden;
padding: 2px 5px;
padding: 0.2em 0.5em 0.2em 0;
text-overflow: ellipsis;
white-space: nowrap; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li [class^="icon-"], #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li [class*=" icon-"],
@ -2366,6 +2369,24 @@
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant {
cursor: pointer; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status {
display: inline-block;
margin-right: 0.5em;
width: 0.5em;
height: 0.5em; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online {
background-color: green; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-dnd,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-dnd {
background-color: red; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-away,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-away {
background-color: orange; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-xa,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-xa {
background-color: orange; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.moderator,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.moderator {
color: #D24E2B; }

1
docs/CHANGES.md
View File

@ -16,6 +16,7 @@
* Templates are no longer stored as attributes on the `_converse` object.
If you need a particular template, use `require` to load it.
- Show the chat states of room occupants. [jcbrand]
- The no-jQuery build has been renamed from `converse.nojquery.js` to
`converse-no-jquery.js` to fit the convention used for other build names.
[jcbrand]

20
sass/_chatrooms.scss
View File

@ -128,7 +128,7 @@
display: block;
font-size: $font-size-small;
overflow: hidden;
padding: 2px 5px;
padding: 0.2em 0.5em 0.2em 0;
text-overflow: ellipsis;
white-space: nowrap;
[class^="icon-"], [class*=" icon-"] {
@ -139,6 +139,24 @@
}
&.occupant {
cursor: pointer;
.occupant-status {
display: inline-block;
margin-right: 0.5em;
width: 0.5em;
height: 0.5em;
&.occupant-online {
background-color: green;
}
&.occupant-dnd {
background-color: red;
}
&.occupant-away {
background-color: darkorange;
}
&.occupant-xa {
background-color: orange;
}
}
}
&.moderator {
color: $moderator-color;

4
sass/_core.scss
View File

@ -20,6 +20,10 @@
width: 100vw;
}
.circle {
border-radius: 50%;
}
::selection {
background-color: $highlight-color;
}

3
src/converse-muc.js
View File

@ -1928,6 +1928,7 @@
var new_el = tpl_occupant(
_.extend(
{ 'jid': '',
'show': 'online',
'hint_occupant': __('Click to mention this user in your message.'),
'desc_moderator': __('This user is a moderator.'),
'desc_occupant': __('This user can send messages in this room.'),
@ -2077,7 +2078,7 @@
data.status = child.textContent || null;
break;
case "show":
data.show = child.textContent || null;
data.show = child.textContent || 'online';
break;
case "x":
if (child.getAttribute("xmlns") === Strophe.NS.MUC_USER) {

2
src/templates/occupant.html
View File

@ -10,4 +10,4 @@
{[ } ]}
{[ if (!_.includes(["visitor", "occupant", "moderator"], role)) { ]}
title="{{{ jid }}} {{{ hint_occupant }}}"
{[ } ]}>{{{nick}}}</li>
{[ } ]}><div class="occupant-status occupant-{{{show}}} circle"></div>{{{nick}}}</li>