DeforaNetworks/jitsi-meet
DeforaNetworks/jitsi-meet
3
0
Fork 0
Code Releases Activity

Change the visual when it is switched between chat and contact list.

Browse Source
This commit is contained in:
fo 2014-09-30 15:48:05 +03:00
parent d64642025d
commit 4d5bb61f0a
4 changed files with 95 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
bottom_toolbar.js
View File

@ -2,7 +2,11 @@ var BottomToolbar = (function (my) {
my.toggleChat = function() { my.toggleChat = function() {
if (ContactList.isVisible()) { if (ContactList.isVisible()) {
buttonClick("#contactListButton", "active"); 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"); buttonClick("#chatBottomButton", "active");
@ -13,7 +17,9 @@ var BottomToolbar = (function (my) {
my.toggleContactList = function() { my.toggleContactList = function() {
if (Chat.isVisible()) { if (Chat.isVisible()) {
buttonClick("#chatBottomButton", "active"); buttonClick("#chatBottomButton", "active");
Chat.toggleChat(); setTimeout(function() {
$('#chatspace').css('display', 'none');
}, 500);
} }
buttonClick("#contactListButton", "active"); buttonClick("#contactListButton", "active");

121
chat.js
View File

@ -143,7 +143,7 @@ var Chat = (function (my) {
var chatspace = $('#chatspace'); var chatspace = $('#chatspace');
var videospace = $('#videospace'); 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 videospaceWidth = window.innerWidth - chatSize[0];
var videospaceHeight = window.innerHeight; var videospaceHeight = window.innerHeight;
var videoSize var videoSize
@ -160,97 +160,64 @@ var Chat = (function (my) {
var thumbnailSize = VideoLayout.calculateThumbnailSize(videospaceWidth); var thumbnailSize = VideoLayout.calculateThumbnailSize(videospaceWidth);
var thumbnailsWidth = thumbnailSize[0]; var thumbnailsWidth = thumbnailSize[0];
var thumbnailsHeight = thumbnailSize[1]; var thumbnailsHeight = thumbnailSize[1];
var completeFunction = Chat.isVisible() ?
function() {} : function () {
scrollChatToBottom();
chatspace.trigger('shown');
};
if (chatspace.is(":visible")) { videospace.animate({right: chatSize[0],
videospace.animate({right: chatSize[0], width: videospaceWidth,
width: videospaceWidth, height: videospaceHeight},
height: videospaceHeight}, {queue: false,
{queue: false, duration: 500,
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, {queue: false,
duration: 500}); duration: 500,
complete: function() {
$(document).trigger(
"remotevideo.resized",
[thumbnailsWidth,
thumbnailsHeight]);
}});
$('#remoteVideos>span').animate({height: thumbnailsHeight, $('#largeVideoContainer').animate({ width: videospaceWidth,
width: thumbnailsWidth}, height: videospaceHeight},
{queue: false, {queue: false,
duration: 500, duration: 500
complete: function() { });
$(document).trigger(
"remotevideo.resized",
[thumbnailsWidth,
thumbnailsHeight]);
}});
$('#largeVideoContainer').animate({ width: videospaceWidth, $('#largeVideo').animate({ width: videoWidth,
height: videospaceHeight}, height: videoHeight,
{queue: false, top: verticalIndent,
duration: 500 bottom: verticalIndent,
}); left: horizontalIndent,
right: horizontalIndent},
{ queue: false,
duration: 500
}
);
$('#largeVideo').animate({ width: videoWidth, if (Chat.isVisible()) {
height: videoHeight, chatspace.hide("slide", { direction: "right",
top: verticalIndent,
bottom: verticalIndent,
left: horizontalIndent,
right: horizontalIndent},
{ queue: false,
duration: 500
});
$('#chatspace').hide("slide", { direction: "right",
queue: false, queue: false,
duration: 500}); duration: 500});
} }
else { else {
// Undock the toolbar when the chat is shown and if we're in a // Undock the toolbar when the chat is shown and if we're in a
// video mode. // video mode.
if (VideoLayout.isLargeVideoVisible()) if (VideoLayout.isLargeVideoVisible()) {
ToolbarToggler.dockToolbar(false); ToolbarToggler.dockToolbar(false);
}
videospace.animate({right: chatSize[0], chatspace.show("slide", { direction: "right",
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",
queue: false, queue: false,
duration: 500, duration: 500,
complete: function () { complete: function () {

121
contact_list.js
View File

@ -96,95 +96,58 @@ var ContactList = (function (my) {
var thumbnailSize = VideoLayout.calculateThumbnailSize(videospaceWidth); var thumbnailSize = VideoLayout.calculateThumbnailSize(videospaceWidth);
var thumbnailsWidth = thumbnailSize[0]; var thumbnailsWidth = thumbnailSize[0];
var thumbnailsHeight = thumbnailSize[1]; 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()) { 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", $('#contactlist').hide("slide", { direction: "right",
queue: false, queue: false,
duration: 500}); duration: 500});
} } else {
else {
// Undock the toolbar when the chat is shown and if we're in a // Undock the toolbar when the chat is shown and if we're in a
// video mode. // video mode.
if (VideoLayout.isLargeVideoVisible()) if (VideoLayout.isLargeVideoVisible())
ToolbarToggler.dockToolbar(false); 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", $('#contactlist').show("slide", { direction: "right",
queue: false, queue: false,
duration: 500}); duration: 500});

2
css/contact_list.css
View File

@ -1,5 +1,5 @@
#contactlist { #contactlist {
background-color:rgba(0,0,0,.65); background-color: black;
} }
#contactlist>ul { #contactlist>ul {