Change the visual when it is switched between chat and contact list.
This commit is contained in:
fo
parent
d64642025d
commit
4d5bb61f0a
|
|
@ -2,7 +2,11 @@ var BottomToolbar = (function (my) {
|
|||
my.toggleChat = function() {
|
||||
if (ContactList.isVisible()) {
|
||||
buttonClick("#contactListButton", "active");
|
||||
ContactList.toggleContactList();
|
||||
$('#contactlist').css('z-index', 4);
|
||||
setTimeout(function() {
|
||||
$('#contactlist').css('display', 'none');
|
||||
$('#contactlist').css('z-index', 5);
|
||||
}, 500);
|
||||
}
|
||||
|
||||
buttonClick("#chatBottomButton", "active");
|
||||
|
|
@ -13,7 +17,9 @@ var BottomToolbar = (function (my) {
|
|||
my.toggleContactList = function() {
|
||||
if (Chat.isVisible()) {
|
||||
buttonClick("#chatBottomButton", "active");
|
||||
Chat.toggleChat();
|
||||
setTimeout(function() {
|
||||
$('#chatspace').css('display', 'none');
|
||||
}, 500);
|
||||
}
|
||||
|
||||
buttonClick("#contactListButton", "active");
|
||||
|
|
|
|||
121
chat.js
121
chat.js
|
|
@ -143,7 +143,7 @@ var Chat = (function (my) {
|
|||
var chatspace = $('#chatspace');
|
||||
var videospace = $('#videospace');
|
||||
|
||||
var chatSize = (chatspace.is(":visible")) ? [0, 0] : Chat.getChatSize();
|
||||
var chatSize = (Chat.isVisible()) ? [0, 0] : Chat.getChatSize();
|
||||
var videospaceWidth = window.innerWidth - chatSize[0];
|
||||
var videospaceHeight = window.innerHeight;
|
||||
var videoSize
|
||||
|
|
@ -160,97 +160,64 @@ var Chat = (function (my) {
|
|||
var thumbnailSize = VideoLayout.calculateThumbnailSize(videospaceWidth);
|
||||
var thumbnailsWidth = thumbnailSize[0];
|
||||
var thumbnailsHeight = thumbnailSize[1];
|
||||
var completeFunction = Chat.isVisible() ?
|
||||
function() {} : function () {
|
||||
scrollChatToBottom();
|
||||
chatspace.trigger('shown');
|
||||
};
|
||||
|
||||
if (chatspace.is(":visible")) {
|
||||
videospace.animate({right: chatSize[0],
|
||||
width: videospaceWidth,
|
||||
height: videospaceHeight},
|
||||
{queue: false,
|
||||
duration: 500});
|
||||
videospace.animate({right: chatSize[0],
|
||||
width: videospaceWidth,
|
||||
height: videospaceHeight},
|
||||
{queue: false,
|
||||
duration: 500,
|
||||
complete: completeFunction});
|
||||
|
||||
$('#remoteVideos').animate({height: thumbnailsHeight},
|
||||
$('#remoteVideos').animate({height: thumbnailsHeight},
|
||||
{queue: false,
|
||||
duration: 500});
|
||||
|
||||
$('#remoteVideos>span').animate({height: thumbnailsHeight,
|
||||
width: thumbnailsWidth},
|
||||
{queue: false,
|
||||
duration: 500});
|
||||
duration: 500,
|
||||
complete: function() {
|
||||
$(document).trigger(
|
||||
"remotevideo.resized",
|
||||
[thumbnailsWidth,
|
||||
thumbnailsHeight]);
|
||||
}});
|
||||
|
||||
$('#remoteVideos>span').animate({height: thumbnailsHeight,
|
||||
width: thumbnailsWidth},
|
||||
$('#largeVideoContainer').animate({ width: videospaceWidth,
|
||||
height: videospaceHeight},
|
||||
{queue: false,
|
||||
duration: 500,
|
||||
complete: function() {
|
||||
$(document).trigger(
|
||||
"remotevideo.resized",
|
||||
[thumbnailsWidth,
|
||||
thumbnailsHeight]);
|
||||
}});
|
||||
duration: 500
|
||||
});
|
||||
|
||||
$('#largeVideoContainer').animate({ width: videospaceWidth,
|
||||
height: videospaceHeight},
|
||||
{queue: false,
|
||||
duration: 500
|
||||
});
|
||||
$('#largeVideo').animate({ width: videoWidth,
|
||||
height: videoHeight,
|
||||
top: verticalIndent,
|
||||
bottom: verticalIndent,
|
||||
left: horizontalIndent,
|
||||
right: horizontalIndent},
|
||||
{ queue: false,
|
||||
duration: 500
|
||||
}
|
||||
);
|
||||
|
||||
$('#largeVideo').animate({ width: videoWidth,
|
||||
height: videoHeight,
|
||||
top: verticalIndent,
|
||||
bottom: verticalIndent,
|
||||
left: horizontalIndent,
|
||||
right: horizontalIndent},
|
||||
{ queue: false,
|
||||
duration: 500
|
||||
});
|
||||
|
||||
$('#chatspace').hide("slide", { direction: "right",
|
||||
if (Chat.isVisible()) {
|
||||
chatspace.hide("slide", { direction: "right",
|
||||
queue: false,
|
||||
duration: 500});
|
||||
}
|
||||
else {
|
||||
// Undock the toolbar when the chat is shown and if we're in a
|
||||
// video mode.
|
||||
if (VideoLayout.isLargeVideoVisible())
|
||||
if (VideoLayout.isLargeVideoVisible()) {
|
||||
ToolbarToggler.dockToolbar(false);
|
||||
}
|
||||
|
||||
videospace.animate({right: chatSize[0],
|
||||
width: videospaceWidth,
|
||||
height: videospaceHeight},
|
||||
{queue: false,
|
||||
duration: 500,
|
||||
complete: function () {
|
||||
scrollChatToBottom();
|
||||
chatspace.trigger('shown');
|
||||
}
|
||||
});
|
||||
|
||||
$('#remoteVideos').animate({height: thumbnailsHeight},
|
||||
{queue: false,
|
||||
duration: 500});
|
||||
|
||||
$('#remoteVideos>span').animate({height: thumbnailsHeight,
|
||||
width: thumbnailsWidth},
|
||||
{queue: false,
|
||||
duration: 500,
|
||||
complete: function() {
|
||||
$(document).trigger(
|
||||
"remotevideo.resized",
|
||||
[thumbnailsWidth, thumbnailsHeight]);
|
||||
}});
|
||||
|
||||
$('#largeVideoContainer').animate({ width: videospaceWidth,
|
||||
height: videospaceHeight},
|
||||
{queue: false,
|
||||
duration: 500
|
||||
});
|
||||
|
||||
$('#largeVideo').animate({ width: videoWidth,
|
||||
height: videoHeight,
|
||||
top: verticalIndent,
|
||||
bottom: verticalIndent,
|
||||
left: horizontalIndent,
|
||||
right: horizontalIndent},
|
||||
{queue: false,
|
||||
duration: 500
|
||||
});
|
||||
|
||||
$('#chatspace').show("slide", { direction: "right",
|
||||
chatspace.show("slide", { direction: "right",
|
||||
queue: false,
|
||||
duration: 500,
|
||||
complete: function () {
|
||||
|
|
|
|||
121
contact_list.js
121
contact_list.js
|
|
@ -96,95 +96,58 @@ var ContactList = (function (my) {
|
|||
var thumbnailSize = VideoLayout.calculateThumbnailSize(videospaceWidth);
|
||||
var thumbnailsWidth = thumbnailSize[0];
|
||||
var thumbnailsHeight = thumbnailSize[1];
|
||||
var completeFunction = ContactList.isVisible() ?
|
||||
function() {} : function () { contactlist.trigger('shown');};
|
||||
|
||||
videospace.animate({right: chatSize[0],
|
||||
width: videospaceWidth,
|
||||
height: videospaceHeight},
|
||||
{queue: false,
|
||||
duration: 500,
|
||||
complete: completeFunction
|
||||
});
|
||||
|
||||
$('#remoteVideos').animate({height: thumbnailsHeight},
|
||||
{queue: false,
|
||||
duration: 500});
|
||||
|
||||
$('#remoteVideos>span').animate({height: thumbnailsHeight,
|
||||
width: thumbnailsWidth},
|
||||
{queue: false,
|
||||
duration: 500,
|
||||
complete: function() {
|
||||
$(document).trigger(
|
||||
"remotevideo.resized",
|
||||
[thumbnailsWidth,
|
||||
thumbnailsHeight]);
|
||||
}});
|
||||
|
||||
$('#largeVideoContainer').animate({ width: videospaceWidth,
|
||||
height: videospaceHeight},
|
||||
{queue: false,
|
||||
duration: 500
|
||||
});
|
||||
|
||||
$('#largeVideo').animate({ width: videoWidth,
|
||||
height: videoHeight,
|
||||
top: verticalIndent,
|
||||
bottom: verticalIndent,
|
||||
left: horizontalIndent,
|
||||
right: horizontalIndent},
|
||||
{ queue: false,
|
||||
duration: 500
|
||||
});
|
||||
|
||||
if (ContactList.isVisible()) {
|
||||
videospace.animate({right: chatSize[0],
|
||||
width: videospaceWidth,
|
||||
height: videospaceHeight},
|
||||
{queue: false,
|
||||
duration: 500});
|
||||
|
||||
$('#remoteVideos').animate({height: thumbnailsHeight},
|
||||
{queue: false,
|
||||
duration: 500});
|
||||
|
||||
$('#remoteVideos>span').animate({height: thumbnailsHeight,
|
||||
width: thumbnailsWidth},
|
||||
{queue: false,
|
||||
duration: 500,
|
||||
complete: function() {
|
||||
$(document).trigger(
|
||||
"remotevideo.resized",
|
||||
[thumbnailsWidth,
|
||||
thumbnailsHeight]);
|
||||
}});
|
||||
|
||||
$('#largeVideoContainer').animate({ width: videospaceWidth,
|
||||
height: videospaceHeight},
|
||||
{queue: false,
|
||||
duration: 500
|
||||
});
|
||||
|
||||
$('#largeVideo').animate({ width: videoWidth,
|
||||
height: videoHeight,
|
||||
top: verticalIndent,
|
||||
bottom: verticalIndent,
|
||||
left: horizontalIndent,
|
||||
right: horizontalIndent},
|
||||
{ queue: false,
|
||||
duration: 500
|
||||
});
|
||||
|
||||
$('#contactlist').hide("slide", { direction: "right",
|
||||
queue: false,
|
||||
duration: 500});
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
// Undock the toolbar when the chat is shown and if we're in a
|
||||
// video mode.
|
||||
if (VideoLayout.isLargeVideoVisible())
|
||||
ToolbarToggler.dockToolbar(false);
|
||||
|
||||
videospace.animate({right: chatSize[0],
|
||||
width: videospaceWidth,
|
||||
height: videospaceHeight},
|
||||
{queue: false,
|
||||
duration: 500,
|
||||
complete: function () {
|
||||
contactlist.trigger('shown');
|
||||
}
|
||||
});
|
||||
|
||||
$('#remoteVideos').animate({height: thumbnailsHeight},
|
||||
{queue: false,
|
||||
duration: 500});
|
||||
|
||||
$('#remoteVideos>span').animate({height: thumbnailsHeight,
|
||||
width: thumbnailsWidth},
|
||||
{queue: false,
|
||||
duration: 500,
|
||||
complete: function() {
|
||||
$(document).trigger(
|
||||
"remotevideo.resized",
|
||||
[thumbnailsWidth, thumbnailsHeight]);
|
||||
}});
|
||||
|
||||
$('#largeVideoContainer').animate({ width: videospaceWidth,
|
||||
height: videospaceHeight},
|
||||
{queue: false,
|
||||
duration: 500
|
||||
});
|
||||
|
||||
$('#largeVideo').animate({ width: videoWidth,
|
||||
height: videoHeight,
|
||||
top: verticalIndent,
|
||||
bottom: verticalIndent,
|
||||
left: horizontalIndent,
|
||||
right: horizontalIndent},
|
||||
{queue: false,
|
||||
duration: 500
|
||||
});
|
||||
|
||||
$('#contactlist').show("slide", { direction: "right",
|
||||
queue: false,
|
||||
duration: 500});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
#contactlist {
|
||||
background-color:rgba(0,0,0,.65);
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
#contactlist>ul {
|
||||
|
|
|
|||
Loading…
Reference in New Issue