diff --git a/src/app/main/apps/academy/academy.module.ts b/src/app/main/apps/academy/academy.module.ts index 277cf520..08025d18 100644 --- a/src/app/main/apps/academy/academy.module.ts +++ b/src/app/main/apps/academy/academy.module.ts @@ -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, diff --git a/src/app/main/apps/academy/course/course.component.html b/src/app/main/apps/academy/course/course.component.html index 0e868e4a..dcde06c5 100644 --- a/src/app/main/apps/academy/course/course.component.html +++ b/src/app/main/apps/academy/course/course.component.html @@ -1,100 +1,97 @@ -
+
- + + - - + +
-
+
-
- -
-
- {{i + 1}} -
-
{{step.title}}
+
+
+ {{i + 1}}
- +
{{step.title}}
- - - - -
- - -
- - - - - -
-

{{course.title}}

-
- -
- - - -
- - - -
- -
- -
- - - -
- - -
- - - - - - - -
-
- + - + + + + +
+ + +
+ + + + + +
+

{{course.title}}

+
+ +
+ + + +
+ + + +
+ +
+ +
+ + + +
+ + +
+ + + + + + + +
+ +
+
diff --git a/src/app/main/apps/academy/course/course.component.scss b/src/app/main/apps/academy/course/course.component.scss index 075503a4..58bc612a 100644 --- a/src/app/main/apps/academy/course/course.component.scss +++ b/src/app/main/apps/academy/course/course.component.scss @@ -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; } diff --git a/src/app/main/apps/academy/course/course.component.ts b/src/app/main/apps/academy/course/course.component.ts index a3970fa5..0171cd23 100644 --- a/src/app/main/apps/academy/course/course.component.ts +++ b/src/app/main/apps/academy/course/course.component.ts @@ -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(); + } } diff --git a/src/app/main/apps/academy/courses/courses.component.html b/src/app/main/apps/academy/courses/courses.component.html index cc10911a..de97258d 100644 --- a/src/app/main/apps/academy/courses/courses.component.html +++ b/src/app/main/apps/academy/courses/courses.component.html @@ -1,12 +1,14 @@ -
+
school -

WELCOME TO ACADEMY

-

+

+ WELCOME TO ACADEMY +

+

Our courses will step you through the process of building a small application, or adding a new feature to an existing application.

