Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Update the mockup with show/hide button for chat room participants.

Browse Source
This commit is contained in:
JC Brand 2014-09-03 19:49:15 +02:00
parent 4d479ae51d
commit 68714e9db5
3 changed files with 30 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
css/converse.css
View File

@ -562,13 +562,14 @@ span.spinner.hor_centered {
}
#conversejs .chatroom .chat-area {
float: left;
width: 200px;
height: 100%;
width: 200px;
}
#conversejs .chatroom .participants {
float: left;
float: right;
background-color: white;
overflow: auto;
overflow-y: auto;
overflow-x: hidden;
border-left: 1px solid #AAA;
border-bottom-right-radius: 4px;
width: 100px;
@ -1202,11 +1203,7 @@ select#select-xmpp-status {
border-top-left-radius: 0;
border-top-right-radius: 0;
width: 200px;
height: 84px;
}
#conversejs .chatroom form.sendXMPPMessage {
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
height: 83px;
}
#conversejs .chat-textarea {
box-sizing: border-box;
@ -1228,8 +1225,8 @@ select#select-xmpp-status {
padding: 0 5px 0 0;
height: 20px;
display: block;
width: 195px;
}
#conversejs .chat-toolbar .toggle-participants,
#conversejs .chat-toolbar .toggle-clear,
#conversejs .chat-toolbar .toggle-otr {
float: right;

16
less/converse.less
View File

@ -603,14 +603,15 @@ span.spinner.hor_centered {
#conversejs .chatroom .chat-area {
float: left;
width: 200px;
height: 100%;
width: 200px;
}
#conversejs .chatroom .participants {
float: left;
float: right;
background-color: white;
overflow: auto;
overflow-y: auto;
overflow-x: hidden;
border-left: 1px solid #AAA;
border-bottom-right-radius: 4px;
width: 100px;
@ -1359,12 +1360,7 @@ select#select-xmpp-status {
border-top-left-radius: 0;
border-top-right-radius: 0;
width: 200px;
height: 84px;
}
#conversejs .chatroom form.sendXMPPMessage {
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
height: 83px;
}
#conversejs .chat-textarea {
@ -1389,9 +1385,9 @@ select#select-xmpp-status {
padding: 0 5px 0 0;
height: 20px;
display: block;
width: 195px;
}
#conversejs .chat-toolbar .toggle-participants,
#conversejs .chat-toolbar .toggle-clear,
#conversejs .chat-toolbar .toggle-otr {
float: right;

18
mockup/index.html
View File

@ -396,6 +396,8 @@
<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>
@ -572,6 +574,22 @@ $(document).ready(function () {
});
});
$('.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');