mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-02-11 10:54:21 +01:00
feat: demo version additions
This commit is contained in:
Sergey Andrievskiy
parent
8f0a950bcc
commit
713aff561e
35 changed files with 1406 additions and 40 deletions
|
|
@ -0,0 +1,64 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
nb-card {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 6rem;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
height: 100%;
|
||||
padding: 0.625rem;
|
||||
}
|
||||
|
||||
.icon {
|
||||
background-color: nb-theme(color-primary-default);
|
||||
border-radius: nb-theme(card-border-radius);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 5.75rem;
|
||||
height: 100%;
|
||||
transition: width 0.4s ease;
|
||||
transform: translate3d(0, 0, 0);
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-webkit-backface-visibility: hidden;
|
||||
|
||||
::ng-deep svg {
|
||||
fill: nb-theme(text-control-color);
|
||||
}
|
||||
}
|
||||
|
||||
nb-icon {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.details {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
@include nb-ltr(padding, 0 0.5rem 0 0.625rem);
|
||||
@include nb-rtl(padding, 0 0.625rem 0 0.5rem);
|
||||
border-left: 1px solid transparent;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.actions {
|
||||
@include nb-ltr(padding, 0 1.15rem 0 0.5rem);
|
||||
@include nb-rtl(padding, 0 0.5rem 0 1.15rem);
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.icon-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
|
||||
import { NbComponentSize, NbComponentStatus, NbMediaBreakpointsService, NbThemeService } from '@nebular/theme';
|
||||
import { map, takeUntil } from 'rxjs/operators';
|
||||
import { Subject } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-call-action-card',
|
||||
styleUrls: ['./call-action-card.component.scss'],
|
||||
template: `
|
||||
<nb-card>
|
||||
<div class="icon-container">
|
||||
<div class="icon">
|
||||
<nb-icon [icon]="type"></nb-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="details">
|
||||
<div class="title h6">{{ title }}</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<a nbButton [size]="buttonSize" [status]="getButtonStatus()" hero [href]="link">
|
||||
{{ linkTitle }}
|
||||
</a>
|
||||
</div>
|
||||
</nb-card>
|
||||
`,
|
||||
})
|
||||
export class CallActionCardComponent implements OnInit, OnDestroy {
|
||||
|
||||
private destroy$ = new Subject<void>();
|
||||
|
||||
@Input() title: string;
|
||||
@Input() type: string;
|
||||
@Input() link: string;
|
||||
@Input() linkTitle: string;
|
||||
|
||||
currentTheme: string;
|
||||
buttonSize: NbComponentSize;
|
||||
|
||||
constructor(
|
||||
private themeService: NbThemeService,
|
||||
private breakpointService: NbMediaBreakpointsService,
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.themeService.getJsTheme()
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe(theme => {
|
||||
this.currentTheme = theme.name;
|
||||
});
|
||||
|
||||
const { xxl } = this.breakpointService.getBreakpointsMap();
|
||||
this.themeService.onMediaQueryChange()
|
||||
.pipe(
|
||||
map(([, currentBreakpoint]) => currentBreakpoint.width < xxl),
|
||||
takeUntil(this.destroy$),
|
||||
)
|
||||
.subscribe((isLessThanXxl: boolean) => {
|
||||
this.buttonSize = isLessThanXxl
|
||||
? 'small'
|
||||
: 'large';
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
|
||||
getButtonStatus(): NbComponentStatus {
|
||||
switch (this.currentTheme) {
|
||||
case 'cosmic': return 'primary';
|
||||
case 'corporate': return 'warning';
|
||||
default: return 'danger';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -5,13 +5,20 @@ import { Component } from '@angular/core';
|
|||
styleUrls: ['./footer.component.scss'],
|
||||
template: `
|
||||
<span class="created-by">
|
||||
Created with ♥ by <b><a href="https://akveo.page.link/8V2f" target="_blank">Akveo</a></b> 2019
|
||||
Created with ♥ by <b><a href="http://akveo.com?utm_source=ngx-admin-demo&utm_medium=footer"
|
||||
target="_blank">Akveo</a></b> 2019.
|
||||
Made with
|
||||
<b>
|
||||
<a href="https://akveo.github.io/nebular/?utm_source=ngx-admin&utm_medium=footer_link" target="_blank">
|
||||
Nebular.
|
||||
</a>
|
||||
</b>
|
||||
</span>
|
||||
<div class="socials">
|
||||
<a href="#" target="_blank" class="ion ion-social-github"></a>
|
||||
<a href="#" target="_blank" class="ion ion-social-facebook"></a>
|
||||
<a href="#" target="_blank" class="ion ion-social-twitter"></a>
|
||||
<a href="#" target="_blank" class="ion ion-social-linkedin"></a>
|
||||
<a href="https://github.com/akveo/ngx-admin" target="_blank" class="ion ion-social-github"></a>
|
||||
<a href="https://www.facebook.com/akveo/" target="_blank" class="ion ion-social-facebook"></a>
|
||||
<a href="https://twitter.com/akveo_inc" target="_blank" class="ion ion-social-twitter"></a>
|
||||
<a href="https://www.linkedin.com/company/akveo" target="_blank" class="ion ion-social-linkedin"></a>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
matRipple
|
||||
[selected]="currentTheme"
|
||||
(selectedChange)="changeTheme($event)"
|
||||
class="theme-select"
|
||||
>
|
||||
<nb-option
|
||||
*ngFor="let theme of themes"
|
||||
|
|
@ -29,22 +30,50 @@
|
|||
<div class="header-container">
|
||||
<nb-actions size="small">
|
||||
|
||||
<nb-action class="control-item">
|
||||
<nb-action class="control-item github-stars">
|
||||
<span class="subtitle text"
|
||||
[class.text-control]="materialTheme$ | async">
|
||||
Support us:
|
||||
</span>
|
||||
<iframe src="https://ghbtns.com/github-btn.html?user=akveo&repo=ngx-admin&type=star&count=true"
|
||||
frameborder="0"
|
||||
scrolling="0"
|
||||
width="170px"
|
||||
height="20px">
|
||||
</iframe>
|
||||
</nb-action>
|
||||
<nb-action class="control-item downloads-count">
|
||||
<nb-icon icon="download"></nb-icon>
|
||||
<span class="subtitle number"
|
||||
[class.text-control]="materialTheme$ | async">
|
||||
358.000
|
||||
</span>
|
||||
</nb-action>
|
||||
<nb-action class="control-item contact-us">
|
||||
<a nbButton ghost href="mailto:contact@akveo.com" (click)="trackEmailClick()">
|
||||
<nb-icon icon="email-outline" pack="eva"></nb-icon>
|
||||
<span [class.text-control]="materialTheme$ | async">
|
||||
contact@akveo.com
|
||||
</span>
|
||||
</a>
|
||||
</nb-action>
|
||||
<nb-action class="control-item search">
|
||||
<nb-search
|
||||
type="rotate-layout"
|
||||
matRipple
|
||||
[matRippleUnbounded]="true"
|
||||
[matRippleCentered]="true"
|
||||
(click)="startSearch()"
|
||||
></nb-search></nb-action>
|
||||
<nb-action
|
||||
class="control-item"
|
||||
class="control-item email"
|
||||
icon="email-outline"
|
||||
matRipple
|
||||
[matRippleUnbounded]="true"
|
||||
[matRippleCentered]="true"
|
||||
></nb-action>
|
||||
<nb-action
|
||||
class="control-item"
|
||||
class="control-item notifications"
|
||||
icon="bell-outline"
|
||||
matRipple
|
||||
[matRippleUnbounded]="true"
|
||||
|
|
|
|||
|
|
@ -23,10 +23,30 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-family: nb-theme(text-subtitle-font-family);
|
||||
font-size: nb-theme(text-subtitle-font-size);
|
||||
font-weight: nb-theme(text-subtitle-font-weight);
|
||||
line-height: nb-theme(text-subtitle-line-height);
|
||||
}
|
||||
|
||||
.downloads-count .number {
|
||||
@include nb-ltr(margin-left, 0.5rem);
|
||||
@include nb-rtl(margin-right, 0.5rem);
|
||||
}
|
||||
|
||||
::ng-deep nb-search button {
|
||||
padding: 0!important;
|
||||
}
|
||||
|
||||
.contact-us {
|
||||
padding: 0;
|
||||
|
||||
nb-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -52,18 +72,55 @@
|
|||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.control-item {
|
||||
.github-stars {
|
||||
width: 250px;
|
||||
display: flex;
|
||||
|
||||
iframe {
|
||||
width: 105px;
|
||||
@include nb-ltr(margin-left, 1rem);
|
||||
@include nb-rtl(margin-right, 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
.control-item.search,
|
||||
.control-item.notifications,
|
||||
.control-item.email,
|
||||
.control-item.github-stars .text {
|
||||
display: none;
|
||||
}
|
||||
.user-action {
|
||||
border: none;
|
||||
padding: 0;
|
||||
|
||||
.control-item.github-stars {
|
||||
width: auto;
|
||||
|
||||
iframe {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
.downloads-count {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.theme-select {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.contact-us {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
nb-select {
|
||||
.github-stars,
|
||||
.user-action {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
|
|||
import { NbMediaBreakpointsService, NbMenuService, NbSidebarService, NbThemeService } from '@nebular/theme';
|
||||
|
||||
import { UserData } from '../../../@core/data/users';
|
||||
import { LayoutService } from '../../../@core/utils';
|
||||
import { AnalyticsService, LayoutService } from '../../../@core/utils';
|
||||
import { map, takeUntil } from 'rxjs/operators';
|
||||
import { Subject, Observable } from 'rxjs';
|
||||
import { RippleService } from '../../../@core/utils/ripple.service';
|
||||
|
|
@ -58,6 +58,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
|
|||
private layoutService: LayoutService,
|
||||
private breakpointService: NbMediaBreakpointsService,
|
||||
private rippleService: RippleService,
|
||||
private analytics: AnalyticsService,
|
||||
) {
|
||||
this.materialTheme$ = this.themeService.onThemeChange()
|
||||
.pipe(map(theme => {
|
||||
|
|
@ -112,4 +113,12 @@ export class HeaderComponent implements OnInit, OnDestroy {
|
|||
this.menuService.navigateHome();
|
||||
return false;
|
||||
}
|
||||
|
||||
startSearch() {
|
||||
this.analytics.trackEvent('startSearch');
|
||||
}
|
||||
|
||||
trackEmailClick() {
|
||||
this.analytics.trackEvent('clickContactEmail', 'click');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,3 +2,8 @@ export * from './header/header.component';
|
|||
export * from './footer/footer.component';
|
||||
export * from './search-input/search-input.component';
|
||||
export * from './tiny-mce/tiny-mce.component';
|
||||
export * from './call-action-card/call-action-card.component';
|
||||
export * from './theme-settings/theme-settings.component';
|
||||
export * from './switcher/switcher.component';
|
||||
export * from './layout-direction-switcher/layout-direction-switcher.component';
|
||||
export * from './toggle-settings-button/toggle-settings-button.component';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
import { Component, OnDestroy, Input } from '@angular/core';
|
||||
import { NbLayoutDirectionService, NbLayoutDirection } from '@nebular/theme';
|
||||
import { takeWhile } from 'rxjs/operators';
|
||||
import { AnalyticsService } from '../../../@core/utils/analytics.service';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-layout-direction-switcher',
|
||||
template: `
|
||||
<ngx-switcher
|
||||
[firstValue]="directions.RTL"
|
||||
[secondValue]="directions.LTR"
|
||||
[firstValueLabel]="'RTL'"
|
||||
[secondValueLabel]="'LTR'"
|
||||
[value]="currentDirection"
|
||||
(valueChange)="toggleDirection($event)"
|
||||
[vertical]="vertical">
|
||||
</ngx-switcher>
|
||||
`,
|
||||
})
|
||||
export class LayoutDirectionSwitcherComponent implements OnDestroy {
|
||||
directions = NbLayoutDirection;
|
||||
currentDirection: NbLayoutDirection;
|
||||
alive = true;
|
||||
|
||||
@Input() vertical: boolean = false;
|
||||
|
||||
constructor(private directionService: NbLayoutDirectionService,
|
||||
private analyticsService: AnalyticsService) {
|
||||
this.currentDirection = this.directionService.getDirection();
|
||||
|
||||
this.directionService.onDirectionChange()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe(newDirection => this.currentDirection = newDirection);
|
||||
}
|
||||
|
||||
toggleDirection(newDirection) {
|
||||
this.directionService.setDirection(newDirection);
|
||||
|
||||
this.analyticsService.trackEvent('toggleDirection', newDirection);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.alive = false;
|
||||
}
|
||||
}
|
||||
91
src/app/@theme/components/switcher/switcher.component.scss
Normal file
91
src/app/@theme/components/switcher/switcher.component.scss
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
@import '../../styles/themes';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
.switch-label {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
|
||||
&.vertical {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.first,
|
||||
.second {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.switch {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
& > span {
|
||||
transition: opacity 0.3s ease;
|
||||
color: nb-theme(text-hint-color);
|
||||
|
||||
&.first {
|
||||
@include nb-ltr(padding-right, 10px);
|
||||
@include nb-rtl(padding-left, 10px);
|
||||
}
|
||||
|
||||
&.second {
|
||||
@include nb-ltr(padding-left, 10px);
|
||||
@include nb-rtl(padding-right, 10px);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: nb-theme(text-basic-color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.78;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 3rem;
|
||||
height: 1.5rem;
|
||||
margin: 0;
|
||||
|
||||
input {
|
||||
display: none;
|
||||
|
||||
&:checked + .slider::before {
|
||||
@include nb-ltr(transform, translateX(1.5rem));
|
||||
@include nb-rtl(transform, translateX(-1.5rem));
|
||||
}
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 1.75rem;
|
||||
background-color: nb-theme(background-basic-color-2);
|
||||
}
|
||||
|
||||
.slider::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
border-radius: 50%;
|
||||
background-color: nb-theme(color-primary-default);
|
||||
transition: 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
58
src/app/@theme/components/switcher/switcher.component.ts
Normal file
58
src/app/@theme/components/switcher/switcher.component.ts
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-switcher',
|
||||
styleUrls: ['./switcher.component.scss'],
|
||||
template: `
|
||||
<label class="switch-label" [class.vertical]="vertical">
|
||||
<span class="first" [class.active]="vertical || isFirstValue()">
|
||||
{{vertical ? currentValueLabel() : firstValueLabel}}
|
||||
</span>
|
||||
|
||||
<div class="switch">
|
||||
<input type="checkbox" [checked]="isSecondValue()" (change)="changeValue()">
|
||||
<span class="slider"></span>
|
||||
</div>
|
||||
|
||||
<span *ngIf="!vertical"
|
||||
class="second"
|
||||
[class.active]="isSecondValue()">
|
||||
{{secondValueLabel}}
|
||||
</span>
|
||||
</label>
|
||||
`,
|
||||
})
|
||||
export class SwitcherComponent {
|
||||
@Input() firstValue: any;
|
||||
@Input() secondValue: any;
|
||||
|
||||
@Input() firstValueLabel: string;
|
||||
@Input() secondValueLabel: string;
|
||||
|
||||
@Input() vertical: boolean;
|
||||
|
||||
@Input() value: any;
|
||||
@Output() valueChange = new EventEmitter<any>();
|
||||
|
||||
isFirstValue() {
|
||||
return this.value === this.firstValue;
|
||||
}
|
||||
|
||||
isSecondValue() {
|
||||
return this.value === this.secondValue;
|
||||
}
|
||||
|
||||
currentValueLabel() {
|
||||
return this.isFirstValue()
|
||||
? this.firstValueLabel
|
||||
: this.secondValueLabel;
|
||||
}
|
||||
|
||||
changeValue() {
|
||||
this.value = this.isFirstValue()
|
||||
? this.secondValue
|
||||
: this.firstValue;
|
||||
|
||||
this.valueChange.emit(this.value);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
@import '../../styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
.subheader {
|
||||
display: block;
|
||||
font-family: nb-theme(text-subtitle-font-family);
|
||||
font-size: nb-theme(text-subtitle-font-size);
|
||||
font-weight: nb-theme(text-subtitle-font-weight);
|
||||
line-height: nb-theme(text-subtitle-line-height);
|
||||
margin-bottom: 0.875rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.layout-setting-heading {
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.setting-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.settings-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
margin: 0 0 2.575rem;
|
||||
}
|
||||
|
||||
.switcher {
|
||||
width: 12rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
import { StateService } from '../../../@core/utils';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-theme-settings',
|
||||
styleUrls: ['./theme-settings.component.scss'],
|
||||
template: `
|
||||
<span class="subheader">Layouts</span>
|
||||
<div class="settings-row">
|
||||
<button *ngFor="let layout of layouts"
|
||||
nbButton
|
||||
[appearance]="layout.selected ? 'outline' : 'ghost'"
|
||||
[attr.aria-label]="layout.name"
|
||||
(click)="layoutSelect(layout)"
|
||||
class="select-button">
|
||||
<i [attr.class]="layout.icon + ' setting-icon'"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<span class="subheader">Sidebar</span>
|
||||
<div class="settings-row">
|
||||
<button *ngFor="let sidebar of sidebars"
|
||||
nbButton
|
||||
[appearance]="sidebar.selected ? 'outline' : 'ghost'"
|
||||
[attr.aria-label]="sidebar.name"
|
||||
(click)="sidebarSelect(sidebar)"
|
||||
class="select-button">
|
||||
<i [attr.class]="sidebar.icon + ' setting-icon'"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<span class="subheader layout-setting-heading">Layout direction</span>
|
||||
<div class="settings-row">
|
||||
<div class="switcher">
|
||||
<ngx-layout-direction-switcher></ngx-layout-direction-switcher>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
export class ThemeSettingsComponent {
|
||||
|
||||
layouts = [];
|
||||
sidebars = [];
|
||||
|
||||
constructor(protected stateService: StateService) {
|
||||
this.stateService.getLayoutStates()
|
||||
.subscribe((layouts: any[]) => this.layouts = layouts);
|
||||
|
||||
this.stateService.getSidebarStates()
|
||||
.subscribe((sidebars: any[]) => this.sidebars = sidebars);
|
||||
}
|
||||
|
||||
layoutSelect(layout: any): boolean {
|
||||
this.layouts = this.layouts.map((l: any) => {
|
||||
l.selected = false;
|
||||
return l;
|
||||
});
|
||||
|
||||
layout.selected = true;
|
||||
this.stateService.setLayoutState(layout);
|
||||
return false;
|
||||
}
|
||||
|
||||
sidebarSelect(sidebar: any): boolean {
|
||||
this.sidebars = this.sidebars.map((s: any) => {
|
||||
s.selected = false;
|
||||
return s;
|
||||
});
|
||||
|
||||
sidebar.selected = true;
|
||||
this.stateService.setSidebarState(sidebar);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
@import '../../styles/themes';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
border-radius: nb-theme(button-rectangle-border-radius);
|
||||
box-shadow: nb-theme(card-shadow);
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
transition: transform 0.3s ease;
|
||||
z-index: 998;
|
||||
|
||||
@include nb-ltr() {
|
||||
&.position-start {
|
||||
left: 0;
|
||||
|
||||
&,
|
||||
.toggle-settings {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
transform: translateX(nb-theme(sidebar-width));
|
||||
}
|
||||
}
|
||||
|
||||
&.position-end {
|
||||
right: 0;
|
||||
|
||||
&,
|
||||
.toggle-settings {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
transform: translateX(-#{nb-theme(sidebar-width)});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include nb-rtl() {
|
||||
&.position-start {
|
||||
right: 0;
|
||||
|
||||
&,
|
||||
.toggle-settings {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
transform: translateX(-#{nb-theme(sidebar-width)});
|
||||
}
|
||||
}
|
||||
|
||||
&.position-end {
|
||||
left: 0;
|
||||
|
||||
&,
|
||||
.toggle-settings {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
transform: translateX(nb-theme(sidebar-width));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-settings {
|
||||
background: nb-theme(color-basic-100);
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 1.65rem;
|
||||
|
||||
&.icon-pulse {
|
||||
animation-name: gear-pulse;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gear-pulse {
|
||||
from {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale3d(1.2, 1.2, 1.2);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.toggle-settings {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
import { Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
|
||||
import { NbSidebarService } from '@nebular/theme';
|
||||
import { StateService } from '../../../@core/utils';
|
||||
import { Subject } from 'rxjs';
|
||||
import { map, takeUntil } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-toggle-settings-button',
|
||||
styleUrls: ['./toggle-settings-button.component.scss'],
|
||||
template: `
|
||||
<button nbButton appearance="outline" class="toggle-settings" (click)="toggleSettings()">
|
||||
<nb-icon class="icon" [class.icon-pulse]="enablePulse" icon="settings-2-outline" pack="eva"></nb-icon>
|
||||
</button>
|
||||
`,
|
||||
})
|
||||
export class ToggleSettingsButtonComponent implements OnInit, OnDestroy {
|
||||
|
||||
protected destroy$ = new Subject<void>();
|
||||
|
||||
enablePulse = true;
|
||||
|
||||
@HostBinding('class.position-start') positionStart = false;
|
||||
@HostBinding('class.position-end') positionEnd = false;
|
||||
@HostBinding('class.expanded') expanded = false;
|
||||
|
||||
constructor(
|
||||
protected sidebarService: NbSidebarService,
|
||||
protected stateService: StateService,
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.stateService.onSidebarState()
|
||||
.pipe(
|
||||
map(sidebar => sidebar.id !== 'end'),
|
||||
takeUntil(this.destroy$),
|
||||
)
|
||||
.subscribe((isSettingsSidebarEnd: boolean) => {
|
||||
this.positionEnd = isSettingsSidebarEnd;
|
||||
this.positionStart = !isSettingsSidebarEnd;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
|
||||
toggleSettings() {
|
||||
this.sidebarService.toggle(false, 'settings-sidebar');
|
||||
this.expanded = !this.expanded;
|
||||
this.enablePulse = false;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
export * from './one-column/one-column.layout';
|
||||
export * from './two-columns/two-columns.layout';
|
||||
export * from './three-columns/three-columns.layout';
|
||||
export * from './sample/sample.layout';
|
||||
|
|
|
|||
25
src/app/@theme/layouts/sample/sample.layout.scss
Normal file
25
src/app/@theme/layouts/sample/sample.layout.scss
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
@import '../../styles/themes';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
nb-layout-column.small {
|
||||
flex: 0.15 !important;
|
||||
}
|
||||
|
||||
nb-sidebar.settings-sidebar {
|
||||
$sidebar-width: 19rem;
|
||||
|
||||
transition: transform 0.3s ease;
|
||||
@include nb-ltr(transform, translate3d(100%, 0, 0));
|
||||
@include nb-rtl(transform, translate3d(-100%, 0, 0));
|
||||
&.start {
|
||||
@include nb-ltr(transform, translate3d(-100%, 0, 0));
|
||||
@include nb-rtl(transform, translate3d(100%, 0, 0));
|
||||
}
|
||||
|
||||
&.expanded, &.expanded.start {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
159
src/app/@theme/layouts/sample/sample.layout.ts
Normal file
159
src/app/@theme/layouts/sample/sample.layout.ts
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
import { Component, Inject, OnDestroy, OnInit, PLATFORM_ID, ViewChild } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { delay, withLatestFrom, takeUntil } from 'rxjs/operators';
|
||||
import {
|
||||
NbLayoutComponent,
|
||||
NbMediaBreakpoint,
|
||||
NbMediaBreakpointsService,
|
||||
NbMenuItem,
|
||||
NbMenuService,
|
||||
NbSidebarService,
|
||||
NbThemeService,
|
||||
} from '@nebular/theme';
|
||||
|
||||
import { StateService } from '../../../@core/utils';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-sample-layout',
|
||||
styleUrls: ['./sample.layout.scss'],
|
||||
template: `
|
||||
<nb-layout [center]="layout.id === 'center-column'" windowMode>
|
||||
<nb-layout-header fixed>
|
||||
<ngx-header></ngx-header>
|
||||
<ngx-toggle-settings-button></ngx-toggle-settings-button>
|
||||
</nb-layout-header>
|
||||
|
||||
<nb-sidebar class="menu-sidebar"
|
||||
tag="menu-sidebar"
|
||||
responsive
|
||||
[end]="isMenuSidebarPositionEnd()">
|
||||
<ng-content select="nb-menu"></ng-content>
|
||||
</nb-sidebar>
|
||||
|
||||
<nb-layout-column class="main-content">
|
||||
<ng-content select="router-outlet"></ng-content>
|
||||
</nb-layout-column>
|
||||
|
||||
<nb-layout-column start class="small" *ngIf="layout.id === 'two-column' || layout.id === 'three-column'">
|
||||
<nb-menu [items]="subMenu"></nb-menu>
|
||||
</nb-layout-column>
|
||||
|
||||
<nb-layout-column class="small" *ngIf="layout.id === 'three-column'">
|
||||
<nb-menu [items]="subMenu"></nb-menu>
|
||||
</nb-layout-column>
|
||||
|
||||
<nb-layout-footer fixed>
|
||||
<ngx-footer></ngx-footer>
|
||||
</nb-layout-footer>
|
||||
|
||||
<nb-sidebar class="settings-sidebar"
|
||||
tag="settings-sidebar"
|
||||
state="collapsed"
|
||||
fixed
|
||||
[end]="isSettingsSidebarPositionEnd()">
|
||||
<ngx-theme-settings></ngx-theme-settings>
|
||||
</nb-sidebar>
|
||||
</nb-layout>
|
||||
`,
|
||||
})
|
||||
export class SampleLayoutComponent implements OnInit, OnDestroy {
|
||||
|
||||
protected destroy$ = new Subject<void>();
|
||||
|
||||
subMenu: NbMenuItem[] = [
|
||||
{
|
||||
title: 'PAGE LEVEL MENU',
|
||||
group: true,
|
||||
},
|
||||
{
|
||||
title: 'Buttons',
|
||||
icon: 'ion ion-android-radio-button-off',
|
||||
link: '/pages/ui-features/buttons',
|
||||
},
|
||||
{
|
||||
title: 'Grid',
|
||||
icon: 'ion ion-android-radio-button-off',
|
||||
link: '/pages/ui-features/grid',
|
||||
},
|
||||
{
|
||||
title: 'Icons',
|
||||
icon: 'ion ion-android-radio-button-off',
|
||||
link: '/pages/ui-features/icons',
|
||||
},
|
||||
{
|
||||
title: 'Modals',
|
||||
icon: 'ion ion-android-radio-button-off',
|
||||
link: '/pages/ui-features/modals',
|
||||
},
|
||||
{
|
||||
title: 'Typography',
|
||||
icon: 'ion ion-android-radio-button-off',
|
||||
link: '/pages/ui-features/typography',
|
||||
},
|
||||
{
|
||||
title: 'Animated Searches',
|
||||
icon: 'ion ion-android-radio-button-off',
|
||||
link: '/pages/ui-features/search-fields',
|
||||
},
|
||||
{
|
||||
title: 'Tabs',
|
||||
icon: 'ion ion-android-radio-button-off',
|
||||
link: '/pages/ui-features/tabs',
|
||||
},
|
||||
];
|
||||
layout: any = {};
|
||||
sidebar: any = {};
|
||||
|
||||
currentTheme: string;
|
||||
|
||||
@ViewChild(NbLayoutComponent, { static: false }) layoutComponent: NbLayoutComponent;
|
||||
|
||||
constructor(protected stateService: StateService,
|
||||
protected menuService: NbMenuService,
|
||||
protected themeService: NbThemeService,
|
||||
protected bpService: NbMediaBreakpointsService,
|
||||
protected sidebarService: NbSidebarService,
|
||||
@Inject(PLATFORM_ID) protected platformId,
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.stateService.onLayoutState()
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe(layout => this.layout = layout);
|
||||
|
||||
this.stateService.onSidebarState()
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe(sidebar => this.sidebar = sidebar);
|
||||
|
||||
const isBp = this.bpService.getByName('is');
|
||||
this.menuService.onItemSelect()
|
||||
.pipe(
|
||||
withLatestFrom(this.themeService.onMediaQueryChange()),
|
||||
delay(20),
|
||||
takeUntil(this.destroy$),
|
||||
)
|
||||
.subscribe(([item, [bpFrom, bpTo]]: [any, [NbMediaBreakpoint, NbMediaBreakpoint]]) => {
|
||||
|
||||
if (bpTo.width <= isBp.width) {
|
||||
this.sidebarService.collapse('menu-sidebar');
|
||||
}
|
||||
});
|
||||
|
||||
this.themeService.getJsTheme()
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe(theme => this.currentTheme = theme.name);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
|
||||
isMenuSidebarPositionEnd(): boolean {
|
||||
return this.sidebar.id === 'end';
|
||||
}
|
||||
|
||||
isSettingsSidebarPositionEnd(): boolean {
|
||||
return !this.isMenuSidebarPositionEnd();
|
||||
}
|
||||
}
|
||||
|
|
@ -13,6 +13,7 @@ import {
|
|||
NbSelectModule,
|
||||
NbIconModule,
|
||||
NbThemeModule,
|
||||
NbCardModule,
|
||||
} from '@nebular/theme';
|
||||
import { NbEvaIconsModule } from '@nebular/eva-icons';
|
||||
import { NbSecurityModule } from '@nebular/security';
|
||||
|
|
@ -22,6 +23,11 @@ import {
|
|||
HeaderComponent,
|
||||
SearchInputComponent,
|
||||
TinyMCEComponent,
|
||||
CallActionCardComponent,
|
||||
ToggleSettingsButtonComponent,
|
||||
LayoutDirectionSwitcherComponent,
|
||||
SwitcherComponent,
|
||||
ThemeSettingsComponent,
|
||||
} from './components';
|
||||
import {
|
||||
CapitalizePipe,
|
||||
|
|
@ -34,6 +40,7 @@ import {
|
|||
OneColumnLayoutComponent,
|
||||
ThreeColumnsLayoutComponent,
|
||||
TwoColumnsLayoutComponent,
|
||||
SampleLayoutComponent,
|
||||
} from './layouts';
|
||||
import { DEFAULT_THEME } from './styles/theme.default';
|
||||
import { COSMIC_THEME } from './styles/theme.cosmic';
|
||||
|
|
@ -55,6 +62,7 @@ const NB_MODULES = [
|
|||
NbSelectModule,
|
||||
NbIconModule,
|
||||
NbEvaIconsModule,
|
||||
NbCardModule,
|
||||
];
|
||||
const COMPONENTS = [
|
||||
HeaderComponent,
|
||||
|
|
@ -64,6 +72,12 @@ const COMPONENTS = [
|
|||
OneColumnLayoutComponent,
|
||||
ThreeColumnsLayoutComponent,
|
||||
TwoColumnsLayoutComponent,
|
||||
CallActionCardComponent,
|
||||
ToggleSettingsButtonComponent,
|
||||
LayoutDirectionSwitcherComponent,
|
||||
SwitcherComponent,
|
||||
SampleLayoutComponent,
|
||||
ThemeSettingsComponent,
|
||||
];
|
||||
const PIPES = [
|
||||
CapitalizePipe,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue