From ff2910b9ce73d6670f9e2e9867d5cd1b6a33b7e5 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Sat, 24 Oct 2015 19:52:54 +0000 Subject: [PATCH] Fix CSS and horizontal dragresize for chat rooms. - Rename .chat-body to .chatroom-body - Upate SASS for chat rooms - Hide the room occupants view by toggling the class "hidden" - The chatroom chat area and occupants list are now shown as table cells. --- converse.js | 30 +-- css/converse.css | 235 +++++++++-------- mockup/chatroom.html | 2 +- mockup/chatroom2.html | 309 ++++++++++++++++++++++ mockup/index.html | 14 +- sass/_core.scss | 511 ++++++++++++++++++------------------ sass/_variables.scss | 2 +- spec/chatroom.js | 20 +- src/templates/chatroom.html | 2 +- 9 files changed, 726 insertions(+), 399 deletions(-) create mode 100644 mockup/chatroom2.html diff --git a/converse.js b/converse.js index bece6be3a..8d1767c42 100644 --- a/converse.js +++ b/converse.js @@ -2869,7 +2869,7 @@ renderChatArea: function () { if (!this.$('.chat-area').length) { - this.$('.chat-body').empty() + this.$('.chatroom-body').empty() .append( converse.templates.chatarea({ 'show_toolbar': converse.show_toolbar, @@ -2895,13 +2895,13 @@ if (!this.model.get('hidden_occupants')) { this.model.save({hidden_occupants: true}); $el.removeClass('icon-hide-users').addClass('icon-show-users'); - this.$('form.sendXMPPMessage, .chat-area').animate({width: '100%'}); - this.$('div.participants').animate({width: 0}, this.scrollDown.bind(this)); + this.$('div.participants').addClass('hidden'); + this.scrollDown(); } else { this.model.save({hidden_occupants: false}); $el.removeClass('icon-show-users').addClass('icon-hide-users'); - this.$('.chat-area, form.sendXMPPMessage').css({width: ''}); - this.$('div.participants').show().animate({width: 'auto'}, this.scrollDown.bind(this)); + this.$('div.participants').removeClass('hidden'); + this.scrollDown(); } }, @@ -3223,7 +3223,7 @@ function () { $(this).remove(); that.$el.find('.chat-area').show(); - that.$el.find('.participants').show(); + that.$el.find('.participants').removeClass('hidden'); }); }, @@ -3242,7 +3242,7 @@ function () { $(this).remove(); that.$el.find('.chat-area').show(); - that.$el.find('.participants').show(); + that.$el.find('.participants').removeClass('hidden'); }); }, @@ -3251,8 +3251,8 @@ if (this.$el.find('div.chatroom-form-container').length) { return; } - this.$('.chat-body').children().hide(); - this.$('.chat-body').append( + this.$('.chatroom-body').children().hide(); + this.$('.chatroom-body').append( $('
'+ '
'+ '
-
+
Configuration for discuss@conference.conversejs.com diff --git a/mockup/chatroom2.html b/mockup/chatroom2.html new file mode 100644 index 000000000..a574a7e6a --- /dev/null +++ b/mockup/chatroom2.html @@ -0,0 +1,309 @@ + + + + Converse.js: Mockup + + + + + + + + + + +
+
+

Converse.js

+

Static Mockup

+
+
+ +
+ + Toggle Chat + + + +
+
+
+
+
+
+ + + +
Chatroom
+

May the force be with you

+
+
+
+
+
+ 18:50 luke:  + leia: hi :) +
+
+ 19:40 leia:  + + I'll be gone for a while, will be back in about an hour +
+ +
+ 19:40 Obi-wan Kenobi, Jedi Master:  + + I'll be gone for a while, will be back in about an hour +
+
+ 19:42 me:  + Supercalifragilisticexpialidociousstillnotlongenough +
+
+ 19:43 Obi-wan Kenobi, Jedi Master:  + Another message to check that scrolling works. +
+
+ +
    +
  • +
      +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
    +
    • +
    • +
    • +
+ + +
+
+
+ +
+ +
    +
  • Obi-wan Kenobi, Jedi Master
    • +
  • jabber the hut
    • +
  • leia
    • +
  • luke
    • +
+
+
+
+
+ +
+
+
+
+ + + +
Restricted Chatroom
+

+

+
+
+
+
+ + This chatroom requires a password + + +
+
+
+
+
+ + +
+ + + diff --git a/mockup/index.html b/mockup/index.html index 3e9da660d..a12934493 100644 --- a/mockup/index.html +++ b/mockup/index.html @@ -361,16 +361,17 @@ JID: rassie.erasmus@localhost">Rassie Erasmus
-
+
+
+
-
Chatroom

May the force be with you

-
+
@@ -397,10 +398,9 @@ JID: rassie.erasmus@localhost">Rassie Erasmus Another message to check that scrolling works.
-
    -
  • +
      • @@ -425,9 +425,9 @@ JID: rassie.erasmus@localhost">Rassie Erasmus
- + - +
  • Obi-wan Kenobi, Jedi Master
  • jabber the hut
    • diff --git a/sass/_core.scss b/sass/_core.scss index df2f89661..773d099b4 100644 --- a/sass/_core.scss +++ b/sass/_core.scss @@ -415,45 +415,41 @@ } } - .tt-dropdown-menu { - margin: 0 1px 0 1px; - width: 96px; - max-height: 250px; - overflow-x: hidden; - overflow-y: auto; - text-overflow: ellipsis; - background: #27774A; - border-bottom-right-radius: $chatbox-border-radius; - border-bottom-left-radius: $chatbox-border-radius; - } - - .chat-blink { - background-color: #176679; - border-right: 1px solid #176679; - border-left: 1px solid #176679; - } - - .chat-content { - position: relative; - padding: 8px; - font-size: 13px; - color: $text-color; - overflow-y: auto; - border: 0; - background-color: #ffffff; - line-height: 1.3em; - height: 206px; - height: calc(100% - #{$toolbar-height + $chat-textarea-height + 2}); - } - - .chat-info { - color: $text-color; - } - - .chat-error { - color: $warning-color; - font-weight: bold; - } + .tt-dropdown-menu { + margin: 0 1px 0 1px; + width: 96px; + max-height: 250px; + overflow-x: hidden; + overflow-y: auto; + text-overflow: ellipsis; + background: #27774A; + border-bottom-right-radius: $chatbox-border-radius; + border-bottom-left-radius: $chatbox-border-radius; + } + .chat-blink { + background-color: #176679; + border-right: 1px solid #176679; + border-left: 1px solid #176679; + } + .chat-content { + position: relative; + padding: 0.5em; + font-size: 13px; + color: $text-color; + overflow-y: auto; + border: 0; + background-color: #ffffff; + line-height: 1.3em; + height: 206px; + height: calc(100% - #{$toolbar-height + $chat-textarea-height +1px}); + } + .chat-info { + color: $text-color; + } + .chat-error { + color: $warning-color; + font-weight: bold; + } .chat-error, .chat-info, @@ -989,98 +985,119 @@ } } - .chatroom { - width: $chatroom-width; - .box-flyout { - width: $chatroom-width; - } - @media screen and (max-width: $mobile-landscape-length) { - width: $mobile-chat-width; - .box-flyout { - width: $mobile-chat-width; - } - } - - label { - margin-left: 2px; - font-size: 12px; - } - .participant-list { - list-style: none; - li { - cursor: default; - display: block; - font-size: 12px; - font-weight: bold; - overflow: hidden; - padding: 2px 5px; - text-overflow: ellipsis; - white-space: nowrap; - &.moderator { - color: #8f2831; + .chatroom { + width: $chatroom-width; + @media screen and (max-width: $mobile-landscape-length) { + width: $mobile-chat-width; + .box-flyout { + min-width: $mobile-chat-width; + width: $mobile-chat-width; + } + } + .box-flyout { + min-width: $chatroom-width; + width: $chatroom-width; + .chatroom-body { + height: 289px; + @include border-bottom-radius($chatbox-border-radius); + @include calc(height, '100% - #{$chat-head-height}'); + background-color: white; + border-top: 0; + display: table; + table-layout: fixed; + width: 100%; + .chat-area { + word-wrap: break-word; + display: table-cell; + height: 100%; + min-width: $chat-width; + .chat-content { + padding: 0.5em 0.5em 0 0.5em; // Work around a weird box-sizing issue in Chromium related to bottom padding. + } + } + .participants { + display: table-cell; + vertical-align: top; + background-color: white; + overflow-y: auto; + overflow-x: hidden; + border-left: 1px solid #AAA; + border-bottom-right-radius: $chatbox-border-radius; + width: 100px; + height: 100%; + &.hidden { + display: none; + } + .participant-list { + list-style: none; + li { + cursor: default; + display: block; + font-size: 12px; + font-weight: bold; + overflow: hidden; + padding: 2px 5px; + text-overflow: ellipsis; + white-space: nowrap; + width: 100px; + &.moderator { + color: #8f2831; + } + } + } + label { + font-size: 12px; + font-style: italic; + margin: 5px; + display: block; + } + } + } } - } - } - .chat-textarea { - border-bottom-right-radius: 0; - } - .chat-area { - float: left; - height: 100%; - min-width: $chat-width; - } - .invited-contact { - margin: -1px 0 0 -1px; - width: 100px; - border: 1px solid #999; - } - .invited-contact.tt-input { - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC ) no-repeat right 3px center; - } - .participants { - float: right; - background-color: white; - overflow-y: auto; - overflow-x: hidden; - border-left: 1px solid #AAA; - border-bottom-right-radius: $chatbox-border-radius; - width: 100px; - height: 100%; - label { - font-size: 12px; - font-style: italic; - margin: 5px; - display: block; - } - } - } - .chatroom-form, - .controlbox-pane { - background-color: white; - border-bottom-left-radius: $chatbox-border-radius; - border-bottom-right-radius: $chatbox-border-radius; - border: 0; - font-size: $font-size; - overflow-y: auto; - position: absolute; - text-align: center; - width: 100%; - height: 289px; - @include calc(height, '100% - #{$chat-head-height}'); - } - - .controlbox-pane { - overflow-y: hidden; - overflow-x: hidden; - dd { - margin-left: 0; - margin-bottom: 0; - &.odd { - background-color: #DCEAC5; - } + label { + margin-left: 2px; + font-size: 12px; + } + .chat-textarea { + border-bottom-right-radius: 0; + } + .invited-contact { + margin: -1px 0 0 -1px; + width: 100px; + border: 1px solid #999; + } + .invited-contact.tt-input { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC ) no-repeat right 3px center; + } + } + + .chatroom-form, + .controlbox-pane { + background-color: white; + border-bottom-left-radius: $chatbox-border-radius; + border-bottom-right-radius: $chatbox-border-radius; + border: 0; + font-size: $font-size; + overflow-y: auto; + position: absolute; + text-align: center; + width: 100%; + height: 289px; + @include calc(height, '100% - #{$chat-head-height}'); + } + + .controlbox-pane { + overflow-y: hidden; + overflow-x: hidden; + dd { + margin-left: 0; + margin-bottom: 0; + &.odd { + background-color: #DCEAC5; + } + } } - } #converse-register { background: white; @@ -1278,139 +1295,125 @@ } } - div#chatrooms { - overflow-y: auto; - } - - form.sendXMPPMessage { - -moz-background-clip: padding; - -moz-border-radius: $chatbox-border-radius; - -webkit-background-clip: padding-box; - -webkit-border-radius: $chatbox-border-radius; - background-clip: padding-box; - background: white; - border-radius: $chatbox-border-radius; - border-top-left-radius: 0; - border-top-right-radius: 0; - border-top: 1px solid #BBB; - border: 0; - margin: 0; - padding: 0; - position: relative; - height: #{$chat-textarea-height + $toolbar-height}; - min-width: $chat-width; - @media screen and (max-width: $mobile-landscape-length) { - width: 100%; - } - .chat-textarea { - @include border-bottom-radius(4px); - border: 0; - height: $chat-textarea-height; - padding: 0.5em; - width: 100%; - resize: none; - } - } - - .chat-toolbar { - font-size: $font-size; - margin: 0; - padding: 5px; - height: $toolbar-height; - display: block; - background-color: $light-background-color; - - a { - color: $link-color; + #chatrooms { + overflow-y: auto; } - .unencrypted a, - .unencrypted { - color: #8f2831; - } - - .unverified a, - .unverified { - color: #cf5300; - } - - .private a, - .private { - color: #4b7003; - } - - .toggle-participants, - .toggle-clear, - .toggle-otr { - float: right; - } - - li { - display: inline-block; - list-style: none; - padding: 0 3px 0 3px; - cursor: pointer; - margin-top: 1px; - } - li:hover { - cursor: pointer; - } - - ul { - background: #fff; - bottom: 100%; - box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4); - display: none; - font-size: 12px; - margin: 0 0 1px 0; - position: absolute; - right: 0; - li { - cursor: pointer; - list-style: none; + form.sendXMPPMessage { + -moz-background-clip: padding; + -webkit-background-clip: padding-box; + @include border-bottom-radius($chatbox-border-radius); + background-clip: padding-box; + background: white; + border-top: 1px solid #BBB; + border: 0; + margin: 0; + padding: 0; position: relative; - a:hover { - color: #8f2831; + height: #{$chat-textarea-height + $toolbar-height}; + min-width: $chat-width; + @media screen and (max-width: $mobile-landscape-length) { + width: 100%; } - } - } - - .toggle-smiley { - color: $link-color; - padding-left: 5px; - ul { - li { - font-size: $font-size; - padding: 5px; - z-index: 98; + .chat-textarea { + @include border-bottom-radius($chatbox-border-radius); + border: 0; + height: $chat-textarea-height; + padding: 0.5em; + width: 100%; + resize: none; } - li:hover { - background-color: $highlight-color; - } - } - } - - .toggle-otr { - ul { - li { - padding: 7px; - background-color: white; - display: block; - z-index: 99; - a { - -moz-transition: background-color 0.2s ease-in-out; - -webkit-transition: background-color 0.2s ease-in-out; - transition: background-color 0.2s ease-in-out; + .chat-toolbar { + font-size: $font-size; + margin: 0; + padding: 5px; + height: $toolbar-height; display: block; - padding: 1px; - text-decoration: none; - } + background-color: $light-background-color; + a { + color: $link-color; + } + .unencrypted a, + .unencrypted { + color: #8f2831; + } + .unverified a, + .unverified { + color: #cf5300; + } + .private a, + .private { + color: #4b7003; + } + .toggle-participants, + .toggle-clear, + .toggle-otr { + float: right; + } + li { + display: inline-block; + list-style: none; + padding: 0 3px 0 3px; + cursor: pointer; + margin-top: 1px; + } + li:hover { + cursor: pointer; + } + ul { + background: #fff; + bottom: 100%; + box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4); + display: none; + font-size: 12px; + margin: 0 0 1px 0; + position: absolute; + right: 0; + li { + cursor: pointer; + list-style: none; + position: relative; + a:hover { + color: #8f2831; + } + } + } + .toggle-smiley { + color: $link-color; + padding-left: 5px; + ul { + li { + font-size: $font-size; + padding: 5px; + z-index: 98; + } + li:hover { + background-color: $highlight-color; + } + } + } + .toggle-otr { + ul { + li { + padding: 7px; + background-color: white; + display: block; + z-index: 99; + a { + -moz-transition: background-color 0.2s ease-in-out; + -webkit-transition: background-color 0.2s ease-in-out; + transition: background-color 0.2s ease-in-out; + display: block; + padding: 1px; + text-decoration: none; + } + } + li:hover { + background-color: $highlight-color; + } + } + } } - li:hover { - background-color: $highlight-color; - } - } - } } .chat-toolbar-text { diff --git a/sass/_variables.scss b/sass/_variables.scss index 034d425b7..4e256c7de 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -15,7 +15,7 @@ $chat-head-inverse-text-color: white !default; $chat-head-height: 44px !default; $save-button-color: #436F64 !default; - $chat-textarea-height: 62px !default; + $chat-textarea-height: 70px !default; $toolbar-height: 25px !default; $toolbar-color: beige !default; $message-them-color: #346121 !default; diff --git a/spec/chatroom.js b/spec/chatroom.js index 176fa099f..e148a0848 100644 --- a/spec/chatroom.js +++ b/spec/chatroom.js @@ -404,7 +404,7 @@ view.onChatRoomPresence(presence, {nick: 'dummy', name: 'lounge@localhost'}); expect(view.$('.chat-area').is(':visible')).toBeFalsy(); expect(view.$('.participants').is(':visible')).toBeFalsy(); - var $chat_body = view.$('.chat-body'); + var $chat_body = view.$('.chatroom-body'); expect($chat_body.html().trim().indexOf('

    You have been kicked from this room

    The reason given is: "Avaunt, you cullion!"

    ')).not.toBe(-1); }.bind(converse)); @@ -576,7 +576,7 @@ }); waits(250); runs(function () { - var $chat_body = view.$el.find('.chat-body'); + var $chat_body = view.$el.find('.chatroom-body'); expect(view.renderPasswordForm).toHaveBeenCalled(); expect($chat_body.find('form.chatroom-form').length).toBe(1); expect($chat_body.find('legend').text()).toBe('This chatroom requires a password'); @@ -595,7 +595,7 @@ var view = this.chatboxviews.get('problematic@muc.localhost'); spyOn(view, 'showErrorMessage').andCallThrough(); view.onChatRoomPresence(presence, {'nick': 'dummy'}); - expect(view.$el.find('.chat-body p').text()).toBe('You are not on the member list of this room'); + expect(view.$el.find('.chatroom-body p').text()).toBe('You are not on the member list of this room'); }.bind(converse)); it("will show an error message if the user has been banned", function () { @@ -610,7 +610,7 @@ var view = this.chatboxviews.get('problematic@muc.localhost'); spyOn(view, 'showErrorMessage').andCallThrough(); view.onChatRoomPresence(presence, {'nick': 'dummy'}); - expect(view.$el.find('.chat-body p').text()).toBe('You have been banned from this room'); + expect(view.$el.find('.chatroom-body p').text()).toBe('You have been banned from this room'); }.bind(converse)); it("will show an error message if no nickname was specified for the user", function () { @@ -625,7 +625,7 @@ var view = this.chatboxviews.get('problematic@muc.localhost'); spyOn(view, 'showErrorMessage').andCallThrough(); view.onChatRoomPresence(presence, {'nick': 'dummy'}); - expect(view.$el.find('.chat-body p').text()).toBe('No nickname was specified'); + expect(view.$el.find('.chatroom-body p').text()).toBe('No nickname was specified'); }.bind(converse)); it("will show an error message if the user is not allowed to have created the room", function () { @@ -640,7 +640,7 @@ var view = this.chatboxviews.get('problematic@muc.localhost'); spyOn(view, 'showErrorMessage').andCallThrough(); view.onChatRoomPresence(presence, {'nick': 'dummy'}); - expect(view.$el.find('.chat-body p').text()).toBe('You are not allowed to create new rooms'); + expect(view.$el.find('.chatroom-body p').text()).toBe('You are not allowed to create new rooms'); }.bind(converse)); it("will show an error message if the user's nickname doesn't conform to room policy", function () { @@ -655,7 +655,7 @@ var view = this.chatboxviews.get('problematic@muc.localhost'); spyOn(view, 'showErrorMessage').andCallThrough(); view.onChatRoomPresence(presence, {'nick': 'dummy'}); - expect(view.$el.find('.chat-body p').text()).toBe("Your nickname doesn't conform to this room's policies"); + expect(view.$el.find('.chatroom-body p').text()).toBe("Your nickname doesn't conform to this room's policies"); }.bind(converse)); it("will show an error message if the user's nickname is already taken", function () { @@ -670,7 +670,7 @@ var view = this.chatboxviews.get('problematic@muc.localhost'); spyOn(view, 'showErrorMessage').andCallThrough(); view.onChatRoomPresence(presence, {'nick': 'dummy'}); - expect(view.$el.find('.chat-body p').text()).toBe("Your nickname is already taken"); + expect(view.$el.find('.chatroom-body p').text()).toBe("Your nickname is already taken"); }.bind(converse)); it("will show an error message if the room doesn't yet exist", function () { @@ -685,7 +685,7 @@ var view = this.chatboxviews.get('problematic@muc.localhost'); spyOn(view, 'showErrorMessage').andCallThrough(); view.onChatRoomPresence(presence, {'nick': 'dummy'}); - expect(view.$el.find('.chat-body p').text()).toBe("This room does not (yet) exist"); + expect(view.$el.find('.chatroom-body p').text()).toBe("This room does not (yet) exist"); }.bind(converse)); it("will show an error message if the room has reached it's maximum number of occupants", function () { @@ -700,7 +700,7 @@ var view = this.chatboxviews.get('problematic@muc.localhost'); spyOn(view, 'showErrorMessage').andCallThrough(); view.onChatRoomPresence(presence, {'nick': 'dummy'}); - expect(view.$el.find('.chat-body p').text()).toBe("This room has reached it's maximum number of occupants"); + expect(view.$el.find('.chatroom-body p').text()).toBe("This room has reached it's maximum number of occupants"); }.bind(converse)); }.bind(converse)); }.bind(converse, mock, test_utils)); diff --git a/src/templates/chatroom.html b/src/templates/chatroom.html index 67157968a..475fd96b8 100644 --- a/src/templates/chatroom.html +++ b/src/templates/chatroom.html @@ -9,5 +9,5 @@
    {{ _.escape(name) }}

-
+