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.
This commit is contained in:
parent
4f86a7ed58
commit
ff2910b9ce
30
converse.js
30
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(
|
||||
$('<div class="chatroom-form-container">'+
|
||||
'<form class="chatroom-form">'+
|
||||
'<span class="spinner centered"/>'+
|
||||
|
@ -3275,9 +3275,9 @@
|
|||
},
|
||||
|
||||
renderPasswordForm: function () {
|
||||
this.$('.chat-body').children().hide();
|
||||
this.$('.chatroom-body').children().hide();
|
||||
this.$('span.centered.spinner').remove();
|
||||
this.$('.chat-body').append(
|
||||
this.$('.chatroom-body').append(
|
||||
converse.templates.chatroom_password_form({
|
||||
heading: __('This chatroom requires a password'),
|
||||
label_password: __('Password: '),
|
||||
|
@ -3290,7 +3290,7 @@
|
|||
this.$('.chat-area').hide();
|
||||
this.$('.participants').hide();
|
||||
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
|
||||
|
@ -3462,8 +3462,6 @@
|
|||
($presence.attr('from') == this.model.get('id')+'/'+Strophe.escapeNode(nick));
|
||||
if (this.model.get('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);
|
||||
}
|
||||
|
@ -6073,8 +6071,8 @@
|
|||
|
||||
this.setUpXMLLogging = function () {
|
||||
if (this.debug) {
|
||||
this.connection.xmlInput = function (body) { console.log(body.outerHTML); };
|
||||
this.connection.xmlOutput = function (body) { console.log(body.outerHTML); };
|
||||
this.connection.xmlInput = function (body) { console.log(body); };
|
||||
this.connection.xmlOutput = function (body) { console.log(body); };
|
||||
}
|
||||
};
|
||||
|
||||
|
|
235
css/converse.css
235
css/converse.css
|
@ -478,7 +478,7 @@
|
|||
border-left: 1px solid #176679; }
|
||||
#conversejs .chat-content {
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
padding: 0.5em;
|
||||
font-size: 13px;
|
||||
color: #6C4C44;
|
||||
overflow-y: auto;
|
||||
|
@ -486,7 +486,7 @@
|
|||
background-color: #ffffff;
|
||||
line-height: 1.3em;
|
||||
height: 206px;
|
||||
height: calc(100% - 89px); }
|
||||
height: calc(100% - 96px); }
|
||||
#conversejs .chat-info {
|
||||
color: #6C4C44; }
|
||||
#conversejs .chat-error {
|
||||
|
@ -875,55 +875,75 @@
|
|||
padding: 4px 7px 0 5px; }
|
||||
#conversejs .chatroom {
|
||||
width: 300px; }
|
||||
#conversejs .chatroom .box-flyout {
|
||||
width: 300px; }
|
||||
@media screen and (max-width: 480px) {
|
||||
#conversejs .chatroom {
|
||||
width: 100%; }
|
||||
#conversejs .chatroom .box-flyout {
|
||||
min-width: 100%;
|
||||
width: 100%; } }
|
||||
#conversejs .chatroom .box-flyout {
|
||||
min-width: 300px;
|
||||
width: 300px; }
|
||||
#conversejs .chatroom .box-flyout .chatroom-body {
|
||||
height: 289px;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
height: -webkit-calc(100% - 44px);
|
||||
height: calc(100% - 44px);
|
||||
background-color: white;
|
||||
border-top: 0;
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%; }
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .chat-area {
|
||||
word-wrap: break-word;
|
||||
display: table-cell;
|
||||
height: 100%;
|
||||
min-width: 200px; }
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
|
||||
padding: 0.5em 0.5em 0 0.5em; }
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .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: 4px;
|
||||
width: 100px;
|
||||
height: 100%; }
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .participants.hidden {
|
||||
display: none; }
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list {
|
||||
list-style: none; }
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list li {
|
||||
cursor: default;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
padding: 2px 5px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 100px; }
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list li.moderator {
|
||||
color: #8f2831; }
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .participants label {
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
margin: 5px;
|
||||
display: block; }
|
||||
#conversejs .chatroom label {
|
||||
margin-left: 2px;
|
||||
font-size: 12px; }
|
||||
#conversejs .chatroom .participant-list {
|
||||
list-style: none; }
|
||||
#conversejs .chatroom .participant-list li {
|
||||
cursor: default;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
padding: 2px 5px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
#conversejs .chatroom .participant-list li.moderator {
|
||||
color: #8f2831; }
|
||||
#conversejs .chatroom .chat-textarea {
|
||||
border-bottom-right-radius: 0; }
|
||||
#conversejs .chatroom .chat-area {
|
||||
float: left;
|
||||
height: 100%;
|
||||
min-width: 200px; }
|
||||
#conversejs .chatroom .invited-contact {
|
||||
margin: -1px 0 0 -1px;
|
||||
width: 100px;
|
||||
border: 1px solid #999; }
|
||||
#conversejs .chatroom .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; }
|
||||
#conversejs .chatroom .participants {
|
||||
float: right;
|
||||
background-color: white;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
border-left: 1px solid #AAA;
|
||||
border-bottom-right-radius: 4px;
|
||||
width: 100px;
|
||||
height: 100%; }
|
||||
#conversejs .chatroom .participants label {
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
margin: 5px;
|
||||
display: block; }
|
||||
#conversejs .chatroom-form,
|
||||
#conversejs .controlbox-pane {
|
||||
background-color: white;
|
||||
|
@ -1093,24 +1113,21 @@
|
|||
text-decoration: none; }
|
||||
#conversejs .chat-head #controlbox-tabs li a:hover {
|
||||
color: #6C4C44; }
|
||||
#conversejs div#chatrooms {
|
||||
#conversejs #chatrooms {
|
||||
overflow-y: auto; }
|
||||
#conversejs form.sendXMPPMessage {
|
||||
-moz-background-clip: padding;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-background-clip: padding-box;
|
||||
-webkit-border-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
background-clip: padding-box;
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top: 1px solid #BBB;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
height: 87px;
|
||||
height: 95px;
|
||||
min-width: 200px; }
|
||||
@media screen and (max-width: 480px) {
|
||||
#conversejs form.sendXMPPMessage {
|
||||
|
@ -1119,78 +1136,78 @@
|
|||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border: 0;
|
||||
height: 62px;
|
||||
height: 70px;
|
||||
padding: 0.5em;
|
||||
width: 100%;
|
||||
resize: none; }
|
||||
#conversejs .chat-toolbar {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
height: 25px;
|
||||
display: block;
|
||||
background-color: beige; }
|
||||
#conversejs .chat-toolbar a {
|
||||
color: #436F64; }
|
||||
#conversejs .chat-toolbar .unencrypted a,
|
||||
#conversejs .chat-toolbar .unencrypted {
|
||||
color: #8f2831; }
|
||||
#conversejs .chat-toolbar .unverified a,
|
||||
#conversejs .chat-toolbar .unverified {
|
||||
color: #cf5300; }
|
||||
#conversejs .chat-toolbar .private a,
|
||||
#conversejs .chat-toolbar .private {
|
||||
color: #4b7003; }
|
||||
#conversejs .chat-toolbar .toggle-participants,
|
||||
#conversejs .chat-toolbar .toggle-clear,
|
||||
#conversejs .chat-toolbar .toggle-otr {
|
||||
float: right; }
|
||||
#conversejs .chat-toolbar li {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
padding: 0 3px 0 3px;
|
||||
cursor: pointer;
|
||||
margin-top: 1px; }
|
||||
#conversejs .chat-toolbar li:hover {
|
||||
cursor: pointer; }
|
||||
#conversejs .chat-toolbar 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; }
|
||||
#conversejs .chat-toolbar ul li {
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
position: relative; }
|
||||
#conversejs .chat-toolbar ul li a:hover {
|
||||
color: #8f2831; }
|
||||
#conversejs .chat-toolbar .toggle-smiley {
|
||||
color: #436F64;
|
||||
padding-left: 5px; }
|
||||
#conversejs .chat-toolbar .toggle-smiley ul li {
|
||||
font-size: 14px;
|
||||
padding: 5px;
|
||||
z-index: 98; }
|
||||
#conversejs .chat-toolbar .toggle-smiley ul li:hover {
|
||||
background-color: #E1E6E5; }
|
||||
#conversejs .chat-toolbar .toggle-otr ul li {
|
||||
padding: 7px;
|
||||
background-color: white;
|
||||
#conversejs form.sendXMPPMessage .chat-toolbar {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
height: 25px;
|
||||
display: block;
|
||||
z-index: 99; }
|
||||
#conversejs .chat-toolbar .toggle-otr ul li 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;
|
||||
background-color: beige; }
|
||||
#conversejs form.sendXMPPMessage .chat-toolbar a {
|
||||
color: #436F64; }
|
||||
#conversejs form.sendXMPPMessage .chat-toolbar .unencrypted a,
|
||||
#conversejs form.sendXMPPMessage .chat-toolbar .unencrypted {
|
||||
color: #8f2831; }
|
||||
#conversejs form.sendXMPPMessage .chat-toolbar .unverified a,
|
||||
#conversejs form.sendXMPPMessage .chat-toolbar .unverified {
|
||||
color: #cf5300; }
|
||||
#conversejs form.sendXMPPMessage .chat-toolbar .private a,
|
||||
#conversejs form.sendXMPPMessage .chat-toolbar .private {
|
||||
color: #4b7003; }
|
||||
#conversejs form.sendXMPPMessage .chat-toolbar .toggle-participants,
|
||||
#conversejs form.sendXMPPMessage .chat-toolbar .toggle-clear,
|
||||
#conversejs form.sendXMPPMessage .chat-toolbar .toggle-otr {
|
||||
float: right; }
|
||||
#conversejs form.sendXMPPMessage .chat-toolbar li {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
padding: 0 3px 0 3px;
|
||||
cursor: pointer;
|
||||
margin-top: 1px; }
|
||||
#conversejs form.sendXMPPMessage .chat-toolbar li:hover {
|
||||
cursor: pointer; }
|
||||
#conversejs form.sendXMPPMessage .chat-toolbar 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; }
|
||||
#conversejs form.sendXMPPMessage .chat-toolbar ul li {
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
position: relative; }
|
||||
#conversejs form.sendXMPPMessage .chat-toolbar ul li a:hover {
|
||||
color: #8f2831; }
|
||||
#conversejs form.sendXMPPMessage .chat-toolbar .toggle-smiley {
|
||||
color: #436F64;
|
||||
padding-left: 5px; }
|
||||
#conversejs form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li {
|
||||
font-size: 14px;
|
||||
padding: 5px;
|
||||
z-index: 98; }
|
||||
#conversejs form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover {
|
||||
background-color: #E1E6E5; }
|
||||
#conversejs form.sendXMPPMessage .chat-toolbar .toggle-otr ul li {
|
||||
padding: 7px;
|
||||
background-color: white;
|
||||
display: block;
|
||||
padding: 1px;
|
||||
text-decoration: none; }
|
||||
#conversejs .chat-toolbar .toggle-otr ul li:hover {
|
||||
background-color: #E1E6E5; }
|
||||
z-index: 99; }
|
||||
#conversejs form.sendXMPPMessage .chat-toolbar .toggle-otr ul li 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; }
|
||||
#conversejs form.sendXMPPMessage .chat-toolbar .toggle-otr ul li:hover {
|
||||
background-color: #E1E6E5; }
|
||||
#conversejs .chat-toolbar-text {
|
||||
font-size: 12px;
|
||||
padding-right: 3px;
|
||||
|
|
|
@ -31,7 +31,7 @@
|
|||
<p class="chatroom-topic"></p>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="chat-body">
|
||||
<div class="chatroom-body">
|
||||
<div class="chatroom-form-container">
|
||||
<form class="chatroom-form">
|
||||
<legend>Configuration for discuss@conference.conversejs.com</legend>
|
||||
|
|
309
mockup/chatroom2.html
Normal file
309
mockup/chatroom2.html
Normal file
|
@ -0,0 +1,309 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title id="pageTitle">Converse.js: Mockup</title>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="description" content="Converse.js: Mockup" />
|
||||
<link type="text/css" href="../css/theme.css" rel="stylesheet" media="screen" />
|
||||
<link type="text/css" href="../css/converse.css" rel="stylesheet" media="screen" />
|
||||
<script src="../components/jquery/dist/jquery.min.js"></script>
|
||||
</head>
|
||||
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
|
||||
|
||||
<!-- HEADER -->
|
||||
<div id="header_wrap" class="outer">
|
||||
<header class="inner">
|
||||
<h1 id="project_title"><a href="http://conversejs.org">Converse.js</a></h1>
|
||||
<h2 id="project_tagline">Static Mockup</h2>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<div id="conversejs">
|
||||
<a id="toggle-controlbox" href="#" class="toggle-controlbox">
|
||||
<span class="conn-feedback">Toggle Chat</span>
|
||||
<span style="display: none" id="online-count">(0)</span>
|
||||
</a>
|
||||
|
||||
<div class="chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
|
||||
<div class="flyout box-flyout">
|
||||
<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">
|
||||
<a class="close-chatbox-button icon-close"></a>
|
||||
<a class="toggle-chatbox-button icon-minus"></a>
|
||||
<a class="configure-chatroom-button icon-wrench" style=""></a>
|
||||
<div class="chat-title"> Chatroom </div>
|
||||
<p class="chatroom-topic">May the force be with you</p>
|
||||
</div>
|
||||
<div class="chatroom-body">
|
||||
<div class="chat-area">
|
||||
<div class="chat-content">
|
||||
<div class="chat-message ">
|
||||
<span class="chat-message-room">18:50 luke: </span>
|
||||
<span class="chat-message-content">leia: hi :)</span>
|
||||
</div>
|
||||
<div class="chat-message ">
|
||||
<span class="chat-message-room">19:40 leia: </span>
|
||||
<span class="chat-message-content">
|
||||
I'll be gone for a while, will be back in about an hour</span>
|
||||
</div>
|
||||
<time class="chat-date" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
|
||||
<div class="chat-message ">
|
||||
<span class="chat-message-room">19:40 Obi-wan Kenobi, Jedi Master: </span>
|
||||
<span class="chat-message-content">
|
||||
I'll be gone for a while, will be back in about an hour</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-message-me">19:42 me: </span>
|
||||
<span class="chat-message-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||
</div>
|
||||
<div class="chat-message ">
|
||||
<span class="chat-message-room">19:43 Obi-wan Kenobi, Jedi Master: </span>
|
||||
<span class="chat-message-content">Another message to check that scrolling works.</span>
|
||||
</div>
|
||||
</div>
|
||||
<form class="sendXMPPMessage" action="" method="post">
|
||||
<ul class="chat-toolbar no-text-select">
|
||||
<li class="toggle-smiley icon-happy" title="Insert a smiley">
|
||||
<ul>
|
||||
<li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li>
|
||||
<li><a class="icon-wink" href="#" data-emoticon=";)"></a></li>
|
||||
<li><a class="icon-grin" href="#" data-emoticon=":D"></a></li>
|
||||
<li><a class="icon-tongue" href="#" data-emoticon=":P"></a></li>
|
||||
<li><a class="icon-cool" href="#" data-emoticon="8)"></a></li>
|
||||
<li><a class="icon-evil" href="#" data-emoticon=">:)"></a></li>
|
||||
<li><a class="icon-confused" href="#" data-emoticon=":S"></a></li>
|
||||
<li><a class="icon-wondering" href="#" data-emoticon=":\"></a></li>
|
||||
<li><a class="icon-angry" href="#" data-emoticon=">:("></a></li>
|
||||
<li><a class="icon-sad" href="#" data-emoticon=":("></a></li>
|
||||
<li><a class="icon-shocked" href="#" data-emoticon=":O"></a></li>
|
||||
<li><a class="icon-thumbs-up" href="#" data-emoticon="(^.^)b"></a></li>
|
||||
<li><a class="icon-heart" href="#" data-emoticon="<3"></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toggle-participants"><a class="icon-hide-users" title="Hide the list of participants"></a></li>
|
||||
<li class="toggle-clear"><a class="icon-remove" title="Clear all messages"></a></li>
|
||||
</ul>
|
||||
<textarea type="text" class="chat-textarea" placeholder="Message"></textarea>
|
||||
</form>
|
||||
</div>
|
||||
<div class="participants">
|
||||
<form class="room-invite">
|
||||
<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>
|
||||
<label>Occupants:</label>
|
||||
<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">jabber the hut</li>
|
||||
<li class="participant" title="This user can send messages in this room">leia</li>
|
||||
<li class="moderator" title="This user is a moderator">luke</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chatroom" id="6d8627960a0cb066d9216742f3edccc3dbbf85a9">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="dragresize"></div>
|
||||
<div class="chat-head chat-head-chatroom">
|
||||
<a class="close-chatbox-button icon-close"></a>
|
||||
<a class="toggle-chatbox-button icon-minus"></a>
|
||||
<a class="configure-chatroom-button" style="display:none"> </a>
|
||||
<div class="chat-title"> Restricted Chatroom</div>
|
||||
<p class="chatroom-topic"></p>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="chat-body">
|
||||
<div class="chatroom-form-container">
|
||||
<form class="chatroom-form">
|
||||
<!-- TODO: Make this a long form that scrolls -->
|
||||
<legend>This chatroom requires a password</legend>
|
||||
<label>Password:</label>
|
||||
<input type="password" name="password">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="minimized-chats">
|
||||
<a id="toggle-minimized-chats" href="#">
|
||||
Minimized <span id="minimized-count">(0)</span>
|
||||
<span class="unread-message-count" href="#" style="display:block">322</span>
|
||||
</a>
|
||||
<div class="flyout minimized-chats-flyout">
|
||||
<div class="chat-head chat-head-chatroom">
|
||||
<a class="close-chatbox-button icon-close"></a>
|
||||
<a class="chat-head-message-count" href="#" style="display:block">3</a>
|
||||
<div class="chat-title">
|
||||
<a href="#" class="restore-chat" title="Click to maximize this chat">
|
||||
Restricted Chatroom
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-head chat-head-chatbox">
|
||||
<a class="close-chatbox-button icon-close"></a>
|
||||
<a class="chat-head-message-count" href="#" style="display:block">42</a>
|
||||
<div class="chat-title">
|
||||
<a href="#" class="restore-chat" title="Click to maximize this chat">
|
||||
JC Brand
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-head chat-head-chatroom">
|
||||
<a class="close-chatbox-button icon-close"></a>
|
||||
<div class="chat-title">
|
||||
<a href="#" class="restore-chat" title="Click to maximize this chat">
|
||||
My Chatroom
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
|
||||
<div class="chat-title">
|
||||
<a href="#" class="restore-chat" title="Click to maximize this chat">
|
||||
Annegreet Gomez
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-head chat-head-chatbox">
|
||||
<a class="close-chatbox-button icon-close"></a>
|
||||
<a class="chat-head-message-count" href="#" style="display:block">842</a>
|
||||
<div class="chat-title">
|
||||
<a href="#" class="restore-chat" title="Click to maximize this chat">
|
||||
Asmaa Haakman
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
|
||||
<div class="chat-title">
|
||||
<a href="#" class="restore-chat" title="Click to maximize this chat">
|
||||
Candice van der Knijff
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
|
||||
<div class="chat-title">
|
||||
<a href="#" class="restore-chat" title="Click to maximize this chat">
|
||||
Laura Grunewald
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
|
||||
<div class="chat-title">
|
||||
<a href="#" class="restore-chat">
|
||||
Lena Grunewald
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('a[href=#chatrooms]').click(function (ev) {
|
||||
switchTab(ev);
|
||||
});
|
||||
$('a[href=#users]').click(function (ev) {
|
||||
switchTab(ev);
|
||||
});
|
||||
$('a[href=#register]').click(function (ev) {
|
||||
switchTab(ev);
|
||||
});
|
||||
|
||||
$("a.choose-xmpp-status").click(function (ev) {
|
||||
ev.preventDefault();
|
||||
$(ev.target).parent().parent().siblings('dd').find('ul').toggle('fast');
|
||||
});
|
||||
|
||||
$("a.change-xmpp-status-message").click(function (ev) {
|
||||
ev.preventDefault();
|
||||
var form = ''+
|
||||
'<form id="set-custom-xmpp-status">' +
|
||||
'<input type="text" class="custom-xmpp-status" placeholder="Custom status"/>' +
|
||||
'<button type="submit">Save</button>' +
|
||||
'</form>';
|
||||
|
||||
$(ev.target).closest('.xmpp-status').replaceWith(form);
|
||||
$(ev.target).closest('.custom-xmpp-status').focus().focus();
|
||||
});
|
||||
|
||||
$('.toggle-xmpp-contact-form').click(function (ev) {
|
||||
ev.preventDefault();
|
||||
$(ev.target).parent().parent().find('.search-xmpp').toggle('fast', function () {
|
||||
if ($(this).is(':visible')) {
|
||||
$(this).find('input.username').focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
var switchTab = function (ev) {
|
||||
ev.preventDefault();
|
||||
var $tab = $(ev.target),
|
||||
$sibling = $tab.parent().siblings('li').children('a'),
|
||||
$tab_panel = $($tab.attr('href')),
|
||||
$sibling_panel = $($sibling.attr('href'));
|
||||
|
||||
$sibling_panel.hide();
|
||||
$sibling.removeClass('current');
|
||||
$tab.addClass('current');
|
||||
$tab_panel.show();
|
||||
}
|
||||
|
||||
$(function() {
|
||||
$('.close-chatbox-button').click(function(ev) {
|
||||
var $grandparent = $(ev.target).parent().parent().parent();
|
||||
$grandparent.hide(300, function () {
|
||||
// Webkit fix
|
||||
document.getElementById('conversejs').style.display = 'none';
|
||||
document.getElementById('conversejs').offsetHeight; // no need to store this anywhere, the reference is enough
|
||||
document.getElementById('conversejs').style.display = 'block';
|
||||
});
|
||||
});
|
||||
|
||||
$('.toggle-participants a').click(function (ev) {
|
||||
var $el = $(ev.target);
|
||||
if ($el.hasClass("icon-hide-users")) {
|
||||
$el.removeClass('icon-hide-users').addClass('icon-show-users');
|
||||
$('div.participants').animate({width: 0}).hide();
|
||||
$el.closest('.chat-area').animate({width: '100%'});
|
||||
$el.closest('form.sendXMPPMessage').animate({width: '100%'});
|
||||
} else {
|
||||
$el.removeClass('icon-show-users').addClass('icon-hide-users');
|
||||
$el.closest('.chat-area').animate({width: '200px'}, function () {
|
||||
$('div.participants').css({width: '100px'}).show();
|
||||
});
|
||||
$el.closest('form.sendXMPPMessage').animate({width: '200px'});
|
||||
}
|
||||
});
|
||||
|
||||
$('.toggle-chatbox-button').click(function(ev) {
|
||||
var $grandparent = $(ev.target).parent().parent().parent();
|
||||
$grandparent.fadeOut('fast');
|
||||
});
|
||||
|
||||
// Clickable Dropdown
|
||||
$('.toggle-otr').click(function(e) {
|
||||
$('.toggle-otr ul').slideToggle(200);
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
$('.toggle-smiley').click(function(e) {
|
||||
$(e.target).find('ul').slideToggle(200);
|
||||
e.stopPropagation();
|
||||
});
|
||||
$(document).click(function() {
|
||||
if ($('.toggle-otr ul').is(':visible')) {
|
||||
$('.toggle-otr ul', this).slideUp(200);
|
||||
}
|
||||
if ($('.toggle-smiley ul').is(':visible')) {
|
||||
$('.toggle-smiley ul', this).slideUp(200);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</html>
|
|
@ -361,16 +361,17 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span>
|
|||
|
||||
<div class="chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
|
||||
<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">
|
||||
<a class="close-chatbox-button icon-close"></a>
|
||||
<a class="toggle-chatbox-button icon-minus"></a>
|
||||
<a class="configure-chatroom-button icon-wrench" style=""></a>
|
||||
|
||||
<div class="chat-title"> Chatroom </div>
|
||||
<p class="chatroom-topic">May the force be with you</p>
|
||||
</div>
|
||||
<div class="chat-body">
|
||||
<div class="chatroom-body">
|
||||
<div class="chat-area">
|
||||
<div class="chat-content">
|
||||
<div class="chat-message ">
|
||||
|
@ -397,10 +398,9 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span>
|
|||
<span class="chat-message-content">Another message to check that scrolling works.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="sendXMPPMessage" action="" method="post">
|
||||
<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>
|
||||
<li><a class="icon-smiley" 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>
|
|||
</div>
|
||||
<div class="participants">
|
||||
<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>
|
||||
<label>Participants:</label>
|
||||
<label>Occupants:</label>
|
||||
<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">jabber the hut</li>
|
||||
|
|
511
sass/_core.scss
511
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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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('<p>You have been kicked from this room</p><p>The reason given is: "Avaunt, you cullion!"</p>')).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));
|
||||
|
|
|
@ -9,5 +9,5 @@
|
|||
<div class="chat-title"> {{ _.escape(name) }} </div>
|
||||
<p class="chatroom-topic"><p/>
|
||||
</div>
|
||||
<div class="chat-body"><span class="spinner centered"/></div>
|
||||
<div class="chatroom-body"><span class="spinner centered"/></div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue
Block a user