Fixes #1437. List of groupchats doesn't scroll

CHANGES.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 4.1.3 (Unreleased)
+
+- #1437: List of groupchats in modal doesn't scroll
+
 ## 4.1.2 (2019-02-22)
 
 - Updated translations: af, cz, de, es, he, it, nl, nl_BE, pt_BR, zh_CN

css/converse.css

@@ -11400,6 +11400,16 @@ body.converse-fullscreen {
 #conversejs .add-chatroom input[type="button"] {
   margin: 0.3em 0; }
 
+#conversejs.converse-embedded #list-chatrooms-modal .modal-body,
+#conversejs #list-chatrooms-modal .modal-body {
+  max-height: 70vh;
+  padding-bottom: 0; }
+
+#conversejs.converse-embedded #list-chatrooms-modal .available-chatrooms,
+#conversejs #list-chatrooms-modal .available-chatrooms {
+  overflow: auto;
+  padding-bottom: 1rem; }
+
 #conversejs.converse-embedded #room-details-modal .features-list,
 #conversejs #room-details-modal .features-list {
   margin-left: 1em; }

dist/converse.js

@@ -53533,8 +53533,6 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_3__["default"].plugins
         this.rooms = iq.querySelectorAll('query item');
 
         if (this.rooms.length) {
-          // For translators: %1$s is a variable and will be
-          // replaced with the XMPP server name
           available_chatrooms.innerHTML = templates_rooms_results_html__WEBPACK_IMPORTED_MODULE_24___default()({
             'feedback_text': __('Groupchats found:')
           });
@@ -93672,7 +93670,7 @@ module.exports = function(o) {
 var __t, __p = '', __e = _.escape;
 __p += '<!-- src/templates/list_chatrooms_modal.html -->\n<div class="modal fade" id="list-chatrooms-modal" tabindex="-1" role="dialog" aria-labelledby="list-chatrooms-modal-label" aria-hidden="true">\n    <div class="modal-dialog" role="document">\n        <div class="modal-content">\n            <div class="modal-header">\n                <h5 class="modal-title"\n                    id="list-chatrooms-modal-label">' +
 __e(o.heading_list_chatrooms) +
-'</h5>\n                <button type="button" class="close" data-dismiss="modal" aria-label="Close">\n                    <span aria-hidden="true">×</span>\n                </button>\n            </div>\n            <div class="modal-body">\n                <form class="converse-form list-chatrooms">\n                    <div class="form-group">\n                        <label for="chatroom">' +
+'</h5>\n                <button type="button" class="close" data-dismiss="modal" aria-label="Close">\n                    <span aria-hidden="true">×</span>\n                </button>\n            </div>\n            <div class="modal-body d-flex flex-column">\n                <form class="converse-form list-chatrooms">\n                    <div class="form-group">\n                        <label for="chatroom">' +
 __e(o.label_server_address) +
 ':</label>\n                        <input type="text" value="' +
 __e(o.muc_domain) +

sass/_chatrooms.scss

@@ -12,6 +12,17 @@
         }
     }
 
+    #list-chatrooms-modal {
+        .modal-body {
+			max-height: 70vh;
+            padding-bottom: 0; // When the list of chats overflows, we don't want bottom padding
+        }
+        .available-chatrooms {
+            overflow: auto;
+            padding-bottom: 1rem;
+        }
+    }
+
     #room-details-modal {
         .features-list {
             margin-left: 1em;

spec/muc.js

@@ -3974,8 +3974,11 @@
                 await test_utils.waitUntil(() => sizzle('.chatroom', _converse.el).filter(u.isVisible).length === 1);
                 done();
             }));
+        });
+
+        describe("The \"Groupchats\" List modal", function () {
 
-            it("contains a link to a modal which can list groupchats publically available on the server",
+            it("can be opened from a link in the \"Groupchats\" section of the controlbox",
                 mock.initConverse(
                     null, ['rosterGroupsFetched', 'chatBoxesFetched'], {},
                     async function (done, _converse) {
@@ -4017,11 +4020,16 @@
                 .c('item', { jid:'heath@chat.shakespeare.lit', name:'A Lonely Heath'}).up()
                 .c('item', { jid:'coven@chat.shakespeare.lit', name:'A Dark Cave'}).up()
                 .c('item', { jid:'forres@chat.shakespeare.lit', name:'The Palace'}).up()
-                .c('item', { jid:'inverness@chat.shakespeare.lit', name:'Macbeth's Castle'}).nodeTree;
+                .c('item', { jid:'inverness@chat.shakespeare.lit', name:'Macbeth's Castle'}).up()
+                .c('item', { jid:'orchard@chat.shakespeare.lit', name:'Capulet\'s Orchard'}).up()
+                .c('item', { jid:'friar@chat.shakespeare.lit', name:'Friar Laurence\'s cell'}).up()
+                .c('item', { jid:'hall@chat.shakespeare.lit', name:'Hall in Capulet\'s house'}).up()
+                .c('item', { jid:'chamber@chat.shakespeare.lit', name:'Juliet\'s chamber'}).up()
+                .c('item', { jid:'public@chat.shakespeare.lit', name:'A public place'}).up()
+                .c('item', { jid:'street@chat.shakespeare.lit', name:'A street'}).nodeTree;
                 _converse.connection._dataRecv(test_utils.createRequest(iq));
 
                 await test_utils.waitUntil(() => modal.el.querySelectorAll('.available-chatrooms li').length === 5);
-
                 const rooms = modal.el.querySelectorAll('.available-chatrooms li');
                 expect(rooms[0].textContent.trim()).toBe("Groupchats found:");
                 expect(rooms[1].textContent.trim()).toBe("A Lonely Heath");

src/converse-muc-views.js

@@ -323,9 +323,7 @@ converse.plugins.add('converse-muc-views', {
 
             informNoRoomsFound () {
                 const chatrooms_el = this.el.querySelector('.available-chatrooms');
-                chatrooms_el.innerHTML = tpl_rooms_results({
-                    'feedback_text': __('No groupchats found')
-                });
+                chatrooms_el.innerHTML = tpl_rooms_results({'feedback_text': __('No groupchats found')});
                 const input_el = this.el.querySelector('input[name="server"]');
                 input_el.classList.remove('hidden')
                 this.removeSpinner();
@@ -338,11 +336,7 @@ converse.plugins.add('converse-muc-views', {
                 const available_chatrooms = this.el.querySelector('.available-chatrooms');
                 this.rooms = iq.querySelectorAll('query item');
                 if (this.rooms.length) {
-                    // For translators: %1$s is a variable and will be
-                    // replaced with the XMPP server name
-                    available_chatrooms.innerHTML = tpl_rooms_results({
-                        'feedback_text': __('Groupchats found:')
-                    });
+                    available_chatrooms.innerHTML = tpl_rooms_results({'feedback_text': __('Groupchats found:')});
                     const fragment = document.createDocumentFragment();
                     const children = _.reject(_.map(this.rooms, this.roomStanzaItemToHTMLElement), _.isNil)
                     _.each(children, (child) => fragment.appendChild(child));

src/templates/list_chatrooms_modal.html

@@ -8,7 +8,7 @@
                     <span aria-hidden="true">×</span>
                 </button>
             </div>
-            <div class="modal-body">
+            <div class="modal-body d-flex flex-column">
                 <form class="converse-form list-chatrooms">
                     <div class="form-group">
                         <label for="chatroom">{{{o.label_server_address}}}:</label>