Commit f20d391e authored by JC Brand's avatar JC Brand

Show chat room occupants' states.

parent f2f05ff4
......@@ -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; }
......
......@@ -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]
......
......@@ -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;
......
......@@ -20,6 +20,10 @@
width: 100vw;
}
.circle {
border-radius: 50%;
}
::selection {
background-color: $highlight-color;
}
......
......@@ -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) {
......
......@@ -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>
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