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
Expand all Hide 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 ...@@ -139,7 +139,7 @@ css/%.min.css:: css/%.css
.PHONY: watchcss .PHONY: watchcss
watchcss: dev 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 .PHONY: watchjs
watchjs: dev dist/converse-headless.js watchjs: dev dist/converse-headless.js
...@@ -151,7 +151,7 @@ watchjsheadless: dev ...@@ -151,7 +151,7 @@ watchjsheadless: dev
.PHONY: watch .PHONY: watch
watch: dev watch: dev
make -j 3 watchcss watchjsheadless watchjs make -j 3 watchcss watchjsheadless watchjs
.PHONY: logo .PHONY: logo
logo: logo/conversejs-transparent16.png \ logo: logo/conversejs-transparent16.png \
......
css/converse.css
View file @ 11a53608
...@@ -11289,6 +11289,20 @@ body.reset { ...@@ -11289,6 +11289,20 @@ body.reset {
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant, #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant { #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant {
cursor: pointer; } 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.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 { #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant div.row.no-gutters {
flex-wrap: nowrap; flex-wrap: nowrap;
...@@ -11378,6 +11392,8 @@ body.reset { ...@@ -11378,6 +11392,8 @@ body.reset {
#conversejs.converse-overlayed .chatbox.chatroom { #conversejs.converse-overlayed .chatbox.chatroom {
min-width: 400px !important; min-width: 400px !important;
width: 400px; } width: 400px; }
#conversejs.converse-overlayed .chatbox.chatroom .chatroom-features {
display: none !important; }
#conversejs.converse-overlayed .chatbox.chatroom .box-flyout { #conversejs.converse-overlayed .chatbox.chatroom .box-flyout {
min-width: 400px !important; min-width: 400px !important;
width: 400px; } width: 400px; }
...@@ -11393,6 +11409,8 @@ body.reset { ...@@ -11393,6 +11409,8 @@ body.reset {
padding: 0; } padding: 0; }
#conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .occupants .chatroom-features .feature { #conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .occupants .chatroom-features .feature {
font-size: 10px; } 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 { #conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .occupants ul .occupant .occupant-status {
margin-top: 6px; } margin-top: 6px; }
#conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .chat-area { #conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .chat-area {
......
dist/converse.js
View file @ 11a53608
...@@ -102473,39 +102473,39 @@ __p += '>\n <div class="row no-gutters">\n <div class="col-auto">\n ...@@ -102473,39 +102473,39 @@ __p += '>\n <div class="row no-gutters">\n <div class="col-auto">\n
__e(o.show) + __e(o.show) +
' circle" title="' + ' circle" title="' +
__e(o.hint_show) + __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) + __e(o.nick || o.jid) +
'</span>\n '; '</span>\n <span class="occupant-badges">\n ';
if (o.affiliation === "owner") { ; if (o.affiliation === "owner") { ;
__p += '\n <span class="badge badge-danger">' + __p += '\n <span class="badge badge-danger">' +
__e(o.label_owner) + __e(o.label_owner) +
'</span>\n '; '</span>\n ';
} ; } ;
__p += '\n '; __p += '\n ';
if (o.affiliation === "admin") { ; if (o.affiliation === "admin") { ;
__p += '\n <span class="badge badge-info">' + __p += '\n <span class="badge badge-info">' +
__e(o.label_admin) + __e(o.label_admin) +
'</span>\n '; '</span>\n ';
} ; } ;
__p += '\n '; __p += '\n ';
if (o.affiliation === "member") { ; if (o.affiliation === "member") { ;
__p += '\n <span class="badge badge-info">' + __p += '\n <span class="badge badge-info">' +
__e(o.label_member) + __e(o.label_member) +
'</span>\n '; '</span>\n ';
} ; } ;
__p += '\n\n '; __p += '\n\n ';
if (o.role === "moderator") { ; if (o.role === "moderator") { ;
__p += '\n <span class="badge badge-info">' + __p += '\n <span class="badge badge-info">' +
__e(o.label_moderator) + __e(o.label_moderator) +
'</span>\n '; '</span>\n ';
} ; } ;
__p += '\n '; __p += '\n ';
if (o.role === "visitor") { ; if (o.role === "visitor") { ;
__p += '\n <span class="badge badge-secondary">' + __p += '\n <span class="badge badge-secondary">' +
__e(o.label_visitor) + __e(o.label_visitor) +
'</span>\n '; '</span>\n ';
} ; } ;
__p += '\n </div>\n </div>\n</li>\n'; __p += '\n </span>\n </div>\n </div>\n</li>\n';
return __p return __p
}; };
mockup/chatroom.html
View file @ 11a53608
This diff is collapsed.
sass/_chatrooms.scss
View file @ 11a53608
...@@ -197,6 +197,23 @@ ...@@ -197,6 +197,23 @@
&.occupant { &.occupant {
cursor: pointer; 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 { div.row.no-gutters {
flex-wrap: nowrap; flex-wrap: nowrap;
min-height: 1.5em; min-height: 1.5em;
...@@ -296,6 +313,11 @@ ...@@ -296,6 +313,11 @@
#conversejs.converse-overlayed { #conversejs.converse-overlayed {
.chatbox { .chatbox {
&.chatroom { &.chatroom {
.chatroom-features {
display: none !important;
}
min-width: $chatroom-width !important; min-width: $chatroom-width !important;
width: $chatroom-width; width: $chatroom-width;
.box-flyout { .box-flyout {
...@@ -323,6 +345,11 @@ ...@@ -323,6 +345,11 @@
} }
ul { ul {
.occupant { .occupant {
.occupant-nick-badge {
.occupant-badges {
display: none;
}
}
.occupant-status { .occupant-status {
margin-top: 6px; margin-top: 6px;
} }
......
spec/chatroom.js
View file @ 11a53608
...@@ -1555,14 +1555,14 @@ ...@@ -1555,14 +1555,14 @@
it("indicates moderators and visitors by means of a special css class and tooltip", it("indicates moderators and visitors by means of a special css class and tooltip",
mock.initConverseWithPromises( mock.initConverseWithPromises(
null, ['rosterGroupsFetched'], {}, null, ['rosterGroupsFetched'], {'view_mode': 'fullscreen'},
async function (done, _converse) { async function (done, _converse) {
await test_utils.openAndEnterChatRoom(_converse, 'lounge', 'localhost', 'dummy'); await test_utils.openAndEnterChatRoom(_converse, 'lounge', 'localhost', 'dummy');
var view = _converse.chatboxviews.get('lounge@localhost'); const view = _converse.chatboxviews.get('lounge@localhost');
var contact_jid = mock.cur_names[2].replace(/ /g,'.').toLowerCase() + '@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.length).toBe(1);
expect(occupants[0].querySelector('.occupant-nick').textContent.trim()).toBe("dummy"); expect(occupants[0].querySelector('.occupant-nick').textContent.trim()).toBe("dummy");
expect(occupants[0].querySelectorAll('.badge').length).toBe(2); expect(occupants[0].querySelectorAll('.badge').length).toBe(2);
...@@ -2200,7 +2200,7 @@ ...@@ -2200,7 +2200,7 @@
it("updates the shown features when the groupchat configuration has changed", it("updates the shown features when the groupchat configuration has changed",
mock.initConverseWithPromises( mock.initConverseWithPromises(
null, ['rosterGroupsFetched'], {}, null, ['rosterGroupsFetched'], {'view_mode': 'fullscreen'},
function (done, _converse) { function (done, _converse) {
var sent_IQ, IQ_id; var sent_IQ, IQ_id;
......
src/templates/occupant.html
View file @ 11a53608
...@@ -15,24 +15,26 @@ ...@@ -15,24 +15,26 @@
<div class="col-auto"> <div class="col-auto">
<div class="occupant-status occupant-{{{o.show}}} circle" title="{{{o.hint_show}}}"></div> <div class="occupant-status occupant-{{{o.show}}} circle" title="{{{o.hint_show}}}"></div>
</div> </div>
<div class="col"> <div class="col occupant-nick-badge">
<span class="occupant-nick">{{{o.nick || o.jid}}}</span> <span class="occupant-nick">{{{o.nick || o.jid}}}</span>
{[ if (o.affiliation === "owner") { ]} <span class="occupant-badges">
<span class="badge badge-danger">{{{o.label_owner}}}</span> {[ if (o.affiliation === "owner") { ]}
{[ } ]} <span class="badge badge-danger">{{{o.label_owner}}}</span>
{[ if (o.affiliation === "admin") { ]} {[ } ]}
<span class="badge badge-info">{{{o.label_admin}}}</span> {[ if (o.affiliation === "admin") { ]}
{[ } ]} <span class="badge badge-info">{{{o.label_admin}}}</span>
{[ if (o.affiliation === "member") { ]} {[ } ]}
<span class="badge badge-info">{{{o.label_member}}}</span> {[ if (o.affiliation === "member") { ]}
{[ } ]} <span class="badge badge-info">{{{o.label_member}}}</span>
{[ } ]}
{[ if (o.role === "moderator") { ]} {[ if (o.role === "moderator") { ]}
<span class="badge badge-info">{{{o.label_moderator}}}</span> <span class="badge badge-info">{{{o.label_moderator}}}</span>
{[ } ]} {[ } ]}
{[ if (o.role === "visitor") { ]} {[ if (o.role === "visitor") { ]}
<span class="badge badge-secondary">{{{o.label_visitor}}}</span> <span class="badge badge-secondary">{{{o.label_visitor}}}</span>
{[ } ]} {[ } ]}
</span>
</div> </div>
</div> </div>
</li> </li>
tests/mock.js
View file @ 11a53608
...@@ -149,15 +149,19 @@ ...@@ -149,15 +149,19 @@
function initConverse (settings, spies, promises) { function initConverse (settings, spies, promises) {
window.localStorage.clear(); window.localStorage.clear();
window.sessionStorage.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)) { if (!_.isUndefined(spies)) {
_.forEach(spies, function (method) { _.forEach(spies, function (method) {
spyOn(connection, method); spyOn(connection, method);
}); });
} }
var _converse = converse.initialize(_.extend({ const _converse = converse.initialize(_.extend({
'i18n': 'en', 'i18n': 'en',
'auto_subscribe': false, 'auto_subscribe': false,
'play_sounds': false, 'play_sounds': false,
...@@ -216,8 +220,8 @@ ...@@ -216,8 +220,8 @@
mock.initConverseWithPromises = function (spies, promise_names, settings, func) { mock.initConverseWithPromises = function (spies, promise_names, settings, func) {
return function (done) { return function (done) {
var _converse = initConverse(settings, spies); const _converse = initConverse(settings, spies);
var promises = _.map(promise_names, _converse.api.waitUntil); const promises = _.map(promise_names, _converse.api.waitUntil);
Promise.all(promises) Promise.all(promises)
.then(_.partial(func, done, _converse)) .then(_.partial(func, done, _converse))
.catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL)); .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