Merge pull request #1091 from BeatC/customer-agreement

Customer agreement

css/_inlay.scss

@@ -0,0 +1,29 @@
+.inlay {
+    margin-top: 14%;
+    @include border-radius(3px);
+    padding: 40px 38px 44px;
+    color: #fff;
+    background: lighten(desaturate($defaultBackground, 70%), 20%);
+    text-align: center;
+
+    &__title {
+        margin: 12px 0;
+        padding-bottom: 17px;
+        color: $popoverFontColor;
+        font-size: 21px;
+        letter-spacing: 0.3px;
+        border-bottom: 1px solid $auiBorderColor;
+    }
+
+    &__text {
+        color: $popoverFontColor;
+        display: block;
+        margin-top: 22px;
+        font-size: 16px;
+    }
+
+    &__icon {
+        margin: 0 10px;
+        font-size: 50px;
+    }
+}

css/_policy.scss

@@ -0,0 +1,15 @@
+.policy {
+    &__logo {
+        display: block;
+        width: 200px;
+        height: 50px;
+        margin: 30px auto 0;
+    }
+
+    &__text {
+        text-align: center;
+        font-size: 14px;
+        line-height: 21px;
+        font-weight: 300;
+    }
+}

css/_variables.scss

@@ -1,3 +1,5 @@
+@import "themes/light";
+
 /**
  * Style variables
  */
@@ -23,7 +25,6 @@ $defaultColor: #F1F1F1;
 $defaultSideBarFontColor: #44A5FF;
 $defaultSemiDarkColor: #ACACAC;
 $defaultDarkColor: #2b3d5c;
-$defaultBackground: #474747;
 $tooltipBg: rgba(0,0,0, 0.7);
 
 /**

css/main.scss

@@ -29,15 +29,12 @@
 
 /* Fonts END */
 
-/* Theme  BEGIN */
-@import "themes/main";
-/* Theme END */
-
 /* Modules BEGIN */
 
 @import 'toastr';
 @import 'base';
 @import 'overlay/overlay';
+@import 'inlay';
 @import 'reload_overlay/reload_overlay';
 @import 'modals/dialog';
 @import 'modals/feedback/feedback';
@@ -65,5 +62,6 @@
 @import "connection-info";
 @import 'aui-components/dropdown';
 @import '404';
+@import 'policy';
 
 /* Modules END */

css/overlay/_overlay.scss

@@ -1,30 +1,31 @@
-.overlay_container {
+.overlay {
-    top: 0;
+    &__container {
-    left: 0;
+        top: 0;
-    width: 100%;
+        left: 0;
-    height: 100%;
+        width: 100%;
-    position: fixed;
+        height: 100%;
-    z-index: $overlayZ;
+        position: fixed;
-    background: rgba(22, 185, 252, .9);
+        z-index: $overlayZ;
-}
+        background: $defaultBackground;
+    }
 
-.overlay_content {
+    &__content {
-    color: #fff;
+        position: absolute;
-    text-align: center;
+        margin: 0 auto;
-    width: 400px;
+        height: 100%;
-    height: 250px;
+        width: 56%;
-    top: 50%;
+        left: 50%;
-    left: 50%;
+        @include transform(translateX(-50%));
-    position: absolute;
-    margin-top: -125px;
-    margin-left: -200px;
-}
 
-.overlay_text_small {
+        &_bottom {
-    display: block;
+            position: absolute;
-    font-size: 18px;
+            bottom: 0;
-}
+        }
+    }
 
-.overlay_icon {
+    &__policy {
-    font-size: 100px;
+        position: absolute;
+        bottom: 24px;
+        width: 100%;
+    }
 }

css/themes/_light.scss

@@ -22,6 +22,11 @@ $primaryButtonFontWeight: 400;
 
 $buttonShadowColor: #192d4f;
 
+/**
+* Color variables
+**/
+$defaultBackground: #474747;
+
 /**
 * Connection indicator
 **/

css/themes/_main.scss

@@ -1,5 +0,0 @@
-/**
-* Switch themes here
-*/
-
-@import "light";

interface_config.js

@@ -69,5 +69,6 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
     // disables the ringing sound when the RingOverlay is shown.
     DISABLE_RINGING: false,
     AUDIO_LEVEL_PRIMARY_COLOR: "rgba(255,255,255,0.4)",
-    AUDIO_LEVEL_SECONDARY_COLOR: "rgba(255,255,255,0.2)"
+    AUDIO_LEVEL_SECONDARY_COLOR: "rgba(255,255,255,0.2)",
+    POLICY_LOGO: null
 };

lang/main.json

@@ -75,6 +75,10 @@
             "content": "Learn about your users through easy integration with Piwik, Google Analytics, and other usage monitoring and statistics systems."
         }
     },
+    "startupoverlay": {
+        "policyText": " ",
+        "title": "__app__ needs to use your microphone and camera."
+    },
     "toolbar": {
         "mute": "Mute / Unmute",
         "videomute": "Start / Stop camera",

modules/UI/gum_overlay/UserMediaPermissionsGuidanceOverlay.js

@@ -1,4 +1,4 @@
-/* global */
+/* global interfaceConfig */
 
 import Overlay from '../overlay/Overlay';
 
@@ -22,11 +22,33 @@ class GUMOverlayImpl extends Overlay {
      * @inheritDoc
      */
     _buildOverlayContent() {
-        return `
+        let textKey = `userMedia.${this.browser}GrantPermissions`;
-            <span class="overlay_icon icon-microphone"></span>
+        let titleKey = 'startupoverlay.title';
-            <span class="overlay_icon icon-camera"></span>
+        let titleOptions = '{ "postProcess": "resolveAppName" }';
-            <span data-i18n='[html]userMedia.${this.browser}GrantPermissions' 
+        let policyTextKey = 'startupoverlay.policyText';
-                  class='overlay_text_small'></span>`;
+        let policyLogo = '';
+        let policyLogoSrc = interfaceConfig.POLICY_LOGO;
+        if (policyLogoSrc) {
+            policyLogo += (
+                `<div class="policy__logo">
+                    <img src="${policyLogoSrc}"/>
+                </div>`
+            );
+        }
+
+        return (
+            `<div class="inlay">
+                <span class="inlay__icon icon-microphone"></span>
+                <span class="inlay__icon icon-camera"></span>
+                <h3 class="inlay__title" data-i18n="${titleKey}"
+                    data-i18n-options='${titleOptions}'></h3>
+                <span class='inlay__text'data-i18n='[html]${textKey}'></span>
+            </div>
+            <div class="policy overlay__policy">
+                <p class="policy__text" data-i18n="[html]${policyTextKey}"></p>
+                ${policyLogo}
+            </div>`
+        );
     }
 }
 

modules/UI/overlay/Overlay.js

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