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

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
parent a4e1f939cd d09a8b1896
commit 3196ffd941
5 changed files with 34 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/_recording.scss
View File

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

2
css/_toolbars.scss
View File

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

3
css/_variables.scss
View File

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

56
css/_videolayout_default.scss
View File

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

4
index.html
View File

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