Skip to content

C
converse.js
Commit 11a53608 authored by JC Brand's avatar JC Brand
Browse files
Options

Right Align badges of room occupants 

fixes #1264

Also...

- hide the badges in overlayed view mode
- hide the features list in overlayed view mode
parent 331a9d9b
Show whitespace changes
Inline Side-by-side
Showing with 141 additions and 80 deletions
Makefile
View file @ 11a53608
......@@ -139,7 +139,7 @@ css/%.min.css:: css/%.css
.PHONY: watchcss
watchcss: dev
$(SASS) --watch --include-path $(BOURBON) --include-path $(BOOTSTRAP) sass:css
$(SASS) --watch --include-path $(BOURBON) --include-path $(BOOTSTRAP) -o ./css/ ./sass/
.PHONY: watchjs
watchjs: dev dist/converse-headless.js
......
css/converse.css
View file @ 11a53608
......@@ -11289,6 +11289,20 @@ body.reset {
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant {
cursor: pointer; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-nick-badge,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-nick-badge {
display: flex;
justify-content: space-between;
flex-wrap: wrap; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-nick-badge .occupant-badges,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-nick-badge .occupant-badges {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
flex-direction: row; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-nick-badge .occupant-badges span,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-nick-badge .occupant-badges span {
margin-right: 0.25rem; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant div.row.no-gutters,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant div.row.no-gutters {
flex-wrap: nowrap;
......@@ -11378,6 +11392,8 @@ body.reset {
#conversejs.converse-overlayed .chatbox.chatroom {
min-width: 400px !important;
width: 400px; }
#conversejs.converse-overlayed .chatbox.chatroom .chatroom-features {
display: none !important; }
#conversejs.converse-overlayed .chatbox.chatroom .box-flyout {
min-width: 400px !important;
width: 400px; }
......@@ -11393,6 +11409,8 @@ body.reset {
padding: 0; }
#conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .occupants .chatroom-features .feature {
font-size: 10px; }
#conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .occupants ul .occupant .occupant-nick-badge .occupant-badges {
display: none; }
#conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .occupants ul .occupant .occupant-status {
margin-top: 6px; }
#conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .chat-area {
......
dist/converse.js
View file @ 11a53608
......@@ -102473,9 +102473,9 @@ __p += '>\n <div class="row no-gutters">\n <div class="col-auto">\n
__e(o.show) +
' circle" title="' +
__e(o.hint_show) +
'"></div>\n </div>\n <div class="col">\n <span class="occupant-nick">' +
'"></div>\n </div>\n <div class="col occupant-nick-badge">\n <span class="occupant-nick">' +
__e(o.nick || o.jid) +
'</span>\n ';
'</span>\n <span class="occupant-badges">\n ';
if (o.affiliation === "owner") { ;
__p += '\n <span class="badge badge-danger">' +
__e(o.label_owner) +
......@@ -102505,7 +102505,7 @@ __p += '\n <span class="badge badge-secondary">' +
__e(o.label_visitor) +
'</span>\n ';
} ;
__p += '\n </div>\n </div>\n</li>\n';
__p += '\n </span>\n </div>\n </div>\n</li>\n';
return __p
};
mockup/chatroom.html
View file @ 11a53608
......@@ -311,10 +311,12 @@
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<div class="col occupant-nick-badge">
<span class="occupant-nick">Juliet Capulet</span>
<span class="occupant-badges">
<span class="badge badge-danger">Owner</span>
<span class="badge badge-info">Moderator</span>
</span>
</div>
</div>
</li>
......@@ -324,119 +326,123 @@
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<div class="col occupant-nick-badge">
<span class="occupant-nick">Romeo Montague</span>
<span class="occupant-badges">
<span class="badge badge-info">Moderator</span>
</span>
</div>
</div>
</li>
<li class="moderator occupant" title="Click to mention Lady Montague in your message.">
<li class="occupant" title="Click to mention Lady Montague in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-away circle" title="Away"></div>
</div>
<div class="col">
<div class="col occupant-nick-badge">
<span class="occupant-nick">Lady Montague</span>
</div>
</div>
</li>
<li class="moderator occupant" title="Click to mention Mercutio in your message.">
<li class="occupant" title="Click to mention Mercutio in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<div class="col occupant-nick-badge">
<span class="occupant-nick">Mercutio</span>
<span class="occupant-badges">
<span class="badge badge-secondary">Visitor</span>
</span>
</div>
</div>
</li>
<li class="moderator occupant" title="Click to mention Lord Montague in your message.">
<li class="occupant" title="Click to mention Lord Montague in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-dnd circle" title="Busy"></div>
</div>
<div class="col">
<div class="col occupant-nick-badge">
<span class="occupant-nick">Lord Montague</span>
</div>
</div>
</li>
<li class="moderator occupant" title="Click to mention Friar Laurence in your message.">
<li class="occupant" title="Click to mention Friar Laurence in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<div class="col occupant-nick-badge">
<span class="occupant-nick">Friar Laurence</span>
</div>
</div>
</li>
<li class="moderator occupant" title="Click to mention Tybalt in your message.">
<li class="occupant" title="Click to mention Tybalt in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<div class="col occupant-nick-badge">
<span class="occupant-nick">Tybalt</span>
</div>
</div>
</li>
<li class="moderator occupant" title="Click to mention Paris in your message.">
<li class="occupant" title="Click to mention Paris in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<div class="col occupant-nick-badge">
<span class="occupant-nick">Paris</span>
</div>
</div>
</li>
<li class="moderator occupant" title="Click to mention Lord Capulet in your message.">
<li class="occupant" title="Click to mention Lord Capulet in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<div class="col occupant-nick-badge">
<span class="occupant-nick">Lord Capulet</span>
</div>
</div>
</li>
<li class="moderator occupant" title="Click to mention Benviolo in your message.">
<li class="occupant" title="Click to mention Benviolo in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<div class="col occupant-nick-badge">
<span class="occupant-nick">Benviolo</span>
</div>
</div>
</li>
<li class="moderator occupant" title="Click to mention Lady Capulet in your message.">
<li class="occupant" title="Click to mention Lady Capulet in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<div class="col occupant-nick-badge">
<span class="occupant-nick">Lady Capulet</span>
</div>
</div>
</li>
<li class="moderator occupant" title="Click to mention Balthasar in your message.">
<li class="occupant" title="Click to mention Balthasar in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<div class="col occupant-nick-badge">
<span class="occupant-nick">Balthasar</span>
</div>
</div>
......@@ -447,51 +453,55 @@
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<span class="occupant-nick">Escalus, Prince of Verona</span>
<div class="col occupant-nick-badge">
<span class="occupant-nick">Escalus, Prince of Verona and then some</span>
<span class="occupant-badges">
<span class="badge badge-danger">Admin</span>
<span class="badge badge-info">Moderator</span>
</span>
</div>
</div>
</li>
<li class="moderator occupant" title="Click to mention Peter in your message.">
<li class="occupant" title="Click to mention Peter in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<div class="col occupant-nick-badge">
<span class="occupant-nick">Peter</span>
</div>
</div>
</li>
<li class="moderator occupant" title="Click to mention Abram in your message.">
<li class="occupant" title="Click to mention Abram in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<div class="col occupant-nick-badge">
<span class="occupant-nick">Abram</span>
</div>
</div>
</li>
<li class="moderator occupant" title="Click to mention Sampson in your message.">
<li class="occupant" title="Click to mention Sampson in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<div class="col occupant-nick-badge">
<span class="occupant-nick">Sampson</span>
</div>
</div>
</li>
<li class="moderator occupant" title="Click to mention Gregory in your message.">
<li class="occupant" title="Click to mention Gregory in your message.">
<div class="row no-gutters">
<div class="col-auto">
<div class="occupant-status occupant-online circle" title="Online"></div>
</div>
<div class="col">
<div class="col occupant-nick-badge">
<span class="occupant-nick">Gregory</span>
</div>
</div>
......
sass/_chatrooms.scss
View file @ 11a53608
......@@ -197,6 +197,23 @@
&.occupant {
cursor: pointer;
.occupant-nick-badge {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.occupant-badges {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
flex-direction: row;
span {
margin-right: 0.25rem;
}
}
}
div.row.no-gutters {
flex-wrap: nowrap;
min-height: 1.5em;
......@@ -296,6 +313,11 @@
#conversejs.converse-overlayed {
.chatbox {
&.chatroom {
.chatroom-features {
display: none !important;
}
min-width: $chatroom-width !important;
width: $chatroom-width;
.box-flyout {
......@@ -323,6 +345,11 @@
}
ul {
.occupant {
.occupant-nick-badge {
.occupant-badges {
display: none;
}
}
.occupant-status {
margin-top: 6px;
}
......
spec/chatroom.js
View file @ 11a53608
......@@ -1555,14 +1555,14 @@
it("indicates moderators and visitors by means of a special css class and tooltip",
mock.initConverseWithPromises(
null, ['rosterGroupsFetched'], {},
null, ['rosterGroupsFetched'], {'view_mode': 'fullscreen'},
async function (done, _converse) {
await test_utils.openAndEnterChatRoom(_converse, 'lounge', 'localhost', 'dummy');
var view = _converse.chatboxviews.get('lounge@localhost');
var contact_jid = mock.cur_names[2].replace(/ /g,'.').toLowerCase() + '@localhost';
const view = _converse.chatboxviews.get('lounge@localhost');
let contact_jid = mock.cur_names[2].replace(/ /g,'.').toLowerCase() + '@localhost';
var occupants = view.el.querySelector('.occupant-list').querySelectorAll('li');
let occupants = view.el.querySelector('.occupant-list').querySelectorAll('li');
expect(occupants.length).toBe(1);
expect(occupants[0].querySelector('.occupant-nick').textContent.trim()).toBe("dummy");
expect(occupants[0].querySelectorAll('.badge').length).toBe(2);
......@@ -2200,7 +2200,7 @@
it("updates the shown features when the groupchat configuration has changed",
mock.initConverseWithPromises(
null, ['rosterGroupsFetched'], {},
null, ['rosterGroupsFetched'], {'view_mode': 'fullscreen'},
function (done, _converse) {
var sent_IQ, IQ_id;
......
src/templates/occupant.html
View file @ 11a53608
......@@ -15,8 +15,9 @@
<div class="col-auto">
<div class="occupant-status occupant-{{{o.show}}} circle" title="{{{o.hint_show}}}"></div>
</div>
<div class="col">
<div class="col occupant-nick-badge">
<span class="occupant-nick">{{{o.nick || o.jid}}}</span>
<span class="occupant-badges">
{[ if (o.affiliation === "owner") { ]}
<span class="badge badge-danger">{{{o.label_owner}}}</span>
{[ } ]}
......@@ -33,6 +34,7 @@
{[ if (o.role === "visitor") { ]}
<span class="badge badge-secondary">{{{o.label_visitor}}}</span>
{[ } ]}
</span>
</div>
</div>
</li>
tests/mock.js
View file @ 11a53608
......@@ -149,15 +149,19 @@
function initConverse (settings, spies, promises) {
window.localStorage.clear();
window.sessionStorage.clear();
const el = document.querySelector('#conversejs');
if (el) {
el.parentElement.removeChild(el);
}
var connection = mock.mock_connection();
const connection = mock.mock_connection();
if (!_.isUndefined(spies)) {
_.forEach(spies, function (method) {
spyOn(connection, method);
});
}
var _converse = converse.initialize(_.extend({
const _converse = converse.initialize(_.extend({
'i18n': 'en',
'auto_subscribe': false,
'play_sounds': false,
......@@ -216,8 +220,8 @@
mock.initConverseWithPromises = function (spies, promise_names, settings, func) {
return function (done) {
var _converse = initConverse(settings, spies);
var promises = _.map(promise_names, _converse.api.waitUntil);
const _converse = initConverse(settings, spies);
const promises = _.map(promise_names, _converse.api.waitUntil);
Promise.all(promises)
.then(_.partial(func, done, _converse))
.catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL));
......
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