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

nebular update and structure refactoring

Browse source
This commit is contained in:
Dmitry Nehaychik 2019-06-11 18:18:58 +03:00
parent 78e4d2cfe9
commit df489ad17e
100 changed files with 736 additions and 3945 deletions
Download patch file Download diff file Expand all files Collapse all files

29
package-lock.json generated
View file

@ -1639,24 +1639,29 @@
"dev": true "dev": true
}, },
"@nebular/auth": { "@nebular/auth": {
"version": "4.0.0-rc.6", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/@nebular/auth/-/auth-4.0.0-rc.6.tgz", "resolved": "https://registry.npmjs.org/@nebular/auth/-/auth-4.0.0.tgz",
"integrity": "sha512-fHn+6WMOQvj6dIuvPcbb2P3m1yp+gPX05vrgUYhRQeT0WzXZi/3vwu8+EvHUgqFowy/Tk0jCiTvHEYj5kWgrYA==" "integrity": "sha512-VShBFTpWDjaM1yWPZLilwaf1+/ZDs+W3bEKtmW8MTs+eG6pJX9ulyicPax/B3l5MT2PQ2AKdvRNEd9LgfBTT5Q=="
}, },
"@nebular/bootstrap": { "@nebular/bootstrap": {
"version": "4.0.0-rc.5", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/@nebular/bootstrap/-/bootstrap-4.0.0-rc.5.tgz", "resolved": "https://registry.npmjs.org/@nebular/bootstrap/-/bootstrap-4.0.0.tgz",
"integrity": "sha512-58/vfemsHXjv6OFaVk8MPAzX2EDjb9PNOrPjYTeoa5337Lv098vG9tlYNo1Eq1anOFepAG/uFJoMbntTUFfO5w==" "integrity": "sha512-YiHPeAp2HOXf0yGmA0wfDVTonc1Aiy4I6yn42Xd2PlBKv7a8sXq+W7vBkUNdMiS/+8vQeCCvCxelcdXDsTxjXw=="
},
"@nebular/eva-icons": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@nebular/eva-icons/-/eva-icons-4.0.0.tgz",
"integrity": "sha512-Cce27XeE1U8opWyf4jXZWXDxx0EsaxLuz5SA5iyyBPV21JcXXdhmO8+jFwnu0YlqrwNePF0pKj/7GYJGs1JWfw=="
}, },
"@nebular/security": { "@nebular/security": {
"version": "4.0.0-rc.6", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/@nebular/security/-/security-4.0.0-rc.6.tgz", "resolved": "https://registry.npmjs.org/@nebular/security/-/security-4.0.0.tgz",
"integrity": "sha512-ZpxF3fmr68ER4Os4dkJGguq7nh9CFG68c+U210bUWrPDP6TqvZUeO76Txpetvinkw3ze65QX6Sh0xxG7SiYxaA==" "integrity": "sha512-e5SEZIMGOT1DwNql+TmAv1hC9WcH5DMHyfbJWzfJST1t8I9rkuSFYIYg5Luvf0id5LknjsqrNbjxu3lC01uitQ=="
}, },
"@nebular/theme": { "@nebular/theme": {
"version": "4.0.0-rc.6", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/@nebular/theme/-/theme-4.0.0-rc.6.tgz", "resolved": "https://registry.npmjs.org/@nebular/theme/-/theme-4.0.0.tgz",
"integrity": "sha512-lRdwiVkiqrAMEjYQfhQuH96dIpJoQIEWG2Hr68Io3U0XF3Y+OcWVO9iA8BZ9YqI8ZCNAFCoRI3uuqdLpUQNbUw==", "integrity": "sha512-wFPLMRvHKkcKH/oKuc8TtXFJOaeFWYOvG7AvkgI3IqtkHa+x8fEsz4EMLFPOh4XADOjxXHo8wAHI3vhsgyavcg==",
"requires": { "requires": {
"intersection-observer": "0.5.0" "intersection-observer": "0.5.0"
} }

9
package.json
View file

@ -40,10 +40,11 @@
"@angular/platform-browser-dynamic": "^8.0.0", "@angular/platform-browser-dynamic": "^8.0.0",
"@angular/router": "^8.0.0", "@angular/router": "^8.0.0",
"@asymmetrik/ngx-leaflet": "3.0.1", "@asymmetrik/ngx-leaflet": "3.0.1",
"@nebular/auth": "4.0.0-rc.6", "@nebular/auth": "4.0.0",
"@nebular/bootstrap": "4.0.0-rc.5", "@nebular/bootstrap": "4.0.0",
"@nebular/security": "4.0.0-rc.6", "@nebular/eva-icons": "^4.0.0",
"@nebular/theme": "4.0.0-rc.6", "@nebular/security": "4.0.0",
"@nebular/theme": "4.0.0",
"@ng-bootstrap/ng-bootstrap": "^4.0.0", "@ng-bootstrap/ng-bootstrap": "^4.0.0",
"@swimlane/ngx-charts": "^10.0.0", "@swimlane/ngx-charts": "^10.0.0",
"angular-tree-component": "7.2.0", "angular-tree-component": "7.2.0",

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

@ -1,26 +1,29 @@
<div class="header-container" <div class="header-container"
[class.left]="position === 'normal'" [class.left]="position === 'normal'"
[class.right]="position === 'inverse'"> [class.right]="position === 'inverse'">
<div class="logo-containter"> <div class="logo-container">
<a (click)="toggleSidebar()" href="#" class="navigation"><i class="nb-menu"></i></a> <a (click)="toggleSidebar()" href="#" class="navigation">
<div class="logo" (click)="goToHome()">ngx-<span>admin</span></div> <nb-icon icon="menu-2-outline"></nb-icon>
</a>
<a class="logo" href="#" (click)="navigateHome()">ngx-<span>admin</span></a>
</div> </div>
<ngx-theme-switcher></ngx-theme-switcher> <nb-select [(selected)]="currentTheme" (selectedChange)="toggleTheme()" status="primary">
<nb-option *ngFor="let theme of themes" [value]="theme.value"> {{ theme.name }}</nb-option>
</nb-select>
</div> </div>
<div class="header-container"> <div class="header-container">
<ngx-layout-direction-switcher></ngx-layout-direction-switcher>
<nb-actions <nb-actions
size="medium" size="small"
[class.right]="position === 'normal'" [class.right]="position === 'normal'"
[class.left]="position === 'inverse'"> [class.left]="position === 'inverse'">
<nb-action *nbIsGranted="['view', 'user']" > <nb-action *nbIsGranted="['view', 'user']" >
<nb-user [nbContextMenu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user> <nb-user [nbContextMenu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
</nb-action> </nb-action>
<nb-action class="control-item" disabled icon="nb-notifications"></nb-action> <nb-action class="control-item" icon="bell-outline"></nb-action>
<nb-action class="control-item" icon="nb-email"></nb-action> <nb-action class="control-item" icon="email-outline"></nb-action>
<nb-action class="control-item"> <nb-action class="control-item">
<nb-search type="rotate-layout" (click)="startSearch()"></nb-search> <nb-search type="rotate-layout"></nb-search>
</nb-action> </nb-action>
</nb-actions> </nb-actions>
</div> </div>

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

@ -1,7 +1,7 @@
@import '../../styles/themes'; @import '../../styles/themes';
@import '~bootstrap/scss/mixins/breakpoints'; //@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints'; //@import '~@nebular/theme/styles/global/breakpoints';
//
@include nb-install-component() { @include nb-install-component() {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -18,14 +18,24 @@
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.logo-containter { .logo-container {
display: flex; display: flex;
align-items: center; align-items: center;
width: calc(#{nb-theme(sidebar-width)} - #{nb-theme(header-padding)}); width: calc(#{nb-theme(sidebar-width)} - #{nb-theme(header-padding)});
} }
.control-item { nb-action {
display: block; height: auto;
display: flex;
align-content: center;
}
nb-user {
cursor: pointer;
}
::ng-deep nb-search button {
padding: 0!important;
} }
.header-container { .header-container {
@ -34,179 +44,173 @@
width: auto; width: auto;
.navigation { .navigation {
@include nb-ltr(padding-right, nb-theme(padding)); @include nb-ltr(padding-right, 1.25rem);
@include nb-rtl(padding-left, nb-theme(padding)); @include nb-rtl(padding-left, 1.25rem);
text-decoration: none;
nb-icon {
font-size: 2.5rem; font-size: 2.5rem;
text-decoration: none;
i {
display: block;
} }
} }
.logo { .logo {
padding: 0 nb-theme(padding); padding: 0 1.25rem;
font-size: 1.75rem; font-size: 1.75rem;
font-weight: nb-theme(font-weight-bolder); @include nb-ltr(border-left, 1px solid nb-theme(divider-color));
@include nb-ltr(border-left, 1px solid nb-theme(separator)); @include nb-rtl(border-right, 1px solid nb-theme(divider-color));
@include nb-rtl(border-right, 1px solid nb-theme(separator));
white-space: nowrap; white-space: nowrap;
span {
font-weight: nb-theme(font-weight-normal);
}
}
}
@include nb-for-theme(corporate) {
$menu-action-separator-color: #3f4550;
nb-action {
@include nb-ltr(border-left-color, $menu-action-separator-color);
@include nb-rtl(border-right-color, $menu-action-separator-color);
}
.header-container .logo {
@include nb-ltr(border, none);
@include nb-rtl(border, none);
}
.header-container ::ng-deep ngx-theme-switcher .dropdown-toggle {
color: nb-theme(color-white);
background: transparent;
}
}
ngx-layout-direction-switcher {
margin: 0 1.5rem;
}
ngx-theme-switcher {
margin: nb-theme(layout-padding);
margin-top: 0;
margin-bottom: 0;
}
@include media-breakpoint-down(xl) {
ngx-layout-direction-switcher {
display: none;
}
}
.toggle-settings ::ng-deep a {
display: block;
text-decoration: none; text-decoration: none;
line-height: 1;
i {
color: nb-theme(color-fg-highlight);
font-size: 2.25rem;
border-radius: 50%;
position: relative;
animation-name: pulse-light;
&::after {
content: ' ';
// hack to be able to set border-radius
background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
border-radius: 50%;
pointer-events: none;
position: absolute;
top: 52.3%;
left: 50%;
transform: translate(-50%, -50%);
width: 13%;
height: 13%;
animation: 3s linear infinite pulse;
@include nb-for-theme(default) {
animation-name: pulse-light;
}
}
}
}
@include keyframes(pulse) {
0% {
//box-shadow: 0 0 1px 0 rgba(nb-theme(color-fg-highlight), 0);
}
20% {
//box-shadow: 0 0 3px 10px rgba(nb-theme(color-fg-highlight), 0.4);
}
100% {
//box-shadow: 0 0 5px 20px rgba(nb-theme(color-fg-highlight), 0);
}
}
@include keyframes(pulse-light) {
0% {
box-shadow: 0 0 1px 0 rgba(115, 255, 208, 0);
}
20% {
box-shadow: 0 0 3px 10px rgba(115, 255, 208, 0.4);
}
100% {
box-shadow: 0 0 5px 20px rgba(115, 255, 208, 0);
}
}
@include media-breakpoint-down(md) {
nb-action:not(.toggle-settings) {
border: none;
}
.control-item {
display: none;
}
.toggle-settings {
padding: 0;
}
ngx-layout-direction-switcher {
display: none;
}
ngx-theme-switcher {
margin: 0 0.5rem;
}
}
@include media-breakpoint-down(sm) {
nb-user ::ng-deep .user-name {
display: none;
}
}
@include media-breakpoint-down(is) {
.header-container {
.logo {
font-size: 1.25rem;
}
}
.toggle-settings {
display: none;
}
ngx-theme-switcher {
display: none;
}
nb-action:not(.toggle-settings) {
padding: 0;
}
}
@include media-breakpoint-down(xs) {
.right ::ng-deep {
display: none;
} }
} }
//
// @include nb-for-theme(corporate) {
// $menu-action-separator-color: #3f4550;
//
// nb-action {
// @include nb-ltr(border-left-color, $menu-action-separator-color);
// @include nb-rtl(border-right-color, $menu-action-separator-color);
// }
//
// .header-container .logo {
// @include nb-ltr(border, none);
// @include nb-rtl(border, none);
// }
//
// .header-container ::ng-deep ngx-theme-switcher .dropdown-toggle {
// color: nb-theme(color-white);
// background: transparent;
// }
// }
//
// ngx-layout-direction-switcher {
// margin: 0 1.5rem;
// }
//
// ngx-theme-switcher {
// margin: nb-theme(layout-padding);
// margin-top: 0;
// margin-bottom: 0;
// }
//
// @include media-breakpoint-down(xl) {
// ngx-layout-direction-switcher {
// display: none;
// }
// }
//
// .toggle-settings ::ng-deep a {
// display: block;
// text-decoration: none;
// line-height: 1;
//
// i {
// color: nb-theme(color-fg-highlight);
// font-size: 2.25rem;
// border-radius: 50%;
// position: relative;
// animation-name: pulse-light;
//
// &::after {
// content: ' ';
// // hack to be able to set border-radius
// background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
// border-radius: 50%;
// pointer-events: none;
//
// position: absolute;
// top: 52.3%;
// left: 50%;
// transform: translate(-50%, -50%);
// width: 13%;
// height: 13%;
//
// animation: 3s linear infinite pulse;
//
// @include nb-for-theme(default) {
// animation-name: pulse-light;
// }
// }
// }
// }
//
// @include keyframes(pulse) {
// 0% {
// //box-shadow: 0 0 1px 0 rgba(nb-theme(color-fg-highlight), 0);
// }
// 20% {
// //box-shadow: 0 0 3px 10px rgba(nb-theme(color-fg-highlight), 0.4);
// }
// 100% {
// //box-shadow: 0 0 5px 20px rgba(nb-theme(color-fg-highlight), 0);
// }
// }
//
// @include keyframes(pulse-light) {
// 0% {
// box-shadow: 0 0 1px 0 rgba(115, 255, 208, 0);
// }
// 20% {
// box-shadow: 0 0 3px 10px rgba(115, 255, 208, 0.4);
// }
// 100% {
// box-shadow: 0 0 5px 20px rgba(115, 255, 208, 0);
// }
// }
//
// @include media-breakpoint-down(md) {
//
// nb-action:not(.toggle-settings) {
// border: none;
// }
//
// .control-item {
// display: none;
// }
//
// .toggle-settings {
// padding: 0;
// }
//
// ngx-layout-direction-switcher {
// display: none;
// }
//
// ngx-theme-switcher {
// margin: 0 0.5rem;
// }
// }
//
// @include media-breakpoint-down(sm) {
//
// nb-user ::ng-deep .user-name {
// display: none;
// }
// }
//
// @include media-breakpoint-down(is) {
//
// .header-container {
// .logo {
// font-size: 1.25rem;
// }
// }
//
// .toggle-settings {
// display: none;
// }
//
// ngx-theme-switcher {
// display: none;
// }
//
// nb-action:not(.toggle-settings) {
// padding: 0;
// }
// }
//
// @include media-breakpoint-down(xs) {
// .right ::ng-deep {
// display: none;
// }
// }
} }

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

@ -1,8 +1,7 @@
import { Component, Input, OnInit } from '@angular/core'; import { Component, Input, OnInit } from '@angular/core';
import { NbMenuService, NbSidebarService, NbThemeService } from '@nebular/theme';
import { NbMenuService, NbSidebarService } from '@nebular/theme';
import { UserData } from '../../../@core/data/users'; import { UserData } from '../../../@core/data/users';
import { AnalyticsService } from '../../../@core/utils';
import { LayoutService } from '../../../@core/utils'; import { LayoutService } from '../../../@core/utils';
@Component({ @Component({
@ -16,12 +15,33 @@ export class HeaderComponent implements OnInit {
user: any; user: any;
themes = [
{
value: 'default',
name: 'Light',
},
{
value: 'dark',
name: 'Dark',
},
{
value: 'cosmic',
name: 'Cosmic',
},
{
value: 'corporate',
name: 'Corporate',
},
];
currentTheme = 'default';
userMenu = [ { title: 'Profile' }, { title: 'Log out' } ]; userMenu = [ { title: 'Profile' }, { title: 'Log out' } ];
constructor(private sidebarService: NbSidebarService, constructor(private sidebarService: NbSidebarService,
private menuService: NbMenuService, private menuService: NbMenuService,
private themeService: NbThemeService,
private userService: UserData, private userService: UserData,
private analyticsService: AnalyticsService,
private layoutService: LayoutService) { private layoutService: LayoutService) {
} }
@ -30,6 +50,10 @@ export class HeaderComponent implements OnInit {
.subscribe((users: any) => this.user = users.nick); .subscribe((users: any) => this.user = users.nick);
} }
toggleTheme() {
this.themeService.changeTheme(this.currentTheme);
}
toggleSidebar(): boolean { toggleSidebar(): boolean {
this.sidebarService.toggle(true, 'menu-sidebar'); this.sidebarService.toggle(true, 'menu-sidebar');
this.layoutService.changeLayoutSize(); this.layoutService.changeLayoutSize();
@ -37,11 +61,8 @@ export class HeaderComponent implements OnInit {
return false; return false;
} }
goToHome() { navigateHome() {
this.menuService.navigateHome(); this.menuService.navigateHome();
} return false;
startSearch() {
this.analyticsService.trackEvent('startSearch');
} }
} }

6
src/app/@theme/components/index.ts
View file

@ -2,9 +2,3 @@ export * from './header/header.component';
export * from './footer/footer.component'; export * from './footer/footer.component';
export * from './search-input/search-input.component'; export * from './search-input/search-input.component';
export * from './tiny-mce/tiny-mce.component'; export * from './tiny-mce/tiny-mce.component';
export * from './theme-settings/theme-settings.component';
export * from './theme-switcher/theme-switcher.component';
export * from './switcher/switcher.component';
export * from './layout-direction-switcher/layout-direction-switcher.component';
export * from './theme-switcher/themes-switcher-list/themes-switcher-list.component';
export * from './toggle-settings-button/toggle-settings-button.component';

42
src/app/@theme/components/layout-direction-switcher/layout-direction-switcher.component.ts
View file

@ -1,42 +0,0 @@
import { Component, OnDestroy, Input } from '@angular/core';
import { NbLayoutDirectionService, NbLayoutDirection } from '@nebular/theme';
import { takeWhile } from 'rxjs/operators';
@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) {
this.currentDirection = this.directionService.getDirection();
this.directionService.onDirectionChange()
.pipe(takeWhile(() => this.alive))
.subscribe(newDirection => this.currentDirection = newDirection);
}
toggleDirection(newDirection) {
this.directionService.setDirection(newDirection);
}
ngOnDestroy() {
this.alive = false;
}
}

112
src/app/@theme/components/switcher/switcher.component.scss
View file

@ -1,112 +0,0 @@
//@import '../../styles/themes';
//@import '~@nebular/bootstrap/styles/hero-buttons';
//@import '~bootstrap/scss/mixins/breakpoints';
//@import '~@nebular/theme/styles/global/breakpoints';
//
//@include nb-install-component() {
// .switch-label {
// display: flex;
// justify-content: space-between;
// 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 {
// font-size: 1.125rem;
// font-weight: nb-theme(font-weight-bold);
// transition: opacity 0.3s ease;
// color: nb-theme(color-fg);
//
// &.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(color-fg-text);
// }
//
// @include nb-for-theme(cosmic) {
// color: nb-theme(color-fg);
//
// &.active {
// color: nb-theme(color-white);
// }
// }
//
// &: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(layout-bg);
// }
//
// .slider::before {
// position: absolute;
// content: '';
// height: 1.5rem;
// width: 1.5rem;
// border-radius: 50%;
// background-color: nb-theme(color-success);
// transition: 0.2s;
//
// //box-shadow: 0 0 0.25rem 0 rgba(nb-theme(color-fg), 0.4);
//
// @include nb-for-theme(cosmic) {
// @include btn-hero-primary-gradient();
// }
//
// @include nb-for-theme(corporate) {
// background-color: nb-theme(color-primary);
// }
// }
// }
//
// @include media-breakpoint-down(xs) {
// align-items: flex-end;
// }
//}

60
src/app/@theme/components/switcher/switcher.component.ts
View file

@ -1,60 +0,0 @@
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);
}
}

91
src/app/@theme/components/theme-settings/theme-settings.component.scss
View file

@ -1,91 +0,0 @@
@import '../../styles/themes';
@include nb-install-component() {
h6 {
margin-bottom: 0.875rem;
text-align: center;
font-weight: bold;
text-shadow: 0 0 8px rgba(0, 0, 0, 0.16);
}
.settings-row {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100%;
margin: 0 0 2.575rem;
a {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
width: 4.15rem;
height: 4.15rem;
border-radius: nb-theme(radius);
background-color: nb-theme(color-white);
border: 2px solid transparent;
margin: 0.875rem;
text-decoration: none;
font-size: 2.25rem;
color: nb-theme(color-fg);
&.selected {
color: nb-theme(color-success);
border-color: nb-theme(color-success);
}
@include nb-for-theme(cosmic) {
box-shadow: 0 4px 14px 0 rgba(19, 19, 94, 0.4);
background-color: #3e367e;
border: 2px solid #3e367e;
&.selected {
color: nb-theme(link-color);
}
}
}
}
.settings {
margin-bottom: 1em;
}
.switcher {
margin-bottom: 1rem;
font-size: 1.524rem;
width: 12rem;
::ng-deep ngx-switcher {
.switch-label span {
font-size: 1em;
font-weight: normal;
&.first, &.second {
font-size: 1rem;
}
}
.switch {
height: 1.5em;
width: 3em;
.slider::before {
height: 1.5em;
width: 1.5em;
}
input:checked + .slider::before {
@include nb-ltr(transform, translateX(1.5em)!important);
@include nb-rtl(transform, translateX(-1.5em)!important);
}
}
@include nb-for-theme(cosmic) {
.switch .slider {
background-color: nb-theme(color-bg);
}
}
}
}
}

70
src/app/@theme/components/theme-settings/theme-settings.component.ts
View file

@ -1,70 +0,0 @@
import { Component } from '@angular/core';
import { StateService } from '../../../@core/utils';
@Component({
selector: 'ngx-theme-settings',
styleUrls: ['./theme-settings.component.scss'],
template: `
<h6>LAYOUTS</h6>
<div class="settings-row">
<a *ngFor="let layout of layouts"
href="#"
[class.selected]="layout.selected"
[attr.title]="layout.name"
(click)="layoutSelect(layout)">
<i [attr.class]="layout.icon"></i>
</a>
</div>
<h6>SIDEBAR</h6>
<div class="settings-row">
<a *ngFor="let sidebar of sidebars"
href="#"
[class.selected]="sidebar.selected"
[attr.title]="sidebar.name"
(click)="sidebarSelect(sidebar)">
<i [attr.class]="sidebar.icon"></i>
</a>
</div>
<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(sidebars: any): boolean {
this.sidebars = this.sidebars.map((s: any) => {
s.selected = false;
return s;
});
sidebars.selected = true;
this.stateService.setSidebarState(sidebars);
return false;
}
}

7
src/app/@theme/components/theme-switcher/theme-switcher.component.html
View file

@ -1,7 +0,0 @@
<div class="themes-switcher"
[nbPopover]="switcherListComponent"
nbPopoverPlacement="bottom"
[nbPopoverContext]="{popover: popover}">
<i class="nb-drops"></i>
<span *ngIf="showTitle">Themes</span>
</div>

50
src/app/@theme/components/theme-switcher/theme-switcher.component.scss
View file

@ -1,50 +0,0 @@
@import '../../styles/themes';
@import '~@nebular/theme/styles/core/mixins';
@import '~@nebular/theme/styles/core/functions';
@include nb-install-component() {
.themes-switcher {
display: flex;
font-size: 1.25rem;
padding: 0.8rem 1.25rem;
align-items: center;
cursor: pointer;
background-color: nb-theme(switcher-background);
border-radius: nb-theme(radius);
&:hover {
$color: nb-theme(switcher-background);
$percentage: nb-theme(switcher-background-percentage);
background-color: tint($color, $percentage);
}
span {
margin: 0 1.2rem;
}
i {
color: nb-theme(color-primary);
font-size: 1.8rem;
border-radius: 50%;
position: relative;
@include nb-for-theme(default) {
color: nb-theme(color-success);
}
@include nb-for-theme(corporate) {
color: nb-theme(color-fg-highlight);
}
&::before {
// Hack for IE11, IE11 should not set background
background: nb-theme(drops-icon-line-gadient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
}

19
src/app/@theme/components/theme-switcher/theme-switcher.component.ts
View file

@ -1,19 +0,0 @@
import { Component, Input, ViewChild } from '@angular/core';
import { NbPopoverDirective } from '@nebular/theme';
import { NbJSThemeOptions } from '@nebular/theme/services/js-themes/theme.options';
import { ThemeSwitcherListComponent } from './themes-switcher-list/themes-switcher-list.component';
@Component({
selector: 'ngx-theme-switcher',
templateUrl: './theme-switcher.component.html',
styleUrls: ['./theme-switcher.component.scss'],
})
export class ThemeSwitcherComponent {
@ViewChild(NbPopoverDirective, { static: true }) popover: NbPopoverDirective;
@Input() showTitle: boolean = true;
switcherListComponent = ThemeSwitcherListComponent;
theme: NbJSThemeOptions;
}

76
src/app/@theme/components/theme-switcher/themes-switcher-list/theme-switcher-list.component.scss
View file

@ -1,76 +0,0 @@
@import '../../../styles/themes';
@import '~@nebular/theme/styles/core/mixins';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
$icon-color-default: #0bbb79;
$icon-color-cosmic: #7958fa;
$icon-color-corporate: #a7a2be;
$icon-top-color-default: #01dbb5;
$icon-top-color-cosmic: #a258fe;
$icon-top-color-corporate: #e9e8eb;
@include nb-install-component() {
::ng-deep .themes-switcher-list {
padding: 1rem 2rem 1.25rem 0.5rem;
margin: 0;
@include nb-ltr(text-align, start);
@include nb-rtl(text-align, end);
.themes-switcher-item {
list-style: none;
cursor: pointer;
&:hover span {
opacity: 0.5;
}
i {
font-size: 2rem;
&.drop-icon-default {
color: $icon-color-default;
// Hack for IE11, IE11 should not set background
background: -webkit-linear-gradient($icon-top-color-default, $icon-color-default);
}
&.drop-icon-cosmic {
color: $icon-color-cosmic;
// Hack for IE11, IE11 should not set background
background: -webkit-linear-gradient($icon-top-color-cosmic, $icon-color-cosmic);
}
&.drop-icon-corporate {
color: $icon-color-corporate;
// Hack for IE11, IE11 should not set background
background: -webkit-linear-gradient($icon-top-color-corporate, $icon-color-corporate);
}
&.drop-icon-default,
&.drop-icon-cosmic,
&.drop-icon-corporate {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
span {
font-weight: 300;
vertical-align: super;
padding-left: 1rem;
color: nb-theme(color-fg-heading);
}
}
}
@include media-breakpoint-down(is) {
::ng-deep .themes-switcher-list {
display: none;
}
}
}

51
src/app/@theme/components/theme-switcher/themes-switcher-list/themes-switcher-list.component.ts
View file

@ -1,51 +0,0 @@
import {Component, Input} from '@angular/core';
import { NbThemeService, NbPopoverDirective } from '@nebular/theme';
import { AnalyticsService } from '../../../../@core/utils/analytics.service';
import { NbJSThemeOptions } from '@nebular/theme/services/js-themes/theme.options';
@Component({
selector: 'ngx-theme-switcher-list',
template: `
<ul class="themes-switcher-list">
<li class="themes-switcher-item"
*ngFor="let theme of themes"
(click)="onToggleTheme(theme.key)">
<i class="nb-drop" [ngClass]="'drop-icon-' + theme.key"></i>
<span>{{ theme.title }}</span>
</li>
</ul>
`,
styleUrls: ['./theme-switcher-list.component.scss'],
})
export class ThemeSwitcherListComponent {
@Input() popover: NbPopoverDirective;
theme: NbJSThemeOptions;
themes = [
{
title: 'Light',
key: 'default',
},
{
title: 'Cosmic',
key: 'cosmic',
},
{
title: 'Corporate',
key: 'corporate',
},
];
constructor(
private themeService: NbThemeService,
private analyticsService: AnalyticsService,
) {}
onToggleTheme(themeKey: string) {
this.themeService.changeTheme(themeKey);
this.analyticsService.trackEvent('switchTheme');
this.popover.hide();
}
}

118
src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.scss
View file

@ -1,118 +0,0 @@
//@import '../../styles/themes';
//@import '~bootstrap/scss/mixins/breakpoints';
//@import '~@nebular/theme/styles/global/breakpoints';
////@import '~@nebular/bootstrap/styles/hero-buttons';
//
//@include nb-install-component() {
// .toggle-settings {
// position: fixed;
// top: 50%;
// height: 3rem;
// width: 3rem;
// padding: 0;
// text-align: center;
// border: none;
// transition: transform 0.3s ease, background-image 0.3s ease;
// transform: translate(0, -50%);
// z-index: 998;
//
// @include nb-ltr() {
// border-top-left-radius: nb-theme(radius);
// border-bottom-left-radius: nb-theme(radius);
// right: 0;
//
// &.sidebar-end {
// border-top-left-radius: 0;
// border-bottom-left-radius: 0;
// right: auto;
// border-top-right-radius: nb-theme(radius);
// border-bottom-right-radius: nb-theme(radius);
// left: 0;
// }
// }
//
// @include nb-rtl() {
// border-top-right-radius: nb-theme(radius);
// border-bottom-right-radius: nb-theme(radius);
// left: 0;
//
// &.sidebar-end {
// border-top-right-radius: 0;
// border-bottom-right-radius: 0;
// left: auto;
// border-top-left-radius: nb-theme(radius);
// border-bottom-left-radius: nb-theme(radius);
// right: 0;
// }
// }
//
// &.expanded {
// @include nb-ltr(transform, translate(-19rem, -50%));
// @include nb-rtl(transform, translate(19rem, -50%));
//
// &.sidebar-end {
// @include nb-rtl(transform, translate(-19rem, -50%));
// @include nb-ltr(transform, translate(19rem, -50%));
// }
// }
//
// @include nb-for-theme(cosmic) {
// box-shadow: 0 0 3.4285rem 0 rgba(19, 19, 94, 0.72);
// @include btn-hero-success-gradient();
// }
//
// @include nb-for-theme(default) {
// border: 1px solid #d5dbe0;
// box-shadow: 0 8px 24px 0 rgba(48, 59, 67, 0.15);
// background-color: #ffffff;
// }
//
// @include nb-for-theme(corporate) {
// border: 1px solid #d5dbe0;
// box-shadow: 0 8px 24px 0 rgba(48, 59, 67, 0.15);
// color: nb-theme(color-danger);
// background-color: #ffffff;
// }
//
// i {
// font-size: 2.75rem;
// color: #ffffff;
// display: block;
//
//
// @include nb-for-theme(default) {
// color: nb-theme(color-danger);
// }
//
// @include nb-for-theme(corporate) {
// color: nb-theme(color-warning);
// }
// }
//
// &:not(.was-expanded) i {
// 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;
// }
// }
//}

37
src/app/@theme/components/toggle-settings-button/toggle-settings-button.component.ts
View file

@ -1,37 +0,0 @@
import { Component } from '@angular/core';
import { NbSidebarService } from '@nebular/theme';
import { StateService } from '../../../@core/utils';
@Component({
selector: 'ngx-toggle-settings-button',
styleUrls: ['./toggle-settings-button.component.scss'],
template: `
<button class="toggle-settings"
(click)="toggleSettings()"
[class.expanded]="expanded"
[class.sidebar-end]="sidebarEnd"
[class.was-expanded]="wasExpanded"
>
<i class="nb-gear"></i>
</button>
`,
})
export class ToggleSettingsButtonComponent {
sidebarEnd = false;
expanded = false;
wasExpanded = false;
constructor(private sidebarService: NbSidebarService, protected stateService: StateService) {
this.stateService.onSidebarState()
.subscribe(({id}) => {
this.sidebarEnd = id === 'end';
});
}
toggleSettings() {
this.sidebarService.toggle(false, 'settings-sidebar');
this.expanded = !this.expanded;
this.wasExpanded = true;
}
}

1
src/app/@theme/layouts/index.ts
View file

@ -1,4 +1,3 @@
export * from './one-column/one-column.layout'; export * from './one-column/one-column.layout';
export * from './two-columns/two-columns.layout'; export * from './two-columns/two-columns.layout';
export * from './three-columns/three-columns.layout'; export * from './three-columns/three-columns.layout';
export * from './sample/sample.layout';

112
src/app/@theme/layouts/one-column/one-column.layout.scss
View file

@ -42,116 +42,4 @@
} }
} }
} }
nb-sidebar.menu-sidebar {
margin-top: nb-theme(sidebar-header-gap);
@include nb-for-theme(corporate) {
margin-top: 0;
}
::ng-deep .main-container {
height:
calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
@include nb-ltr(border-top-right-radius, nb-theme(radius));
@include nb-rtl(border-top-left-radius, nb-theme(radius));
@include nb-for-theme(corporate) {
border: 1px solid nb-theme(separator);
height:
calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
}
}
::ng-deep .scrollable {
@include nb-for-theme(corporate) {
padding-top: 0;
.menu-item:first-child {
border-top: none;
}
}
}
::ng-deep nb-sidebar-header {
padding-bottom: 0.5rem;
text-align: center;
}
background: transparent;
.main-btn {
padding: 0.75rem 2.5rem;
margin-top: -2rem;
font-weight: bold;
transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
@include nb-for-theme(corporate) {
border-radius: nb-theme(radius);
}
i {
font-size: 2rem;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
span {
@include nb-ltr(padding-left, 0.25rem);
@include nb-rtl(padding-right, 0.25rem);
}
i, span {
vertical-align: middle;
}
}
&.compacted {
::ng-deep nb-sidebar-header {
padding-left: 0;
padding-right: 0;
}
.main-btn {
width: 46px;
height: 44px;
padding: 0.375rem;
border-radius: 5px;
transition: none;
span {
display: none;
}
}
}
}
@include media-breakpoint-down(xs) {
.main-content {
padding: 0.75rem !important;
}
}
@include media-breakpoint-down(sm) {
nb-sidebar.menu-sidebar {
margin-top: 0;
::ng-deep .main-container {
height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
@include nb-ltr(border-top-right-radius, 0);
@include nb-rtl(border-top-left-radius, 0);
.scrollable {
padding-top: 0;
}
}
}
.main-btn {
display: none;
}
}
} }

27
src/app/@theme/layouts/one-column/one-column.layout.ts
View file

@ -1,6 +1,4 @@
import { Component, OnDestroy } from '@angular/core'; import { Component } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { takeWhile } from 'rxjs/operators';
// TODO: move layouts into the framework // TODO: move layouts into the framework
@Component({ @Component({
@ -13,10 +11,7 @@ import { takeWhile } from 'rxjs/operators';
</nb-layout-header> </nb-layout-header>
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive> <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
<nb-sidebar-header *ngIf="currentTheme !== 'corporate'"> <nb-sidebar-header>
<a href="#" class="btn btn-hero-success main-btn">
<i class="ion ion-social-github"></i> <span>Support Us</span>
</a>
</nb-sidebar-header> </nb-sidebar-header>
<ng-content select="nb-menu"></ng-content> <ng-content select="nb-menu"></ng-content>
</nb-sidebar> </nb-sidebar>
@ -31,21 +26,5 @@ import { takeWhile } from 'rxjs/operators';
</nb-layout> </nb-layout>
`, `,
}) })
export class OneColumnLayoutComponent implements OnDestroy { export class OneColumnLayoutComponent {
private alive = true;
currentTheme: string;
constructor(protected themeService: NbThemeService) {
this.themeService.getJsTheme()
.pipe(takeWhile(() => this.alive))
.subscribe(theme => {
this.currentTheme = theme.name;
});
}
ngOnDestroy() {
this.alive = false;
}
} }

182
src/app/@theme/layouts/sample/sample.layout.scss
View file

@ -1,182 +0,0 @@
@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;
width: $sidebar-width;
overflow: hidden;
@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);
}
::ng-deep .scrollable {
width: $sidebar-width;
padding: 3.4rem 0.25rem;
}
::ng-deep .main-container {
width: $sidebar-width;
background: nb-theme(color-bg);
transition: transform 0.3s ease;
overflow: hidden;
position: relative;
.scrollable {
width: $sidebar-width;
}
@include nb-for-theme(cosmic) {
background: nb-theme(layout-bg);
}
}
}
nb-sidebar.menu-sidebar {
margin-top: nb-theme(sidebar-header-gap);
@include nb-for-theme(corporate) {
margin-top: 0;
}
::ng-deep .main-container {
height:
calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
@include nb-ltr(border-top-right-radius, nb-theme(radius));
@include nb-rtl(border-top-left-radius, nb-theme(radius));
@include nb-for-theme(corporate) {
border: 1px solid nb-theme(separator);
height:
calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
}
}
::ng-deep .scrollable {
@include nb-for-theme(corporate) {
padding-top: 0;
.menu-item:first-child {
border-top: none;
}
}
}
::ng-deep nb-sidebar-header {
padding-bottom: 0.5rem;
text-align: center;
}
background: transparent;
.main-btn {
padding: 0.75rem 2.5rem;
margin-top: -2rem;
font-weight: bold;
transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
@include nb-for-theme(corporate) {
border-radius: nb-theme(radius);
}
i {
font-size: 2rem;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
span {
@include nb-ltr(padding-left, 0.25rem);
@include nb-rtl(padding-right, 0.25rem);
}
i, span {
vertical-align: middle;
}
}
::ng-deep nb-menu {
& > .menu-items {
& > .menu-item:first-child {
.menu-title {
&::after {
content: 'new';
color: nb-theme(color-white);
margin-left: 1rem;
background: nb-theme(color-danger);
padding: 0 0.5rem;
border-radius: nb-theme(radius);
font-size: nb-theme(font-size-sm);
}
}
}
}
.nb-e-commerce {
font-size: 2rem;
}
}
&.compacted {
::ng-deep nb-sidebar-header {
padding-left: 0;
padding-right: 0;
}
.main-btn {
width: 46px;
height: 44px;
padding: 0.375rem;
border-radius: 5px;
transition: none;
span {
display: none;
}
}
}
}
@include media-breakpoint-down(xs) {
.main-content {
padding: 0.75rem !important;
}
}
@include media-breakpoint-down(sm) {
nb-sidebar.menu-sidebar {
margin-top: 0;
::ng-deep .main-container {
height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
@include nb-ltr(border-top-right-radius, 0);
@include nb-rtl(border-top-left-radius, 0);
.scrollable {
padding-top: 0;
}
}
}
.main-btn {
display: none;
}
}
}

152
src/app/@theme/layouts/sample/sample.layout.ts
View file

@ -1,152 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { delay, withLatestFrom, takeWhile } from 'rxjs/operators';
import {
NbMediaBreakpoint,
NbMediaBreakpointsService,
NbMenuItem,
NbMenuService,
NbSidebarService,
NbThemeService,
} from '@nebular/theme';
import { StateService } from '../../../@core/utils';
// TODO: move layouts into the framework
@Component({
selector: 'ngx-sample-layout',
styleUrls: ['./sample.layout.scss'],
template: `
<nb-layout [center]="layout.id === 'center-column'" windowMode>
<nb-layout-header fixed>
<ngx-header [position]="sidebar.id === 'start' ? 'normal': 'inverse'"></ngx-header>
</nb-layout-header>
<nb-sidebar class="menu-sidebar"
tag="menu-sidebar"
responsive
[end]="sidebar.id === 'end'">
<nb-sidebar-header *ngIf="currentTheme !== 'corporate'">
<a href="#" class="btn btn-hero-success main-btn">
<i class="ion ion-social-github"></i> <span>Support Us</span>
</a>
</nb-sidebar-header>
<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]="sidebar.id !== 'end'">
<ngx-theme-settings></ngx-theme-settings>
</nb-sidebar>
</nb-layout>
<ngx-toggle-settings-button></ngx-toggle-settings-button>
`,
})
export class SampleLayoutComponent implements OnDestroy {
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 = {};
private alive = true;
currentTheme: string;
constructor(protected stateService: StateService,
protected menuService: NbMenuService,
protected themeService: NbThemeService,
protected bpService: NbMediaBreakpointsService,
protected sidebarService: NbSidebarService) {
this.stateService.onLayoutState()
.pipe(takeWhile(() => this.alive))
.subscribe((layout: string) => this.layout = layout);
this.stateService.onSidebarState()
.pipe(takeWhile(() => this.alive))
.subscribe((sidebar: string) => {
this.sidebar = sidebar;
});
const isBp = this.bpService.getByName('is');
this.menuService.onItemSelect()
.pipe(
takeWhile(() => this.alive),
withLatestFrom(this.themeService.onMediaQueryChange()),
delay(20),
)
.subscribe(([item, [bpFrom, bpTo]]: [any, [NbMediaBreakpoint, NbMediaBreakpoint]]) => {
if (bpTo.width <= isBp.width) {
this.sidebarService.collapse('menu-sidebar');
}
});
this.themeService.getJsTheme()
.pipe(takeWhile(() => this.alive))
.subscribe(theme => {
this.currentTheme = theme.name;
});
}
ngOnDestroy() {
this.alive = false;
}
}

3
src/app/@theme/styles/font-size.scss
View file

@ -1,3 +0,0 @@
html {
//font-size: 14px;
}

6
src/app/@theme/styles/pace.theme.scss
View file

@ -7,16 +7,14 @@
@mixin ngx-pace-theme() { @mixin ngx-pace-theme() {
.pace .pace-progress { .pace .pace-progress {
background: nb-theme(color-fg-highlight); background: nb-theme(color-primary-default);
} }
.pace .pace-progress-inner { .pace .pace-progress-inner {
box-shadow: 0 0 10px nb-theme(color-fg-highlight), 0 0 5px nb-theme(color-fg-highlight); box-shadow: 0 0 10px nb-theme(color-primary-default), 0 0 5px nb-theme(color-primary-default);
} }
.pace .pace-activity { .pace .pace-activity {
display: none; display: none;
// border-top-color: nb-theme(color-fg-highlight);
// border-left-color: nb-theme(color-fg-highlight);
} }
} }

7
src/app/@theme/styles/styles.scss
View file

@ -4,11 +4,8 @@
// framework component themes (styles tied to theme variables) // framework component themes (styles tied to theme variables)
@import '~@nebular/theme/styles/globals'; @import '~@nebular/theme/styles/globals';
@import '~@nebular/auth/styles/all'; @import '~@nebular/auth/styles/all';
//@import '~@nebular/bootstrap/styles/globals'; @import '~@nebular/bootstrap/styles/globals';
// ...
// global app font size
@import './font-size';
// loading progress bar theme // loading progress bar theme
@import './pace.theme'; @import './pace.theme';
@ -19,7 +16,7 @@
// framework global styles // framework global styles
@include nb-theme-global(); @include nb-theme-global();
@include nb-auth-global(); @include nb-auth-global();
//@include nb-bootstrap-global(); @include nb-bootstrap-global();
// loading progress bar // loading progress bar
@include ngx-pace-theme(); @include ngx-pace-theme();

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

@ -4,7 +4,7 @@
@import '~@nebular/theme/styles/themes'; @import '~@nebular/theme/styles/themes';
// which themes you what to enable (empty to enable all) // which themes you what to enable (empty to enable all)
$nb-enabled-themes: (default/*, cosmic, corporate, dark*/); $nb-enabled-themes: (default);
$nb-themes: nb-register-theme(( $nb-themes: nb-register-theme((
// app wise variables for each theme // app wise variables for each theme

26
src/app/@theme/theme.module.ts
View file

@ -36,21 +36,16 @@ import {
NbChatModule, NbChatModule,
NbTooltipModule, NbTooltipModule,
NbCalendarKitModule, NbCalendarKitModule,
NbIconModule,
} from '@nebular/theme'; } from '@nebular/theme';
import { NbEvaIconsModule } from '@nebular/eva-icons';
import { NbSecurityModule } from '@nebular/security'; import { NbSecurityModule } from '@nebular/security';
import { import {
FooterComponent, FooterComponent,
HeaderComponent, HeaderComponent,
SearchInputComponent, SearchInputComponent,
ThemeSettingsComponent,
SwitcherComponent,
LayoutDirectionSwitcherComponent,
ThemeSwitcherComponent,
TinyMCEComponent, TinyMCEComponent,
ThemeSwitcherListComponent,
ToggleSettingsButtonComponent,
} from './components'; } from './components';
import { import {
CapitalizePipe, CapitalizePipe,
@ -62,7 +57,6 @@ import {
} from './pipes'; } from './pipes';
import { import {
OneColumnLayoutComponent, OneColumnLayoutComponent,
SampleLayoutComponent,
ThreeColumnsLayoutComponent, ThreeColumnsLayoutComponent,
TwoColumnsLayoutComponent, TwoColumnsLayoutComponent,
} from './layouts'; } from './layouts';
@ -106,27 +100,18 @@ const NB_MODULES = [
NbChatModule, NbChatModule,
NbTooltipModule, NbTooltipModule,
NbCalendarKitModule, NbCalendarKitModule,
NbIconModule,
NbEvaIconsModule,
]; ];
const COMPONENTS = [ const COMPONENTS = [
SwitcherComponent,
LayoutDirectionSwitcherComponent,
ThemeSwitcherComponent,
ThemeSwitcherListComponent,
HeaderComponent, HeaderComponent,
FooterComponent, FooterComponent,
SearchInputComponent, SearchInputComponent,
ThemeSettingsComponent,
TinyMCEComponent, TinyMCEComponent,
OneColumnLayoutComponent, OneColumnLayoutComponent,
SampleLayoutComponent,
ThreeColumnsLayoutComponent, ThreeColumnsLayoutComponent,
TwoColumnsLayoutComponent, TwoColumnsLayoutComponent,
ToggleSettingsButtonComponent,
];
const ENTRY_COMPONENTS = [
ThemeSwitcherListComponent,
]; ];
const PIPES = [ const PIPES = [
@ -141,7 +126,7 @@ const PIPES = [
const NB_THEME_PROVIDERS = [ const NB_THEME_PROVIDERS = [
...NbThemeModule.forRoot( ...NbThemeModule.forRoot(
{ {
name: 'cosmic', name: 'default',
}, },
[ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME ], [ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME ],
).providers, ).providers,
@ -160,7 +145,6 @@ const NB_THEME_PROVIDERS = [
imports: [...BASE_MODULES, ...NB_MODULES], imports: [...BASE_MODULES, ...NB_MODULES],
exports: [...BASE_MODULES, ...NB_MODULES, ...COMPONENTS, ...PIPES], exports: [...BASE_MODULES, ...NB_MODULES, ...COMPONENTS, ...PIPES],
declarations: [...COMPONENTS, ...PIPES], declarations: [...COMPONENTS, ...PIPES],
entryComponents: [...ENTRY_COMPONENTS],
}) })
export class ThemeModule { export class ThemeModule {
static forRoot(): ModuleWithProviders { static forRoot(): ModuleWithProviders {

33
src/app/pages/bootstrap/bootstrap-routing.module.ts
View file

@ -1,33 +0,0 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BootstrapComponent } from './bootstrap.component';
import { ModalsComponent } from './modals/modals.component';
import { ButtonsComponent } from './buttons/buttons.component';
import { FormInputsComponent } from './form-inputs/form-inputs.component';
const routes: Routes = [{
path: '',
component: BootstrapComponent,
children: [
{
path: 'inputs',
component: FormInputsComponent,
},
{
path: 'buttons',
component: ButtonsComponent,
},
{
path: 'modal',
component: ModalsComponent,
},
],
}];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class BootstrapRoutingModule { }

36
src/app/pages/bootstrap/bootstrap.module.ts
View file

@ -1,36 +0,0 @@
import { NgModule } from '@angular/core';
import { ThemeModule } from '../../@theme/theme.module';
import { BootstrapRoutingModule } from './bootstrap-routing.module';
import { ModalsComponent } from './modals/modals.component';
import { ModalComponent } from './modals/modal/modal.component';
import { BootstrapComponent } from './bootstrap.component';
import { ButtonsModule } from './buttons/buttons.module';
import { FormInputsComponent } from './form-inputs/form-inputs.component';
const COMPONENTS = [
BootstrapComponent,
ModalsComponent,
ModalComponent,
FormInputsComponent,
];
const ENTRY_COMPONENTS = [
ModalComponent,
];
@NgModule({
imports: [
ThemeModule,
BootstrapRoutingModule,
ButtonsModule,
],
declarations: [
...COMPONENTS,
],
entryComponents: [
...ENTRY_COMPONENTS,
],
})
export class BootstrapModule { }

16
src/app/pages/bootstrap/buttons/block-level-buttons/block-level-buttons.component.html
View file

@ -1,16 +0,0 @@
<nb-card>
<nb-card-header>Block Level Buttons</nb-card-header>
<nb-card-body>
<div class="row block-level-buttons">
<div class="col-md-12">
<div class="btn-group btn-group-full-width" role="group">
<button type="button" class="btn btn-primary btn-group-icon btn-group-divider btn-fixed">
<i class="nb-home"></i>
</button>
<button type="button" class="btn btn-primary">Icon Block Button</button>
</div>
<button type="button" class="btn btn-outline-primary btn-block">Block Button</button>
</div>
</div>
</nb-card-body>
</nb-card>

8
src/app/pages/bootstrap/buttons/block-level-buttons/block-level-buttons.component.ts
View file

@ -1,8 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-block-level-buttons',
templateUrl: './block-level-buttons.component.html',
})
export class BlockLevelButtonsComponent {
}

144
src/app/pages/bootstrap/buttons/button-groups/button-groups.component.html
View file

@ -1,144 +0,0 @@
<nb-card>
<nb-card-header>Button Groups</nb-card-header>
<nb-card-body>
<div class="row">
<div class="col-md-12">
<div class="example-container toggle-types">
<div class="container-title">Toggle Types</div>
<div [(ngModel)]="radioModel" ngbRadioGroup
class="btn-group btn-group-toggle btn-outline-toggle-group btn-group-full-width btn-toggle-radio-group">
<label ngbButtonLabel class="btn btn-outline-primary">
<input ngbButton type="radio" value="left"> Left
</label>
<label ngbButtonLabel class="btn btn-outline-primary">
<input ngbButton type="radio" value="middle"> Middle
</label>
<label ngbButtonLabel class="btn btn-outline-primary">
<input ngbButton type="radio" value="right"> Right
</label>
</div>
<div class="btn-group btn-group-toggle btn-group-full-width" data-toggle="buttons">
<label ngbButtonLabel class="btn btn-primary" [class.active]="checkboxModel.left">
<input ngbButton type="checkbox" [(ngModel)]="checkboxModel.left"> Left
</label>
<label ngbButtonLabel class="btn btn-primary" [class.active]="checkboxModel.middle">
<input ngbButton type="checkbox" [(ngModel)]="checkboxModel.middle"> Middle
</label>
<label ngbButtonLabel class="btn btn-primary" [class.active]="checkboxModel.right">
<input ngbButton type="checkbox" [(ngModel)]="checkboxModel.right"> Right
</label>
</div>
</div>
<div class="example-container toolbars-container">
<div class="pagination-container">
<div class="container-title">Pagination</div>
<div class="btn-group btn-group-toggle btn-outline-toggle-group" data-toggle="buttons"
[(ngModel)]="paginationModel" ngbRadioGroup>
<label ngbButtonLabel class="btn btn-outline-success">
<input ngbButton type="radio" [value]="1"> 1
</label>
<label ngbButtonLabel class="btn btn-outline-success">
<input ngbButton type="radio" [value]="2"> 2
</label>
<label ngbButtonLabel class="btn btn-outline-success">
<input ngbButton type="radio" [value]="3"> 3
</label>
<label ngbButtonLabel class="btn btn-outline-success">
<input ngbButton type="radio" [value]="4"> 4
</label>
<label ngbButtonLabel class="btn btn-outline-success">
<input ngbButton type="radio" [value]="5"> 5
</label>
</div>
</div>
<div class="icon-toolbar-container">
<div class="container-title">Icon Toolbar</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.one">
<input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.one"> 1
</label>
<label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.two">
<input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.two"> 2
</label>
<label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.three">
<input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.three"> 3
</label>
<label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.four">
<input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.four"> 4
</label>
<label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.five">
<input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.five"> 5
</label>
</div>
</div>
</div>
<div class="example-container">
<div class="container-title divided-button-group">Divided Button Group</div>
<div class="btn-group btn-group-toggle btn-divided-group btn-outline-divided-group btn-group-full-width btn-divided-checkbox-group "
data-toggle="buttons">
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.monday">
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.monday"> <i
class="nb-arrow-thin-down"></i>
</label>
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.tuesday">
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.tuesday"> <i
class="nb-arrow-thin-up"></i>
</label>
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.wednesday">
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.wednesday"> <i class="nb-arrow-thin-left"></i>
</label>
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.thursday">
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.thursday"> <i
class="nb-arrow-thin-right"></i>
</label>
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.friday">
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.friday"> <i class="nb-arrow-left"></i>
</label>
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.saturday">
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.saturday"> <i
class="nb-arrow-right"></i>
</label>
</div>
</div>
<div class="example-container">
<div class="container-title">Divided Button Group</div>
<div class="row">
<div [(ngModel)]="dividedButtonGroupOne" ngbRadioGroup
class="btn-group btn-group-toggle btn-divided-group btn-outline-divided-group btn-group-full-width col-md-12">
<label ngbButtonLabel class="btn btn-outline-primary">
<input ngbButton type="radio" value="left"> Left
</label>
<label ngbButtonLabel class="btn btn-outline-primary">
<input ngbButton type="radio" value="middle"> Middle
</label>
<label ngbButtonLabel class="btn btn-outline-primary">
<input ngbButton type="radio" value="right"> Right
</label>
</div>
</div>
<div class="btn-group btn-group-toggle btn-divided-group btn-group-full-width" data-toggle="buttons">
<label ngbButtonLabel
class="btn btn-primary"
[class.active]="dividedButtonGroupTwo.left"
[class.focus]="dividedButtonGroupTwo.left">
<input ngbButton type="checkbox" [(ngModel)]="dividedButtonGroupTwo.left"> Left
</label>
<label ngbButtonLabel
class="btn btn-primary"
[class.active]="dividedButtonGroupTwo.middle"
[class.focus]="dividedButtonGroupTwo.middle">
<input ngbButton type="checkbox" [(ngModel)]="dividedButtonGroupTwo.middle"> Middle
</label>
<label ngbButtonLabel
class="btn btn-primary"
[class.active]="dividedButtonGroupTwo.right"
[class.focus]="dividedButtonGroupTwo.right">
<input ngbButton type="checkbox" [(ngModel)]="dividedButtonGroupTwo.right"> Right
</label>
</div>
</div>
</div>
</div>
</nb-card-body>
</nb-card>

67
src/app/pages/bootstrap/buttons/button-groups/button-groups.component.scss
View file

@ -1,67 +0,0 @@
@import '../../../../@theme/styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
.toolbars-container {
display: flex;
flex-direction: column;
}
.pagination-container {
@include nb-ltr(margin-right, 1rem);
@include nb-rtl(margin-left, 1rem);
.btn-group > .btn {
padding-left: 1.125rem;
padding-right: 1.125rem;
}
}
.icon-toolbar-container {
.btn-group > .btn {
padding-left: 1.125rem;
padding-right: 1.125rem;
}
}
.toggle-types {
.btn-toggle-radio-group {
margin-bottom: 1rem;
}
}
.divided-button-group {
.btn-divided-checkbox-group {
margin-bottom: 1rem;
flex-wrap: wrap;
}
}
.example-container:not(:last-child) {
margin-bottom: 1.5rem;
}
.example-container > div {
&:not(:last-child) {
margin-bottom: 1rem;
}
}
.example-container > .btn-divided-checkbox-group {
flex-wrap: wrap;
> label {
flex-basis: 10%;
@include nb-ltr(margin, 0 0.25rem 0.5rem 0);
@include nb-rtl(margin, 0 0 0.5rem 0.25rem);
}
}
@include media-breakpoint-down(sm) {
.btn {
padding: 0.75rem 0.7rem;
}
}
}

44
src/app/pages/bootstrap/buttons/button-groups/button-groups.component.ts
View file

@ -1,44 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-button-groups',
styleUrls: ['./button-groups.component.scss'],
templateUrl: './button-groups.component.html',
})
export class ButtonGroupsComponent {
radioModel = 'left';
checkboxModel = {
left: false,
middle: false,
right: false,
};
dividedCheckboxModel = {
monday: true,
tuesday: true,
wednesday: false,
thursday: false,
friday: false,
saturday: false,
};
paginationModel = 1;
iconToolbarModel = {
one: false,
two: false,
three: true,
four: false,
five: false,
};
dividedButtonGroupOne = 'left';
dividedButtonGroupTwo = {
left: false,
middle: false,
right: false,
};
}

23
src/app/pages/bootstrap/buttons/buttons.component.html
View file

@ -1,23 +0,0 @@
<div class="row">
<div class="col-lg-12">
<ngx-hero-buttons></ngx-hero-buttons>
</div>
<div class="col-md-12 col-lg-12 col-xxxl-6">
<ngx-shape-buttons></ngx-shape-buttons>
<div class="row">
<div class="col-lg-5">
<ngx-dropdown-buttons></ngx-dropdown-buttons>
<ngx-icon-buttons></ngx-icon-buttons>
</div>
<div class="col-lg-7">
<ngx-button-groups></ngx-button-groups>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-xxxl-6">
<ngx-size-buttons></ngx-size-buttons>
<ngx-default-buttons></ngx-default-buttons>
<ngx-block-level-buttons></ngx-block-level-buttons>
</div>
</div>

103
src/app/pages/bootstrap/buttons/buttons.component.scss
View file

@ -1,103 +0,0 @@
@import '../../../@theme/styles/themes';
@import '~@nebular/bootstrap/styles/buttons';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
::ng-deep {
$button-size: 50px;
.container-title {
color: nb-theme(color-fg);
font-family: nb-theme(font-secondary);
margin-bottom: 0.5rem;
}
.header {
color: nb-theme(color-fg-header);
font-size: 0.875rem;
}
.subheader {
font-size: 0.75rem;
font-weight: nb-theme(font-weight-light);
color: nb-theme(color-fg);
}
.btn-demo {
width: 180px;
}
.state-container {
display: flex;
&:not(:last-child) {
margin-bottom: 1rem;
}
.state-value {
width: $button-size;
height: $button-size;
border-radius: nb-theme(btn-border-radius);
@include nb-for-theme(corporate) {
border-radius: nb-theme(btn-semi-round-border-radius);
}
}
.state-details {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 1rem;
margin-right: 1rem;
height: $button-size;
}
}
.example-container {
@include nb-ltr(padding-right, 0);
@include nb-rtl(padding-left, 0);
}
.example-container .container-btn {
margin-bottom: 1.5rem;
}
.block-level-buttons .btn-group {
margin-bottom: 1rem;
}
}
@include media-breakpoint-down(is) {
ngx-default-buttons ::ng-deep nb-card-header {
flex-direction: column;
align-items: left;
span {
margin-bottom: 1rem;
}
}
}
@include media-breakpoint-down(xs) {
::ng-deep.icon-buttons .icon-button-examples {
button {
@include nb-ltr(margin-right, 1rem);
@include nb-rtl(margin-left, 1rem);
}
}
ngx-default-buttons ::ng-deep nb-card-header {
flex-direction: column;
margin-bottom: 0.5rem;
}
ngx-block-level-buttons ::ng-deep {
.btn-primary {
padding: 0.75rem 1rem;
}
}
}
}

9
src/app/pages/bootstrap/buttons/buttons.component.ts
View file

@ -1,9 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-buttons',
styleUrls: ['./buttons.component.scss'],
templateUrl: './buttons.component.html',
})
export class ButtonsComponent {
}

38
src/app/pages/bootstrap/buttons/buttons.module.ts
View file

@ -1,38 +0,0 @@
import { NgModule } from '@angular/core';
import { ThemeModule } from '../../../@theme/theme.module';
import { DefaultButtonsComponent } from './default-buttons/default-buttons.component';
import { HeroButtonComponent } from './hero-buttons/hero-buttons.component';
import { ShapeButtonsComponent } from './shape-buttons/shape-buttons.component';
import { SizeButtonsComponent } from './size-buttons/size-buttons.component';
import { ButtonsComponent } from './buttons.component';
import { DropdownButtonsComponent } from './dropdown-buttons/dropdown-button.component';
import { BlockLevelButtonsComponent } from './block-level-buttons/block-level-buttons.component';
import { ButtonGroupsComponent } from './button-groups/button-groups.component';
import { IconButtonsComponent } from './icon-buttons/icon-buttons.component';
const components = [
ButtonsComponent,
DefaultButtonsComponent,
HeroButtonComponent,
ShapeButtonsComponent,
SizeButtonsComponent,
DropdownButtonsComponent,
BlockLevelButtonsComponent,
ButtonGroupsComponent,
IconButtonsComponent,
];
@NgModule({
imports: [
ThemeModule,
],
exports: [
...components,
],
declarations: [
...components,
],
providers: [],
})
export class ButtonsModule { }

48
src/app/pages/bootstrap/buttons/default-buttons/default-buttons.component.html
View file

@ -1,48 +0,0 @@
<nb-card>
<nb-card-header>
<span>Default Buttons</span>
<div class="dropdown" ngbDropdown>
<button class="btn btn-primary" type="button" ngbDropdownToggle>
{{ selectedView.title }}
</button>
<ul class="dropdown-menu" ngbDropdownMenu>
<li class="dropdown-item" *ngFor="let v of buttonsViews" (click)="this.selectedView = v">{{ v.title }}</li>
</ul>
</div>
</nb-card-header>
<nb-card-body>
<div class="row">
<div class="example-container col-md-4" *ngFor="let b of buttons[selectedView.key]">
<div class="container-title">
<span>{{ b.containerTitle }}</span>
</div>
<div class="container-btn">
<button class="btn {{ b.class }} btn-demo">{{ b.title }}</button>
</div>
<div class="{{ b.container }}">
<div class="state-container">
<div class="state-value original"></div>
<div class="state-details">
<span class="header">Default</span>
<span class="subheader">{{ b.default }}</span>
</div>
</div>
<div class="state-container">
<div class="state-value hover"></div>
<div class="state-details">
<span class="header">Hover</span>
<span class="subheader">14% white</span>
</div>
</div>
<div class="state-container">
<div class="state-value active"></div>
<div class="state-details">
<span class="header">Active</span>
<span class="subheader">14% black</span>
</div>
</div>
</div>
</div>
</div>
</nb-card-body>
</nb-card>

126
src/app/pages/bootstrap/buttons/default-buttons/default-buttons.component.scss
View file

@ -1,126 +0,0 @@
@import '../../../../@theme/styles/themes';
@import '~@nebular/bootstrap/styles/buttons';
@include nb-install-component() {
nb-card-header {
display: flex;
align-items: center;
justify-content: space-between;
.dropdown {
flex-basis: 30%;
min-width: 220px;
}
}
nb-card-body {
padding-bottom: 0;
}
.example-container {
margin-bottom: 1.5rem;
}
.primary-container {
.original {
background-color: nb-theme(btn-primary-bg);
}
.hover {
@include btn-primary-hover();
}
.active {
@include btn-primary-active();
}
}
.primary-container.outline .original {
background-color: transparent;
border: 2px solid nb-theme(btn-primary-bg);
}
.success-container {
.original {
background-color: nb-theme(btn-success-bg);
}
.hover {
@include btn-success-hover();
}
.active {
@include btn-success-active();
}
}
.success-container.outline .original {
background-color: transparent;
border: 2px solid nb-theme(btn-success-bg);
}
.warning-container {
.original {
background-color: nb-theme(btn-warning-bg);
}
.hover {
@include btn-warning-hover();
}
.active {
@include btn-warning-active();
}
}
.warning-container.outline .original {
background-color: transparent;
border: 2px solid nb-theme(btn-warning-bg);
}
.info-container {
.original {
background-color: nb-theme(btn-info-bg);
}
.hover {
@include btn-info-hover();
}
.active {
@include btn-info-active();
}
}
.info-container.outline .original {
background-color: transparent;
border: 2px solid nb-theme(btn-info-bg);
}
.danger-container {
.original {
background-color: nb-theme(btn-danger-bg);
}
.hover {
@include btn-danger-hover();
}
.active {
@include btn-danger-active();
}
}
.danger-container.outline .original {
background-color: transparent;
border: 2px solid nb-theme(btn-danger-bg);
}
.secondary-container {
.original {
border: 2px solid nb-theme(btn-secondary-border);
}
.hover {
@include btn-secondary-hover();
}
.active {
@include btn-secondary-active();
}
}
.secondary-container.outline .original {
background-color: transparent;
border: 2px solid nb-theme(btn-secondary-border);
}
}

101
src/app/pages/bootstrap/buttons/default-buttons/default-buttons.component.ts
View file

@ -1,101 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-default-buttons',
styleUrls: ['./default-buttons.component.scss'],
templateUrl: './default-buttons.component.html',
})
export class DefaultButtonsComponent {
buttonsViews = [{
title: 'Default Buttons',
key: 'default',
}, {
title: 'Outline Buttons',
key: 'outline',
}];
selectedView = this.buttonsViews[0];
buttons = {
'default': [
{
class: 'btn-primary',
container: 'primary-container',
containerTitle: 'Primary Button',
title: 'Primary',
default: '#7659ff',
}, {
class: 'btn-warning',
container: 'warning-container',
containerTitle: 'Warning Button',
title: 'Warning',
default: '#ffcb17',
}, {
class: 'btn-success',
container: 'success-container',
containerTitle: 'Success Button',
title: 'Success',
default: '#00d977',
}, {
class: 'btn-info',
container: 'info-container',
containerTitle: 'Info Button',
title: 'Info',
default: '#0088ff',
}, {
class: 'btn-danger',
container: 'danger-container',
containerTitle: 'Danger Button',
title: 'Danger',
default: '#ff386a',
}, {
class: 'btn-secondary',
container: 'secondary-container',
containerTitle: 'Default Button',
title: 'Default',
default: '#bdbaff',
},
],
'outline': [
{
class: 'btn-outline-primary',
container: 'primary-container outline',
containerTitle: 'Primary Button',
title: 'Primary',
default: '#7659ff',
}, {
class: 'btn-outline-warning',
container: 'warning-container outline',
containerTitle: 'Warning Button',
title: 'Warning',
default: '#ffcb17',
}, {
class: 'btn-outline-success',
container: 'success-container outline',
containerTitle: 'Success Button',
title: 'Success',
default: '#00d977',
}, {
class: 'btn-outline-info',
container: 'info-container',
containerTitle: 'Info Button',
title: 'Info',
default: '#0088ff',
}, {
class: 'btn-outline-danger',
container: 'danger-container outline',
containerTitle: 'Danger Button',
title: 'Danger',
default: '#ff386a',
}, {
class: 'btn-outline-secondary',
container: 'secondary-container outline',
containerTitle: 'Default Button',
title: 'Default',
default: '#bdbaff',
},
],
};
}

44
src/app/pages/bootstrap/buttons/dropdown-buttons/dropdown-button.component.html
View file

@ -1,44 +0,0 @@
<nb-card>
<nb-card-header>Button Dropdowns</nb-card-header>
<nb-card-body>
<div class="dropdown btn-group" ngbDropdown>
<button type="button" class="btn btn-primary">Dropdown</button>
<button type="button" class="btn btn-primary" ngbDropdownToggle></button>
<ul class="dropdown-menu" ngbDropdownMenu>
<li class="dropdown-item">Icon Button</li>
<li class="dropdown-item">Hero Button</li>
<li class="dropdown-item">Default</li>
</ul>
</div>
<div class="dropdown" ngbDropdown>
<button class="btn btn-primary" type="button" ngbDropdownToggle>
Dropdown
</button>
<ul class="dropdown-menu" ngbDropdownMenu>
<li class="dropdown-item">Icon Button</li>
<li class="dropdown-item">Hero Button</li>
<li class="dropdown-item">Default</li>
</ul>
</div>
<div class="dropdown" placement="top" ngbDropdown>
<button class="btn btn-outline-primary" type="button" ngbDropdownToggle>
Dropup
</button>
<ul class="dropdown-menu" ngbDropdownMenu>
<li class="dropdown-item">Icon Button</li>
<li class="dropdown-item">Hero Button</li>
<li class="dropdown-item">Default</li>
</ul>
</div>
<div class="dropdown ghost-dropdown" ngbDropdown>
<button class="btn btn-primary" type="button" ngbDropdownToggle>
Dropdown
</button>
<ul class="dropdown-menu" ngbDropdownMenu>
<li class="dropdown-item">Icon Button</li>
<li class="dropdown-item">Hero Button</li>
<li class="dropdown-item">Default</li>
</ul>
</div>
</nb-card-body>
</nb-card>

13
src/app/pages/bootstrap/buttons/dropdown-buttons/dropdown-button.component.scss
View file

@ -1,13 +0,0 @@
@import '../../../../@theme/styles/themes';
@include nb-install-component() {
text-align: center;
.dropdown, .dropup, .btn-group {
margin-bottom: 1rem;
}
nb-card-body {
overflow: visible;
}
}

10
src/app/pages/bootstrap/buttons/dropdown-buttons/dropdown-button.component.ts
View file

@ -1,10 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-dropdown-buttons',
styleUrls: ['./dropdown-button.component.scss'],
templateUrl: './dropdown-button.component.html',
})
export class DropdownButtonsComponent {
}

72
src/app/pages/bootstrap/buttons/hero-buttons/hero-buttons.component.html
View file

@ -1,72 +0,0 @@
<nb-card>
<nb-card-header>Hero Buttons</nb-card-header>
<nb-card-body>
<div class="row">
<div class="example-container col-sm-6 col-md-4 col-xl-3 col-xxxl-2" *ngFor="let hb of settings">
<div class="container-title">
<span>{{ hb.title }}</span>
</div>
<div class="container-btn">
<button class="btn {{ hb.class }} btn-demo">{{ hb.buttonTitle }}</button>
</div>
<div class="{{ hb.container }}">
<div class="state-container" *ngIf="hb[themeName].border">
<div class="state-value border"></div>
<div class="state-details">
<span class="header">Border</span>
<span class="subheader">{{ hb[themeName].border }}</span>
</div>
</div>
<div class="state-container" *ngIf="hb[themeName].color">
<div class="state-value color"></div>
<div class="state-details">
<span class="header">Color</span>
<span class="subheader">{{ hb[themeName].color }}</span>
</div>
</div>
<div class="state-container" *ngIf="hb[themeName].gradientLeft">
<div class="state-value gradient"></div>
<div class="state-details">
<span class="header">Linear Gradient</span>
<span class="subheader">{{ hb[themeName].gradientLeft }}</span>
<span class="subheader">{{ hb[themeName].gradientRight }}</span>
</div>
</div>
<div class="state-container">
<div class="state-value bevel" [ngClass]="{ 'none': !hb[themeName].bevel }"></div>
<div class="state-details" *ngIf="hb[themeName].bevel">
<span class="header">Bevel</span>
<span class="subheader">0 3px 0 0</span>
<span class="subheader">{{ hb[themeName].bevel }}</span>
</div>
<div class="state-details" *ngIf="!hb[themeName].bevel">
<span class="header">No Bevel</span>
</div>
</div>
<div class="state-container">
<div class="state-value shadow" [ngClass]="{ 'none': !hb[themeName].shadow }"></div>
<div class="state-details" *ngIf="hb[themeName].shadow">
<span class="header">Shadow</span>
<span class="subheader">0 4px 10px 0</span>
<span class="subheader">{{ hb[themeName].shadow }}</span>
</div>
<div class="state-details" *ngIf="!hb[themeName].shadow">
<span class="header">No Shadow</span>
</div>
</div>
<div class="state-container">
<div class="state-value glow" [ngClass]="{ 'none': !hb[themeName].glow }"></div>
<div class="state-details" *ngIf="hb[themeName].glow">
<span class="header">Glow</span>
<span class="subheader">{{ hb[themeName].glow.params }}</span>
<span class="subheader">{{ hb[themeName].glow.color }}</span>
</div>
<div class="state-details" *ngIf="!hb[themeName].glow">
<span class="header">No Glow</span>
</div>
</div>
</div>
</div>
</div>
</nb-card-body>
</nb-card>

135
src/app/pages/bootstrap/buttons/hero-buttons/hero-buttons.component.scss
View file

@ -1,135 +0,0 @@
//@import '../../../../@theme/styles/themes';
//@import '~@nebular/bootstrap/styles/buttons';
//
//@include nb-install-component() {
//
// nb-card-body {
// padding-bottom: 0;
// }
//
// .none {
// position: relative;
// transform: rotate(45deg);
//
// &::before, &::after {
// position: absolute;
// content: '';
// background: nb-theme(form-control-border-color);
// }
//
// &::before {
// left: 50%;
// top: 10%;
// transform: translateX(-50%);
// width: 1px;
// height: 80%;
// }
//
// &::after {
// top: 50%;
// left: 10%;
// transform: translateY(-50%);
// height: 1px;
// width: 80%;
// }
// }
//
// .shadow {
// box-shadow: nb-theme(btn-hero-shadow);
// }
//
// .primary-container {
// .color {
// background-color: nb-theme(color-primary);
// }
// .gradient {
// @include btn-hero-primary-gradient();
// }
// .glow {
// box-shadow: btn-hero-primary-glow();
// }
// .bevel {
// box-shadow: btn-hero-primary-bevel();
// }
// }
//
// .warning-container {
// .color {
// background-color: nb-theme(color-warning);
// }
// .gradient {
// @include btn-hero-warning-gradient();
// }
// .glow {
// box-shadow: btn-hero-warning-glow();
// }
// .bevel {
// box-shadow: btn-hero-warning-bevel();
// }
// }
//
// .success-container {
// .color {
// background-color: nb-theme(color-success);
// }
// .gradient {
// @include btn-hero-success-gradient();
// }
// .glow {
// box-shadow: btn-hero-success-glow();
// }
// .bevel {
// box-shadow: btn-hero-success-bevel();
// }
// }
//
// .info-container {
// .color {
// background-color: nb-theme(color-info);
// }
// .gradient {
// @include btn-hero-info-gradient();
// }
// .glow {
// box-shadow: btn-hero-info-glow();
// }
// .bevel {
// box-shadow: btn-hero-info-bevel();
// }
// }
//
// .danger-container {
// .color {
// background-color: nb-theme(color-danger);
// }
// .gradient {
// @include btn-hero-danger-gradient();
// }
// .glow {
// box-shadow: btn-hero-danger-glow();
// }
// .bevel {
// box-shadow: btn-hero-danger-bevel();
// }
// }
//
// .secondary-container {
// .color {
// background-color: nb-theme(btn-secondary-bg);
// }
// .border {
// color: nb-theme(btn-secondary-color);
// border: nb-theme(btn-secondary-border-width) solid nb-theme(btn-secondary-border);
// }
// .glow {
// box-shadow: btn-hero-secondary-glow();
// }
// .bevel {
// box-shadow: btn-hero-secondary-bevel();
// }
// }
//
// .example-container {
// margin-bottom: 1.5rem;
// }
//}

180
src/app/pages/bootstrap/buttons/hero-buttons/hero-buttons.component.ts
View file

@ -1,180 +0,0 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { Subscription } from 'rxjs';
@Component({
selector: 'ngx-hero-buttons',
styleUrls: ['./hero-buttons.component.scss'],
templateUrl: './hero-buttons.component.html',
})
export class HeroButtonComponent implements OnDestroy {
themeName = 'default';
settings: Array<any>;
themeSubscription: Subscription;
constructor(private themeService: NbThemeService) {
this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => {
this.themeName = theme.name;
this.init(theme.variables);
});
}
init(colors: any) {
this.settings = [{
class: 'btn-hero-primary',
container: 'primary-container',
title: 'Primary Button',
buttonTitle: 'Primary',
default: {
gradientLeft: `adjust-hue(${colors.primary}, 20deg)`,
gradientRight: colors.primary,
},
corporate: {
color: colors.primary,
glow: {
params: '0 0 20px 0',
color: 'rgba (115, 161, 255, 0.5)',
},
},
cosmic: {
gradientLeft: `adjust-hue(${colors.primary}, 20deg)`,
gradientRight: colors.primary,
bevel: `shade(${colors.primary}, 14%)`,
shadow: 'rgba (6, 7, 64, 0.5)',
glow: {
params: '0 2px 12px 0',
color: `adjust-hue(${colors.primary}, 10deg)`,
},
},
}, {
class: 'btn-hero-warning',
container: 'warning-container',
title: 'Warning Button',
buttonTitle: 'Warning',
default: {
gradientLeft: `adjust-hue(${colors.warning}, 10deg)`,
gradientRight: colors.warning,
},
corporate: {
color: colors.warning,
glow: {
params: '0 0 20px 0',
color: 'rgba (256, 163, 107, 0.5)',
},
},
cosmic: {
gradientLeft: `adjust-hue(${colors.warning}, 10deg)`,
gradientRight: colors.warning,
bevel: `shade(${colors.warning}, 14%)`,
shadow: 'rgba (33, 7, 77, 0.5)',
glow: {
params: '0 2px 12px 0',
color: `adjust-hue(${colors.warning}, 5deg)`,
},
},
}, {
class: 'btn-hero-success',
container: 'success-container',
title: 'Success Button',
buttonTitle: 'Success',
default: {
gradientLeft: `adjust-hue(${colors.success}, 20deg)`,
gradientRight: colors.success,
},
corporate: {
color: colors.success,
glow: {
params: '0 0 20px 0',
color: 'rgba (93, 207, 227, 0.5)',
},
},
cosmic: {
gradientLeft: `adjust-hue(${colors.success}, 20deg)`,
gradientRight: colors.success,
bevel: `shade(${colors.success}, 14%)`,
shadow: 'rgba (33, 7, 77, 0.5)',
glow: {
params: '0 2px 12px 0',
color: `adjust-hue(${colors.success}, 10deg)`,
},
},
}, {
class: 'btn-hero-info',
container: 'info-container',
title: 'Info Button',
buttonTitle: 'Info',
default: {
gradientLeft: `adjust-hue(${colors.info}, -10deg)`,
gradientRight: colors.info,
},
corporate: {
color: colors.info,
glow: {
params: '0 0 20px 0',
color: 'rgba (186, 127, 236, 0.5)',
},
},
cosmic: {
gradientLeft: `adjust-hue(${colors.info}, -10deg)`,
gradientRight: colors.info,
bevel: `shade(${colors.info}, 14%)`,
shadow: 'rgba (33, 7, 77, 0.5)',
glow: {
params: '0 2px 12px 0',
color: `adjust-hue(${colors.info}, -5deg)`,
},
},
}, {
class: 'btn-hero-danger',
container: 'danger-container',
title: 'Danger Button',
buttonTitle: 'Danger',
default: {
gradientLeft: `adjust-hue(${colors.danger}, -20deg)`,
gradientRight: colors.danger,
},
corporate: {
color: colors.danger,
glow: {
params: '0 0 20px 0',
color: 'rgba (255, 107, 131, 0.5)',
},
},
cosmic: {
gradientLeft: `adjust-hue(${colors.danger}, -20deg)`,
gradientRight: colors.danger,
bevel: `shade(${colors.danger}, 14%)`,
shadow: 'rgba (33, 7, 77, 0.5)',
glow: {
params: '0 2px 12px 0',
color: `adjust-hue(${colors.danger}, -10deg)`,
},
},
}, {
class: 'btn-hero-secondary',
container: 'secondary-container',
title: 'Ghost Button',
buttonTitle: 'Ghost',
default: {
border: '#dadfe6',
},
corporate: {
color: '#edf2f5',
},
cosmic: {
border: colors.primary,
bevel: '#665ebd',
shadow: 'rgba (33, 7, 77, 0.5)',
glow: {
params: '0 2px 12px 0',
color: 'rgba (146, 141, 255, 1)',
},
},
}];
}
ngOnDestroy() {
this.themeSubscription.unsubscribe();
}
}

43
src/app/pages/bootstrap/buttons/icon-buttons/icon-buttons.component.html
View file

@ -1,43 +0,0 @@
<nb-card>
<nb-card-header>Icon buttons</nb-card-header>
<nb-card-body>
<div class="row icon-buttons">
<div class="col-md-12">
<div class="btn-group">
<button type="button" class="btn btn-primary btn-group-icon btn-group-divider">
<i class="nb-home"></i>
</button>
<button type="button" class="btn btn-primary">Icon Button</button>
</div>
<div class="btn-with-icon-example">
<button type="button" class="btn btn-primary btn-with-icon">
<i class="nb-home"></i>
<span>Icon Button</span>
</button>
</div>
<div class="icon-button-examples">
<button type="button" class="btn btn-outline-primary btn-icon">
<i class="nb-layout-centre"></i>
</button>
<button type="button" class="btn btn-outline-success btn-icon">
<i class="nb-layout-default"></i>
</button>
<button type="button" class="btn btn-outline-danger btn-icon">
<i class="nb-layout-one-column"></i>
</button>
</div>
<div class="icon-button-examples">
<button type="button" class="btn btn-primary btn-icon">
<i class="nb-shuffle"></i>
</button>
<button type="button" class="btn btn-success btn-icon">
<i class="nb-skip-backward-outline"></i>
</button>
<button type="button" class="btn btn-danger btn-icon">
<i class="nb-skip-forward-outline"></i>
</button>
</div>
</div>
</div>
</nb-card-body>
</nb-card>

30
src/app/pages/bootstrap/buttons/icon-buttons/icon-buttons.component.scss
View file

@ -1,30 +0,0 @@
nb-card-body {
div:not(:last-child) {
margin-bottom: 1rem;
}
}
.btn-with-icon-example {
width: 100%;
.btn {
width: 100%;
}
}
.btn-group:not(:last-child) {
margin-bottom: 1rem;
}
.icon-button-examples {
display: flex;
justify-content: space-between;
button {
min-width: 4rem;
}
}
.icon-button-examples:not(:last-child) {
margin-bottom: 1rem;
}

9
src/app/pages/bootstrap/buttons/icon-buttons/icon-buttons.component.ts
View file

@ -1,9 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-icon-buttons',
styleUrls: ['./icon-buttons.component.scss'],
templateUrl: './icon-buttons.component.html',
})
export class IconButtonsComponent {
}

43
src/app/pages/bootstrap/buttons/shape-buttons/shape-buttons.component.html
View file

@ -1,43 +0,0 @@
<nb-card>
<nb-card-header>Button Shapes</nb-card-header>
<nb-card-body>
<div class="shape-container">
<div class="container-title">
<span>Rectangle Button</span>
</div>
<div class="subheader">
<span>Border radius:</span>
<span>4px</span>
</div>
<div>
<button class="btn btn-success btn-rectangle btn-demo">Rectangle</button>
</div>
</div>
<div class="shape-container">
<div class="container-title">
<span>Semi-round Button</span>
</div>
<div class="subheader">
<span>Border radius:</span>
<span>12px</span>
</div>
<div>
<button class="btn btn-success btn-semi-round btn-demo">Semi-round</button>
</div>
</div>
<div class="shape-container">
<div class="container-title">
<span>Rounded Button</span>
</div>
<div class="subheader">
<span>Border radius:</span>
<span>round</span>
</div>
<div>
<button class="btn btn-success btn-round btn-demo">Round</button>
</div>
</div>
</nb-card-body>
</nb-card>

30
src/app/pages/bootstrap/buttons/shape-buttons/shape-buttons.component.scss
View file

@ -1,30 +0,0 @@
@import '../../../../@theme/styles/themes';
@import '~@nebular/bootstrap/styles/buttons';
@include nb-install-component() {
nb-card-body {
padding: 0 0 29px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.shape-container {
margin: 1.25rem 1.25rem 0;
}
.container-title {
margin-bottom: 0.25rem;
}
.subheader {
margin-bottom: 1rem;
font-size: 0.875rem;
span:nth-child(2) {
color: nb-theme(color-fg-heading);
font-weight: nb-theme(font-weight-bold);
}
}
}

9
src/app/pages/bootstrap/buttons/shape-buttons/shape-buttons.component.ts
View file

@ -1,9 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-shape-buttons',
styleUrls: ['./shape-buttons.component.scss'],
templateUrl: './shape-buttons.component.html',
})
export class ShapeButtonsComponent {
}

50
src/app/pages/bootstrap/buttons/size-buttons/size-buttons.component.html
View file

@ -1,50 +0,0 @@
<nb-card>
<nb-card-header>Button Sizes</nb-card-header>
<nb-card-body>
<div class="size-container">
<div class="container-title">
<span>Large Button</span>
</div>
<div class="subheader">
<span>0.875rem 1.75rem</span>
</div>
<div>
<button class="btn btn-primary btn-lg">Large Button</button>
</div>
</div>
<div class="size-container">
<div class="container-title">
<span>Medium Button</span>
</div>
<div class="subheader">
<span>0.75rem 1.5rem</span>
</div>
<div>
<button class="btn btn-primary btn-md">Medium Button</button>
</div>
</div>
<div class="size-container">
<div class="container-title">
<span>Small Button</span>
</div>
<div class="subheader">
<span>0.675rem 1.5rem</span>
</div>
<div>
<button class="btn btn-primary btn-sm">Small Button</button>
</div>
</div>
<div class="size-container">
<div class="container-title">
<span>X-Small Button</span>
</div>
<div class="subheader">
<span>0.5rem 1.25rem</span>
</div>
<div>
<button class="btn btn-primary btn-xs">X-Small Button</button>
</div>
</div>
</nb-card-body>
</nb-card>

26
src/app/pages/bootstrap/buttons/size-buttons/size-buttons.component.scss
View file

@ -1,26 +0,0 @@
@import '../../../../@theme/styles/themes';
@import '~@nebular/bootstrap/styles/buttons';
@include nb-install-component() {
nb-card-body {
padding: 0 1.25rem 1.25rem 0;
display: flex;
flex-wrap: wrap;
}
.container-title {
margin-bottom: 0.25rem;
}
.size-container {
margin: 1.25rem 0 0 1.25rem;
}
.subheader {
margin-bottom: 0.75rem;
font-size: 0.875rem;
font-weight: nb-theme(font-weight-bolder);
color: nb-theme(color-fg-heading);
}
}

9
src/app/pages/bootstrap/buttons/size-buttons/size-buttons.component.ts
View file

@ -1,9 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-size-buttons',
styleUrls: ['./size-buttons.component.scss'],
templateUrl: './size-buttons.component.html',
})
export class SizeButtonsComponent {
}

235
src/app/pages/bootstrap/form-inputs/form-inputs.component.html
View file

@ -1,235 +0,0 @@
<div class="row">
<div class="col-lg-6">
<nb-card>
<nb-card-header>Default Inputs</nb-card-header>
<nb-card-body>
<div class="input-group">
<input type="text" placeholder="Project" class="form-control"/>
</div>
<div class="row full-name-inputs">
<div class="col-sm-6 input-group">
<input type="text" placeholder="Nick" class="form-control"/>
</div>
<div class="col-sm-6 input-group">
<input type="text" placeholder="Last Name" class="form-control"/>
</div>
</div>
<div class="input-group">
<input type="password" placeholder="Password" class="form-control"/>
</div>
<div class="input-group has-person-icon">
<input type="text" placeholder="With Icon" class="form-control"/>
</div>
<div class="input-group input-group-rounded">
<input type="text" placeholder="Rounded border" class="form-control"/>
</div>
<div class="form-group">
<input type="text" placeholder="Project" class="form-control"/>
<small class="form-text">A block of help text that breaks into a new line and may extend beyond one line.
</small>
</div>
<div class="input-group">
<input type="text" placeholder="Disabled input" class="form-control" disabled/>
</div>
<div class="input-group">
<textarea rows="5" placeholder="Text Area" class="form-control"></textarea>
</div>
<div class="input-group input-group-sm">
<input type="text" placeholder="Small Input" class="form-control"/>
</div>
<div class="input-group input-group-lg">
<input type="text" placeholder="Large Input" class="form-control"/>
</div>
</nb-card-body>
</nb-card>
<nb-card>
<nb-card-header>Input Groups</nb-card-header>
<nb-card-body>
<div class="input-group">
<span class="input-group-addon success">@</span>
<input type="text" class="form-control" placeholder="Username"/>
</div>
<div class="input-group mail-btn-group">
<span class="input-group-prepend">
<button class="btn btn-primary btn-icon input-group-text">
<i class="ion-ios-email-outline"></i>
</button>
</span>
<input type="text" class="form-control" placeholder="Recipient's username">
<span class="input-group-append">
<button class="btn btn-primary input-group-text">
@example.com
</button>
</span>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-append">
<button class="btn btn-danger input-group-text">
Search
</button>
</span>
</div>
<div class="input-group">
<div class="dropdown input-group-prepend input-group-btn" ngbDropdown>
<button type="button" class="btn btn-success dropdown-toggle" ngbDropdownToggle>
Action
</button>
<ul class="dropdown-menu" ngbDropdownMenu>
<li class="dropdown-item">Action</li>
<li class="dropdown-item">Another action</li>
<li class="dropdown-item">Something else here</li>
<div role="separator" class="dropdown-divider"></div>
<li class="dropdown-item">Separated link</li>
</ul>
</div>
<input type="text" class="form-control">
</div>
</nb-card-body>
</nb-card>
<nb-card>
<nb-card-header>Selects</nb-card-header>
<nb-card-body>
<div class="form-group">
<label>Simple Select</label>
<select class="form-control">
<option>Minsk</option>
<option>Gomel</option>
<option>Brest</option>
<option>Grodno</option>
<option>Mogilev</option>
</select>
</div>
<div class="form-group">
<label>Multiple Select</label>
<select multiple class="form-control">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
<option>Item 4</option>
<option>Item 5</option>
</select>
</div>
</nb-card-body>
</nb-card>
</div>
<div class="col-lg-6">
<nb-card>
<nb-card-header>Input Styles</nb-card-header>
<nb-card-body>
<div class="input-group input-group-border-only">
<input type="text" placeholder="Border Only" class="form-control"/>
</div>
<div class="input-group">
<input type="text" placeholder="Default Input" class="form-control">
</div>
<div class="input-group input-group-fill-only">
<input type="text" placeholder="Fill Only" class="form-control">
</div>
</nb-card-body>
</nb-card>
<nb-card>
<nb-card-header>Validation States</nb-card-header>
<nb-card-body>
<div class="form-group">
<input type="text" placeholder="Input with Success" class="form-control form-control-success">
</div>
<div class="form-group">
<input type="text" placeholder="Input with Warning" class="form-control form-control-warning">
</div>
<div class="form-group">
<input type="text" placeholder="Input with Danger" class="form-control form-control-danger">
</div>
<div class="form-group validation-checkboxes row">
<nb-checkbox status="success" class="col-sm-4">Checkbox with Success</nb-checkbox>
<nb-checkbox status="warning" class="col-sm-4">Checkbox with Warning</nb-checkbox>
<nb-checkbox status="danger" class="col-sm-4">Checkbox with Danger</nb-checkbox>
</div>
<div class="form-group has-success">
<input type="text" placeholder="Input with Success Icon" class="form-control form-control-success">
</div>
<div class="form-group has-warning">
<input type="text" placeholder="Input with Warning Icon" class="form-control form-control-warning">
</div>
<div class="form-group has-danger">
<input type="text" placeholder="Input with Danger Icon" class="form-control form-control-danger">
</div>
</nb-card-body>
</nb-card>
<nb-card>
<nb-card-header>Checkboxes & Radios</nb-card-header>
<nb-card-body>
<div class="row demo-checkboxes-radio">
<div class="demo-checkboxes col-sm-4">
<nb-checkbox>Checkbox 1</nb-checkbox>
<nb-checkbox [value]="true">Checkbox 2</nb-checkbox>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="b-checkbox">
<label class="custom-control-label" for="b-checkbox">Bootstrap Checkbox</label>
</div>
</div>
<div class="demo-radio col-sm-4">
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="customRadio">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Radio 1</span>
</label>
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="customRadio" checked>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Radio 2</span>
</label>
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="customRadio">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Radio 3</span>
</label>
</div>
<div class="demo-disabled-checkbox-radio col-sm-4">
<nb-checkbox disabled>Disabled Checkbox</nb-checkbox>
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input" disabled>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Disabled Radio</span>
</label>
</div>
</div>
</nb-card-body>
</nb-card>
<nb-card>
<nb-card-body class="demo-rating">
<span class="rating-header">Rating</span>
<div>
<ngb-rating [(rate)]="starRate" max=5>
<ng-template let-fill="fill">
<span class="star fill" [class.filled]="fill === 100">
<i class="ion-android-star" *ngIf="fill === 100"></i>
<i class="ion-android-star-outline" *ngIf="fill !== 100"></i>
</span>
</ng-template>
</ngb-rating>
<span class="current-rate">{{ starRate }}</span>
</div>
<div>
<ngb-rating [(rate)]="heartRate" max=5>
<ng-template let-fill="fill">
<span class="star fill" [class.filled]="fill === 100">
<i class="ion-ios-heart" *ngIf="fill === 100"></i>
<i class="ion-ios-heart-outline" *ngIf="fill !== 100"></i>
</span>
</ng-template>
</ngb-rating>
<span class="current-rate">{{ heartRate }}</span>
</div>
</nb-card-body>
</nb-card>
</div>
</div>

130
src/app/pages/bootstrap/form-inputs/form-inputs.component.scss
View file

@ -1,130 +0,0 @@
@import '../../../@theme/styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
nb-card-body {
overflow: visible;
}
.input-group {
margin-bottom: 1rem;
}
.validation-checkboxes {
display: flex;
justify-content: space-between;
.custom-control {
margin-left: 1rem;
}
}
.demo-checkboxes {
display: flex;
flex-direction: column;
margin-bottom: 1rem;
}
.demo-radio {
display: flex;
flex-direction: column;
margin-bottom: 1rem;
}
.demo-disabled-checkbox-radio {
display: flex;
flex-direction: column;
margin-bottom: 1rem;
}
.demo-checkboxes-radio {
display: flex;
justify-content: space-between;
}
.demo-rating {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.star {
font-size: 1.5rem;
color: nb-theme(color-fg);
}
.filled {
color: nb-theme(color-fg);
}
// TODO: Replace with the card header styles mixin
.rating-header {
line-height: 2rem;
font-size: 1.25rem;
font-family: nb-theme(font-secondary);
font-weight: nb-theme(font-weight-bolder);
color: nb-theme(color-fg-heading);
}
.current-rate {
font-size: 1.5rem;
@include nb-ltr(padding-left, 1rem);
@include nb-rtl(padding-right, 1rem);
color: nb-theme(color-fg-heading);
}
.full-name-inputs {
display: flex;
}
.input-group.has-person-icon {
position: relative;
.form-control {
padding-left: 3rem;
}
&::before {
content: '\F47D';
font-family: 'Ionicons';
font-size: 2rem;
position: absolute;
z-index: 100;
left: 1rem;
top: 0.25rem;
}
}
.dropdown {
min-width: 7rem;
}
.dropdown-menu {
width: auto;
}
.form-group label {
padding: 0 0 0.75rem;
}
ngb-rating {
outline: none;
}
ngb-rating i {
color: nb-theme(color-success);
@include nb-for-theme(cosmic) {
color: nb-theme(color-primary);
}
}
@include media-breakpoint-down(xs) {
button:not(.btn-icon) {
padding: 0.75rem 1rem;
font-size: 0.75rem;
}
}
}

12
src/app/pages/bootstrap/form-inputs/form-inputs.component.ts
View file

@ -1,12 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-form-inputs',
styleUrls: ['./form-inputs.component.scss'],
templateUrl: './form-inputs.component.html',
})
export class FormInputsComponent {
starRate = 2;
heartRate = 4;
}

1
src/app/pages/bootstrap/modals/modal/modal.component.html
View file

@ -1 +0,0 @@

33
src/app/pages/bootstrap/modals/modal/modal.component.ts
View file

@ -1,33 +0,0 @@
import { Component } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'ngx-modal',
template: `
<div class="modal-header">
<span>{{ modalHeader }}</span>
<button class="close" aria-label="Close" (click)="closeModal()">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
{{ modalContent }}
</div>
<div class="modal-footer">
<button class="btn btn-md btn-primary" (click)="closeModal()">Save changes</button>
</div>
`,
})
export class ModalComponent {
modalHeader: string;
modalContent = `Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.`;
constructor(private activeModal: NgbActiveModal) { }
closeModal() {
this.activeModal.close();
}
}

12
src/app/pages/bootstrap/modals/modals.component.html
View file

@ -1,12 +0,0 @@
<div class="row">
<div class="col-md-12">
<nb-card>
<nb-card-header>Modals</nb-card-header>
<nb-card-body>
<button class="btn btn-success" (click)="showLargeModal()">Large modal</button>
<button class="btn btn-warning" (click)="showSmallModal()">Small modal</button>
<button class="btn btn-primary" (click)="showStaticModal()">Static modal</button>
</nb-card-body>
</nb-card>
</div>
</div>

8
src/app/pages/bootstrap/modals/modals.component.scss
View file

@ -1,8 +0,0 @@
@import '~@nebular/theme/styles/core/mixins';
:host {
button {
@include nb-ltr(margin, 0 0.75rem 2rem 0);
@include nb-rtl(margin, 0 0 2rem 0.75rem);
}
}

38
src/app/pages/bootstrap/modals/modals.component.ts
View file

@ -1,38 +0,0 @@
import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ModalComponent } from './modal/modal.component';
@Component({
selector: 'ngx-modals',
styleUrls: ['./modals.component.scss'],
templateUrl: './modals.component.html',
})
export class ModalsComponent {
constructor(private modalService: NgbModal) { }
showLargeModal() {
const activeModal = this.modalService.open(ModalComponent, { size: 'lg', container: 'nb-layout' });
activeModal.componentInstance.modalHeader = 'Large Modal';
}
showSmallModal() {
const activeModal = this.modalService.open(ModalComponent, { size: 'sm', container: 'nb-layout' });
activeModal.componentInstance.modalHeader = 'Small Modal';
}
showStaticModal() {
const activeModal = this.modalService.open(ModalComponent, {
size: 'sm',
backdrop: 'static',
container: 'nb-layout',
});
activeModal.componentInstance.modalHeader = 'Static modal';
activeModal.componentInstance.modalContent = `This is static modal, backdrop click
will not close it. Click × or confirmation button to close modal.`;
}
}

50
src/app/pages/extra-components/extra-components-routing.module.ts
View file

@ -2,18 +2,11 @@ import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; import { Routes, RouterModule } from '@angular/router';
import { ExtraComponentsComponent } from './extra-components.component'; import { ExtraComponentsComponent } from './extra-components.component';
import { TreeComponent } from './tree/tree.component';
import { AlertComponent } from './alert/alert.component'; import { AlertComponent } from './alert/alert.component';
import { ProgressBarComponent } from './progress-bar/progress-bar.component'; import { ProgressBarComponent } from './progress-bar/progress-bar.component';
import { SpinnerComponent } from './spinner/spinner.component'; import { SpinnerComponent } from './spinner/spinner.component';
import { CalendarComponent } from './calendar/calendar.component'; import { CalendarComponent } from './calendar/calendar.component';
import { ChatComponent } from './chat/chat.component'; import { ChatComponent } from './chat/chat.component';
import { Tab1Component, Tab2Component, TabsComponent } from './tabs/tabs.component';
import { AccordionComponent } from './accordion/accordion.component';
import { NebularFormInputsComponent } from './form-inputs/nebular-form-inputs.component';
import { InfiniteListComponent } from './infinite-list/infinite-list.component';
import { ListComponent } from './list/list.component';
import { StepperComponent } from './stepper/stepper.component';
import { CalendarKitFullCalendarShowcaseComponent } from './calendar-kit/calendar-kit.component'; import { CalendarKitFullCalendarShowcaseComponent } from './calendar-kit/calendar-kit.component';
const routes: Routes = [{ const routes: Routes = [{
@ -24,26 +17,6 @@ const routes: Routes = [{
path: 'calendar', path: 'calendar',
component: CalendarComponent, component: CalendarComponent,
}, },
{
path: 'stepper',
component: StepperComponent,
},
{
path: 'list',
component: ListComponent,
},
{
path: 'infinite-list',
component: InfiniteListComponent,
},
{
path: 'form-inputs',
component: NebularFormInputsComponent,
},
{
path: 'accordion',
component: AccordionComponent,
},
{ {
path: 'progress-bar', path: 'progress-bar',
component: ProgressBarComponent, component: ProgressBarComponent,
@ -56,29 +29,6 @@ const routes: Routes = [{
path: 'alert', path: 'alert',
component: AlertComponent, component: AlertComponent,
}, },
{
path: 'tree',
component: TreeComponent,
},
{
path: 'tabs',
component: TabsComponent,
children: [
{
path: '',
redirectTo: 'tab1',
pathMatch: 'full',
},
{
path: 'tab1',
component: Tab1Component,
},
{
path: 'tab2',
component: Tab2Component,
},
],
},
{ {
path: 'calendar-kit', path: 'calendar-kit',
component: CalendarKitFullCalendarShowcaseComponent, component: CalendarKitFullCalendarShowcaseComponent,

34
src/app/pages/extra-components/extra-components.module.ts
View file

@ -1,14 +1,9 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { TreeModule } from 'angular-tree-component';
import { ToasterModule } from 'angular2-toaster';
import { ThemeModule } from '../../@theme/theme.module'; import { ThemeModule } from '../../@theme/theme.module';
import { ExtraComponentsRoutingModule } from './extra-components-routing.module'; import { ExtraComponentsRoutingModule } from './extra-components-routing.module';
// components // components
import { ExtraComponentsComponent } from './extra-components.component'; import { ExtraComponentsComponent } from './extra-components.component';
import { TreeComponent } from './tree/tree.component';
import { SpinnerInTabsComponent } from './spinner/spinner-in-tabs/spinner-in-tabs.component'; import { SpinnerInTabsComponent } from './spinner/spinner-in-tabs/spinner-in-tabs.component';
import { SpinnerInButtonsComponent } from './spinner/spinner-in-buttons/spinner-in-buttons.component'; import { SpinnerInButtonsComponent } from './spinner/spinner-in-buttons/spinner-in-buttons.component';
import { SpinnerSizesComponent } from './spinner/spinner-sizes/spinner-sizes.component'; import { SpinnerSizesComponent } from './spinner/spinner-sizes/spinner-sizes.component';
@ -20,26 +15,15 @@ import {
import { ProgressBarComponent } from './progress-bar/progress-bar.component'; import { ProgressBarComponent } from './progress-bar/progress-bar.component';
import { AlertComponent } from './alert/alert.component'; import { AlertComponent } from './alert/alert.component';
import { ChatComponent } from './chat/chat.component'; import { ChatComponent } from './chat/chat.component';
import { Tab1Component, Tab2Component, TabsComponent } from './tabs/tabs.component';
import { CalendarComponent } from './calendar/calendar.component'; import { CalendarComponent } from './calendar/calendar.component';
import { DayCellComponent } from './calendar/day-cell/day-cell.component'; import { DayCellComponent } from './calendar/day-cell/day-cell.component';
import { StepperComponent } from './stepper/stepper.component';
import { ListComponent } from './list/list.component';
import { InfiniteListComponent } from './infinite-list/infinite-list.component';
import { NewsPostComponent } from './infinite-list/news-post/news-post.component';
import { NewsPostPlaceholderComponent } from './infinite-list/news-post-placeholder/news-post-placeholder.component';
import { AccordionComponent } from './accordion/accordion.component';
import { NebularFormInputsComponent } from './form-inputs/nebular-form-inputs.component'; import { NebularFormInputsComponent } from './form-inputs/nebular-form-inputs.component';
import { NebularSelectComponent } from './form-inputs/nebular-select/nebular-select.component'; import { NebularSelectComponent } from './form-inputs/nebular-select/nebular-select.component';
import { CalendarKitFullCalendarShowcaseComponent } from './calendar-kit/calendar-kit.component'; import { CalendarKitFullCalendarShowcaseComponent } from './calendar-kit/calendar-kit.component';
import { CalendarKitMonthCellComponent } from './calendar-kit/month-cell/month-cell.component'; import { CalendarKitMonthCellComponent } from './calendar-kit/month-cell/month-cell.component';
// service
import { NewsService } from './services/news.service';
const COMPONENTS = [ const COMPONENTS = [
ExtraComponentsComponent, ExtraComponentsComponent,
TreeComponent,
AlertComponent, AlertComponent,
ProgressBarComponent, ProgressBarComponent,
InteractiveProgressBarComponent, InteractiveProgressBarComponent,
@ -51,30 +35,15 @@ const COMPONENTS = [
CalendarComponent, CalendarComponent,
DayCellComponent, DayCellComponent,
ChatComponent, ChatComponent,
TabsComponent,
Tab1Component,
Tab2Component,
StepperComponent,
ListComponent,
InfiniteListComponent,
NewsPostComponent,
NewsPostPlaceholderComponent,
AccordionComponent,
NebularFormInputsComponent, NebularFormInputsComponent,
NebularSelectComponent, NebularSelectComponent,
CalendarKitFullCalendarShowcaseComponent, CalendarKitFullCalendarShowcaseComponent,
CalendarKitMonthCellComponent, CalendarKitMonthCellComponent,
]; ];
const SERVICES = [
NewsService,
];
const MODULES = [ const MODULES = [
ThemeModule, ThemeModule,
ExtraComponentsRoutingModule, ExtraComponentsRoutingModule,
TreeModule,
ToasterModule.forRoot(),
]; ];
@NgModule({ @NgModule({
@ -84,8 +53,5 @@ const MODULES = [
declarations: [ declarations: [
...COMPONENTS, ...COMPONENTS,
], ],
providers: [
...SERVICES,
],
}) })
export class ExtraComponentsModule { } export class ExtraComponentsModule { }

10
src/app/pages/extra-components/tree/tree.component.html
View file

@ -1,10 +0,0 @@
<div class="row">
<div class="col-md-6">
<nb-card>
<nb-card-header>Tree</nb-card-header>
<nb-card-body>
<tree-root [nodes]="nodes"></tree-root>
</nb-card-body>
</nb-card>
</div>
</div>

20
src/app/pages/extra-components/tree/tree.component.scss
View file

@ -1,20 +0,0 @@
@import '../../../@theme/styles/themes';
@include nb-install-component() {
::ng-deep .angular-tree-component {
cursor: default;
.node-wrapper {
.node-content-wrapper {
background: none;
box-shadow: none;
cursor: default;
}
.toggle-children-wrapper {
cursor: pointer;
}
}
}
}

33
src/app/pages/extra-components/tree/tree.component.ts
View file

@ -1,33 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-tree',
templateUrl: './tree.component.html',
styleUrls: ['./tree.component.scss'],
})
export class TreeComponent {
nodes = [{
name: 'Programming languages by programming paradigm',
children: [{
name: 'Object-oriented programming',
children: [{
name: 'Java',
}, {
name: 'C++',
}, {
name: 'C#',
}],
}, {
name: 'Prototype-based programming',
children: [{
name: 'JavaScript',
}, {
name: 'CoffeeScript',
}, {
name: 'Lua',
}],
}],
}];
}

260
src/app/pages/forms/buttons/default-buttons/default-buttons.component.scss
View file

@ -1,130 +1,130 @@
@import '../../../../@theme/styles/themes'; //@import '../../../../@theme/styles/themes';
@import '~@nebular/bootstrap/styles/buttons'; //@import '~@nebular/bootstrap/styles/buttons';
@import '~bootstrap/scss/mixins/breakpoints'; //@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints'; //@import '~@nebular/theme/styles/global/breakpoints';
//
@include nb-install-component() { //@include nb-install-component() {
//
nb-card-header { // nb-card-header {
display: flex; // display: flex;
align-items: center; // align-items: center;
justify-content: space-between; // justify-content: space-between;
} // }
//
nb-card-body { // nb-card-body {
padding-bottom: 0; // padding-bottom: 0;
} // }
//
.example-container { // .example-container {
margin-bottom: 1.5rem; // margin-bottom: 1.5rem;
} // }
//
.primary-container { // .primary-container {
.original { // .original {
background-color: nb-theme(btn-primary-bg); // background-color: nb-theme(btn-primary-bg);
} // }
.hover { // .hover {
@include btn-primary-hover(); // @include btn-primary-hover();
} // }
.active { // .active {
@include btn-primary-active(); // @include btn-primary-active();
} // }
} // }
//
.primary-container.outline .original { // .primary-container.outline .original {
background-color: transparent; // background-color: transparent;
border: 2px solid nb-theme(btn-primary-bg); // border: 2px solid nb-theme(btn-primary-bg);
} // }
//
.success-container { // .success-container {
.original { // .original {
background-color: nb-theme(btn-success-bg); // background-color: nb-theme(btn-success-bg);
} // }
.hover { // .hover {
@include btn-success-hover(); // @include btn-success-hover();
} // }
.active { // .active {
@include btn-success-active(); // @include btn-success-active();
} // }
} // }
//
.success-container.outline .original { // .success-container.outline .original {
background-color: transparent; // background-color: transparent;
border: 2px solid nb-theme(btn-success-bg); // border: 2px solid nb-theme(btn-success-bg);
} // }
//
.warning-container { // .warning-container {
.original { // .original {
background-color: nb-theme(btn-warning-bg); // background-color: nb-theme(btn-warning-bg);
} // }
.hover { // .hover {
@include btn-warning-hover(); // @include btn-warning-hover();
} // }
.active { // .active {
@include btn-warning-active(); // @include btn-warning-active();
} // }
} // }
//
.warning-container.outline .original { // .warning-container.outline .original {
background-color: transparent; // background-color: transparent;
border: 2px solid nb-theme(btn-warning-bg); // border: 2px solid nb-theme(btn-warning-bg);
} // }
//
.info-container { // .info-container {
.original { // .original {
background-color: nb-theme(btn-info-bg); // background-color: nb-theme(btn-info-bg);
} // }
.hover { // .hover {
@include btn-info-hover(); // @include btn-info-hover();
} // }
.active { // .active {
@include btn-info-active(); // @include btn-info-active();
} // }
} // }
//
.info-container.outline .original { // .info-container.outline .original {
background-color: transparent; // background-color: transparent;
border: 2px solid nb-theme(btn-info-bg); // border: 2px solid nb-theme(btn-info-bg);
} // }
//
.danger-container { // .danger-container {
.original { // .original {
background-color: nb-theme(btn-danger-bg); // background-color: nb-theme(btn-danger-bg);
} // }
.hover { // .hover {
@include btn-danger-hover(); // @include btn-danger-hover();
} // }
.active { // .active {
@include btn-danger-active(); // @include btn-danger-active();
} // }
} // }
//
.danger-container.outline .original { // .danger-container.outline .original {
background-color: transparent; // background-color: transparent;
border: 2px solid nb-theme(btn-danger-bg); // border: 2px solid nb-theme(btn-danger-bg);
} // }
//
.secondary-container { // .secondary-container {
.original { // .original {
border: 2px solid nb-theme(btn-secondary-border); // border: 2px solid nb-theme(btn-secondary-border);
} // }
.hover { // .hover {
@include btn-secondary-hover(); // @include btn-secondary-hover();
} // }
.active { // .active {
@include btn-secondary-active(); // @include btn-secondary-active();
} // }
} // }
//
.secondary-container.outline .original { // .secondary-container.outline .original {
background-color: transparent; // background-color: transparent;
border: 2px solid nb-theme(btn-secondary-border); // border: 2px solid nb-theme(btn-secondary-border);
} // }
//
@include media-breakpoint-up(xxl) { // @include media-breakpoint-up(xxl) {
.example-container { // .example-container {
flex: 0 0 20%; // flex: 0 0 20%;
max-width: 20%; // max-width: 20%;
} // }
} // }
} //}

260
src/app/pages/forms/buttons/outline-buttons/outline-buttons.component.scss
View file

@ -1,130 +1,130 @@
@import '../../../../@theme/styles/themes'; //@import '../../../../@theme/styles/themes';
@import '~@nebular/bootstrap/styles/buttons'; //@import '~@nebular/bootstrap/styles/buttons';
@import '~bootstrap/scss/mixins/breakpoints'; //@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints'; //@import '~@nebular/theme/styles/global/breakpoints';
//
@include nb-install-component() { //@include nb-install-component() {
//
nb-card-header { // nb-card-header {
display: flex; // display: flex;
align-items: center; // align-items: center;
justify-content: space-between; // justify-content: space-between;
} // }
//
nb-card-body { // nb-card-body {
padding-bottom: 0; // padding-bottom: 0;
} // }
//
.example-container { // .example-container {
margin-bottom: 1.5rem; // margin-bottom: 1.5rem;
} // }
//
.primary-container { // .primary-container {
.original { // .original {
background-color: nb-theme(btn-primary-bg); // background-color: nb-theme(btn-primary-bg);
} // }
.hover { // .hover {
@include btn-primary-hover(); // @include btn-primary-hover();
} // }
.active { // .active {
@include btn-primary-active(); // @include btn-primary-active();
} // }
} // }
//
.primary-container.outline .original { // .primary-container.outline .original {
background-color: transparent; // background-color: transparent;
border: 2px solid nb-theme(btn-primary-bg); // border: 2px solid nb-theme(btn-primary-bg);
} // }
//
.success-container { // .success-container {
.original { // .original {
background-color: nb-theme(btn-success-bg); // background-color: nb-theme(btn-success-bg);
} // }
.hover { // .hover {
@include btn-success-hover(); // @include btn-success-hover();
} // }
.active { // .active {
@include btn-success-active(); // @include btn-success-active();
} // }
} // }
//
.success-container.outline .original { // .success-container.outline .original {
background-color: transparent; // background-color: transparent;
border: 2px solid nb-theme(btn-success-bg); // border: 2px solid nb-theme(btn-success-bg);
} // }
//
.warning-container { // .warning-container {
.original { // .original {
background-color: nb-theme(btn-warning-bg); // background-color: nb-theme(btn-warning-bg);
} // }
.hover { // .hover {
@include btn-warning-hover(); // @include btn-warning-hover();
} // }
.active { // .active {
@include btn-warning-active(); // @include btn-warning-active();
} // }
} // }
//
.warning-container.outline .original { // .warning-container.outline .original {
background-color: transparent; // background-color: transparent;
border: 2px solid nb-theme(btn-warning-bg); // border: 2px solid nb-theme(btn-warning-bg);
} // }
//
.info-container { // .info-container {
.original { // .original {
background-color: nb-theme(btn-info-bg); // background-color: nb-theme(btn-info-bg);
} // }
.hover { // .hover {
@include btn-info-hover(); // @include btn-info-hover();
} // }
.active { // .active {
@include btn-info-active(); // @include btn-info-active();
} // }
} // }
//
.info-container.outline .original { // .info-container.outline .original {
background-color: transparent; // background-color: transparent;
border: 2px solid nb-theme(btn-info-bg); // border: 2px solid nb-theme(btn-info-bg);
} // }
//
.danger-container { // .danger-container {
.original { // .original {
background-color: nb-theme(btn-danger-bg); // background-color: nb-theme(btn-danger-bg);
} // }
.hover { // .hover {
@include btn-danger-hover(); // @include btn-danger-hover();
} // }
.active { // .active {
@include btn-danger-active(); // @include btn-danger-active();
} // }
} // }
//
.danger-container.outline .original { // .danger-container.outline .original {
background-color: transparent; // background-color: transparent;
border: 2px solid nb-theme(btn-danger-bg); // border: 2px solid nb-theme(btn-danger-bg);
} // }
//
.secondary-container { // .secondary-container {
.original { // .original {
border: 2px solid nb-theme(btn-secondary-border); // border: 2px solid nb-theme(btn-secondary-border);
} // }
.hover { // .hover {
@include btn-secondary-hover(); // @include btn-secondary-hover();
} // }
.active { // .active {
@include btn-secondary-active(); // @include btn-secondary-active();
} // }
} // }
//
.secondary-container.outline .original { // .secondary-container.outline .original {
background-color: transparent; // background-color: transparent;
border: 2px solid nb-theme(btn-secondary-border); // border: 2px solid nb-theme(btn-secondary-border);
} // }
//
@include media-breakpoint-up(xxl) { // @include media-breakpoint-up(xxl) {
.example-container { // .example-container {
flex: 0 0 20%; // flex: 0 0 20%;
max-width: 20%; // max-width: 20%;
} // }
} // }
} //}

0
src/app/pages/extra-components/accordion/accordion.component.html → src/app/pages/layout/accordion/accordion.component.html
View file

4
src/app/pages/extra-components/accordion/accordion.component.scss → src/app/pages/layout/accordion/accordion.component.scss
View file

@ -1,5 +1,5 @@
@import '~bootstrap/scss/mixins/breakpoints'; @import '../../../../../node_modules/bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints'; @import '../../../../../node_modules/@nebular/theme/styles/global/breakpoints';
@import '../../../@theme/styles/themes'; @import '../../../@theme/styles/themes';

0
src/app/pages/extra-components/accordion/accordion.component.ts → src/app/pages/layout/accordion/accordion.component.ts
View file

0
src/app/pages/extra-components/infinite-list/infinite-list.component.html → src/app/pages/layout/infinite-list/infinite-list.component.html
View file

0
src/app/pages/extra-components/infinite-list/infinite-list.component.scss → src/app/pages/layout/infinite-list/infinite-list.component.scss
View file

0
src/app/pages/extra-components/infinite-list/infinite-list.component.ts → src/app/pages/layout/infinite-list/infinite-list.component.ts
View file

0
src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.html → src/app/pages/layout/infinite-list/news-post-placeholder/news-post-placeholder.component.html
View file

0
src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.scss → src/app/pages/layout/infinite-list/news-post-placeholder/news-post-placeholder.component.scss
View file

0
src/app/pages/extra-components/infinite-list/news-post-placeholder/news-post-placeholder.component.ts → src/app/pages/layout/infinite-list/news-post-placeholder/news-post-placeholder.component.ts
View file

0
src/app/pages/extra-components/infinite-list/news-post/news-post.component.html → src/app/pages/layout/infinite-list/news-post/news-post.component.html
View file

0
src/app/pages/extra-components/infinite-list/news-post/news-post.component.ts → src/app/pages/layout/infinite-list/news-post/news-post.component.ts
View file

58
src/app/pages/layout/layout-routing.module.ts Normal file
View file

@ -0,0 +1,58 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LayoutComponent } from './layout.component';
import { Tab1Component, Tab2Component, TabsComponent } from './tabs/tabs.component';
import { AccordionComponent } from './accordion/accordion.component';
import { InfiniteListComponent } from './infinite-list/infinite-list.component';
import { ListComponent } from './list/list.component';
import { StepperComponent } from './stepper/stepper.component';
const routes: Routes = [{
path: '',
component: LayoutComponent,
children: [
{
path: 'stepper',
component: StepperComponent,
},
{
path: 'list',
component: ListComponent,
},
{
path: 'infinite-list',
component: InfiniteListComponent,
},
{
path: 'accordion',
component: AccordionComponent,
},
{
path: 'tabs',
component: TabsComponent,
children: [
{
path: '',
redirectTo: 'tab1',
pathMatch: 'full',
},
{
path: 'tab1',
component: Tab1Component,
},
{
path: 'tab2',
component: Tab2Component,
},
],
},
],
}];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class LayoutRoutingModule {
}

4
src/app/pages/bootstrap/bootstrap.component.ts → src/app/pages/layout/layout.component.ts
View file

@ -1,10 +1,10 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
@Component({ @Component({
selector: 'ngx-bootstrap', selector: 'ngx-components',
template: ` template: `
<router-outlet></router-outlet> <router-outlet></router-outlet>
`, `,
}) })
export class BootstrapComponent { export class LayoutComponent {
} }

51
src/app/pages/layout/layout.module.ts Normal file
View file

@ -0,0 +1,51 @@
import { NgModule } from '@angular/core';
import { ThemeModule } from '../../@theme/theme.module';
import { LayoutRoutingModule } from './layout-routing.module';
// components
import { LayoutComponent } from './layout.component';
import { Tab1Component, Tab2Component, TabsComponent } from './tabs/tabs.component';
import { StepperComponent } from './stepper/stepper.component';
import { ListComponent } from './list/list.component';
import { InfiniteListComponent } from './infinite-list/infinite-list.component';
import { NewsPostComponent } from './infinite-list/news-post/news-post.component';
import { NewsPostPlaceholderComponent } from './infinite-list/news-post-placeholder/news-post-placeholder.component';
import { AccordionComponent } from './accordion/accordion.component';
// service
import { NewsService } from './services/news.service';
const COMPONENTS = [
LayoutComponent,
TabsComponent,
Tab1Component,
Tab2Component,
StepperComponent,
ListComponent,
NewsPostPlaceholderComponent,
InfiniteListComponent,
NewsPostComponent,
AccordionComponent,
];
const SERVICES = [
NewsService,
];
const MODULES = [
ThemeModule,
LayoutRoutingModule,
];
@NgModule({
imports: [
...MODULES,
],
declarations: [
...COMPONENTS,
],
providers: [
...SERVICES,
],
})
export class LayoutModule { }

0
src/app/pages/extra-components/list/fruits-list.ts → src/app/pages/layout/list/fruits-list.ts
View file

0
src/app/pages/extra-components/list/list.component.html → src/app/pages/layout/list/list.component.html
View file

0
src/app/pages/extra-components/list/list.component.scss → src/app/pages/layout/list/list.component.scss
View file

0
src/app/pages/extra-components/list/list.component.ts → src/app/pages/layout/list/list.component.ts
View file

0
src/app/pages/extra-components/services/news.service.ts → src/app/pages/layout/services/news.service.ts
View file

0
src/app/pages/extra-components/stepper/stepper.component.html → src/app/pages/layout/stepper/stepper.component.html
View file

0
src/app/pages/extra-components/stepper/stepper.component.scss → src/app/pages/layout/stepper/stepper.component.scss
View file

0
src/app/pages/extra-components/stepper/stepper.component.ts → src/app/pages/layout/stepper/stepper.component.ts
View file

0
src/app/pages/extra-components/tabs/tabs.component.html → src/app/pages/layout/tabs/tabs.component.html
View file

4
src/app/pages/extra-components/tabs/tabs.component.scss → src/app/pages/layout/tabs/tabs.component.scss
View file

@ -1,6 +1,6 @@
@import '../../../@theme/styles/themes'; @import '../../../@theme/styles/themes';
@import '~bootstrap/scss/mixins/breakpoints'; @import '../../../../../node_modules/bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/breakpoints'; @import '../../../../../node_modules/@nebular/theme/styles/global/breakpoints';
@include nb-install-component() { @include nb-install-component() {
nb-tabset { nb-tabset {

0
src/app/pages/extra-components/tabs/tabs.component.ts → src/app/pages/layout/tabs/tabs.component.ts
View file

98
src/app/pages/pages-menu.ts
View file

@ -3,13 +3,13 @@ import { NbMenuItem } from '@nebular/theme';
export const MENU_ITEMS: NbMenuItem[] = [ export const MENU_ITEMS: NbMenuItem[] = [
{ {
title: 'E-commerce', title: 'E-commerce',
icon: 'nb-e-commerce', icon: 'shopping-cart-outline',
link: '/pages/dashboard', link: '/pages/dashboard',
home: true, home: true,
}, },
{ {
title: 'IoT Dashboard', title: 'IoT Dashboard',
icon: 'nb-home', icon: 'home-outline',
link: '/pages/iot-dashboard', link: '/pages/iot-dashboard',
}, },
{ {
@ -17,66 +17,34 @@ export const MENU_ITEMS: NbMenuItem[] = [
group: true, group: true,
}, },
{ {
title: 'Extra Components', title: 'Layout',
icon: 'nb-star', icon: 'layout-outline',
children: [ children: [
{
title: 'Calendar',
link: '/pages/extra-components/calendar',
},
{ {
title: 'Stepper', title: 'Stepper',
link: '/pages/extra-components/stepper', link: '/pages/layout/stepper',
}, },
{ {
title: 'List', title: 'List',
link: '/pages/extra-components/list', link: '/pages/layout/list',
}, },
{ {
title: 'Infinite List', title: 'Infinite List',
link: '/pages/extra-components/infinite-list', link: '/pages/layout/infinite-list',
},
{
title: 'Form Inputs',
link: '/pages/extra-components/form-inputs',
}, },
{ {
title: 'Accordion', title: 'Accordion',
link: '/pages/extra-components/accordion', link: '/pages/layout/accordion',
},
{
title: 'Progress Bar',
link: '/pages/extra-components/progress-bar',
},
{
title: 'Spinner',
link: '/pages/extra-components/spinner',
},
{
title: 'Alert',
link: '/pages/extra-components/alert',
},
{
title: 'Tree',
link: '/pages/extra-components/tree',
}, },
{ {
title: 'Tabs', title: 'Tabs',
link: '/pages/extra-components/tabs', link: '/pages/layout/tabs',
},
{
title: 'Calendar Kit',
link: '/pages/extra-components/calendar-kit',
},
{
title: 'Chat',
link: '/pages/extra-components/chat',
}, },
], ],
}, },
{ {
title: 'Forms', title: 'Forms',
icon: 'nb-compose', icon: 'edit-2-outline',
children: [ children: [
{ {
title: 'Form Inputs', title: 'Form Inputs',
@ -98,7 +66,7 @@ export const MENU_ITEMS: NbMenuItem[] = [
}, },
{ {
title: 'UI Features', title: 'UI Features',
icon: 'nb-keypad', icon: 'keypad-outline',
link: '/pages/ui-features', link: '/pages/ui-features',
children: [ children: [
{ {
@ -121,7 +89,7 @@ export const MENU_ITEMS: NbMenuItem[] = [
}, },
{ {
title: 'Modal & Overlays', title: 'Modal & Overlays',
icon: 'nb-layout-default', icon: 'browser-outline',
children: [ children: [
{ {
title: 'Dialog', title: 'Dialog',
@ -146,26 +114,38 @@ export const MENU_ITEMS: NbMenuItem[] = [
], ],
}, },
{ {
title: 'Bootstrap', title: 'Extra Components',
icon: 'nb-gear', icon: 'message-circle-outline',
children: [ children: [
{ {
title: 'Form Inputs', title: 'Calendar',
link: '/pages/bootstrap/inputs', link: '/pages/extra-components/calendar',
}, },
{ {
title: 'Buttons', title: 'Progress Bar',
link: '/pages/bootstrap/buttons', link: '/pages/extra-components/progress-bar',
}, },
{ {
title: 'Modal', title: 'Spinner',
link: '/pages/bootstrap/modal', link: '/pages/extra-components/spinner',
},
{
title: 'Alert',
link: '/pages/extra-components/alert',
},
{
title: 'Calendar Kit',
link: '/pages/extra-components/calendar-kit',
},
{
title: 'Chat',
link: '/pages/extra-components/chat',
}, },
], ],
}, },
{ {
title: 'Maps', title: 'Maps',
icon: 'nb-location', icon: 'map-outline',
children: [ children: [
{ {
title: 'Google Maps', title: 'Google Maps',
@ -187,7 +167,7 @@ export const MENU_ITEMS: NbMenuItem[] = [
}, },
{ {
title: 'Charts', title: 'Charts',
icon: 'nb-bar-chart', icon: 'pie-chart-outline',
children: [ children: [
{ {
title: 'Echarts', title: 'Echarts',
@ -205,7 +185,7 @@ export const MENU_ITEMS: NbMenuItem[] = [
}, },
{ {
title: 'Editors', title: 'Editors',
icon: 'nb-title', icon: 'text-outline',
children: [ children: [
{ {
title: 'TinyMCE', title: 'TinyMCE',
@ -218,8 +198,8 @@ export const MENU_ITEMS: NbMenuItem[] = [
], ],
}, },
{ {
title: 'Tables', title: 'Tables & Data',
icon: 'nb-tables', icon: 'grid-outline',
children: [ children: [
{ {
title: 'Smart Table', title: 'Smart Table',
@ -229,7 +209,7 @@ export const MENU_ITEMS: NbMenuItem[] = [
}, },
{ {
title: 'Miscellaneous', title: 'Miscellaneous',
icon: 'nb-shuffle', icon: 'shuffle-2-outline',
children: [ children: [
{ {
title: '404', title: '404',
@ -239,7 +219,7 @@ export const MENU_ITEMS: NbMenuItem[] = [
}, },
{ {
title: 'Auth', title: 'Auth',
icon: 'nb-locked', icon: 'lock-outline',
children: [ children: [
{ {
title: 'Login', title: 'Login',

84
src/app/pages/pages-routing.module.ts
View file

@ -9,57 +9,71 @@ import { NotFoundComponent } from './miscellaneous/not-found/not-found.component
const routes: Routes = [{ const routes: Routes = [{
path: '', path: '',
component: PagesComponent, component: PagesComponent,
children: [{ children: [
{
path: 'dashboard', path: 'dashboard',
component: ECommerceComponent, component: ECommerceComponent,
}, { },
{
path: 'iot-dashboard', path: 'iot-dashboard',
component: DashboardComponent, component: DashboardComponent,
}, { },
path: 'ui-features', {
loadChildren: () => import('./ui-features/ui-features.module') path: 'layout',
.then(m => m.UiFeaturesModule), loadChildren: () => import('./layout/layout.module')
}, { .then(m => m.LayoutModule),
path: 'modal-overlays', },
loadChildren: () => import('./modal-overlays/modal-overlays.module') {
.then(m => m.ModalOverlaysModule),
}, {
path: 'extra-components',
loadChildren: () => import('./extra-components/extra-components.module')
.then(m => m.ExtraComponentsModule),
}, {
path: 'bootstrap',
loadChildren: () => import('./bootstrap/bootstrap.module')
.then(m => m.BootstrapModule),
}, {
path: 'maps',
loadChildren: () => import('./maps/maps.module')
.then(m => m.MapsModule),
}, {
path: 'charts',
loadChildren: () => import('./charts/charts.module')
.then(m => m.ChartsModule),
}, {
path: 'editors',
loadChildren: () => import('./editors/editors.module')
.then(m => m.EditorsModule),
}, {
path: 'forms', path: 'forms',
loadChildren: () => import('./forms/forms.module') loadChildren: () => import('./forms/forms.module')
.then(m => m.FormsModule), .then(m => m.FormsModule),
}, { },
{
path: 'ui-features',
loadChildren: () => import('./ui-features/ui-features.module')
.then(m => m.UiFeaturesModule),
},
{
path: 'modal-overlays',
loadChildren: () => import('./modal-overlays/modal-overlays.module')
.then(m => m.ModalOverlaysModule),
},
{
path: 'extra-components',
loadChildren: () => import('./extra-components/extra-components.module')
.then(m => m.ExtraComponentsModule),
},
{
path: 'maps',
loadChildren: () => import('./maps/maps.module')
.then(m => m.MapsModule),
},
{
path: 'charts',
loadChildren: () => import('./charts/charts.module')
.then(m => m.ChartsModule),
},
{
path: 'editors',
loadChildren: () => import('./editors/editors.module')
.then(m => m.EditorsModule),
},
{
path: 'tables', path: 'tables',
loadChildren: () => import('./tables/tables.module') loadChildren: () => import('./tables/tables.module')
.then(m => m.TablesModule), .then(m => m.TablesModule),
}, { },
{
path: 'miscellaneous', path: 'miscellaneous',
loadChildren: () => import('./miscellaneous/miscellaneous.module') loadChildren: () => import('./miscellaneous/miscellaneous.module')
.then(m => m.MiscellaneousModule), .then(m => m.MiscellaneousModule),
}, { },
{
path: '', path: '',
redirectTo: 'dashboard', redirectTo: 'dashboard',
pathMatch: 'full', pathMatch: 'full',
}, { },
{
path: '**', path: '**',
component: NotFoundComponent, component: NotFoundComponent,
}], }],

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

@ -6,10 +6,10 @@ import { MENU_ITEMS } from './pages-menu';
selector: 'ngx-pages', selector: 'ngx-pages',
styleUrls: ['pages.component.scss'], styleUrls: ['pages.component.scss'],
template: ` template: `
<ngx-sample-layout> <ngx-one-column-layout>
<nb-menu [items]="menu"></nb-menu> <nb-menu [items]="menu"></nb-menu>
<router-outlet></router-outlet> <router-outlet></router-outlet>
</ngx-sample-layout> </ngx-one-column-layout>
`, `,
}) })
export class PagesComponent { export class PagesComponent {