Update the mockup with show/hide button for chat room participants.
This commit is contained in:
parent
4d479ae51d
commit
68714e9db5
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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');
|
||||
|
Loading…
Reference in New Issue
Block a user