Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-01-08 02:28:50 +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 Maksim Karatkevich
parent bef0105a9f
commit 3f77efdabf
34 changed files with 1538 additions and 21 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,12 +1,28 @@
<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>
<ngx-layout-direction-switcher class="direction-switcher"></ngx-layout-direction-switcher>
</div>
@ -14,12 +30,32 @@
<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);