purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-09 20:15:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/demo' into starter

Browse Source
This commit is contained in:
sercan 2021-06-15 08:36:32 +03:00
commit 90891eb201
101 changed files with 734 additions and 480 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@fuse/demo",
"version": "13.0.3",
"version": "13.1.0",
"license": "https://themeforest.net/licenses/standard",
"private": true,
"scripts": {
@ -12,17 +12,17 @@
"e2e": "ng e2e"
},
"dependencies": {
"@angular/animations": "12.0.2",
"@angular/cdk": "12.0.2",
"@angular/common": "12.0.2",
"@angular/compiler": "12.0.2",
"@angular/core": "12.0.2",
"@angular/forms": "12.0.2",
"@angular/material": "12.0.2",
"@angular/material-moment-adapter": "12.0.2",
"@angular/platform-browser": "12.0.2",
"@angular/platform-browser-dynamic": "12.0.2",
"@angular/router": "12.0.2",
"@angular/animations": "12.0.4",
"@angular/cdk": "12.0.4",
"@angular/common": "12.0.4",
"@angular/compiler": "12.0.4",
"@angular/core": "12.0.4",
"@angular/forms": "12.0.4",
"@angular/material": "12.0.4",
"@angular/material-moment-adapter": "12.0.4",
"@angular/platform-browser": "12.0.4",
"@angular/platform-browser-dynamic": "12.0.4",
"@angular/router": "12.0.4",
"@fullcalendar/angular": "4.4.5-beta",
"@fullcalendar/core": "4.4.2",
"@fullcalendar/daygrid": "4.4.2",
@ -32,32 +32,32 @@
"@fullcalendar/rrule": "4.4.2",
"@fullcalendar/timegrid": "4.4.2",
"@ngneat/transloco": "2.21.0",
"apexcharts": "3.26.3",
"apexcharts": "3.27.1",
"crypto-js": "3.3.0",
"highlight.js": "11.0.0",
"highlight.js": "11.0.1",
"lodash-es": "4.17.21",
"moment": "2.29.1",
"ng-apexcharts": "1.5.10",
"ng-apexcharts": "1.5.12",
"ngx-markdown": "12.0.1",
"ngx-quill": "14.0.0",
"perfect-scrollbar": "1.5.1",
"quill": "1.3.7",
"rrule": "2.6.8",
"rxjs": "6.6.7",
"tslib": "2.2.0",
"tslib": "2.3.0",
"web-animations-js": "2.3.2",
"zone.js": "0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "12.0.2",
"@angular-devkit/build-angular": "12.0.4",
"@angular-eslint/builder": "12.1.0",
"@angular-eslint/eslint-plugin": "12.1.0",
"@angular-eslint/eslint-plugin-template": "12.1.0",
"@angular-eslint/schematics": "12.1.0",
"@angular-eslint/template-parser": "12.1.0",
"@angular/cli": "12.0.2",
"@angular/compiler-cli": "12.0.2",
"@angular/language-service": "12.0.2",
"@angular/cli": "12.0.4",
"@angular/compiler-cli": "12.0.4",
"@angular/language-service": "12.0.4",
"@tailwindcss/aspect-ratio": "0.2.1",
"@tailwindcss/line-clamp": "0.2.1",
"@tailwindcss/typography": "0.4.1",
@ -67,23 +67,23 @@
"@types/jasmine": "3.6.11",
"@types/lodash": "4.14.170",
"@types/lodash-es": "4.17.4",
"@types/node": "12.20.14",
"@typescript-eslint/eslint-plugin": "4.26.0",
"@typescript-eslint/parser": "4.26.0",
"@types/node": "12.20.15",
"@typescript-eslint/eslint-plugin": "4.26.1",
"@typescript-eslint/parser": "4.26.1",
"autoprefixer": "10.2.6",
"chroma-js": "2.1.2",
"eslint": "7.27.0",
"eslint": "7.28.0",
"eslint-plugin-import": "2.23.4",
"eslint-plugin-jsdoc": "35.1.2",
"eslint-plugin-jsdoc": "35.2.0",
"eslint-plugin-prefer-arrow": "1.2.3",
"jasmine-core": "3.7.1",
"karma": "6.3.3",
"karma": "6.3.4",
"karma-chrome-launcher": "3.1.0",
"karma-coverage": "2.0.3",
"karma-jasmine": "4.0.1",
"karma-jasmine-html-reporter": "1.6.0",
"lodash": "4.17.21",
"postcss": "8.3.0",
"postcss": "8.3.3",
"tailwindcss": "2.1.4",
"typescript": "4.2.4"
}

9
src/@fuse/components/fullscreen/fullscreen.component.html
View File

@ -1,7 +1,12 @@
<!-- Button -->
<button
mat-icon-button
[matTooltip]="'Toggle Fullscreen'"
[matTooltip]="tooltip || 'Toggle Fullscreen'"
(click)="toggleFullscreen()">
<mat-icon [svgIcon]="'heroicons_outline:arrows-expand'"></mat-icon>
<ng-container [ngTemplateOutlet]="iconTpl || defaultIconTpl"></ng-container>
</button>
<!-- Default icon -->
<ng-template #defaultIconTpl>
<mat-icon [svgIcon]="'heroicons_outline:arrows-expand'"></mat-icon>
</ng-template>

4
src/@fuse/components/fullscreen/fullscreen.component.ts
View File

