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

Merge pull request #1821 from bitwarden/reorder-options-screen

Browse Source 
Organize Options page and add headings
This commit is contained in:
Thomas Rittson 2021-05-06 06:31:15 +10:00 committed by GitHub
commit 88adf4b144
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 167 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -902,7 +902,7 @@
"message": "Automatic TOTP Copy after Page Load"
},
"enableAutoTotpCopyOnAutoFillDesc": {
"message": "If Auto-fill On Page Load is enabled, and your login has an authenticator key attached to it, the TOTP verification code is automatically copied to your clipboard after loading the web page."
"message": "If Auto-fill On Page Load is enabled, the TOTP verification code is automatically copied to your clipboard after loading the web page. This is overridden by Disable Automatic TOTP Copy."
},
"experimentalFeature": {
"message": "This is currently an experimental feature. Use at your own risk."

9
src/popup/scss/box.scss
View File

@ -164,6 +164,15 @@
flex-direction: column;
}
.box-section-divider {
border-top: 1px solid #000000;
padding-top: 10px;
@include themify($themes) {
border-color: themed('borderColor');
}
}
.box-content-row {
display: block;
padding: 10px 15px;

109
src/popup/settings/options.component.html
View File

@ -12,30 +12,13 @@
</header>
<content>
<div class="box">
<div class="box-content">
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="autofill">{{'enableAutoFillOnPageLoad' | i18n}}</label>
<input id="autofill" type="checkbox" (change)="updateAutoFillOnPageLoad()"
[(ngModel)]="enableAutoFillOnPageLoad">
</div>
</div>
<div class="box-footer">
{{'enableAutoFillOnPageLoadDesc' | i18n}}
<b>{{'warning' | i18n}}</b>: {{'experimentalFeature' | i18n}}
</div>
</div>
<div class="box">
<div class="box-content">
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="autoCopyTotp">{{'enableAutoTotpCopyOnAutoFill' | i18n}}</label>
<input id="autoCopyTotp" type="checkbox" (change)="updateAutoTotpCopyOnAutoFill()"
[(ngModel)]="enableAutoTotpCopyOnAutoFill" [disabled]="!enableAutoFillOnPageLoad">
</div>
</div>
<div class="box-footer">
{{'enableAutoTotpCopyOnAutoFillDesc' | i18n}}
<div class="box-header-expandable" (click)="showGeneral = !showGeneral">
General
<i *ngIf="!showGeneral" class="fa fa-chevron-down fa-sm icon"></i>
<i *ngIf="showGeneral" class="fa fa-chevron-up fa-sm icon"></i>
</div>
</div>
<ng-container *ngIf="showGeneral">
<div class="box">
<div class="box-content">
<div class="box-content-row" appBoxRow>
@ -69,25 +52,6 @@
</div>
<div class="box-footer">{{'disableAutoTotpCopyDesc' | i18n}}</div>
</div>
<div class="box">
<div class="box-content">
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="dontShowCards">{{'dontShowCardsCurrentTab' | i18n}}</label>
<input id="dontShowCards" type="checkbox" (change)="updateShowCards()" [(ngModel)]="dontShowCards">
</div>
</div>
<div class="box-footer">{{'dontShowCardsCurrentTabDesc' | i18n}}</div>
</div>
<div class="box">
<div class="box-content">
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="dontShowIdentities">{{'dontShowIdentitiesCurrentTab' | i18n}}</label>
<input id="dontShowIdentities" type="checkbox" (change)="updateShowIdentities()"
[(ngModel)]="dontShowIdentities">
</div>
</div>
<div class="box-footer">{{'dontShowIdentitiesCurrentTabDesc' | i18n}}</div>
</div>
<div class="box">
<div class="box-content">
<div class="box-content-row box-content-row-checkbox" appBoxRow>
@ -118,6 +82,34 @@
</div>
<div class="box-footer">{{'disableContextMenuItemDesc' | i18n}}</div>
</div>
</ng-container>
<div class="box box-section-divider">
<div class="box-header-expandable" (click)="showDisplay = !showDisplay">
Display
<i *ngIf="!showDisplay" class="fa fa-chevron-down fa-sm icon"></i>
<i *ngIf="showDisplay" class="fa fa-chevron-up fa-sm icon"></i>
</div>
</div>
<ng-container *ngIf="showDisplay">
<div class="box">
<div class="box-content">
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="dontShowCards">{{'dontShowCardsCurrentTab' | i18n}}</label>
<input id="dontShowCards" type="checkbox" (change)="updateShowCards()" [(ngModel)]="dontShowCards">
</div>
</div>
<div class="box-footer">{{'dontShowCardsCurrentTabDesc' | i18n}}</div>
</div>
<div class="box">
<div class="box-content">
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="dontShowIdentities">{{'dontShowIdentitiesCurrentTab' | i18n}}</label>
<input id="dontShowIdentities" type="checkbox" (change)="updateShowIdentities()"
[(ngModel)]="dontShowIdentities">
</div>
</div>
<div class="box-footer">{{'dontShowIdentitiesCurrentTabDesc' | i18n}}</div>
</div>
<div class="box">
<div class="box-content">
<div class="box-content-row box-content-row-checkbox" appBoxRow>
@ -147,4 +139,39 @@
</div>
<div class="box-footer">{{'themeDesc' | i18n}}</div>
</div>
</ng-container>
<div class="box box-section-divider">
<div class="box-header-expandable" (click)="showAutofill = !showAutofill">
Autofill
<i *ngIf="!showAutofill" class="fa fa-chevron-down fa-sm icon"></i>
<i *ngIf="showAutofill" class="fa fa-chevron-up fa-sm icon"></i>
</div>
</div>
<ng-container *ngIf="showAutofill">
<div class="box">
<div class="box-content">
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="autofill">{{'enableAutoFillOnPageLoad' | i18n}}</label>
<input id="autofill" type="checkbox" (change)="updateAutoFillOnPageLoad()"
[(ngModel)]="enableAutoFillOnPageLoad">
</div>
</div>
<div class="box-footer">
{{'enableAutoFillOnPageLoadDesc' | i18n}}
<b>{{'warning' | i18n}}</b>: {{'experimentalFeature' | i18n}}
</div>
</div>
<div class="box">
<div class="box-content">
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="autoCopyTotp">{{'enableAutoTotpCopyOnAutoFill' | i18n}}</label>
<input id="autoCopyTotp" type="checkbox" (change)="updateAutoTotpCopyOnAutoFill()"
[(ngModel)]="enableAutoTotpCopyOnAutoFill" [disabled]="!enableAutoFillOnPageLoad">
</div>
</div>
<div class="box-footer">
{{'enableAutoTotpCopyOnAutoFillDesc' | i18n}}
</div>
</div>
</ng-container>
</content>

3
src/popup/settings/options.component.ts
View File

@ -36,6 +36,9 @@ export class OptionsComponent implements OnInit {
uriMatchOptions: any[];
clearClipboard: number;
clearClipboardOptions: any[];
showGeneral: boolean = true;
showAutofill: boolean = true;
showDisplay: boolean = true;
constructor(private messagingService: MessagingService, private storageService: StorageService,
private stateService: StateService, private totpService: TotpService, i18nService: I18nService) {