purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-10-31 09:53:39 +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 { 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';
@ -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 { AcademyCoursesService } from 'app/main/apps/academy/courses.service';
import { AcademyCourseService } from 'app/main/apps/academy/course.service';
import { FuseSidebarModule } from '@fuse/components';
const routes = [
@ -45,9 +46,9 @@ const routes = [
MatIconModule,
MatInputModule,
MatSelectModule,
MatSidenavModule,
FuseSharedModule
FuseSharedModule,
FuseSidebarModule
],
providers : [
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 -->
<mat-sidenav class="sidenav" position="start" opened="true" mode="side"
fuseMatSidenavHelper="academy-left-sidenav" mat-is-locked-open="gt-md">
<!-- SIDEBAR CONTENT -->
<div class="content" fusePerfectScrollbar>
<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"
(click)="gotoStep(i)"
[ngClass]="{'current': currentStep === i, 'completed': currentStep > i, 'last': last, 'first': first}">
<div class="index">
<span>{{i + 1}}</span>
</div>
<div class="title">{{step.title}}</div>
<div class="step"
*ngFor="let step of course.steps; let i = index; let last = last; let first = first"
(click)="gotoStep(i)"
[ngClass]="{'current': currentStep === i, 'completed': currentStep > i, 'last': last, 'first': first}">
<div class="index">
<span>{{i + 1}}</span>
</div>
<div class="title">{{step.title}}</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>
<!-- / 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>

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

@ -2,19 +2,7 @@
#academy-course {
.mat-drawer-container {
flex: 1 !important;
> .mat-drawer-content {
flex: 1 !important;
@include media-breakpoint-up('lg') {
z-index: 52;
}
}
}
.sidenav {
.sidebar {
.steps {
padding: 16px 0;
@ -140,6 +128,7 @@
.center {
position: relative;
overflow: hidden;
.header {
height: 72px;
@ -148,10 +137,8 @@
}
.content {
display: flex;
position: relative;
overflow: hidden;
height: 100%;
display: flex;
background: mat-color($mat-grey, 200);
.course-step {
@ -163,6 +150,10 @@
padding: 48px;
overflow: auto;
&.ng-animating {
overflow: hidden;
}
@media (max-width: 720px) {
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 { 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 { AcademyCourseService } from 'app/main/apps/academy/course.service';
@ -32,10 +33,12 @@ export class AcademyCourseComponent implements OnInit, OnDestroy, AfterViewInit
*
* @param {AcademyCourseService} _academyCourseService
* @param {ChangeDetectorRef} _changeDetectorRef
* @param {FuseSidebarService} _fuseSidebarService
*/
constructor(
private _academyCourseService: AcademyCourseService,
private _changeDetectorRef: ChangeDetectorRef
private _changeDetectorRef: ChangeDetectorRef,
private _fuseSidebarService: FuseSidebarService
)
{
// Set the defaults
@ -146,4 +149,14 @@ export class AcademyCourseComponent implements OnInit, OnDestroy, AfterViewInit
// Decrease the current step
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 -->
<div class="header mat-accent-bg p-16 p-sm-24" fxLayout="column" fxLayoutAlign="center center">
<div class="hero-text">
<mat-icon class="hero-icon">school</mat-icon>
<h1>WELCOME TO ACADEMY</h1>
<h3>
<h1 [@animate]="{value:'*',params:{delay:'100ms', y:'25px'}}">
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
to an existing application.
</h3>
@ -46,8 +48,7 @@
</div>
<div class="courses" fxLayout="row wrap" fxLayoutAlign="center" [@animateStagger]="{value:'50'}"
*fuseIfOnDom>
<div class="courses" fxLayout="row wrap" fxLayoutAlign="center" [@animateStagger]="{value:'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%'}}">

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 -->
<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="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>
<span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Calendar</span>
<mat-icon class="logo-icon" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
today
</mat-icon>
<span class="logo-text" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">
Calendar
</span>
</div>
<!-- TOOLBAR -->
@ -44,7 +48,7 @@
<!-- HEADER BOTTOM -->
<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"
mwlCalendarPreviousView
@ -73,7 +77,7 @@
<!-- ADD EVENT BUTTON -->
<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>
</button>
<!-- / ADD EVENT BUTTON -->
@ -81,7 +85,7 @@
<!-- / HEADER -->
<!-- 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">
<mwl-calendar-month-view
*ngSwitchCase="'month'"

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

@ -192,8 +192,6 @@
#calendar {
background: #FFFFFF;
overflow-x: hidden;
overflow-y: auto;
.header {
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 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>
</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!..
</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!..
</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 -->
<div class="header mat-accent-bg p-16 p-sm-24" fxLayout="column" fxLayoutAlign="start start"
@ -7,15 +7,18 @@
<!-- APP TITLE -->
<div fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button class="sidenav-toggle mr-12"
fuseMatSidenavToggler="contacts-main-sidenav"
fxHide.gt-md>
<button mat-icon-button class="sidebar-toggle mr-12" fxHide.gt-md
(click)="toggleSidebar('contacts-main-sidebar')">
<mat-icon>menu</mat-icon>
</button>
<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>
<span class="logo-text h1" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Contacts</span>
<mat-icon class="logo-icon mr-16"
[@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>
@ -39,38 +42,41 @@
<selected-bar class="mat-accent-600-bg" *ngIf="hasSelectedContacts" [@slideInTop]></selected-bar>
<!-- / SELECTED BAR -->
<mat-sidenav-container>
<!-- CONTENT -->
<div class="content">
<!-- SIDENAV -->
<mat-sidenav class="sidenav" position="start" opened="true" mode="side"
fuseMatSidenavHelper="contacts-main-sidenav" mat-is-locked-open="gt-sm">
<!-- SIDEBAR -->
<fuse-sidebar class="sidebar" name="contacts-main-sidebar" position="left" lockedOpen="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>
<!-- / SIDENAV -->
</fuse-sidebar>
<!-- / SIDEBAR -->
<!-- CENTER -->
<div class="center p-24 pb-56 pr-sm-92" fusePerfectScrollbar>
<!-- CONTENT -->
<div class="content mat-white-bg mat-elevation-z4">
<contacts-contact-list></contacts-contact-list>
</div>
<!-- / CONTENT -->
</div>
<!-- / CENTER -->
</mat-sidenav-container>
</div>
<!-- / CONTENT-->
</div>
<!-- ADD CONTACT BUTTON -->
<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>
</button>
<!-- / ADD CONTACT BUTTON -->

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

@ -2,5 +2,12 @@
.content {
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 { fuseAnimations } from '@fuse/animations';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
import { ContactsService } from 'app/main/apps/contacts/contacts.service';
import { ContactsContactFormDialogComponent } from 'app/main/apps/contacts/contact-form/contact-form.component';
@ -29,10 +30,12 @@ export class ContactsComponent implements OnInit, OnDestroy
* Constructor
*
* @param {ContactsService} _contactsService
* @param {FuseSidebarService} _fuseSidebarService
* @param {MatDialog} _matDialog
*/
constructor(
private _contactsService: ContactsService,
private _fuseSidebarService: FuseSidebarService,
private _matDialog: MatDialog
)
{
@ -105,4 +108,14 @@ export class ContactsComponent implements OnInit, OnDestroy
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 { 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 { FuseConfirmDialogModule } from '@fuse/components';
import { FuseConfirmDialogModule, FuseSidebarModule } from '@fuse/components';
import { ContactsComponent } from 'app/main/apps/contacts/contacts.component';
import { ContactsService } from 'app/main/apps/contacts/contacts.service';
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 { 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';
const routes: Routes = [
@ -29,7 +29,7 @@ const routes: Routes = [
ContactsComponent,
ContactsContactListComponent,
ContactsSelectedBarComponent,
ContactsMainSidenavComponent,
ContactsMainSidebarComponent,
ContactsContactFormDialogComponent
],
imports : [
@ -44,12 +44,12 @@ const routes: Routes = [
MatInputModule,
MatMenuModule,
MatRippleModule,
MatSidenavModule,
MatTableModule,
MatToolbarModule,
FuseSharedModule,
FuseConfirmDialogModule
FuseConfirmDialogModule,
FuseSidebarModule
],
providers : [
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">
<!-- SIDENAV HEADER -->
<!-- SIDEBAR HEADER -->
<div class="header p-24" fxLayout="row" fxLayoutAlign="start center">
<!-- USER -->
@ -10,9 +11,9 @@
<!-- / USER -->
</div>
<!-- / SIDENAV HEADER -->
<!-- / SIDEBAR HEADER -->
<!-- SIDENAV CONTENT -->
<!-- SIDEBAR CONTENT -->
<div class="content py-16" fusePerfectScrollbar>
<div class="nav">
@ -38,6 +39,8 @@
</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;
height: 100%;
.sidenav-content {
.sidebar-content {
display: flex;
flex-direction: column;
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';
@Component({
selector : 'contacts-main-sidenav',
selector : 'contacts-main-sidebar',
templateUrl: './main.component.html',
styleUrls : ['./main.component.scss']
})
export class ContactsMainSidenavComponent implements OnInit, OnDestroy
export class ContactsMainSidebarComponent implements OnInit, OnDestroy
{
user: any;
filterBy: string;

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

File diff suppressed because it is too large Load Diff

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

@ -1,70 +1,62 @@
#dashboard-project {
mat-sidenav-container {
> .sidebar {
width: 280px;
min-width: 280px;
max-width: 280px;
}
.mat-drawer-content,
.mat-sidenav-content {
flex: 1 1 100%;
}
> .center {
.center {
> .header {
height: 160px;
min-height: 160px;
max-height: 160px;
> .header {
height: 160px;
min-height: 160px;
max-height: 160px;
.selected-project {
background: rgba(0, 0, 0, 0.12);
color: #FFFFFF;
padding: 8px 16px;
height: 40px;
line-height: 24px;
font-size: 16px;
}
.selected-project {
background: rgba(0, 0, 0, 0.12);
.project-selector {
margin-left: 1px;
border-radius: 0;
background: rgba(0, 0, 0, 0.12);
mat-icon {
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 {
width: 250px !important;
min-width: 250px !important;
max-width: 250px !important;
}
> .content {
flex: 1;
.widget {
mat-tab-group {
height: 100%;
&.widget5 {
.gridline-path.gridline-path-horizontal {
display: none;
.mat-tab-body-wrapper {
flex-grow: 1;
}
}
.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 { ProjectDashboardService } from 'app/main/apps/dashboards/project/project.service';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@Component({
selector : 'project-dashboard',
@ -32,9 +33,11 @@ export class ProjectDashboardComponent implements OnInit
/**
* Constructor
*
* @param {FuseSidebarService} _fuseSidebarService
* @param {ProjectDashboardService} _projectDashboardService
*/
constructor(
private _fuseSidebarService: FuseSidebarService,
private _projectDashboardService: ProjectDashboardService
)
{
@ -161,6 +164,20 @@ export class ProjectDashboardComponent implements OnInit
this.widget11.onContactsChanged.next(this.widgets.widget11.table.rows);
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>

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

@ -1,10 +1,11 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
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 { FuseSharedModule } from '@fuse/shared.module';
import { FuseSidebarModule } from '@fuse/components';
import { FuseWidgetModule } from '@fuse/components/widget/widget.module';
import { ProjectDashboardComponent } from 'app/main/apps/dashboards/project/project.component';
@ -34,13 +35,13 @@ const routes: Routes = [
MatIconModule,
MatMenuModule,
MatSelectModule,
MatSidenavModule,
MatTableModule,
MatTabsModule,
NgxChartsModule,
FuseSharedModule,
FuseSidebarModule,
FuseWidgetModule
],
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">
<!-- 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 -->
<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 -->
<div class="fuse-widget-front mat-white-bg mat-elevation-z2">
@ -57,7 +59,8 @@
<!-- / WIDGET 1 -->
<!-- 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 -->
<div class="fuse-widget-front mat-white-bg mat-elevation-z2">
@ -100,7 +103,8 @@
<!-- / WIDGET 2 -->
<!-- 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 -->
<div class="fuse-widget-front mat-white-bg mat-elevation-z2">
@ -143,7 +147,8 @@
<!-- / WIDGET 3 -->
<!-- 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 -->
<div class="fuse-widget-front mat-white-bg mat-elevation-z2">
@ -228,7 +233,8 @@
<!-- / WIDGET 5 -->
<!-- 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 -->
<div class="fuse-widget-front mat-white-bg mat-elevation-z2">
@ -260,13 +266,19 @@
</div>
<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">
<span class="mat-display-1 mb-0">{{widgets.widget6.footerLeft.count[widget6.currentRange]}}</span>
<div class="py-8 border-right" fxLayout="column" fxLayoutAlign="center center" fxFlex="100"
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>
</div>
<div class="py-8" fxLayout="column" fxLayoutAlign="center center" fxFlex="100" fxFlex.gt-sm="50">
<span class="mat-display-1 mb-0">{{widgets.widget6.footerRight.count[widget6.currentRange]}}</span>
<div class="py-8" fxLayout="column" fxLayoutAlign="center center" fxFlex="100"
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>
</div>
</div>
@ -278,7 +290,8 @@
<!-- / WIDGET 6 -->
<!-- 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 -->
<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 -->
<div class="top-bg mat-accent-bg"></div>
@ -19,7 +19,7 @@
</button>
<div fxLayout="column" fxLayoutAlign="start start"
*fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">
[@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">
<div class="h2">
Order {{order.reference}}
</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 -->
<div class="top-bg mat-accent-bg"></div>
@ -15,8 +15,10 @@
<!-- APP TITLE -->
<div class="logo"
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>
<span class="logo-text h1" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Orders</span>
<mat-icon class="logo-icon mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
shopping_basket
</mat-icon>
<span class="logo-text h1" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Orders</span>
</div>
<!-- / APP TITLE -->
@ -92,7 +94,7 @@
<!-- Status Column -->
<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">
<p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
{{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 -->
<div class="top-bg mat-accent-bg"></div>
@ -17,14 +17,13 @@
<mat-icon>arrow_back</mat-icon>
</button>
<div class="product-image mr-8 mr-sm-16" *fuseIfOnDom
[@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
<div class="product-image mr-8 mr-sm-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
<img *ngIf="product.images[0]" [src]="product.images[0].url">
<img *ngIf="!product.images[0]" [src]="'assets/images/ecommerce/product-image-placeholder.png'">
</div>
<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'">
{{product.name}}
</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 -->
<div class="top-bg mat-accent-bg"></div>
@ -15,11 +15,10 @@
<!-- APP TITLE -->
<div class="logo my-12 m-sm-0"
fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="logo-icon mr-16" *fuseIfOnDom
[@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
<mat-icon class="logo-icon mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
shopping_basket
</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
</span>
</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 -->
<ng-container cdkColumnDef="icon">
@ -42,8 +42,8 @@
<ng-container cdkColumnDef="detail-button">
<mat-header-cell *cdkHeaderCellDef fxFlex="48px" fxHide.gt-md></mat-header-cell>
<mat-cell *cdkCellDef="let row" fxFlex="48px" fxHide.gt-md>
<button mat-icon-button class="sidenav-toggle"
fuseMatSidenavToggler="file-manager-right-sidenav">
<button mat-icon-button class="sidebar-toggle" fxHide.gt-md
(click)="toggleSidebar('file-manager-details-sidebar')">
<mat-icon class="secondary-text">info</mat-icon>
</button>
</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 { fuseAnimations } from '@fuse/animations';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
import { FileManagerService } from 'app/main/apps/file-manager/file-manager.service';
@ -27,9 +28,11 @@ export class FileManagerFileListComponent implements OnInit, OnDestroy
* Constructor
*
* @param {FileManagerService} _fileManagerService
* @param {FuseSidebarService} _fuseSidebarService
*/
constructor(
private _fileManagerService: FileManagerService
private _fileManagerService: FileManagerService,
private _fuseSidebarService: FuseSidebarService
)
{
// Set the private defaults
@ -83,6 +86,16 @@ export class FileManagerFileListComponent implements OnInit, OnDestroy
{
this._fileManagerService.onFileSelected.next(selected);
}
/**
* Toggle the sidebar
*
* @param name
*/
toggleSidebar(name): void
{
this._fuseSidebarService.getSidebar(name).toggleOpen();
}
}
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 -->
<mat-sidenav class="sidenav left-sidenav" position="start" opened="false" mode="over"
fuseMatSidenavHelper="file-manager-left-sidenav">
<file-manager-main-sidenav></file-manager-main-sidenav>
</mat-sidenav>
<!-- / SIDENAV -->
<!-- CENTER -->
<div class="center" fxFlex>
<!-- CENTER -->
<div class="center" fxFlex>
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between start">
<!-- HEADER -->
<div class="header mat-accent-bg p-24" fxLayout="column" fxLayoutAlign="space-between start">
<!-- TOOLBAR -->
<div class="toolbar w-100-p" fxFlex fxLayout="row" fxLayoutAlign="space-between start">
<!-- TOOLBAR -->
<div class="toolbar w-100-p" fxFlex fxLayout="row" fxLayoutAlign="space-between start">
<div class="left-side" fxLayout="row">
<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>
<div class="left-side" fxLayout="row">
<button mat-icon-button class="sidebar-toggle"
(click)="toggleSidebar('file-manager-main-sidebar')">
<mat-icon>menu</mat-icon>
</button>
</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>
<!-- / HEADER -->
<!-- / TOOLBAR -->
<!-- CONTENT -->
<div class="content mat-white-bg" fusePerfectScrollbar>
<file-list></file-list>
<!-- BREADCRUMB -->
<div class="breadcrumb text-truncate h1 pl-72" fxLayout="row" fxLayoutAlign="start center"
[@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>
<!-- / 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>
<!-- / CENTER -->
<!-- / HEADER -->
<!-- SIDENAV -->
<mat-sidenav class="sidenav right-sidenav " position="end" opened="true" mode="side"
fuseMatSidenavHelper="file-manager-right-sidenav" mat-is-locked-open="gt-md">
<file-manager-details-sidenav></file-manager-details-sidenav>
</mat-sidenav>
<!-- / SIDENAV -->
<!-- CONTENT -->
<div class="content mat-white-bg" fusePerfectScrollbar>
<file-list></file-list>
</div>
<!-- / CONTENT -->
</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>

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

@ -2,52 +2,46 @@
#file-manager {
mat-sidenav-container {
.sidebar {
width: 320px !important;
min-width: 320px !important;
max-width: 320px !important;
.sidenav {
width: 320px !important;
min-width: 320px !important;
max-width: 320px !important;
&.main-sidebar {
}
&.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 {
@include media-breakpoint('gt-md') {
z-index: 0;
}
.add-file-button {
position: absolute;
bottom: -28px;
left: 16px;
z-index: 999;
}
}
> .mat-sidenav-content,
> .mat-drawer-content {
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 {
}
}
.content {
flex: 1 1 auto;
}
}

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 { fuseAnimations } from '@fuse/animations';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
import { FileManagerService } from 'app/main/apps/file-manager/file-manager.service';
@ -25,9 +26,11 @@ export class FileManagerComponent implements OnInit, OnDestroy
* Constructor
*
* @param {FileManagerService} _fileManagerService
* @param {FuseSidebarService} _fuseSidebarService
*/
constructor(
private _fileManagerService: FileManagerService
private _fileManagerService: FileManagerService,
private _fuseSidebarService: FuseSidebarService
)
{
// Set the private defaults
@ -60,4 +63,18 @@ export class FileManagerComponent implements OnInit, OnDestroy
this._unsubscribeAll.next();
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 { RouterModule, Routes } from '@angular/router';
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 { FuseSidebarModule } from '@fuse/components';
import { FileManagerService } from 'app/main/apps/file-manager/file-manager.service';
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 { 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 = [
{
@ -26,8 +27,8 @@ const routes: Routes = [
declarations: [
FileManagerComponent,
FileManagerFileListComponent,
FileManagerMainSidenavComponent,
FileManagerDetailsSidenavComponent
FileManagerMainSidebarComponent,
FileManagerDetailsSidebarComponent
],
imports : [
RouterModule.forChild(routes),
@ -37,10 +38,10 @@ const routes: Routes = [
MatIconModule,
MatRippleModule,
MatSlideToggleModule,
MatSidenavModule,
MatTableModule,
FuseSharedModule
FuseSharedModule,
FuseSidebarModule
],
providers : [
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="toolbar" fxLayout="row" fxLayoutAlign="end center">
@ -24,13 +24,12 @@
</div>
</div>
</div>
<!-- / SIDENAV HEADER -->
<!-- / SIDEBAR HEADER -->
<!-- SIDENAV CONTENT -->
<!-- SIDEBAR CONTENT -->
<div class="content p-24 mat-white-bg" fusePerfectScrollbar>
<div class="file-details"
*fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms'}}">
<div class="file-details" [@animate]="{value:'*',params:{delay:'200ms'}}">
<div class="preview file-icon" fxLayout="row" fxLayoutAlign="center center">
<mat-icon class="type-icon s-48" [ngClass]="selected.type"></mat-icon>
@ -81,4 +80,4 @@
</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 {
display: flex;
flex-direction: column;
flex: 1 0 auto;
flex: 1 1 auto;
height: 100%;
> .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';
@Component({
selector : 'file-manager-details-sidenav',
selector : 'file-manager-details-sidebar',
templateUrl: './details.component.html',
styleUrls : ['./details.component.scss'],
animations : fuseAnimations
})
export class FileManagerDetailsSidenavComponent implements OnInit, OnDestroy
export class FileManagerDetailsSidebarComponent implements OnInit, OnDestroy
{
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="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>
</div>
</div>
<!-- / SIDENAV HEADER -->
<!-- / SIDEBAR HEADER -->
<!-- SIDENAV CONTENT -->
<!-- SIDEBAR CONTENT -->
<div class="content py-16" fusePerfectScrollbar>
<div class="nav">
<div class="nav-item" aria-label="inbox">
<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>
</a>
</div>
<div class="nav-item" aria-label="starred">
<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>
</a>
</div>
<div class="nav-item" aria-label="starred">
<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>
</a>
</div>
<div class="nav-item" aria-label="starred">
<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>
</a>
</div>
<div class="nav-item" aria-label="starred">
<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>
</a>
</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';
@Component({
selector : 'file-manager-main-sidenav',
selector : 'file-manager-main-sidebar',
templateUrl: './main.component.html',
styleUrls : ['./main.component.scss']
})
export class FileManagerMainSidenavComponent
export class FileManagerMainSidebarComponent
{
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 {
padding: 0;
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';
@Component({
selector : 'mail-compose',
selector : 'mail-ngrx-compose',
templateUrl : './compose.component.html',
styleUrls : ['./compose.component.scss'],
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';
@Component({
selector : 'mail-details',
selector : 'mail-ngrx-details',
templateUrl : './mail-details.component.html',
styleUrls : ['./mail-details.component.scss'],
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';
@Component({
selector : 'mail-list-item',
selector : 'mail-ngrx-list-item',
templateUrl : './mail-list-item.component.html',
styleUrls : ['./mail-list-item.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush

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

@ -3,7 +3,7 @@
</div>
<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}">
</mail-list-item>
</mail-ngrx-list-item>
</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';
@Component({
selector : 'mail-list',
selector : 'mail-ngrx-list',
templateUrl : './mail-list.component.html',
styleUrls : ['./mail-list.component.scss'],
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 -->
<div class="top-bg mat-accent-bg"></div>
<!-- / 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 -->
<mat-sidenav class="sidenav mat-sidenav-opened" position="start" mode="side" opened="true"
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<mail-main-sidenav></mail-main-sidenav>
</mat-sidenav>
<!-- / SIDENAV -->
<!-- CENTER -->
<div class="center">
<!-- CENTER -->
<div class="center">
<!-- CONTENT HEADER -->
<div class="header" fxLayout="row" fxLayoutAlign="start center">
<!-- CONTENT HEADER -->
<div class="header" fxLayout="row" fxLayoutAlign="start center">
<div class="search-wrapper" fxFlex 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"
fuseMatSidenavToggler="carded-left-sidenav"
fxHide.gt-md aria-label="Toggle Sidenav">
<mat-icon>menu</mat-icon>
<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>
<!-- / 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>
<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>
<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 HEADER -->
<!-- / CONTENT TOOLBAR -->
<!-- CONTENT CARD -->
<div class="content-card mat-white-bg" [ngClass]="{'current-mail-selected':currentMail$ | async}">
<!-- CONTENT -->
<div class="content" fxLayout="row">
<!-- 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 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 -->
<mail-ngrx-list fusePerfectScrollbar fxFlex [mails]="mails$ | async" [currentMail]="currentMail$ | async"></mail-ngrx-list>
<mail-ngrx-details [mail]="currentMail$ | async" fusePerfectScrollbar fxFlex></mail-ngrx-details>
</div>
<!-- / CONTENT CARD -->
<!-- / CONTENT -->
</div>
<!-- / CENTER -->
<!-- / CONTENT CARD -->
</mat-sidenav-container>
</div>
<!-- / CENTER -->
</div>

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

@ -10,7 +10,7 @@
.search-wrapper {
@include mat-elevation(7);
.sidenav-toggle {
.sidebar-toggle {
margin: 0;
width: 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 turkish } from 'app/main/apps/mail-ngrx/i18n/tr';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
@Component({
selector : 'mail-ngrx',
@ -37,18 +38,20 @@ export class MailNgrxComponent implements OnInit, OnDestroy
/**
* Constructor
*
* @param {FuseConfigService} _fuseConfigService
* @param {MailNgrxService} _mailNgrxService
* @param {FuseTranslationLoaderService} _fuseTranslationLoaderService
* @param {Store<MailAppState>} _store
* @param {ChangeDetectorRef} _changeDetectorRef
* @param {FuseConfigService} _fuseConfigService
* @param {FuseSidebarService} _fuseSidebarService
* @param {FuseTranslationLoaderService} _fuseTranslationLoaderService
* @param {MailNgrxService} _mailNgrxService
* @param {Store<MailAppState>} _store
*/
constructor(
private _changeDetectorRef: ChangeDetectorRef,
private _fuseConfigService: FuseConfigService,
private _mailNgrxService: MailNgrxService,
private _fuseSidebarService: FuseSidebarService,
private _fuseTranslationLoaderService: FuseTranslationLoaderService,
private _store: Store<fromStore.MailAppState>,
private _changeDetectorRef: ChangeDetectorRef
private _mailNgrxService: MailNgrxService,
private _store: Store<fromStore.MailAppState>
)
{
// Configure the layout
@ -198,4 +201,14 @@ export class MailNgrxComponent implements OnInit, OnDestroy
{
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 { 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 { FuseSharedModule } from '@fuse/shared.module';
import { FuseSidebarModule } from '@fuse/components';
import * as fromGuards from 'app/main/apps/mail-ngrx/store/guards/index';
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 { 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 { 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 { MailNgrxService } from 'app/main/apps/mail-ngrx/mail.service';
@ -58,7 +59,7 @@ const routes: Routes = [
MailNgrxListComponent,
MailNgrxListItemComponent,
MailNgrxDetailsComponent,
MailNgrxMainSidenavComponent,
MailNgrxMainSidebarComponent,
MailNgrxComposeDialogComponent
],
imports : [
@ -73,12 +74,12 @@ const routes: Routes = [
MatMenuModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatToolbarModule,
TranslateModule,
FuseSharedModule,
FuseSidebarModule,
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"
class="header mat-accent-bg p-24 pb-4">
@ -20,9 +20,9 @@
</div>
</div>
<!-- / SIDENAV HEADER -->
<!-- / SIDEBAR HEADER -->
<!-- SIDENAV CONTENT -->
<!-- SIDEBAR CONTENT -->
<div class="content" fusePerfectScrollbar>
<div class="p-24">
@ -69,4 +69,4 @@
</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 { FormGroup } from '@angular/forms';
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';
@Component({
selector : 'mail-main-sidenav',
templateUrl : './main-sidenav.component.html',
styleUrls : ['./main-sidenav.component.scss'],
selector : 'mail-ngrx-main-sidebar',
templateUrl : './main-sidebar.component.html',
styleUrls : ['./main-sidebar.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class MailNgrxMainSidenavComponent
export class MailNgrxMainSidebarComponent
{
labels: any[];
accounts: object;
@ -59,7 +59,7 @@ export class MailNgrxMainSidenavComponent
composeDialog(): void
{
this.dialogRef = this._matDialog.open(MailNgrxComposeDialogComponent, {
panelClass: 'mail-compose-dialog'
panelClass: 'mail-ngrx-compose-dialog'
});
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>
<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'}}">
email
</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>
</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>
</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)"
[ngClass]="{'current-mail mat-accent-50-bg':mail?.id == currentMail?.id}"
[@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 -->
<div class="top-bg mat-accent-bg"></div>
<!-- / 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 -->
<mat-sidenav class="sidenav" position="start" mode="side" opened="true"
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<mail-main-sidenav></mail-main-sidenav>
</mat-sidenav>
<!-- / SIDENAV -->
<!-- CENTER -->
<div class="center">
<!-- CENTER -->
<div class="center">
<!-- CONTENT HEADER -->
<div class="header" fxLayout="row" fxLayoutAlign="start center">
<!-- CONTENT HEADER -->
<div class="header" fxLayout="row" fxLayoutAlign="start center">
<div class="search-wrapper" fxFlex 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"
fuseMatSidenavToggler="carded-left-sidenav"
fxHide.gt-md aria-label="Toggle Sidenav">
<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 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>
<!-- / 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>
<!-- / 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>

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

@ -10,7 +10,7 @@
.search-wrapper {
@include mat-elevation(7);
.sidenav-toggle {
.sidebar-toggle {
margin: 0;
width: 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 { 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 { MailService } from 'app/main/apps/mail/mail.service';
import { locale as english } from 'app/main/apps/mail//i18n/en';
import { locale as turkish } from 'app/main/apps/mail//i18n/tr';
import { FuseConfigService } from '@fuse/services/config.service';
@Component({
selector : 'mail',
@ -35,11 +36,13 @@ export class MailComponent implements OnInit, OnDestroy
*
* @param {MailService} _mailService
* @param {FuseConfigService} _fuseConfigService
* @param {FuseSidebarService} _fuseSidebarService
* @param {FuseTranslationLoaderService} _fuseTranslationLoaderService
*/
constructor(
private _mailService: MailService,
private _fuseConfigService: FuseConfigService,
private _fuseSidebarService: FuseSidebarService,
private _fuseTranslationLoaderService: FuseTranslationLoaderService
)
{
@ -185,4 +188,14 @@ export class MailComponent implements OnInit, OnDestroy
{
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 { 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 { FuseSharedModule } from '@fuse/shared.module';
import { FuseSidebarModule } from '@fuse/components';
import { MailService } from 'app/main/apps/mail/mail.service';
import { MailComponent } from 'app/main/apps/mail/mail.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 { 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';
const routes: Routes = [
@ -68,7 +69,7 @@ const routes: Routes = [
MailListComponent,
MailListItemComponent,
MailDetailsComponent,
MailMainSidenavComponent,
MailMainSidebarComponent,
MailComposeDialogComponent
],
imports : [
@ -83,12 +84,12 @@ const routes: Routes = [
MatMenuModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatToolbarModule,
TranslateModule,
FuseSharedModule
FuseSharedModule,
FuseSidebarModule
],
providers : [
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"
class="header mat-accent-bg p-24 pb-4">
<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>
<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 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>
<mat-form-field floatLabel="never">
<mat-select class="account-selection" placeholder="Mail Selection"
@ -21,10 +21,10 @@
</div>
</div>
<!-- / SIDENAV HEADER -->
<!-- / SIDEBAR HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{y:'50px'}}">
<!-- SIDEBAR CONTENT -->
<div class="content" fusePerfectScrollbar [@animate]="{value:'*',params:{y:'50px'}}">
<div class="p-24">
<button mat-raised-button
@ -70,4 +70,4 @@
</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 { FormGroup } from '@angular/forms';
import { MatDialog } from '@angular/material';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { fuseAnimations } from '@fuse/animations';
import { MailService } from 'app/main/apps/mail/mail.service';
import { MailComposeDialogComponent } from 'app/main/apps/mail/dialogs/compose/compose.component';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@Component({
selector : 'mail-main-sidenav',
templateUrl: './main-sidenav.component.html',
styleUrls : ['./main-sidenav.component.scss'],
selector : 'mail-main-sidebar',
templateUrl: './main-sidebar.component.html',
styleUrls : ['./main-sidebar.component.scss'],
animations : fuseAnimations
})
export class MailMainSidenavComponent implements OnInit, OnDestroy
export class MailMainSidebarComponent implements OnInit, OnDestroy
{
folders: 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"
class="header mat-accent-bg p-24 pb-4">
<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
</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 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>
<mat-form-field floatLabel="never">
<mat-select class="account-selection" placeholder="Todo Selection"
@ -21,10 +21,10 @@
</div>
</div>
<!-- / SIDENAV HEADER -->
<!-- / SIDEBAR HEADER -->
<!-- SIDENAV CONTENT -->
<div class="content" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{y:'50px'}}">
<!-- SIDEBAR CONTENT -->
<div class="content" fusePerfectScrollbar [@animate]="{value:'*',params:{y:'50px'}}">
<div class="p-24">
<button mat-raised-button
@ -68,4 +68,4 @@
</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 {
width: 100%;
.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';
@Component({
selector : 'todo-main-sidenav',
templateUrl: './main-sidenav.component.html',
styleUrls : ['./main-sidenav.component.scss'],
selector : 'todo-main-sidebar',
templateUrl: './main-sidebar.component.html',
styleUrls : ['./main-sidebar.component.scss'],
animations : fuseAnimations
})
export class TodoMainSidenavComponent implements OnInit, OnDestroy
export class TodoMainSidebarComponent implements OnInit, OnDestroy
{
folders: 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>
<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
</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
</span>
</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>
<span class="no-todos-text hint-text">There are no todos!</span>
</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"
*ngFor="let todo of todos" [todo]="todo"
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 -->
<div class="top-bg mat-accent-bg"></div>
<!-- / 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 -->
<mat-sidenav class="sidenav" position="start" opened="true" mode="side"
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
<todo-main-sidenav></todo-main-sidenav>
</mat-sidenav>
<!-- / SIDENAV -->
<!-- CENTER -->
<div class="center">
<!-- CENTER -->
<div class="center">
<!-- CONTENT HEADER -->
<div class="header" fxLayout="row" fxLayoutAlign="start center">
<!-- CONTENT HEADER -->
<div class="header" fxLayout="row" fxLayoutAlign="start center">
<div class="search-wrapper mat-white-bg" fxFlex 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"
fuseMatSidenavToggler="carded-left-sidenav"
fxHide.gt-md aria-label="Toggle Sidenav">
<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 class="search" flex fxLayout="row" fxLayoutAlign="start center">
<mat-icon>search</mat-icon>
<input [formControl]="searchInput" placeholder="Search for a task" fxFlex>
</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>
<!-- / 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>

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

@ -10,7 +10,7 @@
.search-wrapper {
@include mat-elevation(7);
.sidenav-toggle {
.sidebar-toggle {
margin: 0;
width: 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 { fuseAnimations } from '@fuse/animations';
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
import { Todo } from 'app/main/apps/todo/todo.model';
import { TodoService } from 'app/main/apps/todo/todo.service';
@ -29,9 +30,11 @@ export class TodoComponent implements OnInit, OnDestroy
/**
* Constructor
*
* @param {FuseSidebarService} _fuseSidebarService
* @param {TodoService} _todoService
*/
constructor(
private _fuseSidebarService: FuseSidebarService,
private _todoService: TodoService
)
{
@ -155,4 +158,14 @@ export class TodoComponent implements OnInit, OnDestroy
{
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 { 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 { FuseSharedModule } from '@fuse/shared.module';
import { FuseSidebarModule } from '@fuse/components';
import { TodoService } from 'app/main/apps/todo/todo.service';
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 { TodoListComponent } from 'app/main/apps/todo/todo-list/todo-list.component';
import { TodoDetailsComponent } from 'app/main/apps/todo/todo-details/todo-details.component';
@ -64,7 +65,7 @@ const routes: Routes = [
@NgModule({
declarations: [
TodoComponent,
TodoMainSidenavComponent,
TodoMainSidebarComponent,
TodoListItemComponent,
TodoListComponent,
TodoDetailsComponent
@ -81,11 +82,11 @@ const routes: Routes = [
MatMenuModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
NgxDnDModule,
FuseSharedModule
FuseSharedModule,
FuseSidebarModule
],
providers : [
TodoService

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

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

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

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

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

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

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

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