Merge pull request #543 from syntax-error752/feature/UIscaling

Update CSS to allow for larger screens.

src/app/app.component.ts

@@ -69,6 +69,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,
@@ -148,6 +149,9 @@ export class AppComponent implements OnDestroy, OnInit {
                             properties: { label: message.label },
                         });
                         break;
+                    case 'setFullWidth':
+                        this.setFullWidth();
+                        break;
                     default:
                         break;
                 }
@@ -166,6 +170,7 @@ export class AppComponent implements OnDestroy, OnInit {
                 }
             }
         });
+        this.setFullWidth();
     }
 
     ngOnDestroy() {
@@ -262,4 +267,13 @@ export class AppComponent implements OnDestroy, OnInit {
             this.notificationsService.reconnectFromActivity();
         }
     }
+
+    private async setFullWidth() {
+        this.enableFullWidth = await this.storageService.get<boolean>('enableFullWidth');
+        if (this.enableFullWidth) {
+            document.body.classList.add('full-width');
+        } else {
+            document.body.classList.remove('full-width');
+        }
+    }
 }

src/app/settings/options.component.html

@@ -76,6 +76,16 @@
             </a>
         </div>
         <small class="form-text text-muted">{{'enableGravatarsDesc' | i18n}}</small>
+    </div>
+	<div class="form-group">
+        <div class="form-check">
+            <input class="form-check-input" type="checkbox" id="enableFullWidth" name="enableFullWidth"
+                [(ngModel)]="enableFullWidth">
+            <label class="form-check-label" for="enableFullWidth">
+                {{'enableFullWidth' | i18n}}
+            </label>
+        </div>
+        <small class="form-text text-muted">{{'enableFullWidthDesc' | i18n}}</small>
     </div>
     <button type="submit" class="btn btn-primary">
         {{'save' | i18n}}

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';
@@ -25,6 +26,7 @@ export class OptionsComponent implements OnInit {
     vaultTimeoutAction: string = 'lock';
     disableIcons: boolean;
     enableGravatars: boolean;
+    enableFullWidth: boolean;
     locale: string;
     vaultTimeouts: any[];
     localeOptions: any[];
@@ -34,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 },
@@ -66,6 +68,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.enableFullWidth = await this.storageService.get<boolean>('enableFullWidth');
         this.locale = this.startingLocale = await this.storageService.get<string>(ConstantsService.localeKey);
     }
 
@@ -76,6 +79,9 @@ 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('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

@@ -1044,6 +1044,13 @@
   "enableGravatarsDesc": {
     "message": "Use avatar images loaded from gravatar.com."
   },
+  "enableFullWidth": {
+    "message": "Enable Full Width Layout",
+    "description": "Allows scaling the web vault UI's width"
+  },
+  "enableFullWidthDesc": {
+    "message": "Allows expanding the web vault view to fill the full width of the browser window."
+  },
   "default": {
     "message": "Default"
   },

src/scss/styles.scss

@@ -123,6 +123,13 @@ body {
     &.layout_frontend {
         background-color: #ecf0f5;
     }
+
+    &.full-width:not(.layout_frontend) {
+        .container {
+            min-width: 980px;
+            width: 90%;
+        }
+    }
 }
 
 .page-header, .secondary-header {

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', 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) { }