haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated layout

This commit is contained in:
Ilya Daynatovich 2016-11-11 17:09:07 +02:00
parent f3dbeea091
commit 3bd4f1d5d8
3 changed files with 127 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/_variables.scss
View File

@ -13,9 +13,9 @@ $hangupFontSize: 2em;
$defaultToolbarSize: 50px; $defaultToolbarSize: 50px;
// Video layout. // Video layout.
$thumbnailToolbarHeight: 3em; $thumbnailToolbarHeight: 22px;
$thumbnailIndicatorBorder: 0; $thumbnailIndicatorBorder: 0;
$thumbnailIndicatorSize: $thumbnailToolbarHeight; $thumbnailIndicatorSize: 3em;
$thumbnailVideoMargin: 2px; $thumbnailVideoMargin: 2px;
/** /**

46
css/_videolayout_default.scss
View File

@ -22,27 +22,26 @@
height: 100%; height: 100%;
background-color: black; background-color: black;
} }
}
/** /**
* The toolbar of the video thumbnail. * The toolbar of the video thumbnail.
*/ */
.videocontainer__toolbar, &__toolbar,
.videocontainer__toptoolbar { &__toptoolbar {
position: absolute; position: absolute;
left: 0; left: 0;
z-index: 3; z-index: 3;
width: 100%; width: 100%;
box-sizing: border-box; // Includes the padding in the 100% width. box-sizing: border-box; // Includes the padding in the 100% width.
} }
.videocontainer__toolbar { &__toolbar {
bottom: 0; bottom: 0;
padding: 0 5px 0 5px; padding: 0 5px 0 5px;
height: $thumbnailToolbarHeight; height: $thumbnailToolbarHeight;
} }
.videocontainer__toptoolbar { &__toptoolbar {
$toolbarPadding: 5px; $toolbarPadding: 5px;
top: 0; top: 0;
padding: $toolbarPadding; padding: $toolbarPadding;
@ -52,7 +51,7 @@
position: relative; position: relative;
font-size: 8px; font-size: 8px;
text-align: center; text-align: center;
line-height: $thumbnailToolbarHeight; line-height: $thumbnailIndicatorSize;
display: none; display: none;
padding: 0; padding: 0;
margin-right: em(5, 8); margin-right: em(5, 8);
@ -73,9 +72,7 @@
top: 50%; top: 50%;
left: 0; left: 0;
@include transform(translateY(-50%)); @include transform(translateY(-50%));
width: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder; width: 100%;
height: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
line-height: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
} }
.connection { .connection {
@ -117,15 +114,36 @@
font-size: 1em; font-size: 1em;
} }
} }
} }
.videocontainer__hoverOverlay { &_small {
span.indicator {
font-size: 5px;
.connection {
height: 5px;
}
}
}
&_medium {
span.indicator {
font-size: 6px;
.connection {
height: 6px;
}
}
}
&__hoverOverlay {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
visibility: hidden; visibility: hidden;
background: rgba(0,0,0,.6); background: rgba(0,0,0,.6);
z-index: 2; z-index: 2;
}
} }
#localVideoWrapper { #localVideoWrapper {

35
modules/UI/videolayout/FilmStrip.js
View File

@ -401,12 +401,8 @@ const FilmStrip = {
height: remote.thumbHeight + 2 height: remote.thumbHeight + 2
}, this._getAnimateOptions(animate, resolve)); }, this._getAnimateOptions(animate, resolve));
})); }));
promises.push(new Promise((resolve) => {
let fontSize = this._getIndicatorFontSize(remote.thumbHeight); this._setThumbnailsClasses(remote.thumbHeight);
this.filmStrip.find('.indicator').animate({
fontSize
}, this._getAnimateOptions(animate, resolve));
}));
if (!animate) { if (!animate) {
resolve(); resolve();
@ -432,25 +428,32 @@ const FilmStrip = {
}, },
/** /**
* Returns font size for indicators according to current * Set thumbnail classes according to the current size of thumbnail
* height of thumbnail
* @param height * @param height
* @returns {Number} - font size for current height
* @private * @private
*/ */
_getIndicatorFontSize(height) { _setThumbnailsClasses(height) {
const { SMALL, MEDIUM } = ThumbnailSizes; const { SMALL, MEDIUM } = ThumbnailSizes;
let fontSize; const { localThumb, remoteThumbs } = this.getThumbs();
let smallClass = 'videocontainer_small';
let mediumClass = 'videocontainer_medium';
let className = '';
if (height <= SMALL) { if (height <= SMALL) {
fontSize = 5; className = smallClass;
} else if (height > SMALL && height <= MEDIUM) { } else if (height > SMALL && height <= MEDIUM) {
fontSize = 6; className = mediumClass;
} else {
fontSize = 8;
} }
return fontSize; localThumb
.removeClass(`${smallClass} ${mediumClass}`)
.addClass(className);
if (remoteThumbs) {
remoteThumbs
.removeClass(`${smallClass} ${mediumClass}`)
.addClass(className);
}
}, },
/** /**