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

Add material menu icon for material themes

Browse source
This commit is contained in:
eugene-sinitsyn 2020-03-06 15:47:34 +03:00 • committed by Maksim Karatkevich
parent bf4be1a4fe
commit 6a3918900f
6 changed files with 43 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8,7 +8,7 @@
[matRippleCentered]="true"
(click)="toggleSidebar()"
>
<nb-icon icon="menu-2-outline"></nb-icon>
<nb-icon [icon]="(materialTheme$ | async) ? 'menu-outline' : 'menu-2-outline'"></nb-icon>
</a>
<a class="logo" href="#" (click)="navigateHome()">ngx-<span>admin</span></a>
</div>

24
src/app/@theme/components/header/header.component.ts
View file

@ -4,7 +4,7 @@ import { NbMediaBreakpointsService, NbMenuService, NbSidebarService, NbThemeServ
import { UserData } from '../../../@core/data/users';
import { LayoutService } from '../../../@core/utils';
import { map, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { Subject, Observable } from 'rxjs';
import { RippleService } from '../../../@core/utils/ripple.service';
@Component({
@ -15,6 +15,7 @@ import { RippleService } from '../../../@core/utils/ripple.service';
export class HeaderComponent implements OnInit, OnDestroy {
private destroy$: Subject<void> = new Subject<void>();
public readonly materialTheme$: Observable<boolean>;
userPictureOnly: boolean = false;
user: any;
@ -49,13 +50,20 @@ export class HeaderComponent implements OnInit, OnDestroy {
userMenu = [ { title: 'Profile' }, { title: 'Log out' } ];
constructor(private sidebarService: NbSidebarService,
private menuService: NbMenuService,
private themeService: NbThemeService,
private userService: UserData,
private layoutService: LayoutService,
private breakpointService: NbMediaBreakpointsService,
private rippleService: RippleService) {
public constructor(
private sidebarService: NbSidebarService,
private menuService: NbMenuService,
private themeService: NbThemeService,
private userService: UserData,
private layoutService: LayoutService,
private breakpointService: NbMediaBreakpointsService,
private rippleService: RippleService,
) {
this.materialTheme$ = this.themeService.onThemeChange()
.pipe(map(theme => {
const themeName: string = theme?.name || '';
return themeName.startsWith('material');
}));
}
ngOnInit() {

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

@ -120,7 +120,7 @@
</nb-card-body>
</nb-card>
<nb-card *ngIf="materialThemeActivated">
<nb-card *ngIf="materialTheme$ | async">
<nb-card-body>
<ngx-material-buttons></ngx-material-buttons>
</nb-card-body>

28
src/app/pages/forms/buttons/buttons.component.ts
View file

@ -1,30 +1,26 @@
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Component } from '@angular/core';
import { NbComponentShape, NbComponentSize, NbComponentStatus, NbThemeService } from '@nebular/theme';
import { Subscription } from 'rxjs';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
selector: 'ngx-buttons',
styleUrls: ['./buttons.component.scss'],
templateUrl: './buttons.component.html',
})
export class ButtonsComponent implements OnInit, OnDestroy {
public constructor(private readonly themeService: NbThemeService) {}
export class ButtonsComponent {
public constructor(private readonly themeService: NbThemeService) {
this.materialTheme$ = this.themeService.onThemeChange()
.pipe(map(theme => {
const themeName: string = theme?.name || '';
return themeName.startsWith('material');
}));
}
private readonly subscription: Subscription = new Subscription();
public readonly materialTheme$: Observable<boolean>;
public readonly statuses: NbComponentStatus[] = [ 'primary', 'success', 'info', 'warning', 'danger' ];
public readonly shapes: NbComponentShape[] = [ 'rectangle', 'semi-round', 'round' ];
public readonly sizes: NbComponentSize[] = [ 'tiny', 'small', 'medium', 'large', 'giant' ];
public materialThemeActivated: boolean = false;
public ngOnInit(): void {
this.subscription.add(this.themeService.onThemeChange().subscribe(theme => {
const themeName: string = theme?.name || '';
this.materialThemeActivated = themeName.startsWith('material');
}));
}
public ngOnDestroy(): void {
this.subscription.unsubscribe();
}
}

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

@ -85,7 +85,7 @@
</nb-card>
</div>
</div>
<div *ngIf="materialThemeActivated" class="row">
<div *ngIf="materialTheme$ | async" class="row">
<div class="col-lg-12">
<ngx-material-inputs></ngx-material-inputs>
</div>

29
src/app/pages/forms/form-inputs/form-inputs.component.ts
View file

@ -1,30 +1,25 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Component } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { Subscription } from 'rxjs';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
selector: 'ngx-form-inputs',
styleUrls: ['./form-inputs.component.scss'],
templateUrl: './form-inputs.component.html',
})
export class FormInputsComponent implements OnInit, OnDestroy {
public constructor(private readonly themeService: NbThemeService) {}
export class FormInputsComponent {
public constructor(private readonly themeService: NbThemeService) {
this.materialTheme$ = this.themeService.onThemeChange()
.pipe(map(theme => {
const themeName: string = theme?.name || '';
return themeName.startsWith('material');
}));
}
private readonly subscription: Subscription = new Subscription();
public readonly materialTheme$: Observable<boolean>;
public materialThemeActivated: boolean = false;
public starRate: number = 2;
public heartRate: number = 4;
public radioGroupValue: string = 'This is value 2';
public ngOnInit(): void {
this.subscription.add(this.themeService.onThemeChange().subscribe(theme => {
const themeName: string = theme?.name || '';
this.materialThemeActivated = themeName.startsWith('material');
}));
}
public ngOnDestroy(): void {
this.subscription.unsubscribe();
}
}