purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +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,

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

@ -1,12 +1,10 @@
<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">
<div class="sidenav-content" fusePerfectScrollbar>
<!-- SIDEBAR CONTENT -->
<div class="content" fusePerfectScrollbar>
<div class="steps">
@ -23,9 +21,10 @@
</div>
</div>
<!-- / SIDEBAR CONTENT -->
</mat-sidenav>
<!-- / SIDENAV -->
</fuse-sidebar>
<!-- / SIDEBAR -->
<!-- CENTER -->
<div class="center">
@ -33,8 +32,8 @@
<!-- 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>
<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>
@ -95,6 +94,4 @@
</div>
<!-- / CENTER -->
</mat-sidenav-container>
</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;

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

@ -1,6 +1,156 @@
<div id="dashboard-project" class="page-layout simple right-sidenav" fxLayout="row">
<div id="dashboard-project" class="page-layout simple right-sidebar" fxLayout="row">
<mat-sidenav-container>
<!-- SIDEBAR -->
<fuse-sidebar class="sidebar" name="project-dashboard-right-sidebar-1" position="right" lockedOpen="gt-md">
<!-- SIDEBAR CONTENT -->
<div class="content">
<!-- WIDGET GROUP -->
<div class="widget-group" fxLayout="column" fxFlex="100" [@animateStagger]="{value:'50'}">
<!-- NOW WIDGET -->
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="p-0">
<!-- Front -->
<div class="fuse-widget-front">
<div class="pl-16 pr-8 py-16" fxLayout="row" fxLayoutAlign="space-between center">
<div class="h3">{{dateNow | date: 'EEEE, HH:mm:ss'}}</div>
<div>
<button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="more">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #moreMenu="matMenu">
<button mat-menu-item aria-label="Flip widget">
Details
</button>
</mat-menu>
</div>
</div>
<div class="p-16 pb-24" fxLayout="column" fxLayoutAlign="center center">
<div class="h1 secondary-text">
<span>{{dateNow | date: 'MMMM'}}</span>
</div>
<div class="font-size-72 line-height-88 secondary-text font-weight-400">
{{dateNow | date: 'd'}}
</div>
<div class="h1 secondary-text">
<span>{{dateNow | date: 'y'}}</span>
</div>
</div>
<mat-divider></mat-divider>
</div>
<!-- / Front -->
</fuse-widget>
<!-- / NOW WIDGET -->
<!-- WEATHER WIDGET -->
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="p-0">
<!-- Front -->
<div class="fuse-widget-front">
<div class="pl-16 pr-8 py-16" fxLayout="row" fxLayoutAlign="space-between center">
<div class="h4" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text mr-8">place</mat-icon>
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].name}}
</div>
<div>
<button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="more">
<mat-icon class="secondary-text">more_vert</mat-icon>
</button>
<mat-menu #moreMenu="matMenu">
<button mat-menu-item aria-label="Flip widget">
Details
</button>
</mat-menu>
</div>
</div>
<div class="p-16 pb-32" fxLayout="column" fxLayoutAlign="center center">
<div fxLayout="row" fxLayoutAlign="center center">
<mat-icon fontSet="meteocons"
[fontIcon]="widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].icon"
class="icon s-40 secondary-text mr-16"></mat-icon>
<span class="mat-display-2 m-0 font-weight-300 secondary-text">
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].temp[widgets.weatherWidget.tempUnit]}}
</span>
<span class="font-size-48 font-weight-300 hint-text text-super ml-8">°</span>
<span class="mat-display-2 mb-0 font-weight-300 hint-text ng-binding">C</span>
</div>
</div>
<div class="grey-300-bg p-16" fxLayout="row" fxLayoutAlign="space-between center">
<div fxLayout="row" fxLayoutAlign="start center">
<mat-icon fontSet="meteocons" fontIcon="icon-windy"
class="s-16 secondary-text mr-8"></mat-icon>
<span>
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windSpeed[widgets.weatherWidget.speedUnit]}}
</span>
<span class="secondary-text ml-5">{{widgets.weatherWidget.speedUnit}}</span>
</div>
<div fxLayout="row" fxLayoutAlign="start center">
<mat-icon fontSet="meteocons" fontIcon="icon-compass"
class="s-16 secondary-text mr-8"></mat-icon>
<span>
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windDirection}}
</span>
</div>
<div fxLayout="row" fxLayoutAlign="start center">
<mat-icon fontSet="meteocons" fontIcon="icon-rainy"
class="s-16 secondary-text mr-8"></mat-icon>
<span>
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].rainProbability}}
</span>
</div>
</div>
<div class="py-16">
<div class="py-16 px-24" fxLayout="row" fxLayoutAlign="space-between center"
*ngFor="let day of widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].next3Days">
<span class="h4">{{day.name}}</span>
<div fxLayout="row" fxLayoutAlign="start center">
<mat-icon fontSet="meteocons" [fontIcon]="day.icon" class="secondary-text mr-16"></mat-icon>
<span class="h2">{{day.temp[widgets.weatherWidget.tempUnit]}}</span>
<span class="h2 font-weight-300 secondary-text text-super">&deg;</span>
<span class="h2 font-weight-300 secondary-text">
{{widgets.weatherWidget.tempUnit}}
</span>
</div>
</div>
</div>
<mat-divider></mat-divider>
</div>
<!-- / Front -->
</fuse-widget>
<!-- / WEATHER WIDGET -->
</div>
<!-- / WIDGET GROUP -->
</div>
<!-- / SIDEBAR CONTENT -->
</fuse-sidebar>
<!-- / SIDEBAR -->
<!-- CENTER -->
<div class="center" fusePerfectScrollbar>
@ -10,11 +160,12 @@
<div fxLayout="row" fxLayoutAlign="space-between start">
<span class="mat-display-1 mb-0 welcome-message" *fuseIfOnDom
<span class="mat-display-1 mb-0 welcome-message"
[@animate]="{value:'*',params:{x:'50px'}}">Welcome back, John!
</span>
<button mat-icon-button fuseMatSidenavToggler="dashboards-right-sidenav" fxHide.gt-md>
<button mat-icon-button class="sidebar-toggle mr-8" fxHide.gt-md
(click)="toggleSidebar('project-dashboard-right-sidebar-1')">
<mat-icon>menu</mat-icon>
</button>
</div>
@ -749,153 +900,4 @@
</div>
<!-- / CENTER -->
<!-- SIDENAV -->
<mat-sidenav class="sidenav" position="end" mode="side" opened="true"
fuseMatSidenavHelper="dashboards-right-sidenav" mat-is-locked-open="gt-md">
<div class="sidenav-content" fusePerfectScrollbar>
<!-- WIDGET GROUP -->
<div class="widget-group" fxLayout="column" fxFlex="100" *fuseIfOnDom [@animateStagger]="{value:'50'}">
<!-- NOW WIDGET -->
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="sidenav-widget p-0">
<!-- Front -->
<div class="fuse-widget-front">
<div class="pl-16 pr-8 py-16" fxLayout="row" fxLayoutAlign="space-between center">
<div class="h3">{{dateNow | date: 'EEEE, HH:mm:ss'}}</div>
<div>
<button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="more">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #moreMenu="matMenu">
<button mat-menu-item aria-label="Flip widget">
Details
</button>
</mat-menu>
</div>
</div>
<div class="p-16 pb-24" fxLayout="column" fxLayoutAlign="center center">
<div class="h1 secondary-text">
<span>{{dateNow | date: 'MMMM'}}</span>
</div>
<div class="font-size-72 line-height-88 secondary-text font-weight-400">
{{dateNow | date: 'd'}}
</div>
<div class="h1 secondary-text">
<span>{{dateNow | date: 'y'}}</span>
</div>
</div>
<mat-divider></mat-divider>
</div>
<!-- / Front -->
</fuse-widget>
<!-- / NOW WIDGET -->
<!-- WEATHER WIDGET -->
<fuse-widget [@animate]="{value:'*',params:{y:'100%'}}" class="sidenav-widget p-0">
<!-- Front -->
<div class="fuse-widget-front">
<div class="pl-16 pr-8 py-16" fxLayout="row" fxLayoutAlign="space-between center">
<div class="h4" fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="mr-8">place</mat-icon>
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].name}}
</div>
<div>
<button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="more">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #moreMenu="matMenu">
<button mat-menu-item aria-label="Flip widget">
Details
</button>
</mat-menu>
</div>
</div>
<div class="p-16 pb-32" fxLayout="column" fxLayoutAlign="center center">
<div fxLayout="row" fxLayoutAlign="center center">
<mat-icon fontSet="meteocons"
[fontIcon]="widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].icon"
class="icon s-40 mr-16"></mat-icon>
<span class="mat-display-2 m-0 font-weight-300 secondary-text">
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].temp[widgets.weatherWidget.tempUnit]}}
</span>
<span class="font-size-48 font-weight-300 hint-text text-super ml-8">°</span>
<span class="mat-display-2 mb-0 font-weight-300 hint-text ng-binding">C</span>
</div>
</div>
<div class="grey-300-bg p-16" fxLayout="row" fxLayoutAlign="space-between center">
<div fxLayout="row" fxLayoutAlign="start center">
<mat-icon fontSet="meteocons" fontIcon="icon-windy" class="mr-8 s-16"></mat-icon>
<span>
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windSpeed[widgets.weatherWidget.speedUnit]}}
</span>
<span class="secondary-text ml-5">{{widgets.weatherWidget.speedUnit}}</span>
</div>
<div fxLayout="row" fxLayoutAlign="start center">
<mat-icon fontSet="meteocons" fontIcon="icon-compass" class="mr-8 s-16"></mat-icon>
<span>
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windDirection}}
</span>
</div>
<div fxLayout="row" fxLayoutAlign="start center">
<mat-icon fontSet="meteocons" fontIcon="icon-rainy" class="mr-8 s-16"></mat-icon>
<span>
{{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].rainProbability}}
</span>
</div>
</div>
<div class="py-16">
<div class="py-16 px-24" fxLayout="row" fxLayoutAlign="space-between center"
*ngFor="let day of widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].next3Days">
<span class="h4">{{day.name}}</span>
<div fxLayout="row" fxLayoutAlign="start center">
<mat-icon fontSet="meteocons" [fontIcon]="day.icon" class="mr-16"></mat-icon>
<span class="h2">{{day.temp[widgets.weatherWidget.tempUnit]}}</span>
<span class="h2 font-weight-300 secondary-text text-super">&deg;</span>
<span class="h2 font-weight-300 secondary-text">
{{widgets.weatherWidget.tempUnit}}
</span>
</div>
</div>
</div>
<mat-divider></mat-divider>
</div>
<!-- / Front -->
</fuse-widget>
<!-- / WEATHER WIDGET -->
</div>
<!-- / WIDGET GROUP -->
</div>
</mat-sidenav>
<!-- / SIDENAV -->
</mat-sidenav-container>
</div>

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

