+
-
+ = new EventEmitter();
@Output() toggleChatEvent: EventEmitter = new EventEmitter();
$el: any;
@@ -27,7 +27,7 @@ export class Navbar implements OnInit {
ngOnInit(): void {
setTimeout(() => {
- let $chatNotification = jQuery('#chat-notification');
+ const $chatNotification = jQuery('#chat-notification');
$chatNotification.removeClass('hide').addClass('animated fadeIn')
.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', () => {
$chatNotification.removeClass('animated fadeIn');
diff --git a/src/app/layout/navbar/navbar.template.html b/src/app/layout/navbar/navbar.template.html
index 8bb9ac9..11cc4cb 100644
--- a/src/app/layout/navbar/navbar.template.html
+++ b/src/app/layout/navbar/navbar.template.html
@@ -1,107 +1,97 @@
-
+
diff --git a/src/app/index.ts b/src/app/index.ts
deleted file mode 100644
index 4d4a9db..0000000
--- a/src/app/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// App
-export * from './app.module';
diff --git a/src/app/layout/chat-sidebar/chat-message/chat-message.component.ts b/src/app/layout/chat-sidebar/chat-message/chat-message.component.ts
index 436e4ec..9cc78b5 100644
--- a/src/app/layout/chat-sidebar/chat-message/chat-message.component.ts
+++ b/src/app/layout/chat-sidebar/chat-message/chat-message.component.ts
@@ -1,11 +1,11 @@
-import {Component, Input, Output, EventEmitter} from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
- selector: '[chat-message]',
+ selector: 'app-chat-message',
templateUrl: './chat-message.template.html'
})
-export class ChatMessage {
+export class ChatMessageComponent {
@Input() conversation: any;
@Input() open: boolean;
@Input() searchMessage: string;
@@ -17,7 +17,7 @@ export class ChatMessage {
this.chatMessageClosed.emit('');
}
- addMessage(message): void {
+ addMessage(): void {
if (this.newMessage) {
(this.conversation.messages || (this.conversation.messages = [])).push({
text: this.newMessage,
diff --git a/src/app/layout/chat-sidebar/chat-message/chat-message.template.html b/src/app/layout/chat-sidebar/chat-message/chat-message.template.html
index 1f8c32e..651ed8a 100644
--- a/src/app/layout/chat-sidebar/chat-message/chat-message.template.html
+++ b/src/app/layout/chat-sidebar/chat-message/chat-message.template.html
@@ -5,17 +5,17 @@
-
diff --git a/src/app/layout/chat-sidebar/chat-sidebar.component.ts b/src/app/layout/chat-sidebar/chat-sidebar.component.ts
index 45ae7f0..c6f5ab9 100644
--- a/src/app/layout/chat-sidebar/chat-sidebar.component.ts
+++ b/src/app/layout/chat-sidebar/chat-sidebar.component.ts
@@ -1,18 +1,19 @@
-import {Component, OnInit, ElementRef} from '@angular/core';
-import {ChatService} from './chat.service';
-declare var jQuery: any;
-declare var Hammer: any;
+import { Component, OnInit, ElementRef } from '@angular/core';
+import { ChatService } from './chat.service';
+declare let jQuery: any;
+declare let Hammer: any;
@Component({
- selector: '[chat-sidebar]',
+ selector: 'app-chat-sidebar',
templateUrl: './chat-sidebar.template.html'
})
-export class ChatSidebar implements OnInit {
+export class ChatSidebarComponent implements OnInit {
conversations: ChatService;
newMessage: string = '';
activeConversation: any;
chatMessageOpened: boolean = false;
$el: any;
+ searchText: string = '';
constructor(el: ElementRef) {
this.conversations = new ChatService();
@@ -30,23 +31,9 @@ export class ChatSidebar implements OnInit {
jQuery(e.currentTarget).removeClass('active').find('.badge').remove();
}
- initChatSidebarScroll(): void {
- let $sidebarContent = jQuery('.chat-sidebar-contacts', this.$el);
- if (this.$el.find('.slimScrollDiv').length !== 0) {
- $sidebarContent.slimscroll({
- destroy: true
- });
- }
- $sidebarContent.slimscroll({
- height: window.innerHeight,
- width: '',
- size: '4px'
- });
- }
-
- ngOnInit(): void {
- let $chatContainer = jQuery('layout').addClass('chat-sidebar-container');
- let chatSidebarSwipe = new Hammer(document.getElementById('content-wrap'));
+ enableSwipeCollapsing(): void {
+ const $chatContainer = jQuery('app-layout');
+ const chatSidebarSwipe = new Hammer(document.getElementById('content-wrap'));
chatSidebarSwipe.on('swipeleft', () => {
if ($chatContainer.is('.nav-collapsed')) {
@@ -61,9 +48,14 @@ export class ChatSidebar implements OnInit {
}
});
});
+ }
- jQuery(window).on('sn:resize', this.initChatSidebarScroll.bind(this));
- this.initChatSidebarScroll();
+ ngOnInit(): void {
+ jQuery('app-layout').addClass('chat-sidebar-container');
+
+ if ('ontouchstart' in window) {
+ this.enableSwipeCollapsing();
+ }
}
}
diff --git a/src/app/layout/chat-sidebar/chat-sidebar.template.html b/src/app/layout/chat-sidebar/chat-sidebar.template.html
index 8c5fd7e..c967c59 100644
--- a/src/app/layout/chat-sidebar/chat-sidebar.template.html
+++ b/src/app/layout/chat-sidebar/chat-sidebar.template.html
@@ -1,11 +1,13 @@
-
+
diff --git a/src/app/layout/layout.component.ts b/src/app/layout/layout.component.ts
index d00910f..5111f12 100644
--- a/src/app/layout/layout.component.ts
+++ b/src/app/layout/layout.component.ts
@@ -1,32 +1,45 @@
-import { Component, ViewEncapsulation, ElementRef } from '@angular/core';
-import { Router } from '@angular/router';
-import { AppConfig } from '../app.config'
-
-declare var jQuery: any;
-declare var Hammer: any;
+import {
+ Component,
+ ViewEncapsulation,
+ ElementRef, Renderer2,
+ NgZone,
+ ViewChild, HostBinding, OnInit
+} from '@angular/core';
+import {
+ Router,
+ Event as RouterEvent,
+ NavigationStart,
+ NavigationEnd,
+ NavigationCancel,
+ NavigationError
+} from '@angular/router';
+import { AppConfig } from '../app.config';
+
+declare let jQuery: any;
+declare let Hammer: any;
@Component({
- selector: 'layout',
+ selector: 'app-layout',
encapsulation: ViewEncapsulation.None,
templateUrl: './layout.template.html',
- host: {
- '[class.nav-static]' : 'config.state["nav-static"]',
- '[class.chat-sidebar-opened]' : 'chatOpened',
- '[class.app]' : 'true',
- id: 'app'
- }
})
-export class Layout {
+export class LayoutComponent implements OnInit {
+ @HostBinding('class.nav-static') navStatic: boolean;
+ @HostBinding('class.chat-sidebar-opened') chatOpened: boolean = false;
+ @HostBinding('class.app') appClass: boolean = true;
config: any;
configFn: any;
$sidebar: any;
el: ElementRef;
router: Router;
- chatOpened: boolean = false;
+ @ViewChild('spinnerElement', {static: false}) spinnerElement: ElementRef;
+ @ViewChild('routerComponent', {static: false}) routerComponent: ElementRef;
constructor(config: AppConfig,
el: ElementRef,
- router: Router) {
+ router: Router,
+ private renderer: Renderer2,
+ private ngZone: NgZone) {
this.el = el;
this.config = config.getConfig();
this.configFn = config;
@@ -34,11 +47,11 @@ export class Layout {
}
toggleSidebarListener(state): void {
- let toggleNavigation = state === 'static'
+ const toggleNavigation = state === 'static'
? this.toggleNavigationState
: this.toggleNavigationCollapseState;
toggleNavigation.apply(this);
- localStorage.setItem('nav-static', this.config.state['nav-static']);
+ localStorage.setItem('nav-static', JSON.stringify(this.navStatic));
}
toggleChatListener(): void {
@@ -52,14 +65,14 @@ export class Layout {
'.list-group-item:first-child:not(.js-notification-added)')
.addClass('active js-notification-added')
.find('.fa-circle')
- .after('3');
+ .before('3');
}, 1000);
}
toggleNavigationState(): void {
- this.config.state['nav-static'] = !this.config.state['nav-static'];
- if (!this.config.state['nav-static']) {
+ this.navStatic = !this.navStatic;
+ if (!this.navStatic) {
this.collapseNavigation();
}
}
@@ -68,8 +81,7 @@ export class Layout {
// this method only makes sense for non-static navigation state
if (this.isNavigationStatic()
&& (this.configFn.isScreen('lg') || this.configFn.isScreen('xl'))) { return; }
-
- jQuery('layout').removeClass('nav-collapsed');
+ jQuery('app-layout').removeClass('nav-collapsed');
this.$sidebar.find('.active .active').closest('.collapse').collapse('show')
.siblings('[data-toggle=collapse]').removeClass('collapsed');
}
@@ -79,7 +91,7 @@ export class Layout {
if (this.isNavigationStatic()
&& (this.configFn.isScreen('lg') || this.configFn.isScreen('xl'))) { return; }
- jQuery('layout').addClass('nav-collapsed');
+ jQuery('app-layout').addClass('nav-collapsed');
this.$sidebar.find('.collapse.in').collapse('hide')
.siblings('[data-toggle=collapse]').addClass('collapsed');
}
@@ -105,11 +117,11 @@ export class Layout {
}
isNavigationStatic(): boolean {
- return this.config.state['nav-static'] === true;
+ return this.navStatic === true;
}
toggleNavigationCollapseState(): void {
- if (jQuery('layout').is('.nav-collapsed')) {
+ if (jQuery('app-layout').is('.nav-collapsed')) {
this.expandNavigation();
} else {
this.collapseNavigation();
@@ -128,14 +140,14 @@ export class Layout {
}
enableSwipeCollapsing(): void {
- let swipe = new Hammer(document.getElementById('content-wrap'));
- let d = this;
+ const swipe = new Hammer(document.getElementById('content-wrap'));
+ const d = this;
swipe.on('swipeleft', () => {
setTimeout(() => {
if (d.configFn.isScreen('md')) { return; }
- if (!jQuery('layout').is('.nav-collapsed')) {
+ if (!jQuery('app-layout').is('.nav-collapsed')) {
d.collapseNavigation();
}
});
@@ -144,9 +156,9 @@ export class Layout {
swipe.on('swiperight', () => {
if (d.configFn.isScreen('md')) { return; }
- if (jQuery('layout').is('.chat-sidebar-opened')) { return; }
+ if (jQuery('app-layout').is('.chat-sidebar-opened')) { return; }
- if (jQuery('layout').is('.nav-collapsed')) {
+ if (jQuery('app-layout').is('.nav-collapsed')) {
d.expandNavigation();
}
});
@@ -160,13 +172,12 @@ export class Layout {
}
ngOnInit(): void {
-
if (localStorage.getItem('nav-static') === 'true') {
- this.config.state['nav-static'] = true;
+ this.navStatic = true;
}
- let $el = jQuery(this.el.nativeElement);
- this.$sidebar = $el.find('[sidebar]');
+ const $el = jQuery(this.el.nativeElement);
+ this.$sidebar = $el.find('app-sidebar');
$el.find('a[href="#"]').on('click', (e) => {
e.preventDefault();
@@ -178,12 +189,13 @@ export class Layout {
this.checkNavigationState();
this.$sidebar.on('click', () => {
- if (jQuery('layout').is('.nav-collapsed')) {
+ if (jQuery('app-layout').is('.nav-collapsed')) {
this.expandNavigation();
}
});
- this.router.events.subscribe(() => {
+ this.router.events.subscribe((event) => {
+ this._navigationInterceptor(event);
this.collapseNavIfSmallScreen();
window.scrollTo(0, 0);
});
@@ -197,9 +209,9 @@ export class Layout {
// return for bubbled events
if (e.target !== e.currentTarget) { return; }
- let $triggerLink = jQuery(this).prev('[data-toggle=collapse]');
+ const $triggerLink = jQuery(this).prev('[data-toggle=collapse]');
jQuery($triggerLink.data('parent'))
- .find('.collapse.in').not(jQuery(this)).collapse('hide');
+ .find('.collapse.show').not(jQuery(this)).collapse('hide');
})
/* adding additional classes to navigation link li-parent
for several purposes. see navigation styles */
@@ -217,4 +229,61 @@ export class Layout {
jQuery(this).closest('li').removeClass('open');
});
}
+
+ private _navigationInterceptor(event: RouterEvent): void {
+
+ if (event instanceof NavigationStart) {
+ // We wanna run this function outside of Angular's zone to
+ // bypass change detection
+ this.ngZone.runOutsideAngular(() => {
+
+ // For simplicity we are going to turn opacity on / off
+ // you could add/remove a class for more advanced styling
+ // and enter/leave animation of the spinner
+ this.renderer.setStyle(
+ this.spinnerElement.nativeElement,
+ 'opacity',
+ '1'
+ );
+ this.renderer.setStyle(
+ this.routerComponent.nativeElement,
+ 'opacity',
+ '0'
+ );
+ });
+ }
+ if (event instanceof NavigationEnd) {
+ this._hideSpinner();
+ }
+
+ // Set loading state to false in both of the below events to
+ // hide the spinner in case a request fails
+ if (event instanceof NavigationCancel) {
+ this._hideSpinner();
+ }
+ if (event instanceof NavigationError) {
+ this._hideSpinner();
+ }
+ }
+
+ private _hideSpinner(): void {
+ // We wanna run this function outside of Angular's zone to
+ // bypass change detection,
+ this.ngZone.runOutsideAngular(() => {
+
+ // For simplicity we are going to turn opacity on / off
+ // you could add/remove a class for more advanced styling
+ // and enter/leave animation of the spinner
+ this.renderer.setStyle(
+ this.spinnerElement.nativeElement,
+ 'opacity',
+ '0'
+ );
+ this.renderer.setStyle(
+ this.routerComponent.nativeElement,
+ 'opacity',
+ '1'
+ );
+ });
+ }
}
diff --git a/src/app/layout/layout.module.ts b/src/app/layout/layout.module.ts
index 6ab07eb..d1a7581 100644
--- a/src/app/layout/layout.module.ts
+++ b/src/app/layout/layout.module.ts
@@ -1,24 +1,42 @@
import 'jquery-slimscroll';
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { TooltipModule } from 'ng2-bootstrap/ng2-bootstrap';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { BsDropdownModule, TooltipModule } from 'ngx-bootstrap';
-import { ROUTES } from './layout.routes';
+import { ROUTES } from './layout.routes';
-import { Layout } from './layout.component';
-import { Sidebar } from './sidebar/sidebar.component';
-import { Navbar } from './navbar/navbar.component';
-import { ChatSidebar } from './chat-sidebar/chat-sidebar.component';
-import { ChatMessage } from './chat-sidebar/chat-message/chat-message.component';
-import {SearchPipe} from './pipes/search.pipe';
-import {NotificationLoad} from './notifications/notifications-load.directive';
-import {Notifications} from './notifications/notifications.component';
+import { LayoutComponent } from './layout.component';
+import { SidebarComponent } from './sidebar/sidebar.component';
+import { NavbarComponent } from './navbar/navbar.component';
+import { ChatSidebarComponent } from './chat-sidebar/chat-sidebar.component';
+import { ChatMessageComponent } from './chat-sidebar/chat-message/chat-message.component';
+import { SearchPipe } from './pipes/search.pipe';
+import { NotificationsLoadDirective } from './notifications/notifications-load.directive';
+import { NotificationsComponent } from './notifications/notifications.component';
+
+import { LoadingBarRouterModule } from '@ngx-loading-bar/router';
@NgModule({
- imports: [CommonModule, TooltipModule, ROUTES, FormsModule],
- declarations: [Layout, Sidebar, Navbar, ChatSidebar, SearchPipe, Notifications, NotificationLoad, ChatMessage]
+ imports: [
+ CommonModule,
+ TooltipModule.forRoot(),
+ BsDropdownModule.forRoot(),
+ ROUTES,
+ FormsModule,
+ LoadingBarRouterModule
+ ],
+ declarations: [
+ LayoutComponent,
+ SidebarComponent,
+ NavbarComponent,
+ ChatSidebarComponent,
+ SearchPipe,
+ NotificationsComponent,
+ NotificationsLoadDirective,
+ ChatMessageComponent
+ ]
})
-export default class LayoutModule {
+export class LayoutModule {
}
diff --git a/src/app/layout/layout.routes.ts b/src/app/layout/layout.routes.ts
index 32ff393..7691a94 100644
--- a/src/app/layout/layout.routes.ts
+++ b/src/app/layout/layout.routes.ts
@@ -1,11 +1,10 @@
-import { Routes, RouterModule } from '@angular/router';
-import { Layout } from './layout.component';
-// noinspection TypeScriptValidateTypes
+import { Routes, RouterModule } from '@angular/router';
+import { LayoutComponent } from './layout.component';
const routes: Routes = [
- { path: '', component: Layout, children: [
+ { path: '', component: LayoutComponent, children: [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
- { path: 'dashboard', loadChildren: () => System.import('../dashboard/dashboard.module') },
- { path: 'another-page', loadChildren: () => System.import('../another/another.module') },
+ { path: 'dashboard', loadChildren: '../dashboard/dashboard.module#DashboardModule' },
+ { path: 'another-page', loadChildren: '../another/another.module#AnotherModule' },
]}
];
diff --git a/src/app/layout/layout.template.html b/src/app/layout/layout.template.html
index d02b9c5..33c4a7b 100644
--- a/src/app/layout/layout.template.html
+++ b/src/app/layout/layout.template.html
@@ -1,11 +1,33 @@
-
-
-
+404
@@ -24,6 +24,6 @@
404
{{conversation.name}}
--
+
-
-
-
-
+
+
+
Contacts
-
- 
-
-
+
+
+
-
-
+
+
@@ -30,14 +34,16 @@
+
@@ -16,12 +18,14 @@
-
-
+
+
+
+
Today
- - -{{conversation.name}}
- + +
+
+
{{conversation.name}}
+ +Last Week
- - -{{conversation.name}}
- + +
+
+
{{conversation.name}}
+ +
-
-
+
+
diff --git a/src/app/layout/navbar/navbar.component.ts b/src/app/layout/navbar/navbar.component.ts
index 68a22c9..579f998 100644
--- a/src/app/layout/navbar/navbar.component.ts
+++ b/src/app/layout/navbar/navbar.component.ts
@@ -1,12 +1,12 @@
import { Component, EventEmitter, OnInit, ElementRef, Output } from '@angular/core';
import { AppConfig } from '../../app.config';
-declare var jQuery: any;
+declare let jQuery: any;
@Component({
- selector: '[navbar]',
+ selector: 'app-navbar',
templateUrl: './navbar.template.html'
})
-export class Navbar implements OnInit {
+export class NavbarComponent implements OnInit {
@Output() toggleSidebarEvent: EventEmitter
+
+
-
-