Merge pull request #1042 from m-voloshin/FEATURE-hd-label-relocation

Relocate "HD" label
This commit is contained in:
yanas 2016-10-24 12:21:26 -05:00 committed by GitHub
commit 3196ffd941
5 changed files with 34 additions and 35 deletions

View File

@ -1,4 +1,4 @@
.recordingSpinner {
display: none;
vertical-align: text-bottom;
vertical-align: top;
}

View File

@ -1,5 +1,5 @@
.toolbar {
background-color: rgba(0,0,0,0.5);
background-color: $toolbarBackground;
position: relative;
z-index: $toolbarZ;
height: 100%;

View File

@ -27,6 +27,7 @@ $defaultBackground: #474747;
$tooltipBg: rgba(0,0,0, 0.7);
// Toolbar
$toolbarBackground: rgba(0, 0, 0, 0.5);
$toolbarSelectBackground: rgba(0, 0, 0, .6);
$toolbarBadgeBackground: #165ECC;
$toolbarBadgeColor: #FFFFFF;
@ -46,6 +47,8 @@ $dominantSpeakerBg: #165ecc;
$raiseHandBg: #D6D61E;
$audioLevelBg: #44A5FF;
$audioLevelShadow: rgba(9, 36, 77, 0.9);
$videoStateIndicatorColor: $defaultColor;
$videoStateIndicatorBackground: $toolbarBackground;
/**
* Feedback Modal

View File

@ -546,47 +546,43 @@
0px 0px 1px rgba(0,0,0,0.3);
}
#videoResolutionLabel {
display: none;
position: absolute;
top: 5px;
right: 5px;
background: rgba(0,0,0,.5);
padding: 10px;
color: rgba(255,255,255,.5);
z-index: 1011;
.video-state-indicator {
background: $videoStateIndicatorBackground;
color: $videoStateIndicatorColor;
font-size: 13px;
line-height: 20px;
text-align: center;
min-width: 40px;
height: 40px;
padding: 10px 5px;
border-radius: 50%;
position: absolute;
box-sizing: border-box;
}
#videoResolutionLabel,
.centeredVideoLabel {
display: none;
z-index: 1011;
}
.centeredVideoLabel {
display: none;
position: absolute;
bottom: 45%;
top: auto;
right: auto;
left: auto;
line-height: 28px;
height: 28px;
width: auto;
padding: 5px;
margin-right: auto;
margin-left: auto;
background: rgba(0,0,0,.5);
color: #FFF;
z-index: 1011;
border-radius: 2px;
-webkit-transition: all 2s 2s linear;
transition: all 2s 2s linear;
&.moveToCorner {
bottom: auto;
}
}
.moveToCorner {
top: 5px;
right: 50px; /*leave free space for the HD label*/
margin-right: 0px;
margin-left: auto;
background: rgba(0,0,0,.3);
color: rgba(255,255,255,.5);
position: absolute;
top: 30px;
right: 30px;
}
.hidden {
.moveToCorner + .moveToCorner {
right: 80px;
}

View File

@ -240,8 +240,8 @@
<video id="largeVideo" muted="true" autoplay></video>
</div>
<span id="localConnectionMessage"></span>
<span id="videoResolutionLabel">HD</span>
<span id="recordingLabel" class="centeredVideoLabel">
<span id="videoResolutionLabel" class="video-state-indicator moveToCorner">HD</span>
<span id="recordingLabel" class="video-state-indicator centeredVideoLabel">
<span id="recordingLabelText"></span>
<img id="recordingSpinner" class="recordingSpinner" src="images/spin.svg"></img>
</span>