sudacode/ghostfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Improve settings selectors layout (#205)

Browse Source
This commit is contained in:
Thomas 2021-07-10 18:17:17 +02:00 committed by GitHub
parent f403807f2d
commit 0774ca91a1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 48 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
apps/client/src/app/pages/account/account-page.html
View File

@ -16,14 +16,19 @@
<div class="w-50" i18n>Membership</div> <div class="w-50" i18n>Membership</div>
<div class="w-50"> <div class="w-50">
<div class="align-items-center d-flex mb-1"> <div class="align-items-center d-flex mb-1">
{{ user.subscription.type }} {{ user?.subscription?.type }}
<ion-icon
*ngIf="user?.subscription?.type === 'Premium'"
class="ml-1 text-muted"
name="diamond-outline"
></ion-icon>
</div> </div>
<div *ngIf="user.subscription.expiresAt"> <div *ngIf="user?.subscription?.expiresAt">
Valid until {{ user.subscription.expiresAt | date: Valid until {{ user?.subscription?.expiresAt | date:
defaultDateFormat }} defaultDateFormat }}
</div> </div>
<div <div
*ngIf="hasPermissionForSubscription && !user.subscription.expiresAt" *ngIf="hasPermissionForSubscription && !user?.subscription?.expiresAt"
> >
<button <button
color="primary" color="primary"
@ -46,45 +51,54 @@
</div> </div>
</div> </div>
<div class="d-flex mt-4 py-1"> <div class="d-flex mt-4 py-1">
<div class="pt-4 w-50" i18n>Settings</div> <form #changeUserSettingsForm="ngForm" class="w-100">
<div class="w-50"> <div class="d-flex mb-2">
<form #changeUserSettingsForm="ngForm"> <div class="align-items-center d-flex pt-1 w-50" i18n>
<mat-form-field appearance="outline" class="mb-3 w-100"> Base Currency
<mat-label i18n>Base Currency</mat-label> </div>
<mat-select <div class="w-50">
name="baseCurrency" <mat-form-field appearance="outline" class="w-100">
[disabled]="!hasPermissionToUpdateUserSettings"
[value]="user.settings.baseCurrency"
(selectionChange)="onChangeUserSettings('baseCurrency', $event.value)"
>
<mat-option
*ngFor="let currency of currencies"
[value]="currency"
>{{ currency }}</mat-option
>
</mat-select>
</mat-form-field>
<div class="align-items-center d-flex overflow-hidden">
<mat-form-field appearance="outline" class="flex-grow-1">
<mat-label i18n>View Mode</mat-label>
<mat-select <mat-select
name="viewMode" name="baseCurrency"
[disabled]="!hasPermissionToUpdateViewMode" [disabled]="!hasPermissionToUpdateUserSettings"
[value]="user.settings.viewMode" [value]="user.settings.baseCurrency"
(selectionChange)="onChangeUserSettings('viewMode', $event.value)" (selectionChange)="onChangeUserSettings('baseCurrency', $event.value)"
> >
<mat-option value="DEFAULT">Default</mat-option> <mat-option
<mat-option value="ZEN">Zen</mat-option> *ngFor="let currency of currencies"
[value]="currency"
>{{ currency }}</mat-option
>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div>
</div>
<div class="d-flex">
<div class="align-items-center d-flex pt-1 w-50" i18n>
View Mode
<ion-icon <ion-icon
*ngIf="!hasPermissionToUpdateViewMode" *ngIf="!hasPermissionToUpdateViewMode"
class="h5 mb-0 mx-3 text-muted" class="mx-1 text-muted"
name="diamond-outline" name="diamond-outline"
></ion-icon> ></ion-icon>
</div> </div>
</form> <div class="w-50">
</div> <div class="align-items-center d-flex overflow-hidden">
<mat-form-field appearance="outline" class="w-100">
<mat-select
name="viewMode"
[disabled]="!hasPermissionToUpdateViewMode"
[value]="user.settings.viewMode"
(selectionChange)="onChangeUserSettings('viewMode', $event.value)"
>
<mat-option value="DEFAULT">Default</mat-option>
<mat-option value="ZEN">Zen</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
</form>
</div> </div>
<div class="align-items-center d-flex mt-4 py-1"> <div class="align-items-center d-flex mt-4 py-1">
<div class="w-50" i18n>Sign in with fingerprint</div> <div class="w-50" i18n>Sign in with fingerprint</div>