Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-23 11:56:00 +01:00
Code Issues Projects Releases Wiki Activity

Added toggle full width function

Browse Source 
Added toggle full width function.
Added messaging service to trigger function.
Added CSS to keep login box the same size.
This commit is contained in:
syntaxerror752 2020-05-30 18:30:35 +10:00
parent f36bba6406
commit 22a00b2341
5 changed files with 35 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/app/app.component.ts
View File

@ -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');
}
}
}

4
src/app/settings/options.component.ts
View File

@ -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) {

2
src/locales/en/messages.json
View File

@ -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": {

16
src/scss/styles.scss
View File

@ -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 {

6
src/services/htmlStorage.service.ts
View File

@ -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) { }