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

(ui/page-layouts) Added tabbed version of Simple Fullwidth page layout

Browse Source
This commit is contained in:
sercan 2021-06-09 11:41:39 +03:00
parent bb9023f9df
commit bafa9adc01
14 changed files with 468 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/mock-api/common/navigation/data.ts
View File

@ -868,10 +868,16 @@ export const defaultNavigation: FuseNavigationItem[] = [
type : 'collapsable',
children: [
{
id : 'user-interface.page-layouts.simple.fullwidth',
title: 'Fullwidth',
id : 'user-interface.page-layouts.simple.fullwidth-1',
title: 'Fullwidth #1',
type : 'basic',
link : '/ui/page-layouts/simple/fullwidth'
link : '/ui/page-layouts/simple/fullwidth-1'
},
{
id : 'user-interface.page-layouts.simple.fullwidth-2',
title: 'Fullwidth #2',
type : 'basic',
link : '/ui/page-layouts/simple/fullwidth-2'
},
{
id : 'user-interface.page-layouts.simple.left-sidebar-1',

111
src/app/modules/admin/ui/page-layouts/page-layouts.module.ts
View File

@ -36,9 +36,13 @@ import { CardedRightSidebar1PageScrollComponent } from 'app/modules/admin/ui/pag
import { CardedRightSidebar1ContentScrollComponent } from 'app/modules/admin/ui/page-layouts/carded/right-sidebar-1/content-scroll/right-sidebar-1.component';
import { CardedRightSidebar2NormalScrollComponent } from 'app/modules/admin/ui/page-layouts/carded/right-sidebar-2/normal-scroll/right-sidebar-2.component';
import { SimpleFullwidthNormalScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/fullwidth/normal-scroll/fullwidth.component';
import { SimpleFullwidthPageScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/fullwidth/page-scroll/fullwidth.component';
import { SimpleFullwidthContentScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/fullwidth/content-scroll/fullwidth.component';
import { SimpleFullwidth1NormalScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/fullwidth-1/normal-scroll/fullwidth-1.component';
import { SimpleFullwidth1PageScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/fullwidth-1/page-scroll/fullwidth-1.component';
import { SimpleFullwidth1ContentScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/fullwidth-1/content-scroll/fullwidth-1.component';
import { SimpleFullwidth2NormalScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/fullwidth-2/normal-scroll/fullwidth-2.component';
import { SimpleFullwidth2PageScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/fullwidth-2/page-scroll/fullwidth-2.component';
import { SimpleFullwidth2ContentScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/fullwidth-2/content-scroll/fullwidth-2.component';
import { SimpleLeftSidebar1NormalScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/left-sidebar-1/normal-scroll/left-sidebar-1.component';
import { SimpleLeftSidebar1PageScrollComponent } from 'app/modules/admin/ui/page-layouts/simple/left-sidebar-1/page-scroll/left-sidebar-1.component';
@ -277,8 +281,8 @@ export const overviews = {
}
},
simple: {
fullwidth : {
title : 'Fullwidth Layout',
fullwidth1 : {
title : 'Fullwidth #1',
description : 'Layout that spans the entire width of the content area with a dedicated header and 3 different scroll modes.',
availableOptions: [
{
@ -298,18 +302,54 @@ export const overviews = {
options : {
normalScroll : {
description: 'No scrolling area manipulations, entire viewport scrolls (body scroll).',
link : '/ui/page-layouts/simple/fullwidth/normal-scroll',
component : SimpleFullwidthNormalScrollComponent
link : '/ui/page-layouts/simple/fullwidth-1/normal-scroll',
component : SimpleFullwidth1NormalScrollComponent
},
pageScroll : {
description: 'Only the page area scrolls making the main toolbar and footer to stick to the top and bottom of the viewport respectively.',
link : '/ui/page-layouts/simple/fullwidth/page-scroll',
component : SimpleFullwidthPageScrollComponent
link : '/ui/page-layouts/simple/fullwidth-1/page-scroll',
component : SimpleFullwidth1PageScrollComponent
},
contentScroll: {
description: 'Only the content area of the page scrolls making everything else to stick into their positions.',
link : '/ui/page-layouts/simple/fullwidth/content-scroll',
component : SimpleFullwidthContentScrollComponent
link : '/ui/page-layouts/simple/fullwidth-1/content-scroll',
component : SimpleFullwidth1ContentScrollComponent
}
}
},
fullwidth2 : {
title : 'Fullwidth #2',
description : 'Layout that spans the entire width of the content area with a dedicated header, tabs and 3 different scroll modes.',
availableOptions: [
{
value: 'normalScroll',
title: 'Normal Scroll'
},
{
value: 'pageScroll',
title: 'Page Scroll'
},
{
value: 'contentScroll',
title: 'Content Scroll'
}
],
selectedOption : 'normalScroll',
options : {
normalScroll : {
description: 'No scrolling area manipulations, entire viewport scrolls (body scroll).',
link : '/ui/page-layouts/simple/fullwidth-2/normal-scroll',
component : SimpleFullwidth2NormalScrollComponent
},
pageScroll : {
description: 'Only the page area scrolls making the main toolbar and footer to stick to the top and bottom of the viewport respectively.',
link : '/ui/page-layouts/simple/fullwidth-2/page-scroll',
component : SimpleFullwidth2PageScrollComponent
},
contentScroll: {
description: 'Only the content area of the page scrolls making everything else to stick into their positions.',
link : '/ui/page-layouts/simple/fullwidth-2/content-scroll',
component : SimpleFullwidth2ContentScrollComponent
}
}
},
@ -741,7 +781,7 @@ export const routes: Route[] = [
path : 'simple',
children: [
{
path : 'fullwidth',
path : 'fullwidth-1',
children: [
{
path : '',
@ -752,20 +792,49 @@ export const routes: Route[] = [
path : 'overview',
component: LayoutOverviewComponent,
data : {
overview: overviews.simple.fullwidth
overview: overviews.simple.fullwidth1
}
},
{
path : 'normal-scroll',
component: SimpleFullwidthNormalScrollComponent
component: SimpleFullwidth1NormalScrollComponent
},
{
path : 'page-scroll',
component: SimpleFullwidthPageScrollComponent
component: SimpleFullwidth1PageScrollComponent
},
{
path : 'content-scroll',
component: SimpleFullwidthContentScrollComponent
component: SimpleFullwidth1ContentScrollComponent
}
]
},
{
path : 'fullwidth-2',
children: [
{
path : '',
pathMatch : 'full',
redirectTo: 'overview'
},
{
path : 'overview',
component: LayoutOverviewComponent,
data : {
overview: overviews.simple.fullwidth2
}
},
{
path : 'normal-scroll',
component: SimpleFullwidth2NormalScrollComponent
},
{
path : 'page-scroll',
component: SimpleFullwidth2PageScrollComponent
},
{
path : 'content-scroll',
component: SimpleFullwidth2ContentScrollComponent
}
]
},
@ -987,9 +1056,13 @@ export const routes: Route[] = [
CardedRightSidebar2ContentScrollComponent,
// Simple - Fullwidth
SimpleFullwidthNormalScrollComponent,
SimpleFullwidthPageScrollComponent,
SimpleFullwidthContentScrollComponent,
SimpleFullwidth1NormalScrollComponent,
SimpleFullwidth1PageScrollComponent,
SimpleFullwidth1ContentScrollComponent,
SimpleFullwidth2NormalScrollComponent,
SimpleFullwidth2PageScrollComponent,
SimpleFullwidth2ContentScrollComponent,
// Simple - Left sidebar
SimpleLeftSidebar1NormalScrollComponent,

0
src/app/modules/admin/ui/page-layouts/simple/fullwidth/content-scroll/fullwidth.component.html → src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/content-scroll/fullwidth-1.component.html
View File

16
src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/content-scroll/fullwidth-1.component.ts Normal file
View File

@ -0,0 +1,16 @@
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector : 'simple-fullwidth-1-content-scroll',
templateUrl : './fullwidth-1.component.html',
encapsulation: ViewEncapsulation.None
})
export class SimpleFullwidth1ContentScrollComponent
{
/**
* Constructor
*/
constructor()
{
}
}

0
src/app/modules/admin/ui/page-layouts/simple/fullwidth/normal-scroll/fullwidth.component.html → src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/normal-scroll/fullwidth-1.component.html
View File

6
src/app/modules/admin/ui/page-layouts/simple/fullwidth/content-scroll/fullwidth.component.ts → src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/normal-scroll/fullwidth-1.component.ts
View File

@ -1,11 +1,11 @@
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector : 'simple-fullwidth-content-scroll',
templateUrl : './fullwidth.component.html',
selector : 'simple-fullwidth-1-normal-scroll',
templateUrl : './fullwidth-1.component.html',
encapsulation: ViewEncapsulation.None
})
export class SimpleFullwidthContentScrollComponent
export class SimpleFullwidth1NormalScrollComponent
{
/**
* Constructor

0
src/app/modules/admin/ui/page-layouts/simple/fullwidth/page-scroll/fullwidth.component.html → src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/page-scroll/fullwidth-1.component.html
View File

6
src/app/modules/admin/ui/page-layouts/simple/fullwidth/normal-scroll/fullwidth.component.ts → src/app/modules/admin/ui/page-layouts/simple/fullwidth-1/page-scroll/fullwidth-1.component.ts
View File

@ -1,11 +1,11 @@
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector : 'simple-fullwidth-normal-scroll',
templateUrl : './fullwidth.component.html',
selector : 'simple-fullwidth-1-page-scroll',
templateUrl : './fullwidth-1.component.html',
encapsulation: ViewEncapsulation.None
})
export class SimpleFullwidthNormalScrollComponent
export class SimpleFullwidth1PageScrollComponent
{
/**
* Constructor

104
src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/content-scroll/fullwidth-2.component.html Normal file
View File

@ -0,0 +1,104 @@
<div class="absolute inset-0 flex flex-col min-w-0 overflow-hidden">
<!-- Header -->
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
<div class="flex-1 min-w-0">
<!-- Breadcrumbs -->
<div>
<div class="hidden sm:flex flex-wrap items-center font-medium">
<div>
<a class="whitespace-nowrap text-primary-500">Projects</a>
</div>
<div class="flex items-center ml-1 whitespace-nowrap">
<mat-icon
class="icon-size-5 text-secondary"
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
<a class="ml-1 text-primary-500">Weekend Project</a>
</div>
<div class="flex items-center ml-1 whitespace-nowrap">
<mat-icon
class="icon-size-5 text-secondary"
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
<span class="ml-1 text-secondary">Overview</span>
</div>
</div>
<div class="flex sm:hidden">
<a
class="inline-flex items-center -ml-1.5 text-secondary font-medium"
[routerLink]="'./..'">
<mat-icon
class="icon-size-5 text-secondary"
[svgIcon]="'heroicons_solid:chevron-left'"></mat-icon>
<span class="ml-1">Back</span>
</a>
</div>
</div>
<!-- Title -->
<div class="mt-2">
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
Page heading
</h2>
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button mat-stroked-button>
<mat-icon
class="icon-size-5 mr-2"
[svgIcon]="'heroicons_solid:pencil-alt'"></mat-icon>
Edit
</button>
<button
class="ml-3"
mat-flat-button
[color]="'accent'">
<mat-icon
class="icon-size-5 mr-2"
[svgIcon]="'heroicons_solid:link'"></mat-icon>
View
</button>
</div>
</div>
<!-- Main -->
<div
class="flex-auto pt-6 sm:px-4 sm:pb-4 overflow-y-auto"
cdkScrollable>
<!-- Tabs -->
<mat-tab-group [animationDuration]="'0'">
<!-- Tab #1 -->
<mat-tab label="First Tab">
<!-- TAB CONTENT GOES HERE -->
<div class="flex justify-center h-400 min-h-400 max-h-400 border-2 border-dashed border-gray-300 rounded-2xl">
<div class="mt-52 text-4xl font-bold text-hint">First tab content</div>
</div>
</mat-tab>
<!-- Tab #2 -->
<mat-tab label="Second Tab">
<!-- TAB CONTENT GOES HERE -->
<div class="flex justify-center h-400 min-h-400 max-h-400 border-2 border-dashed border-gray-300 rounded-2xl">
<div class="mt-52 text-4xl font-bold text-hint">Second tab content</div>
</div>
</mat-tab>
<!-- Tab #3 -->
<mat-tab label="Third Tab">
<!-- TAB CONTENT GOES HERE -->
<div class="flex justify-center h-400 min-h-400 max-h-400 border-2 border-dashed border-gray-300 rounded-2xl">
<div class="mt-52 text-4xl font-bold text-hint">Third tab content</div>
</div>
</mat-tab>
</mat-tab-group>
</div>
</div>

16
src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/content-scroll/fullwidth-2.component.ts Normal file
View File

@ -0,0 +1,16 @@
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector : 'simple-fullwidth-2-content-scroll',
templateUrl : './fullwidth-2.component.html',
encapsulation: ViewEncapsulation.None
})
export class SimpleFullwidth2ContentScrollComponent
{
/**
* Constructor
*/
constructor()
{
}
}

102
src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/normal-scroll/fullwidth-2.component.html Normal file
View File

@ -0,0 +1,102 @@
<div class="flex flex-col flex-auto min-w-0">
<!-- Header -->
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
<div class="flex-1 min-w-0">
<!-- Breadcrumbs -->
<div>
<div class="hidden sm:flex flex-wrap items-center font-medium">
<div>
<a class="whitespace-nowrap text-primary-500">Projects</a>
</div>
<div class="flex items-center ml-1 whitespace-nowrap">
<mat-icon
class="icon-size-5 text-secondary"
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
<a class="ml-1 text-primary-500">Weekend Project</a>
</div>
<div class="flex items-center ml-1 whitespace-nowrap">
<mat-icon
class="icon-size-5 text-secondary"
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
<span class="ml-1 text-secondary">Overview</span>
</div>
</div>
<div class="flex sm:hidden">
<a
class="inline-flex items-center -ml-1.5 text-secondary font-medium"
[routerLink]="'./..'">
<mat-icon
class="icon-size-5 text-secondary"
[svgIcon]="'heroicons_solid:chevron-left'"></mat-icon>
<span class="ml-1">Back</span>
</a>
</div>
</div>
<!-- Title -->
<div class="mt-2">
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
Page heading
</h2>
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button mat-stroked-button>
<mat-icon
class="icon-size-5 mr-2"
[svgIcon]="'heroicons_solid:pencil-alt'"></mat-icon>
Edit
</button>
<button
class="ml-3"
mat-flat-button
[color]="'accent'">
<mat-icon
class="icon-size-5 mr-2"
[svgIcon]="'heroicons_solid:link'"></mat-icon>
View
</button>
</div>
</div>
<!-- Main -->
<div class="flex-auto pt-6 sm:px-4 sm:pb-4">
<!-- Tabs -->
<mat-tab-group [animationDuration]="'0'">
<!-- Tab #1 -->
<mat-tab label="First Tab">
<!-- TAB CONTENT GOES HERE -->
<div class="flex justify-center h-400 min-h-400 max-h-400 border-2 border-dashed border-gray-300 rounded-2xl">
<div class="mt-52 text-4xl font-bold text-hint">First tab content</div>
</div>
</mat-tab>
<!-- Tab #2 -->
<mat-tab label="Second Tab">
<!-- TAB CONTENT GOES HERE -->
<div class="flex justify-center h-400 min-h-400 max-h-400 border-2 border-dashed border-gray-300 rounded-2xl">
<div class="mt-52 text-4xl font-bold text-hint">Second tab content</div>
</div>
</mat-tab>
<!-- Tab #3 -->
<mat-tab label="Third Tab">
<!-- TAB CONTENT GOES HERE -->
<div class="flex justify-center h-400 min-h-400 max-h-400 border-2 border-dashed border-gray-300 rounded-2xl">
<div class="mt-52 text-4xl font-bold text-hint">Third tab content</div>
</div>
</mat-tab>
</mat-tab-group>
</div>
</div>

16
src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/normal-scroll/fullwidth-2.component.ts Normal file
View File

@ -0,0 +1,16 @@
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector : 'simple-fullwidth-2-normal-scroll',
templateUrl : './fullwidth-2.component.html',
encapsulation: ViewEncapsulation.None
})
export class SimpleFullwidth2NormalScrollComponent
{
/**
* Constructor
*/
constructor()
{
}
}

104
src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/page-scroll/fullwidth-2.component.html Normal file
View File

@ -0,0 +1,104 @@
<div
class="absolute inset-0 flex flex-col min-w-0 overflow-y-auto"
cdkScrollable>
<!-- Header -->
<div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
<div class="flex-1 min-w-0">
<!-- Breadcrumbs -->
<div>
<div class="hidden sm:flex flex-wrap items-center font-medium">
<div>
<a class="whitespace-nowrap text-primary-500">Projects</a>
</div>
<div class="flex items-center ml-1 whitespace-nowrap">
<mat-icon
class="icon-size-5 text-secondary"
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
<a class="ml-1 text-primary-500">Weekend Project</a>
</div>
<div class="flex items-center ml-1 whitespace-nowrap">
<mat-icon
class="icon-size-5 text-secondary"
[svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
<span class="ml-1 text-secondary">Overview</span>
</div>
</div>
<div class="flex sm:hidden">
<a
class="inline-flex items-center -ml-1.5 text-secondary font-medium"
[routerLink]="'./..'">
<mat-icon
class="icon-size-5 text-secondary"
[svgIcon]="'heroicons_solid:chevron-left'"></mat-icon>
<span class="ml-1">Back</span>
</a>
</div>
</div>
<!-- Title -->
<div class="mt-2">
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
Page heading
</h2>
</div>
</div>
<!-- Actions -->
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
<button mat-stroked-button>
<mat-icon
class="icon-size-5 mr-2"
[svgIcon]="'heroicons_solid:pencil-alt'"></mat-icon>
Edit
</button>
<button
class="ml-3"
mat-flat-button
[color]="'accent'">
<mat-icon
class="icon-size-5 mr-2"
[svgIcon]="'heroicons_solid:link'"></mat-icon>
View
</button>
</div>
</div>
<!-- Main -->
<div class="flex-auto pt-6 sm:px-4 sm:pb-4">
<!-- Tabs -->
<mat-tab-group [animationDuration]="'0'">
<!-- Tab #1 -->
<mat-tab label="First Tab">
<!-- TAB CONTENT GOES HERE -->
<div class="flex justify-center h-400 min-h-400 max-h-400 border-2 border-dashed border-gray-300 rounded-2xl">
<div class="mt-52 text-4xl font-bold text-hint">First tab content</div>
</div>
</mat-tab>
<!-- Tab #2 -->
<mat-tab label="Second Tab">
<!-- TAB CONTENT GOES HERE -->
<div class="flex justify-center h-400 min-h-400 max-h-400 border-2 border-dashed border-gray-300 rounded-2xl">
<div class="mt-52 text-4xl font-bold text-hint">Second tab content</div>
</div>
</mat-tab>
<!-- Tab #3 -->
<mat-tab label="Third Tab">
<!-- TAB CONTENT GOES HERE -->
<div class="flex justify-center h-400 min-h-400 max-h-400 border-2 border-dashed border-gray-300 rounded-2xl">
<div class="mt-52 text-4xl font-bold text-hint">Third tab content</div>
</div>
</mat-tab>
</mat-tab-group>
</div>
</div>

6
src/app/modules/admin/ui/page-layouts/simple/fullwidth/page-scroll/fullwidth.component.ts → src/app/modules/admin/ui/page-layouts/simple/fullwidth-2/page-scroll/fullwidth-2.component.ts
View File

@ -1,11 +1,11 @@
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector : 'simple-fullwidth-page-scroll',
templateUrl : './fullwidth.component.html',
selector : 'simple-fullwidth-2-page-scroll',
templateUrl : './fullwidth-2.component.html',
encapsulation: ViewEncapsulation.None
})
export class SimpleFullwidthPageScrollComponent
export class SimpleFullwidth2PageScrollComponent
{
/**
* Constructor