@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fullscreen.types';
@ -11,6 +11,8 @@ import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fulls
})
export class FuseFullscreenComponent implements OnInit
{
@Input() iconTpl: TemplateRef<any>;
@Input() tooltip: string;
private _fsDoc: FSDocument;
private _fsDocEl: FSDocumentElement;
private _isFullscreen: boolean = false;

6
src/@fuse/components/fullscreen/fullscreen.module.ts
View File

@ -3,15 +3,17 @@ import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
import { FuseFullscreenComponent } from '@fuse/components/fullscreen/fullscreen.component';
import { CommonModule } from '@angular/common';
@NgModule({
declarations: [
FuseFullscreenComponent
],
imports : [
imports: [
MatButtonModule,
MatIconModule,
MatTooltipModule
MatTooltipModule,
CommonModule
],
exports : [
FuseFullscreenComponent

4
src/@fuse/components/navigation/horizontal/components/basic/basic.component.html
View File

@ -19,7 +19,8 @@
<a
class="fuse-horizontal-navigation-item"
*ngIf="item.link && item.externalLink && !item.function && !item.disabled"
[href]="item.link">
[href]="item.link"
[target]="item.target || '_self'">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</a>
@ -49,6 +50,7 @@
class="fuse-horizontal-navigation-item"
*ngIf="item.link && item.externalLink && item.function && !item.disabled"
[href]="item.link"
[target]="item.target || '_self'"
(click)="item.function(item)"
mat-menu-item>
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>

6
src/@fuse/components/navigation/navigation.types.ts
View File

@ -17,6 +17,12 @@ export interface FuseNavigationItem
disabled?: boolean;
link?: string;
externalLink?: boolean;
target?:
| '_blank'
| '_self'
| '_parent'
| '_top'
| string;
exactMatch?: boolean;
isActiveMatchOptions?: IsActiveMatchOptions;
function?: (item: FuseNavigationItem) => void;

4
src/@fuse/components/navigation/vertical/components/basic/basic.component.html
View File

@ -19,7 +19,8 @@
<a
class="fuse-vertical-navigation-item"
*ngIf="item.link && item.externalLink && !item.function && !item.disabled"
[href]="item.link">
[href]="item.link"
[target]="item.target || '_self'">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</a>
@ -49,6 +50,7 @@
class="fuse-vertical-navigation-item"
*ngIf="item.link && item.externalLink && item.function && !item.disabled"
[href]="item.link"
[target]="item.target || '_self'"
(click)="item.function(item)">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</a>

1
src/@fuse/components/navigation/vertical/styles/appearances/default.scss
View File

@ -335,6 +335,7 @@ fuse-vertical-navigation {
}
> .fuse-vertical-navigation-item-children {
margin-top: 6px;
> *:last-child {
padding-bottom: 6px;

2
src/@fuse/version/fuse-version.ts
View File

@ -1,3 +1,3 @@
import { Version } from '@fuse/version/version';
export const FUSE_VERSION = new Version('13.0.3').full;
export const FUSE_VERSION = new Version('13.1.0').full;

44
src/app/app.resolvers.ts
View File

@ -1,9 +1,11 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
import { forkJoin, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { InitialData } from 'app/app.types';
import { MessagesService } from 'app/layout/common/messages/messages.service';
import { NavigationService } from 'app/core/navigation/navigation.service';
import { NotificationsService } from 'app/layout/common/notifications/notifications.service';
import { ShortcutsService } from 'app/layout/common/shortcuts/shortcuts.service';
import { UserService } from 'app/core/user/user.service';
@Injectable({
providedIn: 'root'
@ -13,7 +15,13 @@ export class InitialDataResolver implements Resolve<any>
/**
* Constructor
*/
constructor(private _httpClient: HttpClient)
constructor(
private _messagesService: MessagesService,
private _navigationService: NavigationService,
private _notificationsService: NotificationsService,
private _shortcutsService: ShortcutsService,
private _userService: UserService
)
{
}
@ -27,29 +35,15 @@ export class InitialDataResolver implements Resolve<any>
* @param route
* @param state
*/
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<InitialData>
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>
{
// Fork join multiple API endpoint calls to wait all of them to finish
return forkJoin([
this._httpClient.get<any>('api/common/messages'),
this._httpClient.get<any>('api/common/navigation'),
this._httpClient.get<any>('api/common/notifications'),
this._httpClient.get<any>('api/common/shortcuts'),
this._httpClient.get<any>('api/common/user')
]).pipe(
map(([messages, navigation, notifications, shortcuts, user]) => ({
messages,
navigation: {
compact : navigation.compact,
default : navigation.default,
futuristic: navigation.futuristic,
horizontal: navigation.horizontal
},
notifications,
shortcuts,
user
})
)
);
this._navigationService.get(),
this._messagesService.getAll(),
this._notificationsService.getAll(),
this._shortcutsService.getAll(),
this._userService.get()
]);
}
}

19
src/app/app.types.ts
View File

@ -1,19 +0,0 @@
import { FuseNavigationItem } from '@fuse/components/navigation';
import { Message } from 'app/layout/common/messages/messages.types';
import { Notification } from 'app/layout/common/notifications/notifications.types';
import { Shortcut } from 'app/layout/common/shortcuts/shortcuts.types';
import { User } from 'app/core/user/user.model';
export interface InitialData
{
messages: Message[];
navigation: {
compact: FuseNavigationItem[];
default: FuseNavigationItem[];
futuristic: FuseNavigationItem[];
horizontal: FuseNavigationItem[];
};
notifications: Notification[];
shortcuts: Shortcut[];
user: User;
}

48
src/app/core/navigation/navigation.service.ts Normal file
View File

@ -0,0 +1,48 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, ReplaySubject } from 'rxjs';
import { tap } from 'rxjs/operators';
import { Navigation } from 'app/core/navigation/navigation.types';
@Injectable({
providedIn: 'root'
})
export class NavigationService
{
private _navigation: ReplaySubject<Navigation> = new ReplaySubject<Navigation>(1);
/**
* Constructor
*/
constructor(private _httpClient: HttpClient)
{
}
// -----------------------------------------------------------------------------------------------------
// @ Accessors
// -----------------------------------------------------------------------------------------------------
/**
* Getter for navigation
*/
get navigation$(): Observable<Navigation>
{
return this._navigation.asObservable();
}
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Get all navigation data
*/
get(): Observable<Navigation>
{
return this._httpClient.get<Navigation>('api/common/navigation').pipe(
tap((navigation) => {
this._navigation.next(navigation);
})
);
}
}

9
src/app/core/navigation/navigation.types.ts Normal file
View File

@ -0,0 +1,9 @@
import { FuseNavigationItem } from '@fuse/components/navigation';
export interface Navigation
{
compact: FuseNavigationItem[];
default: FuseNavigationItem[];
futuristic: FuseNavigationItem[];
horizontal: FuseNavigationItem[];
}

17
src/app/core/user/user.service.ts
View File

@ -1,8 +1,8 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, ReplaySubject } from 'rxjs';
import { map } from 'rxjs/operators';
import { User } from 'app/core/user/user.model';
import { map, tap } from 'rxjs/operators';
import { User } from 'app/core/user/user.types';
@Injectable({
providedIn: 'root'
@ -42,6 +42,18 @@ export class UserService
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Get the current logged in user data
*/
get(): Observable<User>
{
return this._httpClient.get<User>('api/common/user').pipe(
tap((user) => {
this._user.next(user);
})
);
}
/**
* Update the user
*
@ -51,7 +63,6 @@ export class UserService
{
return this._httpClient.patch<User>('api/common/user', {user}).pipe(
map((response) => {
// Execute the observable
this._user.next(response);
})
);

0
src/app/core/user/user.model.ts → src/app/core/user/user.types.ts
View File

0
src/app/layout/common/language/language.component.html → src/app/layout/common/languages/languages.component.html
View File

8
src/app/layout/common/language/language.component.ts → src/app/layout/common/languages/languages.component.ts
View File

@ -4,13 +4,13 @@ import { AvailableLangs, TranslocoService } from '@ngneat/transloco';
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
@Component({
selector : 'language',
templateUrl : './language.component.html',
selector : 'languages',
templateUrl : './languages.component.html',
encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
exportAs : 'language'
exportAs : 'languages'
})
export class LanguageComponent implements OnInit, OnDestroy
export class LanguagesComponent implements OnInit, OnDestroy
{
availableLangs: AvailableLangs;
activeLang: string;

8
src/app/layout/common/language/language.module.ts → src/app/layout/common/languages/languages.module.ts
View File

@ -2,12 +2,12 @@ import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { LanguageComponent } from 'app/layout/common/language/language.component';
import { LanguagesComponent } from 'app/layout/common/languages/languages.component';
import { SharedModule } from 'app/shared/shared.module';
@NgModule({
declarations: [
LanguageComponent
LanguagesComponent
],
imports : [
MatButtonModule,
@ -16,9 +16,9 @@ import { SharedModule } from 'app/shared/shared.module';
SharedModule
],
exports : [
LanguageComponent
LanguagesComponent
]
})
export class LanguageModule
export class LanguagesModule
{
}

21
src/app/layout/common/messages/messages.component.ts
View File

@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';
import { MatButton } from '@angular/material/button';
@ -14,12 +14,12 @@ import { MessagesService } from 'app/layout/common/messages/messages.service';
changeDetection: ChangeDetectionStrategy.OnPush,
exportAs : 'messages'
})
export class MessagesComponent implements OnInit, OnChanges, OnDestroy
export class MessagesComponent implements OnInit, OnDestroy
{
@Input() messages: Message[];
@ViewChild('messagesOrigin') private _messagesOrigin: MatButton;
@ViewChild('messagesPanel') private _messagesPanel: TemplateRef<any>;
messages: Message[];
unreadCount: number = 0;
private _overlayRef: OverlayRef;
private _unsubscribeAll: Subject<any> = new Subject<any>();
@ -40,21 +40,6 @@ export class MessagesComponent implements OnInit, OnChanges, OnDestroy
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On changes
*
* @param changes
*/
ngOnChanges(changes: SimpleChanges): void
{
// Messages
if ( 'messages' in changes )
{
// Store the messages on the service
this._messagesService.store(changes.messages.currentValue);
}
}
/**
* On init
*/

16
src/app/layout/common/messages/messages.service.ts
View File

@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, ReplaySubject } from 'rxjs';
import { Message } from 'app/layout/common/messages/messages.types';
import { map, switchMap, take } from 'rxjs/operators';
import { map, switchMap, take, tap } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
@ -35,17 +35,15 @@ export class MessagesService
// -----------------------------------------------------------------------------------------------------
/**
* Store messages on the service
*
* @param messages
* Get all messages
*/
store(messages: Message[]): Observable<Message[]>
getAll(): Observable<Message[]>
{
// Load the messages
return this._httpClient.get<Message[]>('api/common/messages').pipe(
tap((messages) => {
this._messages.next(messages);
// Return the messages
return this.messages$;
})
);
}
/**

21
src/app/layout/common/notifications/notifications.component.ts
View File

@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';
import { MatButton } from '@angular/material/button';
@ -14,12 +14,12 @@ import { NotificationsService } from 'app/layout/common/notifications/notificati
changeDetection: ChangeDetectionStrategy.OnPush,
exportAs : 'notifications'
})
export class NotificationsComponent implements OnChanges, OnInit, OnDestroy
export class NotificationsComponent implements OnInit, OnDestroy
{
@Input() notifications: Notification[];
@ViewChild('notificationsOrigin') private _notificationsOrigin: MatButton;
@ViewChild('notificationsPanel') private _notificationsPanel: TemplateRef<any>;
notifications: Notification[];
unreadCount: number = 0;
private _overlayRef: OverlayRef;
private _unsubscribeAll: Subject<any> = new Subject<any>();
@ -40,21 +40,6 @@ export class NotificationsComponent implements OnChanges, OnInit, OnDestroy
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On changes
*
* @param changes
*/
ngOnChanges(changes: SimpleChanges): void
{
// Notifications
if ( 'notifications' in changes )
{
// Store the notifications on the service
this._notificationsService.store(changes.notifications.currentValue);
}
}
/**
* On init
*/

16
src/app/layout/common/notifications/notifications.service.ts
View File

@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, ReplaySubject } from 'rxjs';
import { Notification } from 'app/layout/common/notifications/notifications.types';
import { map, switchMap, take } from 'rxjs/operators';
import { map, switchMap, take, tap } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
@ -35,17 +35,15 @@ export class NotificationsService
// -----------------------------------------------------------------------------------------------------
/**
* Store notifications on the service
*
* @param notifications
* Get all notifications
*/
store(notifications: Notification[]): Observable<Notification[]>
getAll(): Observable<Notification[]>
{
// Load the notifications
return this._httpClient.get<Notification[]>('api/common/notifications').pipe(
tap((notifications) => {
this._notifications.next(notifications);
// Return the notifications
return this.notifications$;
})
);
}
/**

130
src/app/layout/common/search/search.component.html
View File

@ -6,7 +6,6 @@
(click)="open()">
<mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
</button>
<div
class="absolute inset-0 flex items-center flex-shrink-0 z-99 bg-card"
*ngIf="opened"
@ -23,23 +22,37 @@
(keydown)="onKeydown($event)"
#barSearchInput>
<mat-autocomplete
class="max-h-128 border-t rounded-b shadow-md"
class="max-h-128 sm:px-2 border-t rounded-b shadow-md"
[disableRipple]="true"
#matAutocomplete="matAutocomplete">
<mat-option
class="h-14 px-6 py-0 sm:px-8 text-md pointer-events-none text-secondary bg-transparent"
*ngIf="results && !results.length">
class="py-0 px-6 text-md pointer-events-none text-secondary bg-transparent"
*ngIf="resultSets && !resultSets.length">
No results found!
</mat-option>
<ng-container *ngFor="let result of results; trackBy: trackByFn">
<ng-container *ngFor="let resultSet of resultSets; trackBy: trackByFn">
<mat-optgroup class="flex items-center mt-2 px-2">
<span class="text-sm font-semibold tracking-wider text-secondary">{{resultSet.label.toUpperCase()}}</span>
</mat-optgroup>
<ng-container *ngFor="let result of resultSet.results; trackBy: trackByFn">
<mat-option
class="group relative h-14 px-6 py-0 sm:px-8 text-md"
class="group relative mb-1 py-0 px-6 text-md rounded-md hover:bg-gray-100 dark:hover:bg-hover"
[routerLink]="result.link">
<ng-container
[ngTemplateOutlet]="searchResult"
[ngTemplateOutletContext]="{$implicit: result}"></ng-container>
<!-- Contacts -->
<ng-container *ngIf="resultSet.id === 'contacts'">
<ng-container *ngTemplateOutlet="contactResult; context: {$implicit: result}"></ng-container>
</ng-container>
<!-- Pages -->
<ng-container *ngIf="resultSet.id === 'pages'">
<ng-container *ngTemplateOutlet="pageResult; context: {$implicit: result}"></ng-container>
</ng-container>
<!-- Tasks -->
<ng-container *ngIf="resultSet.id === 'tasks'">
<ng-container *ngTemplateOutlet="taskResult; context: {$implicit: result}"></ng-container>
</ng-container>
</mat-option>
</ng-container>
</ng-container>
</mat-autocomplete>
<button
class="absolute top-1/2 right-5 sm:right-7 flex-shrink-0 w-10 h-10 -mt-5"
@ -69,62 +82,89 @@
[disableRipple]="true"
#matAutocomplete="matAutocomplete">
<mat-option
class="h-14 px-5 py-0 text-md pointer-events-none text-secondary bg-transparent"
*ngIf="results && !results.length">
class="py-0 px-6 text-md pointer-events-none text-secondary bg-transparent"
*ngIf="resultSets && !resultSets.length">
No results found!
</mat-option>
<ng-container *ngFor="let result of results; trackBy: trackByFn">
<ng-container *ngFor="let resultSet of resultSets; trackBy: trackByFn">
<mat-optgroup class="flex items-center mt-2 px-2">
<span class="text-sm font-semibold tracking-wider text-secondary">{{resultSet.label.toUpperCase()}}</span>
</mat-optgroup>
<ng-container *ngFor="let result of resultSet.results; trackBy: trackByFn">
<mat-option
class="group relative h-14 px-5 py-0 text-md"
class="group relative mb-1 py-0 px-6 text-md rounded-md hover:bg-gray-100 dark:hover:bg-hover"
[routerLink]="result.link">
<ng-container
[ngTemplateOutlet]="searchResult"
[ngTemplateOutletContext]="{$implicit: result}"></ng-container>
<!-- Contacts -->
<ng-container *ngIf="resultSet.id === 'contacts'">
<ng-container *ngTemplateOutlet="contactResult; context: {$implicit: result}"></ng-container>
</ng-container>
<!-- Pages -->
<ng-container *ngIf="resultSet.id === 'pages'">
<ng-container *ngTemplateOutlet="pageResult; context: {$implicit: result}"></ng-container>
</ng-container>
<!-- Tasks -->
<ng-container *ngIf="resultSet.id === 'tasks'">
<ng-container *ngTemplateOutlet="taskResult; context: {$implicit: result}"></ng-container>
</ng-container>
</mat-option>
</ng-container>
</ng-container>
</mat-autocomplete>
</div>
</ng-container>
<!-- Contact result template -->
<ng-template
#searchResult
#contactResult
let-result>
<!-- Hover indicator -->
<div class="absolute inset-y-0 left-0 hidden w-1 bg-primary group-hover:flex"></div>
<!-- Contact result -->
<ng-container *ngIf="result.resultType === 'contact'">
<div class="flex items-center">
<div class="px-1.5 py-1 mr-4 text-xs font-semibold leading-normal rounded text-indigo-50 bg-indigo-600">Contact</div>
<div class="overflow-hidden overflow-ellipsis">
<span [innerHTML]="result.title"></span>
</div>
<div class="flex flex-shrink-0 items-center justify-center w-8 h-8 ml-auto rounded-full overflow-hidden bg-primary-100 dark:bg-black dark:bg-opacity-5">
<div class="flex flex-shrink-0 items-center justify-center w-8 h-8 rounded-full overflow-hidden bg-primary-100 dark:bg-primary-800">
<img
*ngIf="result.avatar"
[src]="result.avatar">
<mat-icon
class="m-0 icon-size-5 text-primary"
class="m-0 icon-size-5 text-primary dark:text-primary-400"
*ngIf="!result.avatar"
[svgIcon]="'heroicons_outline:user-circle'"></mat-icon>
</div>
</div>
</ng-container>
<!-- Page result -->
<ng-container *ngIf="result.resultType === 'page'">
<div class="flex items-center">
<div class="px-1.5 py-1 mr-4 text-xs font-semibold leading-normal rounded text-teal-50 bg-teal-600">Page</div>
<div class="flex flex-col overflow-hidden overflow-ellipsis">
<span
class="overflow-hidden overflow-ellipsis whitespace-nowrap leading-normal"
[innerHTML]="result.title"></span>
<span
class="mt-1 text-secondary overflow-hidden overflow-ellipsis whitespace-nowrap leading-normal text-sm no-underline"
[routerLink]="result.link">{{result.link}}</span>
<div class="ml-3 truncate">
<span [innerHTML]="result.name"></span>
</div>
</div>
</ng-container>
</ng-template>
<!-- Page result template -->
<ng-template
#pageResult
let-result>
<div class="flex flex-col">
<div
class="truncate leading-normal"
[innerHTML]="result.title"></div>
<div class="truncate leading-normal text-sm text-secondary">
{{result.link}}
</div>
</div>
</ng-template>
<!-- Task result template -->
<ng-template
#taskResult
let-result>
<div class="flex items-center">
<ng-container *ngIf="result.completed">
<mat-icon
class="mr-0 text-primary dark:text-primary-400"
[svgIcon]="'heroicons_outline:check-circle'"></mat-icon>
</ng-container>
<ng-container *ngIf="!result.completed">
<mat-icon
class="mr-0 text-hint"
[svgIcon]="'heroicons_outline:check-circle'"></mat-icon>
</ng-container>
<div
class="ml-3 truncate leading-normal"
[ngClass]="{'line-through text-hint': result.completed}"
[innerHTML]="result.title"></div>
</div>
</ng-template>

14
src/app/layout/common/search/search.component.ts
View File

@ -20,7 +20,7 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
@Output() search: EventEmitter<any> = new EventEmitter<any>();
opened: boolean = false;
results: any[];
resultSets: any[];
searchControl: FormControl = new FormControl();
private _unsubscribeAll: Subject<any> = new Subject<any>();
@ -104,12 +104,12 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
takeUntil(this._unsubscribeAll),
map((value) => {
// Set the search results to null if there is no value or
// Set the resultSets to null if there is no value or
// the length of the value is smaller than the minLength
// so the autocomplete panel can be closed
if ( !value || value.length < this.minLength )
{
this.results = null;
this.resultSets = null;
}
// Continue
@ -121,13 +121,13 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
)
.subscribe((value) => {
this._httpClient.post('api/common/search', {query: value})
.subscribe((response: any) => {
.subscribe((resultSets: any) => {
// Store the results
this.results = response.results;
// Store the result sets
this.resultSets = resultSets;
// Execute the event
this.search.next(this.results);
this.search.next(resultSets);
});
});
}

10
src/app/layout/common/shortcuts/shortcuts.component.html
View File

@ -21,7 +21,15 @@
[svgIcon]="'heroicons_solid:x'"></mat-icon>
</button>
</div>
<div class="text-lg font-medium leading-10">Shortcuts</div>
<div class="flex items-center text-lg font-medium leading-10">
<span class="">Shortcuts</span>
<ng-container *ngIf="mode !== 'view'">
<span class="ml-1">
<ng-container *ngIf="mode === 'add'">- Add new</ng-container>
<ng-container *ngIf="mode === 'modify' || mode === 'edit'">- Editing</ng-container>
</span>
</ng-container>
</div>
<div class="ml-auto">
<!-- View mode -->

21
src/app/layout/common/shortcuts/shortcuts.component.ts
View File

@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { TemplatePortal } from '@angular/cdk/portal';
@ -15,14 +15,14 @@ import { ShortcutsService } from 'app/layout/common/shortcuts/shortcuts.service'
changeDetection: ChangeDetectionStrategy.OnPush,
exportAs : 'shortcuts'
})
export class ShortcutsComponent implements OnChanges, OnInit, OnDestroy
export class ShortcutsComponent implements OnInit, OnDestroy
{
@Input() shortcuts: Shortcut[];
@ViewChild('shortcutsOrigin') private _shortcutsOrigin: MatButton;
@ViewChild('shortcutsPanel') private _shortcutsPanel: TemplateRef<any>;
mode: 'view' | 'modify' | 'add' | 'edit' = 'view';
shortcutForm: FormGroup;
shortcuts: Shortcut[];
private _overlayRef: OverlayRef;
private _unsubscribeAll: Subject<any> = new Subject<any>();
@ -43,21 +43,6 @@ export class ShortcutsComponent implements OnChanges, OnInit, OnDestroy
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On changes
*
* @param changes
*/
ngOnChanges(changes: SimpleChanges): void
{
// Shortcuts
if ( 'shortcuts' in changes )
{
// Store the shortcuts on the service
this._shortcutsService.store(changes.shortcuts.currentValue);
}
}
/**
* On init
*/

16
src/app/layout/common/shortcuts/shortcuts.service.ts
View File

@ -1,7 +1,7 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, ReplaySubject } from 'rxjs';
import { map, switchMap, take } from 'rxjs/operators';
import { map, switchMap, take, tap } from 'rxjs/operators';
import { Shortcut } from 'app/layout/common/shortcuts/shortcuts.types';
@Injectable({
@ -35,17 +35,15 @@ export class ShortcutsService
// -----------------------------------------------------------------------------------------------------
/**
* Store shortcuts on the service
*
* @param shortcuts
* Get all messages
*/
store(shortcuts: Shortcut[]): Observable<Shortcut[]>
getAll(): Observable<Shortcut[]>
{
// Load the shortcuts
return this._httpClient.get<Shortcut[]>('api/common/shortcuts').pipe(
tap((shortcuts) => {
this._shortcuts.next(shortcuts);
// Return the shortcuts
return this.shortcuts$;
})
);
}
/**

0
src/app/layout/common/user-menu/user-menu.component.html → src/app/layout/common/user/user.component.html
View File

10
src/app/layout/common/user-menu/user-menu.component.ts → src/app/layout/common/user/user.component.ts
View File

@ -3,17 +3,17 @@ import { Router } from '@angular/router';
import { BooleanInput } from '@angular/cdk/coercion';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { User } from 'app/core/user/user.model';
import { User } from 'app/core/user/user.types';
import { UserService } from 'app/core/user/user.service';
@Component({
selector : 'user-menu',
templateUrl : './user-menu.component.html',
selector : 'user',
templateUrl : './user.component.html',
encapsulation : ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
exportAs : 'userMenu'
exportAs : 'user'
})
export class UserMenuComponent implements OnInit, OnDestroy
export class UserComponent implements OnInit, OnDestroy
{
/* eslint-disable @typescript-eslint/naming-convention */
static ngAcceptInputType_showAvatar: BooleanInput;

8
src/app/layout/common/user-menu/user-menu.module.ts → src/app/layout/common/user/user.module.ts
View File

@ -3,12 +3,12 @@ import { MatButtonModule } from '@angular/material/button';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { UserMenuComponent } from 'app/layout/common/user-menu/user-menu.component';
import { UserComponent } from 'app/layout/common/user/user.component';
import { SharedModule } from 'app/shared/shared.module';
@NgModule({
declarations: [
UserMenuComponent
UserComponent
],
imports : [
MatButtonModule,
@ -18,9 +18,9 @@ import { SharedModule } from 'app/shared/shared.module';
SharedModule
],
exports : [
UserMenuComponent
UserComponent
]
})
export class UserMenuModule
export class UserModule
{
}

14
src/app/layout/layouts/horizontal/centered/centered.component.html
View File

@ -6,7 +6,7 @@
class="dark bg-gray-900 print:hidden"
[mode]="'over'"
[name]="'mainNavigation'"
[navigation]="data.navigation.default"
[navigation]="navigation.default"
[opened]="false">
<!-- Navigation header hook -->
<ng-container fuseVerticalNavigationContentHeader>
@ -50,7 +50,7 @@
<fuse-horizontal-navigation
class="mr-2"
[name]="'mainNavigation'"
[navigation]="data.navigation.horizontal"></fuse-horizontal-navigation>
[navigation]="navigation.horizontal"></fuse-horizontal-navigation>
</ng-container>
<!-- Navigation toggle button -->
<ng-container *ngIf="isScreenSmall">
@ -63,13 +63,13 @@
</ng-container>
<!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2">
<language></language>
<languages></languages>
<fuse-fullscreen></fuse-fullscreen>
<search [appearance]="'bar'"></search>
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>
<messages [messages]="data.messages"></messages>
<notifications [notifications]="data.notifications"></notifications>
<user-menu></user-menu>
<shortcuts></shortcuts>
<messages></messages>
<notifications></notifications>
<user></user>
</div>
</div>

14
src/app/layout/layouts/horizontal/centered/centered.component.ts
View File

@ -4,7 +4,8 @@ import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
import { InitialData } from 'app/app.types';
import { Navigation } from 'app/core/navigation/navigation.types';
import { NavigationService } from 'app/core/navigation/navigation.service';
@Component({
selector : 'centered-layout',
@ -13,7 +14,7 @@ import { InitialData } from 'app/app.types';
})
export class CenteredLayoutComponent implements OnInit, OnDestroy
{
data: InitialData;
navigation: Navigation;
isScreenSmall: boolean;
private _unsubscribeAll: Subject<any> = new Subject<any>();
@ -23,6 +24,7 @@ export class CenteredLayoutComponent implements OnInit, OnDestroy
constructor(
private _activatedRoute: ActivatedRoute,
private _router: Router,
private _navigationService: NavigationService,
private _fuseMediaWatcherService: FuseMediaWatcherService,
private _fuseNavigationService: FuseNavigationService
)
@ -50,9 +52,11 @@ export class CenteredLayoutComponent implements OnInit, OnDestroy
*/
ngOnInit(): void
{
// Subscribe to the resolved route data
this._activatedRoute.data.subscribe((data: Data) => {
this.data = data.initialData;
// Subscribe to navigation data
this._navigationService.navigation$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((navigation: Navigation) => {
this.navigation = navigation;
});
// Subscribe to media changes

8
src/app/layout/layouts/horizontal/centered/centered.module.ts
View File

@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
import { UserModule } from 'app/layout/common/user/user.module';
import { SharedModule } from 'app/shared/shared.module';
import { CenteredLayoutComponent } from 'app/layout/layouts/horizontal/centered/centered.component';
@ -29,12 +29,12 @@ import { CenteredLayoutComponent } from 'app/layout/layouts/horizontal/centered/
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
LanguagesModule,
MessagesModule,
NotificationsModule,
SearchModule,
ShortcutsModule,
UserMenuModule,
UserModule,
SharedModule
],
exports : [

14
src/app/layout/layouts/horizontal/enterprise/enterprise.component.html
View File

@ -4,7 +4,7 @@
class="dark bg-gray-900 print:hidden"
[mode]="'over'"
[name]="'mainNavigation'"
[navigation]="data.navigation.default"
[navigation]="navigation.default"
[opened]="false">
<!-- Navigation header hook -->
<ng-container fuseVerticalNavigationContentHeader>
@ -46,13 +46,13 @@
</ng-container>
<!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2">
<language></language>
<languages></languages>
<fuse-fullscreen></fuse-fullscreen>
<search [appearance]="'bar'"></search>
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>
<messages [messages]="data.messages"></messages>
<notifications [notifications]="data.notifications"></notifications>
<user-menu></user-menu>
<shortcuts></shortcuts>
<messages></messages>
<notifications></notifications>
<user></user>
</div>
</div>
</div>
@ -63,7 +63,7 @@
<fuse-horizontal-navigation
class="-mx-4"
[name]="'mainNavigation'"
[navigation]="data.navigation.horizontal"></fuse-horizontal-navigation>
[navigation]="navigation.horizontal"></fuse-horizontal-navigation>
</div>
</div>
</ng-container>

16
src/app/layout/layouts/horizontal/enterprise/enterprise.component.ts
View File

@ -1,10 +1,11 @@
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Data, Router } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
import { InitialData } from 'app/app.types';
import { Navigation } from 'app/core/navigation/navigation.types';
import { NavigationService } from 'app/core/navigation/navigation.service';
@Component({
selector : 'enterprise-layout',
@ -13,8 +14,8 @@ import { InitialData } from 'app/app.types';
})
export class EnterpriseLayoutComponent implements OnInit, OnDestroy
{
data: InitialData;
isScreenSmall: boolean;
navigation: Navigation;
private _unsubscribeAll: Subject<any> = new Subject<any>();
/**
@ -23,6 +24,7 @@ export class EnterpriseLayoutComponent implements OnInit, OnDestroy
constructor(
private _activatedRoute: ActivatedRoute,
private _router: Router,
private _navigationService: NavigationService,
private _fuseMediaWatcherService: FuseMediaWatcherService,
private _fuseNavigationService: FuseNavigationService
)
@ -50,9 +52,11 @@ export class EnterpriseLayoutComponent implements OnInit, OnDestroy
*/
ngOnInit(): void
{
// Subscribe to the resolved route data
this._activatedRoute.data.subscribe((data: Data) => {
this.data = data.initialData;
// Subscribe to navigation data
this._navigationService.navigation$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((navigation: Navigation) => {
this.navigation = navigation;
});
// Subscribe to media changes

8
src/app/layout/layouts/horizontal/enterprise/enterprise.module.ts
View File

@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
import { UserModule } from 'app/layout/common/user/user.module';
import { SharedModule } from 'app/shared/shared.module';
import { EnterpriseLayoutComponent } from 'app/layout/layouts/horizontal/enterprise/enterprise.component';
@ -29,12 +29,12 @@ import { EnterpriseLayoutComponent } from 'app/layout/layouts/horizontal/enterpr
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
LanguagesModule,
MessagesModule,
NotificationsModule,
SearchModule,
ShortcutsModule,
UserMenuModule,
UserModule,
SharedModule
],
exports : [

14
src/app/layout/layouts/horizontal/material/material.component.html
View File

@ -4,7 +4,7 @@
class="dark bg-gray-900 print:hidden"
[mode]="'over'"
[name]="'mainNavigation'"
[navigation]="data.navigation.default"
[navigation]="navigation.default"
[opened]="false">
<!-- Navigation header hook -->
<ng-container fuseVerticalNavigationContentHeader>
@ -52,13 +52,13 @@
</ng-container>
<!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2">
<language></language>
<languages></languages>
<fuse-fullscreen></fuse-fullscreen>
<search [appearance]="'bar'"></search>
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>
<messages [messages]="data.messages"></messages>
<notifications [notifications]="data.notifications"></notifications>
<user-menu></user-menu>
<shortcuts></shortcuts>
<messages></messages>
<notifications></notifications>
<user></user>
</div>
</div>
<!-- Bottom bar -->
@ -66,7 +66,7 @@
<div class="relative flex flex-auto flex-0 items-center h-16 px-4">
<fuse-horizontal-navigation
[name]="'mainNavigation'"
[navigation]="data.navigation.horizontal"></fuse-horizontal-navigation>
[navigation]="navigation.horizontal"></fuse-horizontal-navigation>
</div>
</ng-container>
</div>

16
src/app/layout/layouts/horizontal/material/material.component.ts
View File

@ -1,10 +1,11 @@
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Data, Router } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
import { InitialData } from 'app/app.types';
import { Navigation } from 'app/core/navigation/navigation.types';
import { NavigationService } from 'app/core/navigation/navigation.service';
@Component({
selector : 'material-layout',
@ -13,8 +14,8 @@ import { InitialData } from 'app/app.types';
})
export class MaterialLayoutComponent implements OnInit, OnDestroy
{
data: InitialData;
isScreenSmall: boolean;
navigation: Navigation;
private _unsubscribeAll: Subject<any> = new Subject<any>();
/**
@ -23,6 +24,7 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy
constructor(
private _activatedRoute: ActivatedRoute,
private _router: Router,
private _navigationService: NavigationService,
private _fuseMediaWatcherService: FuseMediaWatcherService,
private _fuseNavigationService: FuseNavigationService
)
@ -50,9 +52,11 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy
*/
ngOnInit(): void
{
// Subscribe to the resolved route data
this._activatedRoute.data.subscribe((data: Data) => {
this.data = data.initialData;
// Subscribe to navigation data
this._navigationService.navigation$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((navigation: Navigation) => {
this.navigation = navigation;
});
// Subscribe to media changes

8
src/app/layout/layouts/horizontal/material/material.module.ts
View File

@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
import { UserModule } from 'app/layout/common/user/user.module';
import { SharedModule } from 'app/shared/shared.module';
import { MaterialLayoutComponent } from 'app/layout/layouts/horizontal/material/material.component';
@ -29,12 +29,12 @@ import { MaterialLayoutComponent } from 'app/layout/layouts/horizontal/material/
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
LanguagesModule,
MessagesModule,
NotificationsModule,
SearchModule,
ShortcutsModule,
UserMenuModule,
UserModule,
SharedModule
],
exports : [

14
src/app/layout/layouts/horizontal/modern/modern.component.html
View File

@ -4,7 +4,7 @@
class="dark bg-gray-900 print:hidden"
[mode]="'over'"
[name]="'mainNavigation'"
[navigation]="data.navigation.default"
[navigation]="navigation.default"
[opened]="false">
<!-- Navigation header hook -->
<ng-container fuseVerticalNavigationContentHeader>
@ -43,7 +43,7 @@
<fuse-horizontal-navigation
class="mr-2"
[name]="'mainNavigation'"
[navigation]="data.navigation.horizontal"></fuse-horizontal-navigation>
[navigation]="navigation.horizontal"></fuse-horizontal-navigation>
</ng-container>
<!-- Navigation toggle button -->
<ng-container *ngIf="isScreenSmall">
@ -55,13 +55,13 @@
</ng-container>
<!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2">
<language></language>
<languages></languages>
<fuse-fullscreen></fuse-fullscreen>
<search [appearance]="'bar'"></search>
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>
<messages [messages]="data.messages"></messages>
<notifications [notifications]="data.notifications"></notifications>
<user-menu></user-menu>
<shortcuts></shortcuts>
<messages></messages>
<notifications></notifications>
<user></user>
</div>
</div>

16
src/app/layout/layouts/horizontal/modern/modern.component.ts
View File

@ -1,10 +1,11 @@
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Data, Router } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
import { InitialData } from 'app/app.types';
import { Navigation } from 'app/core/navigation/navigation.types';
import { NavigationService } from 'app/core/navigation/navigation.service';
@Component({
selector : 'modern-layout',
@ -13,8 +14,8 @@ import { InitialData } from 'app/app.types';
})
export class ModernLayoutComponent implements OnInit, OnDestroy
{
data: InitialData;
isScreenSmall: boolean;
navigation: Navigation;
private _unsubscribeAll: Subject<any> = new Subject<any>();
/**
@ -23,6 +24,7 @@ export class ModernLayoutComponent implements OnInit, OnDestroy
constructor(
private _activatedRoute: ActivatedRoute,
private _router: Router,
private _navigationService: NavigationService,
private _fuseMediaWatcherService: FuseMediaWatcherService,
private _fuseNavigationService: FuseNavigationService
)
@ -50,9 +52,11 @@ export class ModernLayoutComponent implements OnInit, OnDestroy
*/
ngOnInit(): void
{
// Subscribe to the resolved route data
this._activatedRoute.data.subscribe((data: Data) => {
this.data = data.initialData;
// Subscribe to navigation data
this._navigationService.navigation$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((navigation: Navigation) => {
this.navigation = navigation;
});
// Subscribe to media changes

8
src/app/layout/layouts/horizontal/modern/modern.module.ts
View File

@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
import { UserModule } from 'app/layout/common/user/user.module';
import { SharedModule } from 'app/shared/shared.module';
import { ModernLayoutComponent } from 'app/layout/layouts/horizontal/modern/modern.component';
@ -29,12 +29,12 @@ import { ModernLayoutComponent } from 'app/layout/layouts/horizontal/modern/mode
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
LanguagesModule,
MessagesModule,
NotificationsModule,
SearchModule,
ShortcutsModule,
UserMenuModule,
UserModule,
SharedModule
],
exports : [

12
src/app/layout/layouts/vertical/classic/classic.component.html
View File

@ -3,7 +3,7 @@
class="dark bg-gray-900 print:hidden"
[mode]="isScreenSmall ? 'over' : 'side'"
[name]="'mainNavigation'"
[navigation]="data.navigation.default"
[navigation]="navigation.default"
[opened]="!isScreenSmall">
<!-- Navigation header hook -->
<ng-container fuseVerticalNavigationContentHeader>
@ -36,13 +36,13 @@
</button>
<!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2">
<language></language>
<languages></languages>
<fuse-fullscreen></fuse-fullscreen>
<search [appearance]="'bar'"></search>
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>
<messages [messages]="data.messages"></messages>
<notifications [notifications]="data.notifications"></notifications>
<user-menu></user-menu>
<shortcuts></shortcuts>
<messages></messages>
<notifications></notifications>
<user></user>
</div>
</div>

16
src/app/layout/layouts/vertical/classic/classic.component.ts
View File

@ -1,10 +1,11 @@
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Data, Router } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
import { InitialData } from 'app/app.types';
import { Navigation } from 'app/core/navigation/navigation.types';
import { NavigationService } from 'app/core/navigation/navigation.service';
@Component({
selector : 'classic-layout',
@ -13,8 +14,8 @@ import { InitialData } from 'app/app.types';
})
export class ClassicLayoutComponent implements OnInit, OnDestroy
{
data: InitialData;
isScreenSmall: boolean;
navigation: Navigation;
private _unsubscribeAll: Subject<any> = new Subject<any>();
/**
@ -23,6 +24,7 @@ export class ClassicLayoutComponent implements OnInit, OnDestroy
constructor(
private _activatedRoute: ActivatedRoute,
private _router: Router,
private _navigationService: NavigationService,
private _fuseMediaWatcherService: FuseMediaWatcherService,
private _fuseNavigationService: FuseNavigationService
)
@ -50,9 +52,11 @@ export class ClassicLayoutComponent implements OnInit, OnDestroy
*/
ngOnInit(): void
{
// Subscribe to the resolved route data
this._activatedRoute.data.subscribe((data: Data) => {
this.data = data.initialData;
// Subscribe to navigation data
this._navigationService.navigation$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((navigation: Navigation) => {
this.navigation = navigation;
});
// Subscribe to media changes

8
src/app/layout/layouts/vertical/classic/classic.module.ts
View File

@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
import { UserModule } from 'app/layout/common/user/user.module';
import { SharedModule } from 'app/shared/shared.module';
import { ClassicLayoutComponent } from 'app/layout/layouts/vertical/classic/classic.component';
@ -29,12 +29,12 @@ import { ClassicLayoutComponent } from 'app/layout/layouts/vertical/classic/clas
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
LanguagesModule,
MessagesModule,
NotificationsModule,
SearchModule,
ShortcutsModule,
UserMenuModule,
UserModule,
SharedModule
],
exports : [

22
src/app/layout/layouts/vertical/classy/classy.component.html
View File

@ -3,7 +3,7 @@
class="dark bg-gray-900 print:hidden"
[mode]="isScreenSmall ? 'over' : 'side'"
[name]="'mainNavigation'"
[navigation]="data.navigation.default"
[navigation]="navigation.default"
[opened]="!isScreenSmall">
<!-- Navigation header hook -->
<ng-container fuseVerticalNavigationContentHeader>
@ -16,8 +16,8 @@
</div>
<!-- Components -->
<div class="flex items-center ml-auto">
<notifications [notifications]="data.notifications"></notifications>
<user-menu [showAvatar]="false"></user-menu>
<notifications></notifications>
<user [showAvatar]="false"></user>
</div>
</div>
<!-- User -->
@ -25,20 +25,20 @@
<div class="relative w-24 h-24">
<img
class="w-full h-full rounded-full"
*ngIf="data.user.avatar"
[src]="data.user.avatar"
*ngIf="user.avatar"
[src]="user.avatar"
alt="User avatar">
<mat-icon
class="icon-size-24"
*ngIf="!data.user.avatar"
*ngIf="!user.avatar"
[svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
</div>
<div class="flex flex-col items-center justify-center w-full mt-6">
<div class="w-full whitespace-nowrap overflow-ellipsis overflow-hidden text-center leading-normal font-medium">
{{data.user.name}}
{{user.name}}
</div>
<div class="w-full mt-0.5 whitespace-nowrap overflow-ellipsis overflow-hidden text-center text-md leading-normal font-medium text-secondary">
{{data.user.email}}
{{user.email}}
</div>
</div>
</div>
@ -66,11 +66,11 @@
</button>
<!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2">
<language></language>
<languages></languages>
<fuse-fullscreen></fuse-fullscreen>
<search [appearance]="'bar'"></search>
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>
<messages [messages]="data.messages"></messages>
<shortcuts></shortcuts>
<messages></messages>
</div>
</div>

27
src/app/layout/layouts/vertical/classy/classy.component.ts
View File

@ -1,10 +1,13 @@
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Data, Router } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
import { InitialData } from 'app/app.types';
import { Navigation } from 'app/core/navigation/navigation.types';
import { NavigationService } from 'app/core/navigation/navigation.service';
import { User } from 'app/core/user/user.types';
import { UserService } from 'app/core/user/user.service';
@Component({
selector : 'classy-layout',
@ -13,8 +16,9 @@ import { InitialData } from 'app/app.types';
})
export class ClassyLayoutComponent implements OnInit, OnDestroy
{
data: InitialData;
isScreenSmall: boolean;
navigation: Navigation;
user: User;
private _unsubscribeAll: Subject<any> = new Subject<any>();
/**
@ -23,6 +27,8 @@ export class ClassyLayoutComponent implements OnInit, OnDestroy
constructor(
private _activatedRoute: ActivatedRoute,
private _router: Router,
private _navigationService: NavigationService,
private _userService: UserService,
private _fuseMediaWatcherService: FuseMediaWatcherService,
private _fuseNavigationService: FuseNavigationService
)
@ -50,9 +56,18 @@ export class ClassyLayoutComponent implements OnInit, OnDestroy
*/
ngOnInit(): void
{
// Subscribe to the resolved route data
this._activatedRoute.data.subscribe((data: Data) => {
this.data = data.initialData;
// Subscribe to navigation data
this._navigationService.navigation$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((navigation: Navigation) => {
this.navigation = navigation;
});
// Subscribe to the user service
this._userService.user$
.pipe((takeUntil(this._unsubscribeAll)))
.subscribe((user: User) => {
this.user = user;
});
// Subscribe to media changes

8
src/app/layout/layouts/vertical/classy/classy.module.ts
View File

@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { FuseFullscreenModule } from '@fuse/components/fullscreen/fullscreen.module';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
import { UserModule } from 'app/layout/common/user/user.module';
import { SharedModule } from 'app/shared/shared.module';
import { ClassyLayoutComponent } from 'app/layout/layouts/vertical/classy/classy.component';
@ -29,12 +29,12 @@ import { ClassyLayoutComponent } from 'app/layout/layouts/vertical/classy/classy
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
LanguagesModule,
MessagesModule,
NotificationsModule,
SearchModule,
ShortcutsModule,
UserMenuModule,
UserModule,
SharedModule
],
exports : [

12
src/app/layout/layouts/vertical/compact/compact.component.html
View File

@ -4,7 +4,7 @@
[appearance]="'compact'"
[mode]="isScreenSmall ? 'over' : 'side'"
[name]="'mainNavigation'"
[navigation]="data.navigation.compact"
[navigation]="navigation.compact"
[opened]="!isScreenSmall">
<!-- Navigation header hook -->
<ng-container fuseVerticalNavigationContentHeader>
@ -31,13 +31,13 @@
</button>
<!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2">
<language></language>
<languages></languages>
<fuse-fullscreen></fuse-fullscreen>
<search [appearance]="'bar'"></search>
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>
<messages [messages]="data.messages"></messages>
<notifications [notifications]="data.notifications"></notifications>
<user-menu></user-menu>
<shortcuts></shortcuts>
<messages></messages>
<notifications></notifications>
<user></user>
</div>
</div>

16
src/app/layout/layouts/vertical/compact/compact.component.ts
View File

@ -1,10 +1,11 @@
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Data, Router } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
import { InitialData } from 'app/app.types';
import { Navigation } from 'app/core/navigation/navigation.types';
import { NavigationService } from 'app/core/navigation/navigation.service';
@Component({
selector : 'compact-layout',
@ -13,8 +14,8 @@ import { InitialData } from 'app/app.types';
})
export class CompactLayoutComponent implements OnInit, OnDestroy
{
data: InitialData;
isScreenSmall: boolean;
navigation: Navigation;
private _unsubscribeAll: Subject<any> = new Subject<any>();
/**
@ -23,6 +24,7 @@ export class CompactLayoutComponent implements OnInit, OnDestroy
constructor(
private _activatedRoute: ActivatedRoute,
private _router: Router,
private _navigationService: NavigationService,
private _fuseMediaWatcherService: FuseMediaWatcherService,
private _fuseNavigationService: FuseNavigationService
)
@ -50,9 +52,11 @@ export class CompactLayoutComponent implements OnInit, OnDestroy
*/
ngOnInit(): void
{
// Subscribe to the resolved route data
this._activatedRoute.data.subscribe((data: Data) => {
this.data = data.initialData;
// Subscribe to navigation data
this._navigationService.navigation$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((navigation: Navigation) => {
this.navigation = navigation;
});
// Subscribe to media changes

8
src/app/layout/layouts/vertical/compact/compact.module.ts
View File

@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
import { UserModule } from 'app/layout/common/user/user.module';
import { SharedModule } from 'app/shared/shared.module';
import { CompactLayoutComponent } from 'app/layout/layouts/vertical/compact/compact.component';
@ -29,12 +29,12 @@ import { CompactLayoutComponent } from 'app/layout/layouts/vertical/compact/comp
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
LanguagesModule,
MessagesModule,
NotificationsModule,
SearchModule,
ShortcutsModule,
UserMenuModule,
UserModule,
SharedModule
],
exports : [

12
src/app/layout/layouts/vertical/dense/dense.component.html
View File

@ -4,7 +4,7 @@
[appearance]="navigationAppearance"
[mode]="isScreenSmall ? 'over' : 'side'"
[name]="'mainNavigation'"
[navigation]="data.navigation.default"
[navigation]="navigation.default"
[opened]="!isScreenSmall">
<!-- Navigation header hook -->
<ng-container fuseVerticalNavigationContentHeader>
@ -40,13 +40,13 @@
</div>
<!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2">
<language></language>
<languages></languages>
<fuse-fullscreen></fuse-fullscreen>
<search [appearance]="'bar'"></search>
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>
<messages [messages]="data.messages"></messages>
<notifications [notifications]="data.notifications"></notifications>
<user-menu></user-menu>
<shortcuts></shortcuts>
<messages></messages>
<notifications></notifications>
<user></user>
</div>
</div>

16
src/app/layout/layouts/vertical/dense/dense.component.ts
View File

@ -1,10 +1,11 @@
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Data, Router } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
import { InitialData } from 'app/app.types';
import { Navigation } from 'app/core/navigation/navigation.types';
import { NavigationService } from 'app/core/navigation/navigation.service';
@Component({
selector : 'dense-layout',
@ -13,8 +14,8 @@ import { InitialData } from 'app/app.types';
})
export class DenseLayoutComponent implements OnInit, OnDestroy
{
data: InitialData;
isScreenSmall: boolean;
navigation: Navigation;
navigationAppearance: 'default' | 'dense' = 'dense';
private _unsubscribeAll: Subject<any> = new Subject<any>();
@ -24,6 +25,7 @@ export class DenseLayoutComponent implements OnInit, OnDestroy
constructor(
private _activatedRoute: ActivatedRoute,
private _router: Router,
private _navigationService: NavigationService,
private _fuseMediaWatcherService: FuseMediaWatcherService,
private _fuseNavigationService: FuseNavigationService
)
@ -51,9 +53,11 @@ export class DenseLayoutComponent implements OnInit, OnDestroy
*/
ngOnInit(): void
{
// Subscribe to the resolved route data
this._activatedRoute.data.subscribe((data: Data) => {
this.data = data.initialData;
// Subscribe to navigation data
this._navigationService.navigation$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((navigation: Navigation) => {
this.navigation = navigation;
});
// Subscribe to media changes

8
src/app/layout/layouts/vertical/dense/dense.module.ts
View File

@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
import { UserModule } from 'app/layout/common/user/user.module';
import { SharedModule } from 'app/shared/shared.module';
import { DenseLayoutComponent } from 'app/layout/layouts/vertical/dense/dense.component';
@ -29,12 +29,12 @@ import { DenseLayoutComponent } from 'app/layout/layouts/vertical/dense/dense.co
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
LanguagesModule,
MessagesModule,
NotificationsModule,
SearchModule,
ShortcutsModule,
UserMenuModule,
UserModule,
SharedModule
],
exports : [

14
src/app/layout/layouts/vertical/futuristic/futuristic.component.html
View File

@ -3,7 +3,7 @@
class="dark bg-indigo-800 text-white print:hidden"
[mode]="isScreenSmall ? 'over' : 'side'"
[name]="'mainNavigation'"
[navigation]="data.navigation.futuristic"
[navigation]="navigation.futuristic"
[opened]="!isScreenSmall">
<!-- Navigation header hook -->
<ng-container fuseVerticalNavigationHeader>
@ -18,10 +18,10 @@
<ng-container fuseVerticalNavigationFooter>
<!-- User -->
<div class="flex items-center w-full px-6 py-8 border-t">
<user-menu></user-menu>
<user></user>
<div class="flex flex-col w-full ml-4 overflow-hidden">
<div class="w-full whitespace-nowrap overflow-ellipsis overflow-hidden leading-normal text-current opacity-80">
{{data.user.name}}
{{user.name}}
</div>
<div class="w-full mt-0.5 whitespace-nowrap text-sm overflow-ellipsis overflow-hidden leading-normal text-current opacity-50">
brian.hughes@company.com
@ -45,12 +45,12 @@
</button>
<!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2">
<language></language>
<languages></languages>
<fuse-fullscreen></fuse-fullscreen>
<search [appearance]="'bar'"></search>
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>
<messages [messages]="data.messages"></messages>
<notifications [notifications]="data.notifications"></notifications>
<shortcuts></shortcuts>
<messages></messages>
<notifications></notifications>
</div>
</div>

27
src/app/layout/layouts/vertical/futuristic/futuristic.component.ts
View File

@ -1,10 +1,13 @@
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Data, Router } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
import { InitialData } from 'app/app.types';
import { Navigation } from 'app/core/navigation/navigation.types';
import { NavigationService } from 'app/core/navigation/navigation.service';
import { User } from 'app/core/user/user.types';
import { UserService } from 'app/core/user/user.service';
@Component({
selector : 'futuristic-layout',
@ -13,8 +16,9 @@ import { InitialData } from 'app/app.types';
})
export class FuturisticLayoutComponent implements OnInit, OnDestroy
{
data: InitialData;
isScreenSmall: boolean;
navigation: Navigation;
user: User;
private _unsubscribeAll: Subject<any> = new Subject<any>();
/**
@ -23,6 +27,8 @@ export class FuturisticLayoutComponent implements OnInit, OnDestroy
constructor(
private _activatedRoute: ActivatedRoute,
private _router: Router,
private _navigationService: NavigationService,
private _userService: UserService,
private _fuseMediaWatcherService: FuseMediaWatcherService,
private _fuseNavigationService: FuseNavigationService
)
@ -50,9 +56,18 @@ export class FuturisticLayoutComponent implements OnInit, OnDestroy
*/
ngOnInit(): void
{
// Subscribe to the resolved route data
this._activatedRoute.data.subscribe((data: Data) => {
this.data = data.initialData;
// Subscribe to navigation data
this._navigationService.navigation$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((navigation: Navigation) => {
this.navigation = navigation;
});
// Subscribe to the user service
this._userService.user$
.pipe((takeUntil(this._unsubscribeAll)))
.subscribe((user: User) => {
this.user = user;
});
// Subscribe to media changes

8
src/app/layout/layouts/vertical/futuristic/futuristic.module.ts
View File

@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
import { UserModule } from 'app/layout/common/user/user.module';
import { SharedModule } from 'app/shared/shared.module';
import { FuturisticLayoutComponent } from 'app/layout/layouts/vertical/futuristic/futuristic.component';
@ -29,12 +29,12 @@ import { FuturisticLayoutComponent } from 'app/layout/layouts/vertical/futuristi
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
LanguagesModule,
MessagesModule,
NotificationsModule,
SearchModule,
ShortcutsModule,
UserMenuModule,
UserModule,
SharedModule
],
exports : [

12
src/app/layout/layouts/vertical/thin/thin.component.html
View File

@ -4,7 +4,7 @@
[appearance]="'thin'"
[mode]="isScreenSmall ? 'over' : 'side'"
[name]="'mainNavigation'"
[navigation]="data.navigation.compact"
[navigation]="navigation.compact"
[opened]="!isScreenSmall">
<!-- Navigation header hook -->
<ng-container fuseVerticalNavigationContentHeader>
@ -32,13 +32,13 @@
</button>
<!-- Components -->
<div class="flex items-center pl-2 ml-auto space-x-2">
<language></language>
<languages></languages>
<fuse-fullscreen></fuse-fullscreen>
<search [appearance]="'bar'"></search>
<shortcuts [shortcuts]="data.shortcuts"></shortcuts>
<messages [messages]="data.messages"></messages>
<notifications [notifications]="data.notifications"></notifications>
<user-menu></user-menu>
<shortcuts></shortcuts>
<messages></messages>
<notifications></notifications>
<user></user>
</div>
</div>

16
src/app/layout/layouts/vertical/thin/thin.component.ts
View File

@ -1,10 +1,11 @@
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Data, Router } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
import { InitialData } from 'app/app.types';
import { Navigation } from 'app/core/navigation/navigation.types';
import { NavigationService } from 'app/core/navigation/navigation.service';
@Component({
selector : 'thin-layout',
@ -13,8 +14,8 @@ import { InitialData } from 'app/app.types';
})
export class ThinLayoutComponent implements OnInit, OnDestroy
{
data: InitialData;
isScreenSmall: boolean;
navigation: Navigation;
private _unsubscribeAll: Subject<any> = new Subject<any>();
/**
@ -23,6 +24,7 @@ export class ThinLayoutComponent implements OnInit, OnDestroy
constructor(
private _activatedRoute: ActivatedRoute,
private _router: Router,
private _navigationService: NavigationService,
private _fuseMediaWatcherService: FuseMediaWatcherService,
private _fuseNavigationService: FuseNavigationService
)
@ -50,9 +52,11 @@ export class ThinLayoutComponent implements OnInit, OnDestroy
*/
ngOnInit(): void
{
// Subscribe to the resolved route data
this._activatedRoute.data.subscribe((data: Data) => {
this.data = data.initialData;
// Subscribe to navigation data
this._navigationService.navigation$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((navigation: Navigation) => {
this.navigation = navigation;
});
// Subscribe to media changes

8
src/app/layout/layouts/vertical/thin/thin.module.ts
View File

@ -7,12 +7,12 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { FuseFullscreenModule } from '@fuse/components/fullscreen';
import { FuseNavigationModule } from '@fuse/components/navigation';
import { LanguageModule } from 'app/layout/common/language/language.module';
import { LanguagesModule } from 'app/layout/common/languages/languages.module';
import { MessagesModule } from 'app/layout/common/messages/messages.module';
import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
import { SearchModule } from 'app/layout/common/search/search.module';
import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
import { UserModule } from 'app/layout/common/user/user.module';
import { SharedModule } from 'app/shared/shared.module';
import { ThinLayoutComponent } from 'app/layout/layouts/vertical/thin/thin.component';
@ -29,12 +29,12 @@ import { ThinLayoutComponent } from 'app/layout/layouts/vertical/thin/thin.compo
MatMenuModule,
FuseFullscreenModule,
FuseNavigationModule,
LanguageModule,
LanguagesModule,
MessagesModule,
NotificationsModule,
SearchModule,
ShortcutsModule,
UserMenuModule,
UserModule,
SharedModule
],
exports : [

41
src/app/mock-api/apps/file-manager/api.ts
View File

@ -33,10 +33,18 @@ export class FileManagerMockApi
// -----------------------------------------------------------------------------------------------------
this._fuseMockApiService
.onGet('api/apps/file-manager')
.reply(() => {
.reply(({request}) => {
// Clone the items
const items = cloneDeep(this._items);
let items = cloneDeep(this._items);
// See if a folder id exist
const folderId = request.params.get('folderId') ?? null;
// Filter the items by folder id. If folder id is null,
// that means we want to root items which have folder id
// of null
items = items.filter(item => item.folderId === folderId);
// Separate the items by folders and files
const folders = items.filter(item => item.type === 'folder');
@ -46,11 +54,38 @@ export class FileManagerMockApi
folders.sort((a, b) => a.name.localeCompare(b.name));
files.sort((a, b) => a.name.localeCompare(b.name));
// Figure out the path and attach it to the response
// Prepare the empty paths array
const pathItems = cloneDeep(this._items);
const path = [];
// Prepare the current folder
let currentFolder = null;
// Get the current folder and add it as the first entry
if ( folderId )
{
currentFolder = pathItems.find(item => item.id === folderId);
path.push(currentFolder);
}
// Start traversing and storing the folders as a path array
// until we hit null on the folder id
while ( currentFolder?.folderId )
{
currentFolder = pathItems.find(item => item.id === currentFolder.folderId);
if ( currentFolder )
{
path.unshift(currentFolder);
}
}
return [
200,
{
folders,
files
files,
path
}
];
});

78
src/app/mock-api/apps/file-manager/data.ts
View File

@ -2,6 +2,7 @@
export const items = [
{
id : 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68',
folderId : null,
name : 'Personal',
createdBy : 'Brian Hughes',
createdAt : 'April 24, 2018',
@ -13,6 +14,7 @@ export const items = [
},
{
id : '6da8747f-b474-4c9a-9eba-5ef212285500',
folderId : null,
name : 'Photos',
createdBy : 'Brian Hughes',
createdAt : 'November 01, 2021',
@ -24,6 +26,7 @@ export const items = [
},
{
id : 'ed58add1-45a7-41db-887d-3ca7ee7f2719',
folderId : null,
name : 'Work',
createdBy : 'Brian Hughes',
createdAt : 'May 8, 2020',
@ -35,6 +38,7 @@ export const items = [
},
{
id : '5cb66e32-d1ac-4b9a-8c34-5991ce25add2',
folderId : null,
name : 'Contract #123',
createdBy : 'Brian Hughes',
createdAt : 'January 14, 2021',
@ -46,6 +50,7 @@ export const items = [
},
{
id : '3ffc3d84-8f2d-4929-903a-ef6fc21657a7',
folderId : null,
name : 'Estimated budget',
createdBy : 'Brian Hughes',
createdAt : 'December 14, 2020',
@ -57,6 +62,7 @@ export const items = [
},
{
id : '157adb9a-14f8-4559-ac93-8be893c9f80a',
folderId : null,
name : 'DMCA notice #42',
createdBy : 'Brian Hughes',
createdAt : 'May 8, 2021',
@ -68,6 +74,7 @@ export const items = [
},
{
id : '4f64597a-df7e-461c-ad60-f33e5f7e0747',
folderId : null,
name : 'Invoices',
createdBy : 'Brian Hughes',
createdAt : 'January 12, 2020',
@ -79,6 +86,7 @@ export const items = [
},
{
id : 'e445c445-57b2-4476-8c62-b068e3774b8e',
folderId : null,
name : 'Crash logs',
createdBy : 'Brian Hughes',
createdAt : 'June 8, 2020',
@ -90,6 +98,7 @@ export const items = [
},
{
id : 'b482f93e-7847-4614-ad48-b78b78309f81',
folderId : null,
name : 'System logs',
createdBy : 'Brian Hughes',
createdAt : 'June 8, 2020',
@ -101,6 +110,7 @@ export const items = [
},
{
id : 'ec07a98d-2e5b-422c-a9b2-b5d1c0e263f5',
folderId : null,
name : 'Personal projects',
createdBy : 'Brian Hughes',
createdAt : 'March 18, 2020',
@ -112,6 +122,7 @@ export const items = [
},
{
id : 'ae908d59-07da-4dd8-aba0-124e50289295',
folderId : null,
name : 'Biometric portrait',
createdBy : 'Brian Hughes',
createdAt : 'August 29, 2020',
@ -123,6 +134,7 @@ export const items = [
},
{
id : '4038a5b6-5b1a-432d-907c-e037aeb817a8',
folderId : null,
name : 'Scanned image 20201012-1',
createdBy : 'Brian Hughes',
createdAt : 'September 13, 2020',
@ -134,6 +146,7 @@ export const items = [
},
{
id : '630d2e9a-d110-47a0-ac03-256073a0f56d',
folderId : null,
name : 'Scanned image 20201012-2',
createdBy : 'Brian Hughes',
createdAt : 'September 14, 2020',
@ -145,6 +158,7 @@ export const items = [
},
{
id : '1417d5ed-b616-4cff-bfab-286677b69d79',
folderId : null,
name : 'Prices',
createdBy : 'Brian Hughes',
createdAt : 'April 07, 2020',
@ -156,6 +170,7 @@ export const items = [
},
{
id : 'bd2817c7-6751-40dc-b252-b6b5634c0689',
folderId : null,
name : 'Shopping list',
createdBy : 'Brian Hughes',
createdAt : 'March 26, 2021',
@ -167,6 +182,7 @@ export const items = [
},
{
id : '14fb47c9-6eeb-4070-919c-07c8133285d1',
folderId : null,
name : 'Summer budget',
createdBy : 'Brian Hughes',
createdAt : 'June 02, 2020',
@ -175,5 +191,67 @@ export const items = [
type : 'XLS',
contents : null,
description: null
},
{
id : '894e8514-03d3-4f5e-bb28-f6c092501fae',
folderId : 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68',
name : 'A personal file',
createdBy : 'Brian Hughes',
createdAt : 'June 02, 2020',
modifiedAt : 'June 02, 2020',
size : '943 KB',
type : 'XLS',
contents : null,
description: null
},
{
id : '74010810-16cf-441d-a1aa-c9fb620fceea',
folderId : 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68',
name : 'A personal folder',
createdBy : 'Brian Hughes',
createdAt : 'November 01, 2021',
modifiedAt : 'November 01, 2021',
size : '3015 MB',
type : 'folder',
contents : '907 files',
description: 'Personal photos; selfies, family, vacation and etc.'
},
{
id : 'a8c73e5a-8114-436d-ab54-d900b50b3762',
folderId : '74010810-16cf-441d-a1aa-c9fb620fceea',
name : 'A personal file within the personal folder',
createdBy : 'Brian Hughes',
createdAt : 'June 02, 2020',
modifiedAt : 'June 02, 2020',
size : '943 KB',
type : 'XLS',
contents : null,
description: null
},
{
id : '12d851a8-4f60-473e-8a59-abe4b422ea99',
folderId : '6da8747f-b474-4c9a-9eba-5ef212285500',
name : 'Photos file',
createdBy : 'Brian Hughes',
createdAt : 'June 02, 2020',
modifiedAt : 'June 02, 2020',
size : '943 KB',
type : 'XLS',
contents : null,
description: null
},
{
id : '2836766d-27e1-4f40-a31a-5a8419105e7e',
folderId : 'ed58add1-45a7-41db-887d-3ca7ee7f2719',
name : 'Work file',
createdBy : 'Brian Hughes',
createdAt : 'June 02, 2020',
modifiedAt : 'June 02, 2020',
size : '943 KB',
type : 'XLS',
contents : null,
description: null
}
];

12
src/app/mock-api/common/notifications/data.ts
View File

@ -4,7 +4,7 @@ import * as moment from 'moment';
export const notifications = [
{
id : '493190c9-5b61-4912-afe5-78c21f1044d7',
icon : 'heroicons_outline:star',
icon : 'heroicons_solid:star',
title : 'Daily challenges',
description: 'Your submission has been accepted',
time : moment().subtract(25, 'minutes').toISOString(), // 25 minutes ago
@ -21,7 +21,7 @@ export const notifications = [
},
{
id : 'b91ccb58-b06c-413b-b389-87010e03a120',
icon : 'heroicons_outline:mail',
icon : 'heroicons_solid:mail',
title : 'Mailbox',
description: 'You have 15 unread mails across 3 mailboxes',
time : moment().subtract(3, 'hours').toISOString(), // 3 hours ago
@ -31,7 +31,7 @@ export const notifications = [
},
{
id : '541416c9-84a7-408a-8d74-27a43c38d797',
icon : 'heroicons_outline:refresh',
icon : 'heroicons_solid:refresh',
title : 'Cron jobs',
description: 'Your <em>Docker container</em> is ready to publish',
time : moment().subtract(5, 'hours').toISOString(), // 5 hours ago
@ -59,7 +59,7 @@ export const notifications = [
},
{
id : 'b85c2338-cc98-4140-bbf8-c226ce4e395e',
icon : 'heroicons_outline:mail',
icon : 'heroicons_solid:mail',
title : 'Mailbox',
description: 'You have 3 new mails',
time : moment().subtract(1, 'day').toISOString(), // 1 day ago
@ -69,7 +69,7 @@ export const notifications = [
},
{
id : '8f8e1bf9-4661-4939-9e43-390957b60f42',
icon : 'heroicons_outline:star',
icon : 'heroicons_solid:star',
title : 'Daily challenges',
description: 'Your submission has been accepted and you are ready to sign-up for the final assigment which will be ready in 2 days',
time : moment().subtract(3, 'days').toISOString(), // 3 days ago
@ -79,7 +79,7 @@ export const notifications = [
},
{
id : '30af917b-7a6a-45d1-822f-9e7ad7f8bf69',
icon : 'heroicons_outline:refresh',
icon : 'heroicons_solid:refresh',
title : 'Cron jobs',
description: 'Your Vagrant container is ready to download',
time : moment().subtract(4, 'day').toISOString(), // 4 days ago

91
src/app/mock-api/common/search/api.ts
View File

@ -4,6 +4,7 @@ import { FuseNavigationItem, FuseNavigationService } from '@fuse/components/navi
import { FuseMockApiService } from '@fuse/lib/mock-api';
import { defaultNavigation } from 'app/mock-api/common/navigation/data';
import { contacts } from 'app/mock-api/apps/contacts/data';
import { tasks } from 'app/mock-api/apps/tasks/data';
@Injectable({
providedIn: 'root'
@ -12,6 +13,7 @@ export class SearchMockApi
{
private readonly _defaultNavigation: FuseNavigationItem[] = defaultNavigation;
private readonly _contacts: any[] = contacts;
private readonly _tasks: any[] = tasks;
/**
* Constructor
@ -54,58 +56,75 @@ export class SearchMockApi
return [200, {results: []}];
}
// Filter the navigation
const navigationResults = cloneDeep(flatNavigation).filter(item => (item.title?.toLowerCase().includes(query) || (item.subtitle && item.subtitle.includes(query))));
// Filter the contacts
const contactsResults = cloneDeep(this._contacts).filter(user => user.name.toLowerCase().includes(query));
const contactsResults = cloneDeep(this._contacts)
.filter(contact => contact.name.toLowerCase().includes(query));
// Create the results array
// Filter the navigation
const pagesResults = cloneDeep(flatNavigation)
.filter(page => (page.title?.toLowerCase().includes(query) || (page.subtitle && page.subtitle.includes(query))));
// Filter the tasks
const tasksResults = cloneDeep(this._tasks)
.filter(task => task.title.toLowerCase().includes(query));
// Prepare the results array
const results = [];
// If there are navigation results...
if ( navigationResults.length > 0 )
{
// Normalize the results while marking the found chars
navigationResults.forEach((result: any) => {
// Normalize
result['hint'] = result.link;
result['resultType'] = 'page';
// Mark the found chars
const re = new RegExp('(' + query.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') + ')', 'ig');
result.title = result.title.replace(re, '<mark>$1</mark>');
});
// Add the results
results.push(...navigationResults);
}
// If there are contacts results...
if ( contactsResults.length > 0 )
{
// Normalize the results while marking the found chars
// Normalize the results
contactsResults.forEach((result) => {
// Normalize
result.title = result.name;
result.resultType = 'contact';
// Make the found chars bold
const re = new RegExp('(' + query.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') + ')', 'ig');
result.title = result.title.replace(re, '<mark>$1</mark>');
// Add a link
result.link = '/apps/contacts/' + result.id;
});
// Add the results to the results object
results.push(...contactsResults);
// Add to the results
results.push({
id : 'contacts',
label : 'Contacts',
results: contactsResults
});
}
// If there are page results...
if ( pagesResults.length > 0 )
{
// Normalize the results
pagesResults.forEach((result: any) => {
});
// Add to the results
results.push({
id : 'pages',
label : 'Pages',
results: pagesResults
});
}
// If there are tasks results...
if ( tasksResults.length > 0 )
{
// Normalize the results
tasksResults.forEach((result) => {
// Add a link
result.link = '/apps/tasks/' + result.id;
});
// Add to the results
results.push({
id : 'tasks',
label : 'Tasks',
results: tasksResults
});
}
// Return the response
return [200, {results}];
return [200, results];
});
}
}

12
src/app/mock-api/common/shortcuts/data.ts
View File

@ -3,9 +3,9 @@ export const shortcuts = [
{
id : 'a1ae91d3-e2cb-459b-9be9-a184694f548b',
label : 'Changelog',
description: 'Latest version: v1.2',
description: 'List of changes',
icon : 'heroicons_outline:clipboard-list',
link : '/dashboards/project',
link : '/docs/changelog',
useRouter : true
},
{
@ -13,7 +13,7 @@ export const shortcuts = [
label : 'Documentation',
description: 'Getting started',
icon : 'heroicons_outline:book-open',
link : '/dashboards/project',
link : '/docs/guides/getting-started/introduction',
useRouter : true
},
{
@ -21,7 +21,7 @@ export const shortcuts = [
label : 'Help center',
description: 'FAQs and guides',
icon : 'heroicons_outline:support',
link : '/pages/help-center',
link : '/apps/help-center',
useRouter : true
},
{
@ -29,7 +29,7 @@ export const shortcuts = [
label : 'Dashboard',
description: 'User analytics',
icon : 'heroicons_outline:chart-pie',
link : '/dashboards/project',
link : '/dashboards/analytics',
useRouter : true
},
{
@ -67,7 +67,7 @@ export const shortcuts = [
{
id : '0a240ab8-e19d-4503-bf68-20013030d526',
label : 'Reload',
description: 'Restart the app',
description: 'Reload the app',
icon : 'heroicons_outline:refresh',
link : '/dashboards/project',
useRouter : false

BIN
src/assets/images/ui/angular-material/scenes/autocomplete.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 910 B

BIN
src/assets/images/ui/angular-material/scenes/badge.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1019 B

BIN
src/assets/images/ui/angular-material/scenes/bottom-sheet.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
src/assets/images/ui/angular-material/scenes/button-toggle.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 466 B

BIN
src/assets/images/ui/angular-material/scenes/button.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/assets/images/ui/angular-material/scenes/card.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 427 B

BIN
src/assets/images/ui/angular-material/scenes/checkbox.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/images/ui/angular-material/scenes/chips.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
src/assets/images/ui/angular-material/scenes/core.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 449 B

BIN
src/assets/images/ui/angular-material/scenes/datepicker.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
src/assets/images/ui/angular-material/scenes/dialog.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
src/assets/images/ui/angular-material/scenes/divider.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/images/ui/angular-material/scenes/expansion.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/assets/images/ui/angular-material/scenes/form-field.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 933 B

BIN
src/assets/images/ui/angular-material/scenes/grid-list.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 314 B

BIN
src/assets/images/ui/angular-material/scenes/icon.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
src/assets/images/ui/angular-material/scenes/input.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 647 B

BIN
src/assets/images/ui/angular-material/scenes/list.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/images/ui/angular-material/scenes/menu.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/assets/images/ui/angular-material/scenes/paginator.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/assets/images/ui/angular-material/scenes/progress-bar.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 206 B

BIN
src/assets/images/ui/angular-material/scenes/progress-spinner.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/assets/images/ui/angular-material/scenes/radio.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/images/ui/angular-material/scenes/ripple.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/images/ui/angular-material/scenes/select.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/assets/images/ui/angular-material/scenes/sidenav.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/images/ui/angular-material/scenes/slide-toggle.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
src/assets/images/ui/angular-material/scenes/slider.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 632 B

BIN
src/assets/images/ui/angular-material/scenes/snack-bar.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/assets/images/ui/angular-material/scenes/sort.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
src/assets/images/ui/angular-material/scenes/stepper.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/images/ui/angular-material/scenes/table.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/assets/images/ui/angular-material/scenes/tabs.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 790 B

BIN
src/assets/images/ui/angular-material/scenes/toolbar.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 747 B

BIN
src/assets/images/ui/angular-material/scenes/tooltip.scene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 881 B

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