purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-09 20:15:07 +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"> <div class="w-full max-w-3xl">
<!-- Title -->
<div class="text-3xl font-bold tracking-tight leading-none">Account</div>
<!-- Form --> <!-- Form -->
<form <form [formGroup]="accountForm">
class="mt-8"
[formGroup]="accountForm">
<!-- Section --> <!-- Section -->
<div class="w-full"> <div class="w-full">
<div class="text-xl">Profile</div> <div class="text-xl">Profile</div>
@ -81,7 +77,7 @@
</div> </div>
<!-- Divider --> <!-- Divider -->
<div class="mt-12 mb-10 border-t"></div> <div class="my-10 border-t"></div>
<!-- Section --> <!-- Section -->
<div class="w-full"> <div class="w-full">
@ -153,7 +149,7 @@
</div> </div>
<!-- Divider --> <!-- Divider -->
<div class="mt-12 mb-10 border-t"></div> <div class="mt-11 mb-10 border-t"></div>
<!-- Actions --> <!-- Actions -->
<div class="flex items-center justify-end"> <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"> <div class="w-full max-w-3xl">
<!-- Title -->
<div class="text-3xl font-bold tracking-tight leading-none">Notifications</div>
<!-- Form --> <!-- Form -->
<form <form [formGroup]="notificationsForm">
class="mt-8"
[formGroup]="notificationsForm">
<!-- Section --> <!-- Section -->
<div class="w-full text-xl">Alerts</div> <div class="w-full text-xl">Alerts</div>
@ -63,7 +58,7 @@
</div> </div>
<!-- Divider --> <!-- Divider -->
<div class="mt-12 mb-10 border-t"></div> <div class="my-10 border-t"></div>
<!-- Section --> <!-- Section -->
<div class="w-full text-xl">Account Activity</div> <div class="w-full text-xl">Account Activity</div>
@ -128,7 +123,7 @@
</div> </div>
<!-- Divider --> <!-- Divider -->
<div class="mt-12 mb-10 border-t"></div> <div class="my-10 border-t"></div>
<!-- Actions --> <!-- Actions -->
<div class="flex items-center justify-end"> <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"> <div class="w-full max-w-3xl">
<!-- Title -->
<div class="text-3xl font-bold tracking-tight leading-none">Plan & Billing</div>
<!-- Form --> <!-- Form -->
<form <form [formGroup]="planBillingForm">
class="mt-8"
[formGroup]="planBillingForm">
<!-- Section --> <!-- Section -->
<div class="w-full"> <div class="w-full">
<div class="text-xl">Change your plan</div> <div class="text-xl">Change your plan</div>
@ -146,7 +142,7 @@
</div> </div>
<!-- Divider --> <!-- Divider -->
<div class="mt-12 mb-10 border-t"></div> <div class="mt-11 mb-10 border-t"></div>
<!-- Actions --> <!-- Actions -->
<div class="flex items-center justify-end"> <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"> <div class="w-full max-w-3xl">
<!-- Title -->
<div class="text-3xl font-bold tracking-tight leading-none">Security</div>
<!-- Form --> <!-- Form -->
<form <form [formGroup]="securityForm">
class="mt-8"
[formGroup]="securityForm">
<!-- Section --> <!-- Section -->
<div class="w-full"> <div class="w-full">
<div class="text-xl">Change your password</div> <div class="text-xl">Change your password</div>
@ -45,7 +41,7 @@
</div> </div>
<!-- Divider --> <!-- Divider -->
<div class="mt-12 mb-10 border-t"></div> <div class="my-10 border-t"></div>
<!-- Section --> <!-- Section -->
<div class="w-full"> <div class="w-full">
@ -90,7 +86,7 @@
</div> </div>
<!-- Divider --> <!-- Divider -->
<div class="mt-12 mb-10 border-t"></div> <div class="my-10 border-t"></div>
<!-- Actions --> <!-- Actions -->
<div class="flex items-center justify-end"> <div class="flex items-center justify-end">

28
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 --> <!-- Drawer -->
<mat-drawer <mat-drawer
@ -53,46 +53,50 @@
<mat-drawer-content class="flex flex-col"> <mat-drawer-content class="flex flex-col">
<!-- Main --> <!-- 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">
<!-- Panel header -->
<div class="flex items-center">
<!-- Drawer toggle --> <!-- Drawer toggle -->
<button <button
class="lg:hidden mb-4 -ml-2" class="lg:hidden -ml-2"
mat-icon-button mat-icon-button
(click)="drawer.toggle()"> (click)="drawer.toggle()">
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon> <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
</button> </button>
<!-- Load settings panel --> <!-- Panel title -->
<ng-container [ngSwitch]="selectedPanel"> <div class="ml-2 lg:ml-0 text-3xl font-bold tracking-tight leading-none">
{{getPanelInfo(selectedPanel).title}}
</div>
</div>
<!-- Load settings panel -->
<div class="mt-8">
<ng-container [ngSwitch]="selectedPanel">
<!-- Account --> <!-- Account -->
<ng-container *ngSwitchCase="'account'"> <ng-container *ngSwitchCase="'account'">
<settings-account></settings-account> <settings-account></settings-account>
</ng-container> </ng-container>
<!-- Security --> <!-- Security -->
<ng-container *ngSwitchCase="'security'"> <ng-container *ngSwitchCase="'security'">
<settings-security></settings-security> <settings-security></settings-security>
</ng-container> </ng-container>
<!-- Plan & Billing --> <!-- Plan & Billing -->
<ng-container *ngSwitchCase="'plan-billing'"> <ng-container *ngSwitchCase="'plan-billing'">
<settings-plan-billing></settings-plan-billing> <settings-plan-billing></settings-plan-billing>
</ng-container> </ng-container>
<!-- Notifications --> <!-- Notifications -->
<ng-container *ngSwitchCase="'notifications'"> <ng-container *ngSwitchCase="'notifications'">
<settings-notifications></settings-notifications> <settings-notifications></settings-notifications>
</ng-container> </ng-container>
<!-- Team --> <!-- Team -->
<ng-container *ngSwitchCase="'team'"> <ng-container *ngSwitchCase="'team'">
<settings-team></settings-team> <settings-team></settings-team>
</ng-container> </ng-container>
</ng-container> </ng-container>
</div>
</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 * 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"> <div class="w-full max-w-3xl">
<!-- Title -->
<div class="text-3xl font-bold tracking-tight leading-none">Team</div>
<!-- Add team member --> <!-- Add team member -->
<div class="w-full mt-8"> <div class="w-full">
<mat-form-field <mat-form-field
class="fuse-mat-no-subscript w-full" class="fuse-mat-no-subscript w-full"
[floatLabel]="'always'"> [floatLabel]="'always'">