first commit
This commit is contained in:
35
src/app/_layout/header/vertical/vertical.component.css
Normal file
35
src/app/_layout/header/vertical/vertical.component.css
Normal file
@@ -0,0 +1,35 @@
|
||||
.dropdown-menu-right {
|
||||
right: 0;
|
||||
left: auto !important;
|
||||
top: auto !important;
|
||||
}
|
||||
|
||||
.header-navbar .navbar-container ul.nav li a.dropdown-user-link .user-name {
|
||||
margin-left: 0rem !important;
|
||||
}
|
||||
|
||||
.border_bottom {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .dropdown-item:active {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 991.98px) {
|
||||
.ft-toggle-right {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ft-toggle-left {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.collapse:not(.show) {
|
||||
display: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
.header-navbar .navbar-header .navbar-brand .brand-text {
|
||||
padding-left: 11px !important;
|
||||
}
|
||||
226
src/app/_layout/header/vertical/vertical.component.html
Normal file
226
src/app/_layout/header/vertical/vertical.component.html
Normal file
@@ -0,0 +1,226 @@
|
||||
<nav class="header-navbar navbar-expand-md navbar navbar-with-menu navbar-without-dd-arrow fixed-top navbar-shadow"
|
||||
[ngClass]="selectedHeaderNavBarClass">
|
||||
<div class="navbar-wrapper">
|
||||
<div id="navbar-header" class="navbar-header" [ngClass]="selectedNavBarHeaderClass"
|
||||
(mouseenter)="mouseEnter($event)" (mouseleave)="mouseLeave($event)">
|
||||
<ul class="nav navbar-nav flex-row">
|
||||
<!-- Remove position relative in responsive -->
|
||||
<li class="nav-item mobile-menu d-lg-none mr-auto"><a class="nav-link nav-menu-main menu-toggle hidden-xs11"
|
||||
(click)="toggleNavigation($event)">
|
||||
<i class="feather ft-menu font-large-1"></i></a></li>
|
||||
<li class="nav-item mr-auto"><a [routerLink]="['/dashboard/sales']" class="navbar-brand"
|
||||
routerLink="/dashboard/sales"><img class="brand-logo" alt="modern admin logo"
|
||||
[src]="_themeSettingsConfig.brand.logo.value">
|
||||
<h3 class="brand-text">{{_themeSettingsConfig.brand.brand_name}}</h3>
|
||||
</a></li>
|
||||
<li class="nav-item d-none d-md-block nav-toggle">
|
||||
<a [routerLink]="" class="nav-link modern-nav-toggle pr-0" data-toggle="collapse"
|
||||
(click)="toggleFixMenu($event)">
|
||||
<i class="feather toggle-icon font-medium-3 white"
|
||||
[ngClass]="{'ft-toggle-left': _themeSettingsConfig.menu === 'collapse','ft-toggle-right': _themeSettingsConfig.menu === 'expand'}"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item d-lg-none"><a class="nav-link open-navbar-container" data-toggle="collapse"
|
||||
data-target="#navbar-mobile" (click)="toggleNavbar($event)"><i class="la la-ellipsis-v"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- New-->
|
||||
<div class="navbar-container content" [hidden]="isMobile && !showNavbar">
|
||||
<div class="collapse navbar-collapse" id="navbar-mobile">
|
||||
<ul class="nav navbar-nav mr-auto float-left">
|
||||
<li class="nav-item d-none d-md-block"><a [routerLink]="" class="nav-link nav-link-expand"
|
||||
(click)="toggleFullScreen()" *ngIf="maximize === 'on'"><i class="ficon feather ft-maximize"></i></a></li>
|
||||
<li class="nav-item nav-search"><a [routerLink]="" class="nav-link nav-link-search" (click)="clickSearch()"
|
||||
*ngIf="search === 'on'"><i class="ficon feather ft-search"></i></a>
|
||||
<div class="search-input" [ngClass]="{'open': isHeaderSearchOpen}">
|
||||
<input class="input" type="text" placeholder="Explore Modern...">
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav float-right">
|
||||
<li class="dropdown-language nav-item" ngbDropdown *ngIf="internationalization === 'on'">
|
||||
<a [routerLink]="" class="dropdown-toggle nav-link" ngbDropdownToggle id="dropdown-flag">
|
||||
<i class="flag-icon flag-icon-gb"></i><span class="selected-language"></span>
|
||||
</a>
|
||||
<div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownLangMenu">
|
||||
<a [routerLink]="" class="dropdown-item">
|
||||
<i class="flag-icon flag-icon-gb"></i> English
|
||||
</a>
|
||||
<a [routerLink]="" class="dropdown-item">
|
||||
<i class="flag-icon flag-icon-fr"></i> French
|
||||
</a>
|
||||
<a [routerLink]="" class="dropdown-item">
|
||||
<i class="flag-icon flag-icon-cn"></i> Chinese
|
||||
</a>
|
||||
<a [routerLink]="" class="dropdown-item">
|
||||
<i class="flag-icon flag-icon-de"></i> German
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="dropdown-notification nav-item dropdown" ngbDropdown *ngIf="notification === 'on'">
|
||||
<a class="nav-link nav-link-label" ngbDropdownToggle>
|
||||
<i class="ficon feather ft-bell"></i>
|
||||
<span class="badge badge-pill badge-danger badge-up badge-glow">5</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu-media dropdown-menu-right" ngbDropdownMenu>
|
||||
<li class="dropdown-menu-header">
|
||||
<h6 class="dropdown-header m-0"><span class="grey darken-2">Notifications</span></h6><span
|
||||
class="notification-tag badge badge-default badge-danger float-right m-0">5 New</span>
|
||||
</li>
|
||||
<li class="scrollable-container media-list w-100 ps-container ps-theme-dark ps-active-y" fxFlex="auto" [perfectScrollbar]="config">
|
||||
<a href="javascript:void(0)">
|
||||
<div class="media">
|
||||
<div class="media-left align-self-center"><i
|
||||
class="feather ft-plus-square icon-bg-circle bg-cyan"></i>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<h6 class="media-heading">You have new order!</h6>
|
||||
<p class="notification-text font-small-3 text-muted">Lorem ipsum dolor sit amet, consectetuer
|
||||
elit.</p><small>
|
||||
<time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">30 minutes
|
||||
ago</time></small>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:void(0)">
|
||||
<div class="media">
|
||||
<div class="media-left align-self-center"><i
|
||||
class="feather ft-download-cloud icon-bg-circle bg-red bg-darken-1"></i></div>
|
||||
<div class="media-body">
|
||||
<h6 class="media-heading red darken-1">99% Server load</h6>
|
||||
<p class="notification-text font-small-3 text-muted">Aliquam tincidunt mauris eu risus.</p><small>
|
||||
<time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">Five hour
|
||||
ago</time></small>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:void(0)">
|
||||
<div class="media">
|
||||
<div class="media-left align-self-center"><i
|
||||
class="feather ft-alert-triangle icon-bg-circle bg-yellow bg-darken-3"></i></div>
|
||||
<div class="media-body">
|
||||
<h6 class="media-heading yellow darken-3">Warning notifixation</h6>
|
||||
<p class="notification-text font-small-3 text-muted">Vestibulum auctor dapibus neque.</p><small>
|
||||
<time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">Today</time></small>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:void(0)">
|
||||
<div class="media">
|
||||
<div class="media-left align-self-center"><i
|
||||
class="feather ft-check-circle icon-bg-circle bg-cyan"></i>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<h6 class="media-heading">Complete the task</h6><small>
|
||||
<time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">Last
|
||||
week</time></small>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:void(0)">
|
||||
<div class="media">
|
||||
<div class="media-left align-self-center"><i class="feather ft-file icon-bg-circle bg-teal"></i>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<h6 class="media-heading">Generate monthly report</h6><small>
|
||||
<time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">Last
|
||||
month</time></small>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-menu-footer"><a class="dropdown-item text-muted text-center"
|
||||
href="javascript:void(0)">Read all notifications</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="dropdown-notification nav-item" ngbDropdown>
|
||||
<a class="nav-link nav-link-label" ngbDropdownToggle *ngIf="email === 'on'"><i
|
||||
class="ficon feather ft-mail"></i></a>
|
||||
<ul class="dropdown-menu-media dropdown-menu-right" ngbDropdownMenu>
|
||||
<li class="dropdown-menu-header">
|
||||
<h6 class="dropdown-header m-0"><span class="grey darken-2">Messages</span></h6><span
|
||||
class="notification-tag badge badge-default badge-warning float-right m-0">4 New</span>
|
||||
</li>
|
||||
<li class="scrollable-container media-list w-100 ps-container ps-theme-dark ps-active-y" fxFlex="auto"
|
||||
[perfectScrollbar]="config">
|
||||
<a href="javascript:void(0)">
|
||||
<div class="media">
|
||||
<div class="media-left"><span class="avatar avatar-sm avatar-online rounded-circle"><img
|
||||
src="../../../assets/images/portrait/small/avatar-s-19.png" alt="avatar"><i></i></span></div>
|
||||
<div class="media-body">
|
||||
<h6 class="media-heading">Margaret Govan</h6>
|
||||
<p class="notification-text font-small-3 text-muted">I like your portfolio, let's start.</p>
|
||||
<small>
|
||||
<time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">Today</time></small>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:void(0)">
|
||||
<div class="media">
|
||||
<div class="media-left"><span class="avatar avatar-sm avatar-busy rounded-circle"><img
|
||||
src="../../../assets/images/portrait/small/avatar-s-2.png" alt="avatar"><i></i></span></div>
|
||||
<div class="media-body">
|
||||
<h6 class="media-heading">Bret Lezama</h6>
|
||||
<p class="notification-text font-small-3 text-muted">I have seen your work, there is</p><small>
|
||||
<time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">Tuesday</time></small>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:void(0)">
|
||||
<div class="media">
|
||||
<div class="media-left"><span class="avatar avatar-sm avatar-online rounded-circle"><img
|
||||
src="../../../assets/images/portrait/small/avatar-s-3.png" alt="avatar"><i></i></span></div>
|
||||
<div class="media-body">
|
||||
<h6 class="media-heading">Carie Berra</h6>
|
||||
<p class="notification-text font-small-3 text-muted">Can we have call in this week ?</p><small>
|
||||
<time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">Friday</time></small>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:void(0)">
|
||||
<div class="media border_bottom">
|
||||
<div class="media-left"><span class="avatar avatar-sm avatar-away rounded-circle"><img
|
||||
src="../../../assets/images/portrait/small/avatar-s-6.png" alt="avatar"><i></i></span></div>
|
||||
<div class="media-body">
|
||||
<h6 class="media-heading">Eric Alsobrook</h6>
|
||||
<p class="notification-text font-small-3 text-muted">We have project party this saturday.</p>
|
||||
<small>
|
||||
<time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">last
|
||||
month</time></small>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-menu-footer"><a class="dropdown-item text-muted text-center"
|
||||
href="javascript:void(0)">Read all messages</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="dropdown-user nav-item" ngbDropdown>
|
||||
<a class="nav-link dropdown-user-link" ngbDropdownToggle>
|
||||
<span *ngIf="currentUser.displayName"
|
||||
class="mr-1 user-name text-bold-700">{{currentUser.displayName}}</span>
|
||||
<span *ngIf="!currentUser.displayName" class="mr-1 user-name text-bold-700">John Doe</span>
|
||||
<span class="avatar avatar-online">
|
||||
<img *ngIf="currentUser.photoURL" src="{{currentUser.photoURL}}" alt="avatar">
|
||||
<img *ngIf="!currentUser.photoURL" src="../../../assets/images/portrait/small/avatar-s-19.png"
|
||||
alt="avatar">
|
||||
<i></i>
|
||||
</span>
|
||||
</a>
|
||||
<div ngbDropdownMenu class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownProfileMenu">
|
||||
<a class="dropdown-item" [routerLink]="['/user/user-profile']"><i class="feather ft-user"></i> Edit
|
||||
Profile </a>
|
||||
<a class="dropdown-item" [routerLink]="['/email']"><i class="feather ft-mail"></i> My Inbox </a>
|
||||
<a class="dropdown-item" [routerLink]="['/todos']"><i class="feather ft-check-square"></i> Task </a>
|
||||
<a class="dropdown-item" [routerLink]="['/chats']"><i class="feather ft-message-square"></i> Chats </a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" [routerLink]="" (click)="logout()"><i class="feather ft-power"></i> Logout</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- New-->
|
||||
</div>
|
||||
</nav>
|
||||
25
src/app/_layout/header/vertical/vertical.component.spec.ts
Normal file
25
src/app/_layout/header/vertical/vertical.component.spec.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { VerticalComponent } from './vertical.component';
|
||||
|
||||
describe('VerticalComponent', () => {
|
||||
let component: VerticalComponent;
|
||||
let fixture: ComponentFixture<VerticalComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ VerticalComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(VerticalComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
477
src/app/_layout/header/vertical/vertical.component.ts
Normal file
477
src/app/_layout/header/vertical/vertical.component.ts
Normal file
@@ -0,0 +1,477 @@
|
||||
import { Component, OnInit, Inject, Renderer2, ElementRef, ViewChild, AfterViewInit, HostListener } from '@angular/core';
|
||||
import { DOCUMENT } from '@angular/common';
|
||||
import { NavbarService } from '../../../_services/navbar.service';
|
||||
import { ThemeSettingsService } from '../../settings/theme-settings.service';
|
||||
import { MenuSettingsService } from '../../settings/menu-settings.service';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { Subject } from 'rxjs';
|
||||
import { AuthService } from 'src/app/_services/auth.service';
|
||||
import { Router } from '@angular/router';
|
||||
import { PerfectScrollbarConfigInterface, PerfectScrollbarComponent, PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
|
||||
import { AppConstants } from 'src/app/_helpers/app.constants';
|
||||
|
||||
const docElmWithBrowsersFullScreenFunctions = document.documentElement as HTMLElement & {
|
||||
mozRequestFullScreen(): Promise<void>;
|
||||
webkitRequestFullscreen(): Promise<void>;
|
||||
msRequestFullscreen(): Promise<void>;
|
||||
};
|
||||
|
||||
const docWithBrowsersExitFunctions = document as Document & {
|
||||
mozCancelFullScreen(): Promise<void>;
|
||||
webkitExitFullscreen(): Promise<void>;
|
||||
msExitFullscreen(): Promise<void>;
|
||||
};
|
||||
@Component({
|
||||
selector: 'app-header-vertical',
|
||||
templateUrl: './vertical.component.html',
|
||||
styleUrls: ['./vertical.component.css']
|
||||
})
|
||||
export class VerticalComponent implements OnInit, AfterViewInit {
|
||||
|
||||
insideTm: any;
|
||||
outsideTm: any;
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
private _unsubscribeAllMenu: Subject<any>;
|
||||
public _themeSettingsConfig: any;
|
||||
private _menuSettingsConfig: any;
|
||||
public selectedHeaderNavBarClass: string;
|
||||
public selectedNavBarHeaderClass: string;
|
||||
public currentUser: any;
|
||||
public isHeaderSearchOpen: any;
|
||||
isMobile = false;
|
||||
showNavbar = false;
|
||||
public maximize: any;
|
||||
public search: any;
|
||||
public internationalization: any;
|
||||
public notification: any;
|
||||
public email: any;
|
||||
public config: PerfectScrollbarConfigInterface = { wheelPropagation: false };
|
||||
@ViewChild(PerfectScrollbarComponent) componentRef?: PerfectScrollbarComponent;
|
||||
@ViewChild(PerfectScrollbarDirective, { static: true }) directiveRef?: PerfectScrollbarDirective;
|
||||
|
||||
constructor(
|
||||
@Inject(DOCUMENT) private document: Document,
|
||||
private _renderer: Renderer2,
|
||||
private navbarService: NavbarService,
|
||||
private _themeSettingsService: ThemeSettingsService,
|
||||
private _menuSettingsService: MenuSettingsService,
|
||||
public authService: AuthService,
|
||||
private router: Router,
|
||||
private elementRef: ElementRef
|
||||
) {
|
||||
this._unsubscribeAll = new Subject();
|
||||
this._unsubscribeAllMenu = new Subject();
|
||||
}
|
||||
|
||||
logout() {
|
||||
if (localStorage.getItem('currentUser')) {
|
||||
this.authService.doLogout().then(res => {
|
||||
window.location.href = '/login';
|
||||
}, err => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
this.isMobile = window.innerWidth < AppConstants.MOBILE_RESPONSIVE_WIDTH;
|
||||
if (!this.isMobile) {
|
||||
this.showNavbar = true;
|
||||
}
|
||||
if (localStorage.getItem('currentUser')) {
|
||||
this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
|
||||
}
|
||||
// Subscribe to config changes
|
||||
this._themeSettingsService.config
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((config) => {
|
||||
this._themeSettingsConfig = config;
|
||||
this.refreshView();
|
||||
});
|
||||
this._menuSettingsService.config
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((config) => {
|
||||
this._menuSettingsConfig = config;
|
||||
});
|
||||
this.maximize = this._themeSettingsConfig.headerIcons.maximize;
|
||||
this.search = this._themeSettingsConfig.headerIcons.search;
|
||||
this.internationalization = this._themeSettingsConfig.headerIcons.internationalization;
|
||||
this.notification = this._themeSettingsConfig.headerIcons.notification;
|
||||
this.email = this._themeSettingsConfig.headerIcons.email;
|
||||
}
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
this.refreshView();
|
||||
}
|
||||
|
||||
refreshView() {
|
||||
const iconElement = document.getElementsByClassName('toggle-icon');
|
||||
const menuColorElement = document.getElementsByClassName('main-menu');
|
||||
const navigationElement = document.getElementsByClassName('main-menu');
|
||||
const navbarElement = document.getElementsByClassName('header-navbar');
|
||||
const themeColorElement = document.getElementsByClassName('header-navbar');
|
||||
const element = document.getElementsByClassName('navbar-header');
|
||||
const boxelement = document.getElementById('customizer');
|
||||
if (iconElement) {
|
||||
if (this._themeSettingsConfig.colorTheme === 'semi-light' || this._themeSettingsConfig.colorTheme === 'light') {
|
||||
this._renderer.removeClass(iconElement.item(0), 'white');
|
||||
this._renderer.addClass(iconElement.item(0), 'blue-grey');
|
||||
this._renderer.addClass(iconElement.item(0), 'darken-3');
|
||||
} else if (this._themeSettingsConfig.colorTheme === 'semi-dark' || this._themeSettingsConfig.colorTheme === 'dark') {
|
||||
this._renderer.addClass(iconElement.item(0), 'white');
|
||||
this._renderer.removeClass(iconElement.item(0), 'blue-grey');
|
||||
this._renderer.removeClass(iconElement.item(0), 'darken-3');
|
||||
}
|
||||
}
|
||||
|
||||
if (this._themeSettingsConfig.colorTheme === 'semi-light') {
|
||||
this.selectedHeaderNavBarClass = this._themeSettingsConfig.color;
|
||||
this.selectedNavBarHeaderClass = '';
|
||||
} else if (this._themeSettingsConfig.colorTheme === 'semi-dark') {
|
||||
this.selectedNavBarHeaderClass = this._themeSettingsConfig.color;
|
||||
this.selectedHeaderNavBarClass = '';
|
||||
} else if (this._themeSettingsConfig.colorTheme === 'dark') {
|
||||
this.selectedHeaderNavBarClass = this._themeSettingsConfig.color;
|
||||
this.selectedNavBarHeaderClass = '';
|
||||
} else if (this._themeSettingsConfig.colorTheme === 'light') {
|
||||
this.selectedHeaderNavBarClass = this._themeSettingsConfig.color;
|
||||
this.selectedNavBarHeaderClass = this._themeSettingsConfig.color;
|
||||
}
|
||||
if (menuColorElement) {
|
||||
if (this._themeSettingsConfig.menuColor === 'menu-dark') {
|
||||
this._renderer.removeClass(menuColorElement.item(0), 'menu-light');
|
||||
this._renderer.addClass(menuColorElement.item(0), 'menu-dark');
|
||||
} else if (this._themeSettingsConfig.menuColor === 'menu-light') {
|
||||
this._renderer.removeClass(menuColorElement.item(0), 'menu-dark');
|
||||
this._renderer.addClass(menuColorElement.item(0), 'menu-light');
|
||||
}
|
||||
}
|
||||
|
||||
if (themeColorElement) {
|
||||
if (this._themeSettingsConfig.colorTheme === 'semi-light') {
|
||||
this._renderer.removeClass(themeColorElement.item(0), 'navbar-semi-dark');
|
||||
this._renderer.removeClass(themeColorElement.item(0), 'navbar-dark');
|
||||
this._renderer.removeClass(themeColorElement.item(0), 'navbar-light');
|
||||
} else if (this._themeSettingsConfig.colorTheme === 'semi-dark') {
|
||||
this._renderer.removeClass(themeColorElement.item(0), 'navbar-semi-light');
|
||||
this._renderer.removeClass(themeColorElement.item(0), 'navbar-dark');
|
||||
this._renderer.removeClass(themeColorElement.item(0), 'navbar-light');
|
||||
} else if (this._themeSettingsConfig.colorTheme === 'dark') {
|
||||
this._renderer.removeClass(themeColorElement.item(0), 'navbar-semi-dark');
|
||||
this._renderer.removeClass(themeColorElement.item(0), 'navbar-semi-dark');
|
||||
this._renderer.removeClass(themeColorElement.item(0), 'navbar-light');
|
||||
} else if (this._themeSettingsConfig.colorTheme === 'light') {
|
||||
this._renderer.removeClass(themeColorElement.item(0), 'navbar-semi-dark');
|
||||
this._renderer.removeClass(themeColorElement.item(0), 'navbar-dark');
|
||||
this._renderer.removeClass(themeColorElement.item(0), 'navbar-semi-light');
|
||||
}
|
||||
}
|
||||
|
||||
if (navigationElement) {
|
||||
if (this._themeSettingsConfig.navigation === 'menu-native-scroll') {
|
||||
this._renderer.addClass(navigationElement.item(0), 'menu-native-scroll');
|
||||
} else if (this._themeSettingsConfig.navigation === 'menu-icon-right') {
|
||||
this._renderer.addClass(navigationElement.item(0), 'menu-icon-right');
|
||||
} else if (this._themeSettingsConfig.navigation === 'menu-bordered') {
|
||||
this._renderer.addClass(navigationElement.item(0), 'menu-bordered');
|
||||
} else if (this._themeSettingsConfig.navigation === 'menu-flipped') {
|
||||
this._renderer.addClass(document.body, 'menu-flipped');
|
||||
} else if (this._themeSettingsConfig.navigation === 'menu-collapsible') {
|
||||
this._renderer.addClass(navigationElement.item(0), 'menu-collapsible');
|
||||
} else if (this._themeSettingsConfig.navigation === 'menu-static') {
|
||||
this._renderer.addClass(navigationElement.item(0), 'menu-static');
|
||||
}
|
||||
}
|
||||
|
||||
if (navbarElement) {
|
||||
if (this._themeSettingsConfig.menu === 'navbar-static-top') {
|
||||
this._renderer.addClass(navbarElement.item(0), 'navbar-static-top');
|
||||
this._renderer.addClass(navigationElement.item(0), 'menu-static');
|
||||
}
|
||||
}
|
||||
|
||||
if (navbarElement) {
|
||||
if (this._themeSettingsConfig.menu === 'semi-light') {
|
||||
this._renderer.addClass(navbarElement.item(0), 'navbar-semi-light bg-gradient-x-grey-blue');
|
||||
} else if (this._themeSettingsConfig.menu === 'semi-dark') {
|
||||
this._renderer.addClass(navbarElement.item(0), 'navbar-semi-dark');
|
||||
} else if (this._themeSettingsConfig.menu === 'dark') {
|
||||
this._renderer.addClass(navbarElement.item(0), 'navbar-dark');
|
||||
} else if (this._themeSettingsConfig.menu === 'light') {
|
||||
this._renderer.addClass(navbarElement.item(0), 'navbar-light');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
resetOpenMenu() {
|
||||
for (let i = 0; i < this._menuSettingsConfig.vertical_menu.items.length; i++) {
|
||||
const menu = this._menuSettingsConfig.vertical_menu.items[i];
|
||||
if (!menu.submenu) {
|
||||
menu['isOpen'] = false;
|
||||
menu['isActive'] = false;
|
||||
menu['hover'] = false;
|
||||
} else if (menu.submenu) {
|
||||
for (let j = 0; j < menu.submenu.items.length; j++) {
|
||||
menu['isOpen'] = false;
|
||||
menu['isActive'] = false;
|
||||
menu['hover'] = false;
|
||||
menu.submenu.items[j]['isOpen'] = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setOpenInNavbar(value) {
|
||||
for (let i = 0; i < this._menuSettingsConfig.vertical_menu.items.length; i++) {
|
||||
const menu = this._menuSettingsConfig.vertical_menu.items[i];
|
||||
if (!menu.submenu &&
|
||||
menu.page === this.router.url) {
|
||||
menu['isOpen'] = value;
|
||||
menu['isActive'] = value;
|
||||
} else if (menu.submenu) {
|
||||
for (let j = 0; j < menu.submenu.items.length; j++) {
|
||||
if (menu.submenu.items[j].page === this.router.url) {
|
||||
menu['isOpen'] = value;
|
||||
menu['isActive'] = value;
|
||||
menu.submenu.items[j]['isOpen'] = value;
|
||||
menu.submenu.items[j]['isActive'] = value;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Use for fixed left aside menu, to show menu on mouseenter event.
|
||||
* @param e Event
|
||||
*/
|
||||
mouseEnter(e) {
|
||||
if (this.navbarService.isFixedMenu()) {
|
||||
return;
|
||||
}
|
||||
this.navbarService.setMouseInRegion(true);
|
||||
const navBar = this.document.getElementById('navbar-header');
|
||||
const mainMenu = this.document.getElementById('main-menu');
|
||||
|
||||
// check if the left aside menu is fixed
|
||||
if (!navBar.classList.contains('expanded')) {
|
||||
this._renderer.addClass(navBar, 'expanded');
|
||||
this._renderer.addClass(mainMenu, 'expanded');
|
||||
this.resetOpenMenu();
|
||||
this.setOpenInNavbar(true);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Use for fixed left aside menu, to show menu on mouseenter event.
|
||||
* @param e Event
|
||||
*/
|
||||
mouseLeave(event) {
|
||||
if (this.navbarService.isFixedMenu()) {
|
||||
return;
|
||||
}
|
||||
const _self = this;
|
||||
const navBar = this.document.getElementById('navbar-header');
|
||||
const mainMenu = this.document.getElementById('main-menu');
|
||||
if (navBar && navBar.classList.contains('expanded')) {
|
||||
this.insideTm = setTimeout(() => {
|
||||
if (!_self.navbarService.isMouseInRegion()) {
|
||||
this._renderer.removeClass(navBar, 'expanded');
|
||||
this._renderer.removeClass(mainMenu, 'expanded');
|
||||
this.resetOpenMenu();
|
||||
this.setOpenInNavbar(false);
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
this.navbarService.setMouseInRegion(false);
|
||||
}
|
||||
|
||||
// example to update badge value dynamically from another component
|
||||
updateMenuBadgeValue() {
|
||||
for (let i = 0; i < this._menuSettingsConfig.items.length; i++) {
|
||||
if (this._menuSettingsConfig.items[i].badge) {
|
||||
this._menuSettingsConfig.items[i].badge.value = 19;
|
||||
}
|
||||
}
|
||||
this._menuSettingsService.config = this._menuSettingsConfig;
|
||||
}
|
||||
|
||||
handleCollapseOfMenu(element) {
|
||||
if (element.classList && element.classList.contains('has-sub') && element.classList.contains('open')) {
|
||||
element.classList.remove('open');
|
||||
element.classList.remove('hover');
|
||||
element.classList.add('menu-collapsed-open');
|
||||
}
|
||||
}
|
||||
|
||||
handleExpandOfMenu(element) {
|
||||
if (element.classList && element.classList.contains('has-sub') &&
|
||||
element.classList.contains('menu-collapsed-open')) {
|
||||
element.classList.remove('menu-collapsed-open');
|
||||
element.classList.add('open');
|
||||
element.classList.add('hover');
|
||||
}
|
||||
}
|
||||
|
||||
toggleMenu(event) {
|
||||
const target = event.target || event.srcElement || event.currentTarget;
|
||||
const parent = target.parentElement;
|
||||
if (parent && parent.classList.contains('has-sub')) {
|
||||
this.openSubMenuUsingParent(parent);
|
||||
} else {
|
||||
const parentOfParent = parent.parentElement;
|
||||
this.openSubMenuUsingParent(parentOfParent);
|
||||
}
|
||||
}
|
||||
|
||||
openSubMenuUsingParent(parent) {
|
||||
if (parent.classList && parent.classList.contains('has-sub') &&
|
||||
!parent.classList.contains('open')) {
|
||||
parent.classList.add('open');
|
||||
} else if (parent.classList && parent.classList.contains('has-sub') &&
|
||||
parent.classList.contains('open')) {
|
||||
parent.classList.remove('open');
|
||||
}
|
||||
}
|
||||
|
||||
toggleFullScreen() {
|
||||
const toggleIcon = document.getElementsByClassName('ficon');
|
||||
|
||||
if (toggleIcon.item(0).classList.contains('ft-maximize')) {
|
||||
this.openfullscreen();
|
||||
this._renderer.removeClass(toggleIcon.item(0), 'ft-maximize');
|
||||
this._renderer.addClass(toggleIcon.item(0), 'ft-minimize');
|
||||
} else if (toggleIcon.item(0).classList.contains('ft-minimize')) {
|
||||
this.closefullscreen();
|
||||
this._renderer.addClass(toggleIcon.item(0), 'ft-maximize');
|
||||
this._renderer.removeClass(toggleIcon.item(0), 'ft-minimize');
|
||||
}
|
||||
}
|
||||
|
||||
openfullscreen() {
|
||||
// Trigger fullscreen
|
||||
// eslint-disable-next-line no-shadow,@typescript-eslint/no-shadow
|
||||
const docElmWithBrowsersFullScreenFunctions = document.documentElement as HTMLElement & {
|
||||
mozRequestFullScreen(): Promise<void>;
|
||||
webkitRequestFullscreen(): Promise<void>;
|
||||
msRequestFullscreen(): Promise<void>;
|
||||
};
|
||||
|
||||
if (docElmWithBrowsersFullScreenFunctions.requestFullscreen) {
|
||||
docElmWithBrowsersFullScreenFunctions.requestFullscreen();
|
||||
} else if (docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen) { /* Firefox */
|
||||
docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen();
|
||||
} else if (docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
|
||||
docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen();
|
||||
} else if (docElmWithBrowsersFullScreenFunctions.msRequestFullscreen) { /* IE/Edge */
|
||||
docElmWithBrowsersFullScreenFunctions.msRequestFullscreen();
|
||||
}
|
||||
}
|
||||
|
||||
closefullscreen() {
|
||||
// eslint-disable-next-line no-shadow, @typescript-eslint/no-shadow
|
||||
const docWithBrowsersExitFunctions = document as Document & {
|
||||
mozCancelFullScreen(): Promise<void>;
|
||||
webkitExitFullscreen(): Promise<void>;
|
||||
msExitFullscreen(): Promise<void>;
|
||||
};
|
||||
if (docWithBrowsersExitFunctions.exitFullscreen) {
|
||||
docWithBrowsersExitFunctions.exitFullscreen();
|
||||
} else if (docWithBrowsersExitFunctions.mozCancelFullScreen) { /* Firefox */
|
||||
docWithBrowsersExitFunctions.mozCancelFullScreen();
|
||||
} else if (docWithBrowsersExitFunctions.webkitExitFullscreen) { /* Chrome, Safari and Opera */
|
||||
docWithBrowsersExitFunctions.webkitExitFullscreen();
|
||||
} else if (docWithBrowsersExitFunctions.msExitFullscreen) { /* IE/Edge */
|
||||
docWithBrowsersExitFunctions.msExitFullscreen();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
toggleFixMenu(e) {
|
||||
if (this.document.body.classList.contains('menu-expanded')) {
|
||||
// show the left aside menu
|
||||
this.navbarService.setFixedMenu(false);
|
||||
this.document.body.classList.remove('menu-expanded');
|
||||
this.document.body.classList.add('menu-collapsed');
|
||||
// Change switch icon
|
||||
this._themeSettingsConfig.menu = 'collapse';
|
||||
} else {
|
||||
this.navbarService.setFixedMenu(true);
|
||||
this.document.body.classList.remove('menu-collapsed');
|
||||
this.document.body.classList.add('menu-expanded');
|
||||
// Change switch icon
|
||||
this._themeSettingsConfig.menu = 'expand';
|
||||
}
|
||||
const navBar = this.document.getElementById('navbar-header');
|
||||
const mainMenu = this.document.getElementById('main-menu');
|
||||
this._renderer.addClass(navBar, 'expanded');
|
||||
this._renderer.addClass(mainMenu, 'expanded');
|
||||
setTimeout(() => { AppConstants.fireRefreshEventOnWindow(); }, 300);
|
||||
}
|
||||
|
||||
toggleNavigation(e) {
|
||||
const sidenav = document.getElementById('sidenav-overlay');
|
||||
const sidebarLeft = document.getElementById('sidebar-left') || document.getElementById('email-app-menu') ||
|
||||
document.getElementById('sidebar-todo');
|
||||
const contentOverlay = document.getElementById('content-overlay');
|
||||
|
||||
if (this.document.body.classList.contains('menu-open') && (this.router.url === '/todos' || this.router.url === '/contacts' ||
|
||||
this.router.url === '/email' || this.router.url === '/chats' || this.router.url === '/chats/static-chat')) {
|
||||
this.document.body.classList.remove('menu-open');
|
||||
this._renderer.removeClass(sidenav, 'd-block');
|
||||
this._renderer.removeClass(contentOverlay, 'show');
|
||||
this.document.body.classList.add('menu-close');
|
||||
this._renderer.addClass(sidenav, 'd-none');
|
||||
this.showNavbar = false;
|
||||
} else if (this.document.body.classList.contains('menu-open')) {
|
||||
this.document.body.classList.remove('menu-open');
|
||||
this._renderer.removeClass(sidenav, 'd-block');
|
||||
this.document.body.classList.add('menu-close');
|
||||
this._renderer.addClass(sidenav, 'd-none');
|
||||
this.showNavbar = false;
|
||||
} else {
|
||||
this._renderer.removeClass(sidenav, 'd-none');
|
||||
this.document.body.classList.remove('menu-close');
|
||||
this.document.body.classList.add('menu-open');
|
||||
this._renderer.addClass(sidenav, 'd-block');
|
||||
this.showNavbar = false;
|
||||
}
|
||||
|
||||
if (sidebarLeft) {
|
||||
this._renderer.removeClass(sidebarLeft, 'show');
|
||||
}
|
||||
if(contentOverlay){
|
||||
this._renderer.removeClass(contentOverlay, 'show');
|
||||
}
|
||||
}
|
||||
|
||||
toggleNavbar(e) {
|
||||
if (this.showNavbar) {
|
||||
this.showNavbar = false;
|
||||
} else {
|
||||
this.showNavbar = true;
|
||||
}
|
||||
}
|
||||
|
||||
public clickSearch() {
|
||||
if (this.isHeaderSearchOpen) {
|
||||
this.isHeaderSearchOpen = false;
|
||||
} else {
|
||||
this.isHeaderSearchOpen = true;
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('window:resize', ['$event'])
|
||||
onResize(event) {
|
||||
if (event.target.innerWidth < AppConstants.MOBILE_RESPONSIVE_WIDTH) {
|
||||
this.isMobile = true;
|
||||
this.showNavbar = false;
|
||||
} else {
|
||||
this.isMobile = false;
|
||||
this.showNavbar = true;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user