purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-10-31 20:03:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

(Theming) Dark theme + Ability to use multiple themes

Browse Source
This commit is contained in:
Sercan Yemen 2018-08-26 18:30:00 +03:00
parent 27dbbef6e1
commit 6960a2ba26
345 changed files with 4490 additions and 2289 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/@fuse/components/countdown/countdown.component.scss
View File

@ -1,4 +1,4 @@
:host {
fuse-countdown {
display: flex;
flex-direction: row;
align-items: center;

17
src/@fuse/components/countdown/countdown.theme.scss Normal file
View File

@ -0,0 +1,17 @@
@mixin fuse-countdown-theme($theme) {
$foreground: map-get($theme, foreground);
fuse-countdown {
.fuse-countdown {
.time {
.title {
color: map-get($foreground, secondary-text);
}
}
}
}
}

1
src/@fuse/components/highlight/highlight.component.scss
View File

@ -1,5 +1,6 @@
:host {
display: block;
width: 100%;
padding: 8px;
background: #263238;
cursor: text;

2
src/@fuse/components/material-color-picker/material-color-picker.theme.scss
View File

@ -1,6 +1,6 @@
@mixin fuse-material-color-picker-theme($theme) {
$background: map_get($theme, background);
$background: map-get($theme, background);
.fuse-material-color-picker-menu {

18
src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.html
View File

@ -1,42 +1,42 @@
<ng-container *ngIf="!item.hidden">
<!-- normal collapse -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && !item.function" matRipple>
<a class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && !item.function">
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.url -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
[target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.externalUrl -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.function -->
<span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
(click)="item.function()" matRipple>
(click)="item.function()">
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</span>
<!-- item.url && item.function -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
(click)="item.function()"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
[routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}">
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.externalUrl && item.function -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
(click)="item.function()"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
@ -52,7 +52,7 @@
<div class="children" [ngClass]="{'open': isOpen}">
<div class="{{fuseConfig.layout.navbar.background}}">
<div class="{{fuseConfig.layout.navbar.primaryBackground}}">
<ng-container *ngFor="let item of item.children">
<fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>

14
src/@fuse/components/navigation/horizontal/item/item.component.html
View File

@ -2,37 +2,37 @@
<!-- item.url -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
[target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.externalUrl -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.function -->
<span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
(click)="item.function()" matRipple>
(click)="item.function()">
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</span>
<!-- item.url && item.function -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
(click)="item.function()"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
[target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.externalUrl && item.function -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
(click)="item.function()"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>

18
src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html
View File

@ -1,45 +1,45 @@
<ng-container *ngIf="!item.hidden">
<!-- normal collapse -->
<!-- normal collapsable -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && !item.function"
(click)="toggleOpen($event)" matRipple>
(click)="toggleOpen($event)">
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.url -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
(click)="toggleOpen($event)"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
[target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.externalUrl -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
(click)="toggleOpen($event)"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.function -->
<span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
(click)="toggleOpen($event);item.function()" matRipple>
(click)="toggleOpen($event);item.function()">
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</span>
<!-- item.url && item.function -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
(click)="toggleOpen($event);item.function()"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
[routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}">
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.externalUrl && item.function -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
(click)="toggleOpen($event);item.function()"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>

14
src/@fuse/components/navigation/vertical/item/item.component.html
View File

@ -2,37 +2,37 @@
<!-- item.url -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
[target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.externalUrl -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.function -->
<span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
(click)="item.function()" matRipple>
(click)="item.function()">
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</span>
<!-- item.url && item.function -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
(click)="item.function()"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'accent']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
[target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.externalUrl && item.function -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
(click)="item.function()"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'">
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>

5
src/@fuse/components/search-bar/search-bar.component.html
View File

@ -1,15 +1,12 @@
<div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}">
<div class="fuse-search-bar-content" [ngClass]="fuseConfig.layout.toolbar.background">
<div class="fuse-search-bar-content">
<label for="fuse-search-bar-input">
<button mat-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
*ngIf="collapsed">
<mat-icon class="s-24 secondary-text">search</mat-icon>
</button>
<!--<span class="fuse-search-bar-loader" fxLayout="row" fxLayoutAlign="center center" *ngIf="!collapsed">
<mat-progress-spinner color="mat-accent" mode="indeterminate"></mat-progress-spinner>
</span>-->
</label>
<input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)"

3
src/@fuse/components/search-bar/search-bar.component.scss
View File

@ -53,8 +53,9 @@
display: none;
flex: 1 0 auto;
min-height: 64px;
background-color: transparent;
font-size: 16px;
background-color: transparent;
color: currentColor;
}
}

11
src/@fuse/components/search-bar/search-bar.theme.scss Normal file
View File

@ -0,0 +1,11 @@
@mixin fuse-search-bar-theme($theme) {
$background: map-get($theme, background);
.fuse-search-bar {
&.expanded {
background-color: map-get($background, background);
}
}
}

4
src/@fuse/components/shortcuts/shortcuts.component.scss
View File

@ -19,6 +19,10 @@
display: flex !important;
flex: 1;
height: 100%;
> div {
flex: 1 1 auto !important;
}
}
}
}

11
src/@fuse/components/shortcuts/shortcuts.theme.scss Normal file
View File

@ -0,0 +1,11 @@
@mixin fuse-shortcuts-theme($theme) {
$background: map-get($theme, background);
#fuse-shortcuts {
&.show-mobile-panel {
background-color: map-get($background, background);
}
}
}

6
src/@fuse/components/sidebar/sidebar.component.scss
View File

@ -15,7 +15,6 @@ fuse-sidebar {
max-width: 280px;
z-index: 1000;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
background: white;
@include media-breakpoint-down('xs') {
min-width: 0 !important;
@ -62,10 +61,5 @@ fuse-sidebar {
left: 0;
right: 0;
z-index: 999;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
&.fuse-sidebar-overlay-invisible {
background-color: transparent;
}
}

1
src/@fuse/components/sidebar/sidebar.component.ts
View File

@ -318,7 +318,6 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
// Get the active status
const isActive = this._observableMedia.isActive(this.lockedOpen);
// If the both status are the same, don't act
if ( this._wasActive === isActive )
{

16
src/@fuse/components/sidebar/sidebar.theme.scss Normal file
View File

@ -0,0 +1,16 @@
@mixin fuse-sidebar-theme($theme) {
$background: map-get($theme, background);
fuse-sidebar {
background: map-get($background, background);
}
.fuse-sidebar-overlay {
background-color: rgba(0, 0, 0, 0.6);
&.fuse-sidebar-overlay-invisible {
background-color: transparent;
}
}
}

119
src/@fuse/components/theme-options/theme-options.component.html
View File

@ -12,6 +12,19 @@
<form [formGroup]="form">
<!-- COLOR THEME -->
<div class="group">
<h2>Color themes</h2>
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="colorTheme">
<mat-radio-button class="mb-12" value="theme-default">Default</mat-radio-button>
<mat-radio-button class="mb-12" value="theme-default-dark">Default Dark</mat-radio-button>
<mat-radio-button class="mb-12" value="theme-yellow-light">Yellow Light</mat-radio-button>
</mat-radio-group>
</div>
<!-- LAYOUT STYLES -->
<div class="group" formGroupName="layout">
@ -79,10 +92,13 @@
<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>
<h3 class="mt-16 mb-8">Primary background:</h3>
<fuse-material-color-picker class="mb-16"
[(selectedClass)]="fuseConfig.layout.navbar.background">
</fuse-material-color-picker>
formControlName="primaryBackground"></fuse-material-color-picker>
<h3 class="mt-16 mb-8">Secondary background:</h3>
<fuse-material-color-picker class="mb-16"
formControlName="secondaryBackground"></fuse-material-color-picker>
</div>
@ -102,10 +118,13 @@
<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>
<mat-checkbox class="mt-24" formControlName="customBackgroundColor">
Use custom background color
</mat-checkbox>
<h3 class="mt-24 mb-8">Background color:</h3>
<fuse-material-color-picker class="mb-16"
[(selectedClass)]="fuseConfig.layout.toolbar.background">
</fuse-material-color-picker>
formControlName="background"></fuse-material-color-picker>
</div>
@ -125,10 +144,13 @@
<mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
</mat-radio-group>
<mat-checkbox class="mt-24" formControlName="customBackgroundColor">
Use custom background color
</mat-checkbox>
<h3 class="mt-24 mb-8">Color:</h3>
<fuse-material-color-picker class="mb-16"
[(selectedClass)]="fuseConfig.layout.footer.background">
</fuse-material-color-picker>
formControlName="background"></fuse-material-color-picker>
</div>
@ -190,10 +212,13 @@
<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>
<h3 class="mt-16 mb-8">Primary background:</h3>
<fuse-material-color-picker class="mb-16"
[(selectedClass)]="fuseConfig.layout.navbar.background">
</fuse-material-color-picker>
formControlName="primaryBackground"></fuse-material-color-picker>
<h3 class="mt-16 mb-8">Secondary background:</h3>
<fuse-material-color-picker class="mb-16"
formControlName="secondaryBackground"></fuse-material-color-picker>
</div>
@ -213,10 +238,13 @@
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
</mat-radio-group>
<h3 class="mt-24 mb-8">Color:</h3>
<mat-checkbox class="mt-24" formControlName="customBackgroundColor">
Use custom background color
</mat-checkbox>
<h3 class="mt-24 mb-8">Background color:</h3>
<fuse-material-color-picker class="mb-16"
[(selectedClass)]="fuseConfig.layout.toolbar.background">
</fuse-material-color-picker>
formControlName="background"></fuse-material-color-picker>
</div>
@ -236,10 +264,13 @@
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
</mat-radio-group>
<h3 class="mt-24 mb-8">Color:</h3>
<mat-checkbox class="mt-24" formControlName="customBackgroundColor">
Use custom background color
</mat-checkbox>
<h3 class="mt-24 mb-8">Background color:</h3>
<fuse-material-color-picker class="mb-16"
[(selectedClass)]="fuseConfig.layout.footer.background">
</fuse-material-color-picker>
formControlName="background"></fuse-material-color-picker>
</div>
@ -301,10 +332,13 @@
<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>
<h3 class="mt-16 mb-8">Primary background:</h3>
<fuse-material-color-picker class="mb-16"
[(selectedClass)]="fuseConfig.layout.navbar.background">
</fuse-material-color-picker>
formControlName="primaryBackground"></fuse-material-color-picker>
<h3 class="mt-16 mb-8">Secondary background:</h3>
<fuse-material-color-picker class="mb-16"
formControlName="secondaryBackground"></fuse-material-color-picker>
</div>
@ -323,10 +357,13 @@
<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>
<mat-checkbox class="mt-24" formControlName="customBackgroundColor">
Use custom background color
</mat-checkbox>
<h3 class="mt-24 mb-8">Background color:</h3>
<fuse-material-color-picker class="mb-16"
[(selectedClass)]="fuseConfig.layout.toolbar.background">
</fuse-material-color-picker>
formControlName="background"></fuse-material-color-picker>
</div>
@ -345,10 +382,13 @@
<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>
<mat-checkbox class="mt-24" formControlName="customBackgroundColor">
Use custom background color
</mat-checkbox>
<h3 class="mt-24 mb-8">Background color:</h3>
<fuse-material-color-picker class="mb-16"
[(selectedClass)]="fuseConfig.layout.footer.background">
</fuse-material-color-picker>
formControlName="background"></fuse-material-color-picker>
</div>
@ -405,9 +445,14 @@
<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>
<h3 class="mt-16 mb-8">Primary background:</h3>
<fuse-material-color-picker class="mb-16"
[(selectedClass)]="fuseConfig.layout.navbar.background">
formControlName="primaryBackground">
</fuse-material-color-picker>
<h3 class="mt-16 mb-8">Secondary background (Vertical):</h3>
<fuse-material-color-picker class="mb-16"
formControlName="secondaryBackground">
</fuse-material-color-picker>
</div>
@ -427,10 +472,13 @@
<mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
</mat-radio-group>
<h3 class="mt-24 mb-8">Color:</h3>
<mat-checkbox class="mt-24" formControlName="customBackgroundColor">
Use custom background color
</mat-checkbox>
<h3 class="mt-24 mb-8">Background color:</h3>
<fuse-material-color-picker class="mb-16"
[(selectedClass)]="fuseConfig.layout.toolbar.background">
</fuse-material-color-picker>
formControlName="background"></fuse-material-color-picker>
</div>
@ -449,10 +497,13 @@
<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>
<mat-checkbox class="mt-24" formControlName="customBackgroundColor">
Use custom background color
</mat-checkbox>
<h3 class="mt-24 mb-8">Background color:</h3>
<fuse-material-color-picker class="mb-16"
[(selectedClass)]="fuseConfig.layout.footer.background">
</fuse-material-color-picker>
formControlName="background"></fuse-material-color-picker>
</div>

6
src/@fuse/components/theme-options/theme-options.component.scss
View File

@ -9,7 +9,7 @@
}
}
:host {
fuse-theme-options {
display: flex;
overflow: hidden;
@ -45,7 +45,6 @@
flex: 1 0 auto;
flex-direction: column;
position: relative;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 2px;
padding: 28px 16px 8px 16px;
margin: 16px 0;
@ -58,14 +57,11 @@
padding: 0 8px;
font-size: 16px;
font-weight: 500;
background: white;
color: rgba(0, 0, 0, 0.54);
}
h3 {
font-size: 14px;
font-weight: 500;
color: rgba(0, 0, 0, 0.54);
margin: 24px 0 16px 0;
padding: 0;

140
src/@fuse/components/theme-options/theme-options.component.ts
View File

@ -1,5 +1,6 @@
import { Component, HostBinding, OnDestroy, OnInit, Renderer2 } from '@angular/core';
import { Component, HostBinding, Inject, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { DOCUMENT } from '@angular/common';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@ -9,10 +10,11 @@ import { FuseNavigationService } from '@fuse/components/navigation/navigation.se
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@Component({
selector : 'fuse-theme-options',
templateUrl: './theme-options.component.html',
styleUrls : ['./theme-options.component.scss'],
animations : fuseAnimations
selector : 'fuse-theme-options',
templateUrl : './theme-options.component.html',
styleUrls : ['./theme-options.component.scss'],
encapsulation: ViewEncapsulation.None,
animations : fuseAnimations
})
export class FuseThemeOptionsComponent implements OnInit, OnDestroy
{
@ -28,6 +30,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
/**
* Constructor
*
* @param {DOCUMENT} document
* @param {FormBuilder} _formBuilder
* @param {FuseConfigService} _fuseConfigService
* @param {FuseNavigationService} _fuseNavigationService
@ -35,6 +38,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
* @param {Renderer2} _renderer
*/
constructor(
@Inject(DOCUMENT) private document: any,
private _formBuilder: FormBuilder,
private _fuseConfigService: FuseConfigService,
private _fuseNavigationService: FuseNavigationService,
@ -61,25 +65,29 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
// Build the config form
// noinspection TypeScriptValidateTypes
this.form = this._formBuilder.group({
colorTheme : new FormControl(),
layout : this._formBuilder.group({
style : new FormControl(),
width : new FormControl(),
navbar : this._formBuilder.group({
background: new FormControl(),
folded : new FormControl(),
hidden : new FormControl(),
position : new FormControl(),
variant : new FormControl()
primaryBackground : new FormControl(),
secondaryBackground: new FormControl(),
folded : new FormControl(),
hidden : new FormControl(),
position : new FormControl(),
variant : new FormControl()
}),
toolbar : this._formBuilder.group({
background: new FormControl(),
hidden : new FormControl(),
position : new FormControl()
background : new FormControl(),
customBackgroundColor: new FormControl(),
hidden : new FormControl(),
position : new FormControl()
}),
footer : this._formBuilder.group({
background: new FormControl(),
hidden : new FormControl(),
position : new FormControl()
background : new FormControl(),
customBackgroundColor: new FormControl(),
hidden : new FormControl(),
position : new FormControl()
}),
sidepanel: this._formBuilder.group({
hidden : new FormControl(),
@ -179,21 +187,24 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
layout: {
width : 'fullwidth',
navbar : {
background: 'mat-fuse-dark-700-bg',
folded : false,
hidden : false,
position : 'left',
variant : 'vertical-style-1'
primaryBackground : 'fuse-navy-700',
secondaryBackground: 'indigo-600',
folded : false,
hidden : false,
position : 'left',
variant : 'vertical-style-1'
},
toolbar : {
background: 'mat-white-500-bg',
hidden : false,
position : 'below-static'
background : 'fuse-white-500',
customBackgroundColor: false,
hidden : false,
position : 'below-static'
},
footer : {
background: 'mat-fuse-dark-900-bg',
hidden : false,
position : 'below-static'
background : 'fuse-navy-900',
customBackgroundColor: true,
hidden : false,
position : 'below-static'
},
sidepanel: {
hidden : false,
@ -212,21 +223,24 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
layout: {
width : 'fullwidth',
navbar : {
background: 'mat-fuse-dark-700-bg',
folded : false,
hidden : false,
position : 'left',
variant : 'vertical-style-1'
primaryBackground : 'fuse-navy-700',
secondaryBackground: 'indigo-600',
folded : false,
hidden : false,
position : 'left',
variant : 'vertical-style-1'
},
toolbar : {
background: 'mat-white-500-bg',
hidden : false,
position : 'below'
background : 'fuse-white-500',
customBackgroundColor: false,
hidden : false,
position : 'below'
},
footer : {
background: 'mat-fuse-dark-900-bg',
hidden : false,
position : 'below'
background : 'fuse-navy-900',
customBackgroundColor: true,
hidden : false,
position : 'below'
},
sidepanel: {
hidden : false,
@ -245,21 +259,24 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
layout: {
width : 'fullwidth',
navbar : {
background: 'mat-fuse-dark-700-bg',
folded : false,
hidden : false,
position : 'left',
layout : 'vertical-style-1'
primaryBackground : 'fuse-navy-700',
secondaryBackground: 'indigo-600',
folded : false,
hidden : false,
position : 'left',
layout : 'vertical-style-1'
},
toolbar : {
background: 'mat-white-500-bg',
hidden : false,
position : 'above-static'
background : 'fuse-white-500',
customBackgroundColor: false,
hidden : false,
position : 'above-static'
},
footer : {
background: 'mat-fuse-dark-900-bg',
hidden : false,
position : 'above-static'
background : 'fuse-navy-900',
customBackgroundColor: true,
hidden : false,
position : 'above-static'
},
sidepanel: {
hidden : false,
@ -278,21 +295,24 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
layout: {
width : 'fullwidth',
navbar : {
background: 'mat-fuse-dark-700-bg',
folded : false,
hidden : false,
position : 'top',
variant : 'vertical-style-1'
primaryBackground : 'fuse-navy-700',
secondaryBackground: 'indigo-600',
folded : false,
hidden : false,
position : 'top',
variant : 'vertical-style-1'
},
toolbar : {
background: 'mat-white-500-bg',
hidden : false,
position : 'above'
background : 'fuse-white-500',
customBackgroundColor: false,
hidden : false,
position : 'above'
},
footer : {
background: 'mat-fuse-dark-900-bg',
hidden : false,
position : 'above-fixed'
background : 'fuse-navy-900',
customBackgroundColor: true,
hidden : false,
position : 'above-fixed'
},
sidepanel: {
hidden : false,

5
src/@fuse/components/theme-options/theme-options.module.ts
View File

@ -2,11 +2,11 @@ import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule } from '@angular/material';
import { MatButtonModule, MatCheckboxModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule } from '@angular/material';
import { FuseDirectivesModule } from '@fuse/directives/directives';
import { FuseSidebarModule } from '@fuse/components/sidebar/sidebar.module';
import { FuseMaterialColorPickerModule } from '@fuse/components/material-color-picker/material-color-picker.module';
import { FuseSidebarModule } from '@fuse/components/sidebar/sidebar.module';
import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-options.component';
@ -22,6 +22,7 @@ import { FuseThemeOptionsComponent } from '@fuse/components/theme-options/theme-
FlexLayoutModule,
MatButtonModule,
MatCheckboxModule,
MatDividerModule,
MatFormFieldModule,
MatIconModule,

27
src/@fuse/components/theme-options/theme-options.theme.scss Normal file
View File

@ -0,0 +1,27 @@
@mixin fuse-theme-options-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
fuse-theme-options {
.theme-options-panel {
form {
.group {
border: 1px solid map-get($foreground, divider);
h2 {
background: map-get($background, background);
color: map-get($foreground, secondary-text);
}
h3 {
color: map-get($foreground, secondary-text);
}
}
}
}
}
}

13
src/@fuse/components/widget/widget.theme.scss Normal file
View File

@ -0,0 +1,13 @@
@mixin fuse-widget-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
fuse-widget {
> .fuse-widget-front,
> .fuse-widget-back {
background: map-get($background, card);
}
}
}

12
src/@fuse/mat-colors/index.ts
View File

@ -4,6 +4,7 @@ const black12 = 'rgba(black, 0.12)';
const white12 = 'rgba(white, 0.12)';
const black6 = 'rgba(black, 0.06)';
const white6 = 'rgba(white, 0.06)';
const matColors = {
'red': {
50 : '#ffebee',
@ -635,7 +636,8 @@ const matColors = {
A700: white87
}
},
'fuse-dark': {
'fuse-navy': {
50 : '#ECECEE',
100 : '#C5C6CB',
200 : '#9EA1A9',
@ -667,13 +669,15 @@ const matColors = {
A700: white87
}
},
white : {
'fuse-white': {
500 : 'white',
contrast: {
500: black87
}
},
black : {
'fuse-black': {
500 : 'black',
contrast: {
500: 'white'
@ -693,7 +697,6 @@ const matPresetColors = [
export class MatColors
{
public static all = matColors;
public static presets = matPresetColors;
public static getColor(colorName)
@ -702,6 +705,7 @@ export class MatColors
{
return matColors[colorName];
}
return false;
}
}

9
src/@fuse/scss/core.scss
View File

@ -10,15 +10,12 @@
// Fuse
@import "fuse";
// Theme
@import "theme";
// Include core Angular Material styles
@include mat-core();
// Setup the typography
@include angular-material-typography($typography);
// Create an Angular Material theme from the $theme map
@include angular-material-theme($theme);
// Partials
@import "partials/reset";
@import "partials/normalize";

6
src/@fuse/scss/fuse.scss
View File

@ -1,5 +1,5 @@
// Material theming
@import "theming";
// Material theming tools
@import '~@angular/material/theming';
// Breakpoint mixins
@import "mixins/breakpoints";
@import "mixins/breakpoints";

2
src/@fuse/scss/mixins/_breakpoints.scss
View File

@ -25,7 +25,7 @@ $grid-breakpoints: (
@mixin media-breakpoint($breakpointName) {
$mediaQuery: map_get($breakpoints, $breakpointName);
$mediaQuery: map-get($breakpoints, $breakpointName);
@if ($mediaQuery != null) {

6
src/@fuse/scss/partials/_angular-material-fix.scss
View File

@ -12,10 +12,6 @@
}
// Fix: "Inconsistent font sizes across elements"
.mat-form-field-wrapper {
font-size: 16px;
}
.mat-checkbox {
font-size: 16px;
}
@ -34,7 +30,7 @@
background-color: rgba(0, 0, 0, 0.12);
}
// Fix: "Some idiots using table-cell and inline-table in mat-select"
// Fix: "Table-cell and inline-table in mat-select"
.mat-form-field {
&.mat-form-field-type-mat-select {

26
src/@fuse/scss/partials/_cards.scss
View File

@ -1,7 +1,26 @@
// -----------------------------------------------------------------------------------------------------
// @ Theming
// -----------------------------------------------------------------------------------------------------
@mixin cards-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
.fuse-card {
background: map-get($background, card);
.card-divider {
border-top: 1px solid map-get($foreground, divider);
}
}
}
// -----------------------------------------------------------------------------------------------------
// @ Cards
// -----------------------------------------------------------------------------------------------------
.fuse-card {
max-width: 320px;
min-width: 320px;
background: white;
border-radius: 2px;
@include mat-elevation(2);
@ -37,13 +56,8 @@
// Divider
.card-divider {
border-top: 1px solid rgba(0, 0, 0, 0.12);
margin: 16px;
&.light {
border-top-color: rgba(255, 255, 255, 0.12);
}
&.full-width {
margin: 0;
}

197
src/@fuse/scss/partials/_colors.scss
View File

@ -1,23 +1,52 @@
.secondary-text,
.icon,
i {
color: rgba(0, 0, 0, 0.54);
// -----------------------------------------------------------------------------------------------------
// @ Theming
// -----------------------------------------------------------------------------------------------------
@mixin colors-theme($theme) {
$is-dark: map-get($theme, is-dark);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
// Base colors
& {
color: map-get($foreground, text);
// If it's a light theme, use a darker background
// color other than the default #fafafa
@if ($is-dark == false) {
background: #F5F5F5;
} @else {
background: map-get($background, background);
}
}
.secondary-text {
color: map-get($foreground, secondary-text);
}
.icon,
i {
color: map-get($foreground, icon);
}
.hint-text {
color: map-get($foreground, hint-text);
}
.disabled-text {
color: map-get($foreground, disabled-text);
}
.fade-text,
.divider {
color: map-get($foreground, divider);
}
}
.hint-text,
.disabled-text {
color: rgba(0, 0, 0, 0.38);
}
.divider {
color: rgba(0, 0, 0, 0.12);
}
// Material colors map
// -----------------------------------------------------------------------------------------------------
// @ Material colors map
// -----------------------------------------------------------------------------------------------------
$matPalettes: (
primary: $primary,
accent: $accent,
warn: $warn,
red: $mat-red,
pink: $mat-pink,
purple: $mat-purple,
@ -36,17 +65,16 @@ $matPalettes: (
deep-orange: $mat-deep-orange,
brown: $mat-brown,
grey: $mat-grey,
blue-grey: $mat-blue-grey,
white: $mat-white,
black: $mat-black,
fuse-dark: $mat-fusedark
blue-grey: $mat-blue-grey
);
// Material color hues list
$matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
// Text color levels generator mixin
@mixin generateTextColorLevels($classes, $contrast) {
// -----------------------------------------------------------------------------------------------------
// @ Text color levels generator
// -----------------------------------------------------------------------------------------------------
@mixin generate-text-color-levels($classes, $contrast) {
// If the contrast is dark...
@if ($contrast == 'dark') {
@ -125,7 +153,10 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
}
}
@mixin generateMaterialElementColors($classes, $contrast) {
// -----------------------------------------------------------------------------------------------------
// @ Material element colors generator
// -----------------------------------------------------------------------------------------------------
@mixin generate-material-element-colors($classes, $contrast) {
// If the contrast color is light...
$fuseForeground: (
@ -150,53 +181,55 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
// Native Input
input[type="text"] {
color: map_get($fuseForeground, base);
color: map-get($fuseForeground, base);
}
// Input
.mat-form-field-label {
color: map_get($fuseForeground, hint-text);
color: map-get($fuseForeground, hint-text);
}
.mat-form-field-underline {
background-color: map_get($fuseForeground, divider);
background-color: map-get($fuseForeground, divider);
}
// Select
.mat-select-trigger,
.mat-select-arrow {
color: map_get($fuseForeground, hint-text);
color: map-get($fuseForeground, hint-text);
}
.mat-select-underline {
background-color: map_get($fuseForeground, divider);
background-color: map-get($fuseForeground, divider);
}
.mat-select-disabled .mat-select-value,
.mat-select-arrow,
.mat-select-trigger {
color: map_get($fuseForeground, hint-text);
color: map-get($fuseForeground, hint-text);
}
.mat-select-content,
.mat-select-panel-done-animating {
background: map_get($background, card);
//background: map-get($background, card);
}
.mat-select-value {
color: map_get($fuseForeground, text);
color: map-get($fuseForeground, text);
}
}
}
// Color classes generator mixin
@mixin generateColorClasses($colorName, $color, $contrastColor, $hue) {
// -----------------------------------------------------------------------------------------------------
// @ Color classes generator
// -----------------------------------------------------------------------------------------------------
@mixin generate-color-classes($colorName, $color, $contrastColor, $hue) {
.#{$colorName}#{$hue}-bg {
background-color: $color !important;
}
.mat-#{$colorName}#{$hue}-bg {
.#{$colorName}#{$hue} {
background-color: $color !important;
color: $contrastColor !important;
@ -231,13 +264,10 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
}
}
@mixin generateFuseColorClasses($primary, $accent, $warn) {
$palettes: (
primary: $primary,
accent: $accent,
warn: $warn
);
// -----------------------------------------------------------------------------------------------------
// @ Fuse color classes
// -----------------------------------------------------------------------------------------------------
@mixin fuse-color-classes($palettes) {
// Define contrast lists
$light-contrasting-classes: ();
@ -258,32 +288,32 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
@if ($color != null and $contrast != null) {
// Generate color classes
@include generateColorClasses($paletteName, $color, $contrast, '-#{$hue}');
@include generate-color-classes($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');
$dark-contrasting-classes: append($dark-contrasting-classes, unquote('.#{$paletteName}-#{$hue}'), 'comma');
}
// if the contrast color is light
@else {
$light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
$light-contrasting-classes: append($light-contrasting-classes, unquote('.#{$paletteName}-#{$hue}'), 'comma');
}
// Run the generator one more time for default values (500)
@if ($hue == 500) {
// Generate color classes
@include generateColorClasses($paletteName, $color, $contrast, '');
@include generate-color-classes($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');
$dark-contrasting-classes: append($dark-contrasting-classes, unquote('.#{$paletteName}'), 'comma');
}
// if the contrast color is light
@else {
$light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
$light-contrasting-classes: append($light-contrasting-classes, unquote('.#{$paletteName}'), 'comma');
}
}
}
@ -291,68 +321,13 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
}
// 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');
@include generate-text-color-levels($dark-contrasting-classes, 'dark');
@include generate-text-color-levels($light-contrasting-classes, 'light');
@include generate-material-element-colors($dark-contrasting-classes, 'dark');
@include generate-material-element-colors($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 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 Fuse color classes for default Material palettes
// -----------------------------------------------------------------------------------------------------
@include fuse-color-classes($matPalettes);

1
src/@fuse/scss/partials/_global.scss
View File

@ -9,7 +9,6 @@ body {
margin: 0;
padding: 0;
overflow: hidden;
background: #F5F5F5;
}
body {

2
src/@fuse/scss/partials/_helpers.scss
View File

@ -199,7 +199,7 @@ $border-style: 1px solid rgba(0, 0, 0, 0.12);
}
.border-horizontal,
.b-x {
.bx {
border-left: $border-style;
border-right: $border-style;
}

240
src/@fuse/scss/partials/_material.scss
View File

@ -1,6 +1,169 @@
/*----------------------------------------------------------------*/
/* Avatars
/*----------------------------------------------------------------*/
// -----------------------------------------------------------------------------------------------------
// @ Theming
// -----------------------------------------------------------------------------------------------------
@mixin material-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
// -----------------------------------------------------------------------------------------------------
// @ Avatar
// -----------------------------------------------------------------------------------------------------
.avatar {
color: map-get($foreground, text);
}
// -----------------------------------------------------------------------------------------------------
// @ Forms
// -----------------------------------------------------------------------------------------------------
.form-wrapper {
background-color: map-get($background, card);
}
// -----------------------------------------------------------------------------------------------------
// @ Navigation - Simple
// -----------------------------------------------------------------------------------------------------
.navigation-simple {
.item {
&.selected {
background-color: map-get($background, hover);
}
}
.subheader {
border-top: 1px solid map-get($foreground, divider);
}
}
// -----------------------------------------------------------------------------------------------------
// @ Pagination - Simple
// -----------------------------------------------------------------------------------------------------
.simple-pagination {
background: map-get($background, card);
.pagination-item {
color: map-get($foreground, secondary-text);
&:hover {
color: map-get($foreground, text);
}
&.disabled {
color: map-get($foreground, disabled-text);
}
}
}
// -----------------------------------------------------------------------------------------------------
// @ Price tables
// -----------------------------------------------------------------------------------------------------
.price-tables {
.price-table {
background: map-get($background, card);
&.style-1 {
.price {
.currency {
color: map-get($foreground, secondary-text);
}
.period {
color: map-get($foreground, secondary-text);
}
}
}
&.style-2 {
.price {
.currency {
color: map-get($foreground, secondary-text);
}
}
.period {
color: map-get($foreground, secondary-text);
}
}
&.style-3 {
.package-type {
.subtitle {
color: map-get($foreground, secondary-text);
}
}
.terms {
color: map-get($foreground, secondary-text);
}
.note {
color: map-get($foreground, secondary-text);
}
}
}
}
// -------------------------------------------------------------------------------------------------
// @ Table - Simple
// -------------------------------------------------------------------------------------------------
.simple-table-container {
background: map-get($background, card);
}
table {
&.simple {
thead {
tr {
th {
color: map-get($foreground, secondary-text);
border-bottom: 1px solid map-get($foreground, divider);
}
}
}
tbody {
tr {
td {
border-bottom: 1px solid map-get($foreground, divider);
}
}
}
&.clickable {
tbody {
tr {
&:hover {
background-color: map-get($background, hover);
}
}
}
}
}
}
}
// -----------------------------------------------------------------------------------------------------
// @ Avatar
// -----------------------------------------------------------------------------------------------------
.avatar {
width: 40px;
min-width: 40px;
@ -11,7 +174,6 @@
font-size: 17px;
font-weight: 500;
text-align: center;
color: #FFFFFF;
&.square {
border-radius: 0;
@ -58,6 +220,7 @@ mat-icon.status {
&.online {
color: #4CAF50;
&:before {
content: "check_circle";
}
@ -65,6 +228,7 @@ mat-icon.status {
&.do-not-disturb {
color: #F44336;
&:before {
content: "do_not_disturb_on";
}
@ -73,6 +237,7 @@ mat-icon.status {
&.away {
background-color: #FFC107;
color: #FFFFFF;
&:before {
content: "access_time";
}
@ -81,17 +246,17 @@ mat-icon.status {
&.offline {
color: #646464;
background-color: #FFFFFF;
&:before {
content: "not_interested";
}
}
}
/*----------------------------------------------------------------*/
/* Forms
/*----------------------------------------------------------------*/
// -----------------------------------------------------------------------------------------------------
// @ Forms
// -----------------------------------------------------------------------------------------------------
.form-wrapper {
background: #FFFFFF;
padding: 16px;
.form-title {
@ -100,9 +265,9 @@ mat-icon.status {
}
}
/*----------------------------------------------------------------*/
/* Navigation - Simple
/*----------------------------------------------------------------*/
// -----------------------------------------------------------------------------------------------------
// @ Navigation - Simple
// -----------------------------------------------------------------------------------------------------
.navigation-simple {
.item {
@ -125,21 +290,12 @@ mat-icon.status {
font-weight: 500;
line-height: 1;
}
&.selected {
background-color: rgba(0, 0, 0, 0.06);
}
}
.subheader {
font-size: 13px;
border-top: 1px solid rgba(0, 0, 0, 0.12);
font-weight: 500;
margin-top: 8px;
&.light {
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
}
mat-divider {
@ -147,15 +303,14 @@ mat-icon.status {
}
}
/*----------------------------------------------------------------*/
/* Pagination
/*----------------------------------------------------------------*/
// -----------------------------------------------------------------------------------------------------
// @ Pagination - Simple
// -----------------------------------------------------------------------------------------------------
.simple-pagination {
position: relative;
display: inline-flex;
flex-direction: row;
@include mat-elevation(1);
background-color: #FFFFFF;
padding: 0 8px;
.pagination-item {
@ -168,32 +323,24 @@ mat-icon.status {
border-radius: 0;
margin: 0;
font-weight: normal;
color: rgba(0, 0, 0, 0.54);
&:hover {
color: rgba(0, 0, 0, 0.87);
}
&.active {
cursor: default;
color: rgba(0, 0, 0, 0.87);
}
&.disabled {
cursor: default;
color: rgba(0, 0, 0, 0.26);
}
}
}
/*----------------------------------------------------------------*/
/* Price Tables
/*----------------------------------------------------------------*/
// -----------------------------------------------------------------------------------------------------
// @ Price tables
// -----------------------------------------------------------------------------------------------------
.price-tables {
.price-table {
position: relative;
background-color: #FFFFFF;
width: 280px;
border-radius: 2px;
margin: 12px;
@ -218,7 +365,6 @@ mat-icon.status {
padding-right: 4px;
font-size: 24px;
font-weight: 500;
color: rgba(0, 0, 0, 0.54);
}
.value {
@ -230,7 +376,6 @@ mat-icon.status {
.period {
padding: 0 0 5px 4px;
font-size: 17px;
color: rgba(0, 0, 0, 0.54);
}
}
@ -279,7 +424,6 @@ mat-icon.status {
padding-right: 4px;
font-size: 24px;
font-weight: 500;
color: rgba(0, 0, 0, 0.54);
}
.value {
@ -293,7 +437,6 @@ mat-icon.status {
padding: 0 32px;
font-size: 15px;
font-weight: 500;
color: rgba(0, 0, 0, 0.54);
text-align: center;
}
@ -328,7 +471,6 @@ mat-icon.status {
.subtitle {
font-size: 17px;
color: rgba(0, 0, 0, 0.54);
font-weight: 500;
}
}
@ -357,7 +499,6 @@ mat-icon.status {
.terms {
margin: 32px;
font-size: 15px;
color: rgba(0, 0, 0, 0.54);
.term {
padding-bottom: 16px;
@ -375,17 +516,15 @@ mat-icon.status {
.note {
padding: 8px 32px 16px 32px;
text-align: center;
color: rgba(0, 0, 0, 0.54);
}
}
}
}
/*----------------------------------------------------------------*/
/* Table - Simple
/*----------------------------------------------------------------*/
// -----------------------------------------------------------------------------------------------------
// @ Table - Simple
// -----------------------------------------------------------------------------------------------------
.simple-table-container {
background: #FFFFFF;
.table-title {
font-size: 20px;
@ -408,8 +547,6 @@ table {
th {
padding: 16px 8px;
font-weight: 500;
color: rgba(0, 0, 0, 0.54);
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
white-space: nowrap;
&:first-child {
@ -429,7 +566,6 @@ table {
td {
padding: 16px 8px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
&:first-child {
padding-left: 24px;
@ -455,12 +591,8 @@ table {
tr {
cursor: pointer;
&:hover {
background: rgba(0, 0, 0, 0.03);
}
}
}
}
}
}
}

4
src/@fuse/scss/partials/_navigation.scss
View File

@ -64,11 +64,11 @@
}
&:hover {
background-color: map-get($background, hover);
background-color: rgba(0, 0, 0, 0.04);
}
.mat-ripple-element {
background-color: map-get($background, hover);
background-color: rgba(0, 0, 0, 0.04);
}
&.active {

87
src/@fuse/scss/partials/_page-layouts.scss
View File

@ -1,4 +1,83 @@
// Page Layouts
// -----------------------------------------------------------------------------------------------------
// @ Theming
// -----------------------------------------------------------------------------------------------------
@mixin page-layouts-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
.page-layout {
// Carded layout
&.carded {
// Fullwidth
&.fullwidth {
> .center {
> .content-card {
background: map-get($background, card);
> .toolbar {
border-bottom-color: map-get($foreground, divider);
}
}
}
}
// Left / Right sidebar
&.left-sidebar,
&.right-sidebar {
> .center {
> .content-card {
background: map-get($background, card);
> .toolbar {
border-bottom-color: map-get($foreground, divider);
}
}
}
}
}
// Simple layout
&.simple {
// Left / Right sidebar
&.left-sidebar,
&.right-sidebar {
> .center {
> .content {
background: map-get($background, card);
}
}
// Inner sidebar
&.inner-sidebar {
> .content {
> .center {
> .content {
background: map-get($background, card);
}
}
}
}
}
}
}
}
// -----------------------------------------------------------------------------------------------------
// @ Page Layouts
// -----------------------------------------------------------------------------------------------------
$carded-header-height: 200px !default;
$carded-header-height-sm: 160px !default;
$carded-toolbar-height: 64px !default;
@ -75,7 +154,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
border-bottom: 1px solid;
height: $carded-toolbar-height;
min-height: $carded-toolbar-height;
max-height: $carded-toolbar-height;
@ -273,7 +352,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
justify-content: flex-start;
align-items: center;
flex: 1 1 auto;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
border-bottom: 1px solid;
height: $carded-toolbar-height;
min-height: $carded-toolbar-height;
max-height: $carded-toolbar-height;
@ -516,7 +595,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
}
}
// Inner Sidebar
// Inner sidebar
&.inner-sidebar {
flex-direction: column;
overflow: hidden;

68
src/@fuse/scss/partials/_typography.scss
View File

@ -1,3 +1,44 @@
// -----------------------------------------------------------------------------------------------------
// @ Theming
// -----------------------------------------------------------------------------------------------------
@mixin typography-theme($theme) {
$background: map-get($theme, background);
$accent: map-get($theme, accent);
$is-dark: map-get($theme, is-dark);
a {
color: map-get($accent, default);
}
code {
&:not(.highlight) {
background-color: map-get($background, app-bar);
}
}
.changelog {
.entry {
background-color: map-get($background, card);
}
}
.text-boxed {
@if ($is-dark) {
background-color: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.54);
} @else {
background-color: rgba(0, 0, 0, 0.12);
color: rgba(0, 0, 0, 0.54);
}
}
}
// -----------------------------------------------------------------------------------------------------
// @ Typography
// -----------------------------------------------------------------------------------------------------
html {
font-size: 62.5%;
font-family: 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
@ -46,7 +87,6 @@ h6, .h6 {
// Links
a {
color: mat-color($accent);
text-decoration: none;
&:not(.mat-button):not(.mat-raised-button):not(.mat-icon-button) {
@ -103,11 +143,10 @@ code {
font-family: 'Monaco', 'Menlo', 'Consolas', 'Ubuntu Mono', monospace;;
&:not(.highlight) {
background: rgba(0, 0, 0, 0.065);
color: #106CC8;
margin: 0 1px;
padding: 2px 3px;
border-radius: 2px;
line-height: 1.7;
}
}
@ -237,6 +276,7 @@ strong {
line-height: 1.25;
}
.line-height-1\.5,
.line-height-1\.50 {
line-height: 1.5;
}
@ -245,6 +285,19 @@ strong {
line-height: 1.75;
}
// Letter spacing helpers
.letter-spacing-condensed {
letter-spacing: -0.02em;
}
.letter-spacing-normal {
letter-spacing: normal;
}
.letter-spacing-relaxed {
letter-spacing: 0.02em;
}
// Boxed text
.text-boxed {
border-radius: 2px;
@ -252,17 +305,9 @@ strong {
margin: 0 8px;
font-size: 11px;
font-weight: 500;
color: rgba(0, 0, 0, 0.54);
background-color: rgba(0, 0, 0, 0.12);
white-space: nowrap;
}
// Boxed text light
.text-boxed-light {
@extend .text-boxed;
background-color: rgba(255, 255, 255, 0.7);
}
// Truncate
.text-truncate {
display: block;
@ -280,7 +325,6 @@ strong {
.changelog {
.entry {
background: white;
margin-bottom: 24px;
padding: 24px 32px;
@include mat-elevation(2);

361
src/@fuse/scss/partials/plugins/_ng-pick-datetime.scss
View File

@ -1,361 +0,0 @@
/*@font-face {
font-family: 'fontello';
src: url('../font/fontello.eot?81091010');
src: url('../font/fontello.eot?81091010#iefix') format('embedded-opentype'),
url('../font/fontello.woff2?81091010') format('woff2'),
url('../font/fontello.woff?81091010') format('woff'),
url('../font/fontello.ttf?81091010') format('truetype'),
url('../font/fontello.svg?81091010#fontello') format('svg');
font-weight: normal;
font-style: normal;
}*/
owl-date-time {
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "Material Icons";
font-style: normal;
font-weight: normal;
speak: none;
display: flex;
align-items: center;
justify-content: center;
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-cancel:before {
content: 'close';
}
.icon-up-open:before {
content: 'keyboard_arrow_up';
}
.icon-down-open:before {
content: 'keyboard_arrow_down';
}
.icon-left-open:before {
content: 'chevron_left';
}
.icon-right-open:before {
content: 'chevron_right';
}
$white: #FFFFFF;
$black: #000000;
$grey: #DDDDDD;
$blue: #0070BA;
.owl-widget,
.owl-widget * {
box-sizing: border-box;
}
.owl-widget {
font-size: 1em;
}
.owl-state-focus {
}
.owl-corner-all {
border-radius: 2px;
}
.owl-corner-top {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.owl-state-default {
background: #FFFFFF;
color: rgba(0, 0, 0, 0.87);
}
.owl-dateTime-inputWrapper {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
.owl-dateTime-input {
background: none !important;
padding: 0 !important;
cursor: pointer;
.owl-inputtext {
margin: 0;
padding: 8px;
background: none !important;
color: rgba(0, 0, 0, 0.87);
}
}
.owl-dateTime-cancel {
position: relative !important;
right: 0 !important;
top: 0 !important;
transform: none !important;
font-size: 16px !important;
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
min-height: 16px !important;
line-height: 16px !important;
color: rgba(0, 0, 0, 0.54) !important;
}
}
.owl-dateTime {
position: relative;
width: 140px;
&.owl-dateTime-inline {
width: auto;
.owl-dateTime-dialog {
position: relative;
z-index: auto;
}
}
}
.owl-dateTime-dialog {
width: 256px;
user-select: none;
z-index: 99999;
top: 24px !important;
right: 0 !important;
left: auto !important;
@include mat-elevation(4);
}
.owl-dateTime-dialogHeader {
height: 2.5em;
padding: .25em;
background-color: rgba(0, 0, 0, .1);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.owl-calendar-wrapper {
padding: 16px !important;
}
.owl-calendar-control {
.owl-calendar-controlNav {
display: flex;
align-items: center;
justify-content: center;
.nav-prev,
.nav-next {
display: flex;
&:before {
font-family: "Material Icons";
position: relative !important;
right: 0 !important;
top: 0 !important;
transform: none !important;
font-size: 20px !important;
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
line-height: 20px !important;
content: "chevron_left";
color: rgba(0, 0, 0, 0.54);
}
}
.nav-next:before {
content: "chevron_right";
}
}
.owl-calendar-controlContent {
.month-control,
.year-control {
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
.month-control {
margin-right: 8px;
}
.year-control {
}
}
}
.owl-calendar {
table {
border-spacing: 0 !important;
}
tbody td {
&.owl-calendar-selected {
background-color: $blue;
color: $white;
}
&.owl-calendar-invalid {
color: #ACACAC;
}
&.owl-calendar-outFocus {
color: $grey;
}
&.owl-calendar-hidden {
visibility: hidden;
}
&:not(.owl-calendar-selected):not(.owl-calendar-invalid):hover {
background-color: lighten($blue, 50%);
color: $black;
}
}
}
.owl-years,
.owl-months {
td.owl-year,
td.owl-month {
padding: 0;
font-size: 16px;
width: 72px;
height: 48px;
line-height: 48px;
cursor: pointer;
}
}
.owl-calendar-yearArrow {
width: 24px !important;
height: 24px !important;
&.left {
left: -16px !important;
}
&.right {
right: -16px !important;
}
}
.owl-weekdays {
th.owl-weekday {
height: 32px;
line-height: 32px;
text-align: center;
font-size: 12px;
padding: 0;
color: rgba(0, 0, 0, 0.37);
}
}
.owl-days {
td.owl-day {
height: 32px;
width: 32px;
line-height: 32px;
cursor: pointer;
border-radius: 100%;
padding: 0;
&.owl-day-today:before {
content: '';
display: block;
position: absolute;
right: 2px;
top: 2px;
border-top: .5em solid lighten($blue, 20%);
border-left: .5em solid transparent;
}
}
}
.owl-timer-wrapper {
height: 88px;
padding: 8px !important;
background-color: rgba(0, 0, 0, 0.06);
.owl-timer-input {
background: none;
width: 100% !important;
text-align: center;
}
.owl-timer-text {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 40%;
font-size: 20px;
}
.owl-meridian-btn {
font-size: .8em;
color: $blue;
background-image: none;
background-color: transparent;
border-color: $blue;
&:hover {
color: $white;
background-color: $blue;
border-color: $blue;
}
}
}
.owl-timer-divider {
display: inline-block;
position: absolute;
width: 8px;
height: 100%;
left: -2px;
.owl-timer-dot {
display: block;
background: rgba(0, 0, 0, 0.37);
width: 3px;
height: 3px;
position: absolute;
left: 50%;
border-radius: 100%;
transform: translateX(-50%);
&.dot-top {
top: 40%;
}
&.dot-bottom {
bottom: 40%;
}
}
}
}

93
src/@fuse/scss/partials/plugins/_ngx-datatable.scss
View File

@ -1,3 +1,76 @@
// -----------------------------------------------------------------------------------------------------
// @ Theming
// -----------------------------------------------------------------------------------------------------
@mixin ngx-datatable-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
ngx-datatable {
&.material {
background: map-get($background, card);
color: map-get($foreground, text);
.datatable-header {
.datatable-header-cell {
color: map-get($foreground, secondary-text);
}
}
.datatable-body {
.datatable-row-wrapper {
border-bottom-color: map-get($foreground, divider);
&:first-child {
border-top-color: map-get($foreground, divider);
}
.datatable-body-row {
.datatable-body-cell {
color: map-get($foreground, text);
}
}
}
}
.datatable-footer {
color: map-get($foreground, secondary-text);
.datatable-pager {
a {
color: map-get($foreground, secondary-text);
}
}
}
&:not(.cell-selection) {
.datatable-body {
.datatable-row-wrapper {
.datatable-body-row {
&:hover {
background-color: map-get($background, hover);
.datatable-row-group {
background-color: map-get($background, hover);
}
}
}
}
}
}
}
}
}
.ngx-datatable {
&.material {
@ -42,12 +115,11 @@
}
.datatable-row-wrapper {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
border-bottom: 1px solid;
&:first-child {
border-top: 1px solid rgba(0, 0, 0, 0.12);
border-top: 1px solid;
}
.datatable-body-cell {
display: inline-flex;
align-items: center;
@ -118,48 +190,63 @@
.datatable-icon-filter:before {
content: "filter_list";
}
.datatable-icon-collapse:before {
content: "unfold_less";
}
.datatable-icon-expand:before {
content: "unfold_more";
}
.datatable-icon-close:before {
content: "close";
}
.datatable-icon-up:before {
content: "keyboard_arrow_up";
}
.datatable-icon-down:before {
content: "keyboard_arrow_down";
}
.datatable-icon-sort:before {
content: "sort";
}
.datatable-icon-done:before {
content: "done";
}
.datatable-icon-done-all:before {
content: "done_all";
}
.datatable-icon-search:before {
content: "search";
}
.datatable-icon-pin:before {
content: "lock";
}
.datatable-icon-add:before {
content: "add";
}
.datatable-icon-left:before {
content: "chevron_left";
}
.datatable-icon-right:before {
content: "chevron_right";
}
.datatable-icon-skip:before {
content: "skip_next";
}
.datatable-icon-prev:before {
content: "skip_previous";
}

30
src/@fuse/scss/theme.scss Normal file
View File

@ -0,0 +1,30 @@
@import "src/@fuse/components/countdown/countdown.theme";
@import "src/@fuse/components/material-color-picker/material-color-picker.theme";
@import "src/@fuse/components/search-bar/search-bar.theme";
@import "src/@fuse/components/shortcuts/shortcuts.theme";
@import "src/@fuse/components/sidebar/sidebar.theme";
@import "src/@fuse/components/theme-options/theme-options.theme";
@import "src/@fuse/components/widget/widget.theme";
@mixin fuse-core-theme($theme) {
// Theming for Fuse core styles
@include colors-theme($theme);
@include cards-theme($theme);
@include material-theme($theme);
@include page-layouts-theme($theme);
@include typography-theme($theme);
// Theming for Fuse components
@include fuse-countdown-theme($theme);
@include fuse-search-bar-theme($theme);
@include fuse-shortcuts-theme($theme);
@include fuse-sidebar-theme($theme);
@include fuse-theme-options-theme($theme);
@include fuse-material-color-picker-theme($theme);
@include fuse-widget-theme($theme);
// Theming for 3rd party components
@include ngx-datatable-theme($theme);
}

66
src/@fuse/scss/theming.scss
View File

@ -1,66 +0,0 @@
@import '~@angular/material/theming';
// Custom color maps
$mat-white: (
500: white,
contrast: (
500: $black-87-opacity
)
);
$mat-black: (
500: black,
contrast: (
500: white,
)
);
$mat-fusedark: (
50: #ECECEE,
100: #C5C6CB,
200: #9EA1A9,
300: #7D818C,
400: #5C616F,
500: #3C4252,
600: #353A48,
700: #2D323E,
800: #262933,
900: #1E2129,
A100: #C5C6CB,
A200: #9EA1A9,
A400: #5C616F,
A700: #2D323E,
contrast: (
50: $black-87-opacity,
100: $black-87-opacity,
200: $black-87-opacity,
300: white,
400: white,
500: $white-87-opacity,
600: $white-87-opacity,
700: $white-87-opacity,
800: $white-87-opacity,
900: $white-87-opacity,
A100: $black-87-opacity,
A200: $white-87-opacity,
A400: $white-87-opacity,
A700: $white-87-opacity,
)
);
// Define the Material palettes
$primary: mat-palette($mat-fusedark);
$accent: mat-palette($mat-light-blue, 600, 400, 700);
$warn: mat-palette($mat-red);
// Create the Material theme object
$theme: mat-light-theme($primary, $accent, $warn);
// Store the background and foreground colors for easier access
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
// Force the input field font sizes to 16px
$typography: mat-typography-config(
$input: mat-typography-level(16px, 1.125, 400)
)

6
src/@fuse/types/fuse-config.ts
View File

@ -1,21 +1,25 @@
export interface FuseConfig
{
colorTheme: string;
layout: {
style: string,
width: 'fullwidth' | 'boxed',
navbar: {
background: string,
primaryBackground: string,
secondaryBackground: string,
hidden: boolean,
folded: boolean,
position: 'left' | 'right' | 'top',
variant: string
},
toolbar: {
customBackgroundColor: boolean,
background: string,
hidden: boolean,
position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed'
}
footer: {
customBackgroundColor: boolean,
background: string,
hidden: boolean,
position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed'

4
src/app/app.component.html
View File

@ -27,7 +27,7 @@
<!-- / HORIZONTAL LAYOUT 1 -->
<!-- THEME OPTIONS PANEL -->
<button mat-icon-button class="mat-primary-bg mat-elevation-z2 theme-options-button"
<button mat-icon-button class="warn mat-elevation-z2 theme-options-button"
[ngClass]="{'right-side-panel': fuseConfig.layout.sidepanel.position === 'right',
'side-panel-hidden': fuseConfig.layout.sidepanel.hidden === true}"
(click)="toggleSidebarOpen('themeOptionsPanel')">
@ -37,4 +37,4 @@
<fuse-sidebar name="themeOptionsPanel" class="theme-options-sidebar" position="right" [invisibleOverlay]="true">
<fuse-theme-options></fuse-theme-options>
</fuse-sidebar>
<!-- / THEME OPTIONS PANEL -->
<!-- / THEME OPTIONS PANEL -->

12
src/app/app.component.ts
View File

@ -125,8 +125,10 @@ export class AppComponent implements OnInit, OnDestroy
this._fuseConfigService.config
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((config) => {
this.fuseConfig = config;
// Boxed
if ( this.fuseConfig.layout.width === 'boxed' )
{
this.document.body.classList.add('boxed');
@ -135,6 +137,16 @@ export class AppComponent implements OnInit, OnDestroy
{
this.document.body.classList.remove('boxed');
}
// Color theme
this.document.body.classList.forEach(className => {
if ( className.startsWith('theme-') )
{
this.document.body.classList.remove(className);
}
});
this.document.body.classList.add(this.fuseConfig.colorTheme);
});
}

264
src/app/app.theme.scss Normal file
View File

@ -0,0 +1,264 @@
// -----------------------------------------------------------------------------------------------------
// @ Custom color maps for Fuse
// -----------------------------------------------------------------------------------------------------
$fuse-white: (
500: white,
contrast: (
500: $dark-primary-text
)
);
$fuse-black: (
500: black,
contrast: (
500: $light-primary-text,
)
);
$fuse-navy: (
50: #ECECEE,
100: #C5C6CB,
200: #9EA1A9,
300: #7D818C,
400: #5C616F,
500: #3C4252,
600: #353A48,
700: #2D323E,
800: #262933,
900: #1E2129,
A100: #C5C6CB,
A200: #9EA1A9,
A400: #5C616F,
A700: #2D323E,
contrast: (
50: $dark-primary-text,
100: $dark-primary-text,
200: $dark-primary-text,
300: $light-primary-text,
400: $light-primary-text,
500: $light-primary-text,
600: $light-primary-text,
700: $light-primary-text,
800: $light-primary-text,
900: $light-primary-text,
A100: $dark-primary-text,
A200: $light-primary-text,
A400: $light-primary-text,
A700: $light-primary-text,
)
);
// Generate Fuse color classes for custom palettes
$custom_palettes: (
fuse-white: $fuse-white,
fuse-black: $fuse-black,
fuse-navy: $fuse-navy
);
@include fuse-color-classes($custom_palettes);
// -----------------------------------------------------------------------------------------------------
// @ Typography
// -----------------------------------------------------------------------------------------------------
// Force the input field font sizes to 16px
$typography: mat-typography-config(
$input: mat-typography-level(16px, 1.125, 400)
);
// Setup the typography
@include angular-material-typography($typography);
// -----------------------------------------------------------------------------------------------------
// @ Component theming
// -----------------------------------------------------------------------------------------------------
// Import app and page component themes here to enable theming for them
@import "src/app/layout/components/chat-panel/chat-panel.theme";
@import "src/app/layout/components/toolbar/toolbar.theme";
@import "src/app/main/apps/academy/academy.theme";
@import "src/app/main/apps/calendar/calendar.theme";
@import "src/app/main/apps/chat/chat.theme";
@import "src/app/main/apps/contacts/contacts.theme";
@import "src/app/main/apps/dashboards/project/project.theme";
@import "src/app/main/apps/file-manager/file-manager.theme";
@import "src/app/main/apps/mail/mail.theme";
@import "src/app/main/apps/mail-ngrx/mail.theme";
@import "src/app/main/apps/scrumboard/scrumboard.theme";
@import "src/app/main/apps/todo/todo.theme";
@import "src/app/main/pages/authentication/login/login.theme";
@import "src/app/main/pages/authentication/login-2/login-2.theme";
@import "src/app/main/pages/authentication/register/register.theme";
@import "src/app/main/pages/authentication/register-2/register-2.theme";
@import "src/app/main/pages/authentication/reset-password/reset-password.theme";
@import "src/app/main/pages/authentication/reset-password-2/reset-password-2.theme";
@import "src/app/main/pages/authentication/forgot-password/forgot-password.theme";
@import "src/app/main/pages/authentication/forgot-password-2/forgot-password-2.theme";
@import "src/app/main/pages/authentication/lock/lock.theme";
@import "src/app/main/pages/authentication/mail-confirm/mail-confirm.theme";
@import "src/app/main/pages/coming-soon/coming-soon.theme";
@import "src/app/main/pages/errors/404/error-404.theme";
@import "src/app/main/pages/errors/500/error-500.theme";
@import "src/app/main/pages/maintenance/maintenance.theme";
@import "src/app/main/pages/pricing/style-1/style-1.theme";
@import "src/app/main/pages/pricing/style-2/style-2.theme";
@import "src/app/main/pages/pricing/style-3/style-3.theme";
@import "src/app/main/pages/profile/tabs/about/about.theme";
@import "src/app/main/pages/profile/tabs/photos-videos/photos-videos.theme";
@import "src/app/main/pages/profile/tabs/timeline/timeline.theme";
@import "src/app/main/pages/faq/faq.theme";
@import "src/app/main/pages/knowledge-base/knowledge-base.theme";
@import "src/app/main/documentation/components/cards/cards.theme";
// Define a mixin for easier access
@mixin components-theme($theme) {
// Layout components
@include chat-panel-theme($theme);
@include toolbar-theme($theme);
// Apps
@include academy-theme($theme);
@include calendar-theme($theme);
@include chat-theme($theme);
@include contacts-theme($theme);
@include dashboards-project-theme($theme);
@include file-manager-theme($theme);
@include mail-theme($theme);
@include mail-ngrx-theme($theme);
@include scrumboard-theme($theme);
@include todo-theme($theme);
// Pages
@include login-theme($theme);
@include login-2-theme($theme);
@include register-theme($theme);
@include register-2-theme($theme);
@include reset-password-theme($theme);
@include reset-password-2-theme($theme);
@include forgot-password-theme($theme);
@include forgot-password-2-theme($theme);
@include lock-theme($theme);
@include mail-confirm-theme($theme);
@include coming-soon-theme($theme);
@include error-404-theme($theme);
@include error-500-theme($theme);
@include maintenance-theme($theme);
@include pricing-style-1-theme($theme);
@include pricing-style-2-theme($theme);
@include pricing-style-3-theme($theme);
@include profile-about-theme($theme);
@include profile-photos-videos-theme($theme);
@include profile-timeline-theme($theme);
@include faq-theme($theme);
@include knowledge-base-theme($theme);
// Docs
@include docs-components-cards-theme($theme);
}
// -----------------------------------------------------------------------------------------------------
// @ Define the default theme
// -----------------------------------------------------------------------------------------------------
// Define the primary, accent and warn palettes
$default-primary-palette: mat-palette($fuse-navy);
$default-accent-palette: mat-palette($mat-light-blue, 600, 400, 700);
$default-warn-palette: mat-palette($mat-red);
// Create the Material theme object
$theme: mat-light-theme($default-primary-palette, $default-accent-palette, $default-warn-palette);
// Add ".theme-default" class to the body to activate this theme
body.theme-default {
// Create an Angular Material theme from the $theme map
@include angular-material-theme($theme);
// Apply the theme to the Fuse Core
@include fuse-core-theme($theme);
// Apply the theme to the user components
@include components-theme($theme);
// Generate Fuse color classes for primary, accent and warn colors
$custom-palettes: (
primary: $default-primary-palette,
accent: $default-accent-palette,
warn: $default-warn-palette
);
@include fuse-color-classes($custom-palettes);
}
// -----------------------------------------------------------------------------------------------------
// @ Define the default dark theme
// -----------------------------------------------------------------------------------------------------
// Define the primary, accent and warn palettes
$default-dark-theme-primary-palette: mat-palette($mat-blue, 600, 400, 700);
$default-dark-theme-accent-palette: mat-palette($mat-blue-gray);
$default-dark-theme-warn-palette: mat-palette($mat-red);
// Create the Material theme object
$default-dark-theme: mat-dark-theme($default-dark-theme-primary-palette, $default-dark-theme-accent-palette, $default-dark-theme-warn-palette);
// Add ".theme-default-dark" class to the body to activate this theme
body.theme-default-dark {
// Generate the Angular Material theme
@include angular-material-theme($default-dark-theme);
// Apply the theme to the Fuse Core
@include fuse-core-theme($default-dark-theme);
// Apply the theme to the user components
@include components-theme($default-dark-theme);
// Generate Fuse color classes for primary, accent and warn colors
$custom-palettes: (
primary: $default-dark-theme-primary-palette,
accent: $default-dark-theme-accent-palette,
warn: $default-dark-theme-warn-palette
);
@include fuse-color-classes($custom-palettes);
}
// -----------------------------------------------------------------------------------------------------
// @ Define the yellow light theme
// -----------------------------------------------------------------------------------------------------
// Define the primary, accent and warn palettes
$yellow-light-theme-primary-palette: mat-palette($fuse-navy, 600, 400, 700);
$yellow-light-theme-accent-palette: mat-palette($mat-yellow, 600, 400, 700);
$yellow-light-theme-warn-palette: mat-palette($mat-red);
// Create the Material theme object
$yellow-light-theme: mat-light-theme($yellow-light-theme-primary-palette, $yellow-light-theme-accent-palette, $yellow-light-theme-warn-palette);
// Add ".theme-yellow-light" class to the body to activate this theme
body.theme-yellow-light {
// Generate the Angular Material theme
@include angular-material-theme($yellow-light-theme);
// Apply the theme to the Fuse Core
@include fuse-core-theme($yellow-light-theme);
// Apply the theme to the user components
@include components-theme($yellow-light-theme);
// Generate Fuse color classes for primary, accent and warn colors
$custom-palettes: (
primary: $yellow-light-theme-primary-palette,
accent: $yellow-light-theme-accent-palette,
warn: $yellow-light-theme-warn-palette
);
@include fuse-color-classes($custom-palettes);
}

51
src/app/fake-db/chat.ts
View File

@ -6,21 +6,21 @@ export class ChatFakeDb
'name' : 'Alice Freeman',
'avatar': 'assets/images/avatars/alice.jpg',
'status': 'online',
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
},
{
'id' : '5725a680606588342058356d',
'name' : 'Arnold',
'avatar': 'assets/images/avatars/Arnold.jpg',
'status': 'do-not-disturb',
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
'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...',
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
'unread': null
},
{
@ -28,7 +28,7 @@ export class ChatFakeDb
'name' : 'Blair',
'avatar': 'assets/images/avatars/Blair.jpg',
'status': 'offline',
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
'unread': 3
},
{
@ -36,112 +36,112 @@ export class ChatFakeDb
'name' : 'Boyle',
'avatar': 'assets/images/avatars/Boyle.jpg',
'status': 'offline',
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
},
{
'id' : '5725a68031fdbb1db2c1af47',
'name' : 'Christy',
'avatar': 'assets/images/avatars/Christy.jpg',
'status': 'offline',
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
'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...'
'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...'
'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...'
'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...'
'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...'
'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...'
'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...'
'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...'
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
},
{
'id' : '5725a6808a178bfd034d6ecf',
'name' : 'Mai',
'avatar': 'assets/images/avatars/Mai.jpg',
'status': 'away',
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
'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...'
'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...'
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
},
{
'id' : '5725a6803d87f1b77e17b62b',
'name' : 'Odessa',
'avatar': 'assets/images/avatars/Odessa.jpg',
'status': 'away',
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
},
{
'id' : '5725a680e87cb319bd9bd673',
'name' : 'Reyna',
'avatar': 'assets/images/avatars/Reyna.jpg',
'status': 'offline',
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
'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...',
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
'unread': null
},
{
@ -149,7 +149,7 @@ export class ChatFakeDb
'name' : 'Shepard',
'avatar': 'assets/images/avatars/Shepard.jpg',
'status': 'online',
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
},
{
'id' : '5725a680cd7efa56a45aea5d',
@ -163,21 +163,21 @@ export class ChatFakeDb
'name' : 'Trevino',
'avatar': 'assets/images/avatars/Trevino.jpg',
'status': 'away',
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
'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...'
'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...'
'mood' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
}
];
@ -302,6 +302,7 @@ export class ChatFakeDb
'contactId' : '5725a680b3249760ea21de52',
'name' : 'Alice Freeman',
'unread' : 4,
'lastMessage' : 'You are the worst!',
'lastMessageTime': '2017-06-12T02:10:18.931Z'
},
{
@ -309,6 +310,7 @@ export class ChatFakeDb
'contactId' : '5725a680b8d240c011dd224b',
'name' : 'Josefina',
'unread' : null,
'lastMessage' : 'We are losing money! Quick!',
'lastMessageTime': '2017-02-18T10:30:18.931Z'
},
{
@ -316,6 +318,7 @@ export class ChatFakeDb
'contactId' : '5725a6809413bf8a0a5272b1',
'name' : 'Velazquez',
'unread' : 2,
'lastMessage' : 'Quickly come to the meeting room 1B, we have a big server issue',
'lastMessageTime': '2017-03-18T12:30:18.931Z'
}
]

6
src/app/fake-db/dashboard-project.ts
View File

@ -1654,7 +1654,7 @@ export class ProjectDashboardDb
[
{
'value' : 'Design',
'classes': 'mat-green-bg',
'classes': 'green',
'icon' : ''
},
{
@ -1686,7 +1686,7 @@ export class ProjectDashboardDb
[
{
'value' : 'Coding',
'classes': 'mat-red-bg',
'classes': 'red',
'icon' : ''
},
{
@ -1750,7 +1750,7 @@ export class ProjectDashboardDb
[
{
'value' : 'Extra',
'classes': 'mat-orange-bg',
'classes': 'orange',
'icon' : ''
},
{

80
src/app/fake-db/e-commerce.ts
View File

@ -1622,13 +1622,13 @@ export class ECommerceFakeDb
{
'id' : 13,
'name' : 'On pre-order (not paid)',
'color': 'mat-purple-300-bg',
'color': 'purple-300',
'date' : '2016/04/03 10:06:18'
},
{
'id' : 1,
'name' : 'Awaiting check payment',
'color': 'mat-blue-500-bg',
'color': 'blue-500',
'date' : '2015/03/17 18:28:37'
}
],
@ -1706,13 +1706,13 @@ export class ECommerceFakeDb
{
'id' : 2,
'name' : 'Payment accepted',
'color': 'mat-green-500-bg',
'color': 'green-500',
'date' : '2015/10/04 08:54:33'
},
{
'id' : 1,
'name' : 'Awaiting check payment',
'color': 'mat-blue-500-bg',
'color': 'blue-500',
'date' : '2015/05/03 03:43:04'
}
],
@ -1790,13 +1790,13 @@ export class ECommerceFakeDb
{
'id' : 8,
'name' : 'Payment error',
'color': 'mat-red-900-bg',
'color': 'red-900',
'date' : '2015/07/02 20:44:34'
},
{
'id' : 3,
'name' : 'Preparing the order',
'color': 'mat-orange-500-bg',
'color': 'orange-500',
'date' : '2015/03/23 04:59:45'
}
],
@ -1874,13 +1874,13 @@ export class ECommerceFakeDb
{
'id' : 5,
'name' : 'Delivered',
'color': 'mat-green-800-bg',
'color': 'green-800',
'date' : '2015/10/26 16:12:47'
},
{
'id' : 4,
'name' : 'Shipped',
'color': 'mat-purple-500-bg',
'color': 'purple-500',
'date' : '2016/02/06 06:42:37'
}
],
@ -1958,13 +1958,13 @@ export class ECommerceFakeDb
{
'id' : 8,
'name' : 'Payment error',
'color': 'mat-red-900-bg',
'color': 'red-900',
'date' : '2015/02/01 09:21:46'
},
{
'id' : 6,
'name' : 'Canceled',
'color': 'mat-pink-500-bg',
'color': 'pink-500',
'date' : '2015/11/16 04:48:32'
}
],
@ -2042,13 +2042,13 @@ export class ECommerceFakeDb
{
'id' : 3,
'name' : 'Preparing the order',
'color': 'mat-orange-500-bg',
'color': 'orange-500',
'date' : '2015/11/30 01:04:32'
},
{
'id' : 2,
'name' : 'Payment accepted',
'color': 'mat-green-500-bg',
'color': 'green-500',
'date' : '2015/11/12 21:27:18'
}
],
@ -2126,13 +2126,13 @@ export class ECommerceFakeDb
{
'id' : 11,
'name' : 'Awaiting PayPal payment',
'color': 'mat-blue-500-bg',
'color': 'blue-500',
'date' : '2015/09/03 18:53:02'
},
{
'id' : 13,
'name' : 'On pre-order (not paid)',
'color': 'mat-purple-300-bg',
'color': 'purple-300',
'date' : '2015/12/13 18:14:40'
}
],
@ -2210,13 +2210,13 @@ export class ECommerceFakeDb
{
'id' : 4,
'name' : 'Shipped',
'color': 'mat-purple-500-bg',
'color': 'purple-500',
'date' : '2015/04/29 07:57:43'
},
{
'id' : 3,
'name' : 'Preparing the order',
'color': 'mat-orange-500-bg',
'color': 'orange-500',
'date' : '2015/04/23 11:14:38'
}
],
@ -2294,13 +2294,13 @@ export class ECommerceFakeDb
{
'id' : 12,
'name' : 'Remote payment accepted',
'color': 'mat-green-500-bg',
'color': 'green-500',
'date' : '2015/07/15 15:48:00'
},
{
'id' : 14,
'name' : 'Awaiting Cash-on-delivery payment',
'color': 'mat-blue-500-bg',
'color': 'blue-500',
'date' : '2015/11/08 18:30:15'
}
],
@ -2378,13 +2378,13 @@ export class ECommerceFakeDb
{
'id' : 5,
'name' : 'Delivered',
'color': 'mat-green-800-bg',
'color': 'green-800',
'date' : '2016/05/02 09:53:55'
},
{
'id' : 2,
'name' : 'Payment accepted',
'color': 'mat-green-500-bg',
'color': 'green-500',
'date' : '2015/07/11 05:33:31'
}
],
@ -2462,13 +2462,13 @@ export class ECommerceFakeDb
{
'id' : 9,
'name' : 'On pre-order (paid)',
'color': 'mat-purple-300-bg',
'color': 'purple-300',
'date' : '2016/02/26 14:15:38'
},
{
'id' : 4,
'name' : 'Shipped',
'color': 'mat-purple-500-bg',
'color': 'purple-500',
'date' : '2015/10/17 03:32:39'
}
],
@ -2546,13 +2546,13 @@ export class ECommerceFakeDb
{
'id' : 10,
'name' : 'Awaiting bank wire payment',
'color': 'mat-blue-500-bg',
'color': 'blue-500',
'date' : '2015/09/01 20:50:07'
},
{
'id' : 12,
'name' : 'Remote payment accepted',
'color': 'mat-green-500-bg',
'color': 'green-500',
'date' : '2016/02/13 21:19:04'
}
],
@ -2630,13 +2630,13 @@ export class ECommerceFakeDb
{
'id' : 6,
'name' : 'Canceled',
'color': 'mat-pink-500-bg',
'color': 'pink-500',
'date' : '2015/03/31 03:01:12'
},
{
'id' : 8,
'name' : 'Payment error',
'color': 'mat-red-900-bg',
'color': 'red-900',
'date' : '2016/03/11 18:53:35'
}
],
@ -2714,13 +2714,13 @@ export class ECommerceFakeDb
{
'id' : 7,
'name' : 'Refunded',
'color': 'mat-red-500-bg',
'color': 'red-500',
'date' : '2015/12/29 15:34:46'
},
{
'id' : 11,
'name' : 'Awaiting PayPal payment',
'color': 'mat-blue-500-bg',
'color': 'blue-500',
'date' : '2015/07/14 19:10:43'
}
],
@ -2798,13 +2798,13 @@ export class ECommerceFakeDb
{
'id' : 1,
'name' : 'Awaiting check payment',
'color': 'mat-blue-500-bg',
'color': 'blue-500',
'date' : '2015/12/21 10:42:21'
},
{
'id' : 6,
'name' : 'Canceled',
'color': 'mat-pink-500-bg',
'color': 'pink-500',
'date' : '2016/02/11 05:58:55'
}
],
@ -2882,13 +2882,13 @@ export class ECommerceFakeDb
{
'id' : 9,
'name' : 'On pre-order (paid)',
'color': 'mat-purple-300-bg',
'color': 'purple-300',
'date' : '2015/06/20 08:37:46'
},
{
'id' : 2,
'name' : 'Payment accepted',
'color': 'mat-green-500-bg',
'color': 'green-500',
'date' : '2015/01/01 01:42:21'
}
],
@ -2966,13 +2966,13 @@ export class ECommerceFakeDb
{
'id' : 5,
'name' : 'Delivered',
'color': 'mat-green-800-bg',
'color': 'green-800',
'date' : '2015/03/23 00:18:52'
},
{
'id' : 3,
'name' : 'Preparing the order',
'color': 'mat-orange-500-bg',
'color': 'orange-500',
'date' : '2015/03/22 04:48:12'
}
],
@ -3050,13 +3050,13 @@ export class ECommerceFakeDb
{
'id' : 6,
'name' : 'Canceled',
'color': 'mat-pink-500-bg',
'color': 'pink-500',
'date' : '2016/03/24 22:56:35'
},
{
'id' : 4,
'name' : 'Shipped',
'color': 'mat-purple-500-bg',
'color': 'purple-500',
'date' : '2016/04/09 13:33:26'
}
],
@ -3134,13 +3134,13 @@ export class ECommerceFakeDb
{
'id' : 7,
'name' : 'Refunded',
'color': 'mat-red-500-bg',
'color': 'red-500',
'date' : '2015/08/10 17:14:57'
},
{
'id' : 5,
'name' : 'Delivered',
'color': 'mat-green-800-bg',
'color': 'green-800',
'date' : '2016/03/30 01:38:14'
}
],
@ -3218,13 +3218,13 @@ export class ECommerceFakeDb
{
'id' : 10,
'name' : 'Awaiting bank wire payment',
'color': 'mat-blue-500-bg',
'color': 'blue-500',
'date' : '2015/05/19 11:09:56'
},
{
'id' : 12,
'name' : 'Remote payment accepted',
'color': 'mat-green-500-bg',
'color': 'green-500',
'date' : '2015/03/27 05:02:33'
}
],

16
src/app/fake-db/scrumboard.ts
View File

@ -274,7 +274,7 @@ export class ScrumboardFakeDb
}
],
'activities' : [],
'due' : '2018-09-07T12:00:00.000Z'
'due' : '2020-09-07T12:00:00.000Z'
},
{
'id' : 'f6b9d7a9247e5d794a081927',
@ -565,22 +565,22 @@ export class ScrumboardFakeDb
{
'id' : '26022e4129ad3a5sc28b36cd',
'name' : 'High Priority',
'color': 'mat-red-500-bg'
'color': 'red-500'
},
{
'id' : '56027e4119ad3a5dc28b36cd',
'name' : 'Design',
'color': 'mat-orange-400-bg'
'color': 'orange-400'
},
{
'id' : '5640635e19ad3a5dc21416b2',
'name' : 'App',
'color': 'mat-blue-600-bg'
'color': 'blue-600'
},
{
'id' : '6540635g19ad3s5dc31412b2',
'name' : 'Feature',
'color': 'mat-green-400-bg'
'color': 'green-400'
}
]
},
@ -769,17 +769,17 @@ export class ScrumboardFakeDb
{
'id' : '56027e4119ad3a5dc28b36cd',
'name' : 'Design',
'color': 'mat-red-500-bg'
'color': 'red-500'
},
{
'id' : '5640635e19ad3a5dc21416b2',
'name' : 'App',
'color': 'mat-blue-500-bg'
'color': 'blue-500'
},
{
'id' : '6540635g19ad3s5dc31412b2',
'name' : 'Feature',
'color': 'mat-green-400-bg'
'color': 'green-400'
}
]
}

33
src/app/fuse-config/index.ts
View File

@ -3,31 +3,36 @@ import { FuseConfig } from '@fuse/types';
/**
* Default Fuse Configuration
*
* You can edit these options to change the default options. All these options also can be changed per component
* basis. See `app/main/pages/authentication/login/login.component.ts` constructor method to learn more
* about changing these options per component basis.
* You can edit these options to change the default options. All these options also can be
* changed per component basis. See `app/main/pages/authentication/login/login.component.ts`
* constructor method to learn more about changing these options per component basis.
*/
export const fuseConfig: FuseConfig = {
// Color themes can be defined in src/app/app.theme.scss
colorTheme : 'theme-default',
layout : {
style : 'vertical-layout-1',
width : 'fullwidth',
navbar : {
background: 'mat-fuse-dark-700-bg',
folded : false,
hidden : false,
position : 'left',
variant : 'vertical-style-1'
primaryBackground : 'fuse-navy-700',
secondaryBackground: 'fuse-navy-900',
folded : false,
hidden : false,
position : 'left',
variant : 'vertical-style-1'
},
toolbar : {
background: 'mat-white-500-bg',
hidden : false,
position : 'below-static'
customBackgroundColor: false,
background : 'fuse-white-500',
hidden : false,
position : 'below-static'
},
footer : {
background: 'mat-fuse-dark-900-bg',
hidden : false,
position : 'below-fixed'
customBackgroundColor: true,
background : 'fuse-navy-900',
hidden : false,
position : 'below-fixed'
},
sidepanel: {
hidden : false,

10
src/app/layout/components/chat-panel/chat-panel.component.html
View File

@ -1,4 +1,4 @@
<div class="header mat-elevation-z4 mat-primary-bg" fxLayout="row" fxLayoutAlign="space-between center">
<div class="header mat-elevation-z4 primary" fxLayout="row" fxLayoutAlign="space-between center">
<ng-container *ngIf="selectedContact === null">
@ -84,7 +84,7 @@
<ng-container *ngIf="selectedContact && chat && chat.dialog && chat.dialog.length === 0">
<div class="no-messages-icon">
<mat-icon class="s-128">chat</mat-icon>
<mat-icon class="s-128 fade-text">chat</mat-icon>
</div>
<div class="no-messages secondary-text">
@ -98,7 +98,7 @@
<div class="no-contact-selected">
<div class="no-contact-icon">
<mat-icon class="s-128">chat</mat-icon>
<mat-icon class="s-128 fade-text">chat</mat-icon>
</div>
<div class="no-contact secondary-text">
@ -117,9 +117,7 @@
<form #replyForm="ngForm"
(ngSubmit)="reply($event)"
(keydown.enter)="reply($event)"
fxFlex
fxLayout="row"
fxLayoutAlign="start center">
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"

38
src/app/layout/components/chat-panel/chat-panel.component.scss
View File

@ -49,7 +49,6 @@ chat-panel {
width: 72px;
min-width: 72px;
max-width: 72px;
background-color: #F9F9F9;
overflow: auto;
-webkit-overflow-scrolling: touch;
@ -73,11 +72,6 @@ chat-panel {
&.active {
position: relative;
background-color: mat-color(mat-palette($mat-indigo, 50));
.status-icon {
border-color: mat-color(mat-palette($mat-indigo, 50));
}
&:after {
position: absolute;
@ -88,7 +82,6 @@ chat-panel {
width: 4px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background-color: mat-color(mat-palette($mat-indigo));
}
}
@ -116,6 +109,9 @@ chat-panel {
.unread-count {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
top: 8px;
@ -124,11 +120,6 @@ chat-panel {
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);
}
@ -138,7 +129,7 @@ chat-panel {
height: 12px;
bottom: 10px;
left: 44px;
border: 2px solid #F9F9F9;
border: 2px solid;
border-radius: 50%;
&.online {
@ -164,7 +155,6 @@ chat-panel {
position: relative;
z-index: 7;
flex: 1 1 100%;
background-color: white;
box-shadow: -1px 0 2px 0 rgba(0, 0, 0, 0.25);
.messages {
@ -208,7 +198,6 @@ chat-panel {
margin-top: 8px;
top: 100%;
left: 0;
color: $black-87-opacity;
white-space: nowrap;
}
}
@ -216,9 +205,6 @@ chat-panel {
&.contact {
.bubble {
background-color: mat-color(mat-palette($mat-indigo));
color: white;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
@ -255,8 +241,6 @@ chat-panel {
.bubble {
margin-left: auto;
background-color: #E0E0E0;
color: $black-87-opacity;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
@ -321,10 +305,6 @@ chat-panel {
padding: 0 24px;
margin-top: -64px;
text-align: center;
mat-icon {
color: rgba(0, 0, 0, 0.06);
}
}
.no-messages {
@ -345,13 +325,6 @@ chat-panel {
padding: 0 24px;
text-align: center;
.no-contact-icon {
mat-icon {
color: rgba(0, 0, 0, 0.06);
}
}
.no-contact {
margin-top: 24px;
}
@ -362,8 +335,8 @@ chat-panel {
position: relative;
.message-text {
background-color: #E0E0E0;
padding: 16px 8px;
border-top: 1px solid;
.mat-form-field-wrapper {
padding: 0;
@ -374,7 +347,6 @@ chat-panel {
.mat-form-field-infix {
padding: 0;
border: none;
background: white;
border-radius: 20px;
@include mat-elevation(2);

6
src/app/layout/components/chat-panel/chat-panel.component.ts
View File

@ -120,9 +120,6 @@ export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy
{
setTimeout(() => {
// Reset the reply form
this._replyForm.reset();
// Focus to the reply input
// this._replyInput.nativeElement.focus();
@ -276,6 +273,9 @@ export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy
// Add the message to the chat
this.chat.dialog.push(message);
// Reset the reply form
this._replyForm.reset();
// Update the server
this._chatPanelService.updateChat(this.chat.id, this.chat.dialog).then(response => {

82
src/app/layout/components/chat-panel/chat-panel.theme.scss Normal file
View File

@ -0,0 +1,82 @@
@mixin chat-panel-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$is-dark: map-get($theme, is-dark);
chat-panel {
#contacts-list {
background-color: map-get($background, app-bar);
.contacts-list-item {
&.active {
background: map-get($background, hover);
&:after {
background-color: map-get($accent, default);
}
}
.unread-count {
background-color: map-get($accent, default);
color: map-get($accent, default-contrast);
}
.status-icon {
border-color: map-get($background, app-bar);
}
}
}
#chat {
.messages {
.message-row {
&.contact {
.bubble {
background-color: map-get($primary, default);
color: map-get($primary, default-contrast);
}
}
&.me {
.bubble {
color: rgba(0, 0, 0, 0.87);
background-color: #E0E0E0;
}
}
}
}
.reply-form {
.message-text {
background-color: map-get($background, app-bar);
border-color: map-get($foreground, divider);
.mat-form-field-wrapper {
.mat-form-field-flex {
.mat-form-field-infix {
@if ($is-dark == true) {
background-color: map-get($background, hover);
} @else {
background-color: white;
}
}
}
}
}
}
}
}
}

2
src/app/layout/components/footer/footer.component.html
View File

@ -3,7 +3,7 @@
<div fxLayout="row" fxLayoutAlign="center center" fxLayoutAlign.gt-xs="space-between center" fxFlex>
<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"
target="_blank" mat-button class="pink" fxFlex="0 0 auto" fxLayout="row"
fxLayoutAlign="start center">
<mat-icon class="s-16 mr-sm-4">shopping_cart</mat-icon>
<span>Purchase FUSE (Angular 6+)</span>

4
src/app/layout/components/navbar/horizontal/style-1/style-1.component.html
View File

@ -1 +1,3 @@
<fuse-navigation layout="horizontal"></fuse-navigation>
<div [ngClass]="fuseConfig.layout.navbar.primaryBackground">
<fuse-navigation layout="horizontal"></fuse-navigation>
</div>

11
src/app/layout/components/navbar/horizontal/style-1/style-1.component.ts
View File

@ -2,6 +2,7 @@ import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';
import { FuseConfigService } from '@fuse/services/config.service';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@ -13,6 +14,7 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
})
export class NavbarHorizontalStyle1Component implements OnInit, OnDestroy
{
fuseConfig: any;
navigation: any;
// Private
@ -21,10 +23,12 @@ export class NavbarHorizontalStyle1Component implements OnInit, OnDestroy
/**
* Constructor
*
* @param {FuseConfigService} _fuseConfigService
* @param {FuseNavigationService} _fuseNavigationService
* @param {FuseSidebarService} _fuseSidebarService
*/
constructor(
private _fuseConfigService: FuseConfigService,
private _fuseNavigationService: FuseNavigationService,
private _fuseSidebarService: FuseSidebarService
)
@ -51,6 +55,13 @@ export class NavbarHorizontalStyle1Component implements OnInit, OnDestroy
.subscribe(() => {
this.navigation = this._fuseNavigationService.getCurrentNavigation();
});
// Subscribe to the config changes
this._fuseConfigService.config
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((config) => {
this.fuseConfig = config;
});
}
/**

8
src/app/layout/components/navbar/vertical/style-1/style-1.component.html
View File

@ -1,4 +1,4 @@
<div class="navbar-top mat-indigo-700-bg">
<div class="navbar-top" [ngClass]="fuseConfig.layout.navbar.secondaryBackground">
<div class="logo">
<img class="logo-icon" src="assets/images/logos/fuse.svg">
@ -24,17 +24,17 @@
<div class="navbar-scroll-container" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
<div class="user mat-indigo-700-bg" fxLayout="column">
<div class="user" fxLayout="column" [ngClass]="fuseConfig.layout.navbar.secondaryBackground">
<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">
<div class="avatar-container" [ngClass]="fuseConfig.layout.navbar.primaryBackground">
<img class="avatar" src="assets/images/avatars/Velazquez.jpg">
</div>
</div>
<div class="navbar-content">
<div class="navbar-content" [ngClass]="fuseConfig.layout.navbar.primaryBackground">
<fuse-navigation layout="vertical"></fuse-navigation>
</div>

13
src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
View File

@ -36,6 +36,9 @@ fuse-sidebar {
.user {
padding: 12px 0;
height: 64px;
min-height: 64px;
max-height: 64px;
.avatar-container {
position: relative;
@ -57,7 +60,7 @@ fuse-sidebar {
}
.navbar-content {
margin-top: 0;
padding-top: 0;
}
}
}
@ -134,6 +137,9 @@ navbar {
}
.navbar-scroll-container {
display: flex;
flex-direction: column;
flex: 1 1 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
@ -150,6 +156,9 @@ navbar {
align-items: center;
justify-content: flex-start;
width: 100%;
height: 136px;
min-height: 136px;
max-height: 136px;
padding: 24px 0 64px 0;
.avatar-container {
@ -170,7 +179,7 @@ navbar {
.navbar-content {
flex: 1 1 auto;
margin-top: 32px;
padding-top: 32px;
}
}
}

6
src/app/layout/components/navbar/vertical/style-2/style-2.component.html
View File

@ -1,4 +1,4 @@
<div class="navbar-header">
<div class="navbar-header" [ngClass]="fuseConfig.layout.navbar.secondaryBackground">
<div class="logo">
<img class="logo-icon" src="assets/images/logos/fuse.svg">
@ -17,7 +17,7 @@
</div>
<div class="navbar-content" fusePerfectScrollbar
[fusePerfectScrollbarOptions]="{suppressScrollX: true}">
<div class="navbar-content" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}"
[ngClass]="fuseConfig.layout.navbar.primaryBackground">
<fuse-navigation layout="vertical"></fuse-navigation>
</div>

1
src/app/layout/components/navbar/vertical/style-2/style-2.component.scss
View File

@ -62,7 +62,6 @@ navbar {
min-height: 64px;
padding: 0 16px 0 24px;
transition: padding 200ms ease;
background-color: rgba(255, 255, 255, .05);
@include mat-elevation(1);
.logo {

11
src/app/layout/components/navbar/vertical/style-2/style-2.component.ts
View File

@ -3,6 +3,7 @@ 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';
@ -15,6 +16,7 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
})
export class NavbarVerticalStyle2Component implements OnInit, OnDestroy
{
fuseConfig: any;
fusePerfectScrollbarUpdateTimeout: any;
navigation: any;
@ -25,11 +27,13 @@ export class NavbarVerticalStyle2Component implements OnInit, OnDestroy
/**
* 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
@ -117,6 +121,13 @@ export class NavbarVerticalStyle2Component implements OnInit, OnDestroy
.subscribe(() => {
this.navigation = this._fuseNavigationService.getCurrentNavigation();
});
// Subscribe to the config changes
this._fuseConfigService.config
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((config) => {
this.fuseConfig = config;
});
}
/**

6
src/app/layout/components/toolbar/toolbar.component.html
View File

@ -17,7 +17,7 @@
</div>
</div>
<div class="px-8 px-mat-16">
<div class="px-8 px-md-16">
<fuse-shortcuts [navigation]="navigation"></fuse-shortcuts>
</div>
@ -91,7 +91,7 @@
class="chat-panel-toggle-button"
(click)="toggleSidebarOpen('chatPanel')"
aria-label="Toggle chat panel">
<mat-icon class="icon">chat</mat-icon>
<mat-icon class="secondary-text">chat</mat-icon>
</button>
<div class="toolbar-separator" fxHide.gt-md></div>
@ -100,7 +100,7 @@
class="quick-panel-toggle-button"
(click)="toggleSidebarOpen('quickPanel')"
aria-label="Toggle quick panel">
<mat-icon class="icon">format_list_bulleted</mat-icon>
<mat-icon class="secondary-text">format_list_bulleted</mat-icon>
</button>
<div class="toolbar-separator" *ngIf="!hiddenNavbar && rightNavbar" fxHide fxShow.gt-xs></div>

3
src/app/layout/components/toolbar/toolbar.component.scss
View File

@ -1,6 +1,6 @@
@import "src/@fuse/scss/fuse";
:host {
toolbar {
position: relative;
display: flex;
flex: 0 0 auto;
@ -46,7 +46,6 @@
.toolbar-separator {
height: 64px;
width: 1px;
background: rgba(0, 0, 0, .12);
@include media-breakpoint-down('xs') {
height: 56px;

9
src/app/layout/components/toolbar/toolbar.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { TranslateService } from '@ngx-translate/core';
@ -10,9 +10,10 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
import { navigation } from 'app/navigation/navigation';
@Component({
selector : 'toolbar',
templateUrl: './toolbar.component.html',
styleUrls : ['./toolbar.component.scss']
selector : 'toolbar',
templateUrl : './toolbar.component.html',
styleUrls : ['./toolbar.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class ToolbarComponent implements OnInit, OnDestroy

8
src/app/layout/components/toolbar/toolbar.theme.scss Normal file
View File

@ -0,0 +1,8 @@
@mixin toolbar-theme($theme) {
$foreground: map-get($theme, foreground);
.toolbar-separator {
background: map-get($foreground, divider);
}
}

12
src/app/layout/horizontal/layout-1/layout-1.component.html
View File

@ -96,22 +96,23 @@
<!-- TOOLBAR -->
<ng-template #toolbar>
<toolbar *ngIf="!fuseConfig.layout.toolbar.hidden"
[ngClass]="[fuseConfig.layout.toolbar.position, fuseConfig.layout.toolbar.background]"></toolbar>
[ngClass]="fuseConfig.layout.toolbar.customBackgroundColor === true ? fuseConfig.layout.toolbar.position + ' ' + fuseConfig.layout.toolbar.background : fuseConfig.layout.toolbar.position">
</toolbar>
</ng-template>
<!-- / TOOLBAR -->
<!-- FOOTER -->
<ng-template #footer>
<footer *ngIf="!fuseConfig.layout.footer.hidden"
[ngClass]="[fuseConfig.layout.footer.position, fuseConfig.layout.footer.background]"></footer>
[ngClass]="fuseConfig.layout.footer.customBackgroundColor === true ? fuseConfig.layout.footer.position + ' ' + fuseConfig.layout.footer.background : fuseConfig.layout.footer.position">
</footer>
</ng-template>
<!-- / FOOTER -->
<!-- TOP NAVBAR -->
<ng-template #topNavbar>
<navbar variant="horizontal-style-1"
class="top-navbar" [ngClass]="fuseConfig.layout.navbar.background"
fxHide fxShow.gt-md
class="top-navbar" fxHide fxShow.gt-md
*ngIf="!fuseConfig.layout.navbar.hidden">
</navbar>
</ng-template>
@ -122,8 +123,7 @@
<fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
[folded]="fuseConfig.layout.navbar.folded"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar [variant]="fuseConfig.layout.navbar.variant"
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
<navbar [variant]="fuseConfig.layout.navbar.variant" class="left-navbar"></navbar>
</fuse-sidebar>
</ng-template>
<!-- / LEFT NAVBAR -->

12
src/app/layout/vertical/layout-1/layout-1.component.html
View File

@ -108,14 +108,16 @@
<!-- TOOLBAR -->
<ng-template #toolbar>
<toolbar *ngIf="!fuseConfig.layout.toolbar.hidden"
[ngClass]="[fuseConfig.layout.toolbar.position, fuseConfig.layout.toolbar.background]"></toolbar>
[ngClass]="fuseConfig.layout.toolbar.customBackgroundColor === true ? fuseConfig.layout.toolbar.position + ' ' + fuseConfig.layout.toolbar.background : fuseConfig.layout.toolbar.position">
</toolbar>
</ng-template>
<!-- / TOOLBAR -->
<!-- FOOTER -->
<ng-template #footer>
<footer *ngIf="!fuseConfig.layout.footer.hidden"
[ngClass]="[fuseConfig.layout.footer.position, fuseConfig.layout.footer.background]"></footer>
[ngClass]="fuseConfig.layout.footer.customBackgroundColor === true ? fuseConfig.layout.footer.position + ' ' + fuseConfig.layout.footer.background : fuseConfig.layout.footer.position">
</footer>
</ng-template>
<!-- / FOOTER -->
@ -125,8 +127,7 @@
[folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar [variant]="fuseConfig.layout.navbar.variant"
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
<navbar [variant]="fuseConfig.layout.navbar.variant" class="left-navbar"></navbar>
</fuse-sidebar>
</ng-template>
<!-- / LEFT NAVBAR -->
@ -137,8 +138,7 @@
[folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar [variant]="fuseConfig.layout.navbar.variant"
class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
<navbar [variant]="fuseConfig.layout.navbar.variant" class="right-navbar"></navbar>
</fuse-sidebar>
</ng-template>
<!-- / RIGHT NAVBAR -->

12
src/app/layout/vertical/layout-2/layout-2.component.html
View File

@ -108,14 +108,16 @@
<!-- TOOLBAR -->
<ng-template #toolbar>
<toolbar *ngIf="!fuseConfig.layout.toolbar.hidden"
[ngClass]="[fuseConfig.layout.toolbar.position, fuseConfig.layout.toolbar.background]"></toolbar>
[ngClass]="fuseConfig.layout.toolbar.customBackgroundColor === true ? fuseConfig.layout.toolbar.position + ' ' + fuseConfig.layout.toolbar.background : fuseConfig.layout.toolbar.position">
</toolbar>
</ng-template>
<!-- / TOOLBAR -->
<!-- FOOTER -->
<ng-template #footer>
<footer *ngIf="!fuseConfig.layout.footer.hidden"
[ngClass]="[fuseConfig.layout.footer.position, fuseConfig.layout.footer.background]"></footer>
[ngClass]="fuseConfig.layout.footer.customBackgroundColor === true ? fuseConfig.layout.footer.position + ' ' + fuseConfig.layout.footer.background : fuseConfig.layout.footer.position">
</footer>
</ng-template>
<!-- / FOOTER -->
@ -125,8 +127,7 @@
[folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar [variant]="fuseConfig.layout.navbar.variant"
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
<navbar [variant]="fuseConfig.layout.navbar.variant" class="left-navbar"></navbar>
</fuse-sidebar>
</ng-template>
<!-- / LEFT NAVBAR -->
@ -137,8 +138,7 @@
[folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar [variant]="fuseConfig.layout.navbar.variant"
class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
<navbar [variant]="fuseConfig.layout.navbar.variant" class="right-navbar"></navbar>
</fuse-sidebar>
</ng-template>
<!-- / RIGHT NAVBAR -->

12
src/app/layout/vertical/layout-3/layout-3.component.html
View File

@ -94,14 +94,16 @@
<!-- TOOLBAR -->
<ng-template #toolbar>
<toolbar *ngIf="!fuseConfig.layout.toolbar.hidden"
[ngClass]="[fuseConfig.layout.toolbar.position, fuseConfig.layout.toolbar.background]"></toolbar>
[ngClass]="fuseConfig.layout.toolbar.customBackgroundColor === true ? fuseConfig.layout.toolbar.position + ' ' + fuseConfig.layout.toolbar.background : fuseConfig.layout.toolbar.position">
</toolbar>
</ng-template>
<!-- / TOOLBAR -->
<!-- FOOTER -->
<ng-template #footer>
<footer *ngIf="!fuseConfig.layout.footer.hidden"
[ngClass]="[fuseConfig.layout.footer.position, fuseConfig.layout.footer.background]"></footer>
[ngClass]="fuseConfig.layout.footer.customBackgroundColor === true ? fuseConfig.layout.footer.position + ' ' + fuseConfig.layout.footer.background : fuseConfig.layout.footer.position">
</footer>
</ng-template>
<!-- / FOOTER -->
@ -111,8 +113,7 @@
[folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar [variant]="fuseConfig.layout.navbar.variant"
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
<navbar [variant]="fuseConfig.layout.navbar.variant" class="left-navbar"></navbar>
</fuse-sidebar>
</ng-template>
<!-- / LEFT NAVBAR -->
@ -123,8 +124,7 @@
[folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar [variant]="fuseConfig.layout.navbar.variant"
class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
<navbar [variant]="fuseConfig.layout.navbar.variant" class="right-navbar"></navbar>
</fuse-sidebar>
</ng-template>
<!-- / RIGHT NAVBAR -->

4
src/app/main/angular-material-elements/angular-material-elements.component.html
View File

@ -1,7 +1,7 @@
<div class="page-layout simple fullwidth angular-material-elements">
<!-- HEADER -->
<div class="header mat-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
<div class="header accent p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
fxLayoutAlign.gt-xs="space-between center">
<div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
@ -15,7 +15,7 @@
<div class="h2 mt-16">{{title}}</div>
</div>
<a mat-raised-button class="reference-button mat-white-bg mt-16 mt-sm-0" href="https://material.angular.io/"
<a mat-raised-button class="reference-button mt-16 mt-sm-0" href="https://material.angular.io/"
target="_blank">
<mat-icon class="mr-8">link</mat-icon>
<span>Reference</span>

2
src/app/main/angular-material-elements/example-viewer/example-viewer.html
View File

@ -1,4 +1,4 @@
<div class="example-viewer-wrapper mat-white-bg mat-elevation-z2">
<div class="example-viewer-wrapper mat-card mat-elevation-z2">
<div class="example-viewer-header">

8
src/app/main/angular-material-elements/example-viewer/example-viewer.scss
View File

@ -5,7 +5,7 @@ example-viewer {
padding: 24px 0;
.example-viewer-wrapper {
border: 1px solid rgba(mat-color($foreground, secondary-text), .03);
//border: 1px solid rgba(mat-color($foreground, secondary-text), .03);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24), 0 0 2px rgba(0, 0, 0, 0.12);
margin: 4px;
h3 {
@ -19,8 +19,8 @@ example-viewer {
display: flex;
justify-content: center;
padding: 8px 20px;
color: mat-color($foreground, secondary-text);
background: rgba(mat-color($foreground, secondary-text), .03);
//color: mat-color($foreground, secondary-text);
//background: rgba(mat-color($foreground, secondary-text), .03);
flex: 1 1 auto;
.example-viewer-title {
@ -58,7 +58,7 @@ example-viewer {
padding: 0;
margin: 0;
min-height: 150px;
border-bottom: 1px solid mat-color($foreground, divider);
//border-bottom: 1px solid mat-color($foreground, divider);
> pre {
width: 100%;

156
src/app/main/apps/academy/academy.theme.scss Normal file
View File

@ -0,0 +1,156 @@
@mixin academy-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$accent: map-get($theme, accent);
$is-dark: map-get($theme, is-dark);
#academy-courses {
.header {
background: #1A237E;
background: linear-gradient(to right, #0E2A3B 0%, #34306B 100%);
.hero-text {
h1 {
color: white;
}
h3 {
color: rgba(255, 255, 255, 0.75);
}
}
}
.content {
.courses {
.course {
.course-content {
background: map-get($background, card);
.header {
.category {
color: rgba(0, 0, 0, 0.54);
}
.length {
.length-icon {
color: rgba(0, 0, 0, 0.54) !important;
}
.min {
color: rgba(0, 0, 0, 0.54);
}
}
}
.content {
.updated {
color: map-get($foreground, hint-text);
}
}
}
}
}
}
}
#academy-course {
.sidebar {
.steps {
.step {
color: map-get($foreground, secondary-text);
&.current {
@if ($is-dark) {
background: map-get($background, app-bar);
color: map-get($foreground, text);
} @else {
background: map-get($accent, 50);
color: map-get($accent, '50-contrast');
}
.index {
span {
@if ($is-dark) {
background: map-get($background, app-bar);
border-color: map-get($accent, default);
} @else {
background: map-get($background, background);
border-color: map-get($accent, default);
}
}
}
}
&.completed {
color: map-get($foreground, text);
.index {
span {
border-color: map-get($accent, default);
}
&:after {
border-left-color: map-get($accent, default);
}
}
+ .step {
.index {
&:before {
border-left-color: map-get($accent, default);
}
}
}
}
.index {
&:before,
&:after {
border-left-color: map-get($foreground, divider);
}
span {
background: map-get($background, background);
border-color: map-get($foreground, divider);
}
}
}
}
}
.center {
.content {
@if ($is-dark) {
background: #353535;
} @else {
background: mat-color($mat-grey, 200);
}
.course-step {
.course-step-content {
background: map-get($background, card);
}
}
}
}
}
}

4
src/app/main/apps/academy/course/course.component.html
View File

@ -30,7 +30,7 @@
<div class="center">
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<div class="header accent p-24" fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button class="sidebar-toggle mr-16" fxHide.gt-md
(click)="toggleSidebar('academy-course-left-sidebar-1')">
@ -82,7 +82,7 @@
<mat-icon>chevron_right</mat-icon>
</button>
<button mat-fab class="done mat-green-600-bg"
<button mat-fab class="done green-600"
routerLink="/apps/academy/courses"
[disabled]="currentStep !== course.totalSteps - 1"
[fxShow]="currentStep === course.totalSteps - 1">

59
src/app/main/apps/academy/course/course.component.scss
View File

@ -14,16 +14,13 @@
align-items: center;
padding: 16px;
cursor: pointer;
color: rgba(0, 0, 0, 0.54);
&.current {
background: mat-color($mat-blue, 50);
color: rgba(0, 0, 0, 0.87);
.index {
span {
border: 2px solid mat-color($mat-blue, 500);
border: 2px solid;
}
}
@ -33,26 +30,11 @@
}
&.completed {
color: rgba(0, 0, 0, 0.87);
.index {
span {
border: 2px solid mat-color($mat-blue, 500);
}
&:after {
border-left-color: mat-color($mat-blue, 500);
}
}
+ .step {
.index {
&:before {
border-left-color: mat-color($mat-blue, 500);
}
border: 2px solid;
}
}
}
@ -81,29 +63,12 @@
display: flex;
margin-right: 12px;
span {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 28px;
min-width: 28px;
max-width: 28px;
height: 28px;
background: white;
border-radius: 100%;
border: 2px solid mat-color($mat-grey, 500);
font-weight: bold;
font-size: 12px;
z-index: 10;
}
&:before,
&:after {
position: absolute;
display: block;
content: ' ';
border-left: 1px solid mat-color($mat-grey, 300);
border-left: 1px solid;
width: 1px;
height: 50%;
left: 29px;
@ -117,6 +82,22 @@
&:after {
bottom: 0;
}
span {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 28px;
min-width: 28px;
max-width: 28px;
height: 28px;
border-radius: 100%;
border: 2px solid;
font-weight: bold;
font-size: 12px;
z-index: 10;
}
}
.title {
@ -139,7 +120,6 @@
.content {
position: relative;
display: flex;
background: mat-color($mat-grey, 200);
.course-step {
position: absolute;
@ -164,7 +144,6 @@
max-width: 720px;
margin: 0 auto;
width: 100%;
background: white;
@include mat-elevation(4);
}
}

2
src/app/main/apps/academy/courses/courses.component.html
View File

@ -1,7 +1,7 @@
<div id="academy-courses" class="page-layout simple">
<!-- HEADER -->
<div class="header mat-accent-bg p-16 p-sm-24" fxLayout="column" fxLayoutAlign="center center">
<div class="header accent p-16 p-sm-24" fxLayout="column" fxLayoutAlign="center center">
<div class="hero-text">
<mat-icon class="hero-icon">school</mat-icon>

11
src/app/main/apps/academy/courses/courses.component.scss
View File

@ -7,9 +7,8 @@
flex: 1 0 auto;
height: 280px;
max-height: 280px;
background: #1A237E;
background: linear-gradient(to right, #0E2A3B 0%, #34306B 100%);
text-align: center;
overflow: hidden;
@include media-breakpoint('xs') {
height: 240px;
@ -29,7 +28,6 @@
}
h1 {
color: white;
font-size: 40px;
font-weight: 300;
letter-spacing: 0.01em;
@ -43,7 +41,6 @@
}
h3 {
color: rgba(255, 255, 255, 0.75);
max-width: 480px;
text-align: center;
font-weight: 300;
@ -108,14 +105,12 @@
}
.course-content {
background: white;
min-height: 240px;
transition: box-shadow 150ms ease-in-out;
@include mat-elevation(3);
.header {
color: white;
padding: 16px 24px;
height: 64px !important;
min-height: 64px !important;
@ -141,19 +136,16 @@
text-transform: capitalize;
text-align: left;
font-weight: 500;
color: rgba(0, 0, 0, 0.54);
}
.length {
.length-icon {
margin-right: 8px;
color: rgba(0, 0, 0, 0.54) !important;
}
.min {
font-size: 16px;
color: rgba(0, 0, 0, 0.54);
}
}
}
@ -170,7 +162,6 @@
font-size: 13px;
font-weight: 500;
margin-top: 4px;
color: rgba(0, 0, 0, 0.37);
}
}

2
src/app/main/apps/calendar/calendar.component.html
View File

@ -76,7 +76,7 @@
</div>
<!-- ADD EVENT BUTTON -->
<button mat-fab class="add-event-button mat-warn" (click)="addEvent()" aria-label="Add event"
<button mat-fab class="add-event-button mat-accent" (click)="addEvent()" aria-label="Add event"
[@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">
<mat-icon>add</mat-icon>
</button>

11
src/app/main/apps/calendar/calendar.component.scss
View File

@ -26,7 +26,6 @@
}
.cal-open-day-events {
background: #455A64;
box-shadow: inset 0 0 12px 0 rgba(0, 0, 0, 0.54);
padding: 0;
display: flex;
@ -39,7 +38,6 @@
flex-direction: row;
align-items: center;
justify-content: start;
background-color: white;
@include mat-elevation(1);
transition: box-shadow 300ms ease;
@ -68,7 +66,6 @@
padding: 21px 24px;
line-height: 1;
text-decoration: none;
color: black;
}
}
@ -112,10 +109,8 @@
.cal-event-title {
display: block;
//padding: 21px 24px;
line-height: 1;
text-decoration: none;
color: black;
}
}
@ -160,7 +155,6 @@
height: 26px;
line-height: 26px;
text-decoration: none;
color: black;
}
}
@ -191,7 +185,6 @@
}
#calendar {
background: #FFFFFF;
.header {
height: 200px;
@ -308,10 +301,6 @@
bottom: -26px;
z-index: 10;
}
mat-icon {
color: #FFFFFF;
}
}
.content {

3
src/app/main/apps/calendar/calendar.module.ts
View File

@ -1,6 +1,6 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MatButtonModule, MatDatepickerModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSlideToggleModule, MatToolbarModule } from '@angular/material';
import { MatButtonModule, MatDatepickerModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSlideToggleModule, MatToolbarModule, MatTooltipModule } from '@angular/material';
import { ColorPickerModule } from 'ngx-color-picker';
import { CalendarModule as AngularCalendarModule } from 'angular-calendar';
@ -38,6 +38,7 @@ const routes: Routes = [
MatInputModule,
MatSlideToggleModule,
MatToolbarModule,
MatTooltipModule,
AngularCalendarModule.forRoot(),
ColorPickerModule,

192
src/app/main/apps/calendar/calendar.theme.scss Normal file
View File

@ -0,0 +1,192 @@
@mixin calendar-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$accent: map-get($theme, accent);
$is-dark: map-get($theme, is-dark);
// Month view
.cal-month-view {
.cal-day-badge {
background: map-get($accent, default);
color: map-get($accent, default-contrast);
}
.cal-cell-row {
&.cal-header {
background: none !important;
.cal-cell {
background: none !important;
}
}
}
.cal-days {
border-color: map-get($foreground, divider);
.cal-cell-row {
border-color: map-get($foreground, divider);
&:hover {
background: map-get($background, hover);
}
.cal-day-cell {
&:not(:last-child) {
border-color: map-get($foreground, divider);
}
&.cal-has-events {
&.cal-open {
background: map-get($background, hover);
}
}
&.cal-weekend {
.cal-day-number {
color: map-get($accent, default);
}
}
&:hover {
background: map-get($background, hover);
}
}
}
}
.cal-open-day-events {
@if ($is-dark) {
background: map-get($background, app-bar);
} @else {
background: map-get($accent, default);
}
> div {
background: map-get($background, card);
.cal-event-title {
color: map-get($foreground, text);
}
}
}
}
// Week view
.cal-week-view {
.cal-event {
mwl-calendar-event-actions {
.cal-event-actions {
.cal-event-action {
i {
color: rgba(0, 0, 0, 0.54);
}
}
}
}
}
.cal-day-headers {
border-color: map-get($foreground, divider);
.cal-drag-over {
background: map-get($background, hover);
}
.cal-header {
&.cal-weekend {
span {
color: map-get($accent, default);
}
}
&.cal-today {
background: map-get($background, hover);
}
&:hover {
background: map-get($background, hover);
}
&:not(:last-child) {
border-color: map-get($foreground, divider);
}
}
}
}
// Day view
.cal-day-view {
.cal-hour-rows {
border-color: map-get($foreground, divider);
}
.cal-drag-over {
.cal-hour-segment {
background: map-get($background, hover);
}
}
.cal-event {
mwl-calendar-event-actions {
.cal-event-actions {
.cal-event-action {
i {
color: rgba(0, 0, 0, 0.54);
}
}
}
}
}
.cal-hour {
.cal-hour-segment {
&:hover {
background: map-get($background, hover);
}
}
&:nth-child(odd) {
background: map-get($background, hover);
}
&:not(:last-child) {
.cal-hour-segment {
border-color: map-get($foreground, divider);
}
}
&:last-child {
:not(:last-child) {
.cal-hour-segment {
border-color: map-get($foreground, divider);
}
}
}
}
}
}

10
src/app/main/apps/chat/chat-start/chat-start.component.html
View File

@ -1,20 +1,20 @@
<div fxFlex fxLayout="column" fxLayoutAlign="center center">
<div class="big-circle mat-elevation-z1 app-logo" fxLayout="column" fxLayoutAlign="center center"
<div class="big-circle mat-elevation-z6 app-logo" fxLayout="column" fxLayoutAlign="center center"
[@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
<mat-icon class="s-64 s-mat-128 mat-accent">chat</mat-icon>
<mat-icon class="s-64 s-md-128 mat-accent">chat</mat-icon>
</div>
<span class="app-title my-24" [@animate]="{value:'*',params:{delay:'100ms',y:'25px'}}">Chat App</span>
<span class="app-title mt-48 mb-16" [@animate]="{value:'*',params:{delay:'100ms',y:'25px'}}">Chat App</span>
<span fxHide fxShow.gt-md class="app-message" [@animate]="{value:'*',params:{delay:'200ms',y:'50px'}}">
Select contact to start the chat!..
Select a contact to start a chat!
</span>
<button mat-raised-button fxHide.gt-md fuseMatSidenavToggler="chat-left-sidenav">
Select contact to start the chat!..
Select a contact to start a chat!
</button>
</div>

10
src/app/main/apps/chat/chat-start/chat-start.component.scss
View File

@ -1,16 +1,14 @@
@import "src/@fuse/scss/fuse";
:host {
chat-start {
display: flex;
flex: 1;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 0.8));
.big-circle {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 0.8));
border-radius: 50%;
width: 300px;
height: 300px;
line-height: 300px;
width: 240px;
height: 240px;
line-height: 240px;
text-align: center;
@include media-breakpoint-down('sm') {

11
src/app/main/apps/chat/chat-start/chat-start.component.ts
View File

@ -1,12 +1,13 @@
import { Component } from '@angular/core';
import { Component, ViewEncapsulation } from '@angular/core';
import { fuseAnimations } from '@fuse/animations';
@Component({
selector : 'chat-start',
templateUrl: './chat-start.component.html',
styleUrls : ['./chat-start.component.scss'],
animations : fuseAnimations
selector : 'chat-start',
templateUrl : './chat-start.component.html',
styleUrls : ['./chat-start.component.scss'],
encapsulation: ViewEncapsulation.None,
animations : fuseAnimations
})
export class ChatStartComponent
{

52
src/app/main/apps/chat/chat-view/chat-view.component.html
View File

@ -56,25 +56,27 @@
<!-- / CHAT TOOLBAR -->
<!-- CHAT CONTENT -->
<div id="chat-content" fxFlex fusePerfectScrollbar>
<div id="chat-content" fxFlex="1 1 auto" fusePerfectScrollbar>
<!-- CHAT MESSAGES -->
<div class="chat-messages">
<!-- MESSAGE -->
<div fxLayout="row" *ngFor="let message of dialog" class="message-row"
[ngClass]="{'user' :message.who === user.id}">
<div *ngFor="let message of 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="message.who === contact.id"
<img *ngIf="shouldShowContactAvatar(message, i)"
src="{{contact.avatar}}"
class="avatar"
alt="{{contact.name}}"/>
<img *ngIf="message.who ===user.id" class="avatar" src="{{user.avatar}}">
class="avatar">
<div class="bubble">
<div class="message">{{message.message}}</div>
<div class="time secondary-text">{{message.time | date:'medium'}}</div>
<div class="time secondary-text">{{message.time | date:'short'}}</div>
</div>
</div>
@ -87,26 +89,28 @@
<!-- / CHAT CONTENT -->
<!-- CHAT FOOTER -->
<div class="chat-footer" fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="center center">
<div class="chat-footer" fxFlex="0 0 auto" fxLayout="column">
<!-- REPLY FORM -->
<form #replyForm="ngForm"
(ngSubmit)="reply()"
(keyup.enter)="reply()"
fxFlex class="reply-form"
fxLayout="row"
fxLayoutAlign="start center">
<div class="reply-form" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center">
<mat-form-field fxFlex floatLabel="never">
<textarea matInput #replyInput placeholder="Type and hit enter to send message"
ngModel name="message"></textarea>
</mat-form-field>
<form #replyForm="ngForm"
(ngSubmit)="reply($event)"
(keydown.enter)="reply($event)"
fxFlex fxLayout="row" fxLayoutAlign="start center">
<button mat-fab type="submit" aria-label="Send message">
<mat-icon>send</mat-icon>
</button>
<mat-form-field class="message-text" fxFlex floatLabel="never" appearance="standard">
<textarea matInput #replyInput placeholder="Type your message"
ngModel name="message" [rows]="1" [matTextareaAutosize]="true"></textarea>
</mat-form-field>
</form>
<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>
<!-- / REPLY FORM -->
</div>

240
src/app/main/apps/chat/chat-view/chat-view.component.scss
View File

@ -1,7 +1,8 @@
:host {
@import "src/@fuse/scss/fuse";
chat-view {
display: flex;
flex: 1 0 auto;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 0.8));
overflow: hidden;
max-width: 100%;
@ -9,9 +10,7 @@
.chat-toolbar {
min-height: 64px;
background-color: #F3F4F5;
color: rgba(0, 0, 0, 0.87);
border-bottom: 1px solid rgba(0, 0, 0, .08);
border-bottom: 1px solid;
.responsive-chats-button {
padding: 0;
@ -23,10 +22,6 @@
.avatar {
margin-right: 16px;
}
.chat-contact-name {
}
}
}
@ -35,64 +30,140 @@
overflow: auto;
-webkit-overflow-scrolling: touch;
.message-row {
padding: 16px;
.chat-messages {
position: relative;
padding: 16px 0 40px 40px;
.bubble {
.message-row {
position: relative;
padding: 6px 7px 8px 9px;
background-color: #FFF;
box-shadow: 0 1px .5px rgba(0, 0, 0, .13);
border-radius: 6px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
padding: 0 16px 4px 16px;
&:before {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAMAAADp2asXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAADGUExURQAAAP////b29vn5+f///wAAAP///wAAAAAAAP///9ra2v////j4+PHx8fv7++Hh4fHx8f////////////////39/QAAAP////////z8/P////39/f39/fz8/P////////////z8/P////////////z8/P////////////v7+/Hx8f///9bW1vz8/K2trf////39/f39/WJiYgAAAExMTFtbWwAAAN3d3cjIyPr6+vX19QAAAO7u7vz8/NTU1Ofn5zMzM////zGPlXsAAABBdFJOUwAcm/kREh4CCDWL1SneR6TfAQffhMYK/A5nRrLWfRc5DW2ih5f+19Kn+9v4g/1LCJuXHwQUKgahcXS6DNnlDMMKKzPoTgAAAKBJREFUKM+V08USwmAQA+C/0NIWd3d3d8/7vxTMcIPkQK7f7CG7s8bQAOY/SCuwFYQU1P+eiCqIK2gpWCmoCrAgoKQgJ8CHgIqAMjg0MxxSQ3DogEMWFBZtUPAHYGB1CyDQWE6AH7BrfXzlAxGAQhECTGAmwN1Okz0Gb/LW4fEItIfrOfNELMh3tck7u+PhcT2zQ7l77/K8iY8yJwV3BeYFqpc/uSyPGdAAAAAASUVORK5CYII=);
content: '';
.avatar {
position: absolute;
left: -11px;
bottom: 3px;
width: 12px;
height: 19px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
}
.message {
white-space: pre-wrap;
}
.time {
font-size: 11px;
margin-top: 8px;
text-align: right;
}
}
&.contact {
.avatar {
margin: 0 16px 0 0;
}
}
&.user {
align-items: flex-end;
.avatar {
order: 2;
margin: 0 0 0 16px;
left: -32px;
margin: 0;
}
.bubble {
margin-left: auto;
background-color: #E8F5E9;
border: 1px solid #DFEBE0;
order: 1;
&:before {
right: -11px;
left: auto;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAMAAADp2asXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAD2UExURQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGRsXAAAANzwzNPmxNrtyau5oIWRedDkwNntyczgwdfpyJ+/n97wzsLWtNjsytvwzczfvtPmxau6nNjqxtrtyio1KtzwzNjryAAAANzwzgAAANzwzK7Aor/Us9Lnw8vevAAAAMzevtbpxrvMrX+IdwAAAEROOi45Lr3MrZGjf9LoxX+MctnqydLkwhgYGMzfv9vuyQAAANzwzNvuy9zxy7vMu7XGqNvtzKKykwAAANruzKq6nLnMriQkGMXXuL3PsNjsySgzKAAAANLkw83fvd3vy9z4xtzwzRpFmIEAAABQdFJOUwAXChEGBAMBAgwhDvJ7k0YqMc0Zmwj6apf2kjU0+dkw/swh/CP9j2Wr2gndvaYeBRoxQg6gUPt/FaHJGdTj9A9k7XQLeE6iFcN12xkSt9r4NKizowAAAMFJREFUKM+V0sdywlAMBVDbMX7PQCihQ+iQ0HsJvfem/P/PwBIzugu0PXNnNNJVyPmhsIPhhoB2COwIGuLdhAcl3AhCBoBoHUC6BCBbA0C/EkBFB5D/FjxQwQYg1RI8UKINgDoSAPUlAPqUAMgfAEBfXsEDBV0+Hogi4Zhg4THj9YwHoqEBYOrgYTI3GVgMNn8r+Qq94k9yZNosW/3Hy9VuTjWfHkOX6367bGZUU7de66ieHZrO1OGg8Z1WTgYAFLgD5S1PCkzo1B0AAAAASUVORK5CYII=);
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
max-width: 100%;
.message {
white-space: pre-wrap;
line-height: 1.2;
}
.time {
position: absolute;
display: none;
width: 100%;
font-size: 11px;
margin-top: 8px;
top: 100%;
left: 0;
white-space: nowrap;
}
}
&.contact {
.bubble {
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;
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;
}
}
}
}
@ -100,37 +171,46 @@
}
.chat-footer {
min-height: 72px;
max-height: 96px;
background-color: #F3F4F5;
color: rgba(0, 0, 0, 0.87);
border-top: 1px solid rgba(0, 0, 0, .08);
border-top: 1px solid;
padding: 8px 8px 8px 16px;
.reply-form {
position: relative;
mat-form-field {
margin: 0;
padding-right: 16px;
.message-text {
padding: 16px 8px;
textarea {
max-height: 80px;
transition: height 200ms ease;
overflow: auto;
-webkit-overflow-scrolling: touch;
.mat-form-field-wrapper {
padding: 0;
&.grow {
height: 80px;
.mat-form-field-flex {
padding: 0;
.mat-form-field-infix {
padding: 0;
border: none;
border-radius: 20px;
@include mat-elevation(2);
textarea {
overflow: hidden;
margin: 16px 48px 16px 16px;
width: calc(100% - 64px);
padding: 0;
}
}
}
}
.mat-errors-spacer {
display: none;
.mat-form-field-underline {
display: none !important;
}
}
}
.mat-button {
margin: 0;
.send-message-button {
position: absolute;
right: 16px;
bottom: 21px;
}
}
}

62
src/app/main/apps/chat/chat-view/chat-view.component.ts
View File

@ -1,4 +1,4 @@
import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild, ViewChildren } from '@angular/core';
import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@ -8,9 +8,10 @@ import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scr
import { ChatService } from 'app/main/apps/chat/chat.service';
@Component({
selector : 'chat-view',
templateUrl: './chat-view.component.html',
styleUrls : ['./chat-view.component.scss']
selector : 'chat-view',
templateUrl : './chat-view.component.html',
styleUrls : ['./chat-view.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class ChatViewComponent implements OnInit, OnDestroy, AfterViewInit
{
@ -92,6 +93,45 @@ export class ChatViewComponent implements OnInit, OnDestroy, AfterViewInit
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* 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.contact.id &&
((this.dialog[i + 1] && this.dialog[i + 1].who !== this.contact.id) || !this.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.dialog[i - 1] && this.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.dialog.length - 1 || this.dialog[i + 1] && this.dialog[i + 1].who !== message.who);
}
/**
* Select contact
*/
@ -106,11 +146,9 @@ export class ChatViewComponent implements OnInit, OnDestroy, AfterViewInit
readyToReply(): void
{
setTimeout(() => {
this.replyForm.reset();
this.focusReplyInput();
this.scrollToBottom();
});
}
/**
@ -144,8 +182,15 @@ export class ChatViewComponent implements OnInit, OnDestroy, AfterViewInit
/**
* Reply
*/
reply(): void
reply(event): void
{
event.preventDefault();
if ( !this.replyForm.form.value.message )
{
return;
}
// Message
const message = {
who : this.user.id,
@ -156,6 +201,9 @@ export class ChatViewComponent implements OnInit, OnDestroy, AfterViewInit
// Add the message to the chat
this.dialog.push(message);
// Reset the reply form
this.replyForm.reset();
// Update the server
this._chatService.updateDialog(this.selectedChat.chatId, this.dialog).then(response => {
this.readyToReply();

4
src/app/main/apps/chat/chat.component.html
View File

@ -1,7 +1,7 @@
<div id="chat" class="page-layout carded fullwidth">
<div id="chat" class="page-layout carded fullwidth inner-scroll">
<!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div>
<div class="top-bg accent"></div>
<!-- / TOP BACKGROUND -->
<!-- CENTER -->

6
src/app/main/apps/chat/chat.component.scss
View File

@ -1,8 +1,6 @@
@import "src/@fuse/scss/fuse";
#chat {
display: flex;
flex: 1;
.center {
padding: 32px !important;
@ -17,13 +15,11 @@
display: flex;
flex: 1;
position: relative;
background: url('/assets/images/patterns/rain-grey.png') repeat;
.mat-sidenav-container {
display: flex;
flex: 1;
width: 100%;
background: transparent;
> .mat-sidenav-content,
> .mat-drawer-content {
@ -42,7 +38,7 @@
flex-direction: column;
width: 400px;
max-width: 90%;
box-shadow: 0 0 1px rgba(0, 0, 0, .37);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.37);
overflow: hidden;
}
}

119
src/app/main/apps/chat/chat.theme.scss Normal file
View File

@ -0,0 +1,119 @@
@mixin chat-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$is-dark: map-get($theme, is-dark);
// Chat start
chat-start {
.big-circle {
background: map-get($background, card);
}
}
// Chat view
chat-view {
.chat {
.chat-toolbar {
border-bottom-color: map-get($foreground, divider);
}
#chat-content {
.message-row {
&.contact {
.bubble {
background-color: map-get($primary, default);
color: map-get($primary, default-contrast);
}
}
&.me {
.bubble {
color: rgba(0, 0, 0, 0.87);
background-color: #E0E0E0;
}
}
}
}
.chat-footer {
background: map-get($background, app-bar);
border-top-color: map-get($foreground, divider);
.reply-form {
.message-text {
background-color: map-get($background, app-bar);
border-color: map-get($foreground, divider);
.mat-form-field-wrapper {
.mat-form-field-flex {
.mat-form-field-infix {
@if ($is-dark == true) {
background-color: map-get($background, hover);
} @else {
background-color: white;
}
}
}
}
}
}
}
}
}
// Chats sidenav
chat-chats-sidenav {
.sidenav-header {
mat-toolbar {
border-bottom-color: map-get($foreground, divider);
.search {
background: map-get($background, background);
input {
background: map-get($background, background);
color: map-get($foreground, text);
}
}
}
}
.sidenav-content {
.contact-list,
.chat-list {
.mat-subheader {
color: map-get($accent, default);
}
.contact {
border-bottom-color: map-get($foreground, divider);
.contact-last-message {
color: map-get($foreground, secondary-text);
}
.contact-mood {
color: map-get($foreground, secondary-text);
}
}
}
}
}
}

15
src/app/main/apps/chat/sidenavs/left/chats/chats.component.html
View File

@ -120,23 +120,24 @@
<div fxLayout="row" fxLayoutAlign="start center">
<div class="avatar-wrapper" fxFlex="0 1 auto" fxLayoutAlign="center center">
<img [src]="contacts |getById:chat.contactId:'avatar'"
<img [src]="contacts | getById:chat.contactId:'avatar'"
class="avatar"
alt="{{contacts |getById:chat.contactId:'name'}}"/>
<mat-icon class="s-16 status" [ngClass]="contacts |getById:chat.contactId:'status'"></mat-icon>
alt="{{contacts | getById:chat.contactId:'name'}}"/>
<mat-icon class="s-16 status" [ngClass]="contacts | getById:chat.contactId:'status'"></mat-icon>
</div>
<div fxLayout="row" fxFlex>
<div class="" fxFlex fxLayout="column" fxLayoutAlign="center start">
<div class="contact-name">{{contacts |getById:chat.contactId:'name'}}</div>
<div class="contact-name">{{contacts | getById:chat.contactId:'name'}}</div>
<div class="contact-last-message">{{chat.lastMessage}}</div>
</div>
<div fxLayout="column" fxLayoutAlign="center end">
<div class="contact-last-message-time">
{{chat.lastMessageTime | date}}
</div>
<div *ngIf="chat.unread" class="unread-message-count mat-accent-bg">{{chat.unread}}</div>
<div *ngIf="chat.unread" class="unread-message-count accent">{{chat.unread}}</div>
</div>
</div>
</div>
@ -148,7 +149,7 @@
<!-- CONTACTS LIST-->
<div class="contact-list" fxLayout="column">
<div matSubheader *ngIf="(contacts| filter: searchText).length > 0">
<div matSubheader *ngIf="(contacts | filter: searchText).length > 0">
Contacts
</div>
@ -173,7 +174,7 @@
<!-- / CONTACTS LIST-->
<!-- NO RESULTS MESSAGE -->
<div *ngIf="(contacts| filter: searchText).length === 0" class="no-results-message">
<div *ngIf="(contacts | filter: searchText).length === 0" class="no-results-message">
No results..
</div>
<!-- NO RESULTS MESSAGE-->

23
src/app/main/apps/chat/sidenavs/left/chats/chats.component.scss
View File

@ -1,6 +1,6 @@
@import "src/@fuse/scss/fuse";
:host {
chat-chats-sidenav {
display: flex;
flex: 1;
flex-direction: column;
@ -8,11 +8,12 @@
.sidenav-header {
mat-toolbar {
border-bottom: 1px solid rgba(0, 0, 0, .08);
border-bottom: 1px solid;
.avatar-wrapper {
.avatar, .status {
.avatar,
.status {
cursor: pointer;
}
}
@ -21,19 +22,16 @@
height: 36px;
line-height: 36px;
padding: 8px;
background: #FFFFFF;
font-size: 13px;
@include mat-elevation(1);
.icon {
margin: 0;
color: rgba(0, 0, 0, 0.54);
}
input {
padding-left: 12px;
height: 36px;
color: rgba(0, 0, 0, 0.54);
border: none;
}
}
@ -44,7 +42,8 @@
overflow: auto;
-webkit-overflow-scrolling: touch;
.contact-list, .chat-list {
.contact-list,
.chat-list {
.mat-subheader {
padding-left: 16px;
@ -52,7 +51,6 @@
font-weight: 300;
height: 88px;
line-height: 88px;
color: mat-color($accent);
}
.contact {
@ -60,7 +58,7 @@
text-align: left;
letter-spacing: .010em;
min-height: 88px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
border-bottom: 1px solid;
padding: 16px;
font-weight: 400;
@ -78,10 +76,8 @@
}
.contact-last-message {
line-height: 1.6em;
margin: 0;
font-weight: 500;
color: rgba(0, 0, 0, 0.54);
line-height: normal;
margin-top: 0;
}
.contact-mood {
@ -104,7 +100,6 @@
width: 100%;
height: 88px;
padding: 16px;
background: #FFFFFF;
font-size: 15px;
font-weight: 400;
}

11
src/app/main/apps/chat/sidenavs/left/chats/chats.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { ObservableMedia } from '@angular/flex-layout';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@ -9,10 +9,11 @@ import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/f
import { ChatService } from 'app/main/apps/chat/chat.service';
@Component({
selector : 'chat-chats-sidenav',
templateUrl: './chats.component.html',
styleUrls : ['./chats.component.scss'],
animations : fuseAnimations
selector : 'chat-chats-sidenav',
templateUrl : './chats.component.html',
styleUrls : ['./chats.component.scss'],
encapsulation: ViewEncapsulation.None,
animations : fuseAnimations
})
export class ChatChatsSidenavComponent implements OnInit, OnDestroy
{

2
src/app/main/apps/chat/sidenavs/left/left.component.scss
View File

@ -1,4 +1,4 @@
:host {
chat-left-sidenav {
display: flex;
flex-direction: column;
height: 100%;

11
src/app/main/apps/chat/sidenavs/left/left.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@ -7,10 +7,11 @@ import { fuseAnimations } from '@fuse/animations';
import { ChatService } from 'app/main/apps/chat/chat.service';
@Component({
selector : 'chat-left-sidenav',
templateUrl: './left.component.html',
styleUrls : ['./left.component.scss'],
animations : fuseAnimations
selector : 'chat-left-sidenav',
templateUrl : './left.component.html',
styleUrls : ['./left.component.scss'],
encapsulation: ViewEncapsulation.None,
animations : fuseAnimations
})
export class ChatLeftSidenavComponent implements OnInit, OnDestroy
{

72
src/app/main/apps/chat/sidenavs/left/user/user.component.html
View File

@ -2,7 +2,7 @@
<div class="sidenav-header">
<!-- USER TOOLBAR -->
<mat-toolbar class="mat-accent-bg">
<mat-toolbar class="accent">
<!-- TOOLBAR TOP -->
<mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
@ -28,50 +28,48 @@
</div>
<!-- SIDENAV CONTENT -->
<div class="sidenav-content p-16" fxFlex>
<div class="sidenav-content py-32 px-24" fxFlex>
<!-- USER MOOD -->
<mat-card>
<form [formGroup]="userForm" fxLayout="column">
<form [formGroup]="userForm" fxLayout="column">
<mat-form-field class="mb-24" fxFlex="0 1 auto">
<textarea matInput placeholder="Mood" name="mood"
formControlName="mood" rows="3"></textarea>
</mat-form-field>
<mat-form-field class="mb-24" fxFlex="0 1 auto">
<textarea matInput placeholder="Mood" name="mood"
formControlName="mood" rows="3"></textarea>
</mat-form-field>
<mat-radio-group formControlName="status" fxLayout="column">
<mat-radio-group formControlName="status" fxLayout="column">
<mat-radio-button value="online" class="py-8">
<div fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="status online mr-8"></mat-icon>
<span class="mat-h4 m-0">Online</span>
</div>
</mat-radio-button>
<mat-radio-button value="online" class="py-8">
<div fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="status online mr-8"></mat-icon>
<span class="mat-h4 m-0">Online</span>
</div>
</mat-radio-button>
<mat-radio-button value="away" class="py-8">
<div fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="status away mr-8"></mat-icon>
<span class="mat-h4 m-0">Away</span>
</div>
</mat-radio-button>
<mat-radio-button value="away" class="py-8">
<div fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="status away mr-8"></mat-icon>
<span class="mat-h4 m-0">Away</span>
</div>
</mat-radio-button>
<mat-radio-button value="do-not-disturb" class="py-8">
<div fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="status do-not-disturb mr-8"></mat-icon>
<span class="mat-h4 m-0">Do not disturb</span>
</div>
</mat-radio-button>
<mat-radio-button value="do-not-disturb" class="py-8">
<div fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="status do-not-disturb mr-8"></mat-icon>
<span class="mat-h4 m-0">Do not disturb</span>
</div>
</mat-radio-button>
<mat-radio-button value="offline" class="py-8">
<div fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="status offline mr-8"></mat-icon>
<span class="mat-h4 m-0">Offline</span>
</div>
</mat-radio-button>
</mat-radio-group>
<mat-radio-button value="offline" class="py-8">
<div fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="status offline mr-8"></mat-icon>
<span class="mat-h4 m-0">Offline</span>
</div>
</mat-radio-button>
</mat-radio-group>
</form>
</mat-card>
</form>
<!-- / USER MOOD -->
</div>

12
src/app/main/apps/chat/sidenavs/left/user/user.component.scss
View File

@ -1,6 +1,6 @@
@import "src/@fuse/scss/fuse";
:host {
chat-user-sidenav {
display: flex;
flex: 1;
flex-direction: column;
@ -10,15 +10,7 @@
mat-toolbar {
.toolbar-bottom {
height: 240px;
@include media-breakpoint-down(md) {
height: 180px;
}
height: 180px;
}
}
.sidenav-content {
background: whitesmoke;
}
}

9
src/app/main/apps/chat/sidenavs/left/user/user.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
@ -6,9 +6,10 @@ import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
import { ChatService } from 'app/main/apps/chat/chat.service';
@Component({
selector : 'chat-user-sidenav',
templateUrl: './user.component.html',
styleUrls : ['./user.component.scss']
selector : 'chat-user-sidenav',
templateUrl : './user.component.html',
styleUrls : ['./user.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class ChatUserSidenavComponent implements OnInit, OnDestroy
{

16
src/app/main/apps/chat/sidenavs/right/contact/contact.component.html
View File

@ -2,7 +2,7 @@
<div class="sidenav-header" *ngIf="contact">
<!-- CONTACT TOOLBAR -->
<mat-toolbar class="mat-accent-bg">
<mat-toolbar class="accent">
<!-- TOOLBAR TOP -->
<mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
@ -28,17 +28,11 @@
</div>
<!-- SIDENAV CONTENT -->
<div class="sidenav-content p-16" fxFlex *ngIf="contact">
<div class="sidenav-content py-32 px-24" fxFlex fxLayout="column" *ngIf="contact">
<!-- CONTACT MOOD -->
<mat-card>
<mat-form-field class="w-100-p">
<textarea matInput placeholder="Mood" name="mood"
[value]="contact.mood" rows="3" disabled>
</textarea>
</mat-form-field>
</mat-card>
<div class="secondary-text mb-8">Mood</div>
<div>{{contact.mood}}</div>
<!-- / CONTACT MOOD -->
</div>

12
src/app/main/apps/chat/sidenavs/right/contact/contact.component.scss
View File

@ -1,6 +1,6 @@
@import "src/@fuse/scss/fuse";
:host {
chat-contact-sidenav {
display: flex;
flex: 1;
flex-direction: column;
@ -10,15 +10,7 @@
mat-toolbar {
.toolbar-bottom {
height: 240px;
@include media-breakpoint-down(md) {
height: 180px;
}
height: 180px;
}
}
.sidenav-content {
background: whitesmoke;
}
}

13
src/app/main/apps/chat/sidenavs/right/contact/contact.component.ts
View File

@ -1,13 +1,14 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { ChatService } from 'app/main/apps/chat/chat.service';
@Component({
selector : 'chat-contact-sidenav',
templateUrl: './contact.component.html',
styleUrls : ['./contact.component.scss']
selector : 'chat-contact-sidenav',
templateUrl : './contact.component.html',
styleUrls : ['./contact.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class ChatContactSidenavComponent implements OnInit, OnDestroy
{
@ -41,8 +42,8 @@ export class ChatContactSidenavComponent implements OnInit, OnDestroy
this._chatService.onContactSelected
.pipe(takeUntil(this._unsubscribeAll))
.subscribe(contact => {
this.contact = contact;
});
this.contact = contact;
});
}
/**

Some files were not shown because too many files have changed in this diff Show More