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

(Apps) Moved the apps to the new page layouts and replaced MatSidenav with FuseSidebar on majority of them

Browse Source
This commit is contained in:
Sercan Yemen 2018-06-11 13:26:03 +03:00
parent 436bd0aa91
commit a87e68251e
71 changed files with 1664 additions and 1554 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/main/apps/academy/academy.module.ts
View File

@ -1,7 +1,7 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSelectModule, MatSidenavModule } from '@angular/material'; import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSelectModule } from '@angular/material';
import { FuseSharedModule } from '@fuse/shared.module'; import { FuseSharedModule } from '@fuse/shared.module';
@ -9,6 +9,7 @@ import { AcademyCoursesComponent } from 'app/main/apps/academy/courses/courses.c
import { AcademyCourseComponent } from 'app/main/apps/academy/course/course.component'; import { AcademyCourseComponent } from 'app/main/apps/academy/course/course.component';
import { AcademyCoursesService } from 'app/main/apps/academy/courses.service'; import { AcademyCoursesService } from 'app/main/apps/academy/courses.service';
import { AcademyCourseService } from 'app/main/apps/academy/course.service'; import { AcademyCourseService } from 'app/main/apps/academy/course.service';
import { FuseSidebarModule } from '@fuse/components';
const routes = [ const routes = [
@ -45,9 +46,9 @@ const routes = [
MatIconModule, MatIconModule,
MatInputModule, MatInputModule,
MatSelectModule, MatSelectModule,
MatSidenavModule,
FuseSharedModule FuseSharedModule,
FuseSidebarModule
], ],
providers : [ providers : [
AcademyCoursesService, AcademyCoursesService,

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

@ -1,100 +1,97 @@
<div id="academy-course" class="page-layout simple left-sidenav"> <div id="academy-course" class="page-layout simple left-sidebar inner-scroll">
<mat-sidenav-container> <!-- SIDEBAR -->
<fuse-sidebar class="sidebar" name="academy-course-left-sidebar-1" position="left" lockedOpen="gt-md">
<!-- SIDENAV --> <!-- SIDEBAR CONTENT -->
<mat-sidenav class="sidenav" position="start" opened="true" mode="side" <div class="content" fusePerfectScrollbar>
fuseMatSidenavHelper="academy-left-sidenav" mat-is-locked-open="gt-md">
<div class="sidenav-content" fusePerfectScrollbar> <div class="steps">
<div class="steps"> <div class="step"
*ngFor="let step of course.steps; let i = index; let last = last; let first = first"
<div class="step" (click)="gotoStep(i)"
*ngFor="let step of course.steps; let i = index; let last = last; let first = first" [ngClass]="{'current': currentStep === i, 'completed': currentStep > i, 'last': last, 'first': first}">
(click)="gotoStep(i)" <div class="index">
[ngClass]="{'current': currentStep === i, 'completed': currentStep > i, 'last': last, 'first': first}"> <span>{{i + 1}}</span>
<div class="index">
<span>{{i + 1}}</span>
</div>
<div class="title">{{step.title}}</div>
</div> </div>
<div class="title">{{step.title}}</div>
</div> </div>
</div> </div>
</mat-sidenav>
<!-- / SIDENAV -->
<!-- CENTER -->
<div class="center">
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button class="mr-16 sidenav-toggle"
fuseMatSidenavToggler="academy-left-sidenav" fxHide.gt-md>
<mat-icon>menu</mat-icon>
</button>
<button mat-icon-button class="mr-16" [routerLink]="'/apps/academy/courses'">
<mat-icon>arrow_back</mat-icon>
</button>
<div>
<h2>{{course.title}}</h2>
</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div id="course-content" class="content">
<ng-container *ngFor="let step of course.steps; let i = index;">
<div class="course-step" fusePerfectScrollbar
*ngIf="currentStep === i"
[@slideIn]="animationDirection">
<div id="course-step-content" class="course-step-content" [innerHTML]="step.content"></div>
</div>
</ng-container>
</div>
<!-- / CONTENT -->
<div class="step-navigation">
<button mat-fab class="previous mat-accent white-fg"
(click)="gotoPreviousStep()"
[disabled]="currentStep === 0"
[fxHide]="currentStep === 0">
<mat-icon>chevron_left</mat-icon>
</button>
<button mat-fab class="next mat-accent white-fg"
(click)="gotoNextStep()"
[disabled]="currentStep === course.totalSteps - 1"
[fxHide]="currentStep === course.totalSteps - 1">
<mat-icon>chevron_right</mat-icon>
</button>
<button mat-fab class="done mat-green-600-bg"
routerLink="/apps/academy/courses"
[disabled]="currentStep !== course.totalSteps - 1"
[fxShow]="currentStep === course.totalSteps - 1">
<mat-icon>check</mat-icon>
</button>
</div>
</div> </div>
<!-- / CENTER --> <!-- / SIDEBAR CONTENT -->
</mat-sidenav-container> </fuse-sidebar>
<!-- / SIDEBAR -->
<!-- CENTER -->
<div class="center">
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button class="sidebar-toggle mr-16" fxHide.gt-md
(click)="toggleSidebar('academy-course-left-sidebar-1')">
<mat-icon>menu</mat-icon>
</button>
<button mat-icon-button class="mr-16" [routerLink]="'/apps/academy/courses'">
<mat-icon>arrow_back</mat-icon>
</button>
<div>
<h2>{{course.title}}</h2>
</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div id="course-content" class="content">
<ng-container *ngFor="let step of course.steps; let i = index;">
<div class="course-step" fusePerfectScrollbar
*ngIf="currentStep === i"
[@slideIn]="animationDirection">
<div id="course-step-content" class="course-step-content" [innerHTML]="step.content"></div>
</div>
</ng-container>
</div>
<!-- / CONTENT -->
<div class="step-navigation">
<button mat-fab class="previous mat-accent white-fg"
(click)="gotoPreviousStep()"
[disabled]="currentStep === 0"
[fxHide]="currentStep === 0">
<mat-icon>chevron_left</mat-icon>
</button>
<button mat-fab class="next mat-accent white-fg"
(click)="gotoNextStep()"
[disabled]="currentStep === course.totalSteps - 1"
[fxHide]="currentStep === course.totalSteps - 1">
<mat-icon>chevron_right</mat-icon>
</button>
<button mat-fab class="done mat-green-600-bg"
routerLink="/apps/academy/courses"
[disabled]="currentStep !== course.totalSteps - 1"
[fxShow]="currentStep === course.totalSteps - 1">
<mat-icon>check</mat-icon>
</button>
</div>
</div>
<!-- / CENTER -->
</div> </div>

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

@ -2,19 +2,7 @@
#academy-course { #academy-course {
.mat-drawer-container { .sidebar {
flex: 1 !important;
> .mat-drawer-content {
flex: 1 !important;
@include media-breakpoint-up('lg') {
z-index: 52;
}
}
}
.sidenav {
.steps { .steps {
padding: 16px 0; padding: 16px 0;
@ -140,6 +128,7 @@
.center { .center {
position: relative; position: relative;
overflow: hidden;
.header { .header {
height: 72px; height: 72px;
@ -148,10 +137,8 @@
} }
.content { .content {
display: flex;
position: relative; position: relative;
overflow: hidden; display: flex;
height: 100%;
background: mat-color($mat-grey, 200); background: mat-color($mat-grey, 200);
.course-step { .course-step {
@ -163,6 +150,10 @@
padding: 48px; padding: 48px;
overflow: auto; overflow: auto;
&.ng-animating {
overflow: hidden;
}
@media (max-width: 720px) { @media (max-width: 720px) {
padding: 0 0 120px 0; padding: 0 0 120px 0;
} }

15
src/app/main/apps/academy/course/course.component.ts
View File

@ -3,6 +3,7 @@ import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive'; import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
import { fuseAnimations } from '@fuse/animations'; import { fuseAnimations } from '@fuse/animations';
import { AcademyCourseService } from 'app/main/apps/academy/course.service'; import { AcademyCourseService } from 'app/main/apps/academy/course.service';
@ -32,10 +33,12 @@ export class AcademyCourseComponent implements OnInit, OnDestroy, AfterViewInit
* *
* @param {AcademyCourseService} _academyCourseService * @param {AcademyCourseService} _academyCourseService
* @param {ChangeDetectorRef} _changeDetectorRef * @param {ChangeDetectorRef} _changeDetectorRef
* @param {FuseSidebarService} _fuseSidebarService
*/ */
constructor( constructor(
private _academyCourseService: AcademyCourseService, private _academyCourseService: AcademyCourseService,
private _changeDetectorRef: ChangeDetectorRef private _changeDetectorRef: ChangeDetectorRef,
private _fuseSidebarService: FuseSidebarService
) )
{ {
// Set the defaults // Set the defaults
@ -146,4 +149,14 @@ export class AcademyCourseComponent implements OnInit, OnDestroy, AfterViewInit
// Decrease the current step // Decrease the current step
this.currentStep--; this.currentStep--;
} }
/**
* Toggle the sidebar
*
* @param name
*/
toggleSidebar(name): void
{
this._fuseSidebarService.getSidebar(name).toggleOpen();
}
} }

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

@ -1,12 +1,14 @@
<div id="academy-courses" class="page-layout simple" fusePerfectScrollbar> <div id="academy-courses" class="page-layout simple">
<!-- HEADER --> <!-- HEADER -->
<div class="header mat-accent-bg p-16 p-sm-24" fxLayout="column" fxLayoutAlign="center center"> <div class="header mat-accent-bg p-16 p-sm-24" fxLayout="column" fxLayoutAlign="center center">
<div class="hero-text"> <div class="hero-text">
<mat-icon class="hero-icon">school</mat-icon> <mat-icon class="hero-icon">school</mat-icon>
<h1>WELCOME TO ACADEMY</h1> <h1 [@animate]="{value:'*',params:{delay:'100ms', y:'25px'}}">
<h3> WELCOME TO ACADEMY
</h1>
<h3 [@animate]="{value:'*',params:{delay:'100ms', y:'25px'}}">
Our courses will step you through the process of building a small application, or adding a new feature Our courses will step you through the process of building a small application, or adding a new feature
to an existing application. to an existing application.
</h3> </h3>
@ -46,8 +48,7 @@
</div> </div>
<div class="courses" fxLayout="row wrap" fxLayoutAlign="center" [@animateStagger]="{value:'50'}" <div class="courses" fxLayout="row wrap" fxLayoutAlign="center" [@animateStagger]="{value:'50'}">
*fuseIfOnDom>
<div class="course" *ngFor="let course of filteredCourses" fxFlex="100" fxFlex.gt-xs="50" <div class="course" *ngFor="let course of filteredCourses" fxFlex="100" fxFlex.gt-xs="50"
fxFlex.gt-sm="33" [ngClass]="course.category" [@animate]="{value:'*',params:{y:'100%'}}"> fxFlex.gt-sm="33" [ngClass]="course.category" [@animate]="{value:'*',params:{y:'100%'}}">

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

@ -1,4 +1,4 @@
<div id="calendar" class="page-layout simple fullwidth" fusePerfectScrollbar> <div id="calendar" class="page-layout simple fullwidth">
<!-- HEADER --> <!-- HEADER -->
<div class="header p-16 p-sm-24" [ngClass]="viewDate | date:'MMM'"> <div class="header p-16 p-sm-24" [ngClass]="viewDate | date:'MMM'">
@ -8,8 +8,12 @@
<div class="header-top" fxLayout="row" fxLayoutAlign="space-between center" fxLayout.xs="column"> <div class="header-top" fxLayout="row" fxLayoutAlign="space-between center" fxLayout.xs="column">
<div class="logo mb-16 mb-sm-0" fxLayout="row" fxLayoutAlign="start center"> <div class="logo mb-16 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="logo-icon" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">today</mat-icon> <mat-icon class="logo-icon" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
<span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Calendar</span> today
</mat-icon>
<span class="logo-text" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">
Calendar
</span>
</div> </div>
<!-- TOOLBAR --> <!-- TOOLBAR -->
@ -44,7 +48,7 @@
<!-- HEADER BOTTOM --> <!-- HEADER BOTTOM -->
<div class="header-bottom" fxLayout="row" fxLayoutAlign="center center" <div class="header-bottom" fxLayout="row" fxLayoutAlign="center center"
*fuseIfOnDom [@animate]="{value:'*',params:{delay:'150ms'}}"> [@animate]="{value:'*',params:{delay:'150ms'}}">
<button mat-icon-button class="arrow" <button mat-icon-button class="arrow"
mwlCalendarPreviousView mwlCalendarPreviousView
@ -73,7 +77,7 @@
<!-- ADD EVENT BUTTON --> <!-- ADD EVENT BUTTON -->
<button mat-fab class="add-event-button mat-warn" (click)="addEvent()" aria-label="Add event" <button mat-fab class="add-event-button mat-warn" (click)="addEvent()" aria-label="Add event"
*fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}"> [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">
<mat-icon>add</mat-icon> <mat-icon>add</mat-icon>
</button> </button>
<!-- / ADD EVENT BUTTON --> <!-- / ADD EVENT BUTTON -->
@ -81,7 +85,7 @@
<!-- / HEADER --> <!-- / HEADER -->
<!-- CONTENT --> <!-- CONTENT -->
<div class="content" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms',y:'50px'}}"> <div class="content" fusePerfectScrollbar [@animate]="{value:'*',params:{delay:'200ms',y:'50px'}}">
<div [ngSwitch]="view"> <div [ngSwitch]="view">
<mwl-calendar-month-view <mwl-calendar-month-view
*ngSwitchCase="'month'" *ngSwitchCase="'month'"

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

@ -192,8 +192,6 @@
#calendar { #calendar {
background: #FFFFFF; background: #FFFFFF;
overflow-x: hidden;
overflow-y: auto;
.header { .header {
height: 200px; height: 200px;

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

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

40
src/app/main/apps/contacts/contacts.component.html
View File

@ -1,4 +1,4 @@
<div id="contacts" class="page-layout simple left-sidenav inner-sidenav"> <div id="contacts" class="page-layout simple left-sidebar inner-sidebar inner-scroll">
<!-- HEADER --> <!-- HEADER -->
<div class="header mat-accent-bg p-16 p-sm-24" fxLayout="column" fxLayoutAlign="start start" <div class="header mat-accent-bg p-16 p-sm-24" fxLayout="column" fxLayoutAlign="start start"
@ -7,15 +7,18 @@
<!-- APP TITLE --> <!-- APP TITLE -->
<div fxLayout="row" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button class="sidenav-toggle mr-12" <button mat-icon-button class="sidebar-toggle mr-12" fxHide.gt-md
fuseMatSidenavToggler="contacts-main-sidenav" (click)="toggleSidebar('contacts-main-sidebar')">
fxHide.gt-md>
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>
</button> </button>
<div class="logo" fxLayout="row" fxLayoutAlign="start center"> <div class="logo" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="logo-icon mr-16" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">account_box</mat-icon> <mat-icon class="logo-icon mr-16"
<span class="logo-text h1" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Contacts</span> [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">account_box
</mat-icon>
<span class="logo-text h1" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">
Contacts
</span>
</div> </div>
</div> </div>
@ -39,38 +42,41 @@
<selected-bar class="mat-accent-600-bg" *ngIf="hasSelectedContacts" [@slideInTop]></selected-bar> <selected-bar class="mat-accent-600-bg" *ngIf="hasSelectedContacts" [@slideInTop]></selected-bar>
<!-- / SELECTED BAR --> <!-- / SELECTED BAR -->
<mat-sidenav-container> <!-- CONTENT -->
<div class="content">
<!-- SIDENAV --> <!-- SIDEBAR -->
<mat-sidenav class="sidenav" position="start" opened="true" mode="side" <fuse-sidebar class="sidebar" name="contacts-main-sidebar" position="left" lockedOpen="gt-sm">
fuseMatSidenavHelper="contacts-main-sidenav" mat-is-locked-open="gt-sm">
<contacts-main-sidenav *fuseIfOnDom [@animate]="{value:'*'}"></contacts-main-sidenav> <!-- SIDEBAR CONTENT -->
<div class="content" fusePerfectScrollbar>
<contacts-main-sidebar [@animate]="{value:'*'}"></contacts-main-sidebar>
</div>
<!-- / SIDEBAR CONTENT -->
</mat-sidenav> </fuse-sidebar>
<!-- / SIDENAV --> <!-- / SIDEBAR -->
<!-- CENTER --> <!-- CENTER -->
<div class="center p-24 pb-56 pr-sm-92" fusePerfectScrollbar> <div class="center p-24 pb-56 pr-sm-92" fusePerfectScrollbar>
<!-- CONTENT --> <!-- CONTENT -->
<div class="content mat-white-bg mat-elevation-z4"> <div class="content mat-white-bg mat-elevation-z4">
<contacts-contact-list></contacts-contact-list> <contacts-contact-list></contacts-contact-list>
</div> </div>
<!-- / CONTENT --> <!-- / CONTENT -->
</div> </div>
<!-- / CENTER --> <!-- / CENTER -->
</mat-sidenav-container> </div>
<!-- / CONTENT-->
</div> </div>
<!-- ADD CONTACT BUTTON --> <!-- ADD CONTACT BUTTON -->
<button mat-fab class="mat-accent-bg" id="add-contact-button" (click)="newContact()" aria-label="add contact" <button mat-fab class="mat-accent-bg" id="add-contact-button" (click)="newContact()" aria-label="add contact"
*fuseIfOnDom [@animate]="{value:'*', params:{delay:'300ms',scale:'.2'}}"> [@animate]="{value:'*', params:{delay:'300ms',scale:'.2'}}">
<mat-icon>person_add</mat-icon> <mat-icon>person_add</mat-icon>
</button> </button>
<!-- / ADD CONTACT BUTTON --> <!-- / ADD CONTACT BUTTON -->

7
src/app/main/apps/contacts/contacts.component.scss
View File

@ -2,5 +2,12 @@
.content { .content {
overflow: hidden; overflow: hidden;
.sidebar {
&:not(.locked-open) {
background: white;
}
}
} }
} }

13
src/app/main/apps/contacts/contacts.component.ts
View File

@ -5,6 +5,7 @@ import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators'; import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
import { fuseAnimations } from '@fuse/animations'; import { fuseAnimations } from '@fuse/animations';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
import { ContactsService } from 'app/main/apps/contacts/contacts.service'; import { ContactsService } from 'app/main/apps/contacts/contacts.service';
import { ContactsContactFormDialogComponent } from 'app/main/apps/contacts/contact-form/contact-form.component'; import { ContactsContactFormDialogComponent } from 'app/main/apps/contacts/contact-form/contact-form.component';
@ -29,10 +30,12 @@ export class ContactsComponent implements OnInit, OnDestroy
* Constructor * Constructor
* *
* @param {ContactsService} _contactsService * @param {ContactsService} _contactsService
* @param {FuseSidebarService} _fuseSidebarService
* @param {MatDialog} _matDialog * @param {MatDialog} _matDialog
*/ */
constructor( constructor(
private _contactsService: ContactsService, private _contactsService: ContactsService,
private _fuseSidebarService: FuseSidebarService,
private _matDialog: MatDialog private _matDialog: MatDialog
) )
{ {
@ -105,4 +108,14 @@ export class ContactsComponent implements OnInit, OnDestroy
this._contactsService.updateContact(response.getRawValue()); this._contactsService.updateContact(response.getRawValue());
}); });
} }
/**
* Toggle the sidebar
*
* @param name
*/
toggleSidebar(name): void
{
this._fuseSidebarService.getSidebar(name).toggleOpen();
}
} }

12
src/app/main/apps/contacts/contacts.module.ts
View File

@ -2,16 +2,16 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
import { CdkTableModule } from '@angular/cdk/table'; import { CdkTableModule } from '@angular/cdk/table';
import { MatButtonModule, MatCheckboxModule, MatDatepickerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatRippleModule, MatSidenavModule, MatTableModule, MatToolbarModule } from '@angular/material'; import { MatButtonModule, MatCheckboxModule, MatDatepickerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatRippleModule, MatTableModule, MatToolbarModule } from '@angular/material';
import { FuseSharedModule } from '@fuse/shared.module'; import { FuseSharedModule } from '@fuse/shared.module';
import { FuseConfirmDialogModule } from '@fuse/components'; import { FuseConfirmDialogModule, FuseSidebarModule } from '@fuse/components';
import { ContactsComponent } from 'app/main/apps/contacts/contacts.component'; import { ContactsComponent } from 'app/main/apps/contacts/contacts.component';
import { ContactsService } from 'app/main/apps/contacts/contacts.service'; import { ContactsService } from 'app/main/apps/contacts/contacts.service';
import { ContactsContactListComponent } from 'app/main/apps/contacts/contact-list/contact-list.component'; import { ContactsContactListComponent } from 'app/main/apps/contacts/contact-list/contact-list.component';
import { ContactsSelectedBarComponent } from 'app/main/apps/contacts/selected-bar/selected-bar.component'; import { ContactsSelectedBarComponent } from 'app/main/apps/contacts/selected-bar/selected-bar.component';
import { ContactsMainSidenavComponent } from 'app/main/apps/contacts/sidenavs/main/main.component'; import { ContactsMainSidebarComponent } from 'app/main/apps/contacts/sidebars/main/main.component';
import { ContactsContactFormDialogComponent } from 'app/main/apps/contacts/contact-form/contact-form.component'; import { ContactsContactFormDialogComponent } from 'app/main/apps/contacts/contact-form/contact-form.component';
const routes: Routes = [ const routes: Routes = [
@ -29,7 +29,7 @@ const routes: Routes = [
ContactsComponent, ContactsComponent,
ContactsContactListComponent, ContactsContactListComponent,
ContactsSelectedBarComponent, ContactsSelectedBarComponent,
ContactsMainSidenavComponent, ContactsMainSidebarComponent,
ContactsContactFormDialogComponent ContactsContactFormDialogComponent
], ],
imports : [ imports : [
@ -44,12 +44,12 @@ const routes: Routes = [
MatInputModule, MatInputModule,
MatMenuModule, MatMenuModule,
MatRippleModule, MatRippleModule,
MatSidenavModule,
MatTableModule, MatTableModule,
MatToolbarModule, MatToolbarModule,
FuseSharedModule, FuseSharedModule,
FuseConfirmDialogModule FuseConfirmDialogModule,
FuseSidebarModule
], ],
providers : [ providers : [
ContactsService ContactsService

13
src/app/main/apps/contacts/sidenavs/main/main.component.html → src/app/main/apps/contacts/sidebars/main/main.component.html
View File

@ -1,7 +1,8 @@
<div class="sidenav-content"> <div class="sidebar-content">
<div class="card mat-white-bg"> <div class="card mat-white-bg">
<!-- SIDENAV HEADER -->
<!-- SIDEBAR HEADER -->
<div class="header p-24" fxLayout="row" fxLayoutAlign="start center"> <div class="header p-24" fxLayout="row" fxLayoutAlign="start center">
<!-- USER --> <!-- USER -->
@ -10,9 +11,9 @@
<!-- / USER --> <!-- / USER -->
</div> </div>
<!-- / SIDENAV HEADER --> <!-- / SIDEBAR HEADER -->
<!-- SIDENAV CONTENT --> <!-- SIDEBAR CONTENT -->
<div class="content py-16" fusePerfectScrollbar> <div class="content py-16" fusePerfectScrollbar>
<div class="nav"> <div class="nav">
@ -38,6 +39,8 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- / SIDENAV CONTENT --> <!-- / SIDEBAR CONTENT -->

2
src/app/main/apps/contacts/sidenavs/main/main.component.scss → src/app/main/apps/contacts/sidebars/main/main.component.scss
View File

@ -6,7 +6,7 @@
flex: 1 0 auto; flex: 1 0 auto;
height: 100%; height: 100%;
.sidenav-content { .sidebar-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0; padding: 0;

4
src/app/main/apps/contacts/sidenavs/main/main.component.ts → src/app/main/apps/contacts/sidebars/main/main.component.ts
View File

@ -5,11 +5,11 @@ import { takeUntil } from 'rxjs/operators';
import { ContactsService } from 'app/main/apps/contacts/contacts.service'; import { ContactsService } from 'app/main/apps/contacts/contacts.service';
@Component({ @Component({
selector : 'contacts-main-sidenav', selector : 'contacts-main-sidebar',
templateUrl: './main.component.html', templateUrl: './main.component.html',
styleUrls : ['./main.component.scss'] styleUrls : ['./main.component.scss']
}) })
export class ContactsMainSidenavComponent implements OnInit, OnDestroy export class ContactsMainSidebarComponent implements OnInit, OnDestroy
{ {
user: any; user: any;
filterBy: string; filterBy: string;

1676
src/app/main/apps/dashboards/project/project.component.html
View File

File diff suppressed because it is too large Load Diff

98
src/app/main/apps/dashboards/project/project.component.scss
View File

@ -1,70 +1,62 @@
#dashboard-project { #dashboard-project {
mat-sidenav-container { > .sidebar {
width: 280px;
min-width: 280px;
max-width: 280px;
}
.mat-drawer-content, > .center {
.mat-sidenav-content {
flex: 1 1 100%;
}
.center { > .header {
height: 160px;
min-height: 160px;
max-height: 160px;
> .header { .selected-project {
height: 160px; background: rgba(0, 0, 0, 0.12);
min-height: 160px; color: #FFFFFF;
max-height: 160px; padding: 8px 16px;
height: 40px;
line-height: 24px;
font-size: 16px;
}
.selected-project { .project-selector {
background: rgba(0, 0, 0, 0.12); margin-left: 1px;
border-radius: 0;
background: rgba(0, 0, 0, 0.12);
mat-icon {
color: #FFFFFF; color: #FFFFFF;
padding: 8px 16px;
height: 40px;
line-height: 24px;
font-size: 16px;
}
.project-selector {
margin-left: 1px;
border-radius: 0;
background: rgba(0, 0, 0, 0.12);
mat-icon {
color: #FFFFFF;
}
}
}
> .content {
flex: 1;
mat-tab-group {
height: 100%;
.mat-tab-body-wrapper {
flex-grow: 1;
}
}
.mat-tab-label-container {
padding: 0 24px;
} }
} }
} }
.sidenav { > .content {
width: 250px !important; flex: 1;
min-width: 250px !important;
max-width: 250px !important;
}
.widget { mat-tab-group {
height: 100%;
&.widget5 { .mat-tab-body-wrapper {
flex-grow: 1;
.gridline-path.gridline-path-horizontal {
display: none;
} }
} }
.mat-tab-label-container {
padding: 0 24px;
}
} }
} }
}
.widget {
&.widget5 {
.gridline-path.gridline-path-horizontal {
display: none;
}
}
}
}

17
src/app/main/apps/dashboards/project/project.component.ts
View File

@ -6,6 +6,7 @@ import * as shape from 'd3-shape';
import { fuseAnimations } from '@fuse/animations'; import { fuseAnimations } from '@fuse/animations';
import { ProjectDashboardService } from 'app/main/apps/dashboards/project/project.service'; import { ProjectDashboardService } from 'app/main/apps/dashboards/project/project.service';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@Component({ @Component({
selector : 'project-dashboard', selector : 'project-dashboard',
@ -32,9 +33,11 @@ export class ProjectDashboardComponent implements OnInit
/** /**
* Constructor * Constructor
* *
* @param {FuseSidebarService} _fuseSidebarService
* @param {ProjectDashboardService} _projectDashboardService * @param {ProjectDashboardService} _projectDashboardService
*/ */
constructor( constructor(
private _fuseSidebarService: FuseSidebarService,
private _projectDashboardService: ProjectDashboardService private _projectDashboardService: ProjectDashboardService
) )
{ {
@ -161,6 +164,20 @@ export class ProjectDashboardComponent implements OnInit
this.widget11.onContactsChanged.next(this.widgets.widget11.table.rows); this.widget11.onContactsChanged.next(this.widgets.widget11.table.rows);
this.widget11.dataSource = new FilesDataSource(this.widget11); this.widget11.dataSource = new FilesDataSource(this.widget11);
} }
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Toggle the sidebar
*
* @param name
*/
toggleSidebar(name): void
{
this._fuseSidebarService.getSidebar(name).toggleOpen();
}
} }
export class FilesDataSource extends DataSource<any> export class FilesDataSource extends DataSource<any>

5
src/app/main/apps/dashboards/project/project.module.ts
View File

@ -1,10 +1,11 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
import { CdkTableModule } from '@angular/cdk/table'; import { CdkTableModule } from '@angular/cdk/table';
import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatMenuModule, MatSelectModule, MatSidenavModule, MatTableModule, MatTabsModule } from '@angular/material'; import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatMenuModule, MatSelectModule, MatTableModule, MatTabsModule } from '@angular/material';
import { NgxChartsModule } from '@swimlane/ngx-charts'; import { NgxChartsModule } from '@swimlane/ngx-charts';
import { FuseSharedModule } from '@fuse/shared.module'; import { FuseSharedModule } from '@fuse/shared.module';
import { FuseSidebarModule } from '@fuse/components';
import { FuseWidgetModule } from '@fuse/components/widget/widget.module'; import { FuseWidgetModule } from '@fuse/components/widget/widget.module';
import { ProjectDashboardComponent } from 'app/main/apps/dashboards/project/project.component'; import { ProjectDashboardComponent } from 'app/main/apps/dashboards/project/project.component';
@ -34,13 +35,13 @@ const routes: Routes = [
MatIconModule, MatIconModule,
MatMenuModule, MatMenuModule,
MatSelectModule, MatSelectModule,
MatSidenavModule,
MatTableModule, MatTableModule,
MatTabsModule, MatTabsModule,
NgxChartsModule, NgxChartsModule,
FuseSharedModule, FuseSharedModule,
FuseSidebarModule,
FuseWidgetModule FuseWidgetModule
], ],
providers : [ providers : [

35
src/app/main/apps/e-commerce/dashboard/dashboard.component.html
View File

@ -4,10 +4,12 @@
<div class="content p-24 w-100-p"> <div class="content p-24 w-100-p">
<!-- WIDGET GROUP --> <!-- WIDGET GROUP -->
<div class="widget-group" fxLayout="row wrap" fxFlex="100" fxLayoutAlign="start start" *fuseIfOnDom [@animateStagger]="{value:'50'}"> <div class="widget-group" fxLayout="row wrap" fxFlex="100" fxLayoutAlign="start start"
[@animateStagger]="{value:'50'}">
<!-- WIDGET 1 --> <!-- WIDGET 1 -->
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100"
fxFlex.gt-xs="50" fxFlex.gt-md="25">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front mat-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
@ -57,7 +59,8 @@
<!-- / WIDGET 1 --> <!-- / WIDGET 1 -->
<!-- WIDGET 2 --> <!-- WIDGET 2 -->
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100"
fxFlex.gt-xs="50" fxFlex.gt-md="25">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front mat-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
@ -100,7 +103,8 @@
<!-- / WIDGET 2 --> <!-- / WIDGET 2 -->
<!-- WIDGET 3 --> <!-- WIDGET 3 -->
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100"
fxFlex.gt-xs="50" fxFlex.gt-md="25">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front mat-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
@ -143,7 +147,8 @@
<!-- / WIDGET 3 --> <!-- / WIDGET 3 -->
<!-- WIDGET 4 --> <!-- WIDGET 4 -->
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100"
fxFlex.gt-xs="50" fxFlex.gt-md="25">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front mat-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
@ -228,7 +233,8 @@
<!-- / WIDGET 5 --> <!-- / WIDGET 5 -->
<!-- WIDGET 6 --> <!-- WIDGET 6 -->
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100"
fxFlex.gt-sm="50">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front mat-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
@ -260,13 +266,19 @@
</div> </div>
<div class="py-8 mh-16 border-top" fxLayout="row wrap" fxLayoutAlign="start center"> <div class="py-8 mh-16 border-top" fxLayout="row wrap" fxLayoutAlign="start center">
<div class="py-8 border-right" fxLayout="column" fxLayoutAlign="center center" fxFlex="100" fxFlex.gt-sm="50"> <div class="py-8 border-right" fxLayout="column" fxLayoutAlign="center center" fxFlex="100"
<span class="mat-display-1 mb-0">{{widgets.widget6.footerLeft.count[widget6.currentRange]}}</span> fxFlex.gt-sm="50">
<span class="mat-display-1 mb-0">
{{widgets.widget6.footerLeft.count[widget6.currentRange]}}
</span>
<span class="h4">{{widgets.widget6.footerLeft.title}}</span> <span class="h4">{{widgets.widget6.footerLeft.title}}</span>
</div> </div>
<div class="py-8" fxLayout="column" fxLayoutAlign="center center" fxFlex="100" fxFlex.gt-sm="50"> <div class="py-8" fxLayout="column" fxLayoutAlign="center center" fxFlex="100"
<span class="mat-display-1 mb-0">{{widgets.widget6.footerRight.count[widget6.currentRange]}}</span> fxFlex.gt-sm="50">
<span class="mat-display-1 mb-0">
{{widgets.widget6.footerRight.count[widget6.currentRange]}}
</span>
<span class="h4">{{widgets.widget6.footerRight.title}}</span> <span class="h4">{{widgets.widget6.footerRight.title}}</span>
</div> </div>
</div> </div>
@ -278,7 +290,8 @@
<!-- / WIDGET 6 --> <!-- / WIDGET 6 -->
<!-- WIDGET 7 --> <!-- WIDGET 7 -->
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50"> <fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column" fxFlex="100"
fxFlex.gt-sm="50">
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front mat-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">

4
src/app/main/apps/e-commerce/order/order.component.html
View File

@ -1,4 +1,4 @@
<div id="order" class="page-layout carded fullwidth" fusePerfectScrollbar> <div id="order" class="page-layout carded fullwidth inner-scroll">
<!-- TOP BACKGROUND --> <!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div> <div class="top-bg mat-accent-bg"></div>
@ -19,7 +19,7 @@
</button> </button>
<div fxLayout="column" fxLayoutAlign="start start" <div fxLayout="column" fxLayoutAlign="start start"
*fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}"> [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">
<div class="h2"> <div class="h2">
Order {{order.reference}} Order {{order.reference}}
</div> </div>

10
src/app/main/apps/e-commerce/orders/orders.component.html
View File

@ -1,4 +1,4 @@
<div id="orders" class="page-layout carded fullwidth" fusePerfectScrollbar> <div id="orders" class="page-layout carded fullwidth inner-scroll">
<!-- TOP BACKGROUND --> <!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div> <div class="top-bg mat-accent-bg"></div>
@ -15,8 +15,10 @@
<!-- APP TITLE --> <!-- APP TITLE -->
<div class="logo" <div class="logo"
fxLayout="row" fxLayoutAlign="start center"> fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="logo-icon mr-16" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">shopping_basket</mat-icon> <mat-icon class="logo-icon mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
<span class="logo-text h1" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Orders</span> shopping_basket
</mat-icon>
<span class="logo-text h1" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Orders</span>
</div> </div>
<!-- / APP TITLE --> <!-- / APP TITLE -->
@ -92,7 +94,7 @@
<!-- Status Column --> <!-- Status Column -->
<ng-container cdkColumnDef="status"> <ng-container cdkColumnDef="status">
<mat-header-cell *cdkHeaderCellDef mat-sort-header >Status</mat-header-cell> <mat-header-cell *cdkHeaderCellDef mat-sort-header>Status</mat-header-cell>
<mat-cell *cdkCellDef="let order"> <mat-cell *cdkCellDef="let order">
<p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color"> <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
{{order.status[0].name}} {{order.status[0].name}}

7
src/app/main/apps/e-commerce/product/product.component.html
View File

@ -1,4 +1,4 @@
<div id="product" class="page-layout carded fullwidth" fusePerfectScrollbar> <div id="product" class="page-layout carded fullwidth inner-scroll">
<!-- TOP BACKGROUND --> <!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div> <div class="top-bg mat-accent-bg"></div>
@ -17,14 +17,13 @@
<mat-icon>arrow_back</mat-icon> <mat-icon>arrow_back</mat-icon>
</button> </button>
<div class="product-image mr-8 mr-sm-16" *fuseIfOnDom <div class="product-image mr-8 mr-sm-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
[@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
<img *ngIf="product.images[0]" [src]="product.images[0].url"> <img *ngIf="product.images[0]" [src]="product.images[0].url">
<img *ngIf="!product.images[0]" [src]="'assets/images/ecommerce/product-image-placeholder.png'"> <img *ngIf="!product.images[0]" [src]="'assets/images/ecommerce/product-image-placeholder.png'">
</div> </div>
<div fxLayout="column" fxLayoutAlign="start start" <div fxLayout="column" fxLayoutAlign="start start"
*fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}"> [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">
<div class="h2" *ngIf="pageType ==='edit'"> <div class="h2" *ngIf="pageType ==='edit'">
{{product.name}} {{product.name}}
</div> </div>

7
src/app/main/apps/e-commerce/products/products.component.html
View File

@ -1,4 +1,4 @@
<div id="products" class="page-layout carded fullwidth" fusePerfectScrollbar> <div id="products" class="page-layout carded fullwidth inner-scroll">
<!-- TOP BACKGROUND --> <!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div> <div class="top-bg mat-accent-bg"></div>
@ -15,11 +15,10 @@
<!-- APP TITLE --> <!-- APP TITLE -->
<div class="logo my-12 m-sm-0" <div class="logo my-12 m-sm-0"
fxLayout="row" fxLayoutAlign="start center"> fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="logo-icon mr-16" *fuseIfOnDom <mat-icon class="logo-icon mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
[@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
shopping_basket shopping_basket
</mat-icon> </mat-icon>
<span class="logo-text h1" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}"> <span class="logo-text h1" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">
Products Products
</span> </span>
</div> </div>

6
src/app/main/apps/file-manager/file-list/file-list.component.html
View File

@ -1,4 +1,4 @@
<mat-table #table [dataSource]="dataSource" *fuseIfOnDom [@animateStagger]="{value:'50'}"> <mat-table #table [dataSource]="dataSource" [@animateStagger]="{value:'50'}">
<!-- Type Column --> <!-- Type Column -->
<ng-container cdkColumnDef="icon"> <ng-container cdkColumnDef="icon">
@ -42,8 +42,8 @@
<ng-container cdkColumnDef="detail-button"> <ng-container cdkColumnDef="detail-button">
<mat-header-cell *cdkHeaderCellDef fxFlex="48px" fxHide.gt-md></mat-header-cell> <mat-header-cell *cdkHeaderCellDef fxFlex="48px" fxHide.gt-md></mat-header-cell>
<mat-cell *cdkCellDef="let row" fxFlex="48px" fxHide.gt-md> <mat-cell *cdkCellDef="let row" fxFlex="48px" fxHide.gt-md>
<button mat-icon-button class="sidenav-toggle" <button mat-icon-button class="sidebar-toggle" fxHide.gt-md
fuseMatSidenavToggler="file-manager-right-sidenav"> (click)="toggleSidebar('file-manager-details-sidebar')">
<mat-icon class="secondary-text">info</mat-icon> <mat-icon class="secondary-text">info</mat-icon>
</button> </button>
</mat-cell> </mat-cell>

15
src/app/main/apps/file-manager/file-list/file-list.component.ts
View File

@ -4,6 +4,7 @@ import { Observable, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
import { fuseAnimations } from '@fuse/animations'; import { fuseAnimations } from '@fuse/animations';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
import { FileManagerService } from 'app/main/apps/file-manager/file-manager.service'; import { FileManagerService } from 'app/main/apps/file-manager/file-manager.service';
@ -27,9 +28,11 @@ export class FileManagerFileListComponent implements OnInit, OnDestroy
* Constructor * Constructor
* *
* @param {FileManagerService} _fileManagerService * @param {FileManagerService} _fileManagerService
* @param {FuseSidebarService} _fuseSidebarService
*/ */
constructor( constructor(
private _fileManagerService: FileManagerService private _fileManagerService: FileManagerService,
private _fuseSidebarService: FuseSidebarService
) )
{ {
// Set the private defaults // Set the private defaults
@ -83,6 +86,16 @@ export class FileManagerFileListComponent implements OnInit, OnDestroy
{ {
this._fileManagerService.onFileSelected.next(selected); this._fileManagerService.onFileSelected.next(selected);
} }
/**
* Toggle the sidebar
*
* @param name
*/
toggleSidebar(name): void
{
this._fuseSidebarService.getSidebar(name).toggleOpen();
}
} }
export class FilesDataSource extends DataSource<any> export class FilesDataSource extends DataSource<any>

122
src/app/main/apps/file-manager/file-manager.component.html
View File

@ -1,79 +1,75 @@
<div id="file-manager" class="page-layout simple right-sidenav" fusePerfectScrollbar> <div id="file-manager" class="page-layout simple right-sidebar inner-scroll">
<mat-sidenav-container> <!-- SIDEBAR -->
<fuse-sidebar class="sidebar main-sidebar" name="file-manager-main-sidebar" position="left">
<file-manager-main-sidebar></file-manager-main-sidebar>
</fuse-sidebar>
<!-- / SIDEBAR -->
<!-- SIDENAV --> <!-- CENTER -->
<mat-sidenav class="sidenav left-sidenav" position="start" opened="false" mode="over" <div class="center" fxFlex>
fuseMatSidenavHelper="file-manager-left-sidenav">
<file-manager-main-sidenav></file-manager-main-sidenav>
</mat-sidenav>
<!-- / SIDENAV -->
<!-- CENTER --> <!-- HEADER -->
<div class="center" fxFlex> <div class="header mat-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between start">
<!-- HEADER --> <!-- TOOLBAR -->
<div class="header mat-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between start"> <div class="toolbar w-100-p" fxFlex fxLayout="row" fxLayoutAlign="space-between start">
<!-- TOOLBAR --> <div class="left-side" fxLayout="row">
<div class="toolbar w-100-p" fxFlex fxLayout="row" fxLayoutAlign="space-between start"> <button mat-icon-button class="sidebar-toggle"
(click)="toggleSidebar('file-manager-main-sidebar')">
<div class="left-side" fxLayout="row"> <mat-icon>menu</mat-icon>
<button mat-icon-button class="sidenav-toggle"
fuseMatSidenavToggler="file-manager-left-sidenav">
<mat-icon>menu</mat-icon>
</button>
</div>
<div class="right-side" fxLayout="row">
<button mat-icon-button aria-label="Search" matTooltip="Search">
<mat-icon>search</mat-icon>
</button>
</div>
</div>
<!-- / TOOLBAR -->
<!-- BREADCRUMB -->
<div class="breadcrumb text-truncate h1 pl-72" fxLayout="row" fxLayoutAlign="start center"
*fuseIfOnDom [@animate]="{value:'*',params:{x:'50px'}}">
<div *ngFor="let path of pathArr; last as isLast" fxLayout="row" fxLayoutAlign="start center">
<span>{{path}}</span>
<mat-icon *ngIf="!isLast" class="separator">chevron_right</mat-icon>
</div>
</div>
<!-- / BREADCRUMB -->
<!-- ADD FILE BUTTON -->
<div class="file-uploader">
<input hidden type="file" #fileInput/>
<button mat-fab
class="add-file-button mat-warn"
(click)="fileInput.click()"
aria-label="Add file"
*fuseIfOnDom [@animate]="{value:'*', params:{delay:'300ms',scale:'0.2'}}">
<mat-icon>add</mat-icon>
</button> </button>
</div> </div>
<!-- / ADD FILE BUTTON -->
<div class="right-side" fxLayout="row">
<button mat-icon-button aria-label="Search" matTooltip="Search">
<mat-icon>search</mat-icon>
</button>
</div>
</div> </div>
<!-- / HEADER --> <!-- / TOOLBAR -->
<!-- CONTENT --> <!-- BREADCRUMB -->
<div class="content mat-white-bg" fusePerfectScrollbar> <div class="breadcrumb text-truncate h1 pl-72" fxLayout="row" fxLayoutAlign="start center"
<file-list></file-list> [@animate]="{value:'*',params:{x:'50px'}}">
<div *ngFor="let path of pathArr; last as isLast" fxLayout="row" fxLayoutAlign="start center">
<span>{{path}}</span>
<mat-icon *ngIf="!isLast" class="separator">chevron_right</mat-icon>
</div>
</div> </div>
<!-- / CONTENT --> <!-- / BREADCRUMB -->
<!-- ADD FILE BUTTON -->
<div class="file-uploader">
<input hidden type="file" #fileInput/>
<button mat-fab
class="add-file-button mat-warn"
(click)="fileInput.click()"
aria-label="Add file"
[@animate]="{value:'*', params:{delay:'300ms',scale:'0.2'}}">
<mat-icon>add</mat-icon>
</button>
</div>
<!-- / ADD FILE BUTTON -->
</div> </div>
<!-- / CENTER --> <!-- / HEADER -->
<!-- SIDENAV --> <!-- CONTENT -->
<mat-sidenav class="sidenav right-sidenav " position="end" opened="true" mode="side" <div class="content mat-white-bg" fusePerfectScrollbar>
fuseMatSidenavHelper="file-manager-right-sidenav" mat-is-locked-open="gt-md"> <file-list></file-list>
<file-manager-details-sidenav></file-manager-details-sidenav> </div>
</mat-sidenav> <!-- / CONTENT -->
<!-- / SIDENAV -->
</div>
<!-- / CENTER -->
<!-- SIDEBAR -->
<fuse-sidebar class="sidebar details-sidebar" name="file-manager-details-sidebar" position="right"
lockedOpen="gt-md">
<file-manager-details-sidebar></file-manager-details-sidebar>
</fuse-sidebar>
<!-- / SIDEBAR -->
</mat-sidenav-container>
</div> </div>

72
src/app/main/apps/file-manager/file-manager.component.scss
View File

@ -2,52 +2,46 @@
#file-manager { #file-manager {
mat-sidenav-container { .sidebar {
width: 320px !important;
min-width: 320px !important;
max-width: 320px !important;
.sidenav { &.main-sidebar {
width: 320px !important; }
min-width: 320px !important;
max-width: 320px !important;
&.left-sidenav { &.details-sidebar {
@include media-breakpoint('gt-md') {
z-index: 0;
}
}
}
.center {
overflow: hidden;
.header {
position: relative;
height: 160px;
min-height: 160px;
max-height: 160px;
@include media-breakpoint-down('sm') {
height: 120px;
min-height: 120px;
max-height: 120px;
} }
&.right-sidenav { .add-file-button {
@include media-breakpoint('gt-md') { position: absolute;
z-index: 0; bottom: -28px;
} left: 16px;
z-index: 999;
} }
} }
> .mat-sidenav-content, .content {
> .mat-drawer-content { flex: 1 1 auto;
z-index: 1;
.center {
.header {
position: relative;
height: 160px;
min-height: 160px;
max-height: 160px;
@include media-breakpoint-down('sm') {
height: 120px;
min-height: 120px;
max-height: 120px;
}
.add-file-button {
position: absolute;
bottom: -28px;
left: 16px;
z-index: 999;
}
}
.content {
}
}
} }
} }

19
src/app/main/apps/file-manager/file-manager.component.ts
View File

@ -3,6 +3,7 @@ import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
import { fuseAnimations } from '@fuse/animations'; import { fuseAnimations } from '@fuse/animations';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
import { FileManagerService } from 'app/main/apps/file-manager/file-manager.service'; import { FileManagerService } from 'app/main/apps/file-manager/file-manager.service';
@ -25,9 +26,11 @@ export class FileManagerComponent implements OnInit, OnDestroy
* Constructor * Constructor
* *
* @param {FileManagerService} _fileManagerService * @param {FileManagerService} _fileManagerService
* @param {FuseSidebarService} _fuseSidebarService
*/ */
constructor( constructor(
private _fileManagerService: FileManagerService private _fileManagerService: FileManagerService,
private _fuseSidebarService: FuseSidebarService
) )
{ {
// Set the private defaults // Set the private defaults
@ -60,4 +63,18 @@ export class FileManagerComponent implements OnInit, OnDestroy
this._unsubscribeAll.next(); this._unsubscribeAll.next();
this._unsubscribeAll.complete(); this._unsubscribeAll.complete();
} }
// -----------------------------------------------------------------------------------------------------
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Toggle the sidebar
*
* @param name
*/
toggleSidebar(name): void
{
this._fuseSidebarService.getSidebar(name).toggleOpen();
}
} }

15
src/app/main/apps/file-manager/file-manager.module.ts
View File

@ -1,15 +1,16 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
import { CdkTableModule } from '@angular/cdk/table'; import { CdkTableModule } from '@angular/cdk/table';
import { MatButtonModule, MatIconModule, MatRippleModule, MatSidenavModule, MatSlideToggleModule, MatTableModule } from '@angular/material'; import { MatButtonModule, MatIconModule, MatRippleModule, MatSlideToggleModule, MatTableModule } from '@angular/material';
import { FuseSharedModule } from '@fuse/shared.module'; import { FuseSharedModule } from '@fuse/shared.module';
import { FuseSidebarModule } from '@fuse/components';
import { FileManagerService } from 'app/main/apps/file-manager/file-manager.service'; import { FileManagerService } from 'app/main/apps/file-manager/file-manager.service';
import { FileManagerComponent } from 'app/main/apps/file-manager/file-manager.component'; import { FileManagerComponent } from 'app/main/apps/file-manager/file-manager.component';
import { FileManagerDetailsSidenavComponent } from 'app/main/apps/file-manager/sidenavs/details/details.component'; import { FileManagerDetailsSidebarComponent } from 'app/main/apps/file-manager/sidebars/details/details.component';
import { FileManagerFileListComponent } from 'app/main/apps/file-manager/file-list/file-list.component'; import { FileManagerFileListComponent } from 'app/main/apps/file-manager/file-list/file-list.component';
import { FileManagerMainSidenavComponent } from 'app/main/apps/file-manager/sidenavs/main/main.component'; import { FileManagerMainSidebarComponent } from 'app/main/apps/file-manager/sidebars/main/main.component';
const routes: Routes = [ const routes: Routes = [
{ {
@ -26,8 +27,8 @@ const routes: Routes = [
declarations: [ declarations: [
FileManagerComponent, FileManagerComponent,
FileManagerFileListComponent, FileManagerFileListComponent,
FileManagerMainSidenavComponent, FileManagerMainSidebarComponent,
FileManagerDetailsSidenavComponent FileManagerDetailsSidebarComponent
], ],
imports : [ imports : [
RouterModule.forChild(routes), RouterModule.forChild(routes),
@ -37,10 +38,10 @@ const routes: Routes = [
MatIconModule, MatIconModule,
MatRippleModule, MatRippleModule,
MatSlideToggleModule, MatSlideToggleModule,
MatSidenavModule,
MatTableModule, MatTableModule,
FuseSharedModule FuseSharedModule,
FuseSidebarModule
], ],
providers : [ providers : [
FileManagerService FileManagerService

11
src/app/main/apps/file-manager/sidenavs/details/details.component.html → src/app/main/apps/file-manager/sidebars/details/details.component.html
View File

@ -1,4 +1,4 @@
<!-- SIDENAV HEADER --> <!-- SIDEBAR HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between"> <div class="header mat-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between">
<div class="toolbar" fxLayout="row" fxLayoutAlign="end center"> <div class="toolbar" fxLayout="row" fxLayoutAlign="end center">
@ -24,13 +24,12 @@
</div> </div>
</div> </div>
</div> </div>
<!-- / SIDENAV HEADER --> <!-- / SIDEBAR HEADER -->
<!-- SIDENAV CONTENT --> <!-- SIDEBAR CONTENT -->
<div class="content p-24 mat-white-bg" fusePerfectScrollbar> <div class="content p-24 mat-white-bg" fusePerfectScrollbar>
<div class="file-details" <div class="file-details" [@animate]="{value:'*',params:{delay:'200ms'}}">
*fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms'}}">
<div class="preview file-icon" fxLayout="row" fxLayoutAlign="center center"> <div class="preview file-icon" fxLayout="row" fxLayoutAlign="center center">
<mat-icon class="type-icon s-48" [ngClass]="selected.type"></mat-icon> <mat-icon class="type-icon s-48" [ngClass]="selected.type"></mat-icon>
@ -81,4 +80,4 @@
</div> </div>
</div> </div>
<!-- / SIDENAV CONTENT --> <!-- / SIDEBAR CONTENT -->

2
src/app/main/apps/file-manager/sidenavs/details/details.component.scss → src/app/main/apps/file-manager/sidebars/details/details.component.scss
View File

@ -1,7 +1,7 @@
:host { :host {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1 0 auto; flex: 1 1 auto;
height: 100%; height: 100%;
> .header { > .header {

4
src/app/main/apps/file-manager/sidenavs/details/details.component.ts → src/app/main/apps/file-manager/sidebars/details/details.component.ts
View File

@ -7,12 +7,12 @@ import { fuseAnimations } from '@fuse/animations';
import { FileManagerService } from 'app/main/apps/file-manager/file-manager.service'; import { FileManagerService } from 'app/main/apps/file-manager/file-manager.service';
@Component({ @Component({
selector : 'file-manager-details-sidenav', selector : 'file-manager-details-sidebar',
templateUrl: './details.component.html', templateUrl: './details.component.html',
styleUrls : ['./details.component.scss'], styleUrls : ['./details.component.scss'],
animations : fuseAnimations animations : fuseAnimations
}) })
export class FileManagerDetailsSidenavComponent implements OnInit, OnDestroy export class FileManagerDetailsSidebarComponent implements OnInit, OnDestroy
{ {
selected: any; selected: any;

20
src/app/main/apps/file-manager/sidenavs/main/main.component.html → src/app/main/apps/file-manager/sidebars/main/main.component.html
View File

@ -1,54 +1,54 @@
<!-- SIDENAV HEADER --> <!-- SIDEBAR HEADER -->
<div class="header p-24" fxLayout="column" fxLayoutAlign="space-between"> <div class="header p-24" fxLayout="column" fxLayoutAlign="space-between">
<div class="logo" fxLayout="row" fxLayoutAlign="start center"> <div class="logo" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="logo-icon mr-16">folder</mat-icon> <mat-icon class="logo-icon secondary-text mr-16">folder</mat-icon>
<span class="logo-text h1">File Manager</span> <span class="logo-text h1">File Manager</span>
</div> </div>
</div> </div>
<!-- / SIDENAV HEADER --> <!-- / SIDEBAR HEADER -->
<!-- SIDENAV CONTENT --> <!-- SIDEBAR CONTENT -->
<div class="content py-16" fusePerfectScrollbar> <div class="content py-16" fusePerfectScrollbar>
<div class="nav"> <div class="nav">
<div class="nav-item" aria-label="inbox"> <div class="nav-item" aria-label="inbox">
<a class="nav-link" matRipple> <a class="nav-link" matRipple>
<mat-icon class="nav-link-icon">folder</mat-icon> <mat-icon class="nav-link-icon secondary-text">folder</mat-icon>
<span class="title">My Files</span> <span class="title">My Files</span>
</a> </a>
</div> </div>
<div class="nav-item" aria-label="starred"> <div class="nav-item" aria-label="starred">
<a class="nav-link" matRipple> <a class="nav-link" matRipple>
<mat-icon class="nav-link-icon">star</mat-icon> <mat-icon class="nav-link-icon secondary-text">star</mat-icon>
<div class="title">Starred</div> <div class="title">Starred</div>
</a> </a>
</div> </div>
<div class="nav-item" aria-label="starred"> <div class="nav-item" aria-label="starred">
<a class="nav-link" matRipple> <a class="nav-link" matRipple>
<mat-icon class="nav-link-icon">folder_shared</mat-icon> <mat-icon class="nav-link-icon secondary-text">folder_shared</mat-icon>
<div class="title">Sharred with me</div> <div class="title">Sharred with me</div>
</a> </a>
</div> </div>
<div class="nav-item" aria-label="starred"> <div class="nav-item" aria-label="starred">
<a class="nav-link" matRipple> <a class="nav-link" matRipple>
<mat-icon class="nav-link-icon">access_time</mat-icon> <mat-icon class="nav-link-icon secondary-text">access_time</mat-icon>
<div class="title">Recent</div> <div class="title">Recent</div>
</a> </a>
</div> </div>
<div class="nav-item" aria-label="starred"> <div class="nav-item" aria-label="starred">
<a class="nav-link" matRipple> <a class="nav-link" matRipple>
<mat-icon class="nav-link-icon">not_interested</mat-icon> <mat-icon class="nav-link-icon secondary-text">not_interested</mat-icon>
<div class="title">Offline</div> <div class="title">Offline</div>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
<!-- / SIDENAV CONTENT --> <!-- / SIDEBAR CONTENT -->

0
src/app/main/apps/file-manager/sidenavs/main/main.component.scss → src/app/main/apps/file-manager/sidebars/main/main.component.scss
View File

4
src/app/main/apps/file-manager/sidenavs/main/main.component.ts → src/app/main/apps/file-manager/sidebars/main/main.component.ts
View File

@ -1,11 +1,11 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
@Component({ @Component({
selector : 'file-manager-main-sidenav', selector : 'file-manager-main-sidebar',
templateUrl: './main.component.html', templateUrl: './main.component.html',
styleUrls : ['./main.component.scss'] styleUrls : ['./main.component.scss']
}) })
export class FileManagerMainSidenavComponent export class FileManagerMainSidebarComponent
{ {
selected: any; selected: any;

3
src/app/main/apps/mail-ngrx/dialogs/compose/compose.component.scss
View File

@ -1,4 +1,5 @@
.mail-compose-dialog { .mail-ngrx-compose-dialog {
.mat-dialog-container { .mat-dialog-container {
padding: 0; padding: 0;
width: 720px; width: 720px;

2
src/app/main/apps/mail-ngrx/dialogs/compose/compose.component.ts
View File

@ -3,7 +3,7 @@ import { FormBuilder, FormGroup } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
@Component({ @Component({
selector : 'mail-compose', selector : 'mail-ngrx-compose',
templateUrl : './compose.component.html', templateUrl : './compose.component.html',
styleUrls : ['./compose.component.scss'], styleUrls : ['./compose.component.scss'],
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None

2
src/app/main/apps/mail-ngrx/mail-details/mail-details.component.ts
View File

@ -7,7 +7,7 @@ import * as fromStore from 'app/main/apps/mail-ngrx/store';
import { MailNgrxService } from 'app/main/apps/mail-ngrx/mail.service'; import { MailNgrxService } from 'app/main/apps/mail-ngrx/mail.service';
@Component({ @Component({
selector : 'mail-details', selector : 'mail-ngrx-details',
templateUrl : './mail-details.component.html', templateUrl : './mail-details.component.html',
styleUrls : ['./mail-details.component.scss'], styleUrls : ['./mail-details.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush

2
src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts
View File

@ -7,7 +7,7 @@ import { Mail } from '../../mail.model';
import * as fromStore from '../../store'; import * as fromStore from '../../store';
@Component({ @Component({
selector : 'mail-list-item', selector : 'mail-ngrx-list-item',
templateUrl : './mail-list-item.component.html', templateUrl : './mail-list-item.component.html',
styleUrls : ['./mail-list-item.component.scss'], styleUrls : ['./mail-list-item.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush

4
src/app/main/apps/mail-ngrx/mail-list/mail-list.component.html
View File

@ -3,7 +3,7 @@
</div> </div>
<div class="mail-list"> <div class="mail-list">
<mail-list-item matRipple *ngFor="let mail of mails" [mail]="mail" (click)="readMail(mail.id)" <mail-ngrx-list-item matRipple *ngFor="let mail of mails" [mail]="mail" (click)="readMail(mail.id)"
[ngClass]="{'current-mail mat-accent-50-bg':mail?.id == currentMail?.id}"> [ngClass]="{'current-mail mat-accent-50-bg':mail?.id == currentMail?.id}">
</mail-list-item> </mail-ngrx-list-item>
</div> </div>

2
src/app/main/apps/mail-ngrx/mail-list/mail-list.component.ts
View File

@ -5,7 +5,7 @@ import { Mail } from 'app/main/apps/mail-ngrx/mail.model';
import { MailNgrxService } from 'app/main/apps/mail-ngrx/mail.service'; import { MailNgrxService } from 'app/main/apps/mail-ngrx/mail.service';
@Component({ @Component({
selector : 'mail-list', selector : 'mail-ngrx-list',
templateUrl : './mail-list.component.html', templateUrl : './mail-list.component.html',
styleUrls : ['./mail-list.component.scss'], styleUrls : ['./mail-list.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush

178
src/app/main/apps/mail-ngrx/mail.component.html
View File

@ -1,115 +1,109 @@
<div id="mail" class="page-layout carded left-sidenav" fusePerfectScrollbar> <div id="mail" class="page-layout carded left-sidebar inner-scroll">
<!-- TOP BACKGROUND --> <!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div> <div class="top-bg mat-accent-bg"></div>
<!-- / TOP BACKGROUND --> <!-- / TOP BACKGROUND -->
<mat-sidenav-container> <!-- SIDEBAR -->
<fuse-sidebar class="sidebar" name="mail-ngrx-main-sidebar" position="left" lockedOpen="gt-md">
<mail-ngrx-main-sidebar></mail-ngrx-main-sidebar>
</fuse-sidebar>
<!-- / SIDEBAR -->
<!-- SIDENAV --> <!-- CENTER -->
<mat-sidenav class="sidenav mat-sidenav-opened" position="start" mode="side" opened="true" <div class="center">
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<mail-main-sidenav></mail-main-sidenav>
</mat-sidenav>
<!-- / SIDENAV -->
<!-- CENTER --> <!-- CONTENT HEADER -->
<div class="center"> <div class="header" fxLayout="row" fxLayoutAlign="start center">
<!-- CONTENT HEADER --> <div class="search-wrapper" fxFlex fxLayout="row" fxLayoutAlign="start center">
<div class="header" fxLayout="row" fxLayoutAlign="start center">
<div class="search-wrapper" fxFlex fxLayout="row" fxLayoutAlign="start center"> <button mat-icon-button class="sidebar-toggle" fxHide.gt-md
(click)="toggleSidebar('mail-ngrx-main-sidebar')">
<mat-icon>menu</mat-icon>
</button>
<button mat-icon-button class="sidenav-toggle" <div class="search mat-white-bg" flex fxLayout="row" fxLayoutAlign="start center">
fuseMatSidenavToggler="carded-left-sidenav" <mat-icon>search</mat-icon>
fxHide.gt-md aria-label="Toggle Sidenav"> <input [formControl]="searchInput" [placeholder]="'MAIL.SEARCH_PLACEHOLDER' | translate" fxFlex>
<mat-icon>menu</mat-icon> </div>
</div>
</div>
<!-- / CONTENT HEADER -->
<!-- CONTENT CARD -->
<div class="content-card mat-white-bg" [ngClass]="{'current-mail-selected':currentMail$ | async}">
<!-- CONTENT TOOLBAR -->
<div class="toolbar px-24 py-8">
<div class="mail-selection" fxFlex="row" fxLayoutAlign="start center">
<mat-checkbox (click)="toggleSelectAll($event)"
[checked]="hasSelectedMails"
[indeterminate]="isIndeterminate">
</mat-checkbox>
<button mat-icon-button [matMenuTriggerFor]="selectMenu">
<mat-icon>arrow_drop_down</mat-icon>
</button>
<mat-menu #selectMenu="matMenu">
<button mat-menu-item (click)="selectAllMails()">All</button>
<button mat-menu-item (click)="deselectAllMails()">None</button>
<button mat-menu-item (click)="selectMailsByParameter('read', true)">Read</button>
<button mat-menu-item (click)="selectMailsByParameter('read', false)">Unread</button>
<button mat-menu-item (click)="selectMailsByParameter('starred', true)">Starred</button>
<button mat-menu-item (click)="selectMailsByParameter('starred', false)">Unstarred</button>
<button mat-menu-item (click)="selectMailsByParameter('important', true)">Important</button>
<button mat-menu-item (click)="selectMailsByParameter('important', false)">Unimportant</button>
</mat-menu>
<div class="toolbar-separator" *ngIf="hasSelectedMails"></div>
<button mat-icon-button (click)="setFolderOnSelectedMails(4)" *ngIf="hasSelectedMails">
<mat-icon class="secondary-text">delete</mat-icon>
</button> </button>
<div class="search mat-white-bg" flex fxLayout="row" fxLayoutAlign="start center"> <button mat-icon-button [matMenuTriggerFor]="folderMenu" *ngIf="hasSelectedMails">
<mat-icon>search</mat-icon> <mat-icon class="secondary-text">folder</mat-icon>
<input [formControl]="searchInput" [placeholder]="'MAIL.SEARCH_PLACEHOLDER' | translate" fxFlex> </button>
</div> <mat-menu #folderMenu="matMenu">
<button mat-menu-item *ngFor="let folder of folders$ | async"
(click)="setFolderOnSelectedMails(folder.id)">{{folder.title}}
</button>
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="labelMenu" *ngIf="hasSelectedMails">
<mat-icon class="secondary-text">label</mat-icon>
</button>
<mat-menu #labelMenu="matMenu">
<button mat-menu-item *ngFor="let label of labels$ | async"
(click)="toggleLabelOnSelectedMails(label.id)">{{label.title}}
</button>
</mat-menu>
</div>
<div *ngIf="currentMail$ | async" fxHide.gt-xs>
<button mat-icon-button (click)="deselectCurrentMail()">
<mat-icon class="secondary-text">arrow_back</mat-icon>
</button>
</div> </div>
</div> </div>
<!-- / CONTENT HEADER --> <!-- / CONTENT TOOLBAR -->
<!-- CONTENT CARD --> <!-- CONTENT -->
<div class="content-card mat-white-bg" [ngClass]="{'current-mail-selected':currentMail$ | async}"> <div class="content" fxLayout="row">
<!-- CONTENT TOOLBAR --> <mail-ngrx-list fusePerfectScrollbar fxFlex [mails]="mails$ | async" [currentMail]="currentMail$ | async"></mail-ngrx-list>
<div class="toolbar px-24 py-8"> <mail-ngrx-details [mail]="currentMail$ | async" fusePerfectScrollbar fxFlex></mail-ngrx-details>
<div class="mail-selection" fxFlex="row" fxLayoutAlign="start center">
<mat-checkbox (click)="toggleSelectAll($event)"
[checked]="hasSelectedMails"
[indeterminate]="isIndeterminate">
</mat-checkbox>
<button mat-icon-button [matMenuTriggerFor]="selectMenu">
<mat-icon>arrow_drop_down</mat-icon>
</button>
<mat-menu #selectMenu="matMenu">
<button mat-menu-item (click)="selectAllMails()">All</button>
<button mat-menu-item (click)="deselectAllMails()">None</button>
<button mat-menu-item (click)="selectMailsByParameter('read', true)">Read</button>
<button mat-menu-item (click)="selectMailsByParameter('read', false)">Unread</button>
<button mat-menu-item (click)="selectMailsByParameter('starred', true)">Starred</button>
<button mat-menu-item (click)="selectMailsByParameter('starred', false)">Unstarred</button>
<button mat-menu-item (click)="selectMailsByParameter('important', true)">Important</button>
<button mat-menu-item (click)="selectMailsByParameter('important', false)">Unimportant</button>
</mat-menu>
<div class="toolbar-separator" *ngIf="hasSelectedMails"></div>
<button mat-icon-button (click)="setFolderOnSelectedMails(4)" *ngIf="hasSelectedMails">
<mat-icon class="secondary-text">delete</mat-icon>
</button>
<button mat-icon-button [matMenuTriggerFor]="folderMenu" *ngIf="hasSelectedMails">
<mat-icon class="secondary-text">folder</mat-icon>
</button>
<mat-menu #folderMenu="matMenu">
<button mat-menu-item *ngFor="let folder of folders$ | async"
(click)="setFolderOnSelectedMails(folder.id)">{{folder.title}}
</button>
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="labelMenu" *ngIf="hasSelectedMails">
<mat-icon class="secondary-text">label</mat-icon>
</button>
<mat-menu #labelMenu="matMenu">
<button mat-menu-item *ngFor="let label of labels$ | async"
(click)="toggleLabelOnSelectedMails(label.id)">{{label.title}}
</button>
</mat-menu>
</div>
<div *ngIf="currentMail$ | async" fxHide.gt-xs>
<button mat-icon-button (click)="deselectCurrentMail()">
<mat-icon class="secondary-text">arrow_back</mat-icon>
</button>
</div>
</div>
<!-- / CONTENT TOOLBAR -->
<!-- CONTENT -->
<div class="content" fxLayout="row">
<mail-list fusePerfectScrollbar fxFlex [mails]="mails$ | async" [currentMail]="currentMail$ | async"></mail-list>
<mail-details [mail]="currentMail$ | async" fusePerfectScrollbar fxFlex></mail-details>
</div>
<!-- / CONTENT -->
</div> </div>
<!-- / CONTENT CARD --> <!-- / CONTENT -->
</div> </div>
<!-- / CENTER --> <!-- / CONTENT CARD -->
</mat-sidenav-container> </div>
<!-- / CENTER -->
</div> </div>

2
src/app/main/apps/mail-ngrx/mail.component.scss
View File

@ -10,7 +10,7 @@
.search-wrapper { .search-wrapper {
@include mat-elevation(7); @include mat-elevation(7);
.sidenav-toggle { .sidebar-toggle {
margin: 0; margin: 0;
width: 56px; width: 56px;
height: 56px; height: 56px;

27
src/app/main/apps/mail-ngrx/mail.component.ts
View File

@ -13,6 +13,7 @@ import * as fromStore from 'app/main/apps/mail-ngrx/store';
import { locale as english } from 'app/main/apps/mail-ngrx/i18n/en'; import { locale as english } from 'app/main/apps/mail-ngrx/i18n/en';
import { locale as turkish } from 'app/main/apps/mail-ngrx/i18n/tr'; import { locale as turkish } from 'app/main/apps/mail-ngrx/i18n/tr';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@Component({ @Component({
selector : 'mail-ngrx', selector : 'mail-ngrx',
@ -37,18 +38,20 @@ export class MailNgrxComponent implements OnInit, OnDestroy
/** /**
* Constructor * Constructor
* *
* @param {FuseConfigService} _fuseConfigService
* @param {MailNgrxService} _mailNgrxService
* @param {FuseTranslationLoaderService} _fuseTranslationLoaderService
* @param {Store<MailAppState>} _store
* @param {ChangeDetectorRef} _changeDetectorRef * @param {ChangeDetectorRef} _changeDetectorRef
* @param {FuseConfigService} _fuseConfigService
* @param {FuseSidebarService} _fuseSidebarService
* @param {FuseTranslationLoaderService} _fuseTranslationLoaderService
* @param {MailNgrxService} _mailNgrxService
* @param {Store<MailAppState>} _store
*/ */
constructor( constructor(
private _changeDetectorRef: ChangeDetectorRef,
private _fuseConfigService: FuseConfigService, private _fuseConfigService: FuseConfigService,
private _mailNgrxService: MailNgrxService, private _fuseSidebarService: FuseSidebarService,
private _fuseTranslationLoaderService: FuseTranslationLoaderService, private _fuseTranslationLoaderService: FuseTranslationLoaderService,
private _store: Store<fromStore.MailAppState>, private _mailNgrxService: MailNgrxService,
private _changeDetectorRef: ChangeDetectorRef private _store: Store<fromStore.MailAppState>
) )
{ {
// Configure the layout // Configure the layout
@ -198,4 +201,14 @@ export class MailNgrxComponent implements OnInit, OnDestroy
{ {
this._changeDetectorRef.markForCheck(); this._changeDetectorRef.markForCheck();
} }
/**
* Toggle the sidebar
*
* @param name
*/
toggleSidebar(name): void
{
this._fuseSidebarService.getSidebar(name).toggleOpen();
}
} }

9
src/app/main/apps/mail-ngrx/mail.module.ts
View File

@ -1,9 +1,10 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
import { MatButtonModule, MatCheckboxModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatRippleModule, MatSelectModule, MatSidenavModule, MatToolbarModule } from '@angular/material'; import { MatButtonModule, MatCheckboxModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatRippleModule, MatSelectModule, MatToolbarModule } from '@angular/material';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { FuseSharedModule } from '@fuse/shared.module'; import { FuseSharedModule } from '@fuse/shared.module';
import { FuseSidebarModule } from '@fuse/components';
import * as fromGuards from 'app/main/apps/mail-ngrx/store/guards/index'; import * as fromGuards from 'app/main/apps/mail-ngrx/store/guards/index';
import { MailNgrxStoreModule } from 'app/main/apps/mail-ngrx/store/store.module'; import { MailNgrxStoreModule } from 'app/main/apps/mail-ngrx/store/store.module';
@ -11,7 +12,7 @@ import { MailNgrxComponent } from 'app/main/apps/mail-ngrx/mail.component';
import { MailNgrxListComponent } from 'app/main/apps/mail-ngrx/mail-list/mail-list.component'; import { MailNgrxListComponent } from 'app/main/apps/mail-ngrx/mail-list/mail-list.component';
import { MailNgrxListItemComponent } from 'app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component'; import { MailNgrxListItemComponent } from 'app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component';
import { MailNgrxDetailsComponent } from 'app/main/apps/mail-ngrx/mail-details/mail-details.component'; import { MailNgrxDetailsComponent } from 'app/main/apps/mail-ngrx/mail-details/mail-details.component';
import { MailNgrxMainSidenavComponent } from 'app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component'; import { MailNgrxMainSidebarComponent } from 'app/main/apps/mail-ngrx/sidebars/main/main-sidebar.component';
import { MailNgrxComposeDialogComponent } from 'app/main/apps/mail-ngrx/dialogs/compose/compose.component'; import { MailNgrxComposeDialogComponent } from 'app/main/apps/mail-ngrx/dialogs/compose/compose.component';
import { MailNgrxService } from 'app/main/apps/mail-ngrx/mail.service'; import { MailNgrxService } from 'app/main/apps/mail-ngrx/mail.service';
@ -58,7 +59,7 @@ const routes: Routes = [
MailNgrxListComponent, MailNgrxListComponent,
MailNgrxListItemComponent, MailNgrxListItemComponent,
MailNgrxDetailsComponent, MailNgrxDetailsComponent,
MailNgrxMainSidenavComponent, MailNgrxMainSidebarComponent,
MailNgrxComposeDialogComponent MailNgrxComposeDialogComponent
], ],
imports : [ imports : [
@ -73,12 +74,12 @@ const routes: Routes = [
MatMenuModule, MatMenuModule,
MatRippleModule, MatRippleModule,
MatSelectModule, MatSelectModule,
MatSidenavModule,
MatToolbarModule, MatToolbarModule,
TranslateModule, TranslateModule,
FuseSharedModule, FuseSharedModule,
FuseSidebarModule,
MailNgrxStoreModule MailNgrxStoreModule
], ],

8
src/app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component.html → src/app/main/apps/mail-ngrx/sidebars/main/main-sidebar.component.html
View File

@ -1,4 +1,4 @@
<!-- SIDENAV HEADER --> <!-- SIDEBAR HEADER -->
<div fxLayout="column" fxLayoutAlign="space-between start" <div fxLayout="column" fxLayoutAlign="space-between start"
class="header mat-accent-bg p-24 pb-4"> class="header mat-accent-bg p-24 pb-4">
@ -20,9 +20,9 @@
</div> </div>
</div> </div>
<!-- / SIDENAV HEADER --> <!-- / SIDEBAR HEADER -->
<!-- SIDENAV CONTENT --> <!-- SIDEBAR CONTENT -->
<div class="content" fusePerfectScrollbar> <div class="content" fusePerfectScrollbar>
<div class="p-24"> <div class="p-24">
@ -69,4 +69,4 @@
</div> </div>
</div> </div>
<!-- / SIDENAV CONTENT --> <!-- / SIDEBAR CONTENT -->

0
src/app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component.scss → src/app/main/apps/mail-ngrx/sidebars/main/main-sidebar.component.scss
View File

12
src/app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component.ts → src/app/main/apps/mail-ngrx/sidebars/main/main-sidebar.component.ts
View File

@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core'; import { ChangeDetectionStrategy, Component } from '@angular/core';
import { MatDialog } from '@angular/material'; import { MatDialog } from '@angular/material';
import { FormGroup } from '@angular/forms'; import { FormGroup } from '@angular/forms';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
@ -9,12 +9,12 @@ import * as fromStore from 'app/main/apps/mail-ngrx/store';
import { MailNgrxComposeDialogComponent } from 'app/main/apps/mail-ngrx/dialogs/compose/compose.component'; import { MailNgrxComposeDialogComponent } from 'app/main/apps/mail-ngrx/dialogs/compose/compose.component';
@Component({ @Component({
selector : 'mail-main-sidenav', selector : 'mail-ngrx-main-sidebar',
templateUrl : './main-sidenav.component.html', templateUrl : './main-sidebar.component.html',
styleUrls : ['./main-sidenav.component.scss'], styleUrls : ['./main-sidebar.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class MailNgrxMainSidenavComponent export class MailNgrxMainSidebarComponent
{ {
labels: any[]; labels: any[];
accounts: object; accounts: object;
@ -59,7 +59,7 @@ export class MailNgrxMainSidenavComponent
composeDialog(): void composeDialog(): void
{ {
this.dialogRef = this._matDialog.open(MailNgrxComposeDialogComponent, { this.dialogRef = this._matDialog.open(MailNgrxComposeDialogComponent, {
panelClass: 'mail-compose-dialog' panelClass: 'mail-ngrx-compose-dialog'
}); });
this.dialogRef.afterClosed() this.dialogRef.afterClosed()

4
src/app/main/apps/mail/mail-details/mail-details.component.html
View File

@ -1,9 +1,9 @@
<div *ngIf="!mail" fxLayout="column" fxLayoutAlign="center center" fxFlex> <div *ngIf="!mail" fxLayout="column" fxLayoutAlign="center center" fxFlex>
<mat-icon class="s-128 mb-16 select-message-icon hint-text" *fuseIfOnDom <mat-icon class="s-128 mb-16 select-message-icon hint-text"
[@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}"> [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">
email email
</mat-icon> </mat-icon>
<span class="select-message-text hint-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'400ms'}}"> <span class="select-message-text hint-text" [@animate]="{value:'*',params:{delay:'400ms'}}">
<span>{{ 'MAIL.SELECT_A_MESSAGE_TO_READ' | translate }}</span> <span>{{ 'MAIL.SELECT_A_MESSAGE_TO_READ' | translate }}</span>
</span> </span>
</div> </div>

2
src/app/main/apps/mail/mail-list/mail-list.component.html
View File

@ -2,7 +2,7 @@
<span class="no-messages-text hint-text">{{ 'MAIL.NO_MESSAGES' | translate }}</span> <span class="no-messages-text hint-text">{{ 'MAIL.NO_MESSAGES' | translate }}</span>
</div> </div>
<div class="mail-list" *fuseIfOnDom [@animateStagger]="{value:'50'}"> <div class="mail-list" [@animateStagger]="{value:'50'}">
<mail-list-item matRipple *ngFor="let mail of mails" [mail]="mail" (click)="readMail(mail.id)" <mail-list-item matRipple *ngFor="let mail of mails" [mail]="mail" (click)="readMail(mail.id)"
[ngClass]="{'current-mail mat-accent-50-bg':mail?.id == currentMail?.id}" [ngClass]="{'current-mail mat-accent-50-bg':mail?.id == currentMail?.id}"
[@animate]="{value:'*',params:{y:'100%'}}"> [@animate]="{value:'*',params:{y:'100%'}}">

186
src/app/main/apps/mail/mail.component.html
View File

@ -1,113 +1,107 @@
<div id="mail" class="page-layout carded left-sidenav" fusePerfectScrollbar> <div id="mail" class="page-layout carded left-sidebar inner-scroll">
<!-- TOP BACKGROUND --> <!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div> <div class="top-bg mat-accent-bg"></div>
<!-- / TOP BACKGROUND --> <!-- / TOP BACKGROUND -->
<mat-sidenav-container> <!-- SIDEBAR -->
<fuse-sidebar class="sidebar" name="mail-main-sidebar" position="left" lockedOpen="gt-md">
<mail-main-sidebar></mail-main-sidebar>
</fuse-sidebar>
<!-- / SIDEBAR -->
<!-- SIDENAV --> <!-- CENTER -->
<mat-sidenav class="sidenav" position="start" mode="side" opened="true" <div class="center">
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<mail-main-sidenav></mail-main-sidenav>
</mat-sidenav>
<!-- / SIDENAV -->
<!-- CENTER --> <!-- CONTENT HEADER -->
<div class="center"> <div class="header" fxLayout="row" fxLayoutAlign="start center">
<!-- CONTENT HEADER --> <div class="search-wrapper" fxFlex fxLayout="row" fxLayoutAlign="start center">
<div class="header" fxLayout="row" fxLayoutAlign="start center">
<div class="search-wrapper" fxFlex fxLayout="row" fxLayoutAlign="start center"> <button mat-icon-button class="sidebar-toggle" fxHide.gt-md
(click)="toggleSidebar('mail-main-sidebar')">
<mat-icon>menu</mat-icon>
</button>
<button mat-icon-button class="sidenav-toggle" <div class="search mat-white-bg" flex fxLayout="row" fxLayoutAlign="start center">
fuseMatSidenavToggler="carded-left-sidenav" <mat-icon>search</mat-icon>
fxHide.gt-md aria-label="Toggle Sidenav"> <input [formControl]="searchInput" [placeholder]="'MAIL.SEARCH_PLACEHOLDER' | translate" fxFlex>
<mat-icon>menu</mat-icon>
</button>
<div class="search mat-white-bg" flex fxLayout="row" fxLayoutAlign="start center">
<mat-icon>search</mat-icon>
<input [formControl]="searchInput" [placeholder]="'MAIL.SEARCH_PLACEHOLDER' | translate" fxFlex>
</div>
</div> </div>
</div> </div>
<!-- / CONTENT HEADER -->
<!-- CONTENT CARD -->
<div class="content-card mat-white-bg" [ngClass]="{'current-mail-selected':currentMail}">
<!-- CONTENT TOOLBAR -->
<div class="toolbar px-24 py-8">
<div class="mail-selection" fxFlex="row" fxLayoutAlign="start center">
<mat-checkbox (click)="toggleSelectAll()" [checked]="hasSelectedMails"
[indeterminate]="isIndeterminate"></mat-checkbox>
<button mat-icon-button [matMenuTriggerFor]="selectMenu">
<mat-icon>arrow_drop_down</mat-icon>
</button>
<mat-menu #selectMenu="matMenu">
<button mat-menu-item (click)="selectMails()">All</button>
<button mat-menu-item (click)="deselectMails()">None</button>
<button mat-menu-item (click)="selectMails('read', true)">Read</button>
<button mat-menu-item (click)="selectMails('read', false)">Unread</button>
<button mat-menu-item (click)="selectMails('starred', true)">Starred</button>
<button mat-menu-item (click)="selectMails('starred', false)">Unstarred</button>
<button mat-menu-item (click)="selectMails('important', true)">Important</button>
<button mat-menu-item (click)="selectMails('important', false)">Unimportant</button>
</mat-menu>
<div class="toolbar-separator" *ngIf="hasSelectedMails"></div>
<button mat-icon-button (click)="setFolderOnSelectedMails(4)" *ngIf="hasSelectedMails">
<mat-icon class="secondary-text">delete</mat-icon>
</button>
<button mat-icon-button [matMenuTriggerFor]="folderMenu" *ngIf="hasSelectedMails">
<mat-icon class="secondary-text">folder</mat-icon>
</button>
<mat-menu #folderMenu="matMenu">
<button mat-menu-item *ngFor="let folder of folders"
(click)="setFolderOnSelectedMails(folder.id)">{{folder.title}}
</button>
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="labelMenu" *ngIf="hasSelectedMails">
<mat-icon class="secondary-text">label</mat-icon>
</button>
<mat-menu #labelMenu="matMenu">
<button mat-menu-item *ngFor="let label of labels"
(click)="toggleLabelOnSelectedMails(label.id)">{{label.title}}
</button>
</mat-menu>
</div>
<div *ngIf="currentMail" fxHide.gt-xs>
<button mat-icon-button (click)="deselectCurrentMail()">
<mat-icon class="secondary-text">arrow_back</mat-icon>
</button>
</div>
</div>
<!-- / CONTENT TOOLBAR -->
<!-- CONTENT -->
<div class="content" fxLayout="row">
<mail-list fusePerfectScrollbar fxFlex></mail-list>
<mail-details fusePerfectScrollbar fxFlex></mail-details>
</div>
<!-- / CONTENT -->
</div>
<!-- / CONTENT CARD -->
</div> </div>
<!-- / CENTER --> <!-- / CONTENT HEADER -->
</mat-sidenav-container> <!-- CONTENT CARD -->
<div class="content-card mat-white-bg" [ngClass]="{'current-mail-selected':currentMail}">
<!-- CONTENT TOOLBAR -->
<div class="toolbar px-24 py-8">
<div class="mail-selection" fxFlex="row" fxLayoutAlign="start center">
<mat-checkbox (click)="toggleSelectAll()" [checked]="hasSelectedMails"
[indeterminate]="isIndeterminate"></mat-checkbox>
<button mat-icon-button [matMenuTriggerFor]="selectMenu">
<mat-icon>arrow_drop_down</mat-icon>
</button>
<mat-menu #selectMenu="matMenu">
<button mat-menu-item (click)="selectMails()">All</button>
<button mat-menu-item (click)="deselectMails()">None</button>
<button mat-menu-item (click)="selectMails('read', true)">Read</button>
<button mat-menu-item (click)="selectMails('read', false)">Unread</button>
<button mat-menu-item (click)="selectMails('starred', true)">Starred</button>
<button mat-menu-item (click)="selectMails('starred', false)">Unstarred</button>
<button mat-menu-item (click)="selectMails('important', true)">Important</button>
<button mat-menu-item (click)="selectMails('important', false)">Unimportant</button>
</mat-menu>
<div class="toolbar-separator" *ngIf="hasSelectedMails"></div>
<button mat-icon-button (click)="setFolderOnSelectedMails(4)" *ngIf="hasSelectedMails">
<mat-icon class="secondary-text">delete</mat-icon>
</button>
<button mat-icon-button [matMenuTriggerFor]="folderMenu" *ngIf="hasSelectedMails">
<mat-icon class="secondary-text">folder</mat-icon>
</button>
<mat-menu #folderMenu="matMenu">
<button mat-menu-item *ngFor="let folder of folders"
(click)="setFolderOnSelectedMails(folder.id)">{{folder.title}}
</button>
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="labelMenu" *ngIf="hasSelectedMails">
<mat-icon class="secondary-text">label</mat-icon>
</button>
<mat-menu #labelMenu="matMenu">
<button mat-menu-item *ngFor="let label of labels"
(click)="toggleLabelOnSelectedMails(label.id)">{{label.title}}
</button>
</mat-menu>
</div>
<div *ngIf="currentMail" fxHide.gt-xs>
<button mat-icon-button (click)="deselectCurrentMail()">
<mat-icon class="secondary-text">arrow_back</mat-icon>
</button>
</div>
</div>
<!-- / CONTENT TOOLBAR -->
<!-- CONTENT -->
<div class="content" fxLayout="row">
<mail-list fusePerfectScrollbar fxFlex></mail-list>
<mail-details fusePerfectScrollbar fxFlex></mail-details>
</div>
<!-- / CONTENT -->
</div>
<!-- / CONTENT CARD -->
</div>
<!-- / CENTER -->
</div> </div>

2
src/app/main/apps/mail/mail.component.scss
View File

@ -10,7 +10,7 @@
.search-wrapper { .search-wrapper {
@include mat-elevation(7); @include mat-elevation(7);
.sidenav-toggle { .sidebar-toggle {
margin: 0; margin: 0;
width: 56px; width: 56px;
height: 56px; height: 56px;

15
src/app/main/apps/mail/mail.component.ts
View File

@ -4,13 +4,14 @@ import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators'; import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service'; import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
import { FuseConfigService } from '@fuse/services/config.service';
import { Mail } from 'app/main/apps/mail/mail.model'; import { Mail } from 'app/main/apps/mail/mail.model';
import { MailService } from 'app/main/apps/mail/mail.service'; import { MailService } from 'app/main/apps/mail/mail.service';
import { locale as english } from 'app/main/apps/mail//i18n/en'; import { locale as english } from 'app/main/apps/mail//i18n/en';
import { locale as turkish } from 'app/main/apps/mail//i18n/tr'; import { locale as turkish } from 'app/main/apps/mail//i18n/tr';
import { FuseConfigService } from '@fuse/services/config.service';
@Component({ @Component({
selector : 'mail', selector : 'mail',
@ -35,11 +36,13 @@ export class MailComponent implements OnInit, OnDestroy
* *
* @param {MailService} _mailService * @param {MailService} _mailService
* @param {FuseConfigService} _fuseConfigService * @param {FuseConfigService} _fuseConfigService
* @param {FuseSidebarService} _fuseSidebarService
* @param {FuseTranslationLoaderService} _fuseTranslationLoaderService * @param {FuseTranslationLoaderService} _fuseTranslationLoaderService
*/ */
constructor( constructor(
private _mailService: MailService, private _mailService: MailService,
private _fuseConfigService: FuseConfigService, private _fuseConfigService: FuseConfigService,
private _fuseSidebarService: FuseSidebarService,
private _fuseTranslationLoaderService: FuseTranslationLoaderService private _fuseTranslationLoaderService: FuseTranslationLoaderService
) )
{ {
@ -185,4 +188,14 @@ export class MailComponent implements OnInit, OnDestroy
{ {
this._mailService.setFolderOnSelectedMails(folderId); this._mailService.setFolderOnSelectedMails(folderId);
} }
/**
* Toggle the sidebar
*
* @param name
*/
toggleSidebar(name): void
{
this._fuseSidebarService.getSidebar(name).toggleOpen();
}
} }

11
src/app/main/apps/mail/mail.module.ts
View File

@ -1,16 +1,17 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
import { MatButtonModule, MatCheckboxModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatRippleModule, MatSelectModule, MatSidenavModule, MatToolbarModule } from '@angular/material'; import { MatButtonModule, MatCheckboxModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatRippleModule, MatSelectModule, MatToolbarModule } from '@angular/material';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { FuseSharedModule } from '@fuse/shared.module'; import { FuseSharedModule } from '@fuse/shared.module';
import { FuseSidebarModule } from '@fuse/components';
import { MailService } from 'app/main/apps/mail/mail.service'; import { MailService } from 'app/main/apps/mail/mail.service';
import { MailComponent } from 'app/main/apps/mail/mail.component'; import { MailComponent } from 'app/main/apps/mail/mail.component';
import { MailListComponent } from 'app/main/apps/mail/mail-list/mail-list.component'; import { MailListComponent } from 'app/main/apps/mail/mail-list/mail-list.component';
import { MailListItemComponent } from 'app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component'; import { MailListItemComponent } from 'app/main/apps/mail/mail-list/mail-list-item/mail-list-item.component';
import { MailDetailsComponent } from 'app/main/apps/mail/mail-details/mail-details.component'; import { MailDetailsComponent } from 'app/main/apps/mail/mail-details/mail-details.component';
import { MailMainSidenavComponent } from 'app/main/apps/mail/sidenavs/main/main-sidenav.component'; import { MailMainSidebarComponent } from 'app/main/apps/mail/sidebars/main/main-sidebar.component';
import { MailComposeDialogComponent } from 'app/main/apps/mail/dialogs/compose/compose.component'; import { MailComposeDialogComponent } from 'app/main/apps/mail/dialogs/compose/compose.component';
const routes: Routes = [ const routes: Routes = [
@ -68,7 +69,7 @@ const routes: Routes = [
MailListComponent, MailListComponent,
MailListItemComponent, MailListItemComponent,
MailDetailsComponent, MailDetailsComponent,
MailMainSidenavComponent, MailMainSidebarComponent,
MailComposeDialogComponent MailComposeDialogComponent
], ],
imports : [ imports : [
@ -83,12 +84,12 @@ const routes: Routes = [
MatMenuModule, MatMenuModule,
MatRippleModule, MatRippleModule,
MatSelectModule, MatSelectModule,
MatSidenavModule,
MatToolbarModule, MatToolbarModule,
TranslateModule, TranslateModule,
FuseSharedModule FuseSharedModule,
FuseSidebarModule
], ],
providers : [ providers : [
MailService MailService

16
src/app/main/apps/mail/sidenavs/main/main-sidenav.component.html → src/app/main/apps/mail/sidebars/main/main-sidebar.component.html
View File

@ -1,14 +1,14 @@
<!-- SIDENAV HEADER --> <!-- SIDEBAR HEADER -->
<div fxLayout="column" fxLayoutAlign="space-between start" <div fxLayout="column" fxLayoutAlign="space-between start"
class="header mat-accent-bg p-24 pb-4"> class="header mat-accent-bg p-24 pb-4">
<div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center"> <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">mail <mat-icon class="logo-icon s-32" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">mail
</mat-icon> </mat-icon>
<span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Mailbox</span> <span class="logo-text" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Mailbox</span>
</div> </div>
<div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}"> <div class="account" fxLayout="column" [@animate]="{value:'*',params:{delay:'300ms'}}">
<div class="title">John Doe</div> <div class="title">John Doe</div>
<mat-form-field floatLabel="never"> <mat-form-field floatLabel="never">
<mat-select class="account-selection" placeholder="Mail Selection" <mat-select class="account-selection" placeholder="Mail Selection"
@ -21,10 +21,10 @@
</div> </div>
</div> </div>
<!-- / SIDENAV HEADER --> <!-- / SIDEBAR HEADER -->
<!-- SIDENAV CONTENT --> <!-- SIDEBAR CONTENT -->
<div class="content" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{y:'50px'}}"> <div class="content" fusePerfectScrollbar [@animate]="{value:'*',params:{y:'50px'}}">
<div class="p-24"> <div class="p-24">
<button mat-raised-button <button mat-raised-button
@ -70,4 +70,4 @@
</div> </div>
</div> </div>
<!-- / SIDENAV CONTENT --> <!-- / SIDEBAR CONTENT -->

0
src/app/main/apps/mail/sidenavs/main/main-sidenav.component.scss → src/app/main/apps/mail/sidebars/main/main-sidebar.component.scss
View File

12
src/app/main/apps/mail/sidenavs/main/main-sidenav.component.ts → src/app/main/apps/mail/sidebars/main/main-sidebar.component.ts
View File

@ -1,21 +1,21 @@
import { Component, OnDestroy, OnInit } from '@angular/core'; import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms'; import { FormGroup } from '@angular/forms';
import { MatDialog } from '@angular/material'; import { MatDialog } from '@angular/material';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { fuseAnimations } from '@fuse/animations'; import { fuseAnimations } from '@fuse/animations';
import { MailService } from 'app/main/apps/mail/mail.service'; import { MailService } from 'app/main/apps/mail/mail.service';
import { MailComposeDialogComponent } from 'app/main/apps/mail/dialogs/compose/compose.component'; import { MailComposeDialogComponent } from 'app/main/apps/mail/dialogs/compose/compose.component';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@Component({ @Component({
selector : 'mail-main-sidenav', selector : 'mail-main-sidebar',
templateUrl: './main-sidenav.component.html', templateUrl: './main-sidebar.component.html',
styleUrls : ['./main-sidenav.component.scss'], styleUrls : ['./main-sidebar.component.scss'],
animations : fuseAnimations animations : fuseAnimations
}) })
export class MailMainSidenavComponent implements OnInit, OnDestroy export class MailMainSidebarComponent implements OnInit, OnDestroy
{ {
folders: any[]; folders: any[];
filters: any[]; filters: any[];

16
src/app/main/apps/todo/sidenavs/main/main-sidenav.component.html → src/app/main/apps/todo/sidebars/main/main-sidebar.component.html
View File

@ -1,14 +1,14 @@
<!-- SIDENAV HEADER --> <!-- SIDEBAR HEADER -->
<div fxLayout="column" fxLayoutAlign="space-between start" <div fxLayout="column" fxLayoutAlign="space-between start"
class="header mat-accent-bg p-24 pb-4"> class="header mat-accent-bg p-24 pb-4">
<div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center"> <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}"> <mat-icon class="logo-icon s-32" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
check_box check_box
</mat-icon> </mat-icon>
<span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">To-Do</span> <span class="logo-text" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">To-Do</span>
</div> </div>
<div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}"> <div class="account" fxLayout="column" [@animate]="{value:'*',params:{delay:'300ms'}}">
<div class="title">John Doe</div> <div class="title">John Doe</div>
<mat-form-field floatLabel="never"> <mat-form-field floatLabel="never">
<mat-select class="account-selection" placeholder="Todo Selection" <mat-select class="account-selection" placeholder="Todo Selection"
@ -21,10 +21,10 @@
</div> </div>
</div> </div>
<!-- / SIDENAV HEADER --> <!-- / SIDEBAR HEADER -->
<!-- SIDENAV CONTENT --> <!-- SIDEBAR CONTENT -->
<div class="content" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{y:'50px'}}"> <div class="content" fusePerfectScrollbar [@animate]="{value:'*',params:{y:'50px'}}">
<div class="p-24"> <div class="p-24">
<button mat-raised-button <button mat-raised-button
@ -68,4 +68,4 @@
</div> </div>
</div> </div>
<!-- / SIDENAV CONTENT --> <!-- / SIDEBAR CONTENT -->

1
src/app/main/apps/todo/sidenavs/main/main-sidenav.component.scss → src/app/main/apps/todo/sidebars/main/main-sidebar.component.scss
View File

@ -20,6 +20,7 @@
.account { .account {
width: 100%; width: 100%;
.account-selection { .account-selection {
} }
} }

8
src/app/main/apps/todo/sidenavs/main/main-sidenav.component.ts → src/app/main/apps/todo/sidebars/main/main-sidebar.component.ts
View File

@ -8,12 +8,12 @@ import { fuseAnimations } from '@fuse/animations';
import { TodoService } from 'app/main/apps/todo/todo.service'; import { TodoService } from 'app/main/apps/todo/todo.service';
@Component({ @Component({
selector : 'todo-main-sidenav', selector : 'todo-main-sidebar',
templateUrl: './main-sidenav.component.html', templateUrl: './main-sidebar.component.html',
styleUrls : ['./main-sidenav.component.scss'], styleUrls : ['./main-sidebar.component.scss'],
animations : fuseAnimations animations : fuseAnimations
}) })
export class TodoMainSidenavComponent implements OnInit, OnDestroy export class TodoMainSidebarComponent implements OnInit, OnDestroy
{ {
folders: any[]; folders: any[];
filters: any[]; filters: any[];

4
src/app/main/apps/todo/todo-details/todo-details.component.html
View File

@ -1,8 +1,8 @@
<div *ngIf="!todo" fxLayout="column" fxLayoutAlign="center center" fxFlex> <div *ngIf="!todo" fxLayout="column" fxLayoutAlign="center center" fxFlex>
<mat-icon class="s-120 mb-12 select-todo-icon hint-text" *fuseIfOnDom <mat-icon class="s-120 mb-12 select-todo-icon hint-text"
[@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">check_box [@animate]="{value:'*',params:{delay:'300ms',scale:'0.2'}}">check_box
</mat-icon> </mat-icon>
<span class="hint-text mat-h1 select-todo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'400ms'}}"> <span class="hint-text mat-h1 select-todo-text" [@animate]="{value:'*',params:{delay:'400ms'}}">
Select a todo Select a todo
</span> </span>
</div> </div>

2
src/app/main/apps/todo/todo-list/todo-list.component.html
View File

@ -1,7 +1,7 @@
<div *ngIf="todos.length === 0" fxLayout="column" fxLayoutAlign="center center" fxFlexFill> <div *ngIf="todos.length === 0" fxLayout="column" fxLayoutAlign="center center" fxFlexFill>
<span class="no-todos-text hint-text">There are no todos!</span> <span class="no-todos-text hint-text">There are no todos!</span>
</div> </div>
<div class="todo-list" ngxDroppable [model]="todos" (out)="onDrop($event)" *fuseIfOnDom [@animateStagger]="{value:'50'}"> <div class="todo-list" ngxDroppable [model]="todos" (out)="onDrop($event)" [@animateStagger]="{value:'50'}">
<todo-list-item class="todo-list-item has-handle" <todo-list-item class="todo-list-item has-handle"
*ngFor="let todo of todos" [todo]="todo" *ngFor="let todo of todos" [todo]="todo"
ngxDraggable ngxDraggable

161
src/app/main/apps/todo/todo.component.html
View File

@ -1,102 +1,93 @@
<div id="todo" class="page-layout carded left-sidenav" fusePerfectScrollbar> <div id="todo" class="page-layout carded left-sidebar inner-scroll">
<!-- TOP BACKGROUND --> <!-- TOP BACKGROUND -->
<div class="top-bg mat-accent-bg"></div> <div class="top-bg mat-accent-bg"></div>
<!-- / TOP BACKGROUND --> <!-- / TOP BACKGROUND -->
<mat-sidenav-container> <!-- SIDEBAR -->
<fuse-sidebar class="sidebar" name="todo-main-sidebar" position="left" lockedOpen="gt-md">
<todo-main-sidebar></todo-main-sidebar>
</fuse-sidebar>
<!-- / SIDEBAR -->
<!-- SIDENAV --> <!-- CENTER -->
<mat-sidenav class="sidenav" position="start" opened="true" mode="side" <div class="center">
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<todo-main-sidenav></todo-main-sidenav>
</mat-sidenav>
<!-- / SIDENAV -->
<!-- CENTER --> <!-- CONTENT HEADER -->
<div class="center"> <div class="header" fxLayout="row" fxLayoutAlign="start center">
<!-- CONTENT HEADER --> <div class="search-wrapper mat-white-bg" fxFlex fxLayout="row" fxLayoutAlign="start center">
<div class="header" fxLayout="row" fxLayoutAlign="start center">
<div class="search-wrapper mat-white-bg" fxFlex fxLayout="row" fxLayoutAlign="start center"> <button mat-icon-button class="sidebar-toggle" fxHide.gt-md
(click)="toggleSidebar('todo-main-sidebar')">
<mat-icon>menu</mat-icon>
</button>
<button mat-icon-button class="sidenav-toggle" <div class="search" flex fxLayout="row" fxLayoutAlign="start center">
fuseMatSidenavToggler="carded-left-sidenav" <mat-icon>search</mat-icon>
fxHide.gt-md aria-label="Toggle Sidenav"> <input [formControl]="searchInput" placeholder="Search for a task" fxFlex>
<mat-icon>menu</mat-icon>
</button>
<div class="search" flex fxLayout="row" fxLayoutAlign="start center">
<mat-icon>search</mat-icon>
<input [formControl]="searchInput" placeholder="Search for a task" fxFlex>
</div>
</div> </div>
</div> </div>
<!-- / CONTENT HEADER -->
<!-- CONTENT CARD -->
<div class="content-card mat-white-bg" [ngClass]="{'current-todo-selected':currentTodo}">
<!-- CONTENT TOOLBAR -->
<div class="toolbar px-24 py-8">
<div class="todo-selection" fxFlex="row" fxLayoutAlign="start center">
<mat-checkbox (click)="toggleSelectAll()" [checked]="hasSelectedTodos"
[indeterminate]="isIndeterminate"></mat-checkbox>
<button mat-icon-button [matMenuTriggerFor]="selectMenu">
<mat-icon>arrow_drop_down</mat-icon>
</button>
<mat-menu #selectMenu="matMenu">
<button mat-menu-item (click)="selectTodos()">All</button>
<button mat-menu-item (click)="deselectTodos()">None</button>
<button mat-menu-item (click)="selectTodos('read', true)">Read</button>
<button mat-menu-item (click)="selectTodos('read', false)">Unread</button>
<button mat-menu-item (click)="selectTodos('starred', true)">Starred</button>
<button mat-menu-item (click)="selectTodos('starred', false)">Unstarred</button>
<button mat-menu-item (click)="selectTodos('important', true)">Important</button>
<button mat-menu-item (click)="selectTodos('important', false)">Unimportant</button>
</mat-menu>
<div class="toolbar-separator" *ngIf="hasSelectedTodos"></div>
<button mat-icon-button [matMenuTriggerFor]="labelMenu" *ngIf="hasSelectedTodos">
<mat-icon class="secondary-text">label</mat-icon>
</button>
<mat-menu #labelMenu="matMenu">
<button mat-menu-item *ngFor="let tag of tags" (click)="toggleTagOnSelectedTodos(tag.id)">
{{tag.title}}
</button>
</mat-menu>
</div>
<div *ngIf="currentTodo" fxHide.gt-lg>
<button mat-icon-button (click)="deselectCurrentTodo()">
<mat-icon class="secondary-text">arrow_back</mat-icon>
</button>
</div>
</div>
<!-- / CONTENT TOOLBAR -->
<!-- CONTENT -->
<div class="content" fxFlexAlign="row">
<todo-list fusePerfectScrollbar fxFlex></todo-list>
<todo-details fusePerfectScrollbar fxFlex></todo-details>
</div>
<!-- / CONTENT -->
</div>
<!-- / CONTENT CARD -->
</div> </div>
<!-- / CENTER --> <!-- / CONTENT HEADER -->
</mat-sidenav-container> <!-- CONTENT CARD -->
<div class="content-card mat-white-bg" [ngClass]="{'current-todo-selected':currentTodo}">
<!-- CONTENT TOOLBAR -->
<div class="toolbar px-24 py-8">
<div class="todo-selection" fxFlex="row" fxLayoutAlign="start center">
<mat-checkbox (click)="toggleSelectAll()" [checked]="hasSelectedTodos"
[indeterminate]="isIndeterminate"></mat-checkbox>
<button mat-icon-button [matMenuTriggerFor]="selectMenu">
<mat-icon>arrow_drop_down</mat-icon>
</button>
<mat-menu #selectMenu="matMenu">
<button mat-menu-item (click)="selectTodos()">All</button>
<button mat-menu-item (click)="deselectTodos()">None</button>
<button mat-menu-item (click)="selectTodos('read', true)">Read</button>
<button mat-menu-item (click)="selectTodos('read', false)">Unread</button>
<button mat-menu-item (click)="selectTodos('starred', true)">Starred</button>
<button mat-menu-item (click)="selectTodos('starred', false)">Unstarred</button>
<button mat-menu-item (click)="selectTodos('important', true)">Important</button>
<button mat-menu-item (click)="selectTodos('important', false)">Unimportant</button>
</mat-menu>
<div class="toolbar-separator" *ngIf="hasSelectedTodos"></div>
<button mat-icon-button [matMenuTriggerFor]="labelMenu" *ngIf="hasSelectedTodos">
<mat-icon class="secondary-text">label</mat-icon>
</button>
<mat-menu #labelMenu="matMenu">
<button mat-menu-item *ngFor="let tag of tags" (click)="toggleTagOnSelectedTodos(tag.id)">
{{tag.title}}
</button>
</mat-menu>
</div>
<div *ngIf="currentTodo" fxHide.gt-lg>
<button mat-icon-button (click)="deselectCurrentTodo()">
<mat-icon class="secondary-text">arrow_back</mat-icon>
</button>
</div>
</div>
<!-- / CONTENT TOOLBAR -->
<!-- CONTENT -->
<div class="content" fxFlexAlign="row">
<todo-list fusePerfectScrollbar fxFlex></todo-list>
<todo-details fusePerfectScrollbar fxFlex></todo-details>
</div>
<!-- / CONTENT -->
</div>
<!-- / CONTENT CARD -->
</div>
<!-- / CENTER -->
</div> </div>

2
src/app/main/apps/todo/todo.component.scss
View File

@ -10,7 +10,7 @@
.search-wrapper { .search-wrapper {
@include mat-elevation(7); @include mat-elevation(7);
.sidenav-toggle { .sidebar-toggle {
margin: 0; margin: 0;
width: 56px; width: 56px;
height: 56px; height: 56px;

13
src/app/main/apps/todo/todo.component.ts
View File

@ -4,6 +4,7 @@ import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators'; import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
import { fuseAnimations } from '@fuse/animations'; import { fuseAnimations } from '@fuse/animations';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
import { Todo } from 'app/main/apps/todo/todo.model'; import { Todo } from 'app/main/apps/todo/todo.model';
import { TodoService } from 'app/main/apps/todo/todo.service'; import { TodoService } from 'app/main/apps/todo/todo.service';
@ -29,9 +30,11 @@ export class TodoComponent implements OnInit, OnDestroy
/** /**
* Constructor * Constructor
* *
* @param {FuseSidebarService} _fuseSidebarService
* @param {TodoService} _todoService * @param {TodoService} _todoService
*/ */
constructor( constructor(
private _fuseSidebarService: FuseSidebarService,
private _todoService: TodoService private _todoService: TodoService
) )
{ {
@ -155,4 +158,14 @@ export class TodoComponent implements OnInit, OnDestroy
{ {
this._todoService.toggleTagOnSelectedTodos(tagId); this._todoService.toggleTagOnSelectedTodos(tagId);
} }
/**
* Toggle the sidebar
*
* @param name
*/
toggleSidebar(name): void
{
this._fuseSidebarService.getSidebar(name).toggleOpen();
}
} }

11
src/app/main/apps/todo/todo.module.ts
View File

@ -1,13 +1,14 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
import { MatButtonModule, MatCheckboxModule, MatDatepickerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatRippleModule, MatSelectModule, MatSidenavModule } from '@angular/material'; import { MatButtonModule, MatCheckboxModule, MatDatepickerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatRippleModule, MatSelectModule } from '@angular/material';
import { NgxDnDModule } from '@swimlane/ngx-dnd'; import { NgxDnDModule } from '@swimlane/ngx-dnd';
import { FuseSharedModule } from '@fuse/shared.module'; import { FuseSharedModule } from '@fuse/shared.module';
import { FuseSidebarModule } from '@fuse/components';
import { TodoService } from 'app/main/apps/todo/todo.service'; import { TodoService } from 'app/main/apps/todo/todo.service';
import { TodoComponent } from 'app/main/apps/todo/todo.component'; import { TodoComponent } from 'app/main/apps/todo/todo.component';
import { TodoMainSidenavComponent } from 'app/main/apps/todo/sidenavs/main/main-sidenav.component'; import { TodoMainSidebarComponent } from 'app/main/apps/todo/sidebars/main/main-sidebar.component';
import { TodoListItemComponent } from 'app/main/apps/todo/todo-list/todo-list-item/todo-list-item.component'; import { TodoListItemComponent } from 'app/main/apps/todo/todo-list/todo-list-item/todo-list-item.component';
import { TodoListComponent } from 'app/main/apps/todo/todo-list/todo-list.component'; import { TodoListComponent } from 'app/main/apps/todo/todo-list/todo-list.component';
import { TodoDetailsComponent } from 'app/main/apps/todo/todo-details/todo-details.component'; import { TodoDetailsComponent } from 'app/main/apps/todo/todo-details/todo-details.component';
@ -64,7 +65,7 @@ const routes: Routes = [
@NgModule({ @NgModule({
declarations: [ declarations: [
TodoComponent, TodoComponent,
TodoMainSidenavComponent, TodoMainSidebarComponent,
TodoListItemComponent, TodoListItemComponent,
TodoListComponent, TodoListComponent,
TodoDetailsComponent TodoDetailsComponent
@ -81,11 +82,11 @@ const routes: Routes = [
MatMenuModule, MatMenuModule,
MatRippleModule, MatRippleModule,
MatSelectModule, MatSelectModule,
MatSidenavModule,
NgxDnDModule, NgxDnDModule,
FuseSharedModule FuseSharedModule,
FuseSidebarModule
], ],
providers : [ providers : [
TodoService TodoService

2
src/app/main/ui/page-layouts/simple/left-sidebar-3/left-sidebar-3.component.html
View File

@ -15,6 +15,7 @@
</div> </div>
<!-- / HEADER --> <!-- / HEADER -->
<!-- CONTENT -->
<div class="content"> <div class="content">
<!-- SIDEBAR --> <!-- SIDEBAR -->
@ -42,5 +43,6 @@
<!-- / CENTER --> <!-- / CENTER -->
</div> </div>
<!-- / CONTENT -->
</div> </div>

2
src/app/main/ui/page-layouts/simple/left-sidebar-4/left-sidebar-4.component.html
View File

@ -15,6 +15,7 @@
</div> </div>
<!-- / HEADER --> <!-- / HEADER -->
<!-- CONTENT -->
<div class="content"> <div class="content">
<!-- SIDEBAR --> <!-- SIDEBAR -->
@ -42,5 +43,6 @@
<!-- / CENTER --> <!-- / CENTER -->
</div> </div>
<!-- / CONTENT -->
</div> </div>

2
src/app/main/ui/page-layouts/simple/right-sidebar-3/right-sidebar-3.component.html
View File

@ -15,6 +15,7 @@
</div> </div>
<!-- / HEADER --> <!-- / HEADER -->
<!-- CONTENT -->
<div class="content"> <div class="content">
<!-- SIDEBAR --> <!-- SIDEBAR -->
@ -42,5 +43,6 @@
<!-- / CENTER --> <!-- / CENTER -->
</div> </div>
<!-- / CONTENT -->
</div> </div>

2
src/app/main/ui/page-layouts/simple/right-sidebar-4/right-sidebar-4.component.html
View File

@ -15,6 +15,7 @@
</div> </div>
<!-- / HEADER --> <!-- / HEADER -->
<!-- CONTENT -->
<div class="content"> <div class="content">
<!-- SIDEBAR --> <!-- SIDEBAR -->
@ -42,5 +43,6 @@
<!-- / CENTER --> <!-- / CENTER -->
</div> </div>
<!-- / CONTENT -->
</div> </div>