1
0
mirror of https://github.com/bitwarden/browser.git synced 2024-09-06 00:48:08 +02:00

Update HTML and TS scripts for UI scaling

This commit is contained in:
syntaxerror752 2020-05-29 23:08:03 +10:00
parent eb5ad7c6dc
commit 674c583881
16 changed files with 41 additions and 15 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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()"

View File

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

View File

@ -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 + '_'];