@@ -46,8 +48,7 @@
-
+
diff --git a/src/app/main/apps/calendar/calendar.component.html b/src/app/main/apps/calendar/calendar.component.html index 2ebf4691..dd8d20dd 100644 --- a/src/app/main/apps/calendar/calendar.component.html +++ b/src/app/main/apps/calendar/calendar.component.html @@ -1,4 +1,4 @@ -
+
@@ -8,8 +8,12 @@
@@ -44,7 +48,7 @@
+ [@animate]="{value:'*',params:{delay:'150ms'}}"> @@ -81,7 +85,7 @@ -
+
- Chat App + Chat App - + Select contact to start the chat!.. - diff --git a/src/app/main/apps/contacts/contacts.component.html b/src/app/main/apps/contacts/contacts.component.html index 8c7b73f4..d6bc2831 100644 --- a/src/app/main/apps/contacts/contacts.component.html +++ b/src/app/main/apps/contacts/contacts.component.html @@ -1,4 +1,4 @@ -
+
-
@@ -39,38 +42,41 @@ - + +
- - + + - + +
+ +
+ - - + +
- -
- +
+
diff --git a/src/app/main/apps/contacts/contacts.component.scss b/src/app/main/apps/contacts/contacts.component.scss index 7cf18093..cb752a8d 100644 --- a/src/app/main/apps/contacts/contacts.component.scss +++ b/src/app/main/apps/contacts/contacts.component.scss @@ -2,5 +2,12 @@ .content { overflow: hidden; + + .sidebar { + + &:not(.locked-open) { + background: white; + } + } } } \ No newline at end of file diff --git a/src/app/main/apps/contacts/contacts.component.ts b/src/app/main/apps/contacts/contacts.component.ts index 93603ccb..9315110d 100644 --- a/src/app/main/apps/contacts/contacts.component.ts +++ b/src/app/main/apps/contacts/contacts.component.ts @@ -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(); + } } diff --git a/src/app/main/apps/contacts/contacts.module.ts b/src/app/main/apps/contacts/contacts.module.ts index e1125816..39a71560 100644 --- a/src/app/main/apps/contacts/contacts.module.ts +++ b/src/app/main/apps/contacts/contacts.module.ts @@ -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 diff --git a/src/app/main/apps/contacts/sidenavs/main/main.component.html b/src/app/main/apps/contacts/sidebars/main/main.component.html similarity index 90% rename from src/app/main/apps/contacts/sidenavs/main/main.component.html rename to src/app/main/apps/contacts/sidebars/main/main.component.html index 5856fc5f..9455e5b1 100644 --- a/src/app/main/apps/contacts/sidenavs/main/main.component.html +++ b/src/app/main/apps/contacts/sidebars/main/main.component.html @@ -1,7 +1,8 @@ -
+
- + +
@@ -10,9 +11,9 @@
- + - +
@@ -38,6 +39,8 @@
+
+
- + diff --git a/src/app/main/apps/contacts/sidenavs/main/main.component.scss b/src/app/main/apps/contacts/sidebars/main/main.component.scss similarity index 97% rename from src/app/main/apps/contacts/sidenavs/main/main.component.scss rename to src/app/main/apps/contacts/sidebars/main/main.component.scss index 97c837bf..4af9c387 100644 --- a/src/app/main/apps/contacts/sidenavs/main/main.component.scss +++ b/src/app/main/apps/contacts/sidebars/main/main.component.scss @@ -6,7 +6,7 @@ flex: 1 0 auto; height: 100%; - .sidenav-content { + .sidebar-content { display: flex; flex-direction: column; padding: 0; diff --git a/src/app/main/apps/contacts/sidenavs/main/main.component.ts b/src/app/main/apps/contacts/sidebars/main/main.component.ts similarity index 94% rename from src/app/main/apps/contacts/sidenavs/main/main.component.ts rename to src/app/main/apps/contacts/sidebars/main/main.component.ts index a9196309..d9b69540 100644 --- a/src/app/main/apps/contacts/sidenavs/main/main.component.ts +++ b/src/app/main/apps/contacts/sidebars/main/main.component.ts @@ -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; diff --git a/src/app/main/apps/dashboards/project/project.component.html b/src/app/main/apps/dashboards/project/project.component.html index bccc43c9..17004ab3 100644 --- a/src/app/main/apps/dashboards/project/project.component.html +++ b/src/app/main/apps/dashboards/project/project.component.html @@ -1,901 +1,903 @@ -
+
- + + - -
+ +
- -
+ +
-
+ + - Welcome back, John! - + +
- -
+
-
+
{{dateNow | date: 'EEEE, HH:mm:ss'}}
-
{{selectedProject.name}}
+
+ - - - - - -
-
- - - -
- - - - - -
- - - - - -
-
- - - - {{range.value}} - - - - -
- -
-
- {{widgets.widget1.data.count[widgets.widget1.currentRange]}} -
-
{{widgets.widget1.data.label}} -
-
- -
- - {{widgets.widget1.data.extra.label}}: - - - {{widgets.widget1.data.extra.count[widgets.widget1.currentRange]}} - -
-
- - - -
- - -
- {{widgets.widget1.detail}} -
-
- - - - - - - - - -
-
-
{{widgets.widget2.title}}
- - -
- -
-
- {{widgets.widget2.data.count}} -
-
{{widgets.widget2.data.label}} -
-
- -
- - {{widgets.widget2.data.extra.label}}: - - {{widgets.widget2.data.extra.count}} -
-
- - - -
- - -
- {{widgets.widget2.detail}} -
-
- - - - - - - - - -
-
-
{{widgets.widget3.title}}
- - -
- -
-
- {{widgets.widget3.data.count}} -
-
{{widgets.widget3.data.label}} -
-
- -
- - {{widgets.widget3.data.extra.label}}: - - {{widgets.widget3.data.extra.count}} -
-
- - - -
- - -
- {{widgets.widget3.detail}} -
-
- - - - - - - - - -
-
-
{{widgets.widget4.title}}
- - -
- -
-
- {{widgets.widget4.data.count}} -
-
{{widgets.widget4.data.label}} -
-
- -
- - {{widgets.widget4.data.extra.label}}: - - {{widgets.widget4.data.extra.count}} -
-
- - - -
- - -
- {{widgets.widget4.detail}} -
-
- - - - - - - - - -
- -
- -
{{widgets.widget5.title}}
- -
- -
-
- -
- -
- - -
- -
- -
- -
-
{{widget.value.label}}
-
- {{widget.value.count[widget5.currentRange]}} -
-
- -
- - -
-
-
-
-
- - - - - - - - - -
- -
-
{{widgets.widget6.title}}
- - - - {{range.value}} - - - -
- -
- - -
- -
- -
- - {{widgets.widget6.footerLeft.count[widget6.currentRange]}} - - {{widgets.widget6.footerLeft.title}} -
- -
- - {{widgets.widget6.footerRight.count[widget6.currentRange]}} - - {{widgets.widget6.footerRight.title}} -
-
- -
- - - - - - - - - -
- -
-
{{widgets.widget7.title}}
- - - - {{range.value}} - - - -
- -
-
-
{{event.title}}
-
- {{event.time}} - , {{event.location}} -
-
- - -
- -
- - - - - + +
- - +
+
+ {{dateNow | date: 'MMMM'}} +
- - - -
- - - - - -
-
- {{widgets.widget8.title}} -
- - - -
- - -
- -
- - - - - - - - - -
-
-
{{widgets.widget9.title}}
- - - - {{range.value}} - - - -
- -
-
-
{{widgets.widget9.weeklySpent.title}}
-
- $ - {{widgets.widget9.weeklySpent.count[widget9.currentRange]}} -
-
-
- - -
-
- -
-
-
{{widgets.widget9.totalSpent.title}}
-
- $ - {{widgets.widget9.totalSpent.count[widget9.currentRange]}} -
-
-
- - -
-
- -
-
-
{{widgets.widget9.remaining.title}}
-
- $ - {{widgets.widget9.remaining.count[widget9.currentRange]}} -
-
-
- - -
-
- -
-
{{widgets.widget9.totalBudget.title}}
-
- $ - {{widgets.widget9.totalBudget.count}} -
-
- -
- - - - - - - - - -
- -
-
- {{widgets.widget10.title}} -
- - - - - - - - - - - - - - -
- {{column.title}} -
- - {{cell.value}} - - {{cell.icon}} - -
-
- -
- - - - +
+ {{dateNow | date: 'd'}} +
+
+ {{dateNow | date: 'y'}} +
- - + +
+ - + + - -
+ + - - + +
- -
+
-
-
{{widgets.widget11.title}}
-
- {{widgets.widget11.table.rows.length}} - members -
-
+
+ place + {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].name}} +
- - - - - - - - - - - - - Name - -

