Commit a489e7ad authored by PECQUOT's avatar PECQUOT

[enh] add color.testing.module.ts

todo: add color changer on this page and some color backgrounds examples
parent dd8237c2
......@@ -53,12 +53,17 @@ const routes: Routes = [
// Shared module
{
path: 'shared',
loadChildren: () => import('./testing/quadrige.testing.module').then(m => m.QuadrigeTestingModule)
loadChildren: () => import('./testing/quadrige-shared-testing.module').then(m => m.QuadrigeSharedTestingModule)
},
// Table
{
path: 'table',
loadChildren: () => import('./testing/table.testing.module').then(m => m.TableTestingModule)
},
// Color
{
path: 'color',
loadChildren: () => import('./testing/color/color.testing.module').then(m => m.ColorTestingModule)
}
]
},
......
......@@ -231,7 +231,8 @@ import {environment} from "@environments/environment";
// Test pages link
{ provide: APP_TESTING_PAGES, useValue: <TestingPage[]>[
{label: 'Table', page: '/testing/table'}
{label: 'Table', page: '/testing/table'},
{label: 'Color', page: '/testing/color'}
]},
],
bootstrap: [AppComponent],
......
import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {RouterModule, Routes} from "@angular/router";
import {IonicModule} from "@ionic/angular";
import {TranslateModule} from "@ngx-translate/core";
import {ColorTestingPage} from "@app/testing/color/color.testing.page";
import {QuadrigeSharedModule} from "@app/shared/quadrige.shared.module";
import {MatButtonModule} from "@angular/material/button";
const routes: Routes = [
{
path: '',
pathMatch: 'full',
component: ColorTestingPage
}
];
@NgModule({
imports: [
CommonModule,
IonicModule,
QuadrigeSharedModule,
TranslateModule.forChild(),
RouterModule.forChild(routes),
MatButtonModule,
],
declarations: [
ColorTestingPage,
],
exports: [
ColorTestingPage,
]
})
export class ColorTestingModule {
}
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Colors</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="ion-padding">
<h1>Material buttons</h1>
<section>
<div class="example-label">Basic</div>
<div class="example-button-row">
<button mat-button>Basic</button>
<button mat-button color="primary">Primary</button>
<button mat-button color="accent">Accent</button>
<button mat-button color="warn">Warn</button>
<button mat-button disabled>Disabled</button>
<a mat-button href="https://www.google.com/" target="_blank">Link</a>
</div>
</section>
<mat-divider></mat-divider>
<section>
<div class="example-label">Raised</div>
<div class="example-button-row">
<button mat-raised-button>Basic</button>
<button mat-raised-button color="primary">Primary</button>
<button mat-raised-button color="accent">Accent</button>
<button mat-raised-button color="warn">Warn</button>
<button mat-raised-button disabled>Disabled</button>
<a mat-raised-button href="https://www.google.com/" target="_blank">Link</a>
</div>
</section>
<mat-divider></mat-divider>
<section>
<div class="example-label">Stroked</div>
<div class="example-button-row">
<button mat-stroked-button>Basic</button>
<button mat-stroked-button color="primary">Primary</button>
<button mat-stroked-button color="accent">Accent</button>
<button mat-stroked-button color="warn">Warn</button>
<button mat-stroked-button disabled>Disabled</button>
<a mat-stroked-button href="https://www.google.com/" target="_blank">Link</a>
</div>
</section>
<mat-divider></mat-divider>
<section>
<div class="example-label">Flat</div>
<div class="example-button-row">
<button mat-flat-button>Basic</button>
<button mat-flat-button color="primary">Primary</button>
<button mat-flat-button color="accent">Accent</button>
<button mat-flat-button color="warn">Warn</button>
<button mat-flat-button disabled>Disabled</button>
<a mat-flat-button href="https://www.google.com/" target="_blank">Link</a>
</div>
</section>
<mat-divider></mat-divider>
<section>
<div class="example-label">Icon</div>
<div class="example-button-row">
<div class="example-flex-container">
<button mat-icon-button aria-label="Example icon button with a vertical three dot icon">
<mat-icon>more_vert</mat-icon>
</button>
<button mat-icon-button color="primary" aria-label="Example icon button with a home icon">
<mat-icon>home</mat-icon>
</button>
<button mat-icon-button color="accent" aria-label="Example icon button with a menu icon">
<mat-icon>menu</mat-icon>
</button>
<button mat-icon-button color="warn" aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button disabled aria-label="Example icon button with a open in new tab icon">
<mat-icon>open_in_new</mat-icon>
</button>
</div>
</div>
</section>
<mat-divider></mat-divider>
<section>
<div class="example-label">FAB</div>
<div class="example-button-row">
<div class="example-flex-container">
<div class="example-button-container">
<button mat-fab color="primary" aria-label="Example icon button with a delete icon">
<mat-icon>delete</mat-icon>
</button>
</div>
<div class="example-button-container">
<button mat-fab color="accent" aria-label="Example icon button with a bookmark icon">
<mat-icon>bookmark</mat-icon>
</button>
</div>
<div class="example-button-container">
<button mat-fab color="warn" aria-label="Example icon button with a home icon">
<mat-icon>home</mat-icon>
</button>
</div>
<div class="example-button-container">
<button mat-fab disabled aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
</div>
</div>
</div>
</section>
<mat-divider></mat-divider>
<section>
<div class="example-label">Mini FAB</div>
<div class="example-button-row">
<div class="example-flex-container">
<div class="example-button-container">
<button mat-mini-fab color="primary" aria-label="Example icon button with a menu icon">
<mat-icon>menu</mat-icon>
</button>
</div>
<div class="example-button-container">
<button mat-mini-fab color="accent" aria-label="Example icon button with a plus one icon">
<mat-icon>plus_one</mat-icon>
</button>
</div>
<div class="example-button-container">
<button mat-mini-fab color="warn" aria-label="Example icon button with a filter list icon">
<mat-icon>filter_list</mat-icon>
</button>
</div>
<div class="example-button-container">
<button mat-mini-fab disabled aria-label="Example icon button with a home icon">
<mat-icon>home</mat-icon>
</button>
</div>
</div>
</div>
</section>
</div>
<div class="ion-padding">
<h1>Ionic buttons</h1>
<section>
<div class="example-label">Primary</div>
<div class="example-button-row">
<ion-button color="primary">primary</ion-button>
<ion-button color="primary100">primary100</ion-button>
<ion-button color="primary900">primary900</ion-button>
</div>
</section>
<mat-divider></mat-divider>
<section>
<div class="example-label">Secondary</div>
<div class="example-button-row">
<ion-button color="secondary">secondary</ion-button>
<ion-button color="secondary100">secondary100</ion-button>
<ion-button color="secondary900">secondary900</ion-button>
</div>
</section>
<mat-divider></mat-divider>
<section>
<div class="example-label">Other</div>
<div class="example-button-row">
<ion-button color="tertiary">tertiary</ion-button>
<ion-button color="success">success</ion-button>
<ion-button color="warning">warning</ion-button>
<ion-button color="accent">accent</ion-button>
<ion-button color="danger">danger</ion-button>
</div>
</section>
</div>
</ion-content>
section {
display: table;
}
.example-label {
display: table-cell;
font-size: 14px;
margin-left: 8px;
min-width: 120px;
}
.example-button-row {
display: table-cell;
width: 500px;
}
.example-button-row .mat-button-base {
margin: 8px 8px 8px 0;
}
.example-flex-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.example-button-container {
display: flex;
justify-content: center;
width: 120px;
}
import {Component} from "@angular/core";
@Component({
selector: 'color-testing-page',
templateUrl: './color.testing.page.html',
styleUrls: ['./color.testing.page.scss']
})
export class ColorTestingPage {
}
......@@ -2,12 +2,14 @@ import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {SharedTestingModule} from "sumaris-lib";
/**
* Just a service wrapper to expose sumaris shared testing module
*/
@NgModule({
imports: [
CommonModule,
SharedTestingModule
]
})
export class QuadrigeTestingModule {
export class QuadrigeSharedTestingModule {
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment