Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 07:30:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add ripple effects to controls across application

Browse source
This commit is contained in:
eugene-sinitsyn 2020-03-05 18:17:17 +03:00 • committed by Sergey Andrievskiy
parent ea9d7d56ea
commit 70ac56b28a
34 changed files with 284 additions and 180 deletions
Download patch file Download diff file Expand all files Collapse all files

54
src/app/@theme/components/header/header.component.html
View file

@ -1,24 +1,60 @@
<div class="header-container">
<div class="logo-container">
<a (click)="toggleSidebar()" href="#" class="sidebar-toggle">
<a
href="#"
class="sidebar-toggle"
matRipple
[matRippleUnbounded]="true"
[matRippleCentered]="true"
(click)="toggleSidebar()"
>
<nb-icon icon="menu-2-outline"></nb-icon>
</a>
<a class="logo" href="#" (click)="navigateHome()">ngx-<span>admin</span></a>
</div>
<nb-select [selected]="currentTheme" (selectedChange)="changeTheme($event)" status="primary">
<nb-option *ngFor="let theme of themes" [value]="theme.value"> {{ theme.name }}</nb-option>
<nb-select
status="primary"
matRipple
[selected]="currentTheme"
(selectedChange)="changeTheme($event)"
>
<nb-option
*ngFor="let theme of themes"
[value]="theme.value"
matRipple
>{{ theme.name }}</nb-option>
</nb-select>
</div>
<div class="header-container">
<nb-actions size="small">
<nb-action class="control-item">
<nb-search type="rotate-layout"></nb-search>
</nb-action>
<nb-action class="control-item" icon="email-outline"></nb-action>
<nb-action class="control-item" icon="bell-outline"></nb-action>
<nb-action class="user-action" *nbIsGranted="['view', 'user']" >
<nb-action
class="control-item"
matRipple
[matRippleUnbounded]="true"
[matRippleCentered]="true"
><nb-search type="rotate-layout"></nb-search></nb-action>
<nb-action
class="control-item"
icon="email-outline"
matRipple
[matRippleUnbounded]="true"
[matRippleCentered]="true"
></nb-action>
<nb-action
class="control-item"
icon="bell-outline"
matRipple
[matRippleUnbounded]="true"
[matRippleCentered]="true"
></nb-action>
<nb-action
class="user-action"
*nbIsGranted="['view', 'user']"
matRipple
[matRippleUnbounded]="true"
[matRippleCentered]="true">
<nb-user [nbContextMenu]="userMenu"
[onlyPicture]="userPictureOnly"
[name]="user?.name"

4
src/app/@theme/components/header/header.component.scss
View file

@ -33,8 +33,8 @@
width: auto;
.sidebar-toggle {
@include nb-ltr(padding-right, 1.25rem);
@include nb-rtl(padding-left, 1.25rem);
@include nb-ltr(margin-right, 1.25rem);
@include nb-rtl(margin-left, 1.25rem);
text-decoration: none;
color: nb-theme(text-hint-color);
nb-icon {

4
src/app/@theme/styles/material/_ripple.scss
View file

@ -6,6 +6,10 @@
&:not(:empty) {
transform: translateZ(0);
}
&.mat-ripple-unbounded{
overflow: visible;
}
}
.mat-ripple-element {

12
src/app/@theme/styles/themes.scss
View file

@ -106,9 +106,9 @@ $nb-themes: nb-register-theme((
select-min-width: 6rem,
slide-out-background: linear-gradient(270deg, #222b45 0%, #151a30 100%),
slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
slide-out-background: linear-gradient(270deg, #e0e0e0 0%, #ebebeb 100%),
slide-out-shadow-color: 0 4px 14px 0 #ebebeb,
slide-out-shadow-color-rtl: 0 4px 14px 0 #ebebeb,
), material-light, material-light);
$nb-themes: nb-register-theme((
@ -127,7 +127,7 @@ $nb-themes: nb-register-theme((
select-min-width: 6rem,
slide-out-background: linear-gradient(270deg, #222b45 0%, #151a30 100%),
slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,У
slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
slide-out-background: linear-gradient(270deg, #1f1f1f 0%, #292929 100%),
slide-out-shadow-color: 0 4px 14px 0 #292929,
slide-out-shadow-color-rtl: 0 4px 14px 0 #292929,
), material-dark, material-dark);

4
src/app/pages/dashboard/contacts/contacts.component.html
View file

@ -3,7 +3,7 @@
<nb-tab tabTitle="Contacts">
<nb-list>
<nb-list-item class="contact" *ngFor="let c of contacts">
<nb-list-item matRipple class="contact" *ngFor="let c of contacts">
<nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
<nb-icon icon="phone-outline" pack="eva"></nb-icon>
</nb-list-item>
@ -12,7 +12,7 @@
<nb-tab tabTitle="Recent">
<nb-list>
<nb-list-item class="contact" *ngFor="let c of recent">
<nb-list-item matRipple class="contact" *ngFor="let c of recent">
<nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
<span class="caption">{{ c.time | date: 'shortTime' }}</span>
</nb-list-item>

4
src/app/pages/dashboard/electricity/electricity.component.html
View file

@ -37,8 +37,8 @@
<span>291 <span class="caption">USD</span></span>
</span>
<nb-select [(selected)]="type" class="type-select">
<nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
<nb-select matRipple [(selected)]="type" class="type-select">
<nb-option matRipple *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
</nb-select>
</nb-card-header>

10
src/app/pages/dashboard/security-cameras/security-cameras.component.html
View file

@ -22,7 +22,7 @@
<div class="grid-container">
<div class="single-view" *ngIf="isSingleView">
<div class="camera" [style.background-image]="'url(' + selectedCamera.source + ')'">
<div class="camera single" [style.background-image]="'url(' + selectedCamera.source + ')'">
<span class="camera-name">{{ selectedCamera.title }}</span>
</div>
</div>
@ -40,19 +40,19 @@
<nb-card-footer>
<nb-actions [size]="actionSize" fullWidth>
<nb-action>
<nb-action matRipple>
<nb-icon icon="pause-circle-outline" pack="eva"></nb-icon>
Pause
</nb-action>
<nb-action>
<nb-action matRipple>
<nb-icon icon="list-outline" pack="eva"></nb-icon>
Logs
</nb-action>
<nb-action>
<nb-action matRipple>
<nb-icon icon="search-outline" pack="eva"></nb-icon>
Search
</nb-action>
<nb-action>
<nb-action matRipple>
<nb-icon icon="settings-2-outline" pack="eva"></nb-icon>
Setup
</nb-action>

7
src/app/pages/dashboard/security-cameras/security-cameras.component.scss
View file

@ -72,6 +72,10 @@
background-size: cover;
position: relative;
&:not(.single) {
cursor: pointer;
}
&::before {
background-color: rgba(255, 255, 255, 0.1);
content: '';
@ -96,6 +100,9 @@
}
nb-action {
cursor: pointer;
border-radius: 2px;
nb-icon {
@include nb-ltr(margin-right, 0.5rem);
@include nb-rtl(margin-left, 0.5rem);

1
src/app/pages/dashboard/status-card/status-card.component.scss
View file

@ -5,6 +5,7 @@
flex-direction: row;
align-items: center;
height: 6rem;
cursor: pointer;
.icon-container {
height: 100%;

2
src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html
View file

@ -42,6 +42,6 @@
<ng-content></ng-content>
</div>
<button nbButton appearance="ghost" class="power-bg" [class.on]="!off" (click)="switchPower()">
<button nbButton matRipple appearance="ghost" class="power-bg" [class.on]="!off" (click)="switchPower()">
<nb-icon class="power-icon" icon="power-outline" pack="eva"></nb-icon>
</button>

12
src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
View file

@ -39,25 +39,27 @@
position: absolute;
width: 5.25rem;
height: 5.25rem;
background-color: nb-theme(card-background-color);
background-color: nb-theme(card-background-color) !important;
border-radius: 50%;
bottom: 2%;
left: 50%;
transform: translate(-50%, 50%);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color);
&.on {
color: nb-theme(text-hint-color);
color: nb-theme(color-primary-default);
}
}
.power-icon {
position: absolute;
top: 50%;
margin-top: -0.625rem;
left: 50%;
margin-left: -0.625rem;
font-size: 3rem;
}
}

8
src/app/pages/dashboard/temperature/temperature.component.html
View file

@ -51,16 +51,16 @@
</div>
<nb-radio-group [(ngModel)]="humidityMode" name="humidity-mode">
<nb-radio value="cool">
<nb-radio matRipple value="cool">
<i class="nb-snowy-circled"></i>
</nb-radio>
<nb-radio value="warm">
<nb-radio matRipple value="warm">
<i class="nb-sunny-circled"></i>
</nb-radio>
<nb-radio value="heat">
<nb-radio matRipple value="heat">
<i class="nb-flame-circled"></i>
</nb-radio>
<nb-radio value="fan">
<nb-radio matRipple value="fan">
<i class="nb-loop-circled"></i>
</nb-radio>
</nb-radio-group>

4
src/app/pages/dashboard/traffic/traffic.component.ts
View file

@ -12,8 +12,8 @@ import { TrafficChartData } from '../../../@core/data/traffic-chart';
<nb-card-header>
<span>Traffic Consumption</span>
<nb-select [(selected)]="type">
<nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
<nb-select matRipple [(selected)]="type">
<nb-option matRipple *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
</nb-select>
</nb-card-header>

4
src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.html
View file

@ -1,7 +1,7 @@
<ngx-legend-chart [legendItems]="chartLegend"></ngx-legend-chart>
<nb-select class="period-select" [selected]="type" (selectedChange)="changePeriod($event)">
<nb-option *ngFor="let period of types" [value]="period">
<nb-select matRipple class="period-select" [selected]="type" (selectedChange)="changePeriod($event)">
<nb-option matRipple *ngFor="let period of types" [value]="period">
{{ period }}
</nb-option>
</nb-select>

6
src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss
View file

@ -11,9 +11,9 @@
ngx-legend-chart,
.period-select {
padding-top: 1rem;
@include nb-ltr(padding-left, 0.5rem);
@include nb-rtl(padding-right, 0.5rem);
margin-top: 1rem;
@include nb-ltr(margin-left, 0.5rem);
@include nb-rtl(margin-right, 0.5rem);
}
@include media-breakpoint-up(md) {

4
src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.html
View file

@ -1,6 +1,6 @@
<nb-card-header>
<nb-select [selected]="selectedCurrency" (selectedChange)="changeCurrency($event)">
<nb-option *ngFor="let currency of currencies" [value]="currency">{{ currency }}</nb-option>
<nb-select matRipple [selected]="selectedCurrency" (selectedChange)="changeCurrency($event)">
<nb-option matRipple *ngFor="let currency of currencies" [value]="currency">{{ currency }}</nb-option>
</nb-select>
</nb-card-header>
<nb-card-body>

4
src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html
View file

@ -1,6 +1,6 @@
<nb-card-header>
<span>Traffic</span>
<nb-select [selected]="type" (selectedChange)="changePeriod($event)">
<nb-option *ngFor="let period of types" [value]="period">{{ period }}</nb-option>
<nb-select matRipple [selected]="type" (selectedChange)="changePeriod($event)">
<nb-option matRipple *ngFor="let period of types" [value]="period">{{ period }}</nb-option>
</nb-select>
</nb-card-header>

4
src/app/pages/e-commerce/user-activity/user-activity.component.html
View file

@ -2,8 +2,8 @@
<nb-card-header>
<span>User Activity</span>
<nb-select [selected]="type" (selectedChange)="getUserActivity($event); type = $event">
<nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
<nb-select matRipple [selected]="type" (selectedChange)="getUserActivity($event); type = $event">
<nb-option matRipple *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
</nb-select>
</nb-card-header>

12
src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.html
View file

@ -3,33 +3,33 @@
<nb-card-body>
<div class="row">
<div class="col-md-12 col-lg-12 col-xxxl-12">
<button nbButton status="success" size="large" (click)="toggleLoadingLargeGroupAnimation()"
<button nbButton matRipple status="success" size="large" (click)="toggleLoadingLargeGroupAnimation()"
[nbSpinner]="loadingLargeGroup" nbSpinnerStatus="success" nbSpinnerSize="large" nbSpinnerMessage="">
Download
</button>
<button nbButton status="primary" size="large" (click)="toggleLoadingLargeGroupAnimation()"
<button nbButton matRipple status="primary" size="large" (click)="toggleLoadingLargeGroupAnimation()"
[nbSpinner]="loadingLargeGroup" nbSpinnerStatus="primary" nbSpinnerSize="large" nbSpinnerMessage="">
Download
</button>
<button nbButton status="warning" size="large" (click)="toggleLoadingLargeGroupAnimation()"
<button nbButton matRipple status="warning" size="large" (click)="toggleLoadingLargeGroupAnimation()"
[nbSpinner]="loadingLargeGroup" nbSpinnerStatus="warning" nbSpinnerSize="large" nbSpinnerMessage="">
Download
</button>
</div>
<div class="col-md-12 col-lg-12 col-xxxl-12 size-medium-group">
<button nbButton status="danger" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
<button nbButton matRipple status="danger" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
[nbSpinner]="loadingMediumGroup" nbSpinnerStatus="danger" nbSpinnerMessage="">
Download
</button>
<button nbButton status="info" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
<button nbButton matRipple status="info" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
[nbSpinner]="loadingMediumGroup" nbSpinnerStatus="info" nbSpinnerSize="small" nbSpinnerMessage="">
Download
</button>
<button nbButton status="primary" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
<button nbButton matRipple status="primary" size="medium" (click)="toggleLoadingMediumGroupAnimation()"
[nbSpinner]="loadingMediumGroup" nbSpinnerStatus="primary" nbSpinnerSize="tiny" nbSpinnerMessage="">
Download
</button>

38
src/app/pages/forms/buttons/buttons.component.html
View file

@ -4,10 +4,10 @@
<nb-card-header>Hero Buttons</nb-card-header>
<nb-card-body>
<div class="buttons-row">
<button *ngFor="let status of statuses" nbButton [status]="status" hero>
<button *ngFor="let status of statuses" nbButton matRipple [status]="status" hero>
{{ status }}
</button>
<button disabled nbButton hero>
<button disabled nbButton matRipple hero>
disabled
</button>
</div>
@ -18,10 +18,10 @@
<nb-card-header>Default Buttons</nb-card-header>
<nb-card-body>
<div class="buttons-row">
<button *ngFor="let status of statuses" nbButton [status]="status">
<button *ngFor="let status of statuses" nbButton matRipple [status]="status">
{{ status }}
</button>
<button disabled nbButton>
<button disabled nbButton matRipple>
disabled
</button>
</div>
@ -32,10 +32,10 @@
<nb-card-header>Outline Buttons</nb-card-header>
<nb-card-body>
<div class="buttons-row">
<button *ngFor="let status of statuses" nbButton [status]="status" outline>
<button *ngFor="let status of statuses" nbButton matRipple [status]="status" outline>
{{ status }}
</button>
<button disabled nbButton outline>
<button disabled nbButton matRipple outline>
disabled
</button>
</div>
@ -46,10 +46,10 @@
<nb-card-header>Ghost Buttons</nb-card-header>
<nb-card-body>
<div class="buttons-row">
<button *ngFor="let status of statuses" nbButton [status]="status" ghost>
<button *ngFor="let status of statuses" nbButton matRipple [status]="status" ghost>
{{ status }}
</button>
<button disabled nbButton outline>
<button disabled nbButton matRipple outline>
disabled
</button>
</div>
@ -62,7 +62,7 @@
<nb-card-header>Button shapes</nb-card-header>
<nb-card-body>
<div class="buttons-row">
<button *ngFor="let shape of shapes" nbButton [shape]="shape">
<button *ngFor="let shape of shapes" nbButton matRipple [shape]="shape">
{{ shape }}
</button>
</div>
@ -73,7 +73,7 @@
<nb-card-header>Button sizes</nb-card-header>
<nb-card-body>
<div class="buttons-row">
<button *ngFor="let size of sizes" nbButton [size]="size">
<button *ngFor="let size of sizes" nbButton matRipple [size]="size">
{{ size }}
</button>
</div>
@ -86,13 +86,13 @@
<nb-card-header>Action Groups</nb-card-header>
<nb-card-body>
<nb-actions size="medium">
<nb-action icon="menu-outline"></nb-action>
<nb-action icon="search-outline"></nb-action>
<nb-action icon="email-outline"></nb-action>
<nb-action matRipple icon="menu-outline"></nb-action>
<nb-action matRipple icon="search-outline"></nb-action>
<nb-action matRipple icon="email-outline"></nb-action>
<nb-action disabled icon="bell-outline"></nb-action><nb-action>
<nb-user name="Han Solo"></nb-user>
<nb-user matRipple name="Han Solo"></nb-user>
</nb-action>
<nb-action icon="settings-2-outline"></nb-action>
<nb-action matRipple icon="settings-2-outline"></nb-action>
</nb-actions>
</nb-card-body>
</nb-card>
@ -100,19 +100,19 @@
<nb-card>
<nb-card-body>
<nb-actions size="medium" fullWidth>
<nb-action>
<nb-action matRipple>
<nb-icon class="action-icon" icon="pause-circle-outline"></nb-icon>
<span>Pause</span>
</nb-action>
<nb-action>
<nb-action matRipple>
<nb-icon class="action-icon" icon="list-outline"></nb-icon>
<span>Logs</span>
</nb-action>
<nb-action>
<nb-action matRipple>
<nb-icon class="action-icon" icon="search-outline"></nb-icon>
<span>Search</span>
</nb-action>
<nb-action>
<nb-action matRipple>
<nb-icon class="action-icon" icon="settings-2-outline"></nb-icon>
<span>Setup</span>
</nb-action>

5
src/app/pages/forms/buttons/buttons.component.scss
View file

@ -17,4 +17,9 @@
.actions-card {
height: 8rem;
}
nb-action {
border-radius: 2px;
cursor: pointer;
}
}

6
src/app/pages/forms/form-inputs/form-inputs.component.html
View file

@ -26,9 +26,9 @@
<nb-card>
<nb-card-header>Select</nb-card-header>
<nb-card-body>
<nb-select selected="1">
<nb-option value="1">Option 1</nb-option>
<nb-option value="2">Option 2</nb-option>
<nb-select matRipple selected="1">
<nb-option matRipple value="1">Option 1</nb-option>
<nb-option matRipple value="2">Option 2</nb-option>
</nb-select>
</nb-card-body>
</nb-card>

14
src/app/pages/layout/accordion/accordion.component.html
View file

@ -3,13 +3,13 @@
<nb-card>
<nb-card-header>Toggle Accordion By Button</nb-card-header>
<nb-card-body>
<button nbButton (click)="toggle()">Toggle First Item</button>
<button nbButton matRipple (click)="toggle()">Toggle First Item</button>
</nb-card-body>
</nb-card>
<nb-accordion>
<nb-accordion-item #item>
<nb-accordion-item-header>
<nb-accordion-item-header matRipple>
Product Details
</nb-accordion-item-header>
<nb-accordion-item-body>
@ -20,7 +20,7 @@
</nb-accordion-item>
<nb-accordion-item>
<nb-accordion-item-header>
<nb-accordion-item-header matRipple>
Reviews
</nb-accordion-item-header>
<nb-accordion-item-body>
@ -31,7 +31,7 @@
</nb-accordion-item>
<nb-accordion-item>
<nb-accordion-item-header>
<nb-accordion-item-header matRipple>
Edit
</nb-accordion-item-header>
<nb-accordion-item-body>
@ -46,7 +46,7 @@
<div class="accordion-container col-md-12 col-lg-6 col-xxxl-6">
<nb-accordion multi>
<nb-accordion-item>
<nb-accordion-item-header>
<nb-accordion-item-header matRipple>
Product Details
</nb-accordion-item-header>
<nb-accordion-item-body>
@ -57,7 +57,7 @@
</nb-accordion-item>
<nb-accordion-item>
<nb-accordion-item-header>
<nb-accordion-item-header matRipple>
Reviews
</nb-accordion-item-header>
<nb-accordion-item-body>
@ -68,7 +68,7 @@
</nb-accordion-item>
<nb-accordion-item>
<nb-accordion-item-header>
<nb-accordion-item-header matRipple>
Edit
</nb-accordion-item-header>
<nb-accordion-item-body>

44
src/app/pages/layout/stepper/stepper.component.html
View file

@ -4,25 +4,25 @@
<nb-step [label]="labelOne">
<ng-template #labelOne>First step</ng-template>
<h3>Step content #1</h3>
<button nbButton disabled nbStepperNext>prev</button>
<button nbButton nbStepperNext>next</button>
<button nbButton matRipple disabled nbStepperNext>prev</button>
<button nbButton matRipple nbStepperNext>next</button>
</nb-step>
<nb-step [label]="labelTwo">
<ng-template #labelTwo>Second step</ng-template>
<h3>Step content #2</h3>
<button nbButton nbStepperPrevious>prev</button>
<button nbButton nbStepperNext>next</button>
<button nbButton matRipple nbStepperPrevious>prev</button>
<button nbButton matRipple nbStepperNext>next</button>
</nb-step>
<nb-step label="Third step">
<h3>Step content #3</h3>
<button nbButton nbStepperPrevious>prev</button>
<button nbButton nbStepperNext>next</button>
<button nbButton matRipple nbStepperPrevious>prev</button>
<button nbButton matRipple nbStepperNext>next</button>
</nb-step>
<nb-step [label]="labelFour">
<ng-template #labelFour>Fourth step</ng-template>
<h3>Step content #4</h3>
<button nbButton nbStepperPrevious>prev</button>
<button nbButton disabled nbStepperNext>next</button>
<button nbButton matRipple nbStepperPrevious>prev</button>
<button nbButton matRipple disabled nbStepperNext>next</button>
</nb-step>
</nb-stepper>
</nb-card-body>
@ -43,7 +43,7 @@
<input type="text" placeholder="Enter your name" class="form-control" formControlName="firstCtrl"
[ngClass]="{'form-control-danger': firstForm.invalid && (firstForm.dirty || firstForm.touched)}">
</div>
<button nbButton nbStepperNext>next</button>
<button nbButton matRipple nbStepperNext>next</button>
</form>
</nb-step>
<nb-step [stepControl]="secondForm" label="Second step">
@ -57,8 +57,8 @@
<input type="text" placeholder="Enter favorite movie" class="form-control" formControlName="secondCtrl"
[ngClass]="{'form-control-danger': secondForm.invalid && (secondForm.dirty || secondForm.touched)}">
</div>
<button nbButton nbStepperPrevious>prev</button>
<button nbButton nbStepperNext>next</button>
<button nbButton matRipple nbStepperPrevious>prev</button>
<button nbButton matRipple nbStepperNext>next</button>
</form>
</nb-step>
<nb-step [stepControl]="thirdForm" label="Third step">
@ -70,14 +70,14 @@
<input type="text" placeholder="Enter something" class="form-control" formControlName="thirdCtrl"
[ngClass]="{'form-control-danger': thirdForm.invalid && (thirdForm.dirty || thirdForm.touched)}">
</div>
<button nbButton nbStepperPrevious>prev</button>
<button nbButton nbStepperNext>Confirm</button>
<button nbButton matRipple nbStepperPrevious>prev</button>
<button nbButton matRipple nbStepperNext>Confirm</button>
</form>
</nb-step>
<nb-step [stepControl]="thirdForm" [hidden]="true" label="Third step">
<div class="step-container">
<h3>Wizard completed!</h3>
<button nbButton (click)="stepper.reset()">Try again</button>
<button nbButton matRipple (click)="stepper.reset()">Try again</button>
</div>
</nb-step>
</nb-stepper>
@ -97,8 +97,8 @@
viverra ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus turpis, commodo vel
placerat quis, lobortis in ligula.
</p>
<button nbButton disabled nbStepperNext>prev</button>
<button nbButton nbStepperNext>next</button>
<button nbButton matRipple disabled nbStepperNext>prev</button>
<button nbButton matRipple nbStepperNext>next</button>
</nb-step>
<nb-step label="Second step">
<h3>Step content #2</h3>
@ -107,8 +107,8 @@
sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui
eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum.
</p>
<button nbButton nbStepperPrevious>prev</button>
<button nbButton nbStepperNext>next</button>
<button nbButton matRipple nbStepperPrevious>prev</button>
<button nbButton matRipple nbStepperNext>next</button>
</nb-step>
<nb-step label="Third step">
<h3>Step content #3</h3>
@ -123,8 +123,8 @@
sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui
eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum.
</p>
<button nbButton nbStepperPrevious>prev</button>
<button nbButton nbStepperNext>next</button>
<button nbButton matRipple nbStepperPrevious>prev</button>
<button nbButton matRipple nbStepperNext>next</button>
</nb-step>
<nb-step label="Fourth step">
<h3>Step content #4</h3>
@ -133,8 +133,8 @@
sit amet fringilla orci efficitur. Nam bibendum lectus ut viverra tristique. Fusce eu pulvinar magna, quis
viverra ex.
</p>
<button nbButton nbStepperPrevious>prev</button>
<button nbButton disabled nbStepperNext>next</button>
<button nbButton matRipple nbStepperPrevious>prev</button>
<button nbButton matRipple disabled nbStepperNext>next</button>
</nb-step>
</nb-stepper>
</nb-card-body>

2
src/app/pages/miscellaneous/not-found/not-found.component.html
View file

@ -5,7 +5,7 @@
<div class="flex-centered col-xl-4 col-lg-6 col-md-8 col-sm-12">
<h2 class="title">404 Page Not Found</h2>
<small class="sub-title">The page you were looking for doesn't exist</small>
<button nbButton fullWidth (click)="goToHome()" type="button" class="home-button">
<button nbButton matRipple fullWidth (click)="goToHome()" type="button" class="home-button">
Take me home
</button>
</div>

4
src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.html
View file

@ -4,7 +4,7 @@
<input #name nbInput placeholder="Name">
</nb-card-body>
<nb-card-footer>
<button class="cancel" nbButton status="danger" (click)="cancel()">Cancel</button>
<button nbButton status="success" (click)="submit(name.value)">Submit</button>
<button class="cancel" nbButton matRipple status="danger" (click)="cancel()">Cancel</button>
<button nbButton matRipple status="success" (click)="submit(name.value)">Submit</button>
</nb-card-footer>
</nb-card>

20
src/app/pages/modal-overlays/dialog/dialog.component.html
View file

@ -3,9 +3,9 @@
<nb-card>
<nb-card-header>Open Dialog</nb-card-header>
<nb-card-body>
<button nbButton (click)="open()">Open Dialog with component</button>
<button nbButton matRipple (click)="open()">Open Dialog with component</button>
<button nbButton (click)="open2(dialog)">Open Dialog with template</button>
<button nbButton matRipple (click)="open2(dialog)">Open Dialog with template</button>
</nb-card-body>
</nb-card>
</div>
@ -14,9 +14,9 @@
<nb-card>
<nb-card-header>Open Without Backdrop</nb-card-header>
<nb-card-body>
<button nbButton (click)="open()">Open Dialog with backdrop</button>
<button nbButton matRipple (click)="open()">Open Dialog with backdrop</button>
<button nbButton (click)="openWithoutBackdrop(dialog)">Open Dialog without backdrop</button>
<button nbButton matRipple (click)="openWithoutBackdrop(dialog)">Open Dialog without backdrop</button>
</nb-card-body>
</nb-card>
</div>
@ -25,9 +25,9 @@
<nb-card>
<nb-card-header>Open Without Esc Close</nb-card-header>
<nb-card-body>
<button nbButton (click)="open()">Open Dialog with esc close</button>
<button nbButton matRipple (click)="open()">Open Dialog with esc close</button>
<button nbButton (click)="openWithoutEscClose(dialog)">Open Dialog without esc close</button>
<button nbButton matRipple (click)="openWithoutEscClose(dialog)">Open Dialog without esc close</button>
</nb-card-body>
</nb-card>
</div>
@ -36,9 +36,9 @@
<nb-card>
<nb-card-header>Open Without Backdrop Click</nb-card-header>
<nb-card-body>
<button nbButton (click)="open()">Open Dialog with backdrop click</button>
<button nbButton matRipple (click)="open()">Open Dialog with backdrop click</button>
<button nbButton (click)="openWithoutBackdropClick(dialog)">Open without backdrop click</button>
<button nbButton matRipple (click)="openWithoutBackdropClick(dialog)">Open without backdrop click</button>
</nb-card-body>
</nb-card>
</div>
@ -47,7 +47,7 @@
<nb-card class="form-input-card">
<nb-card-header>Return Result From Dialog</nb-card-header>
<nb-card-body class="result-from-dialog">
<button nbButton (click)="open3()">Enter Name</button>
<button nbButton matRipple (click)="open3()">Enter Name</button>
<br>
<h3 class="title">Names:</h3>
<ul>
@ -63,7 +63,7 @@
<nb-card-header>Template Dialog</nb-card-header>
<nb-card-body>{{ data }}</nb-card-body>
<nb-card-footer>
<button nbButton (click)="ref.close()">Close Dialog</button>
<button nbButton matRipple (click)="ref.close()">Close Dialog</button>
</nb-card-footer>
</nb-card>
</ng-template>

2
src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.html
View file

@ -9,6 +9,6 @@
in aliquet massa aliquet et.
</nb-card-body>
<nb-card-footer>
<button nbButton hero status="primary" (click)="dismiss()">Dismiss Dialog</button>
<button nbButton matRipple hero status="primary" (click)="dismiss()">Dismiss Dialog</button>
</nb-card-footer>
</nb-card>

2
src/app/pages/modal-overlays/popovers/popover-examples.component.ts
View file

@ -34,7 +34,7 @@ export class NgxPopoverTabsComponent {
<div class="form-group">
<textarea class="form-control" placeholder="Message"></textarea>
</div>
<button type="submit" class="btn btn-primary w-100">Send</button>
<button matRipple type="submit" class="btn btn-primary w-100">Send</button>
</form>
</div>
`,

60
src/app/pages/modal-overlays/popovers/popovers.component.html
View file

@ -4,10 +4,10 @@
<nb-card-header>Popover Position</nb-card-header>
<nb-card-body>
<p>When popover has not enough space based on the configured placement, it will adjust accordingly trying to fit the screen.</p>
<button nbButton status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="left">Left</button>
<button nbButton status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="top">Top</button>
<button nbButton status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="bottom">Bottom</button>
<button nbButton status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="right">Right</button>
<button nbButton matRipple status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="left">Left</button>
<button nbButton matRipple status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="top">Top</button>
<button nbButton matRipple status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="bottom">Bottom</button>
<button nbButton matRipple status="danger" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint" nbPopoverPlacement="right">Right</button>
</nb-card-body>
</nb-card>
</div>
@ -17,9 +17,9 @@
<nb-card-header>Simple Popovers</nb-card-header>
<nb-card-body>
<p>In a simples form popover can take a string of text to render.</p>
<button nbButton status="success" nbPopover="Hello, how are you today?">on click</button>
<button nbButton status="success" nbPopover="Hello, how are you today?" nbPopoverTrigger="hover">on hover</button>
<button nbButton status="success" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint">on hint</button>
<button nbButton matRipple status="success" nbPopover="Hello, how are you today?">on click</button>
<button nbButton matRipple status="success" nbPopover="Hello, how are you today?" nbPopoverTrigger="hover">on hover</button>
<button nbButton matRipple status="success" nbPopover="Hello, how are you today?" nbPopoverTrigger="hint">on hint</button>
</nb-card-body>
</nb-card>
</div>
@ -55,7 +55,7 @@
<div class="form-group">
<textarea class="form-control" placeholder="Message"></textarea>
</div>
<button type="submit" class="btn btn-primary w-100">Send</button>
<button matRipple type="submit" class="btn btn-primary w-100">Send</button>
</form>
</div>
</ng-template>
@ -76,9 +76,9 @@
<nb-card-header>Template Popovers</nb-card-header>
<nb-card-body>
<p>You can pass a refference to `ng-template` to be rendered.</p>
<button nbButton status="warning" [nbPopover]="tabs">With tabs</button>
<button nbButton status="warning" [nbPopover]="form">With form</button>
<button nbButton status="warning" [nbPopover]="card">With card</button>
<button nbButton matRipple status="warning" [nbPopover]="tabs">With tabs</button>
<button nbButton matRipple status="warning" [nbPopover]="form">With form</button>
<button nbButton matRipple status="warning" [nbPopover]="card">With card</button>
</nb-card-body>
</nb-card>
</div>
@ -88,9 +88,9 @@
<nb-card-header>Component Popovers</nb-card-header>
<nb-card-body>
<p>Same way popover can render any angular compnoent.</p>
<button nbButton status="warning" [nbPopover]="tabsComponent">With tabs</button>
<button nbButton status="warning" [nbPopover]="formComponent">With form</button>
<button nbButton status="warning" [nbPopover]="cardComponent">With card</button>
<button nbButton matRipple status="warning" [nbPopover]="tabsComponent">With tabs</button>
<button nbButton matRipple status="warning" [nbPopover]="formComponent">With form</button>
<button nbButton matRipple status="warning" [nbPopover]="cardComponent">With card</button>
</nb-card-body>
</nb-card>
</div>
@ -103,52 +103,52 @@
<nb-card-body class="debounce-card">
<p>Quickly move mouse cursor over the buttons, only the last popover will be created. It allows us to avoid excess white improving page performance.</p>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
<button nbButton nbPopover="Popover!" nbPopoverTrigger="hint">
<button nbButton matRipple nbPopover="Popover!" nbPopoverTrigger="hint">
show hint
</button>
</nb-card-body>

12
src/app/pages/modal-overlays/toastr/toastr.component.html
View file

@ -8,8 +8,8 @@
<div class="col-md-6 col-sm-12">
<div class="form-group">
<label class="label">Position:</label>
<nb-select [(selected)]="position" class="position-select">
<nb-option *ngFor="let p of positions" [value]="p">{{ p }}</nb-option>
<nb-select [(selected)]="position" matRipple class="position-select">
<nb-option *ngFor="let p of positions" [value]="p" matRipple>{{ p }}</nb-option>
</nb-select>
</div>
@ -34,8 +34,8 @@
<div class="col-md-6 col-sm-12">
<div class="form-group">
<label class="label">Toast type:</label>
<nb-select [(selected)]="status">
<nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
<nb-select [(selected)]="status" matRipple>
<nb-option *ngFor="let t of types" [value]="t" matRipple>{{ t }}</nb-option>
</nb-select>
</div>
@ -53,7 +53,7 @@
</nb-card-body>
<nb-card-footer>
<button nbButton (click)="makeToast()">Show toast</button>
<button nbButton status="success" (click)="openRandomToast()">Random toast</button>
<button nbButton matRipple (click)="makeToast()">Show toast</button>
<button nbButton matRipple status="success" (click)="openRandomToast()">Random toast</button>
</nb-card-footer>
</nb-card>

24
src/app/pages/modal-overlays/tooltip/tooltip.component.html
View file

@ -3,8 +3,8 @@
<nb-card>
<nb-card-header>Tooltip With Icon</nb-card-header>
<nb-card-body>
<button nbTooltip="This is a tooltip" nbTooltipIcon="home-outline" nbButton>Show Tooltip</button>
<button nbTooltip="" nbTooltipIcon="alert-triangle" nbTooltipStatus="danger" nbButton>Show Tooltip</button>
<button nbTooltip="This is a tooltip" nbTooltipIcon="home-outline" nbButton matRipple>Show Tooltip</button>
<button nbTooltip="" nbTooltipIcon="alert-triangle" nbTooltipStatus="danger" nbButton matRipple>Show Tooltip</button>
</nb-card-body>
</nb-card>
</div>
@ -13,10 +13,10 @@
<nb-card>
<nb-card-header>Tooltip Placements</nb-card-header>
<nb-card-body>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbButton>Top</button>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="right" nbButton>Right</button>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="bottom" nbButton>Bottom</button>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="left" nbButton>Left</button>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbButton matRipple>Top</button>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="right" nbButton matRipple>Right</button>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="bottom" nbButton matRipple>Bottom</button>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="left" nbButton matRipple>Left</button>
</nb-card-body>
</nb-card>
</div>
@ -25,12 +25,12 @@
<nb-card>
<nb-card-header>Colored Tooltips</nb-card-header>
<nb-card-body>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbButton>Default</button>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="primary" nbButton>Primary</button>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="success" nbButton>Success</button>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="danger" nbButton>Danger</button>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="info" nbButton>Info</button>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="warning" nbButton>Warning</button>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbButton matRipple>Default</button>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="primary" nbButton matRipple>Primary</button>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="success" nbButton matRipple>Success</button>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="danger" nbButton matRipple>Danger</button>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="info" nbButton matRipple>Info</button>
<button nbTooltip="This is a tooltip" nbTooltipPlacement="top" nbTooltipStatus="warning" nbButton matRipple>Warning</button>
</nb-card-body>
</nb-card>
</div>

8
src/app/pages/modal-overlays/window/window.component.html
View file

@ -3,9 +3,9 @@
<nb-card>
<nb-card-header>Window Form</nb-card-header>
<nb-card-body>
<button (click)="openWindowForm()" nbButton>Open window form</button>
<button (click)="openWindowForm()" nbButton matRipple>Open window form</button>
<button (click)="openWindow(contentTemplate)" nbButton>Open window with template</button>
<button (click)="openWindow(contentTemplate)" nbButton matRipple>Open window with template</button>
</nb-card-body>
</nb-card>
</div>
@ -14,9 +14,9 @@
<nb-card>
<nb-card-header>Window Without Backdrop</nb-card-header>
<nb-card-body>
<button (click)="openWindow(contentTemplate)" nbButton>Open window with backdrop</button>
<button (click)="openWindow(contentTemplate)" nbButton matRipple>Open window with backdrop</button>
<button (click)="openWindowWithoutBackdrop()" nbButton>Open window without backdrop</button>
<button (click)="openWindowWithoutBackdrop()" nbButton matRipple>Open window without backdrop</button>
</nb-card-body>
</nb-card>
</div>

63
src/app/pages/ui-features/search-fields/search-fields.component.html
View file

@ -5,7 +5,14 @@
Layout Rotate Search
</nb-card-header>
<nb-card-body>
<nb-search type="rotate-layout" tag="rotate-layout"></nb-search>
<nb-search
matRipple
[matRippleUnbounded]="true"
[matRippleCentered]="true"
[matRippleRadius]="36"
type="rotate-layout"
tag="rotate-layout"
></nb-search>
</nb-card-body>
</nb-card>
</div>
@ -15,7 +22,14 @@
Modal Zoomin Search
</nb-card-header>
<nb-card-body>
<nb-search type="modal-zoomin" tag="modal-zoomin"></nb-search>
<nb-search
matRipple
[matRippleUnbounded]="true"
[matRippleCentered]="true"
[matRippleRadius]="36"
type="modal-zoomin"
tag="modal-zoomin"
></nb-search>
</nb-card-body>
</nb-card>
</div>
@ -25,7 +39,14 @@
Modal Move Search
</nb-card-header>
<nb-card-body>
<nb-search type="modal-move" tag="modal-move"></nb-search>
<nb-search
matRipple
[matRippleUnbounded]="true"
[matRippleCentered]="true"
[matRippleRadius]="36"
type="modal-move"
tag="modal-move"
></nb-search>
</nb-card-body>
</nb-card>
</div>
@ -35,7 +56,14 @@
Modal Drop Search
</nb-card-header>
<nb-card-body>
<nb-search type="modal-drop" tag="modal-drop"></nb-search>
<nb-search
matRipple
[matRippleUnbounded]="true"
[matRippleCentered]="true"
[matRippleRadius]="36"
type="modal-drop"
tag="modal-drop"
></nb-search>
</nb-card-body>
</nb-card>
</div>
@ -45,7 +73,14 @@
Modal Half Search
</nb-card-header>
<nb-card-body>
<nb-search type="modal-half" tag="modal-half"></nb-search>
<nb-search
matRipple
[matRippleUnbounded]="true"
[matRippleCentered]="true"
[matRippleRadius]="36"
type="modal-half"
tag="modal-half"
></nb-search>
</nb-card-body>
</nb-card>
</div>
@ -55,7 +90,14 @@
Curtain Search
</nb-card-header>
<nb-card-body>
<nb-search type="curtain" tag="curtain"></nb-search>
<nb-search
matRipple
[matRippleUnbounded]="true"
[matRippleCentered]="true"
[matRippleRadius]="36"
type="curtain"
tag="curtain"
></nb-search>
</nb-card-body>
</nb-card>
</div>
@ -65,7 +107,14 @@
Column Curtain Search
</nb-card-header>
<nb-card-body>
<nb-search type="column-curtain" tag="column-curtain"></nb-search>
<nb-search
matRipple
[matRippleUnbounded]="true"
[matRippleCentered]="true"
[matRippleRadius]="36"
type="column-curtain"
tag="column-curtain"
></nb-search>
</nb-card-body>
</nb-card>
</div>