@ -1,13 +1,12 @@
#dashboard-project {
mat-sidenav-container {
.mat-drawer-content,
.mat-sidenav-content {
flex: 1 1 100%;
> .sidebar {
width: 280px;
min-width: 280px;
max-width: 280px;
}
.center {
> .center {
> .header {
height: 160px;
@ -51,12 +50,6 @@
}
}
.sidenav {
width: 250px !important;
min-width: 250px !important;
max-width: 250px !important;
}
.widget {
&.widget5 {
@ -67,4 +60,3 @@
}
}
}
}

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>

8
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 -->

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>

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

@ -1,13 +1,10 @@
<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>
<!-- 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 -->
<!-- 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 -->
<!-- CENTER -->
<div class="center" fxFlex>
@ -19,8 +16,8 @@
<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">
<button mat-icon-button class="sidebar-toggle"
(click)="toggleSidebar('file-manager-main-sidebar')">
<mat-icon>menu</mat-icon>
</button>
</div>
@ -35,7 +32,7 @@
<!-- BREADCRUMB -->
<div class="breadcrumb text-truncate h1 pl-72" fxLayout="row" fxLayoutAlign="start center"
*fuseIfOnDom [@animate]="{value:'*',params:{x:'50px'}}">
[@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>
@ -50,7 +47,7 @@
class="add-file-button mat-warn"
(click)="fileInput.click()"
aria-label="Add file"
*fuseIfOnDom [@animate]="{value:'*', params:{delay:'300ms',scale:'0.2'}}">
[@animate]="{value:'*', params:{delay:'300ms',scale:'0.2'}}">
<mat-icon>add</mat-icon>
</button>
</div>
@ -68,12 +65,11 @@
</div>
<!-- / CENTER -->
<!-- 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 -->
<!-- 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>

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

@ -2,28 +2,23 @@
#file-manager {
mat-sidenav-container {
.sidenav {
.sidebar {
width: 320px !important;
min-width: 320px !important;
max-width: 320px !important;
&.left-sidenav {
&.main-sidebar {
}
&.right-sidenav {
&.details-sidebar {
@include media-breakpoint('gt-md') {
z-index: 0;
}
}
}
> .mat-sidenav-content,
> .mat-drawer-content {
z-index: 1;
.center {
overflow: hidden;
.header {
position: relative;
@ -46,8 +41,7 @@
}
.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

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

@ -1,17 +1,14 @@
<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>
<!-- 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 -->
<!-- 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 -->
<!-- CENTER -->
<div class="center">
@ -21,9 +18,8 @@
<div class="search-wrapper" fxFlex fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button class="sidenav-toggle"
fuseMatSidenavToggler="carded-left-sidenav"
fxHide.gt-md aria-label="Toggle Sidenav">
<button mat-icon-button class="sidebar-toggle" fxHide.gt-md
(click)="toggleSidebar('mail-ngrx-main-sidebar')">
<mat-icon>menu</mat-icon>
</button>
@ -98,8 +94,8 @@
<!-- 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>
<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 -->
@ -110,6 +106,4 @@
</div>
<!-- / CENTER -->
</mat-sidenav-container>
</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%'}}">

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

@ -1,17 +1,14 @@
<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>
<!-- 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 -->
<!-- SIDEBAR -->
<fuse-sidebar class="sidebar" name="mail-main-sidebar" position="left" lockedOpen="gt-md">
<mail-main-sidebar></mail-main-sidebar>
</fuse-sidebar>
<!-- / SIDEBAR -->
<!-- CENTER -->
<div class="center">
@ -21,9 +18,8 @@
<div class="search-wrapper" fxFlex fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button class="sidenav-toggle"
fuseMatSidenavToggler="carded-left-sidenav"
fxHide.gt-md aria-label="Toggle Sidenav">
<button mat-icon-button class="sidebar-toggle" fxHide.gt-md
(click)="toggleSidebar('mail-main-sidebar')">
<mat-icon>menu</mat-icon>
</button>
@ -108,6 +104,4 @@
</div>
<!-- / CENTER -->
</mat-sidenav-container>
</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

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

@ -1,17 +1,14 @@
<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>
<!-- 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 -->
<!-- SIDEBAR -->
<fuse-sidebar class="sidebar" name="todo-main-sidebar" position="left" lockedOpen="gt-md">
<todo-main-sidebar></todo-main-sidebar>
</fuse-sidebar>
<!-- / SIDEBAR -->
<!-- CENTER -->
<div class="center">
@ -21,9 +18,8 @@
<div class="search-wrapper mat-white-bg" fxFlex fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button class="sidenav-toggle"
fuseMatSidenavToggler="carded-left-sidenav"
fxHide.gt-md aria-label="Toggle Sidenav">
<button mat-icon-button class="sidebar-toggle" fxHide.gt-md
(click)="toggleSidebar('todo-main-sidebar')">
<mat-icon>menu</mat-icon>
</button>
@ -83,11 +79,8 @@
<!-- CONTENT -->
<div class="content" fxFlexAlign="row">
<todo-list fusePerfectScrollbar fxFlex></todo-list>
<todo-details fusePerfectScrollbar fxFlex></todo-details>
</div>
<!-- / CONTENT -->
@ -97,6 +90,4 @@
</div>
<!-- / CENTER -->
</mat-sidenav-container>
</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>