Added toggle full width function

Added toggle full width function.
Added messaging service to trigger function.
Added CSS to keep login box the same size.

src/app/app.component.ts

@@ -35,6 +35,7 @@ import { CryptoService } from 'jslib/abstractions/crypto.service';
 import { EventService } from 'jslib/abstractions/event.service';
 import { FolderService } from 'jslib/abstractions/folder.service';
 import { I18nService } from 'jslib/abstractions/i18n.service';
+import { MessagingService } from 'jslib/abstractions/messaging.service';
 import { NotificationsService } from 'jslib/abstractions/notifications.service';
 import { PasswordGenerationService } from 'jslib/abstractions/passwordGeneration.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
@@ -69,6 +70,7 @@ export class AppComponent implements OnDestroy, OnInit {
     private lastActivity: number = null;
     private idleTimer: number = null;
     private isIdle = false;
+    private enableFullWidth = false;
 
     constructor(private angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics,
         private broadcasterService: BroadcasterService, private userService: UserService,
@@ -83,7 +85,7 @@ export class AppComponent implements OnDestroy, OnInit {
         private sanitizer: DomSanitizer, private searchService: SearchService,
         private notificationsService: NotificationsService, private routerService: RouterService,
         private stateService: StateService, private eventService: EventService,
-        private policyService: PolicyService) { }
+        private policyService: PolicyService, private messagingService: MessagingService) { }
 
     ngOnInit() {
         this.ngZone.runOutsideAngular(() => {
@@ -148,6 +150,10 @@ export class AppComponent implements OnDestroy, OnInit {
                             properties: { label: message.label },
                         });
                         break;
+                    case 'setFullWidth':
+                        this.enableFullWidth = await this.storageService.get<boolean>('enableFullWidth');
+                        this.setFullWidth();
+                        break;
                     default:
                         break;
                 }
@@ -166,6 +172,7 @@ export class AppComponent implements OnDestroy, OnInit {
                 }
             }
         });
+        this.messagingService.send('setFullWidth');
     }
 
     ngOnDestroy() {
@@ -262,4 +269,12 @@ export class AppComponent implements OnDestroy, OnInit {
             this.notificationsService.reconnectFromActivity();
         }
     }
+
+    private async setFullWidth() {
+        if (this.enableFullWidth) {
+            document.body.classList.add('full-width');
+        } else {
+            document.body.classList.remove('full-width');
+        }
+    }
 }

src/app/settings/options.component.ts

@@ -7,6 +7,7 @@ import { ToasterService } from 'angular2-toaster';
 import { Angulartics2 } from 'angulartics2';
 
 import { I18nService } from 'jslib/abstractions/i18n.service';
+import { MessagingService } from 'jslib/abstractions/messaging.service';
 import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
 import { StateService } from 'jslib/abstractions/state.service';
 import { StorageService } from 'jslib/abstractions/storage.service';
@@ -35,7 +36,7 @@ export class OptionsComponent implements OnInit {
     constructor(private storageService: StorageService, private stateService: StateService,
         private analytics: Angulartics2, private i18nService: I18nService,
         private toasterService: ToasterService, private vaultTimeoutService: VaultTimeoutService,
-        private platformUtilsService: PlatformUtilsService) {
+        private platformUtilsService: PlatformUtilsService, private messagingService: MessagingService) {
         this.vaultTimeouts = [
             { name: i18nService.t('oneMinute'), value: 1 },
             { name: i18nService.t('fiveMinutes'), value: 5 },
@@ -80,6 +81,7 @@ export class OptionsComponent implements OnInit {
         await this.stateService.save('enableGravatars', this.enableGravatars);
         await this.storageService.save('enableFullWidth', this.enableFullWidth);
         await this.stateService.save('enableFullWidth', this.enableFullWidth);
+        this.messagingService.send('setFullWidth');
         await this.storageService.save(ConstantsService.localeKey, this.locale);
         this.analytics.eventTrack.next({ action: 'Saved Options' });
         if (this.locale !== this.startingLocale) {

src/locales/en/messages.json

@@ -1045,7 +1045,7 @@
     "message": "Use avatar images loaded from gravatar.com."
   },
   "enableFullWidth": {
-    "message": "Enable Full Width",
+    "message": "Enable Full Width Layout",
     "description": "Allows scaling the web vault UI's width"
   },
   "enableFullWidthDesc": {

src/scss/styles.scss

@@ -123,6 +123,18 @@ body {
     &.layout_frontend {
         background-color: #ecf0f5;
     }
+
+    &.full-width {
+        .container {
+            min-width: 980px;
+            width: 90%;
+            .row {
+                .col-5 {
+                    max-width: 416px;
+                }
+            }
+        }
+    }
 }
 
 .page-header, .secondary-header {
@@ -192,10 +204,6 @@ input, select, textarea {
     max-width: none !important;
     margin: 0 auto;
     padding: 0;
-    &.full-width {
-        min-width: 980px;
-        width: 90%;
-    }
 }
 
 .page-content {

src/services/htmlStorage.service.ts

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