diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 2c694d95fe..36d7c652f0 100644 --- a/src/app/app.component.ts +++ b/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('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'); + } + } } diff --git a/src/app/settings/options.component.ts b/src/app/settings/options.component.ts index 799d711dad..23de0086ad 100644 --- a/src/app/settings/options.component.ts +++ b/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) { diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json index 51557af40f..5422ff76f6 100644 --- a/src/locales/en/messages.json +++ b/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": { diff --git a/src/scss/styles.scss b/src/scss/styles.scss index 564c08dd5b..2bb8fbc27e 100644 --- a/src/scss/styles.scss +++ b/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 { diff --git a/src/services/htmlStorage.service.ts b/src/services/htmlStorage.service.ts index 3fa7e89d19..88870c84fb 100644 --- a/src/services/htmlStorage.service.ts +++ b/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) { }