Right Align badges of room occupants

fixes #1264

Also...

- hide the badges in overlayed view mode
- hide the features list in overlayed view mode

Makefile

@@ -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
@@ -151,7 +151,7 @@ watchjsheadless: dev
 
 .PHONY: watch
 watch: dev
-	make -j 3 watchcss  watchjsheadless watchjs 
+	make -j 3 watchcss  watchjsheadless watchjs
 
 .PHONY: logo
 logo: logo/conversejs-transparent16.png \

css/converse.css

@@ -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

@@ -102473,39 +102473,39 @@ __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">' +
+__p += '\n                    <span class="badge badge-danger">' +
 __e(o.label_owner) +
-'</span>\n            ';
+'</span>\n                ';
  } ;
-__p += '\n            ';
+__p += '\n                ';
  if (o.affiliation === "admin") { ;
-__p += '\n                <span class="badge badge-info">' +
+__p += '\n                    <span class="badge badge-info">' +
 __e(o.label_admin) +
-'</span>\n            ';
+'</span>\n                ';
  } ;
-__p += '\n            ';
+__p += '\n                ';
  if (o.affiliation === "member") { ;
-__p += '\n                <span class="badge badge-info">' +
+__p += '\n                    <span class="badge badge-info">' +
 __e(o.label_member) +
-'</span>\n            ';
+'</span>\n                ';
  } ;
-__p += '\n\n            ';
+__p += '\n\n                ';
  if (o.role === "moderator") { ;
-__p += '\n                <span class="badge badge-info">' +
+__p += '\n                    <span class="badge badge-info">' +
 __e(o.label_moderator) +
-'</span>\n            ';
+'</span>\n                ';
  } ;
-__p += '\n            ';
+__p += '\n                ';
  if (o.role === "visitor") { ;
-__p += '\n                <span class="badge badge-secondary">' +
+__p += '\n                    <span class="badge badge-secondary">' +
 __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
 };
 

mockup/chatroom.html

@@ -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="badge badge-danger">Owner</span>
-                                            <span class="badge badge-info">Moderator</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="badge badge-info">Moderator</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="badge badge-secondary">Visitor</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

@@ -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

@@ -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

@@ -15,24 +15,26 @@
         <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>
-            {[ 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 === "member") { ]}
-                <span class="badge badge-info">{{{o.label_member}}}</span>
-            {[ } ]}
+            <span class="occupant-badges">
+                {[ 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 === "member") { ]}
+                    <span class="badge badge-info">{{{o.label_member}}}</span>
+                {[ } ]}
 
-            {[ if (o.role === "moderator") { ]}
-                <span class="badge badge-info">{{{o.label_moderator}}}</span>
-            {[ } ]}
-            {[ if (o.role === "visitor") { ]}
-                <span class="badge badge-secondary">{{{o.label_visitor}}}</span>
-            {[ } ]}
+                {[ if (o.role === "moderator") { ]}
+                    <span class="badge badge-info">{{{o.label_moderator}}}</span>
+                {[ } ]}
+                {[ if (o.role === "visitor") { ]}
+                    <span class="badge badge-secondary">{{{o.label_visitor}}}</span>
+                {[ } ]}
+            </span>
         </div>
     </div>
 </li>

tests/mock.js

@@ -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));