implement callout component w/ generator policy (#1158)

jslib

@@ -1 +1 @@
-Subproject commit 6c529422048c95645304ceb14250c8efce938f34
+Subproject commit e93c534ec4f724eaa8b494f516b187bea67b132c

src/_locales/en/messages.json

@@ -1244,5 +1244,8 @@
   },
   "clone": {
     "message": "Clone"
+  },
+  "passwordGeneratorPolicyInEffect": {
+    "message": "One or more organization policies are affecting your generator settings."
   }
 }

src/popup/app.module.ts

@@ -65,6 +65,7 @@ import { ActionButtonsComponent } from './components/action-buttons.component';
 import { CiphersListComponent } from './components/ciphers-list.component';
 import { PopOutComponent } from './components/pop-out.component';
 
+import { CalloutComponent } from 'jslib/angular/components/callout.component';
 import { IconComponent } from 'jslib/angular/components/icon.component';
 
 import {
@@ -165,6 +166,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         AutofocusDirective,
         BlurClickDirective,
         BoxRowDirective,
+        CalloutComponent,
         CiphersComponent,
         CiphersListComponent,
         CollectionsComponent,

src/popup/generator/password-generator.component.html

@@ -11,6 +11,9 @@
     </div>
 </header>
 <content>
+    <app-callout type="info" *ngIf="policyInEffect">
+        {{'passwordGeneratorPolicyInEffect' | i18n}}
+    </app-callout>
     <div class="password-block">
         <div class="password-wrapper" [innerHTML]="password | colorPassword" appSelectCopy></div>
     </div>

src/popup/scss/misc.scss

@@ -222,3 +222,84 @@ app-vault-icon {
 .draggable {
     cursor: move;
 }
+
+.callout {
+    padding: 10px;
+    margin: 10px;
+    border: 1px solid #000000;
+    border-left-width: 5px;
+    border-radius: 3px;
+    @include themify($themes) {
+        border-color: themed('calloutBorderColor');
+        background-color: themed('calloutBackgroundColor');
+    }
+
+    .callout-heading {
+        margin-top: 0;
+    }
+
+    h3.callout-heading {
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+
+    &.callout-primary {
+        @include themify($themes) {
+            border-left-color: themed('primaryColor');
+        }
+
+        .callout-heading {
+            @include themify($themes) {
+                color: themed('primaryColor');
+            }
+        }
+    }
+
+    &.callout-info {
+        @include themify($themes) {
+            border-left-color: themed('infoColor');
+        }
+
+        .callout-heading {
+            @include themify($themes) {
+                color: themed('infoColor');
+            }
+        }
+    }
+
+    &.callout-danger {
+        @include themify($themes) {
+            border-left-color: themed('dangerColor');
+        }
+
+        .callout-heading {
+            @include themify($themes) {
+                color: themed('dangerColor');
+            }
+        }
+    }
+
+    &.callout-success {
+        @include themify($themes) {
+            border-left-color: themed('successColor');
+        }
+
+        .callout-heading {
+            @include themify($themes) {
+                color: themed('successColor');
+            }
+        }
+    }
+
+    &.callout-warning {
+        @include themify($themes) {
+            border-left-color: themed('warningColor');
+        }
+
+        .callout-heading {
+            @include themify($themes) {
+                color: themed('warningColor');
+            }
+        }
+    }
+}

src/popup/scss/variables.scss

@@ -83,6 +83,8 @@ $themes: (
         logoSuffix: 'dark',
         passwordNumberColor: #007fde,
         passwordSpecialColor: #c40800,
+        calloutBorderColor: $border-color-dark,
+        calloutBackgroundColor: $box-background-color,
     ),
     dark: (
         textColor: #ffffff,
@@ -129,6 +131,8 @@ $themes: (
         logoSuffix: 'white',
         passwordNumberColor: #52bdfb,
         passwordSpecialColor: #ff7c70,
+        calloutBorderColor: #111111,
+        calloutBackgroundColor: #3d3d3d,
     ),
     nord: (
         textColor: $nord5,
@@ -175,6 +179,8 @@ $themes: (
         logoSuffix: 'white',
         passwordNumberColor: $nord8,
         passwordSpecialColor: $nord12,
+        calloutBorderColor: $nord0,
+        calloutBackgroundColor: $nord2,
     ),
 );