purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2024-10-30 01:08:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

(pages/settings) Moved titles to the same line with sidebar toggle button + small alignment tweaks

Browse Source
This commit is contained in:
sercan 2021-05-12 15:49:36 +03:00
parent 6d1dee8d0d
commit 44e7401310
7 changed files with 67 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/modules/admin/pages/settings/account/account.component.html
View File

@ -1,12 +1,8 @@
<div class="w-full max-w-3xl">
<!-- Title -->
<div class="text-3xl font-bold tracking-tight leading-none">Account</div>
<!-- Form -->
<form
class="mt-8"
[formGroup]="accountForm">
<form [formGroup]="accountForm">
<!-- Section -->
<div class="w-full">
<div class="text-xl">Profile</div>
@ -81,7 +77,7 @@
</div>
<!-- Divider -->
<div class="mt-12 mb-10 border-t"></div>
<div class="my-10 border-t"></div>
<!-- Section -->
<div class="w-full">
@ -153,7 +149,7 @@
</div>
<!-- Divider -->
<div class="mt-12 mb-10 border-t"></div>
<div class="mt-11 mb-10 border-t"></div>
<!-- Actions -->
<div class="flex items-center justify-end">

11
src/app/modules/admin/pages/settings/notifications/notifications.component.html
View File

@ -1,12 +1,7 @@
<div class="w-full max-w-3xl">
<!-- Title -->
<div class="text-3xl font-bold tracking-tight leading-none">Notifications</div>
<!-- Form -->
<form
class="mt-8"
[formGroup]="notificationsForm">
<form [formGroup]="notificationsForm">
<!-- Section -->
<div class="w-full text-xl">Alerts</div>
@ -63,7 +58,7 @@
</div>
<!-- Divider -->
<div class="mt-12 mb-10 border-t"></div>
<div class="my-10 border-t"></div>
<!-- Section -->
<div class="w-full text-xl">Account Activity</div>
@ -128,7 +123,7 @@
</div>
<!-- Divider -->
<div class="mt-12 mb-10 border-t"></div>
<div class="my-10 border-t"></div>
<!-- Actions -->
<div class="flex items-center justify-end">

10
src/app/modules/admin/pages/settings/plan-billing/plan-billing.component.html
View File

@ -1,12 +1,8 @@
<div class="w-full max-w-3xl">
<!-- Title -->
<div class="text-3xl font-bold tracking-tight leading-none">Plan & Billing</div>
<!-- Form -->
<form
class="mt-8"
[formGroup]="planBillingForm">
<form [formGroup]="planBillingForm">
<!-- Section -->
<div class="w-full">
<div class="text-xl">Change your plan</div>
@ -146,7 +142,7 @@
</div>
<!-- Divider -->
<div class="mt-12 mb-10 border-t"></div>
<div class="mt-11 mb-10 border-t"></div>
<!-- Actions -->
<div class="flex items-center justify-end">

12
src/app/modules/admin/pages/settings/security/security.component.html
View File

@ -1,12 +1,8 @@
<div class="w-full max-w-3xl">
<!-- Title -->
<div class="text-3xl font-bold tracking-tight leading-none">Security</div>
<!-- Form -->
<form
class="mt-8"
[formGroup]="securityForm">
<form [formGroup]="securityForm">
<!-- Section -->
<div class="w-full">
<div class="text-xl">Change your password</div>
@ -45,7 +41,7 @@
</div>
<!-- Divider -->
<div class="mt-12 mb-10 border-t"></div>
<div class="my-10 border-t"></div>
<!-- Section -->
<div class="w-full">
@ -90,7 +86,7 @@
</div>
<!-- Divider -->
<div class="mt-12 mb-10 border-t"></div>
<div class="my-10 border-t"></div>
<!-- Actions -->
<div class="flex items-center justify-end">

80
src/app/modules/admin/pages/settings/settings.component.html
View File

@ -1,6 +1,6 @@
<div class="absolute inset-0 flex flex-col min-w-0 overflow-hidden">
<div class="flex flex-col min-w-0 sm:absolute sm:inset-0 sm:overflow-hidden">
<mat-drawer-container class="flex-auto h-full">
<mat-drawer-container class="flex-auto sm:h-full">
<!-- Drawer -->
<mat-drawer
@ -53,46 +53,50 @@
<mat-drawer-content class="flex flex-col">
<!-- Main -->
<div class="flex-auto p-6 md:p-8 lg:p-12">
<div class="flex-auto px-6 pt-9 pb-12 md:p-8 md:pb-12 lg:p-12">
<!-- Drawer toggle -->
<button
class="lg:hidden mb-4 -ml-2"
mat-icon-button
(click)="drawer.toggle()">
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
</button>
<!-- Panel header -->
<div class="flex items-center">
<!-- Drawer toggle -->
<button
class="lg:hidden -ml-2"
mat-icon-button
(click)="drawer.toggle()">
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
</button>
<!-- Panel title -->
<div class="ml-2 lg:ml-0 text-3xl font-bold tracking-tight leading-none">
{{getPanelInfo(selectedPanel).title}}
</div>
</div>
<!-- Load settings panel -->
<ng-container [ngSwitch]="selectedPanel">
<!-- Account -->
<ng-container *ngSwitchCase="'account'">
<settings-account></settings-account>
<div class="mt-8">
<ng-container [ngSwitch]="selectedPanel">
<!-- Account -->
<ng-container *ngSwitchCase="'account'">
<settings-account></settings-account>
</ng-container>
<!-- Security -->
<ng-container *ngSwitchCase="'security'">
<settings-security></settings-security>
</ng-container>
<!-- Plan & Billing -->
<ng-container *ngSwitchCase="'plan-billing'">
<settings-plan-billing></settings-plan-billing>
</ng-container>
<!-- Notifications -->
<ng-container *ngSwitchCase="'notifications'">
<settings-notifications></settings-notifications>
</ng-container>
<!-- Team -->
<ng-container *ngSwitchCase="'team'">
<settings-team></settings-team>
</ng-container>
</ng-container>
<!-- Security -->
<ng-container *ngSwitchCase="'security'">
<settings-security></settings-security>
</ng-container>
<!-- Plan & Billing -->
<ng-container *ngSwitchCase="'plan-billing'">
<settings-plan-billing></settings-plan-billing>
</ng-container>
<!-- Notifications -->
<ng-container *ngSwitchCase="'notifications'">
<settings-notifications></settings-notifications>
</ng-container>
<!-- Team -->
<ng-container *ngSwitchCase="'team'">
<settings-team></settings-team>
</ng-container>
</ng-container>
</div>
</div>

10
src/app/modules/admin/pages/settings/settings.component.ts
View File

@ -124,6 +124,16 @@ export class SettingsComponent implements OnInit, OnDestroy
}
}
/**
* Get the details of the panel
*
* @param id
*/
getPanelInfo(id: string): any
{
return this.panels.find((panel) => panel.id === id);
}
/**
* Track by function for ngFor loops
*

5
src/app/modules/admin/pages/settings/team/team.component.html
View File

@ -1,10 +1,7 @@
<div class="w-full max-w-3xl">
<!-- Title -->
<div class="text-3xl font-bold tracking-tight leading-none">Team</div>
<!-- Add team member -->
<div class="w-full mt-8">
<div class="w-full">
<mat-form-field
class="fuse-mat-no-subscript w-full"
[floatLabel]="'always'">