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

ref(filmstrip): move around small video and quality label styles

This commit is contained in:
Leonard Kim 2018-06-25 13:50:42 -07:00 committed by Saúl Ibarra Corretgé
parent 60ae8497c0
commit 8f688c3535
1 changed files with 59 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
css/filmstrip/_vertical_filmstrip_overrides.scss
View File

@ -127,39 +127,6 @@
} }
} }
/**
* Overrides for small videos in vertical filmstrip mode.
*/
.filmstrip__videos .videocontainer {
/**
* Move status icons to the bottom right of the thumbnail.
*/
.videocontainer__toolbar {
text-align: right;
.right {
float: none;
margin: auto;
}
}
/**
* Move the remote video menu trigger to the bottom left of the
* video thumbnail.
*/
.remotevideomenu,
.remote-video-menu-trigger {
bottom: 0;
left: 0;
top: auto;
right: auto;
}
.remote-video-menu-trigger {
margin-bottom: 7px;
}
}
&.filmstrip-only { &.filmstrip-only {
.filmstrip { .filmstrip {
flex-direction: row-reverse; flex-direction: row-reverse;
@ -168,31 +135,35 @@
height: 100%; height: 100%;
} }
} }
}
/**
* Overrides for small videos in vertical filmstrip mode.
*/
.vertical-filmstrip .filmstrip__videos .videocontainer {
/** /**
* These styles are for the video labels that display on the top right. The * Move status icons to the bottom right of the thumbnail.
* styles adjust the labels' positioning as the filmstrip itself or
* filmstrip's remote videos appear and disappear.
*
* The class with-filmstrip is for when the filmstrip is visible.
* The class without-filmstrip is for when the filmstrip has been toggled to
* be hidden.
* The class opening is for when the filmstrip is transitioning from hidden
* to visible.
*/ */
.large-video-labels { .videocontainer__toolbar {
&.with-filmstrip { /**
right: 150px; * FIXME: disable pointer to allow any elements moved below to still
* be clickable. The real fix would to make sure those moved elements
* are actually part of the toolbar instead of positioning being faked.
*/
pointer-events: none;
text-align: right;
> div {
pointer-events: none;
} }
&.with-filmstrip.opening { .right {
transition: 0.9s; float: none;
transition-timing-function: ease-in-out; margin: auto;
} }
&.without-filmstrip { .toolbar-icon {
transition: 1.2s ease-in-out; pointer-events: all;
transition-delay: 0.1s;
} }
} }
@ -212,20 +183,46 @@
} }
/** /**
* FIXME: disable pointer to allow any elements moved below to still be * Move the remote video menu trigger to the bottom left of the video
* clickable. The real fix would to make sure those moved elements are * thumbnail.
* actually part of the toolbar instead of positioning being faked.
*/ */
.videocontainer__toolbar { .remotevideomenu,
pointer-events: none; .remote-video-menu-trigger {
bottom: 0;
left: 0;
top: auto;
right: auto;
}
> div { .remote-video-menu-trigger {
pointer-events: none; margin-bottom: 7px;
} }
}
.toolbar-icon { /**
pointer-events: all; * Overrides for quality labels in filmstrip only mode. The styles adjust the
} * labels' positioning as the filmstrip itself or filmstrip's remote videos
* appear and disappear.
*
* The class with-filmstrip is for when the filmstrip is visible.
* The class without-filmstrip is for when the filmstrip has been toggled to
* be hidden.
* The class opening is for when the filmstrip is transitioning from hidden
* to visible.
*/
.vertical-filmstrip .large-video-labels {
&.with-filmstrip {
right: 150px;
}
&.with-filmstrip.opening {
transition: 0.9s;
transition-timing-function: ease-in-out;
}
&.without-filmstrip {
transition: 1.2s ease-in-out;
transition-delay: 0.1s;
} }
} }