Rearrange overlay layout

This commit is contained in:
Ilya Daynatovich 2016-10-31 17:35:22 +02:00
parent 8b2491c7a2
commit 647f577332
4 changed files with 65 additions and 31 deletions

5
css/_policy.scss Normal file
View File

@ -0,0 +1,5 @@
.policy {
&__logo {
}
}

View File

@ -1,30 +1,51 @@
.overlay_container {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: $overlayZ;
background: rgba(22, 185, 252, .9);
.overlay {
&__container {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: $overlayZ;
background: $defaultBackground;
}
&__content {
margin: 0 auto;
width: 56%;
&_bottom {
position: absolute;
bottom: 0;
}
}
}
.overlay_content {
.inlay {
margin-top: 14%;
@include border-radius(3px);
padding: 40px 38px 44px;
color: #fff;
background: lighten($defaultBackground, 20%);
text-align: center;
width: 400px;
height: 250px;
top: 50%;
left: 50%;
position: absolute;
margin-top: -125px;
margin-left: -200px;
}
.overlay_text_small {
display: block;
font-size: 18px;
}
&__title {
margin: 12px 0;
padding-bottom: 17px;
color: $popoverFontColor;
font-size: 21px;
letter-spacing: 0.3px;
border-bottom: 1px solid $auiBorderColor;
}
.overlay_icon {
font-size: 100px;
}
&__text {
color: $popoverFontColor;
display: block;
margin-top: 22px;
font-size: 16px;
}
&__icon {
margin: 0 10px;
font-size: 50px;
}
}

View File

@ -22,11 +22,19 @@ class GUMOverlayImpl extends Overlay {
* @inheritDoc
*/
_buildOverlayContent() {
return `
<span class="overlay_icon icon-microphone"></span>
<span class="overlay_icon icon-camera"></span>
<span data-i18n='[html]userMedia.${this.browser}GrantPermissions'
class='overlay_text_small'></span>`;
// `<span data-i18n='[html]userMedia.${this.browser}GrantPermissions'
// class='inlay__text'></span>`
let title = 'HipChat Video needs to use your microphone and camera.';
let text;
text = 'Select "Allow" when your browser asks for these permissions.';
return (
`<div class="inlay">
<span class="inlay__icon icon-microphone"></span>
<span class="inlay__icon icon-camera"></span>
<h3 class="inlay__title">${title}</h3>
<span class='inlay__text'>${text}</span>
</div>`
);
}
}

View File

@ -34,8 +34,8 @@ export default class Overlay{
let overlayContent = this._buildOverlayContent();
this.$overlay = $(`
<div class='overlay_container'>
<div class='overlay_content'>
<div class='overlay__container'>
<div class='overlay__content'>
${overlayContent}
</div>
</div>`);