{{contact.name}} - {{contact.lastName}}

- - - - - - Position - - -

- {{contact.position}} -

- - - - - - Office - - -

- {{contact.office}} -

- - - - - - Email - - - - - - - - - Phone - - -

- {{contact.phone}} -

- - - - - - - -
- - - - +
+ + + + +
- - - +
+ +
+ + + {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].temp[widgets.weatherWidget.tempUnit]}} + + ° + C +
+
+ +
+
+ + + {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windSpeed[widgets.weatherWidget.speedUnit]}} + + {{widgets.weatherWidget.speedUnit}} +
+ +
+ + + {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windDirection}} + +
+ +
+ + + {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].rainProbability}} + +
+
+ +
+
+ {{day.name}} +
+ + {{day.temp[widgets.weatherWidget.tempUnit]}} + ° + + {{widgets.weatherWidget.tempUnit}} + +
+
+
+ + + +
+ + + +
- +
- + - - + + -
+ +
- -
+ +
- - +
- -
+ Welcome back, John! + -
+ +
-
{{dateNow | date: 'EEEE, HH:mm:ss'}}
+
-
- + + + + +
+
+ + + +
+ + + + + +
+ + + + + +
+
+ + + + {{range.value}} + + + + +
- - - +
+
+ {{widgets.widget1.data.count[widgets.widget1.currentRange]}} +
+
{{widgets.widget1.data.label}} +
+
+ +
+ + {{widgets.widget1.data.extra.label}}: + + + {{widgets.widget1.data.extra.count[widgets.widget1.currentRange]}} +
+ -
-
- {{dateNow | date: 'MMMM'}} -
- -
- {{dateNow | date: 'd'}} -
- -
- {{dateNow | date: 'y'}} -
-
- - -
- - - - - - - - - -
- -
- -
- place - {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].name}} -
+ +
+
-
+
+ + + + + + + + + +
+
+
{{widgets.widget2.title}}
+ + +
- -
+ + + +
+ + +
+ {{widgets.widget2.detail}} +
+
+ + + + + + + + + +
+
+
{{widgets.widget3.title}}
+ + +
+ +
+
+ {{widgets.widget3.data.count}} +
+
{{widgets.widget3.data.label}} +
+
+ +
+ + {{widgets.widget3.data.extra.label}}: + + {{widgets.widget3.data.extra.count}} +
+
+ + + +
+ + +
+ {{widgets.widget3.detail}} +
+
+ + + + + + + + + +
+
+
{{widgets.widget4.title}}
+ + +
+ +
+
+ {{widgets.widget4.data.count}} +
+
{{widgets.widget4.data.label}} +
+
+ +
+ + {{widgets.widget4.data.extra.label}}: + + {{widgets.widget4.data.extra.count}} +
+
+ + + +
+ + +
+ {{widgets.widget4.detail}} +
+
+ + + + + + + + + +
+ +
+ +
{{widgets.widget5.title}}
+ +
+ - -
-
- -
- -
- - - {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].temp[widgets.weatherWidget.tempUnit]}} - - ° - C -
-
- -
-
- - - {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windSpeed[widgets.weatherWidget.speedUnit]}} - - {{widgets.weatherWidget.speedUnit}} +
-
- - - {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windDirection}} - -
+
-
- - - {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].rainProbability}} - -
-
+
+ + +
-
-
- {{day.name}} -
- - {{day.temp[widgets.weatherWidget.tempUnit]}} - ° - - {{widgets.weatherWidget.tempUnit}} - +
+ +
+ +
+
{{widget.value.label}}
+
+ {{widget.value.count[widget5.currentRange]}} +
+
+ +
+ + +
+
+ - + + -
- + + - - + +
-
- -
+
+
{{widgets.widget6.title}}
+ + + + {{range.value}} + + + +
- - +
+ + +
- +
+ +
+ + {{widgets.widget6.footerLeft.count[widget6.currentRange]}} + + {{widgets.widget6.footerLeft.title}} +
+ +
+ + {{widgets.widget6.footerRight.count[widget6.currentRange]}} + + {{widgets.widget6.footerRight.title}} +
+
+ +
+ + + + + + + + + +
+ +
+
{{widgets.widget7.title}}
+ + + + {{range.value}} + + + +
+ +
+
+
{{event.title}}
+
+ {{event.time}} + , {{event.location}} +
+
+ + +
+ +
+ + + + + +
+ + + + + + + +
+ + + + + +
+
+ {{widgets.widget8.title}} +
+ + + +
+ + +
+ +
+ + + + + + + + + +
+
+
{{widgets.widget9.title}}
+ + + + {{range.value}} + + + +
+ +
+
+
{{widgets.widget9.weeklySpent.title}}
+
+ $ + {{widgets.widget9.weeklySpent.count[widget9.currentRange]}} +
+
+
+ + +
+
+ +
+
+
{{widgets.widget9.totalSpent.title}}
+
+ $ + {{widgets.widget9.totalSpent.count[widget9.currentRange]}} +
+
+
+ + +
+
+ +
+
+
{{widgets.widget9.remaining.title}}
+
+ $ + {{widgets.widget9.remaining.count[widget9.currentRange]}} +
+
+
+ + +
+
+ +
+
{{widgets.widget9.totalBudget.title}}
+
+ $ + {{widgets.widget9.totalBudget.count}} +
+
+ +
+ + + + + + + + + +
+ +
+
+ {{widgets.widget10.title}} +
+ + + + + + + + + + + + + + +
+ {{column.title}} +
+ + {{cell.value}} + + {{cell.icon}} + +
+
+ +
+ + + + + +
+ + + + + + + +
+ + + + + +
+ +
+
{{widgets.widget11.title}}
+
+ {{widgets.widget11.table.rows.length}} + members +
+
+ + + + + + + + + + + + + + Name + +

