mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
Merge branch 'master' into skeleton
This commit is contained in:
Sercan Yemen
commit
d7e65460bf
|
|
@ -49,6 +49,10 @@
|
|||
"vendorChunk": false,
|
||||
"buildOptimizer": true
|
||||
},
|
||||
"ec": {
|
||||
"sourceMap": true,
|
||||
"extractCss": true
|
||||
},
|
||||
"hmr": {
|
||||
"fileReplacements": [
|
||||
{
|
||||
|
|
@ -71,6 +75,9 @@
|
|||
"hmr": {
|
||||
"hmr": true,
|
||||
"browserTarget": "fuse:build:hmr"
|
||||
},
|
||||
"ec": {
|
||||
"browserTarget": "fuse:build:ec"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
35
package-lock.json
generated
35
package-lock.json
generated
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "fuse",
|
||||
"version": "6.1.2",
|
||||
"version": "6.2.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
|
@ -129,9 +129,9 @@
|
|||
}
|
||||
},
|
||||
"@angular/cdk": {
|
||||
"version": "6.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-6.3.1.tgz",
|
||||
"integrity": "sha512-TEf1pstDmoLk4C0H45CxpdkBLunNYRQS1pCyWf7hWOHC0M0m130CYZ+rMt4uVDLe4NxiFUk3XwHITB3AuSlCOQ==",
|
||||
"version": "6.3.3",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-6.3.3.tgz",
|
||||
"integrity": "sha512-cfUwvnGGByZy/poA75/vsELBq68eDUYJe3qi0WvSbtFzbQlsxeqaBiaxVYqmHJkPlSF5nsUhg5KvDowED3a4sA==",
|
||||
"requires": {
|
||||
"tslib": "^1.7.1"
|
||||
}
|
||||
|
|
@ -373,17 +373,26 @@
|
|||
"dev": true
|
||||
},
|
||||
"@angular/material": {
|
||||
"version": "6.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@angular/material/-/material-6.3.1.tgz",
|
||||
"integrity": "sha512-2M5be3Re1EqTl+i5KuS54P/s+i2AQYlv6swR8ukwXR2arwXy8ewtuwiPjUQulpuEaUkKTQ3f6WndXAgP40Ou7A==",
|
||||
"version": "6.3.3",
|
||||
"resolved": "https://registry.npmjs.org/@angular/material/-/material-6.3.3.tgz",
|
||||
"integrity": "sha512-3qTZ8+pjc8P1D+TLr9ETGfFyMYO+BAQlFiVs3oV8rw5y0Wzkz6G1JHfKQ2oOd8/npXP6rJQldssUM4IBbSOxIQ==",
|
||||
"requires": {
|
||||
"parse5": "^5.0.0",
|
||||
"tslib": "^1.7.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"parse5": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/parse5/-/parse5-5.0.0.tgz",
|
||||
"integrity": "sha512-0ywuiUOnpWWeil5grH2rxjyTJoeQVwyBuO2si6QIU9dWtj2npjuyK1HaY1RbLnVfDhEbhyAPNUBKRK0Xj2xE0w==",
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"@angular/material-moment-adapter": {
|
||||
"version": "6.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-6.3.1.tgz",
|
||||
"integrity": "sha512-rttEepHc/eVEUEErz8eg6063KC79vVN6/rATuoabfgtIqtoSEuft18SkwCt7gQz6lWtuJA1oFc3HIXhN8gxKBw==",
|
||||
"version": "6.3.3",
|
||||
"resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-6.3.3.tgz",
|
||||
"integrity": "sha512-YFi1iED8gcHhCwkWGMkyJtHX/tWAsQWnRNrh1AwbWl4JW1739vPAM/OimdIijeGAZ5dVVZX4A4EscCBb74b4dA==",
|
||||
"requires": {
|
||||
"tslib": "^1.7.1"
|
||||
}
|
||||
|
|
@ -7168,9 +7177,9 @@
|
|||
}
|
||||
},
|
||||
"ngx-color-picker": {
|
||||
"version": "6.3.3",
|
||||
"resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-6.3.3.tgz",
|
||||
"integrity": "sha512-0uoxt+3BtanTTbQj9elpsZe/6a/BWAl8jdl0m6OyrCXlCiO3q4zGZjWee4905RF0NXGxQvDWT27coqmDeXGsvw=="
|
||||
"version": "6.4.0",
|
||||
"resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-6.4.0.tgz",
|
||||
"integrity": "sha512-u4UeeSdZoaGmHJCSlFQGe0xhOLB63rms35IjI7HhHz9MS4VeCQa4UiFMK9Dgjg1FuGt2nEyj/4Fs6tpQfgXEXQ=="
|
||||
},
|
||||
"ngx-cookie-service": {
|
||||
"version": "1.0.10",
|
||||
|
|
|
|||
10
package.json
10
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "fuse",
|
||||
"version": "6.1.2",
|
||||
"version": "6.2.0",
|
||||
"license": "https://themeforest.net/licenses/terms/regular",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
|
|
@ -20,15 +20,15 @@
|
|||
"dependencies": {
|
||||
"@agm/core": "1.0.0-beta.3",
|
||||
"@angular/animations": "6.0.7",
|
||||
"@angular/cdk": "6.3.1",
|
||||
"@angular/cdk": "6.3.3",
|
||||
"@angular/common": "6.0.7",
|
||||
"@angular/compiler": "6.0.7",
|
||||
"@angular/core": "6.0.7",
|
||||
"@angular/flex-layout": "6.0.0-beta.16",
|
||||
"@angular/forms": "6.0.7",
|
||||
"@angular/http": "6.0.7",
|
||||
"@angular/material": "6.3.1",
|
||||
"@angular/material-moment-adapter": "6.3.1",
|
||||
"@angular/material": "6.3.3",
|
||||
"@angular/material-moment-adapter": "6.3.3",
|
||||
"@angular/platform-browser": "6.0.7",
|
||||
"@angular/platform-browser-dynamic": "6.0.7",
|
||||
"@angular/router": "6.0.7",
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
"moment": "2.22.2",
|
||||
"ng2-charts": "1.6.0",
|
||||
"ngrx-store-freeze": "0.2.4",
|
||||
"ngx-color-picker": "6.3.3",
|
||||
"ngx-color-picker": "6.4.0",
|
||||
"ngx-cookie-service": "1.0.10",
|
||||
"perfect-scrollbar": "1.4.0",
|
||||
"prismjs": "1.15.0",
|
||||
|
|
|
|||
|
|
@ -37,12 +37,6 @@ fuse-sidebar {
|
|||
position: absolute !important;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
&:not(.unfolded) {
|
||||
width: 64px;
|
||||
min-width: 64px;
|
||||
max-width: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
&.animations-enabled {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Ho
|
|||
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
|
||||
import { ObservableMedia } from '@angular/flex-layout';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/internal/operators';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
|
||||
import { FuseSidebarService } from './sidebar.service';
|
||||
import { FuseMatchMediaService } from '@fuse/services/match-media.service';
|
||||
|
|
@ -40,6 +40,14 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
|
|||
@HostBinding('class.locked-open')
|
||||
isLockedOpen: boolean;
|
||||
|
||||
// Folded width
|
||||
@Input()
|
||||
foldedWidth: number;
|
||||
|
||||
// Folded auto trigger on hover
|
||||
@Input()
|
||||
foldedAutoTriggerOnHover: boolean;
|
||||
|
||||
// Folded unfolded
|
||||
@HostBinding('class.unfolded')
|
||||
unfolded: boolean;
|
||||
|
|
@ -92,6 +100,8 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
|
|||
)
|
||||
{
|
||||
// Set the defaults
|
||||
this.foldedAutoTriggerOnHover = true;
|
||||
this.foldedWidth = 64;
|
||||
this.foldedChanged = new EventEmitter();
|
||||
this.openedChanged = new EventEmitter();
|
||||
this.opened = false;
|
||||
|
|
@ -108,7 +118,11 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
|
|||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
// Folded
|
||||
/**
|
||||
* Folded
|
||||
*
|
||||
* @param {boolean} value
|
||||
*/
|
||||
@Input()
|
||||
set folded(value: boolean)
|
||||
{
|
||||
|
|
@ -121,23 +135,23 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
|
|||
return;
|
||||
}
|
||||
|
||||
// Programmatically add/remove margin to the element
|
||||
// Programmatically add/remove padding to the element
|
||||
// that comes after or before based on the position
|
||||
let sibling,
|
||||
styleRule;
|
||||
|
||||
const styleValue = '64px';
|
||||
const styleValue = this.foldedWidth + 'px';
|
||||
|
||||
// Get the sibling and set the style rule
|
||||
if ( this.position === 'left' )
|
||||
{
|
||||
sibling = this._elementRef.nativeElement.nextElementSibling;
|
||||
styleRule = 'margin-left';
|
||||
styleRule = 'padding-left';
|
||||
}
|
||||
else
|
||||
{
|
||||
sibling = this._elementRef.nativeElement.previousElementSibling;
|
||||
styleRule = 'margin-right';
|
||||
styleRule = 'padding-right';
|
||||
}
|
||||
|
||||
// If there is no sibling, return...
|
||||
|
|
@ -152,6 +166,11 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
|
|||
// Fold the sidebar
|
||||
this.fold();
|
||||
|
||||
// Set the folded width
|
||||
this._renderer.setStyle(this._elementRef.nativeElement, 'width', styleValue);
|
||||
this._renderer.setStyle(this._elementRef.nativeElement, 'min-width', styleValue);
|
||||
this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
|
||||
|
||||
// Set the style and class
|
||||
this._renderer.setStyle(sibling, styleRule, styleValue, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase);
|
||||
this._renderer.addClass(this._elementRef.nativeElement, 'folded');
|
||||
|
|
@ -162,6 +181,11 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
|
|||
// Unfold the sidebar
|
||||
this.unfold();
|
||||
|
||||
// Remove the folded width
|
||||
this._renderer.removeStyle(this._elementRef.nativeElement, 'width');
|
||||
this._renderer.removeStyle(this._elementRef.nativeElement, 'min-width');
|
||||
this._renderer.removeStyle(this._elementRef.nativeElement, 'max-width');
|
||||
|
||||
// Remove the style and class
|
||||
this._renderer.removeStyle(sibling, styleRule);
|
||||
this._renderer.removeClass(this._elementRef.nativeElement, 'folded');
|
||||
|
|
@ -375,23 +399,23 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
|
|||
return;
|
||||
}
|
||||
|
||||
// Programmatically add/remove margin to the element
|
||||
// Programmatically add/remove padding to the element
|
||||
// that comes after or before based on the position
|
||||
let sibling,
|
||||
styleRule;
|
||||
|
||||
const styleValue = '64px';
|
||||
const styleValue = this.foldedWidth + 'px';
|
||||
|
||||
// Get the sibling and set the style rule
|
||||
if ( this.position === 'left' )
|
||||
{
|
||||
sibling = this._elementRef.nativeElement.nextElementSibling;
|
||||
styleRule = 'margin-left';
|
||||
styleRule = 'padding-left';
|
||||
}
|
||||
else
|
||||
{
|
||||
sibling = this._elementRef.nativeElement.previousElementSibling;
|
||||
styleRule = 'margin-right';
|
||||
styleRule = 'padding-right';
|
||||
}
|
||||
|
||||
// If there is no sibling, return...
|
||||
|
|
@ -403,6 +427,11 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
|
|||
// Fold the sidebar
|
||||
this.fold();
|
||||
|
||||
// Set the folded width
|
||||
this._renderer.setStyle(this._elementRef.nativeElement, 'width', styleValue);
|
||||
this._renderer.setStyle(this._elementRef.nativeElement, 'min-width', styleValue);
|
||||
this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
|
||||
|
||||
// Set the style and class
|
||||
this._renderer.setStyle(sibling, styleRule, styleValue, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase);
|
||||
this._renderer.addClass(this._elementRef.nativeElement, 'folded');
|
||||
|
|
@ -633,20 +662,13 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
|
|||
@HostListener('mouseenter')
|
||||
onMouseEnter(): void
|
||||
{
|
||||
// Only work if the sidebar is folded
|
||||
if ( !this.folded )
|
||||
// Only work if the auto trigger is enabled
|
||||
if ( !this.foldedAutoTriggerOnHover )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Enable the animations
|
||||
this._enableAnimations();
|
||||
|
||||
// Unfold the sidebar temporarily
|
||||
this.unfolded = true;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
this.unfoldTemporarily();
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -655,20 +677,13 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
|
|||
@HostListener('mouseleave')
|
||||
onMouseLeave(): void
|
||||
{
|
||||
// Only work if the sidebar is folded
|
||||
if ( !this.folded )
|
||||
// Only work if the auto trigger is enabled
|
||||
if ( !this.foldedAutoTriggerOnHover )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Enable the animations
|
||||
this._enableAnimations();
|
||||
|
||||
// Fold the sidebar back
|
||||
this.unfolded = false;
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
this.foldTemporarily();
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -727,4 +742,58 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
|
|||
this.fold();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fold the temporarily unfolded sidebar back
|
||||
*/
|
||||
foldTemporarily(): void
|
||||
{
|
||||
// Only work if the sidebar is folded
|
||||
if ( !this.folded )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Enable the animations
|
||||
this._enableAnimations();
|
||||
|
||||
// Fold the sidebar back
|
||||
this.unfolded = false;
|
||||
|
||||
// Set the folded width
|
||||
const styleValue = this.foldedWidth + 'px';
|
||||
|
||||
this._renderer.setStyle(this._elementRef.nativeElement, 'width', styleValue);
|
||||
this._renderer.setStyle(this._elementRef.nativeElement, 'min-width', styleValue);
|
||||
this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
|
||||
/**
|
||||
* Unfold the sidebar temporarily
|
||||
*/
|
||||
unfoldTemporarily(): void
|
||||
{
|
||||
// Only work if the sidebar is folded
|
||||
if ( !this.folded )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Enable the animations
|
||||
this._enableAnimations();
|
||||
|
||||
// Unfold the sidebar temporarily
|
||||
this.unfolded = true;
|
||||
|
||||
// Remove the folded width
|
||||
this._renderer.removeStyle(this._elementRef.nativeElement, 'width');
|
||||
this._renderer.removeStyle(this._elementRef.nativeElement, 'min-width');
|
||||
this._renderer.removeStyle(this._elementRef.nativeElement, 'max-width');
|
||||
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,6 +73,17 @@
|
|||
<mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-8">Variant:</h3>
|
||||
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
|
||||
<mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
|
||||
<mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.navbar.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TOOLBAR -->
|
||||
|
|
@ -91,6 +102,11 @@
|
|||
<mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.toolbar.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
|
|
@ -109,6 +125,11 @@
|
|||
<mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.footer.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
|
@ -146,6 +167,17 @@
|
|||
<mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-8">Variant:</h3>
|
||||
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
|
||||
<mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
|
||||
<mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.navbar.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TOOLBAR -->
|
||||
|
|
@ -164,6 +196,11 @@
|
|||
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.toolbar.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
|
|
@ -182,6 +219,11 @@
|
|||
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.footer.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
|
@ -219,6 +261,17 @@
|
|||
<mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-8">Variant:</h3>
|
||||
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
|
||||
<mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
|
||||
<mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.navbar.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TOOLBAR -->
|
||||
|
|
@ -236,6 +289,11 @@
|
|||
<mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.toolbar.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
|
|
@ -253,6 +311,11 @@
|
|||
<mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.footer.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
|
@ -285,6 +348,17 @@
|
|||
<mat-radio-button class="mb-16" value="top">Top</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-8">Variant (Vertical):</h3>
|
||||
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
|
||||
<mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
|
||||
<mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.navbar.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TOOLBAR -->
|
||||
|
|
@ -302,6 +376,11 @@
|
|||
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.toolbar.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
|
|
@ -319,6 +398,11 @@
|
|||
<mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
<h3 class="mt-24 mb-8">Color:</h3>
|
||||
<fuse-material-color-picker class="mb-16"
|
||||
[(selectedClass)]="fuseConfig.layout.footer.background">
|
||||
</fuse-material-color-picker>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
|
@ -338,35 +422,6 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!-- COLORS -->
|
||||
<div class="group">
|
||||
|
||||
<h2>Colors</h2>
|
||||
|
||||
<div class="colors">
|
||||
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<h4 class="mr-8">Toolbar Color</h4>
|
||||
<fuse-material-color-picker
|
||||
[(selectedClass)]="fuseConfig.layout.toolbar.background"></fuse-material-color-picker>
|
||||
</div>
|
||||
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<h4 class="mr-8">Navbar Color</h4>
|
||||
<fuse-material-color-picker
|
||||
[(selectedClass)]="fuseConfig.layout.navbar.background"></fuse-material-color-picker>
|
||||
</div>
|
||||
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<h4 class="mr-8">Footer Color</h4>
|
||||
<fuse-material-color-picker
|
||||
[(selectedClass)]="fuseConfig.layout.footer.background"></fuse-material-color-picker>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -73,11 +73,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.colors {
|
||||
display: block !important;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,20 +65,21 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
|||
style : new FormControl(),
|
||||
width : new FormControl(),
|
||||
navbar : this._formBuilder.group({
|
||||
background: new FormControl(),
|
||||
folded : new FormControl(),
|
||||
hidden : new FormControl(),
|
||||
position : new FormControl(),
|
||||
folded : new FormControl(),
|
||||
background: new FormControl()
|
||||
variant : new FormControl()
|
||||
}),
|
||||
toolbar: this._formBuilder.group({
|
||||
background: new FormControl(),
|
||||
hidden : new FormControl(),
|
||||
position : new FormControl(),
|
||||
background: new FormControl()
|
||||
position : new FormControl()
|
||||
}),
|
||||
footer : this._formBuilder.group({
|
||||
background: new FormControl(),
|
||||
hidden : new FormControl(),
|
||||
position : new FormControl(),
|
||||
background: new FormControl()
|
||||
position : new FormControl()
|
||||
})
|
||||
}),
|
||||
customScrollbars: new FormControl()
|
||||
|
|
@ -174,20 +175,21 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
|||
layout: {
|
||||
width : 'fullwidth',
|
||||
navbar : {
|
||||
background: 'mat-fuse-dark-700-bg',
|
||||
folded : false,
|
||||
hidden : false,
|
||||
position : 'left',
|
||||
folded : false,
|
||||
background: 'mat-fuse-dark-700-bg'
|
||||
variant : 'vertical-style-1'
|
||||
},
|
||||
toolbar: {
|
||||
background: 'mat-white-500-bg',
|
||||
hidden : false,
|
||||
position : 'below-static',
|
||||
background: 'mat-white-500-bg'
|
||||
position : 'below-static'
|
||||
},
|
||||
footer : {
|
||||
background: 'mat-fuse-dark-900-bg',
|
||||
hidden : false,
|
||||
position : 'below-static',
|
||||
background: 'mat-fuse-dark-900-bg'
|
||||
position : 'below-static'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -202,20 +204,21 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
|||
layout: {
|
||||
width : 'fullwidth',
|
||||
navbar : {
|
||||
background: 'mat-fuse-dark-700-bg',
|
||||
folded : false,
|
||||
hidden : false,
|
||||
position : 'left',
|
||||
folded : false,
|
||||
background: 'mat-fuse-dark-700-bg'
|
||||
variant : 'vertical-style-1'
|
||||
},
|
||||
toolbar: {
|
||||
background: 'mat-white-500-bg',
|
||||
hidden : false,
|
||||
position : 'below',
|
||||
background: 'mat-white-500-bg'
|
||||
position : 'below'
|
||||
},
|
||||
footer : {
|
||||
background: 'mat-fuse-dark-900-bg',
|
||||
hidden : false,
|
||||
position : 'below',
|
||||
background: 'mat-fuse-dark-900-bg'
|
||||
position : 'below'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -230,20 +233,21 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
|||
layout: {
|
||||
width : 'fullwidth',
|
||||
navbar : {
|
||||
background: 'mat-fuse-dark-700-bg',
|
||||
folded : false,
|
||||
hidden : false,
|
||||
position : 'left',
|
||||
folded : false,
|
||||
background: 'mat-fuse-dark-700-bg'
|
||||
layout : 'vertical-style-1'
|
||||
},
|
||||
toolbar: {
|
||||
background: 'mat-white-500-bg',
|
||||
hidden : false,
|
||||
position : 'above-static',
|
||||
background: 'mat-white-500-bg'
|
||||
position : 'above-static'
|
||||
},
|
||||
footer : {
|
||||
background: 'mat-fuse-dark-900-bg',
|
||||
hidden : false,
|
||||
position : 'above-static',
|
||||
background: 'mat-fuse-dark-900-bg'
|
||||
position : 'above-static'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -258,20 +262,21 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
|||
layout: {
|
||||
width : 'fullwidth',
|
||||
navbar : {
|
||||
background: 'mat-fuse-dark-700-bg',
|
||||
folded : false,
|
||||
hidden : false,
|
||||
position : 'top',
|
||||
folded : false,
|
||||
background: 'mat-fuse-dark-700-bg'
|
||||
variant : 'vertical-style-1'
|
||||
},
|
||||
toolbar: {
|
||||
background: 'mat-white-500-bg',
|
||||
hidden : false,
|
||||
position : 'above',
|
||||
background: 'mat-white-500-bg'
|
||||
position : 'above'
|
||||
},
|
||||
footer : {
|
||||
background: 'mat-fuse-dark-900-bg',
|
||||
hidden : false,
|
||||
position : 'above-fixed',
|
||||
background: 'mat-fuse-dark-900-bg'
|
||||
position : 'above-fixed'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ i {
|
|||
}
|
||||
|
||||
// Material colors map
|
||||
$matColorsMap: (
|
||||
$matPalettes: (
|
||||
primary: $primary,
|
||||
accent: $accent,
|
||||
warn: $warn,
|
||||
|
|
@ -43,75 +43,91 @@ $matColorsMap: (
|
|||
);
|
||||
|
||||
// Material color hues list
|
||||
$matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
|
||||
$matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
|
||||
|
||||
// Text color levels generator mixin
|
||||
@mixin generateTextColorLevels($baseTextColor) {
|
||||
@mixin generateTextColorLevels($classes, $contrast) {
|
||||
|
||||
// If the base text color is black...
|
||||
@if (rgba(black, 1) == rgba($baseTextColor, 1)) {
|
||||
// If the contrast is dark...
|
||||
@if ($contrast == 'dark') {
|
||||
|
||||
i,
|
||||
.icon {
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
// Put down the color classes
|
||||
#{$classes} {
|
||||
|
||||
&.secondary-text,
|
||||
.secondary-text {
|
||||
color: rgba(0, 0, 0, 0.54) !important;
|
||||
}
|
||||
i,
|
||||
.icon {
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
|
||||
&.hint-text,
|
||||
.hint-text,
|
||||
&.disabled-text,
|
||||
.disabled-text {
|
||||
color: rgba(0, 0, 0, 0.38) !important;
|
||||
}
|
||||
&.secondary-text,
|
||||
.secondary-text {
|
||||
color: rgba(0, 0, 0, 0.54) !important;
|
||||
}
|
||||
|
||||
&.divider,
|
||||
.divider {
|
||||
color: rgba(0, 0, 0, 0.12) !important;
|
||||
}
|
||||
&.hint-text,
|
||||
.hint-text,
|
||||
&.disabled-text,
|
||||
.disabled-text {
|
||||
color: rgba(0, 0, 0, 0.38) !important;
|
||||
}
|
||||
|
||||
.mat-ripple-element {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
&.divider,
|
||||
.divider {
|
||||
color: rgba(0, 0, 0, 0.12) !important;
|
||||
}
|
||||
|
||||
.mat-ripple-element {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.adaptive-border-color {
|
||||
border-color: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
// If the base text color is white...
|
||||
@else {
|
||||
|
||||
i,
|
||||
.icon {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
// Put down the color classes
|
||||
#{$classes} {
|
||||
|
||||
&.secondary-text,
|
||||
.secondary-text {
|
||||
color: rgba(255, 255, 255, 0.70) !important;
|
||||
}
|
||||
i,
|
||||
.icon {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
&.hint-text,
|
||||
.hint-text,
|
||||
&.disabled-text,
|
||||
.disabled-text {
|
||||
color: rgba(255, 255, 255, 0.50) !important;
|
||||
}
|
||||
&.secondary-text,
|
||||
.secondary-text {
|
||||
color: rgba(255, 255, 255, 0.70) !important;
|
||||
}
|
||||
|
||||
&.divider,
|
||||
.divider {
|
||||
color: rgba(255, 255, 255, 0.12) !important;
|
||||
}
|
||||
&.hint-text,
|
||||
.hint-text,
|
||||
&.disabled-text,
|
||||
.disabled-text {
|
||||
color: rgba(255, 255, 255, 0.50) !important;
|
||||
}
|
||||
|
||||
.mat-ripple-element {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
&.divider,
|
||||
.divider {
|
||||
color: rgba(255, 255, 255, 0.12) !important;
|
||||
}
|
||||
|
||||
.mat-ripple-element {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.adaptive-border-color {
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin generateMaterialElementColors($contrastColor) {
|
||||
@mixin generateMaterialElementColors($classes, $contrast) {
|
||||
|
||||
// If the contrast color is white...
|
||||
// If the contrast color is light...
|
||||
$fuseForeground: (
|
||||
base: white,
|
||||
text: white,
|
||||
|
|
@ -119,8 +135,8 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
|
|||
divider: rgba(white, 0.12),
|
||||
);
|
||||
|
||||
// If the contrast color is black...
|
||||
@if (rgba(black, 1) == rgba($contrastColor, 1)) {
|
||||
// If the contrast color is dark...
|
||||
@if ($contrast == 'dark') {
|
||||
|
||||
$fuseForeground: (
|
||||
base: black,
|
||||
|
|
@ -129,43 +145,47 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
|
|||
);
|
||||
}
|
||||
|
||||
// Native Input
|
||||
input[type="text"] {
|
||||
color: map_get($fuseForeground, base);
|
||||
}
|
||||
// Put down the color classes
|
||||
#{$classes} {
|
||||
|
||||
// Input
|
||||
.mat-form-field-label {
|
||||
color: map_get($fuseForeground, hint-text);
|
||||
}
|
||||
// Native Input
|
||||
input[type="text"] {
|
||||
color: map_get($fuseForeground, base);
|
||||
}
|
||||
|
||||
.mat-form-field-underline {
|
||||
background-color: map_get($fuseForeground, divider);
|
||||
}
|
||||
// Input
|
||||
.mat-form-field-label {
|
||||
color: map_get($fuseForeground, hint-text);
|
||||
}
|
||||
|
||||
// Select
|
||||
.mat-select-trigger,
|
||||
.mat-select-arrow {
|
||||
color: map_get($fuseForeground, hint-text);
|
||||
}
|
||||
.mat-form-field-underline {
|
||||
background-color: map_get($fuseForeground, divider);
|
||||
}
|
||||
|
||||
.mat-select-underline {
|
||||
background-color: map_get($fuseForeground, divider);
|
||||
}
|
||||
// Select
|
||||
.mat-select-trigger,
|
||||
.mat-select-arrow {
|
||||
color: map_get($fuseForeground, hint-text);
|
||||
}
|
||||
|
||||
.mat-select-disabled .mat-select-value,
|
||||
.mat-select-arrow,
|
||||
.mat-select-trigger {
|
||||
color: map_get($fuseForeground, hint-text);
|
||||
}
|
||||
.mat-select-underline {
|
||||
background-color: map_get($fuseForeground, divider);
|
||||
}
|
||||
|
||||
.mat-select-content,
|
||||
.mat-select-panel-done-animating {
|
||||
background: map_get($background, card);
|
||||
}
|
||||
.mat-select-disabled .mat-select-value,
|
||||
.mat-select-arrow,
|
||||
.mat-select-trigger {
|
||||
color: map_get($fuseForeground, hint-text);
|
||||
}
|
||||
|
||||
.mat-select-value {
|
||||
color: map_get($fuseForeground, text);
|
||||
.mat-select-content,
|
||||
.mat-select-panel-done-animating {
|
||||
background: map_get($background, card);
|
||||
}
|
||||
|
||||
.mat-select-value {
|
||||
color: map_get($fuseForeground, text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -180,14 +200,6 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
|
|||
background-color: $color !important;
|
||||
color: $contrastColor !important;
|
||||
|
||||
// Generate text color levels
|
||||
// based on current contrast color
|
||||
@include generateTextColorLevels($contrastColor);
|
||||
|
||||
// Generate material element colors
|
||||
// based on current contrast color
|
||||
@include generateMaterialElementColors($contrastColor);
|
||||
|
||||
&[disabled] {
|
||||
background-color: rgba($color, .12) !important;
|
||||
color: rgba($contrastColor, .26) !important;
|
||||
|
|
@ -196,14 +208,6 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
|
|||
|
||||
.#{$colorName}#{$hue}-fg {
|
||||
color: $color !important;
|
||||
|
||||
// Generate text color levels
|
||||
// based on current contrast color
|
||||
@include generateTextColorLevels($color);
|
||||
|
||||
// Generate material element colors
|
||||
// based on current contrast color
|
||||
@include generateMaterialElementColors($color);
|
||||
}
|
||||
|
||||
.#{$colorName}#{$hue}-border {
|
||||
|
|
@ -229,49 +233,126 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
|
|||
|
||||
@mixin generateFuseColorClasses($primary, $accent, $warn) {
|
||||
|
||||
$colorMap: (
|
||||
$palettes: (
|
||||
primary: $primary,
|
||||
accent: $accent,
|
||||
warn: $warn
|
||||
);
|
||||
|
||||
// Define contrast lists
|
||||
$light-contrasting-classes: ();
|
||||
$dark-contrasting-classes: ();
|
||||
|
||||
// Generate the color classes...
|
||||
@each $name, $map in $colorMap {
|
||||
@each $paletteName, $palette in $palettes {
|
||||
|
||||
@each $hue in $matColorHues {
|
||||
// Get the contrasts map
|
||||
$contrasts: map-get($palette, 'contrast');
|
||||
|
||||
$color: map-get($map, $hue);
|
||||
$contrastColor: map-get(map-get($map, 'contrast'), $hue);
|
||||
@each $hue in $matHues {
|
||||
|
||||
@if ($color != null and $contrastColor != null) {
|
||||
// Get the color and the contrasting color
|
||||
$color: map-get($palette, $hue);
|
||||
$contrast: map-get($contrasts, $hue);
|
||||
|
||||
@include generateColorClasses($name, $color, $contrastColor, '-#{$hue}');
|
||||
@if ($color != null and $contrast != null) {
|
||||
|
||||
// Generate color classes
|
||||
@include generateColorClasses($paletteName, $color, $contrast, '-#{$hue}');
|
||||
|
||||
// If the contrast color is dark
|
||||
@if (rgba(black, 1) == rgba($contrast, 1)) {
|
||||
$dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
|
||||
}
|
||||
// if the contrast color is light
|
||||
@else {
|
||||
$light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
|
||||
}
|
||||
|
||||
// Run the generator one more time for default values (500)
|
||||
@if ($hue == 500) {
|
||||
@include generateColorClasses($name, $color, $contrastColor, '');
|
||||
|
||||
// Generate color classes
|
||||
@include generateColorClasses($paletteName, $color, $contrast, '');
|
||||
|
||||
// Add color to the correct list depending on the contrasting color
|
||||
|
||||
// If the contrast color is dark
|
||||
@if (rgba(black, 1) == rgba($contrast, 1)) {
|
||||
$dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
|
||||
}
|
||||
// if the contrast color is light
|
||||
@else {
|
||||
$light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Generate contrasting colors
|
||||
@include generateTextColorLevels($dark-contrasting-classes, 'dark');
|
||||
@include generateTextColorLevels($light-contrasting-classes, 'light');
|
||||
@include generateMaterialElementColors($dark-contrasting-classes, 'dark');
|
||||
@include generateMaterialElementColors($light-contrasting-classes, 'light');
|
||||
}
|
||||
|
||||
// Generate the color classes...
|
||||
|
||||
// Define contrast lists
|
||||
$light-contrasting-classes: ();
|
||||
$dark-contrasting-classes: ();
|
||||
|
||||
@each $paletteName, $palette in $matPalettes {
|
||||
|
||||
// Get the contrasts map
|
||||
$contrasts: map-get($palette, 'contrast');
|
||||
|
||||
@each $hue in $matHues {
|
||||
|
||||
// Get the color and the contrasting color
|
||||
$color: map-get($palette, $hue);
|
||||
$contrast: map-get($contrasts, $hue);
|
||||
|
||||
@if ($color != null and $contrast != null) {
|
||||
|
||||
// Generate color classes
|
||||
@include generateColorClasses($paletteName, $color, $contrast, '-#{$hue}');
|
||||
|
||||
// Add color to the correct list depending on the contrasting color
|
||||
|
||||
// If the contrast color is dark
|
||||
@if (rgba(black, 1) == rgba($contrast, 1)) {
|
||||
$dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
|
||||
}
|
||||
// if the contrast color is light
|
||||
@else {
|
||||
$light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
|
||||
}
|
||||
|
||||
// Run the generator one more time for default values (500)
|
||||
@if ($hue == 500) {
|
||||
|
||||
// Generate color classes
|
||||
@include generateColorClasses($paletteName, $color, $contrast, '');
|
||||
|
||||
// Add color to the correct list depending on the contrasting color
|
||||
|
||||
// If the contrast color is dark
|
||||
@if (rgba(black, 1) == rgba($contrast, 1)) {
|
||||
$dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
|
||||
}
|
||||
// if the contrast color is light
|
||||
@else {
|
||||
$light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Generate the color classes...
|
||||
@each $colorName, $colorMap in $matColorsMap {
|
||||
|
||||
@each $hue in $matColorHues {
|
||||
|
||||
$color: map-get($colorMap, $hue);
|
||||
$contrastColor: map-get(map-get($colorMap, 'contrast'), $hue);
|
||||
|
||||
@if ($color != null and $contrastColor != null) {
|
||||
|
||||
@include generateColorClasses($colorName, $color, $contrastColor, '-#{$hue}');
|
||||
|
||||
// Run the generator one more time for default values (500)
|
||||
@if ($hue == 500) {
|
||||
@include generateColorClasses($colorName, $color, $contrastColor, '');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Generate contrasting colors
|
||||
@include generateTextColorLevels($dark-contrasting-classes, 'dark');
|
||||
@include generateTextColorLevels($light-contrasting-classes, 'light');
|
||||
@include generateMaterialElementColors($dark-contrasting-classes, 'dark');
|
||||
@include generateMaterialElementColors($light-contrasting-classes, 'light');
|
||||
|
|
|
|||
|
|
@ -219,4 +219,26 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Material style
|
||||
&.material {
|
||||
|
||||
.nav-subheader {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.12);
|
||||
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
|
||||
.nav-link {
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
margin: 4px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,20 +4,21 @@ export interface FuseConfig
|
|||
style: string,
|
||||
width: 'fullwidth' | 'boxed',
|
||||
navbar: {
|
||||
background: string,
|
||||
hidden: boolean,
|
||||
folded: boolean,
|
||||
position: 'left' | 'right' | 'top',
|
||||
background: string
|
||||
variant: string
|
||||
},
|
||||
toolbar: {
|
||||
background: string,
|
||||
hidden: boolean,
|
||||
position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed',
|
||||
background: string
|
||||
position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed'
|
||||
}
|
||||
footer: {
|
||||
background: string,
|
||||
hidden: boolean,
|
||||
position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed',
|
||||
background: string
|
||||
position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed'
|
||||
}
|
||||
};
|
||||
customScrollbars: boolean;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import "src/@fuse/scss/fuse";
|
||||
|
||||
:host {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
|
@ -9,7 +11,7 @@
|
|||
.theme-options-button {
|
||||
position: absolute;
|
||||
top: 160px;
|
||||
right: 0;
|
||||
right: 70px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
|
|
@ -18,9 +20,13 @@
|
|||
border-radius: 0;
|
||||
margin: 0;
|
||||
pointer-events: auto;
|
||||
opacity: .75;
|
||||
opacity: .90;
|
||||
z-index: 998;
|
||||
|
||||
@include media-breakpoint-down('md') {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
animation: rotating 3s linear infinite;
|
||||
}
|
||||
|
|
|
|||
343
src/app/fake-db/chat-panel.ts
Normal file
343
src/app/fake-db/chat-panel.ts
Normal file
|
|
@ -0,0 +1,343 @@
|
|||
export class ChatPanelFakeDb
|
||||
{
|
||||
public static contacts = [
|
||||
{
|
||||
'id' : '5725a680b3249760ea21de52',
|
||||
'name' : 'Alice Freeman',
|
||||
'avatar': 'assets/images/avatars/alice.jpg',
|
||||
'status': 'online',
|
||||
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
|
||||
'unread': '2'
|
||||
},
|
||||
{
|
||||
'id' : '5725a680606588342058356d',
|
||||
'name' : 'Arnold',
|
||||
'avatar': 'assets/images/avatars/Arnold.jpg',
|
||||
'status': 'do-not-disturb',
|
||||
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||
},
|
||||
{
|
||||
'id' : '5725a68009e20d0a9e9acf2a',
|
||||
'name' : 'Barrera',
|
||||
'avatar': 'assets/images/avatars/Barrera.jpg',
|
||||
'status': 'do-not-disturb',
|
||||
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||
},
|
||||
{
|
||||
'id' : '5725a6809fdd915739187ed5',
|
||||
'name' : 'Blair',
|
||||
'avatar': 'assets/images/avatars/Blair.jpg',
|
||||
'status': 'offline',
|
||||
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
|
||||
'unread': '3'
|
||||
},
|
||||
{
|
||||
'id' : '5725a68007920cf75051da64',
|
||||
'name' : 'Boyle',
|
||||
'avatar': 'assets/images/avatars/Boyle.jpg',
|
||||
'status': 'offline',
|
||||
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
|
||||
'unread': '1'
|
||||
},
|
||||
{
|
||||
'id' : '5725a68031fdbb1db2c1af47',
|
||||
'name' : 'Christy',
|
||||
'avatar': 'assets/images/avatars/Christy.jpg',
|
||||
'status': 'offline',
|
||||
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||
},
|
||||
{
|
||||
'id' : '5725a680bc670af746c435e2',
|
||||
'name' : 'Copeland',
|
||||
'avatar': 'assets/images/avatars/Copeland.jpg',
|
||||
'status': 'online',
|
||||
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||
},
|
||||
{
|
||||
'id' : '5725a680e7eb988a58ddf303',
|
||||
'name' : 'Estes',
|
||||
'avatar': 'assets/images/avatars/Estes.jpg',
|
||||
'status': 'away',
|
||||
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||
},
|
||||
{
|
||||
'id' : '5725a680dcb077889f758961',
|
||||
'name' : 'Harper',
|
||||
'avatar': 'assets/images/avatars/Harper.jpg',
|
||||
'status': 'offline',
|
||||
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||
},
|
||||
{
|
||||
'id' : '5725a6806acf030f9341e925',
|
||||
'name' : 'Helen',
|
||||
'avatar': 'assets/images/avatars/Helen.jpg',
|
||||
'status': 'away',
|
||||
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||
},
|
||||
{
|
||||
'id' : '5725a680ae1ae9a3c960d487',
|
||||
'name' : 'Henderson',
|
||||
'avatar': 'assets/images/avatars/Henderson.jpg',
|
||||
'status': 'offline',
|
||||
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||
},
|
||||
{
|
||||
'id' : '5725a680b8d240c011dd224b',
|
||||
'name' : 'Josefina',
|
||||
'avatar': 'assets/images/avatars/Josefina.jpg',
|
||||
'status': 'online',
|
||||
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||
},
|
||||
{
|
||||
'id' : '5725a68034cb3968e1f79eac',
|
||||
'name' : 'Katina',
|
||||
'avatar': 'assets/images/avatars/Katina.jpg',
|
||||
'status': 'away',
|
||||
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||
},
|
||||
{
|
||||
'id' : '5725a6801146cce777df2a08',
|
||||
'name' : 'Lily',
|
||||
'avatar': 'assets/images/avatars/Lily.jpg',
|
||||
'status': 'do-not-disturb',
|
||||
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
|
||||
'unread': '10'
|
||||
},
|
||||
{
|
||||
'id' : '5725a6808a178bfd034d6ecf',
|
||||
'name' : 'Mai',
|
||||
'avatar': 'assets/images/avatars/Mai.jpg',
|
||||
'status': 'away',
|
||||
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||
},
|
||||
{
|
||||
'id' : '5725a680653c265f5c79b5a9',
|
||||
'name' : 'Nancy',
|
||||
'avatar': 'assets/images/avatars/Nancy.jpg',
|
||||
'status': 'do-not-disturb',
|
||||
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||
},
|
||||
{
|
||||
'id' : '5725a680bbcec3cc32a8488a',
|
||||
'name' : 'Nora',
|
||||
'avatar': 'assets/images/avatars/Nora.jpg',
|
||||
'status': 'do-not-disturb',
|
||||
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
|
||||
'unread': '7'
|
||||
},
|
||||
{
|
||||
'id' : '5725a6803d87f1b77e17b62b',
|
||||
'name' : 'Odessa',
|
||||
'avatar': 'assets/images/avatars/Odessa.jpg',
|
||||
'status': 'away',
|
||||
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
|
||||
'unread': '1'
|
||||
},
|
||||
{
|
||||
'id' : '5725a680e87cb319bd9bd673',
|
||||
'name' : 'Reyna',
|
||||
'avatar': 'assets/images/avatars/Reyna.jpg',
|
||||
'status': 'offline',
|
||||
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||
},
|
||||
{
|
||||
'id' : '5725a6802d10e277a0f35775',
|
||||
'name' : 'Shauna',
|
||||
'avatar': 'assets/images/avatars/Shauna.jpg',
|
||||
'status': 'online',
|
||||
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||
},
|
||||
{
|
||||
'id' : '5725a680aef1e5cf26dd3d1f',
|
||||
'name' : 'Shepard',
|
||||
'avatar': 'assets/images/avatars/Shepard.jpg',
|
||||
'status': 'online',
|
||||
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||
},
|
||||
{
|
||||
'id' : '5725a680cd7efa56a45aea5d',
|
||||
'name' : 'Tillman',
|
||||
'avatar': 'assets/images/avatars/Tillman.jpg',
|
||||
'status': 'do-not-disturb',
|
||||
'mood' : '',
|
||||
'unread': '99+'
|
||||
},
|
||||
{
|
||||
'id' : '5725a680fb65c91a82cb35e2',
|
||||
'name' : 'Trevino',
|
||||
'avatar': 'assets/images/avatars/Trevino.jpg',
|
||||
'status': 'away',
|
||||
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||
},
|
||||
{
|
||||
'id' : '5725a68018c663044be49cbf',
|
||||
'name' : 'Tyson',
|
||||
'avatar': 'assets/images/avatars/Tyson.jpg',
|
||||
'status': 'do-not-disturb',
|
||||
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||
},
|
||||
{
|
||||
'id' : '5725a6809413bf8a0a5272b1',
|
||||
'name' : 'Velazquez',
|
||||
'avatar': 'assets/images/avatars/Velazquez.jpg',
|
||||
'status': 'online',
|
||||
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
|
||||
}
|
||||
];
|
||||
|
||||
public static chats = [
|
||||
{
|
||||
'id' : '1725a680b3249760ea21de52',
|
||||
'dialog': [
|
||||
{
|
||||
'who' : '5725a680b3249760ea21de52',
|
||||
'message': 'Quickly come to the meeting room 1B, we have a big server issue',
|
||||
'time' : '2017-03-22T08:54:28.299Z'
|
||||
},
|
||||
{
|
||||
'who' : '5725a6802d10e277a0f35724',
|
||||
'message': 'I’m having breakfast right now, can’t you wait for 10 minutes?',
|
||||
'time' : '2017-03-22T08:55:28.299Z'
|
||||
},
|
||||
{
|
||||
'who' : '5725a6802d10e277a0f35724',
|
||||
'message': 'I’m having breakfast right now, can’t you wait for 10 minutes?',
|
||||
'time' : '2017-03-22T08:55:28.299Z'
|
||||
},
|
||||
{
|
||||
'who' : '5725a680b3249760ea21de52',
|
||||
'message': 'We are losing money! Quick!',
|
||||
'time' : '2017-03-22T09:00:28.299Z'
|
||||
},
|
||||
{
|
||||
'who' : '5725a6802d10e277a0f35724',
|
||||
'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
|
||||
'time' : '2017-03-22T09:02:28.299Z'
|
||||
},
|
||||
{
|
||||
'who' : '5725a680b3249760ea21de52',
|
||||
'message': 'You are the worst!',
|
||||
'time' : '2017-03-22T09:05:28.299Z'
|
||||
},
|
||||
{
|
||||
'who' : '5725a680b3249760ea21de52',
|
||||
'message': 'We are losing money! Quick!',
|
||||
'time' : '2017-03-22T09:15:28.299Z'
|
||||
},
|
||||
{
|
||||
'who' : '5725a680b3249760ea21de52',
|
||||
'message': 'You are the worst!',
|
||||
'time' : '2017-03-22T09:05:28.299Z'
|
||||
},
|
||||
{
|
||||
'who' : '5725a680b3249760ea21de52',
|
||||
'message': 'We are losing money! Quick!',
|
||||
'time' : '2017-03-22T09:15:28.299Z'
|
||||
},
|
||||
{
|
||||
'who' : '5725a6802d10e277a0f35724',
|
||||
'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
|
||||
'time' : '2017-03-22T09:20:28.299Z'
|
||||
},
|
||||
{
|
||||
'who' : '5725a680b3249760ea21de52',
|
||||
'message': 'You are the worst!',
|
||||
'time' : '2017-03-22T09:22:28.299Z'
|
||||
},
|
||||
{
|
||||
'who' : '5725a680b3249760ea21de52',
|
||||
'message': 'We are losing money! Quick!',
|
||||
'time' : '2017-03-22T09:25:28.299Z'
|
||||
},
|
||||
{
|
||||
'who' : '5725a6802d10e277a0f35724',
|
||||
'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
|
||||
'time' : '2017-03-22T09:27:28.299Z'
|
||||
},
|
||||
{
|
||||
'who' : '5725a680b3249760ea21de52',
|
||||
'message': 'You are the worst!',
|
||||
'time' : '2017-03-22T09:33:28.299Z'
|
||||
},
|
||||
{
|
||||
'who' : '5725a680b3249760ea21de52',
|
||||
'message': 'You are the worst!',
|
||||
'time' : '2017-03-22T09:33:28.299Z'
|
||||
},
|
||||
{
|
||||
'who' : '5725a680b3249760ea21de52',
|
||||
'message': 'We are losing money! Quick!',
|
||||
'time' : '2017-03-22T09:35:28.299Z'
|
||||
},
|
||||
{
|
||||
'who' : '5725a6802d10e277a0f35724',
|
||||
'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
|
||||
'time' : '2017-03-22T09:45:28.299Z'
|
||||
},
|
||||
{
|
||||
'who' : '5725a680b3249760ea21de52',
|
||||
'message': 'You are the worst!',
|
||||
'time' : '2017-03-22T10:00:28.299Z'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id' : '2725a680b8d240c011dd2243',
|
||||
'dialog': [
|
||||
{
|
||||
'who' : '5725a680606588342058356d',
|
||||
'message': 'Quickly come to the meeting room 1B, we have a big server issue',
|
||||
'time' : '2017-04-22T01:00:00.299Z'
|
||||
},
|
||||
{
|
||||
'who' : '5725a6802d10e277a0f35724',
|
||||
'message': 'I’m having breakfast right now, can’t you wait for 10 minutes?',
|
||||
'time' : '2017-04-22T01:05:00.299Z'
|
||||
},
|
||||
{
|
||||
'who' : '5725a680606588342058356d',
|
||||
'message': 'We are losing money! Quick!',
|
||||
'time' : '2017-04-22T01:10:00.299Z'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
'id' : '3725a6809413bf8a0a5272b4',
|
||||
'dialog': [
|
||||
{
|
||||
'who' : '5725a68009e20d0a9e9acf2a',
|
||||
'message': 'Quickly come to the meeting room 1B, we have a big server issue',
|
||||
'time' : '2017-04-22T02:10:00.299Z'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
public static user = [
|
||||
{
|
||||
'id' : '5725a6802d10e277a0f35724',
|
||||
'name' : 'John Doe',
|
||||
'avatar' : 'assets/images/avatars/profile.jpg',
|
||||
'status' : 'online',
|
||||
'mood' : '',
|
||||
'chatList': [
|
||||
{
|
||||
'chatId' : '1725a680b3249760ea21de52',
|
||||
'contactId' : '5725a680b3249760ea21de52',
|
||||
'lastMessageTime': '2017-06-12T02:10:18.931Z'
|
||||
},
|
||||
{
|
||||
'chatId' : '2725a680b8d240c011dd2243',
|
||||
'contactId' : '5725a680606588342058356d',
|
||||
'lastMessageTime': '2017-02-18T10:30:18.931Z'
|
||||
},
|
||||
{
|
||||
'chatId' : '3725a6809413bf8a0a5272b4',
|
||||
'contactId' : '5725a68009e20d0a9e9acf2a',
|
||||
'lastMessageTime': '2017-03-18T12:30:18.931Z'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
}
|
||||
|
|
@ -10,23 +10,24 @@ import { FuseConfig } from '@fuse/types';
|
|||
|
||||
export const fuseConfig: FuseConfig = {
|
||||
layout : {
|
||||
style : 'vertical-layout-1',
|
||||
width : 'fullwidth',
|
||||
navbar : {
|
||||
style : 'vertical-layout-1',
|
||||
width : 'fullwidth',
|
||||
navbar : {
|
||||
background: 'mat-fuse-dark-700-bg',
|
||||
folded : false,
|
||||
hidden : false,
|
||||
position : 'left',
|
||||
folded : false,
|
||||
background: 'mat-fuse-dark-700-bg'
|
||||
variant : 'vertical-style-1'
|
||||
},
|
||||
toolbar : {
|
||||
toolbar: {
|
||||
background: 'mat-white-500-bg',
|
||||
hidden : false,
|
||||
position : 'below-static',
|
||||
background: 'mat-white-500-bg'
|
||||
position : 'below-static'
|
||||
},
|
||||
footer : {
|
||||
footer : {
|
||||
background: 'mat-fuse-dark-900-bg',
|
||||
hidden : false,
|
||||
position : 'below-static',
|
||||
background: 'mat-fuse-dark-900-bg'
|
||||
position : 'below-fixed'
|
||||
}
|
||||
},
|
||||
customScrollbars: true
|
||||
|
|
|
|||
119
src/app/layout/components/chat-panel/chat-panel.component.html
Normal file
119
src/app/layout/components/chat-panel/chat-panel.component.html
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
<div class="header mat-elevation-z4 mat-primary-bg" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
|
||||
<ng-container *ngIf="selectedContact === null">
|
||||
|
||||
<div class="title ml-16" fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="s-32 white-fg">chat</mat-icon>
|
||||
<h3 class="ml-12">Team Chat</h3>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="selectedContact !== null">
|
||||
|
||||
<div class="title" fxLayout="row" fxLayoutAlign="start center">
|
||||
<img [src]="selectedContact.avatar" class="avatar mx-16">
|
||||
<h3 class="text-truncate">{{selectedContact.name}}</h3>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<button mat-icon-button class="toggle-sidebar-folded mr-8" (click)="foldSidebarTemporarily()" fxHide fxShow.gt-md>
|
||||
<mat-icon class="secondary-text s-20">arrow_forward</mat-icon>
|
||||
</button>
|
||||
|
||||
<button mat-icon-button class="toggle-sidebar-folded mr-8" (click)="toggleSidebarOpen()" fxHide.gt-md>
|
||||
<mat-icon class="secondary-text">arrow_forward</mat-icon>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<!-- Contacts -->
|
||||
<mat-list id="contacts-list" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
|
||||
|
||||
<mat-list-item *ngFor="let contact of contacts"
|
||||
[ngClass]="contact.status"
|
||||
[class.active]="contact.id === selectedContact?.id"
|
||||
(click)="goToChat(contact)"
|
||||
[matTooltip]="contact.name"
|
||||
matTooltipPosition="left"
|
||||
matRipple>
|
||||
|
||||
<img matListAvatar [src]="contact.avatar">
|
||||
<div class="unread-count" *ngIf="contact.unread">{{contact.unread}}</div>
|
||||
<div class="status-icon" [ngClass]="contact.status"></div>
|
||||
|
||||
</mat-list-item>
|
||||
|
||||
</mat-list>
|
||||
<!-- / Contacts -->
|
||||
|
||||
<!-- Chat -->
|
||||
<div id="chat" fxLayout="column" fxFlex="1 1 auto">
|
||||
|
||||
<div id="messages" class="messages" fxFlex="1 1 auto" fusePerfectScrollbar>
|
||||
|
||||
<ng-container *ngIf="chat && chat.dialog && chat.dialog.length > 0">
|
||||
|
||||
<div *ngFor="let message of chat.dialog; let i = index" class="message-row"
|
||||
[ngClass]="{
|
||||
'me': message.who === user.id,
|
||||
'contact': message.who !== user.id,
|
||||
'first-of-group': isFirstMessageOfGroup(message, i),
|
||||
'last-of-group': isLastMessageOfGroup(message, i)
|
||||
}">
|
||||
|
||||
<img *ngIf="shouldShowContactAvatar(message, i)"
|
||||
src="{{selectedContact.avatar}}"
|
||||
class="avatar">
|
||||
|
||||
<div class="bubble">
|
||||
<div class="message">{{message.message}}</div>
|
||||
<div class="time secondary-text">{{message.time | date:'short'}}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="chat && chat.dialog && chat.dialog.length === 0">
|
||||
|
||||
<div class="no-messages-icon">
|
||||
<mat-icon class="s-128">chat</mat-icon>
|
||||
</div>
|
||||
|
||||
<div class="no-messages secondary-text">
|
||||
Start a conversation by typing your message below.
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="reply-form" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center">
|
||||
|
||||
<form #replyForm="ngForm"
|
||||
(ngSubmit)="reply($event)"
|
||||
(keydown.enter)="reply($event)"
|
||||
fxFlex
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="start center">
|
||||
|
||||
<mat-form-field class="message-text" fxFlex floatLabel="never" appearance="standard">
|
||||
<textarea matInput #replyInput ngModel name="message" placeholder="Type your message"
|
||||
[rows]="1" [matTextareaAutosize]="true"></textarea>
|
||||
</mat-form-field>
|
||||
|
||||
<button class="send-message-button" mat-icon-button type="submit" aria-label="Send message">
|
||||
<mat-icon class="secondary-text">send</mat-icon>
|
||||
</button>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- / Chat -->
|
||||
|
||||
</div>
|
||||
374
src/app/layout/components/chat-panel/chat-panel.component.scss
Normal file
374
src/app/layout/components/chat-panel/chat-panel.component.scss
Normal file
|
|
@ -0,0 +1,374 @@
|
|||
@import "src/@fuse/scss/fuse";
|
||||
|
||||
chat-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
width: 360px;
|
||||
min-width: 360px;
|
||||
max-width: 360px;
|
||||
z-index: 99;
|
||||
overflow: hidden;
|
||||
|
||||
.header {
|
||||
height: 64px;
|
||||
max-height: 64px;
|
||||
min-height: 64px;
|
||||
|
||||
.title {
|
||||
|
||||
mat-icon {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
max-width: 120px;
|
||||
transition: opacity 300ms ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#contacts-list {
|
||||
padding: 8px 0;
|
||||
overflow: auto;
|
||||
width: 72px;
|
||||
min-width: 72px;
|
||||
max-width: 72px;
|
||||
|
||||
// Perfect scrollbar
|
||||
.ps__rail-y {
|
||||
width: 3px !important;
|
||||
|
||||
.ps__thumb-y {
|
||||
width: 3px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-list-item {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
background-color: mat-color(mat-palette($mat-grey, 300));
|
||||
@include mat-elevation(2);
|
||||
}
|
||||
|
||||
&.offline {
|
||||
|
||||
.mat-list-item-content {
|
||||
|
||||
img {
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
h3 {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-list-item-content {
|
||||
|
||||
.unread-count {
|
||||
position: absolute;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
top: 4px;
|
||||
left: 10px;
|
||||
border-radius: 9px;
|
||||
padding: 0 5px;
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: mat-color(mat-palette($mat-indigo));
|
||||
color: white;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
bottom: 3px;
|
||||
left: 44px;
|
||||
border: 2px solid white;
|
||||
border-radius: 50%;
|
||||
|
||||
&.online {
|
||||
background-color: #4CAF50;
|
||||
}
|
||||
|
||||
&.do-not-disturb {
|
||||
background-color: #F44336;
|
||||
}
|
||||
|
||||
&.away {
|
||||
background-color: #FFC107;
|
||||
}
|
||||
|
||||
&.offline {
|
||||
background-color: #646464;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#chat {
|
||||
background-color: mat-color(mat-palette($mat-grey, 300));
|
||||
|
||||
.messages {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
padding: 16px 0 40px 40px;
|
||||
|
||||
.message-row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
padding: 0 16px 4px 16px;
|
||||
|
||||
.avatar {
|
||||
position: absolute;
|
||||
left: -32px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
|
||||
.message {
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.time {
|
||||
position: absolute;
|
||||
display: none;
|
||||
width: 100%;
|
||||
font-size: 11px;
|
||||
margin-top: 8px;
|
||||
top: 100%;
|
||||
color: $black-87-opacity;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&.contact {
|
||||
|
||||
.bubble {
|
||||
background-color: mat-color(mat-palette($mat-indigo));
|
||||
color: white;
|
||||
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
|
||||
border-top-right-radius: 20px;
|
||||
border-bottom-right-radius: 20px;
|
||||
|
||||
.time {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.first-of-group {
|
||||
|
||||
.bubble {
|
||||
border-top-left-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.last-of-group {
|
||||
|
||||
.bubble {
|
||||
border-bottom-left-radius: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.me {
|
||||
padding-left: 40px;
|
||||
|
||||
.avatar {
|
||||
order: 2;
|
||||
margin: 0 0 0 16px;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
margin-left: auto;
|
||||
background-color: #FFFFFF;
|
||||
color: $black-87-opacity;
|
||||
|
||||
border-top-left-radius: 20px;
|
||||
border-bottom-left-radius: 20px;
|
||||
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
|
||||
.time {
|
||||
justify-content: flex-end;
|
||||
right: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.first-of-group {
|
||||
|
||||
.bubble {
|
||||
border-top-right-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.last-of-group {
|
||||
|
||||
.bubble {
|
||||
border-bottom-right-radius: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.contact + .me,
|
||||
&.me + .contact {
|
||||
padding-top: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
&.first-of-group {
|
||||
|
||||
.bubble {
|
||||
border-top-left-radius: 20px;
|
||||
padding-top: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
&.last-of-group {
|
||||
|
||||
.bubble {
|
||||
border-bottom-left-radius: 20px;
|
||||
padding-bottom: 13px;
|
||||
|
||||
.time {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-messages-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding: 0 24px;
|
||||
margin-top: -64px;
|
||||
text-align: center;
|
||||
|
||||
mat-icon {
|
||||
color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
.no-messages {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 0 16px 24px 16px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.reply-form {
|
||||
position: relative;
|
||||
|
||||
.message-text {
|
||||
padding: 16px 8px;
|
||||
|
||||
.mat-form-field-wrapper {
|
||||
padding: 0;
|
||||
|
||||
.mat-form-field-flex {
|
||||
padding: 0;
|
||||
|
||||
.mat-form-field-infix {
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
@include mat-elevation(2);
|
||||
|
||||
textarea {
|
||||
overflow: hidden;
|
||||
margin: 16px 48px 16px 16px;
|
||||
width: calc(100% - 64px);
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-form-field-underline {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.send-message-button {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
bottom: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fuse-sidebar {
|
||||
|
||||
&.chat-panel {
|
||||
width: 360px;
|
||||
min-width: 360px;
|
||||
max-width: 360px;
|
||||
|
||||
// Folded
|
||||
&.folded {
|
||||
|
||||
chat-panel {
|
||||
|
||||
.header {
|
||||
|
||||
.title {
|
||||
|
||||
h3 {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Folded unfolded
|
||||
&.unfolded {
|
||||
|
||||
chat-panel {
|
||||
|
||||
.header {
|
||||
|
||||
.title {
|
||||
|
||||
h3 {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
269
src/app/layout/components/chat-panel/chat-panel.component.ts
Normal file
269
src/app/layout/components/chat-panel/chat-panel.component.ts
Normal file
|
|
@ -0,0 +1,269 @@
|
|||
import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, QueryList, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
|
||||
import { NgForm } from '@angular/forms';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
|
||||
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
|
||||
import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
|
||||
import { ChatPanelService } from 'app/layout/components/chat-panel/chat-panel.service';
|
||||
|
||||
@Component({
|
||||
selector : 'chat-panel',
|
||||
templateUrl : './chat-panel.component.html',
|
||||
styleUrls : ['./chat-panel.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy
|
||||
{
|
||||
contacts: any[];
|
||||
chat: any;
|
||||
selectedContact: any;
|
||||
sidebarFolded: boolean;
|
||||
user: any;
|
||||
|
||||
@ViewChild('replyForm')
|
||||
set replyForm(content: NgForm)
|
||||
{
|
||||
this._replyForm = content;
|
||||
}
|
||||
|
||||
@ViewChild('replyInput')
|
||||
set replyInput(content: ElementRef)
|
||||
{
|
||||
this._replyInput = content;
|
||||
}
|
||||
|
||||
@ViewChildren(FusePerfectScrollbarDirective)
|
||||
private _fusePerfectScrollbarDirectives: QueryList<FusePerfectScrollbarDirective>;
|
||||
|
||||
// Private
|
||||
private _chatViewScrollbar: FusePerfectScrollbarDirective;
|
||||
private _replyForm: NgForm;
|
||||
private _replyInput: ElementRef;
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param {ChatPanelService} _chatPanelService
|
||||
* @param {HttpClient} _httpClient
|
||||
* @param {FuseSidebarService} _fuseSidebarService
|
||||
*/
|
||||
constructor(
|
||||
private _chatPanelService: ChatPanelService,
|
||||
private _httpClient: HttpClient,
|
||||
private _fuseSidebarService: FuseSidebarService
|
||||
)
|
||||
{
|
||||
// Set the defaults
|
||||
this.selectedContact = null;
|
||||
this.sidebarFolded = true;
|
||||
|
||||
// Set the private defaults
|
||||
this._unsubscribeAll = new Subject();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Load the contacts
|
||||
this._chatPanelService.loadContacts().then(() => {
|
||||
|
||||
this.contacts = this._chatPanelService.contacts;
|
||||
this.user = this._chatPanelService.user;
|
||||
});
|
||||
|
||||
// Subscribe to the foldedChanged observable
|
||||
this._fuseSidebarService.getSidebar('chatPanel').foldedChanged
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((folded) => {
|
||||
this.sidebarFolded = folded;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* After view init
|
||||
*/
|
||||
ngAfterViewInit(): void
|
||||
{
|
||||
this._chatViewScrollbar = this._fusePerfectScrollbarDirectives.find((directive) => {
|
||||
return directive.elementRef.nativeElement.id === 'messages';
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Private methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Prepare the chat for the replies
|
||||
*/
|
||||
private _prepareChatForReplies(): void
|
||||
{
|
||||
setTimeout(() => {
|
||||
|
||||
// Reset the reply form
|
||||
this._replyForm.reset();
|
||||
|
||||
// Focus to the reply input
|
||||
this._replyInput.nativeElement.focus();
|
||||
|
||||
// Scroll to the bottom of the messages list
|
||||
if ( this._chatViewScrollbar )
|
||||
{
|
||||
this._chatViewScrollbar.update();
|
||||
|
||||
setTimeout(() => {
|
||||
this._chatViewScrollbar.scrollToBottom(0);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle sidebar folded status
|
||||
*/
|
||||
toggleSidebarFolded(): void
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('chatPanel').toggleFold();
|
||||
}
|
||||
|
||||
/**
|
||||
* Fold the temporarily unfolded sidebar back
|
||||
*/
|
||||
foldSidebarTemporarily(): void
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('chatPanel').foldTemporarily();
|
||||
}
|
||||
|
||||
/**
|
||||
* Unfold the sidebar temporarily
|
||||
*/
|
||||
unfoldSidebarTemporarily(): void
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('chatPanel').unfoldTemporarily();
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle sidebar opened status
|
||||
*/
|
||||
toggleSidebarOpen(): void
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('chatPanel').toggleOpen();
|
||||
}
|
||||
|
||||
/**
|
||||
* Decide whether to show or not the contact's avatar in the message row
|
||||
*
|
||||
* @param message
|
||||
* @param i
|
||||
* @returns {boolean}
|
||||
*/
|
||||
shouldShowContactAvatar(message, i): boolean
|
||||
{
|
||||
return (
|
||||
message.who === this.selectedContact.id &&
|
||||
((this.chat.dialog[i + 1] && this.chat.dialog[i + 1].who !== this.selectedContact.id) || !this.chat.dialog[i + 1])
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the given message is the first message of a group
|
||||
*
|
||||
* @param message
|
||||
* @param i
|
||||
* @returns {boolean}
|
||||
*/
|
||||
isFirstMessageOfGroup(message, i): boolean
|
||||
{
|
||||
return (i === 0 || this.chat.dialog[i - 1] && this.chat.dialog[i - 1].who !== message.who);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the given message is the last message of a group
|
||||
*
|
||||
* @param message
|
||||
* @param i
|
||||
* @returns {boolean}
|
||||
*/
|
||||
isLastMessageOfGroup(message, i): boolean
|
||||
{
|
||||
return (i === this.chat.dialog.length - 1 || this.chat.dialog[i + 1] && this.chat.dialog[i + 1].who !== message.who);
|
||||
}
|
||||
|
||||
/**
|
||||
* Go to chat with the contact
|
||||
*
|
||||
* @param contact
|
||||
*/
|
||||
goToChat(contact): void
|
||||
{
|
||||
// Unfold the sidebar temporarily
|
||||
this.unfoldSidebarTemporarily();
|
||||
|
||||
// Set the selected contact
|
||||
this.selectedContact = contact;
|
||||
|
||||
// Load the chat
|
||||
this._chatPanelService.getChat(contact.id).then((chat) => {
|
||||
|
||||
// Set the chat
|
||||
this.chat = chat;
|
||||
|
||||
// Prepare the chat for the replies
|
||||
this._prepareChatForReplies();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Reply
|
||||
*/
|
||||
reply(event): void
|
||||
{
|
||||
event.preventDefault();
|
||||
|
||||
if ( !this._replyForm.form.value.message )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Message
|
||||
const message = {
|
||||
who : this.user.id,
|
||||
message: this._replyForm.form.value.message,
|
||||
time : new Date().toISOString()
|
||||
};
|
||||
|
||||
// Add the message to the chat
|
||||
this.chat.dialog.push(message);
|
||||
|
||||
// Update the server
|
||||
this._chatPanelService.updateChat(this.chat.id, this.chat.dialog).then(response => {
|
||||
|
||||
// Prepare the chat for the replies
|
||||
this._prepareChatForReplies();
|
||||
});
|
||||
}
|
||||
}
|
||||
34
src/app/layout/components/chat-panel/chat-panel.module.ts
Normal file
34
src/app/layout/components/chat-panel/chat-panel.module.ts
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatRippleModule, MatTabsModule, MatTooltipModule } from '@angular/material';
|
||||
|
||||
import { FuseSharedModule } from '@fuse/shared.module';
|
||||
|
||||
import { ChatPanelComponent } from 'app/layout/components/chat-panel/chat-panel.component';
|
||||
import { ChatPanelService } from 'app/layout/components/chat-panel/chat-panel.service';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
ChatPanelComponent
|
||||
],
|
||||
providers : [
|
||||
ChatPanelService
|
||||
],
|
||||
imports : [
|
||||
MatButtonModule,
|
||||
MatFormFieldModule,
|
||||
MatIconModule,
|
||||
MatInputModule,
|
||||
MatListModule,
|
||||
MatTabsModule,
|
||||
MatTooltipModule,
|
||||
MatRippleModule,
|
||||
|
||||
FuseSharedModule
|
||||
],
|
||||
exports : [
|
||||
ChatPanelComponent
|
||||
]
|
||||
})
|
||||
export class ChatPanelModule
|
||||
{
|
||||
}
|
||||
182
src/app/layout/components/chat-panel/chat-panel.service.ts
Normal file
182
src/app/layout/components/chat-panel/chat-panel.service.ts
Normal file
|
|
@ -0,0 +1,182 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
|
||||
import { FuseUtils } from '@fuse/utils';
|
||||
|
||||
@Injectable()
|
||||
export class ChatPanelService
|
||||
{
|
||||
contacts: any[];
|
||||
chats: any[];
|
||||
user: any;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param {HttpClient} _httpClient
|
||||
*/
|
||||
constructor(
|
||||
private _httpClient: HttpClient
|
||||
)
|
||||
{
|
||||
}
|
||||
|
||||
/**
|
||||
* Loader
|
||||
*
|
||||
* @returns {Promise<any> | any}
|
||||
*/
|
||||
loadContacts(): Promise<any> | any
|
||||
{
|
||||
return new Promise((resolve, reject) => {
|
||||
Promise.all([
|
||||
this.getContacts(),
|
||||
this.getUser()
|
||||
]).then(
|
||||
([contacts, user]) => {
|
||||
this.contacts = contacts;
|
||||
this.user = user;
|
||||
resolve();
|
||||
},
|
||||
reject
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get chat
|
||||
*
|
||||
* @param contactId
|
||||
* @returns {Promise<any>}
|
||||
*/
|
||||
getChat(contactId): Promise<any>
|
||||
{
|
||||
const chatItem = this.user.chatList.find((item) => {
|
||||
return item.contactId === contactId;
|
||||
});
|
||||
|
||||
// Get the chat
|
||||
return new Promise((resolve, reject) => {
|
||||
|
||||
// If there is a chat with this user, return that.
|
||||
if ( chatItem )
|
||||
{
|
||||
this._httpClient.get('api/chat-panel-chats/' + chatItem.chatId)
|
||||
.subscribe((chat) => {
|
||||
|
||||
// Resolve the promise
|
||||
resolve(chat);
|
||||
|
||||
}, reject);
|
||||
}
|
||||
// If there is no chat with this user, create one...
|
||||
else
|
||||
{
|
||||
this.createNewChat(contactId).then(() => {
|
||||
|
||||
// and then recall the getChat method
|
||||
this.getChat(contactId).then((chat) => {
|
||||
resolve(chat);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Create new chat
|
||||
*
|
||||
* @param contactId
|
||||
* @returns {Promise<any>}
|
||||
*/
|
||||
createNewChat(contactId): Promise<any>
|
||||
{
|
||||
return new Promise((resolve, reject) => {
|
||||
|
||||
// Generate a new id
|
||||
const chatId = FuseUtils.generateGUID();
|
||||
|
||||
// Prepare the chat object
|
||||
const chat = {
|
||||
id : chatId,
|
||||
dialog: []
|
||||
};
|
||||
|
||||
// Prepare the chat list entry
|
||||
const chatListItem = {
|
||||
chatId : chatId,
|
||||
contactId : contactId,
|
||||
lastMessageTime: '2017-02-18T10:30:18.931Z'
|
||||
};
|
||||
|
||||
// Add new chat list item to the user's chat list
|
||||
this.user.chatList.push(chatListItem);
|
||||
|
||||
// Post the created chat to the server
|
||||
this._httpClient.post('api/chat-panel-chats', {...chat})
|
||||
.subscribe(() => {
|
||||
|
||||
// Post the updated user data to the server
|
||||
this._httpClient.post('api/chat-panel-user/' + this.user.id, this.user)
|
||||
.subscribe(() => {
|
||||
|
||||
// Resolve the promise
|
||||
resolve();
|
||||
});
|
||||
}, reject);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the chat
|
||||
*
|
||||
* @param chatId
|
||||
* @param dialog
|
||||
* @returns {Promise<any>}
|
||||
*/
|
||||
updateChat(chatId, dialog): Promise<any>
|
||||
{
|
||||
return new Promise((resolve, reject) => {
|
||||
|
||||
const newData = {
|
||||
id : chatId,
|
||||
dialog: dialog
|
||||
};
|
||||
|
||||
this._httpClient.post('api/chat-panel-chats/' + chatId, newData)
|
||||
.subscribe(updatedChat => {
|
||||
resolve(updatedChat);
|
||||
}, reject);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get contacts
|
||||
*
|
||||
* @returns {Promise<any>}
|
||||
*/
|
||||
getContacts(): Promise<any>
|
||||
{
|
||||
return new Promise((resolve, reject) => {
|
||||
this._httpClient.get('api/chat-panel-contacts')
|
||||
.subscribe((response: any) => {
|
||||
resolve(response);
|
||||
}, reject);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get user
|
||||
*
|
||||
* @returns {Promise<any>}
|
||||
*/
|
||||
getUser(): Promise<any>
|
||||
{
|
||||
return new Promise((resolve, reject) => {
|
||||
this._httpClient.get('api/chat-panel-user')
|
||||
.subscribe((response: any) => {
|
||||
resolve(response[0]);
|
||||
}, reject);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
<div fxLayout="row" fxLayoutAlign="center center" fxLayoutAlign.gt-xs="space-between center" fxFlex>
|
||||
|
||||
<a href="http://themeforest.net/item/fuse-angularjs-material-design-admin-template/12931855?ref=srcn"
|
||||
<a href="https://1.envato.market/c/1257954/275988/4415?u=https%3A%2F%2Fthemeforest.net%2Fitem%2Ffuse-angularjs-material-design-admin-template%2F12931855"
|
||||
target="_blank" mat-button class="mat-pink-bg" fxFlex="0 0 auto" fxLayout="row"
|
||||
fxLayoutAlign="start center">
|
||||
<mat-icon class="s-16 mr-sm-4">shopping_cart</mat-icon>
|
||||
|
|
@ -16,7 +16,6 @@
|
|||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</mat-toolbar>
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<fuse-navigation layout="horizontal"></fuse-navigation>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
navbar-horizontal-style-1 {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { filter, takeUntil } from 'rxjs/operators';
|
||||
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
|
||||
|
||||
@Component({
|
||||
selector : 'navbar-horizontal-style-1',
|
||||
templateUrl : './style-1.component.html',
|
||||
styleUrls : ['./style-1.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class NavbarHorizontalStyle1Component implements OnInit, OnDestroy
|
||||
{
|
||||
navigation: any;
|
||||
|
||||
// Private
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param {FuseNavigationService} _fuseNavigationService
|
||||
* @param {FuseSidebarService} _fuseSidebarService
|
||||
*/
|
||||
constructor(
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
private _fuseSidebarService: FuseSidebarService
|
||||
)
|
||||
{
|
||||
// Set the private defaults
|
||||
this._unsubscribeAll = new Subject();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
// Get current navigation
|
||||
this._fuseNavigationService.onNavigationChanged
|
||||
.pipe(
|
||||
filter(value => value !== null),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
)
|
||||
.subscribe(() => {
|
||||
this.navigation = this._fuseNavigationService.getCurrentNavigation();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { MatButtonModule, MatIconModule } from '@angular/material';
|
||||
|
||||
import { FuseNavigationModule } from '@fuse/components';
|
||||
import { FuseSharedModule } from '@fuse/shared.module';
|
||||
|
||||
import { NavbarHorizontalStyle1Component } from 'app/layout/components/navbar/horizontal/style-1/style-1.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
NavbarHorizontalStyle1Component
|
||||
],
|
||||
imports : [
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
|
||||
FuseSharedModule,
|
||||
FuseNavigationModule
|
||||
],
|
||||
exports : [
|
||||
NavbarHorizontalStyle1Component
|
||||
]
|
||||
})
|
||||
export class NavbarHorizontalStyle1Module
|
||||
{
|
||||
}
|
||||
|
|
@ -1,39 +1,11 @@
|
|||
<ng-container *ngIf="layout == 'vertical'">
|
||||
|
||||
<div class="navbar-vertical">
|
||||
|
||||
<div class="navbar-header">
|
||||
|
||||
<div class="logo">
|
||||
<img class="logo-icon" src="assets/images/logos/fuse.svg">
|
||||
<span class="logo-text">FUSE</span>
|
||||
</div>
|
||||
|
||||
<button mat-icon-button class="toggle-sidebar-folded"
|
||||
(click)="toggleSidebarFolded()" fxHide.lt-lg>
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
|
||||
<button mat-icon-button class="toggle-sidebar-opened"
|
||||
(click)="toggleSidebarOpened()" fxHide.gt-md>
|
||||
<mat-icon>arrow_back</mat-icon>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="navbar-content" fusePerfectScrollbar
|
||||
[fusePerfectScrollbarOptions]="{suppressScrollX: true}">
|
||||
<fuse-navigation layout="vertical"></fuse-navigation>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="variant === 'horizontal-style-1'">
|
||||
<navbar-horizontal-style-1></navbar-horizontal-style-1>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="layout == 'horizontal'">
|
||||
<ng-container *ngIf="variant === 'vertical-style-1'">
|
||||
<navbar-vertical-style-1></navbar-vertical-style-1>
|
||||
</ng-container>
|
||||
|
||||
<div class="navbar-horizontal">
|
||||
<fuse-navigation layout="horizontal"></fuse-navigation>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
<ng-container *ngIf="variant === 'vertical-style-2'">
|
||||
<navbar-vertical-style-2></navbar-vertical-style-2>
|
||||
</ng-container>
|
||||
|
|
|
|||
|
|
@ -1,81 +1,5 @@
|
|||
@import "src/@fuse/scss/fuse";
|
||||
|
||||
fuse-sidebar {
|
||||
|
||||
&.folded:not(.unfolded) {
|
||||
|
||||
.navbar-vertical {
|
||||
|
||||
.navbar-header {
|
||||
padding: 0 13px;
|
||||
|
||||
.logo {
|
||||
|
||||
.logo-text {
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
navbar {
|
||||
|
||||
&:not(.top-navbar) {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.navbar-vertical {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.navbar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 64px;
|
||||
min-height: 64px;
|
||||
padding: 0 16px 0 24px;
|
||||
transition: padding 200ms ease;
|
||||
background-color: rgba(255, 255, 255, .05);
|
||||
@include mat-elevation(1);
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.logo-icon {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
margin-left: 8px;
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.right-navbar {
|
||||
|
||||
.toggle-sidebar-opened {
|
||||
|
||||
mat-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,4 @@
|
|||
import { Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { Subject } from 'rxjs';
|
||||
import { filter, take, takeUntil } from 'rxjs/operators';
|
||||
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
|
||||
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
|
||||
import { Component, Input, ViewEncapsulation } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'navbar',
|
||||
|
|
@ -13,148 +6,18 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
|
|||
styleUrls : ['./navbar.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class NavbarComponent implements OnInit, OnDestroy
|
||||
export class NavbarComponent
|
||||
{
|
||||
// Layout
|
||||
// Variant
|
||||
@Input()
|
||||
layout;
|
||||
|
||||
fusePerfectScrollbarUpdateTimeout: any;
|
||||
navigation: any;
|
||||
|
||||
// Private
|
||||
private _fusePerfectScrollbar: FusePerfectScrollbarDirective;
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
variant;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param {FuseNavigationService} _fuseNavigationService
|
||||
* @param {FuseSidebarService} _fuseSidebarService
|
||||
* @param {Router} _router
|
||||
*/
|
||||
constructor(
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
private _fuseSidebarService: FuseSidebarService,
|
||||
private _router: Router
|
||||
)
|
||||
constructor()
|
||||
{
|
||||
// Set the defaults
|
||||
this.layout = 'vertical';
|
||||
|
||||
// Set the private defaults
|
||||
this._unsubscribeAll = new Subject();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
// Directive
|
||||
@ViewChild(FusePerfectScrollbarDirective)
|
||||
set directive(theDirective: FusePerfectScrollbarDirective)
|
||||
{
|
||||
if ( !theDirective )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
this._fusePerfectScrollbar = theDirective;
|
||||
|
||||
// Update the scrollbar on collapsable item toggle
|
||||
this._fuseNavigationService.onItemCollapseToggled
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(() => {
|
||||
this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => {
|
||||
this._fusePerfectScrollbar.update();
|
||||
}, 310);
|
||||
});
|
||||
|
||||
// Scroll to the active item position
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter((event) => event instanceof NavigationEnd),
|
||||
take(1)
|
||||
)
|
||||
.subscribe(() => {
|
||||
setTimeout(() => {
|
||||
const activeNavItem: any = document.querySelector('navbar .nav-link.active');
|
||||
|
||||
if ( activeNavItem )
|
||||
{
|
||||
const activeItemOffsetTop = activeNavItem.offsetTop,
|
||||
activeItemOffsetParentTop = activeNavItem.offsetParent.offsetTop,
|
||||
scrollDistance = activeItemOffsetTop - activeItemOffsetParentTop - (48 * 3);
|
||||
|
||||
this._fusePerfectScrollbar.scrollToTop(scrollDistance);
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter((event) => event instanceof NavigationEnd),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
)
|
||||
.subscribe(() => {
|
||||
if ( this._fuseSidebarService.getSidebar('navbar') )
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('navbar').close();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Get current navigation
|
||||
this._fuseNavigationService.onNavigationChanged
|
||||
.pipe(filter(value => value !== null))
|
||||
.subscribe(() => {
|
||||
this.navigation = this._fuseNavigationService.getCurrentNavigation();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
if ( this.fusePerfectScrollbarUpdateTimeout )
|
||||
{
|
||||
clearTimeout(this.fusePerfectScrollbarUpdateTimeout);
|
||||
}
|
||||
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle sidebar opened status
|
||||
*/
|
||||
toggleSidebarOpened(): void
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('navbar').toggleOpen();
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle sidebar folded status
|
||||
*/
|
||||
toggleSidebarFolded(): void
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('navbar').toggleFold();
|
||||
this.variant = 'vertical-style-1';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,22 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { MatButtonModule, MatIconModule } from '@angular/material';
|
||||
|
||||
import { FuseNavigationModule } from '@fuse/components';
|
||||
import { FuseSharedModule } from '@fuse/shared.module';
|
||||
|
||||
import { NavbarComponent } from 'app/layout/components/navbar/navbar.component';
|
||||
import { NavbarHorizontalStyle1Module } from 'app/layout/components/navbar/horizontal/style-1/style-1.module';
|
||||
import { NavbarVerticalStyle1Module } from 'app/layout/components/navbar/vertical/style-1/style-1.module';
|
||||
import { NavbarVerticalStyle2Module } from 'app/layout/components/navbar/vertical/style-2/style-2.module';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
NavbarComponent
|
||||
],
|
||||
imports : [
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
|
||||
FuseSharedModule,
|
||||
FuseNavigationModule
|
||||
|
||||
NavbarHorizontalStyle1Module,
|
||||
NavbarVerticalStyle1Module,
|
||||
NavbarVerticalStyle2Module
|
||||
],
|
||||
exports : [
|
||||
NavbarComponent
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
<div class="navbar-top mat-indigo-700-bg">
|
||||
|
||||
<div class="logo">
|
||||
<img class="logo-icon" src="assets/images/logos/fuse.svg">
|
||||
<span class="logo-text secondary-text">FUSE</span>
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
|
||||
<button mat-icon-button class="toggle-sidebar-folded"
|
||||
(click)="toggleSidebarFolded()" fxHide.lt-lg>
|
||||
<mat-icon class="secondary-text">menu</mat-icon>
|
||||
</button>
|
||||
|
||||
<button mat-icon-button class="toggle-sidebar-opened"
|
||||
(click)="toggleSidebarOpened()" fxHide.gt-md>
|
||||
<mat-icon class="secondary-text">arrow_back</mat-icon>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="navbar-scroll-container" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
|
||||
|
||||
<div class="user mat-indigo-700-bg" fxLayout="column">
|
||||
|
||||
<div class="h3 username">Charlie Adams</div>
|
||||
<div class="h5 email hint-text mt-8">adams.charlie@mail.com</div>
|
||||
<div class="avatar-container" [ngClass]="fuseConfig.layout.navbar.background">
|
||||
<img class="avatar" src="assets/images/avatars/Velazquez.jpg">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="navbar-content">
|
||||
<fuse-navigation layout="vertical"></fuse-navigation>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
@import "src/@fuse/scss/fuse";
|
||||
|
||||
fuse-sidebar {
|
||||
overflow: hidden;
|
||||
|
||||
&.folded:not(.unfolded) {
|
||||
|
||||
navbar {
|
||||
|
||||
navbar-vertical-style-1 {
|
||||
|
||||
.navbar-top {
|
||||
padding: 12px 0;
|
||||
justify-content: center;
|
||||
|
||||
.buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo {
|
||||
|
||||
.logo-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-scroll-container {
|
||||
|
||||
.user {
|
||||
padding: 12px 0;
|
||||
|
||||
.avatar-container {
|
||||
position: relative;
|
||||
top: auto;
|
||||
padding: 0;
|
||||
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.username,
|
||||
.email {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
navbar {
|
||||
|
||||
navbar-vertical-style-1 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.navbar-top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1 0 auto;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 64px;
|
||||
height: 64px;
|
||||
padding: 12px 12px 12px 20px;
|
||||
|
||||
@include media-breakpoint('xs') {
|
||||
min-height: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.logo-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
margin-left: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.4px;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-scroll-container {
|
||||
overflow-y: auto;
|
||||
|
||||
background: linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 30%),
|
||||
linear-gradient(rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 40%);
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 40px, 100% 10px;
|
||||
background-attachment: local, scroll;
|
||||
|
||||
.user {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
padding: 24px 0 64px 0;
|
||||
|
||||
.avatar-container {
|
||||
position: absolute;
|
||||
top: 92px;
|
||||
border-radius: 50%;
|
||||
padding: 8px;
|
||||
|
||||
.avatar {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
flex: 1 1 auto;
|
||||
margin-top: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.right-navbar {
|
||||
|
||||
.toggle-sidebar-opened {
|
||||
|
||||
mat-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { Subject } from 'rxjs';
|
||||
import { filter, take, takeUntil } from 'rxjs/operators';
|
||||
|
||||
import { FuseConfigService } from '@fuse/services/config.service';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
|
||||
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
|
||||
|
||||
@Component({
|
||||
selector : 'navbar-vertical-style-1',
|
||||
templateUrl : './style-1.component.html',
|
||||
styleUrls : ['./style-1.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class NavbarVerticalStyle1Component implements OnInit, OnDestroy
|
||||
{
|
||||
fuseConfig: any;
|
||||
fusePerfectScrollbarUpdateTimeout: any;
|
||||
navigation: any;
|
||||
|
||||
// Private
|
||||
private _fusePerfectScrollbar: FusePerfectScrollbarDirective;
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param {FuseConfigService} _fuseConfigService
|
||||
* @param {FuseNavigationService} _fuseNavigationService
|
||||
* @param {FuseSidebarService} _fuseSidebarService
|
||||
* @param {Router} _router
|
||||
*/
|
||||
constructor(
|
||||
private _fuseConfigService: FuseConfigService,
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
private _fuseSidebarService: FuseSidebarService,
|
||||
private _router: Router
|
||||
)
|
||||
{
|
||||
// Set the private defaults
|
||||
this._unsubscribeAll = new Subject();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
// Directive
|
||||
@ViewChild(FusePerfectScrollbarDirective)
|
||||
set directive(theDirective: FusePerfectScrollbarDirective)
|
||||
{
|
||||
if ( !theDirective )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
this._fusePerfectScrollbar = theDirective;
|
||||
|
||||
// Update the scrollbar on collapsable item toggle
|
||||
this._fuseNavigationService.onItemCollapseToggled
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(() => {
|
||||
this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => {
|
||||
this._fusePerfectScrollbar.update();
|
||||
}, 310);
|
||||
});
|
||||
|
||||
// Scroll to the active item position
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter((event) => event instanceof NavigationEnd),
|
||||
take(1)
|
||||
)
|
||||
.subscribe(() => {
|
||||
setTimeout(() => {
|
||||
const activeNavItem: any = document.querySelector('navbar .nav-link.active');
|
||||
|
||||
if ( activeNavItem )
|
||||
{
|
||||
const activeItemOffsetTop = activeNavItem.offsetTop,
|
||||
activeItemOffsetParentTop = activeNavItem.offsetParent.offsetTop,
|
||||
scrollDistance = activeItemOffsetTop - activeItemOffsetParentTop - (48 * 3) - 168;
|
||||
|
||||
this._fusePerfectScrollbar.scrollToTop(scrollDistance);
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter((event) => event instanceof NavigationEnd),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
)
|
||||
.subscribe(() => {
|
||||
if ( this._fuseSidebarService.getSidebar('navbar') )
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('navbar').close();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Subscribe to the config changes
|
||||
this._fuseConfigService.config
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((config) => {
|
||||
this.fuseConfig = config;
|
||||
});
|
||||
|
||||
// Get current navigation
|
||||
this._fuseNavigationService.onNavigationChanged
|
||||
.pipe(
|
||||
filter(value => value !== null),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
)
|
||||
.subscribe(() => {
|
||||
this.navigation = this._fuseNavigationService.getCurrentNavigation();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
if ( this.fusePerfectScrollbarUpdateTimeout )
|
||||
{
|
||||
clearTimeout(this.fusePerfectScrollbarUpdateTimeout);
|
||||
}
|
||||
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle sidebar opened status
|
||||
*/
|
||||
toggleSidebarOpened(): void
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('navbar').toggleOpen();
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle sidebar folded status
|
||||
*/
|
||||
toggleSidebarFolded(): void
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('navbar').toggleFold();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { MatButtonModule, MatIconModule } from '@angular/material';
|
||||
|
||||
import { FuseNavigationModule } from '@fuse/components';
|
||||
import { FuseSharedModule } from '@fuse/shared.module';
|
||||
|
||||
import { NavbarVerticalStyle1Component } from 'app/layout/components/navbar/vertical/style-1/style-1.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
NavbarVerticalStyle1Component
|
||||
],
|
||||
imports : [
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
|
||||
FuseSharedModule,
|
||||
FuseNavigationModule
|
||||
],
|
||||
exports : [
|
||||
NavbarVerticalStyle1Component
|
||||
]
|
||||
})
|
||||
export class NavbarVerticalStyle1Module
|
||||
{
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<div class="navbar-header">
|
||||
|
||||
<div class="logo">
|
||||
<img class="logo-icon" src="assets/images/logos/fuse.svg">
|
||||
<span class="logo-text">FUSE</span>
|
||||
</div>
|
||||
|
||||
<button mat-icon-button class="toggle-sidebar-folded"
|
||||
(click)="toggleSidebarFolded()" fxHide.lt-lg>
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
|
||||
<button mat-icon-button class="toggle-sidebar-opened"
|
||||
(click)="toggleSidebarOpened()" fxHide.gt-md>
|
||||
<mat-icon>arrow_back</mat-icon>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="navbar-content" fusePerfectScrollbar
|
||||
[fusePerfectScrollbarOptions]="{suppressScrollX: true}">
|
||||
<fuse-navigation layout="vertical"></fuse-navigation>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
@import "src/@fuse/scss/fuse";
|
||||
|
||||
fuse-sidebar {
|
||||
overflow: hidden;
|
||||
|
||||
&.folded:not(.unfolded) {
|
||||
|
||||
navbar {
|
||||
|
||||
navbar-vertical-style-2 {
|
||||
|
||||
.navbar-header {
|
||||
padding: 0 13px;
|
||||
|
||||
.logo {
|
||||
|
||||
.logo-text {
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
navbar {
|
||||
|
||||
navbar-vertical-style-2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.navbar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 64px;
|
||||
min-height: 64px;
|
||||
padding: 0 16px 0 24px;
|
||||
transition: padding 200ms ease;
|
||||
background-color: rgba(255, 255, 255, .05);
|
||||
@include mat-elevation(1);
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.logo-icon {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
margin-left: 8px;
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.right-navbar {
|
||||
|
||||
.toggle-sidebar-opened {
|
||||
|
||||
mat-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { Subject } from 'rxjs';
|
||||
import { filter, take, takeUntil } from 'rxjs/operators';
|
||||
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
|
||||
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
|
||||
|
||||
@Component({
|
||||
selector : 'navbar-vertical-style-2',
|
||||
templateUrl : './style-2.component.html',
|
||||
styleUrls : ['./style-2.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class NavbarVerticalStyle2Component implements OnInit, OnDestroy
|
||||
{
|
||||
fusePerfectScrollbarUpdateTimeout: any;
|
||||
navigation: any;
|
||||
|
||||
// Private
|
||||
private _fusePerfectScrollbar: FusePerfectScrollbarDirective;
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param {FuseNavigationService} _fuseNavigationService
|
||||
* @param {FuseSidebarService} _fuseSidebarService
|
||||
* @param {Router} _router
|
||||
*/
|
||||
constructor(
|
||||
private _fuseNavigationService: FuseNavigationService,
|
||||
private _fuseSidebarService: FuseSidebarService,
|
||||
private _router: Router
|
||||
)
|
||||
{
|
||||
// Set the private defaults
|
||||
this._unsubscribeAll = new Subject();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
// Directive
|
||||
@ViewChild(FusePerfectScrollbarDirective)
|
||||
set directive(theDirective: FusePerfectScrollbarDirective)
|
||||
{
|
||||
if ( !theDirective )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
this._fusePerfectScrollbar = theDirective;
|
||||
|
||||
// Update the scrollbar on collapsable item toggle
|
||||
this._fuseNavigationService.onItemCollapseToggled
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(() => {
|
||||
this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => {
|
||||
this._fusePerfectScrollbar.update();
|
||||
}, 310);
|
||||
});
|
||||
|
||||
// Scroll to the active item position
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter((event) => event instanceof NavigationEnd),
|
||||
take(1)
|
||||
)
|
||||
.subscribe(() => {
|
||||
setTimeout(() => {
|
||||
const activeNavItem: any = document.querySelector('navbar .nav-link.active');
|
||||
|
||||
if ( activeNavItem )
|
||||
{
|
||||
const activeItemOffsetTop = activeNavItem.offsetTop,
|
||||
activeItemOffsetParentTop = activeNavItem.offsetParent.offsetTop,
|
||||
scrollDistance = activeItemOffsetTop - activeItemOffsetParentTop - (48 * 3);
|
||||
|
||||
this._fusePerfectScrollbar.scrollToTop(scrollDistance);
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Lifecycle hooks
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* On init
|
||||
*/
|
||||
ngOnInit(): void
|
||||
{
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter((event) => event instanceof NavigationEnd),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
)
|
||||
.subscribe(() => {
|
||||
if ( this._fuseSidebarService.getSidebar('navbar') )
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('navbar').close();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Get current navigation
|
||||
this._fuseNavigationService.onNavigationChanged
|
||||
.pipe(
|
||||
filter(value => value !== null),
|
||||
takeUntil(this._unsubscribeAll)
|
||||
)
|
||||
.subscribe(() => {
|
||||
this.navigation = this._fuseNavigationService.getCurrentNavigation();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* On destroy
|
||||
*/
|
||||
ngOnDestroy(): void
|
||||
{
|
||||
if ( this.fusePerfectScrollbarUpdateTimeout )
|
||||
{
|
||||
clearTimeout(this.fusePerfectScrollbarUpdateTimeout);
|
||||
}
|
||||
|
||||
// Unsubscribe from all subscriptions
|
||||
this._unsubscribeAll.next();
|
||||
this._unsubscribeAll.complete();
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle sidebar opened status
|
||||
*/
|
||||
toggleSidebarOpened(): void
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('navbar').toggleOpen();
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle sidebar folded status
|
||||
*/
|
||||
toggleSidebarFolded(): void
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('navbar').toggleFold();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { MatButtonModule, MatIconModule } from '@angular/material';
|
||||
|
||||
import { FuseNavigationModule } from '@fuse/components';
|
||||
import { FuseSharedModule } from '@fuse/shared.module';
|
||||
|
||||
import { NavbarVerticalStyle2Component } from 'app/layout/components/navbar/vertical/style-2/style-2.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
NavbarVerticalStyle2Component
|
||||
],
|
||||
imports : [
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
|
||||
FuseSharedModule,
|
||||
FuseNavigationModule
|
||||
],
|
||||
exports : [
|
||||
NavbarVerticalStyle2Component
|
||||
]
|
||||
})
|
||||
export class NavbarVerticalStyle2Module
|
||||
{
|
||||
}
|
||||
|
|
@ -30,8 +30,8 @@
|
|||
<button mat-button [matMenuTriggerFor]="userMenu"
|
||||
class="user-button">
|
||||
<div fxLayout="row" fxLayoutAlign="center center">
|
||||
<img class="avatar" src="assets/images/avatars/profile.jpg">
|
||||
<span class="username mr-12" fxHide fxShow.gt-sm>John Doe</span>
|
||||
<img class="avatar mr-0 mr-sm-16" src="assets/images/avatars/Velazquez.jpg">
|
||||
<span class="username mr-12" fxHide fxShow.gt-sm>Charlie Adams</span>
|
||||
<mat-icon class="s-16" fxHide.xs>keyboard_arrow_down</mat-icon>
|
||||
</div>
|
||||
</button>
|
||||
|
|
@ -83,6 +83,15 @@
|
|||
|
||||
<div class="toolbar-separator" fxHide fxShow.gt-xs></div>
|
||||
|
||||
<button mat-icon-button fxHide.gt-md
|
||||
class="chat-panel-toggle-button"
|
||||
(click)="toggleSidebarOpen('chatPanel')"
|
||||
aria-label="Toggle chat panel">
|
||||
<mat-icon class="icon">chat</mat-icon>
|
||||
</button>
|
||||
|
||||
<div class="toolbar-separator" fxHide.gt-md></div>
|
||||
|
||||
<button mat-icon-button
|
||||
class="quick-panel-toggle-button"
|
||||
(click)="toggleSidebarOpen('quickPanel')"
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@
|
|||
.user-button,
|
||||
fuse-search-bar,
|
||||
.language-button,
|
||||
.chat-panel-toggle-button,
|
||||
.quick-panel-toggle-button {
|
||||
min-width: 64px;
|
||||
height: 64px;
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ export class ToolbarComponent implements OnInit, OnDestroy
|
|||
selectedLanguage: any;
|
||||
showLoadingBar: boolean;
|
||||
userStatusOptions: any[];
|
||||
chatPanelLockedOpen: string;
|
||||
|
||||
// Private
|
||||
private _unsubscribeAll: Subject<any>;
|
||||
|
|
@ -146,6 +147,28 @@ export class ToolbarComponent implements OnInit, OnDestroy
|
|||
this._fuseSidebarService.getSidebar(key).toggleOpen();
|
||||
}
|
||||
|
||||
toggleChatPanel(): void
|
||||
{
|
||||
// Get the chat panel sidebar
|
||||
const chatPanelSidebar = this._fuseSidebarService.getSidebar('chatPanel');
|
||||
|
||||
// Store the original value
|
||||
if ( chatPanelSidebar.lockedOpen !== '' )
|
||||
{
|
||||
this.chatPanelLockedOpen = chatPanelSidebar.lockedOpen;
|
||||
}
|
||||
|
||||
// Toggle
|
||||
if ( chatPanelSidebar.lockedOpen === this.chatPanelLockedOpen )
|
||||
{
|
||||
chatPanelSidebar.lockedOpen = '';
|
||||
}
|
||||
else
|
||||
{
|
||||
chatPanelSidebar.lockedOpen = this.chatPanelLockedOpen;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Search
|
||||
*
|
||||
|
|
|
|||
|
|
@ -55,6 +55,14 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!-- CHAT PANEL -->
|
||||
<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
|
||||
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
|
||||
lockedOpen="gt-md">
|
||||
<chat-panel></chat-panel>
|
||||
</fuse-sidebar>
|
||||
<!-- / CHAT PANEL -->
|
||||
|
||||
<!-- QUICK PANEL -->
|
||||
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
||||
<quick-panel></quick-panel>
|
||||
|
|
@ -81,7 +89,7 @@
|
|||
|
||||
<!-- TOP NAVBAR -->
|
||||
<ng-template #topNavbar>
|
||||
<navbar layout="horizontal"
|
||||
<navbar variant="horizontal-style-1"
|
||||
class="top-navbar" [ngClass]="fuseConfig.layout.navbar.background"
|
||||
fxHide fxShow.gt-md
|
||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
||||
|
|
@ -94,7 +102,8 @@
|
|||
<fuse-sidebar name="navbar"
|
||||
[folded]="fuseConfig.layout.navbar.folded"
|
||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
||||
<navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
|
||||
<navbar [variant]="fuseConfig.layout.navbar.variant"
|
||||
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
|
||||
</fuse-sidebar>
|
||||
</ng-template>
|
||||
<!-- / LEFT NAVBAR -->
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ horizontal-layout-1 {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
min-width: 0;
|
||||
|
||||
// Boxed
|
||||
&.boxed {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { MatSidenavModule } from '@angular/material';
|
|||
import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';
|
||||
import { FuseSharedModule } from '@fuse/shared.module';
|
||||
|
||||
import { ChatPanelModule } from 'app/layout/components/chat-panel/chat-panel.module';
|
||||
import { ContentModule } from 'app/layout/components/content/content.module';
|
||||
import { FooterModule } from 'app/layout/components/footer/footer.module';
|
||||
import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
|
||||
|
|
@ -23,6 +24,7 @@ import { HorizontalLayout1Component } from 'app/layout/horizontal/layout-1/layou
|
|||
FuseSidebarModule,
|
||||
FuseThemeOptionsModule,
|
||||
|
||||
ChatPanelModule,
|
||||
ContentModule,
|
||||
FooterModule,
|
||||
NavbarModule,
|
||||
|
|
|
|||
|
|
@ -67,6 +67,14 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!-- CHAT PANEL -->
|
||||
<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
|
||||
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
|
||||
lockedOpen="gt-md">
|
||||
<chat-panel></chat-panel>
|
||||
</fuse-sidebar>
|
||||
<!-- / CHAT PANEL -->
|
||||
|
||||
<!-- QUICK PANEL -->
|
||||
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
||||
<quick-panel></quick-panel>
|
||||
|
|
@ -97,7 +105,8 @@
|
|||
[folded]="fuseConfig.layout.navbar.folded"
|
||||
lockedOpen="gt-md"
|
||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
||||
<navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
|
||||
<navbar [variant]="fuseConfig.layout.navbar.variant"
|
||||
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
|
||||
</fuse-sidebar>
|
||||
</ng-template>
|
||||
<!-- / LEFT NAVBAR -->
|
||||
|
|
@ -108,7 +117,8 @@
|
|||
[folded]="fuseConfig.layout.navbar.folded"
|
||||
lockedOpen="gt-md"
|
||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
||||
<navbar class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
|
||||
<navbar [variant]="fuseConfig.layout.navbar.variant"
|
||||
class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
|
||||
</fuse-sidebar>
|
||||
</ng-template>
|
||||
<!-- / RIGHT NAVBAR -->
|
||||
|
|
@ -14,6 +14,7 @@ vertical-layout-1 {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
min-width: 0;
|
||||
|
||||
// Boxed
|
||||
&.boxed {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { RouterModule } from '@angular/router';
|
|||
import { FuseSidebarModule } from '@fuse/components';
|
||||
import { FuseSharedModule } from '@fuse/shared.module';
|
||||
|
||||
import { ChatPanelModule } from 'app/layout/components/chat-panel/chat-panel.module';
|
||||
import { ContentModule } from 'app/layout/components/content/content.module';
|
||||
import { FooterModule } from 'app/layout/components/footer/footer.module';
|
||||
import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
|
||||
|
|
@ -22,6 +23,7 @@ import { VerticalLayout1Component } from 'app/layout/vertical/layout-1/layout-1.
|
|||
FuseSharedModule,
|
||||
FuseSidebarModule,
|
||||
|
||||
ChatPanelModule,
|
||||
ContentModule,
|
||||
FooterModule,
|
||||
NavbarModule,
|
||||
|
|
|
|||
|
|
@ -67,6 +67,14 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!-- CHAT PANEL -->
|
||||
<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
|
||||
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
|
||||
lockedOpen="gt-md">
|
||||
<chat-panel></chat-panel>
|
||||
</fuse-sidebar>
|
||||
<!-- / CHAT PANEL -->
|
||||
|
||||
<!-- QUICK PANEL -->
|
||||
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
||||
<quick-panel></quick-panel>
|
||||
|
|
@ -97,7 +105,8 @@
|
|||
[folded]="fuseConfig.layout.navbar.folded"
|
||||
lockedOpen="gt-md"
|
||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
||||
<navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
|
||||
<navbar [variant]="fuseConfig.layout.navbar.variant"
|
||||
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
|
||||
</fuse-sidebar>
|
||||
</ng-template>
|
||||
<!-- / LEFT NAVBAR -->
|
||||
|
|
@ -108,7 +117,8 @@
|
|||
[folded]="fuseConfig.layout.navbar.folded"
|
||||
lockedOpen="gt-md"
|
||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
||||
<navbar class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
|
||||
<navbar [variant]="fuseConfig.layout.navbar.variant"
|
||||
class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
|
||||
</fuse-sidebar>
|
||||
</ng-template>
|
||||
<!-- / RIGHT NAVBAR -->
|
||||
|
|
@ -14,6 +14,7 @@ vertical-layout-2 {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
min-width: 0;
|
||||
|
||||
// Boxed
|
||||
&.boxed {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { RouterModule } from '@angular/router';
|
|||
import { FuseSidebarModule } from '@fuse/components';
|
||||
import { FuseSharedModule } from '@fuse/shared.module';
|
||||
|
||||
import { ChatPanelModule } from 'app/layout/components/chat-panel/chat-panel.module';
|
||||
import { ContentModule } from 'app/layout/components/content/content.module';
|
||||
import { FooterModule } from 'app/layout/components/footer/footer.module';
|
||||
import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
|
||||
|
|
@ -22,6 +23,7 @@ import { VerticalLayout2Component } from 'app/layout/vertical/layout-2/layout-2.
|
|||
FuseSharedModule,
|
||||
FuseSidebarModule,
|
||||
|
||||
ChatPanelModule,
|
||||
ContentModule,
|
||||
FooterModule,
|
||||
NavbarModule,
|
||||
|
|
|
|||
|
|
@ -53,6 +53,14 @@
|
|||
|
||||
</div>
|
||||
|
||||
<!-- CHAT PANEL -->
|
||||
<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
|
||||
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
|
||||
lockedOpen="gt-md">
|
||||
<chat-panel></chat-panel>
|
||||
</fuse-sidebar>
|
||||
<!-- / CHAT PANEL -->
|
||||
|
||||
<!-- QUICK PANEL -->
|
||||
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
||||
<quick-panel></quick-panel>
|
||||
|
|
@ -83,7 +91,8 @@
|
|||
[folded]="fuseConfig.layout.navbar.folded"
|
||||
lockedOpen="gt-md"
|
||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
||||
<navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
|
||||
<navbar [variant]="fuseConfig.layout.navbar.variant"
|
||||
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
|
||||
</fuse-sidebar>
|
||||
</ng-template>
|
||||
<!-- / LEFT NAVBAR -->
|
||||
|
|
@ -94,7 +103,8 @@
|
|||
[folded]="fuseConfig.layout.navbar.folded"
|
||||
lockedOpen="gt-md"
|
||||
*ngIf="!fuseConfig.layout.navbar.hidden">
|
||||
<navbar class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
|
||||
<navbar [variant]="fuseConfig.layout.navbar.variant"
|
||||
class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
|
||||
</fuse-sidebar>
|
||||
</ng-template>
|
||||
<!-- / RIGHT NAVBAR -->
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../../../../@fuse/scss/fuse";
|
||||
@import "src/@fuse/scss/fuse";
|
||||
|
||||
vertical-layout-3 {
|
||||
display: flex;
|
||||
|
|
@ -14,6 +14,7 @@ vertical-layout-3 {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
min-width: 0;
|
||||
|
||||
// Boxed
|
||||
&.boxed {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { RouterModule } from '@angular/router';
|
|||
import { FuseSidebarModule } from '@fuse/components/index';
|
||||
import { FuseSharedModule } from '@fuse/shared.module';
|
||||
|
||||
import { ChatPanelModule } from 'app/layout/components/chat-panel/chat-panel.module';
|
||||
import { ContentModule } from 'app/layout/components/content/content.module';
|
||||
import { FooterModule } from 'app/layout/components/footer/footer.module';
|
||||
import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
|
||||
|
|
@ -22,6 +23,7 @@ import { VerticalLayout3Component } from 'app/layout/vertical/layout-3/layout-3.
|
|||
FuseSharedModule,
|
||||
FuseSidebarModule,
|
||||
|
||||
ChatPanelModule,
|
||||
ContentModule,
|
||||
FooterModule,
|
||||
NavbarModule,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user