From 1d28882280e2c846a56fc1c95fdd4ab33bb0b124 Mon Sep 17 00:00:00 2001 From: Khushboo Date: Sun, 12 Jan 2020 23:04:04 +0530 Subject: [PATCH] feat(app): #1638 created sidebar component in shared module --- web/src/app/app.component.html | 178 +---------------- web/src/app/app.component.scss | 171 ----------------- web/src/app/app.component.ts | 166 +--------------- .../components/sidebar/sidebar.component.html | 176 +++++++++++++++++ .../components/sidebar/sidebar.component.scss | 171 +++++++++++++++++ .../components/sidebar/sidebar.component.ts | 180 ++++++++++++++++++ web/src/app/shared/shared.module.ts | 3 + 7 files changed, 535 insertions(+), 510 deletions(-) create mode 100644 web/src/app/shared/components/sidebar/sidebar.component.html create mode 100644 web/src/app/shared/components/sidebar/sidebar.component.scss create mode 100644 web/src/app/shared/components/sidebar/sidebar.component.ts diff --git a/web/src/app/app.component.html b/web/src/app/app.component.html index f6629cf8f..fe058a3f9 100644 --- a/web/src/app/app.component.html +++ b/web/src/app/app.component.html @@ -1,177 +1 @@ - - -
- -
- - - -
- - {{ item.icon }} - - {{ item.title }} -
- - - - - -
- - {{ item.icon }} - - {{ item.title }} -
- - - - - -
- - {{ item.icon }} - - {{ item.title }} -
- - - -
- - vpn_key - - Login -
- - -
- - exit_to_app - - Sign out -
- - - - -
- - {{ item.icon }} - - {{ item.title }} -
- - - - - - - -
-
- - more_vert - - - format_list_bulleted - -
-
- -
-
-
-
- -
-
-
- -
-
-
- more_vert -
- -
- -
- -
-
-
- - -
-
-
-
- Login - vpn_key -
-
- -
-
-
{{ isAuthenticated() ? getProfile().username : 'Welcome Guest' }}
-
- - - - - - person - -
-
-
- -
- - - -
- - -
- Copyright © 2019 DashboardHub. All rights reserved ({{ version }}) -
- - -
- -
-
- feedback - Feedback -
-
-
-
- -
- - - - + diff --git a/web/src/app/app.component.scss b/web/src/app/app.component.scss index a38a6b76b..e69de29bb 100644 --- a/web/src/app/app.component.scss +++ b/web/src/app/app.component.scss @@ -1,171 +0,0 @@ -@import "~@angular/material/theming"; -@import "../assets/scss/variable"; -@import "../assets/scss/mixin.scss"; - -.sidenav-container { - height: 100%; - background-color: #eaeaea; -} - -.sidenav { - @include ellipsisText; - width: 60px; - background: $background-black-color; - transition-duration: 0.5s; - - &__open { - transition-duration: 0.5s; - width: 235px; - } - - .heading { - margin-top: 16px; - margin-left: -4px; - height: 60px; - cursor: pointer; - overflow: hidden; - white-space: nowrap; - - &__logo { - width: 240px; - overflow: hidden; - height: 32px; - } - - &__icon { - position: absolute; - right: -5px; - top: 23px; - - &__item { - color: $dark-grey-color; - transform: scale(1.5) - } - } - } - - .menu { - overflow: hidden; - - &__item { - font-size: 16px; - font-weight: lighter; - color: $dark-grey-color; - - &__active { - color: #fff; - } - - &__icon { - width: 25px; - height: 25px; - } - } - } -} - -.sidenav .mat-toolbar { - background: inherit; -} - -.app-toolbar { - position: relative; - - background: none; - - &__logo { - width: 140px; - padding-left: 24px; - } - - &__icon { - color: $dark-grey-color; - } - - &__menu { - cursor: pointer; - } - - &__profile-block { - font-size: 16px; - - &__avatar { - width: 40px; - height: 40px; - border-radius: 50%; - border: 1px solid $orange-2-color; - cursor: pointer; - margin-right: 5px !important; - - &__icon { - width: 40px; - height: 40px; - font-size: 35px; - background: $orange-2-color; - border: 1px solid $orange-2-color; - border-radius: 50%; - margin-right: 5px !important; - } - } - - &__icon { - cursor: pointer; - transform: scale(0.8); - margin-right: 5px !important; - } - - &__menu-icon { - cursor: pointer; - color: $dark-grey-color; - transform: scale(1.2); - margin-right: 5px !important; - } - - &__button { - font-size: 16px; - cursor: pointer; - } - } -} - -.content-container { - min-height: calc(100% - 128px); - overflow-x: hidden; - - @media ($mat-xsmall) { - min-height: calc(100% - 112px); - } -} - -.move-up { - margin-left: 0px !important; - - @media (min-width: $breakpoint-xs) { - - margin-left: 235px !important; - transition-duration: 0.5s; - - } -} - -.move-down { - margin-left: 0px !important; - - @media (min-width: $breakpoint-xs) { - margin-left: 60px !important; - transition-duration: 0.5s; - - - } -} - -.footer { - &__copyright { - text-align: center; - white-space: pre-wrap; - - @media (max-width: $breakpoint-sm) { - padding: 10px 0; - } - } -} diff --git a/web/src/app/app.component.ts b/web/src/app/app.component.ts index e37223208..441437b8d 100644 --- a/web/src/app/app.component.ts +++ b/web/src/app/app.component.ts @@ -1,19 +1,7 @@ // Core modules -import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { NavigationEnd, Router, RouterEvent } from '@angular/router'; -// Breakpoints components -import { Breakpoints, BreakpointObserver, BreakpointState } from '@angular/cdk/layout'; - -import { delay } from 'rxjs/operators'; - -// Dashboard hub Icon register -import { MatSidenav } from '@angular/material'; - -// Dashboard hub models and services -import { ActivityService, AuthenticationService } from './core/services/index.service'; -import { Navigation, ProfileModel } from './shared/models/index.model'; - import { environment } from './../environments/environment'; /** @@ -24,99 +12,17 @@ import { environment } from './../environments/environment'; templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) -export class AppComponent implements AfterViewInit, OnInit { +export class AppComponent implements OnInit { private ga: Function = (window).ga; - public progress: number = 0; - public publicRoutes: Navigation[] = [ - { - title: 'Homepage', - route: '/', - icon: 'home', - }, - ]; - public privateRoutes: Navigation[] = [ - { - title: 'My Projects', - route: '/projects', - icon: 'dashboard', - }, - { - title: 'Add Project', - route: '/projects/create', - icon: 'add_to_photos', - }, - { - title: 'Profile', - route: '/profile', - icon: 'person', - }, - ]; - public generalRoutes: Navigation[] = [ - { - title: 'Features', - route: '/features', - icon: 'poll', - }, - { - title: 'Help', - route: '/help', - icon: 'help_outline', - }, - // { - // title: 'Terms & Conditions', - // route: '/terms-and-conditions', - // icon: 'terms_page_icon', - // }, - // { - // title: 'Privacy', - // route: '/privacy', - // icon: 'privacy_page_icon', - // }, - ]; - public adminRoutes: Navigation[] = [ - { - title: 'List users', - route: '/admin/users', - icon: 'person', - }, - ]; - public version: string; - public isSmallScreen: boolean; - public menuTriger: boolean; - public sideNavMode: string; - @ViewChild('sidenav') public menu: MatSidenav; /** * Life cycle method - * @param _iconRegistry MatIconRegistry - * @param _domSanitizer DomSanitizer - * @param authService AuthenticationService - * @param activityService ActivityService - * @param breakpointObserver BreakpointObserver + * @param router Router */ constructor( - private authService: AuthenticationService, - private activityService: ActivityService, - private breakpointObserver: BreakpointObserver, private router: Router - - ) { - this.breakpointObserver - .observe([Breakpoints.XSmall]) - .subscribe((state: BreakpointState) => { - if (state.matches) { - this.menuTriger = true; - this.isSmallScreen = true; - this.sideNavMode = 'over'; - } else { - this.isSmallScreen = false; - this.sideNavMode = 'side'; - } - }); - - this.version = environment.version; - } + ) { } /** * Initializing the google analytics router events @@ -135,68 +41,4 @@ export class AppComponent implements AfterViewInit, OnInit { }); } - /** - * Life cycle after view init method - */ - ngAfterViewInit(): void { - this.activityService - .getProgressBar() - .pipe(delay(0)) - .subscribe((progress: number) => this.progress = progress); - } - - /** - * Return the profile - */ - public getProfile(): ProfileModel { - return this.authService.profile; - } - - /** - * Check if user is authenticated - */ - public isAuthenticated(): boolean { - return this.authService.isAuthenticated; - } - - /** - * Login in the system - */ - public login(): void { - this.authService.login(); - } - - /** - * Logout from the system - */ - public logout(): void { - this.authService.logout(); - } - - /** - * Close the menu - */ - public closeMenu(): void { - if (this.isSmallScreen) { - this.menu.opened = false; - } - } - - /** - * Open menu - * @param event Event - */ - public openMenu(event: Event): void { - event.stopPropagation(); - if (!this.isSmallScreen) { - this.menuTriger = !this.menuTriger; - } - } - - /** - * Show door bell - */ - public showDoorbell(): void { - (window).doorbell.show(); - } } diff --git a/web/src/app/shared/components/sidebar/sidebar.component.html b/web/src/app/shared/components/sidebar/sidebar.component.html new file mode 100644 index 000000000..7f3b42400 --- /dev/null +++ b/web/src/app/shared/components/sidebar/sidebar.component.html @@ -0,0 +1,176 @@ + + +
+ +
+ + + +
+ + {{ item.icon }} + + {{ item.title }} +
+ + + + + +
+ + {{ item.icon }} + + {{ item.title }} +
+ + + + + +
+ + {{ item.icon }} + + {{ item.title }} +
+ + + +
+ + vpn_key + + Login +
+ + +
+ + exit_to_app + + Sign out +
+ + + + +
+ + {{ item.icon }} + + {{ item.title }} +
+ + + + + + + +
+
+ + more_vert + + + format_list_bulleted + +
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+ more_vert +
+ +
+ +
+ +
+
+
+ + +
+
+
+
+ Login + vpn_key +
+
+ +
+
+
{{ isAuthenticated() ? getProfile().username : 'Welcome Guest' }}
+
+ + + + + + person + +
+
+
+ +
+ + + +
+ + +
+ Copyright © 2019 DashboardHub. All rights reserved ({{ version }}) +
+ + +
+ +
+
+ feedback + Feedback +
+
+
+
+ +
+ + + + diff --git a/web/src/app/shared/components/sidebar/sidebar.component.scss b/web/src/app/shared/components/sidebar/sidebar.component.scss new file mode 100644 index 000000000..5d342fb0d --- /dev/null +++ b/web/src/app/shared/components/sidebar/sidebar.component.scss @@ -0,0 +1,171 @@ +@import "~@angular/material/theming"; +@import "../../../../assets/scss/variable"; +@import "../../../../assets/scss/mixin.scss"; + +.sidenav-container { + height: 100%; + background-color: #eaeaea; +} + +.sidenav { + @include ellipsisText; + width: 60px; + background: $background-black-color; + transition-duration: 0.5s; + + &__open { + transition-duration: 0.5s; + width: 235px; + } + + .heading { + margin-top: 16px; + margin-left: -4px; + height: 60px; + cursor: pointer; + overflow: hidden; + white-space: nowrap; + + &__logo { + width: 240px; + overflow: hidden; + height: 32px; + } + + &__icon { + position: absolute; + right: -5px; + top: 23px; + + &__item { + color: $dark-grey-color; + transform: scale(1.5) + } + } + } + + .menu { + overflow: hidden; + + &__item { + font-size: 16px; + font-weight: lighter; + color: $dark-grey-color; + + &__active { + color: #fff; + } + + &__icon { + width: 25px; + height: 25px; + } + } + } +} + +.sidenav .mat-toolbar { + background: inherit; +} + +.app-toolbar { + position: relative; + + background: none; + + &__logo { + width: 140px; + padding-left: 24px; + } + + &__icon { + color: $dark-grey-color; + } + + &__menu { + cursor: pointer; + } + + &__profile-block { + font-size: 16px; + + &__avatar { + width: 40px; + height: 40px; + border-radius: 50%; + border: 1px solid $orange-2-color; + cursor: pointer; + margin-right: 5px !important; + + &__icon { + width: 40px; + height: 40px; + font-size: 35px; + background: $orange-2-color; + border: 1px solid $orange-2-color; + border-radius: 50%; + margin-right: 5px !important; + } + } + + &__icon { + cursor: pointer; + transform: scale(0.8); + margin-right: 5px !important; + } + + &__menu-icon { + cursor: pointer; + color: $dark-grey-color; + transform: scale(1.2); + margin-right: 5px !important; + } + + &__button { + font-size: 16px; + cursor: pointer; + } + } +} + +.content-container { + min-height: calc(100% - 128px); + overflow-x: hidden; + + @media ($mat-xsmall) { + min-height: calc(100% - 112px); + } +} + +.move-up { + margin-left: 0px !important; + + @media (min-width: $breakpoint-xs) { + + margin-left: 235px !important; + transition-duration: 0.5s; + + } +} + +.move-down { + margin-left: 0px !important; + + @media (min-width: $breakpoint-xs) { + margin-left: 60px !important; + transition-duration: 0.5s; + + + } +} + +.footer { + &__copyright { + text-align: center; + white-space: pre-wrap; + + @media (max-width: $breakpoint-sm) { + padding: 10px 0; + } + } +} diff --git a/web/src/app/shared/components/sidebar/sidebar.component.ts b/web/src/app/shared/components/sidebar/sidebar.component.ts new file mode 100644 index 000000000..853fe8670 --- /dev/null +++ b/web/src/app/shared/components/sidebar/sidebar.component.ts @@ -0,0 +1,180 @@ +// Core modules +import { Breakpoints, BreakpointObserver, BreakpointState } from '@angular/cdk/layout'; +import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core'; + +// Rxjs modules +import { MatSidenav } from '@angular/material'; +import { delay } from 'rxjs/operators'; + +// DashboardHub models and services +import { ActivityService, AuthenticationService } from '@core/services/index.service'; +import { Navigation, ProfileModel } from '@shared/models/index.model'; +import { environment } from 'src/environments/environment'; + +/** + * Sidebar component + */ +@Component({ + selector: 'dashboard-sidebar', + templateUrl: './sidebar.component.html', + styleUrls: ['./sidebar.component.scss'], +}) +export class SidebarComponent implements OnInit, AfterViewInit { + + public progress: number = 0; + public publicRoutes: Navigation[] = [ + { + title: 'Homepage', + route: '/', + icon: 'home', + }, + ]; + public privateRoutes: Navigation[] = [ + { + title: 'My Projects', + route: '/projects', + icon: 'dashboard', + }, + { + title: 'Add Project', + route: '/projects/create', + icon: 'add_to_photos', + }, + { + title: 'Profile', + route: '/profile', + icon: 'person', + }, + ]; + public generalRoutes: Navigation[] = [ + { + title: 'Features', + route: '/features', + icon: 'poll', + }, + { + title: 'Help', + route: '/help', + icon: 'help_outline', + }, + // { + // title: 'Terms & Conditions', + // route: '/terms-and-conditions', + // icon: 'terms_page_icon', + // }, + // { + // title: 'Privacy', + // route: '/privacy', + // icon: 'privacy_page_icon', + // }, + ]; + public adminRoutes: Navigation[] = [ + { + title: 'List users', + route: '/admin/users', + icon: 'person', + }, + ]; + public version: string; + public isSmallScreen: boolean; + public menuTriger: boolean; + public sideNavMode: string; + @ViewChild('sidenav') public menu: MatSidenav; + + /** + * Life cycle method + * @param authService AuthenticationService + * @param activityService ActivityService + * @param breakpointObserver BreakpointObserver + */ + constructor( + private authService: AuthenticationService, + private activityService: ActivityService, + private breakpointObserver: BreakpointObserver + ) { } + + /** + * Life cycle init method + */ + ngOnInit(): void { + this.breakpointObserver + .observe([Breakpoints.XSmall]) + .subscribe((state: BreakpointState) => { + if (state.matches) { + this.menuTriger = true; + this.isSmallScreen = true; + this.sideNavMode = 'over'; + } else { + this.isSmallScreen = false; + this.sideNavMode = 'side'; + } + }); + + this.version = environment.version; + } + + /** + * Life cycle after view init method + */ + ngAfterViewInit(): void { + this.activityService + .getProgressBar() + .pipe(delay(0)) + .subscribe((progress: number) => this.progress = progress); + } + + /** + * Return the profile + */ + public getProfile(): ProfileModel { + return this.authService.profile; + } + + /** + * Check if user is authenticated + */ + public isAuthenticated(): boolean { + return this.authService.isAuthenticated; + } + + /** + * Login in the system + */ + public login(): void { + this.authService.login(); + } + + /** + * Logout from the system + */ + public logout(): void { + this.authService.logout(); + } + + /** + * Close the menu + */ + public closeMenu(): void { + if (this.isSmallScreen) { + this.menu.opened = false; + } + } + + /** + * Open menu + * @param event Event + */ + public openMenu(event: Event): void { + event.stopPropagation(); + if (!this.isSmallScreen) { + this.menuTriger = !this.menuTriger; + } + } + + /** + * Show door bell + */ + public showDoorbell(): void { + (window).doorbell.show(); + } +} diff --git a/web/src/app/shared/shared.module.ts b/web/src/app/shared/shared.module.ts index 75f929f36..0101e9281 100644 --- a/web/src/app/shared/shared.module.ts +++ b/web/src/app/shared/shared.module.ts @@ -14,6 +14,7 @@ import { PipesModule } from '../pipes/pipes.module'; import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.component'; import { PrivatePublicProjectComponent } from './components/private-public-project/private-public-project.component'; import { ProjectsListComponent } from './components/projects-list/projects-list.component'; +import { SidebarComponent } from './components/sidebar/sidebar.component'; import { DialogConfirmationComponent } from './dialog/confirmation/dialog-confirmation.component'; import { DialogListComponent } from './dialog/list/dialog-list.component'; import { MarkdownDirective } from './directives/markdown.directive'; @@ -26,6 +27,7 @@ import { MarkdownDirective } from './directives/markdown.directive'; ProjectsListComponent, PrivatePublicProjectComponent, BreadcrumbComponent, + SidebarComponent, ], imports: [ CommonModule, @@ -45,6 +47,7 @@ import { MarkdownDirective } from './directives/markdown.directive'; BreadcrumbComponent, ProjectsListComponent, PrivatePublicProjectComponent, + SidebarComponent, ], entryComponents: [ DialogConfirmationComponent,