{{contact.name}} + {{contact.lastName}}

+ + + + + + Position + + +

+ {{contact.position}} +

+ + + + + + Office + + +

+ {{contact.office}} +

+ + + + + + Email + + + + + + + + + Phone + + +

+ {{contact.phone}} +

+ + + + + + + +
+ + + + + +
+ + + + + +
+ + +
+
diff --git a/src/app/main/apps/dashboards/project/project.component.scss b/src/app/main/apps/dashboards/project/project.component.scss index 62b6e31e..f886160c 100644 --- a/src/app/main/apps/dashboards/project/project.component.scss +++ b/src/app/main/apps/dashboards/project/project.component.scss @@ -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; + } + } + } +} \ No newline at end of file diff --git a/src/app/main/apps/dashboards/project/project.component.ts b/src/app/main/apps/dashboards/project/project.component.ts index fb26613c..87069e05 100644 --- a/src/app/main/apps/dashboards/project/project.component.ts +++ b/src/app/main/apps/dashboards/project/project.component.ts @@ -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 diff --git a/src/app/main/apps/dashboards/project/project.module.ts b/src/app/main/apps/dashboards/project/project.module.ts index 88290f27..46e2c8f6 100644 --- a/src/app/main/apps/dashboards/project/project.module.ts +++ b/src/app/main/apps/dashboards/project/project.module.ts @@ -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 : [ diff --git a/src/app/main/apps/e-commerce/dashboard/dashboard.component.html b/src/app/main/apps/e-commerce/dashboard/dashboard.component.html index 6e2054fc..a3806502 100644 --- a/src/app/main/apps/e-commerce/dashboard/dashboard.component.html +++ b/src/app/main/apps/e-commerce/dashboard/dashboard.component.html @@ -4,10 +4,12 @@
-
+
- +
@@ -57,7 +59,8 @@ - +
@@ -100,7 +103,8 @@ - +
@@ -143,7 +147,8 @@ - +
@@ -228,7 +233,8 @@ - +
@@ -260,13 +266,19 @@
-
- {{widgets.widget6.footerLeft.count[widget6.currentRange]}} +
+ + {{widgets.widget6.footerLeft.count[widget6.currentRange]}} + {{widgets.widget6.footerLeft.title}}
-
- {{widgets.widget6.footerRight.count[widget6.currentRange]}} +
+ + {{widgets.widget6.footerRight.count[widget6.currentRange]}} + {{widgets.widget6.footerRight.title}}
@@ -278,7 +290,8 @@ - +
diff --git a/src/app/main/apps/e-commerce/order/order.component.html b/src/app/main/apps/e-commerce/order/order.component.html index 69e5bbb3..4fbdc21b 100644 --- a/src/app/main/apps/e-commerce/order/order.component.html +++ b/src/app/main/apps/e-commerce/order/order.component.html @@ -1,4 +1,4 @@ -
+
@@ -19,7 +19,7 @@
+ [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">
Order {{order.reference}}
diff --git a/src/app/main/apps/e-commerce/orders/orders.component.html b/src/app/main/apps/e-commerce/orders/orders.component.html index a7d66abe..0ea2bdce 100644 --- a/src/app/main/apps/e-commerce/orders/orders.component.html +++ b/src/app/main/apps/e-commerce/orders/orders.component.html @@ -1,4 +1,4 @@ -
+
@@ -15,8 +15,10 @@ @@ -92,7 +94,7 @@ - Status + Status

{{order.status[0].name}} diff --git a/src/app/main/apps/e-commerce/product/product.component.html b/src/app/main/apps/e-commerce/product/product.component.html index f2444081..967c1874 100644 --- a/src/app/main/apps/e-commerce/product/product.component.html +++ b/src/app/main/apps/e-commerce/product/product.component.html @@ -1,4 +1,4 @@ -

+
@@ -17,14 +17,13 @@ arrow_back -
+
+ [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">
{{product.name}}
diff --git a/src/app/main/apps/e-commerce/products/products.component.html b/src/app/main/apps/e-commerce/products/products.component.html index d44b7c43..3c8ccaed 100644 --- a/src/app/main/apps/e-commerce/products/products.component.html +++ b/src/app/main/apps/e-commerce/products/products.component.html @@ -1,4 +1,4 @@ -
+
@@ -15,11 +15,10 @@ diff --git a/src/app/main/apps/file-manager/file-list/file-list.component.html b/src/app/main/apps/file-manager/file-list/file-list.component.html index 67e565a6..721b781b 100644 --- a/src/app/main/apps/file-manager/file-list/file-list.component.html +++ b/src/app/main/apps/file-manager/file-list/file-list.component.html @@ -1,4 +1,4 @@ - + @@ -42,8 +42,8 @@ - diff --git a/src/app/main/apps/file-manager/file-list/file-list.component.ts b/src/app/main/apps/file-manager/file-list/file-list.component.ts index 1ae8d725..ca8b4d88 100644 --- a/src/app/main/apps/file-manager/file-list/file-list.component.ts +++ b/src/app/main/apps/file-manager/file-list/file-list.component.ts @@ -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 diff --git a/src/app/main/apps/file-manager/file-manager.component.html b/src/app/main/apps/file-manager/file-manager.component.html index c8edfce0..72b1b7f6 100644 --- a/src/app/main/apps/file-manager/file-manager.component.html +++ b/src/app/main/apps/file-manager/file-manager.component.html @@ -1,79 +1,75 @@ -
+
- + + + + + - - - - - + +
- -
+ +
- -
+ +
- -
- -
- -
- -
- -
-
- - - -
-
- {{path}} - chevron_right -
-
- - - -
- -
- +
+ +
- + - -
- + +
+
+ {{path}} + chevron_right +
- + + + +
+ + +
+
- + - - - - - + +
+ +
+ + +
+ + + + + + + -
diff --git a/src/app/main/apps/file-manager/file-manager.component.scss b/src/app/main/apps/file-manager/file-manager.component.scss index 702683d2..88c56c85 100644 --- a/src/app/main/apps/file-manager/file-manager.component.scss +++ b/src/app/main/apps/file-manager/file-manager.component.scss @@ -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; } } diff --git a/src/app/main/apps/file-manager/file-manager.component.ts b/src/app/main/apps/file-manager/file-manager.component.ts index 16ac95f0..a5fee524 100644 --- a/src/app/main/apps/file-manager/file-manager.component.ts +++ b/src/app/main/apps/file-manager/file-manager.component.ts @@ -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(); + } } diff --git a/src/app/main/apps/file-manager/file-manager.module.ts b/src/app/main/apps/file-manager/file-manager.module.ts index b6f0d7bf..ba57d866 100644 --- a/src/app/main/apps/file-manager/file-manager.module.ts +++ b/src/app/main/apps/file-manager/file-manager.module.ts @@ -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 diff --git a/src/app/main/apps/file-manager/sidenavs/details/details.component.html b/src/app/main/apps/file-manager/sidebars/details/details.component.html similarity index 91% rename from src/app/main/apps/file-manager/sidenavs/details/details.component.html rename to src/app/main/apps/file-manager/sidebars/details/details.component.html index 12fc9450..08c29a70 100644 --- a/src/app/main/apps/file-manager/sidenavs/details/details.component.html +++ b/src/app/main/apps/file-manager/sidebars/details/details.component.html @@ -1,4 +1,4 @@ - +
@@ -24,13 +24,12 @@
- + - +
-
+
@@ -81,4 +80,4 @@
- + diff --git a/src/app/main/apps/file-manager/sidenavs/details/details.component.scss b/src/app/main/apps/file-manager/sidebars/details/details.component.scss similarity index 98% rename from src/app/main/apps/file-manager/sidenavs/details/details.component.scss rename to src/app/main/apps/file-manager/sidebars/details/details.component.scss index 26ea45b6..9641f6bf 100644 --- a/src/app/main/apps/file-manager/sidenavs/details/details.component.scss +++ b/src/app/main/apps/file-manager/sidebars/details/details.component.scss @@ -1,7 +1,7 @@ :host { display: flex; flex-direction: column; - flex: 1 0 auto; + flex: 1 1 auto; height: 100%; > .header { diff --git a/src/app/main/apps/file-manager/sidenavs/details/details.component.ts b/src/app/main/apps/file-manager/sidebars/details/details.component.ts similarity index 92% rename from src/app/main/apps/file-manager/sidenavs/details/details.component.ts rename to src/app/main/apps/file-manager/sidebars/details/details.component.ts index b6327e9b..939e18df 100644 --- a/src/app/main/apps/file-manager/sidenavs/details/details.component.ts +++ b/src/app/main/apps/file-manager/sidebars/details/details.component.ts @@ -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; diff --git a/src/app/main/apps/file-manager/sidenavs/main/main.component.html b/src/app/main/apps/file-manager/sidebars/main/main.component.html similarity index 66% rename from src/app/main/apps/file-manager/sidenavs/main/main.component.html rename to src/app/main/apps/file-manager/sidebars/main/main.component.html index 0e17eb64..a9cd68c4 100644 --- a/src/app/main/apps/file-manager/sidenavs/main/main.component.html +++ b/src/app/main/apps/file-manager/sidebars/main/main.component.html @@ -1,54 +1,54 @@ - +
- + - +
- folder + folder My Files
- star + star
Starred
- folder_shared + folder_shared
Sharred with me
- access_time + access_time
Recent
- not_interested + not_interested
Offline
- + diff --git a/src/app/main/apps/file-manager/sidenavs/main/main.component.scss b/src/app/main/apps/file-manager/sidebars/main/main.component.scss similarity index 100% rename from src/app/main/apps/file-manager/sidenavs/main/main.component.scss rename to src/app/main/apps/file-manager/sidebars/main/main.component.scss diff --git a/src/app/main/apps/file-manager/sidenavs/main/main.component.ts b/src/app/main/apps/file-manager/sidebars/main/main.component.ts similarity index 68% rename from src/app/main/apps/file-manager/sidenavs/main/main.component.ts rename to src/app/main/apps/file-manager/sidebars/main/main.component.ts index 817f6fb3..0ab0bc90 100644 --- a/src/app/main/apps/file-manager/sidenavs/main/main.component.ts +++ b/src/app/main/apps/file-manager/sidebars/main/main.component.ts @@ -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; diff --git a/src/app/main/apps/mail-ngrx/dialogs/compose/compose.component.scss b/src/app/main/apps/mail-ngrx/dialogs/compose/compose.component.scss index 87d41f50..4614e96b 100644 --- a/src/app/main/apps/mail-ngrx/dialogs/compose/compose.component.scss +++ b/src/app/main/apps/mail-ngrx/dialogs/compose/compose.component.scss @@ -1,4 +1,5 @@ -.mail-compose-dialog { +.mail-ngrx-compose-dialog { + .mat-dialog-container { padding: 0; width: 720px; diff --git a/src/app/main/apps/mail-ngrx/dialogs/compose/compose.component.ts b/src/app/main/apps/mail-ngrx/dialogs/compose/compose.component.ts index 4e3d6d6f..df1a55f1 100644 --- a/src/app/main/apps/mail-ngrx/dialogs/compose/compose.component.ts +++ b/src/app/main/apps/mail-ngrx/dialogs/compose/compose.component.ts @@ -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 diff --git a/src/app/main/apps/mail-ngrx/mail-details/mail-details.component.ts b/src/app/main/apps/mail-ngrx/mail-details/mail-details.component.ts index 3c80a9e1..746424cd 100644 --- a/src/app/main/apps/mail-ngrx/mail-details/mail-details.component.ts +++ b/src/app/main/apps/mail-ngrx/mail-details/mail-details.component.ts @@ -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 diff --git a/src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts b/src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts index 4ec6b611..09ede37d 100644 --- a/src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts +++ b/src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts @@ -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 diff --git a/src/app/main/apps/mail-ngrx/mail-list/mail-list.component.html b/src/app/main/apps/mail-ngrx/mail-list/mail-list.component.html index 9e94b60c..2f5a9bb1 100644 --- a/src/app/main/apps/mail-ngrx/mail-list/mail-list.component.html +++ b/src/app/main/apps/mail-ngrx/mail-list/mail-list.component.html @@ -3,7 +3,7 @@
- - +
diff --git a/src/app/main/apps/mail-ngrx/mail-list/mail-list.component.ts b/src/app/main/apps/mail-ngrx/mail-list/mail-list.component.ts index 54237b1e..faaef965 100644 --- a/src/app/main/apps/mail-ngrx/mail-list/mail-list.component.ts +++ b/src/app/main/apps/mail-ngrx/mail-list/mail-list.component.ts @@ -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 diff --git a/src/app/main/apps/mail-ngrx/mail.component.html b/src/app/main/apps/mail-ngrx/mail.component.html index fc8e0816..6b1ce194 100644 --- a/src/app/main/apps/mail-ngrx/mail.component.html +++ b/src/app/main/apps/mail-ngrx/mail.component.html @@ -1,115 +1,109 @@ -
+
- + + + + + - - - - - + +
- -
+ +
- -
+
-
+ -
+
+ + + +
+ + +
+ +
+ + + + + + + + + + + + + + + + +
+ + -
- search - -
+ + + + + + + + + +
+ +
+
- + - -
+ +
- -
- -
- - - - - - - - - - - - - - - - -
- - - - - - - - - - - - -
- -
- -
-
- - - -
- - - - -
- + +
- +
- + - +
+
diff --git a/src/app/main/apps/mail-ngrx/mail.component.scss b/src/app/main/apps/mail-ngrx/mail.component.scss index f401db44..79154e90 100644 --- a/src/app/main/apps/mail-ngrx/mail.component.scss +++ b/src/app/main/apps/mail-ngrx/mail.component.scss @@ -10,7 +10,7 @@ .search-wrapper { @include mat-elevation(7); - .sidenav-toggle { + .sidebar-toggle { margin: 0; width: 56px; height: 56px; diff --git a/src/app/main/apps/mail-ngrx/mail.component.ts b/src/app/main/apps/mail-ngrx/mail.component.ts index 51833271..80d1b233 100644 --- a/src/app/main/apps/mail-ngrx/mail.component.ts +++ b/src/app/main/apps/mail-ngrx/mail.component.ts @@ -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} _store * @param {ChangeDetectorRef} _changeDetectorRef + * @param {FuseConfigService} _fuseConfigService + * @param {FuseSidebarService} _fuseSidebarService + * @param {FuseTranslationLoaderService} _fuseTranslationLoaderService + * @param {MailNgrxService} _mailNgrxService + * @param {Store} _store */ constructor( + private _changeDetectorRef: ChangeDetectorRef, private _fuseConfigService: FuseConfigService, - private _mailNgrxService: MailNgrxService, + private _fuseSidebarService: FuseSidebarService, private _fuseTranslationLoaderService: FuseTranslationLoaderService, - private _store: Store, - private _changeDetectorRef: ChangeDetectorRef + private _mailNgrxService: MailNgrxService, + private _store: Store ) { // 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(); + } } diff --git a/src/app/main/apps/mail-ngrx/mail.module.ts b/src/app/main/apps/mail-ngrx/mail.module.ts index 9651d7f0..76474bbc 100644 --- a/src/app/main/apps/mail-ngrx/mail.module.ts +++ b/src/app/main/apps/mail-ngrx/mail.module.ts @@ -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 ], diff --git a/src/app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component.html b/src/app/main/apps/mail-ngrx/sidebars/main/main-sidebar.component.html similarity index 96% rename from src/app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component.html rename to src/app/main/apps/mail-ngrx/sidebars/main/main-sidebar.component.html index a858a439..5cd40a1e 100644 --- a/src/app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component.html +++ b/src/app/main/apps/mail-ngrx/sidebars/main/main-sidebar.component.html @@ -1,4 +1,4 @@ - +
@@ -20,9 +20,9 @@
- + - +
@@ -69,4 +69,4 @@
- + diff --git a/src/app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component.scss b/src/app/main/apps/mail-ngrx/sidebars/main/main-sidebar.component.scss similarity index 100% rename from src/app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component.scss rename to src/app/main/apps/mail-ngrx/sidebars/main/main-sidebar.component.scss diff --git a/src/app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component.ts b/src/app/main/apps/mail-ngrx/sidebars/main/main-sidebar.component.ts similarity index 88% rename from src/app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component.ts rename to src/app/main/apps/mail-ngrx/sidebars/main/main-sidebar.component.ts index 11dfcfab..7231340b 100644 --- a/src/app/main/apps/mail-ngrx/sidenavs/main/main-sidenav.component.ts +++ b/src/app/main/apps/mail-ngrx/sidebars/main/main-sidebar.component.ts @@ -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() diff --git a/src/app/main/apps/mail/mail-details/mail-details.component.html b/src/app/main/apps/mail/mail-details/mail-details.component.html index 5dc940f0..16cb15bf 100644 --- a/src/app/main/apps/mail/mail-details/mail-details.component.html +++ b/src/app/main/apps/mail/mail-details/mail-details.component.html @@ -1,9 +1,9 @@
- email - + {{ 'MAIL.SELECT_A_MESSAGE_TO_READ' | translate }}
diff --git a/src/app/main/apps/mail/mail-list/mail-list.component.html b/src/app/main/apps/mail/mail-list/mail-list.component.html index a2a42d71..7090440b 100644 --- a/src/app/main/apps/mail/mail-list/mail-list.component.html +++ b/src/app/main/apps/mail/mail-list/mail-list.component.html @@ -2,7 +2,7 @@ {{ 'MAIL.NO_MESSAGES' | translate }}
-
+
diff --git a/src/app/main/apps/mail/mail.component.html b/src/app/main/apps/mail/mail.component.html index daae3a07..0a28b1d4 100644 --- a/src/app/main/apps/mail/mail.component.html +++ b/src/app/main/apps/mail/mail.component.html @@ -1,113 +1,107 @@ -
+
- + + + + + - - - - - + +
- -
+ +
- -
+
-
+ - - -
- search - -
+
+ search +
-
- - - -
- - -
- -
- - - - - - - - - - - - - - -
- - - - - - - - - - - - -
- -
- -
-
- - - -
- - - - -
- - -
-
- + - + +
+ + +
+ +
+ + + + + + + + + + + + + + +
+ + + + + + + + + + + + +
+ +
+ +
+
+ + + +
+ + + + +
+ + +
+ + +
+
diff --git a/src/app/main/apps/mail/mail.component.scss b/src/app/main/apps/mail/mail.component.scss index f401db44..79154e90 100644 --- a/src/app/main/apps/mail/mail.component.scss +++ b/src/app/main/apps/mail/mail.component.scss @@ -10,7 +10,7 @@ .search-wrapper { @include mat-elevation(7); - .sidenav-toggle { + .sidebar-toggle { margin: 0; width: 56px; height: 56px; diff --git a/src/app/main/apps/mail/mail.component.ts b/src/app/main/apps/mail/mail.component.ts index 2142b9c3..c49b9e98 100644 --- a/src/app/main/apps/mail/mail.component.ts +++ b/src/app/main/apps/mail/mail.component.ts @@ -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(); + } } diff --git a/src/app/main/apps/mail/mail.module.ts b/src/app/main/apps/mail/mail.module.ts index 4066b864..cc387f73 100644 --- a/src/app/main/apps/mail/mail.module.ts +++ b/src/app/main/apps/mail/mail.module.ts @@ -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 diff --git a/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.html b/src/app/main/apps/mail/sidebars/main/main-sidebar.component.html similarity index 81% rename from src/app/main/apps/mail/sidenavs/main/main-sidenav.component.html rename to src/app/main/apps/mail/sidebars/main/main-sidebar.component.html index 46e6b939..ab6185c6 100644 --- a/src/app/main/apps/mail/sidenavs/main/main-sidenav.component.html +++ b/src/app/main/apps/mail/sidebars/main/main-sidebar.component.html @@ -1,14 +1,14 @@ - +
-