Skip to content

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

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.
parent 4f86a7ed
Expand all Show whitespace changes
Inline Side-by-side
Showing with 724 additions and 397 deletions
converse.js
View file @ ff2910b9
...@@ -2869,7 +2869,7 @@ ...@@ -2869,7 +2869,7 @@
renderChatArea: function () { renderChatArea: function () {
if (!this.$('.chat-area').length) { if (!this.$('.chat-area').length) {
this.$('.chat-body').empty() this.$('.chatroom-body').empty()
.append( .append(
converse.templates.chatarea({ converse.templates.chatarea({
'show_toolbar': converse.show_toolbar, 'show_toolbar': converse.show_toolbar,
...@@ -2895,13 +2895,13 @@ ...@@ -2895,13 +2895,13 @@
if (!this.model.get('hidden_occupants')) { if (!this.model.get('hidden_occupants')) {
this.model.save({hidden_occupants: true}); this.model.save({hidden_occupants: true});
$el.removeClass('icon-hide-users').addClass('icon-show-users'); $el.removeClass('icon-hide-users').addClass('icon-show-users');
this.$('form.sendXMPPMessage, .chat-area').animate({width: '100%'}); this.$('div.participants').addClass('hidden');
this.$('div.participants').animate({width: 0}, this.scrollDown.bind(this)); this.scrollDown();
} else { } else {
this.model.save({hidden_occupants: false}); this.model.save({hidden_occupants: false});
$el.removeClass('icon-show-users').addClass('icon-hide-users'); $el.removeClass('icon-show-users').addClass('icon-hide-users');
this.$('.chat-area, form.sendXMPPMessage').css({width: ''}); this.$('div.participants').removeClass('hidden');
this.$('div.participants').show().animate({width: 'auto'}, this.scrollDown.bind(this)); this.scrollDown();
} }
}, },
...@@ -3223,7 +3223,7 @@ ...@@ -3223,7 +3223,7 @@
function () { function () {
$(this).remove(); $(this).remove();
that.$el.find('.chat-area').show(); that.$el.find('.chat-area').show();
that.$el.find('.participants').show(); that.$el.find('.participants').removeClass('hidden');
}); });
}, },
...@@ -3242,7 +3242,7 @@ ...@@ -3242,7 +3242,7 @@
function () { function () {
$(this).remove(); $(this).remove();
that.$el.find('.chat-area').show(); that.$el.find('.chat-area').show();
that.$el.find('.participants').show(); that.$el.find('.participants').removeClass('hidden');
}); });
}, },
...@@ -3251,8 +3251,8 @@ ...@@ -3251,8 +3251,8 @@
if (this.$el.find('div.chatroom-form-container').length) { if (this.$el.find('div.chatroom-form-container').length) {
return; return;
} }
this.$('.chat-body').children().hide(); this.$('.chatroom-body').children().hide();
this.$('.chat-body').append( this.$('.chatroom-body').append(
$('<div class="chatroom-form-container">'+ $('<div class="chatroom-form-container">'+
'<form class="chatroom-form">'+ '<form class="chatroom-form">'+
'<span class="spinner centered"/>'+ '<span class="spinner centered"/>'+
...@@ -3275,9 +3275,9 @@ ...@@ -3275,9 +3275,9 @@
}, },
renderPasswordForm: function () { renderPasswordForm: function () {
this.$('.chat-body').children().hide(); this.$('.chatroom-body').children().hide();
this.$('span.centered.spinner').remove(); this.$('span.centered.spinner').remove();
this.$('.chat-body').append( this.$('.chatroom-body').append(
converse.templates.chatroom_password_form({ converse.templates.chatroom_password_form({
heading: __('This chatroom requires a password'), heading: __('This chatroom requires a password'),
label_password: __('Password: '), label_password: __('Password: '),
...@@ -3290,7 +3290,7 @@ ...@@ -3290,7 +3290,7 @@
this.$('.chat-area').hide(); this.$('.chat-area').hide();
this.$('.participants').hide(); this.$('.participants').hide();
this.$('span.centered.spinner').remove(); this.$('span.centered.spinner').remove();
this.$('.chat-body').append($('<p>'+msg+'</p>')); this.$('.chatroom-body').append($('<p>'+msg+'</p>'));
}, },
/* http://xmpp.org/extensions/xep-0045.html /* http://xmpp.org/extensions/xep-0045.html
...@@ -3462,8 +3462,6 @@ ...@@ -3462,8 +3462,6 @@
($presence.attr('from') == this.model.get('id')+'/'+Strophe.escapeNode(nick)); ($presence.attr('from') == this.model.get('id')+'/'+Strophe.escapeNode(nick));
if (this.model.get('connection_status') !== Strophe.Status.CONNECTED) { if (this.model.get('connection_status') !== Strophe.Status.CONNECTED) {
this.model.set('connection_status', Strophe.Status.CONNECTED); this.model.set('connection_status', Strophe.Status.CONNECTED);
this.$('span.centered.spinner').remove();
this.$el.find('.chat-body').children().show();
} }
this.showStatusMessages(pres, is_self); this.showStatusMessages(pres, is_self);
} }
...@@ -6073,8 +6071,8 @@ ...@@ -6073,8 +6071,8 @@
this.setUpXMLLogging = function () { this.setUpXMLLogging = function () {
if (this.debug) { if (this.debug) {
this.connection.xmlInput = function (body) { console.log(body.outerHTML); }; this.connection.xmlInput = function (body) { console.log(body); };
this.connection.xmlOutput = function (body) { console.log(body.outerHTML); }; this.connection.xmlOutput = function (body) { console.log(body); };
} }
}; };
......
css/converse.css
View file @ ff2910b9
This diff is collapsed.
mockup/chatroom.html
View file @ ff2910b9
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
<p class="chatroom-topic"></p> <p class="chatroom-topic"></p>
<p></p> <p></p>
</div> </div>
<div class="chat-body"> <div class="chatroom-body">
<div class="chatroom-form-container"> <div class="chatroom-form-container">
<form class="chatroom-form"> <form class="chatroom-form">
<legend>Configuration for discuss@conference.conversejs.com</legend> <legend>Configuration for discuss@conference.conversejs.com</legend>
......
mockup/chatroom2.html 0 → 100644
View file @ ff2910b9
This diff is collapsed.
mockup/index.html
View file @ ff2910b9
...@@ -361,16 +361,17 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span> ...@@ -361,16 +361,17 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span>
<div class="chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392"> <div class="chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<div class="dragresize"></div> <div class="dragresize dragresize-top"></div>
<div class="dragresize dragresize-topleft"></div>
<div class="dragresize dragresize-left"></div>
<div class="chat-head chat-head-chatroom"> <div class="chat-head chat-head-chatroom">
<a class="close-chatbox-button icon-close"></a> <a class="close-chatbox-button icon-close"></a>
<a class="toggle-chatbox-button icon-minus"></a> <a class="toggle-chatbox-button icon-minus"></a>
<a class="configure-chatroom-button icon-wrench" style=""></a> <a class="configure-chatroom-button icon-wrench" style=""></a>
<div class="chat-title"> Chatroom </div> <div class="chat-title"> Chatroom </div>
<p class="chatroom-topic">May the force be with you</p> <p class="chatroom-topic">May the force be with you</p>
</div> </div>
<div class="chat-body"> <div class="chatroom-body">
<div class="chat-area"> <div class="chat-area">
<div class="chat-content"> <div class="chat-content">
<div class="chat-message "> <div class="chat-message ">
...@@ -397,10 +398,9 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span> ...@@ -397,10 +398,9 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span>
<span class="chat-message-content">Another message to check that scrolling works.</span> <span class="chat-message-content">Another message to check that scrolling works.</span>
</div> </div>
</div> </div>
<form class="sendXMPPMessage" action="" method="post"> <form class="sendXMPPMessage" action="" method="post">
<ul class="chat-toolbar no-text-select"> <ul class="chat-toolbar no-text-select">
<li class="toggle-smiley icon-happy" title="Insert a smilery"> <li class="toggle-smiley icon-happy" title="Insert a smiley">
<ul> <ul>
<li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li> <li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li>
<li><a class="icon-wink" href="#" data-emoticon=";)"></a></li> <li><a class="icon-wink" href="#" data-emoticon=";)"></a></li>
...@@ -425,9 +425,9 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span> ...@@ -425,9 +425,9 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span>
</div> </div>
<div class="participants"> <div class="participants">
<form class="room-invite"> <form class="room-invite">
<input class="invited-contact tt-input" placeholder="Invite..." type="text"/> <span class="twitter-typeahead" style="position: relative; display: inline-block; direction: ltr;"><input class="invited-contact tt-hint" type="text" readonly="" autocomplete="off" spellcheck="false" tabindex="-1" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; opacity: 1;"><input class="invited-contact tt-input" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;"><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre><span class="tt-dropdown-menu" style="position: absolute; top: 100%; z-index: 100; display: none; left: 0px; right: auto;"><div class="tt-dataset-contacts-dataset"></div></span></span>
</form> </form>
<label>Participants:</label> <label>Occupants:</label>
<ul class="participant-list"> <ul class="participant-list">
<li class="participant" title="This user can send messages in this room">Obi-wan Kenobi, Jedi Master</li> <li class="participant" title="This user can send messages in this room">Obi-wan Kenobi, Jedi Master</li>
<li class="participant" title="This user can send messages in this room">jabber the hut</li> <li class="participant" title="This user can send messages in this room">jabber the hut</li>
......
sass/_core.scss
View file @ ff2910b9
...@@ -426,16 +426,14 @@ ...@@ -426,16 +426,14 @@
border-bottom-right-radius: $chatbox-border-radius; border-bottom-right-radius: $chatbox-border-radius;
border-bottom-left-radius: $chatbox-border-radius; border-bottom-left-radius: $chatbox-border-radius;
} }
.chat-blink { .chat-blink {
background-color: #176679; background-color: #176679;
border-right: 1px solid #176679; border-right: 1px solid #176679;
border-left: 1px solid #176679; border-left: 1px solid #176679;
} }
.chat-content { .chat-content {
position: relative; position: relative;
padding: 8px; padding: 0.5em;
font-size: 13px; font-size: 13px;
color: $text-color; color: $text-color;
overflow-y: auto; overflow-y: auto;
...@@ -443,13 +441,11 @@ ...@@ -443,13 +441,11 @@
background-color: #ffffff; background-color: #ffffff;
line-height: 1.3em; line-height: 1.3em;
height: 206px; height: 206px;
height: calc(100% - #{$toolbar-height + $chat-textarea-height + 2}); height: calc(100% - #{$toolbar-height + $chat-textarea-height +1px});
} }
.chat-info { .chat-info {
color: $text-color; color: $text-color;
} }
.chat-error { .chat-error {
color: $warning-color; color: $warning-color;
font-weight: bold; font-weight: bold;
...@@ -991,19 +987,46 @@ ...@@ -991,19 +987,46 @@
.chatroom { .chatroom {
width: $chatroom-width; width: $chatroom-width;
.box-flyout {
width: $chatroom-width;
}
@media screen and (max-width: $mobile-landscape-length) { @media screen and (max-width: $mobile-landscape-length) {
width: $mobile-chat-width; width: $mobile-chat-width;
.box-flyout { .box-flyout {
min-width: $mobile-chat-width;
width: $mobile-chat-width; width: $mobile-chat-width;
} }
} }
.box-flyout {
label { min-width: $chatroom-width;
margin-left: 2px; width: $chatroom-width;
font-size: 12px; .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 { .participant-list {
list-style: none; list-style: none;
...@@ -1016,19 +1039,29 @@ ...@@ -1016,19 +1039,29 @@
padding: 2px 5px; padding: 2px 5px;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
width: 100px;
&.moderator { &.moderator {
color: #8f2831; color: #8f2831;
} }
} }
} }
label {
font-size: 12px;
font-style: italic;
margin: 5px;
display: block;
}
}
}
}
label {
margin-left: 2px;
font-size: 12px;
}
.chat-textarea { .chat-textarea {
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.chat-area {
float: left;
height: 100%;
min-width: $chat-width;
}
.invited-contact { .invited-contact {
margin: -1px 0 0 -1px; margin: -1px 0 0 -1px;
width: 100px; width: 100px;
...@@ -1037,22 +1070,6 @@ ...@@ -1037,22 +1070,6 @@
.invited-contact.tt-input { .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; 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, .chatroom-form,
...@@ -1278,20 +1295,16 @@ ...@@ -1278,20 +1295,16 @@
} }
} }
div#chatrooms { #chatrooms {
overflow-y: auto; overflow-y: auto;
} }
form.sendXMPPMessage { form.sendXMPPMessage {
-moz-background-clip: padding; -moz-background-clip: padding;
-moz-border-radius: $chatbox-border-radius;
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
-webkit-border-radius: $chatbox-border-radius; @include border-bottom-radius($chatbox-border-radius);
background-clip: padding-box; background-clip: padding-box;
background: white; background: white;
border-radius: $chatbox-border-radius;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top: 1px solid #BBB; border-top: 1px solid #BBB;
border: 0; border: 0;
margin: 0; margin: 0;
...@@ -1303,15 +1316,13 @@ ...@@ -1303,15 +1316,13 @@
width: 100%; width: 100%;
} }
.chat-textarea { .chat-textarea {
@include border-bottom-radius(4px); @include border-bottom-radius($chatbox-border-radius);
border: 0; border: 0;
height: $chat-textarea-height; height: $chat-textarea-height;
padding: 0.5em; padding: 0.5em;
width: 100%; width: 100%;
resize: none; resize: none;
} }
}
.chat-toolbar { .chat-toolbar {
font-size: $font-size; font-size: $font-size;
margin: 0; margin: 0;
...@@ -1319,32 +1330,26 @@ ...@@ -1319,32 +1330,26 @@
height: $toolbar-height; height: $toolbar-height;
display: block; display: block;
background-color: $light-background-color; background-color: $light-background-color;
a { a {
color: $link-color; color: $link-color;
} }
.unencrypted a, .unencrypted a,
.unencrypted { .unencrypted {
color: #8f2831; color: #8f2831;
} }
.unverified a, .unverified a,
.unverified { .unverified {
color: #cf5300; color: #cf5300;
} }
.private a, .private a,
.private { .private {
color: #4b7003; color: #4b7003;
} }
.toggle-participants, .toggle-participants,
.toggle-clear, .toggle-clear,
.toggle-otr { .toggle-otr {
float: right; float: right;
} }
li { li {
display: inline-block; display: inline-block;
list-style: none; list-style: none;
...@@ -1355,7 +1360,6 @@ ...@@ -1355,7 +1360,6 @@
li:hover { li:hover {
cursor: pointer; cursor: pointer;
} }
ul { ul {
background: #fff; background: #fff;
bottom: 100%; bottom: 100%;
...@@ -1374,7 +1378,6 @@ ...@@ -1374,7 +1378,6 @@
} }
} }
} }
.toggle-smiley { .toggle-smiley {
color: $link-color; color: $link-color;
padding-left: 5px; padding-left: 5px;
...@@ -1389,7 +1392,6 @@ ...@@ -1389,7 +1392,6 @@
} }
} }
} }
.toggle-otr { .toggle-otr {
ul { ul {
li { li {
...@@ -1412,6 +1414,7 @@ ...@@ -1412,6 +1414,7 @@
} }
} }
} }
}
.chat-toolbar-text { .chat-toolbar-text {
font-size: 12px; font-size: 12px;
......
sass/_variables.scss
View file @ ff2910b9
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
$chat-head-inverse-text-color: white !default; $chat-head-inverse-text-color: white !default;
$chat-head-height: 44px !default; $chat-head-height: 44px !default;
$save-button-color: #436F64 !default; $save-button-color: #436F64 !default;
$chat-textarea-height: 62px !default; $chat-textarea-height: 70px !default;
$toolbar-height: 25px !default; $toolbar-height: 25px !default;
$toolbar-color: beige !default; $toolbar-color: beige !default;
$message-them-color: #346121 !default; $message-them-color: #346121 !default;
......
spec/chatroom.js
View file @ ff2910b9
...@@ -404,7 +404,7 @@ ...@@ -404,7 +404,7 @@
view.onChatRoomPresence(presence, {nick: 'dummy', name: 'lounge@localhost'}); view.onChatRoomPresence(presence, {nick: 'dummy', name: 'lounge@localhost'});
expect(view.$('.chat-area').is(':visible')).toBeFalsy(); expect(view.$('.chat-area').is(':visible')).toBeFalsy();
expect(view.$('.participants').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('<p>You have been kicked from this room</p><p>The reason given is: "Avaunt, you cullion!"</p>')).not.toBe(-1); expect($chat_body.html().trim().indexOf('<p>You have been kicked from this room</p><p>The reason given is: "Avaunt, you cullion!"</p>')).not.toBe(-1);
}.bind(converse)); }.bind(converse));
...@@ -576,7 +576,7 @@ ...@@ -576,7 +576,7 @@
}); });
waits(250); waits(250);
runs(function () { runs(function () {
var $chat_body = view.$el.find('.chat-body'); var $chat_body = view.$el.find('.chatroom-body');
expect(view.renderPasswordForm).toHaveBeenCalled(); expect(view.renderPasswordForm).toHaveBeenCalled();
expect($chat_body.find('form.chatroom-form').length).toBe(1); expect($chat_body.find('form.chatroom-form').length).toBe(1);
expect($chat_body.find('legend').text()).toBe('This chatroom requires a password'); expect($chat_body.find('legend').text()).toBe('This chatroom requires a password');
...@@ -595,7 +595,7 @@ ...@@ -595,7 +595,7 @@
var view = this.chatboxviews.get('problematic@muc.localhost'); var view = this.chatboxviews.get('problematic@muc.localhost');
spyOn(view, 'showErrorMessage').andCallThrough(); spyOn(view, 'showErrorMessage').andCallThrough();
view.onChatRoomPresence(presence, {'nick': 'dummy'}); 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)); }.bind(converse));
it("will show an error message if the user has been banned", function () { it("will show an error message if the user has been banned", function () {
...@@ -610,7 +610,7 @@ ...@@ -610,7 +610,7 @@
var view = this.chatboxviews.get('problematic@muc.localhost'); var view = this.chatboxviews.get('problematic@muc.localhost');
spyOn(view, 'showErrorMessage').andCallThrough(); spyOn(view, 'showErrorMessage').andCallThrough();
view.onChatRoomPresence(presence, {'nick': 'dummy'}); 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)); }.bind(converse));
it("will show an error message if no nickname was specified for the user", function () { it("will show an error message if no nickname was specified for the user", function () {
...@@ -625,7 +625,7 @@ ...@@ -625,7 +625,7 @@
var view = this.chatboxviews.get('problematic@muc.localhost'); var view = this.chatboxviews.get('problematic@muc.localhost');
spyOn(view, 'showErrorMessage').andCallThrough(); spyOn(view, 'showErrorMessage').andCallThrough();
view.onChatRoomPresence(presence, {'nick': 'dummy'}); 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)); }.bind(converse));
it("will show an error message if the user is not allowed to have created the room", function () { it("will show an error message if the user is not allowed to have created the room", function () {
...@@ -640,7 +640,7 @@ ...@@ -640,7 +640,7 @@
var view = this.chatboxviews.get('problematic@muc.localhost'); var view = this.chatboxviews.get('problematic@muc.localhost');
spyOn(view, 'showErrorMessage').andCallThrough(); spyOn(view, 'showErrorMessage').andCallThrough();
view.onChatRoomPresence(presence, {'nick': 'dummy'}); 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)); }.bind(converse));
it("will show an error message if the user's nickname doesn't conform to room policy", function () { it("will show an error message if the user's nickname doesn't conform to room policy", function () {
...@@ -655,7 +655,7 @@ ...@@ -655,7 +655,7 @@
var view = this.chatboxviews.get('problematic@muc.localhost'); var view = this.chatboxviews.get('problematic@muc.localhost');
spyOn(view, 'showErrorMessage').andCallThrough(); spyOn(view, 'showErrorMessage').andCallThrough();
view.onChatRoomPresence(presence, {'nick': 'dummy'}); 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)); }.bind(converse));
it("will show an error message if the user's nickname is already taken", function () { it("will show an error message if the user's nickname is already taken", function () {
...@@ -670,7 +670,7 @@ ...@@ -670,7 +670,7 @@
var view = this.chatboxviews.get('problematic@muc.localhost'); var view = this.chatboxviews.get('problematic@muc.localhost');
spyOn(view, 'showErrorMessage').andCallThrough(); spyOn(view, 'showErrorMessage').andCallThrough();
view.onChatRoomPresence(presence, {'nick': 'dummy'}); 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)); }.bind(converse));
it("will show an error message if the room doesn't yet exist", function () { it("will show an error message if the room doesn't yet exist", function () {
...@@ -685,7 +685,7 @@ ...@@ -685,7 +685,7 @@
var view = this.chatboxviews.get('problematic@muc.localhost'); var view = this.chatboxviews.get('problematic@muc.localhost');
spyOn(view, 'showErrorMessage').andCallThrough(); spyOn(view, 'showErrorMessage').andCallThrough();
view.onChatRoomPresence(presence, {'nick': 'dummy'}); 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)); }.bind(converse));
it("will show an error message if the room has reached it's maximum number of occupants", function () { it("will show an error message if the room has reached it's maximum number of occupants", function () {
...@@ -700,7 +700,7 @@ ...@@ -700,7 +700,7 @@
var view = this.chatboxviews.get('problematic@muc.localhost'); var view = this.chatboxviews.get('problematic@muc.localhost');
spyOn(view, 'showErrorMessage').andCallThrough(); spyOn(view, 'showErrorMessage').andCallThrough();
view.onChatRoomPresence(presence, {'nick': 'dummy'}); 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)); }.bind(converse));
}.bind(converse, mock, test_utils)); }.bind(converse, mock, test_utils));
......
src/templates/chatroom.html
View file @ ff2910b9
...@@ -9,5 +9,5 @@ ...@@ -9,5 +9,5 @@
<div class="chat-title"> {{ _.escape(name) }} </div> <div class="chat-title"> {{ _.escape(name) }} </div>
<p class="chatroom-topic"><p/> <p class="chatroom-topic"><p/>
</div> </div>
<div class="chat-body"><span class="spinner centered"/></div> <div class="chatroom-body"><span class="spinner centered"/></div>
</div> </div>
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