Update HTML and TS scripts for UI scaling

src/app/organizations/manage/manage.component.html

@@ -1,4 +1,4 @@
-<div class="container page-content">
+<div class="container page-content" [ngClass]="{'full-width': this.scaleUIWidth}">
     <div class="row">
         <div class="col-3">
             <div class="card" *ngIf="organization">

src/app/organizations/manage/manage.component.ts

@@ -5,6 +5,7 @@ import {
 import { ActivatedRoute } from '@angular/router';
 
 import { UserService } from 'jslib/abstractions/user.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
 
 import { Organization } from 'jslib/models/domain/organization';
 
@@ -17,11 +18,13 @@ export class ManageComponent implements OnInit {
     accessPolicies = false;
     accessGroups = false;
     accessEvents = false;
+    scaleUIWidth: boolean = false;
 
-    constructor(private route: ActivatedRoute, private userService: UserService) { }
+    constructor(private route: ActivatedRoute, private userService: UserService, private storageService: StorageService) { }
 
     ngOnInit() {
         this.route.parent.params.subscribe(async (params) => {
+            this.scaleUIWidth = await this.storageService.get<boolean>('enableUIScaling');
             this.organization = await this.userService.getOrganization(params.organizationId);
             this.accessPolicies = this.organization.usePolicies;
             this.accessEvents = this.organization.useEvents;

src/app/organizations/settings/settings.component.html

@@ -1,4 +1,4 @@
-<div class="container page-content">
+<div class="container page-content" [ngClass]="{'full-width': this.scaleUIWidth}">
     <div class="row">
         <div class="col-3">
             <div class="card">

src/app/organizations/settings/settings.component.ts

@@ -3,6 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { UserService } from 'jslib/abstractions/user.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
 
 @Component({
     selector: 'app-org-settings',
@@ -11,12 +12,14 @@ import { UserService } from 'jslib/abstractions/user.service';
 export class SettingsComponent {
     access2fa = false;
     selfHosted: boolean;
+    scaleUIWidth: boolean = false;
 
     constructor(private route: ActivatedRoute, private userService: UserService,
-        private platformUtilsService: PlatformUtilsService) { }
+        private platformUtilsService: PlatformUtilsService, private storageService: StorageService) { }
 
     ngOnInit() {
         this.route.parent.params.subscribe(async (params) => {
+            this.scaleUIWidth = await this.storageService.get<boolean>('enableUIScaling');
             this.selfHosted = await this.platformUtilsService.isSelfHost();
             const organization = await this.userService.getOrganization(params.organizationId);
             this.access2fa = organization.use2fa;

src/app/organizations/tools/tools.component.html

@@ -1,4 +1,4 @@
-<div class="container page-content">
+<div class="container page-content" [ngClass]="{'full-width': this.scaleUIWidth}">
     <div class="row">
         <div class="col-3">
             <div class="card mb-4">

src/app/organizations/tools/tools.component.ts

@@ -5,6 +5,7 @@ import { Organization } from 'jslib/models/domain/organization';
 
 import { MessagingService } from 'jslib/abstractions/messaging.service';
 import { UserService } from 'jslib/abstractions/user.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
 
 @Component({
     selector: 'app-org-tools',
@@ -13,12 +14,14 @@ import { UserService } from 'jslib/abstractions/user.service';
 export class ToolsComponent {
     organization: Organization;
     accessReports = false;
+    scaleUIWidth: boolean = false;
 
     constructor(private route: ActivatedRoute, private userService: UserService,
-        private messagingService: MessagingService) { }
+        private messagingService: MessagingService, private storageService: StorageService) { }
 
     ngOnInit() {
         this.route.parent.params.subscribe(async (params) => {
+            this.scaleUIWidth = await this.storageService.get<boolean>('enableUIScaling');
             this.organization = await this.userService.getOrganization(params.organizationId);
             // TODO: Maybe we want to just make sure they are not on a free plan? Just compare useTotp for now
             // since all paid plans include useTotp

src/app/organizations/vault/vault.component.html

@@ -1,4 +1,4 @@
-<div class="container page-content">
+<div class="container page-content" [ngClass]="{'full-width': this.scaleUIWidth}">
     <div class="row">
         <div class="col-3">
             <app-org-vault-groupings [showFolders]="false" [showFavorites]="false" [showTrash]="true"

src/app/organizations/vault/vault.component.ts

@@ -19,6 +19,7 @@ import { SyncService } from 'jslib/abstractions/sync.service';
 import { UserService } from 'jslib/abstractions/user.service';
 
 import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
 
 import { Organization } from 'jslib/models/domain/organization';
 import { CipherView } from 'jslib/models/view/cipherView';
@@ -52,6 +53,7 @@ export class VaultComponent implements OnInit, OnDestroy {
     collectionId: string = null;
     type: CipherType = null;
     deleted: boolean = false;
+    scaleUIWidth: boolean = false;
 
     private modal: ModalComponent = null;
 
@@ -59,10 +61,11 @@ export class VaultComponent implements OnInit, OnDestroy {
         private router: Router, private changeDetectorRef: ChangeDetectorRef,
         private syncService: SyncService, private i18nService: I18nService,
         private componentFactoryResolver: ComponentFactoryResolver, private messagingService: MessagingService,
-        private broadcasterService: BroadcasterService, private ngZone: NgZone) { }
+        private broadcasterService: BroadcasterService, private storageService: StorageService, private ngZone: NgZone) { }
 
     ngOnInit() {
         const queryParams = this.route.parent.params.subscribe(async (params) => {
+            this.scaleUIWidth = await this.storageService.get<boolean>('enableUIScaling');
             this.organization = await this.userService.getOrganization(params.organizationId);
             this.groupingsComponent.organization = this.organization;
             this.ciphersComponent.organization = this.organization;

src/app/settings/options.component.ts

@@ -25,6 +25,7 @@ export class OptionsComponent implements OnInit {
     vaultTimeoutAction: string = 'lock';
     disableIcons: boolean;
     enableGravatars: boolean;
+    enableUIScaling: boolean;
     locale: string;
     vaultTimeouts: any[];
     localeOptions: any[];
@@ -66,6 +67,7 @@ export class OptionsComponent implements OnInit {
         this.vaultTimeoutAction = await this.storageService.get<string>(ConstantsService.vaultTimeoutActionKey);
         this.disableIcons = await this.storageService.get<boolean>(ConstantsService.disableFaviconKey);
         this.enableGravatars = await this.storageService.get<boolean>('enableGravatars');
+        this.enableUIScaling = await this.storageService.get<boolean>('enableUIScaling');
         this.locale = this.startingLocale = await this.storageService.get<string>(ConstantsService.localeKey);
     }
 
@@ -76,6 +78,8 @@ export class OptionsComponent implements OnInit {
         await this.stateService.save(ConstantsService.disableFaviconKey, this.disableIcons);
         await this.storageService.save('enableGravatars', this.enableGravatars);
         await this.stateService.save('enableGravatars', this.enableGravatars);
+        await this.storageService.save('enableUIScaling', this.enableUIScaling);
+        await this.stateService.save('enableUIScaling', this.enableUIScaling);
         await this.storageService.save(ConstantsService.localeKey, this.locale);
         this.analytics.eventTrack.next({ action: 'Saved Options' });
         if (this.locale !== this.startingLocale) {

src/app/settings/settings.component.html

@@ -1,4 +1,4 @@
-<div class="container page-content">
+<div class="container page-content" [ngClass]="{'full-width': this.scaleUIWidth}">
     <div class="row">
         <div class="col-3">
             <div class="card">

src/app/settings/settings.component.ts

@@ -9,6 +9,7 @@ import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { TokenService } from 'jslib/abstractions/token.service';
 
 import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
 
 const BroadcasterSubscriptionId = 'SettingsComponent';
 
@@ -19,11 +20,13 @@ const BroadcasterSubscriptionId = 'SettingsComponent';
 export class SettingsComponent implements OnInit, OnDestroy {
     premium: boolean;
     selfHosted: boolean;
+    scaleUIWidth: boolean = false;
 
     constructor(private tokenService: TokenService, private broadcasterService: BroadcasterService,
-        private ngZone: NgZone, private platformUtilsService: PlatformUtilsService) { }
+        private ngZone: NgZone, private platformUtilsService: PlatformUtilsService, private storageService: StorageService) { }
 
     async ngOnInit() {
+        this.scaleUIWidth = await this.storageService.get<boolean>('enableUIScaling');
         this.broadcasterService.subscribe(BroadcasterSubscriptionId, async (message: any) => {
             this.ngZone.run(async () => {
                 switch (message.command) {

src/app/tools/tools.component.html

@@ -1,4 +1,4 @@
-<div class="container page-content">
+<div class="container page-content" [ngClass]="{'full-width': this.scaleUIWidth}">
     <div class="row">
         <div class="col-3">
             <div class="card mb-4">

src/app/tools/tools.component.ts

@@ -5,6 +5,7 @@ import {
 
 import { MessagingService } from 'jslib/abstractions/messaging.service';
 import { UserService } from 'jslib/abstractions/user.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
 
 @Component({
     selector: 'app-tools',
@@ -12,10 +13,12 @@ import { UserService } from 'jslib/abstractions/user.service';
 })
 export class ToolsComponent implements OnInit {
     canAccessPremium = false;
+    scaleUIWidth: boolean = false;
 
-    constructor(private userService: UserService, private messagingService: MessagingService) { }
+    constructor(private userService: UserService, private messagingService: MessagingService, private storageService: StorageService) { }
 
     async ngOnInit() {
+        this.scaleUIWidth = await this.storageService.get<boolean>('enableUIScaling');
         this.canAccessPremium = await this.userService.canAccessPremium();
     }
 

src/app/vault/vault.component.html

@@ -1,4 +1,4 @@
-<div class="container page-content">
+<div class="container page-content" [ngClass]="{'full-width': this.scaleUIWidth}">
     <div class="row">
         <div class="col-3">
             <app-vault-groupings (onAllClicked)="clearGroupingFilters()" (onFavoritesClicked)="filterFavorites()"

src/app/vault/vault.component.ts

@@ -42,6 +42,7 @@ import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { SyncService } from 'jslib/abstractions/sync.service';
 import { TokenService } from 'jslib/abstractions/token.service';
 import { UserService } from 'jslib/abstractions/user.service';
+import { StorageService } from 'jslib/abstractions/storage.service';
 
 import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
 
@@ -75,6 +76,7 @@ export class VaultComponent implements OnInit, OnDestroy {
     showUpdateKey = false;
     showPremiumCallout = false;
     deleted: boolean = false;
+    scaleUIWidth: boolean = false;
 
     private modal: ModalComponent = null;
 
@@ -84,9 +86,11 @@ export class VaultComponent implements OnInit, OnDestroy {
         private tokenService: TokenService, private cryptoService: CryptoService,
         private messagingService: MessagingService, private userService: UserService,
         private platformUtilsService: PlatformUtilsService, private toasterService: ToasterService,
-        private broadcasterService: BroadcasterService, private ngZone: NgZone) { }
+        private broadcasterService: BroadcasterService, private storageService: StorageService,
+        private ngZone: NgZone) { }
 
     async ngOnInit() {
+        this.scaleUIWidth = await this.storageService.get<boolean>('enableUIScaling');
         this.showVerifyEmail = !(await this.tokenService.getEmailVerified());
         this.showBrowserOutdated = window.navigator.userAgent.indexOf('MSIE') !== -1;
 

src/services/htmlStorage.service.ts

@@ -4,7 +4,7 @@ import { ConstantsService } from 'jslib/services';
 
 export class HtmlStorageService implements StorageService {
     private localStorageKeys = new Set(['appId', 'anonymousAppId', 'rememberedEmail', 'passwordGenerationOptions',
-        ConstantsService.disableFaviconKey, 'rememberEmail', 'enableGravatars', ConstantsService.localeKey,
+        ConstantsService.disableFaviconKey, 'rememberEmail', 'enableGravatars', 'enableUIScaling', ConstantsService.localeKey,
         ConstantsService.autoConfirmFingerprints, ConstantsService.vaultTimeoutKey,
         ConstantsService.vaultTimeoutActionKey]);
     private localStorageStartsWithKeys = ['twoFactorToken_', ConstantsService.collapsedGroupingsKey + '_'];