Skip to content

Commit bc09d89

Browse files
franckevvafranckevva
committed
feat(right-sidebar): example of dashboard with right sidebar
1 parent 2e90dbf commit bc09d89

30 files changed

+360
-8
lines changed

‎src/app/app-routing.module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { LayoutsModule } from './layouts';
55
import { CommonLayoutComponent } from './layouts/common-layout';
66
import { ChartsComponent } from './pages/charts';
77
import { DashboardComponent } from './pages/dashboard';
8+
import { Dashboard2Component } from './pages/dashboard2';
89
import { FormsComponent } from './pages/forms';
910

1011
@NgModule({
@@ -14,6 +15,7 @@ import { FormsComponent } from './pages/forms';
1415
{ path: '', redirectTo: 'app/dashboard', pathMatch: 'full' },
1516
{ path: 'app', component: CommonLayoutComponent, children: [
1617
{ path: 'dashboard', component: DashboardComponent, pathMatch: 'full' },
18+
{ path: 'dashboard-custom', component: Dashboard2Component, pathMatch: 'full' },
1719
{ path: 'forms', component: FormsComponent, pathMatch: 'full' },
1820
{ path: 'charts', component: ChartsComponent, pathMatch: 'full' },
1921
{ path: '**', redirectTo: '/pages/404' },

‎src/app/app.module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { AppRoutingModule } from './app-routing.module';
55
import { AppComponent } from './app.component';
66
import { ChartsModule } from './pages/charts';
77
import { DashboardModule } from './pages/dashboard';
8+
import { Dashboard2Module } from './pages/dashboard2';
89
import { FormsModule } from './pages/forms';
910

1011
@NgModule({
@@ -13,6 +14,7 @@ import { FormsModule } from './pages/forms';
1314
BrowserModule,
1415
AppRoutingModule,
1516
DashboardModule,
17+
Dashboard2Module,
1618
FormsModule,
1719
ChartsModule,
1820
],

‎src/app/components/sidebar/sidebar.component.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ import { SidebarComponent as BaseSidebarComponent } from 'theme/components/sideb
1010
export class SidebarComponent extends BaseSidebarComponent {
1111
public title = 'darkboard';
1212
public menu = [
13-
{ name: 'Dashboard', link: '/app/dashboard', icon: 'dashboard' },
13+
{ name: 'Classic Dashboard', link: '/app/dashboard', icon: 'dashboard' },
14+
{ name: 'Custom Dashboard', link: '/app/dashboard-custom', icon: 'dashboard' },
1415
{
1516
name: 'UI',
1617
children: [

‎src/app/pages/charts/charts.module.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,5 +29,8 @@ import { StackedBarChartComponent } from './stacked-bar-chart';
2929
StackedBarChartComponent,
3030
LinePlusBarChartComponent,
3131
],
32+
exports: [
33+
CountryStatisticsChartComponent,
34+
],
3235
})
3336
export class ChartsModule { }

‎src/app/pages/dashboard/dashboard.module.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,8 @@ import { WeatherComponent } from './weather';
3131
TodoListComponent,
3232
TrendingComponent,
3333
],
34+
exports: [
35+
WeatherComponent,
36+
],
3437
})
3538
export class DashboardModule { }

‎src/app/pages/dashboard2/dashboard2.component.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<base-right-sidebar-layout>
2+
<base-right-sidebar-content>
3+
<div class="mdl-grid">
4+
<div class="mdl-cell mdl-cell--12-col-desktop mdl-cell--12-col-tablet mdl-cell--12">
5+
<app-map-advanced></app-map-advanced>
6+
</div>
7+
8+
<div class="mdl-cell mdl-cell--4-col-desktop mdl-cell--5-col-tablet mdl-cell--12-col-phone">
9+
<base-card>
10+
<base-card-title>
11+
<h2 class="mdl-card__title-text">Country Statistics</h2>
12+
</base-card-title>
13+
<base-card-body>
14+
<app-country-statistics-chart></app-country-statistics-chart>
15+
</base-card-body>
16+
</base-card>
17+
</div>
18+
19+
<div class="mdl-cell mdl-cell--4-col-desktop mdl-cell--5-col-tablet mdl-cell--12-col-phone">
20+
<app-weather></app-weather>
21+
</div>
22+
</div>
23+
</base-right-sidebar-content>
24+
25+
<base-right-sidebar [title]="'Filters'">
26+
<app-filters></app-filters>
27+
</base-right-sidebar>
28+
29+
</base-right-sidebar-layout>
30+

‎src/app/pages/dashboard2/dashboard2.component.scss

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
app-dashboard-2 {
2+
app-map-advanced {
3+
margin: -0.5rem !important;
4+
5+
&.map-advanced {
6+
min-height: 500px;
7+
8+
.map__window {
9+
height: 500px;
10+
}
11+
}
12+
}
13+
14+
base-right-sidebar {
15+
.mdl-card__title-text {
16+
text-transform: uppercase;
17+
font-size: 14px;
18+
line-height: 16px;
19+
}
20+
}
21+
}

‎src/app/pages/dashboard2/dashboard2.component.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Component } from '@angular/core';
2+
3+
import { UpgradableComponent } from 'theme/components/upgradable';
4+
5+
@Component({
6+
selector: 'app-dashboard-2',
7+
styleUrls: ['./dashboard2.component.scss'],
8+
templateUrl: './dashboard2.component.html',
9+
})
10+
export class Dashboard2Component extends UpgradableComponent {
11+
}

‎src/app/pages/dashboard2/dashboard2.module.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { CommonModule } from '@angular/common';
2+
import { NgModule } from '@angular/core';
3+
import { FormsModule } from '@angular/forms';
4+
5+
import { MaterialAngularSelectModule } from 'material-angular-select';
6+
import { ThemeModule } from 'theme';
7+
8+
import { ChartsModule } from '../charts/charts.module';
9+
import { DashboardModule } from '../dashboard/dashboard.module';
10+
import { MapsModule } from '../maps/maps.module';
11+
import { Dashboard2Component } from './dashboard2.component';
12+
import { FiltersComponent } from './filters/filters.component';
13+
14+
@NgModule({
15+
imports: [
16+
CommonModule,
17+
ThemeModule,
18+
FormsModule,
19+
DashboardModule,
20+
MapsModule,
21+
ChartsModule,
22+
MaterialAngularSelectModule,
23+
],
24+
declarations: [
25+
Dashboard2Component,
26+
FiltersComponent,
27+
],
28+
})
29+
export class Dashboard2Module {}

‎src/app/pages/dashboard2/filters/filters.component.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<div class="mdl-cell mdl-cell--12-col">
2+
<material-angular-select [data]="languages"
3+
[name]="'language'"
4+
[label]="'Language'"
5+
[currentValue]="currentLanguage"></material-angular-select>
6+
</div>
7+
8+
<div class="mdl-cell mdl-cell--12-col">
9+
<material-angular-select [data]="currencies"
10+
[name]="'currency'"
11+
[label]="'Currency'"
12+
[currentValue]="currentCurrency"></material-angular-select>
13+
</div>
14+
15+
<div class="mdl-cell mdl-cell--12-col">
16+
<material-angular-select [data]="['Male', 'Female']"
17+
[name]="'gender'"
18+
[label]="'Gender'"
19+
[currentValue]="'Male'"></material-angular-select>
20+
</div>

‎src/app/pages/dashboard2/filters/filters.component.scss

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
app-filters {
2+
material-angular-select {
3+
.mdl-menu__container .mdl-menu .mdl-menu__item,
4+
.mdl-textfield__input {
5+
font-size: 13px;
6+
}
7+
8+
&.mdl-textfield {
9+
width: 100%;
10+
max-width: 240px;
11+
}
12+
13+
.mdl-textfield__input {
14+
line-height: 20px;
15+
text-transform: capitalize;
16+
}
17+
18+
.mdl-menu__item {
19+
text-transform: capitalize;
20+
}
21+
}
22+
}

‎src/app/pages/dashboard2/filters/filters.component.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-filters',
5+
styleUrls: ['./filters.component.scss'],
6+
templateUrl: './filters.component.html',
7+
})
8+
export class FiltersComponent {
9+
public readonly currencies = ['BYN', 'EUR', 'USD', 'RUR', 'PLN'];
10+
public currentCurrency = 'BYN';
11+
12+
public readonly languages = ['Belarusian', 'English', 'USD', 'German', 'Polish'];
13+
public currentLanguage = 'Belarusian';
14+
}

‎src/app/pages/dashboard2/filters/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { FiltersComponent } from './filters.component';

‎src/app/pages/dashboard2/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { Dashboard2Component } from './dashboard2.component';
2+
export { Dashboard2Module } from './dashboard2.module';

‎src/app/pages/maps/map-advanced/map-advanced.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="mdl-cell mdl-cell--9-col-desktop mdl-cell--12-col-tablet mdl-cell--12-col-phone">
1+
<div class="mdl-cell mdl-cell--8-col-desktop mdl-cell--12-col-tablet mdl-cell--12-col-phone">
22
<base-card>
33
<div #gmap class="mdl-card--expand map__window">
44
</div>

‎src/app/pages/maps/maps.module.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@ import { MapsService } from './maps.service';
1818
MapComponent,
1919
MapAdvancedComponent,
2020
],
21+
exports: [
22+
MapAdvancedComponent,
23+
],
2124
providers: [MapsService],
2225
})
2326
export class MapsModule { }

‎src/theme/components/right-sidebar/content/content.component.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'base-right-sidebar-content',
5+
template: '<ng-content></ng-content>',
6+
})
7+
export class RightSidebarContentComponent {
8+
}

‎src/theme/components/right-sidebar/content/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { RightSidebarContentComponent } from './content.component';

‎src/theme/components/right-sidebar/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { RightSidebarModule } from './right-sidebar.module';

‎src/theme/components/right-sidebar/right-sidebar.component.scss

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
@import '~theme/helpers';
2+
3+
base-right-sidebar-layout {
4+
display: block;
5+
6+
base-right-sidebar-content {
7+
display: block;
8+
width: calc(100% - #{$right-sidebar-width});
9+
}
10+
11+
base-right-sidebar {
12+
display: block;
13+
width: $right-sidebar-width;
14+
}
15+
16+
@media screen and (max-width: $phone-breakpoint) {
17+
base-right-sidebar-content {
18+
width: 100%;
19+
}
20+
21+
base-right-sidebar {
22+
position: fixed;
23+
right: 8px;
24+
z-index: 1000;
25+
}
26+
}
27+
}

‎src/theme/components/right-sidebar/right-sidebar.component.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Component, HostBinding, Input } from '@angular/core';
2+
3+
import { UpgradableComponent } from 'theme/components/upgradable';
4+
5+
@Component({
6+
selector: 'base-right-sidebar-layout',
7+
styleUrls: ['./right-sidebar.component.scss'],
8+
template: `
9+
<ng-content></ng-content>`,
10+
})
11+
export class RightSidebarLayoutComponent extends UpgradableComponent {
12+
@Input() public title;
13+
14+
@HostBinding('class.mdl-grid') private readonly mdlGrid = true;
15+
@HostBinding('class.mdl-grid--no-spacing') private readonly mdlGridNoSpacing = true;
16+
}

‎src/theme/components/right-sidebar/right-sidebar.module.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { CommonModule } from '@angular/common';
2+
import { NgModule } from '@angular/core';
3+
4+
import { CardModule } from '../card/card.module';
5+
import { RightSidebarContentComponent } from './content';
6+
import { RightSidebarLayoutComponent } from './right-sidebar.component';
7+
import { RightSidebarComponent } from './sidebar';
8+
9+
@NgModule({
10+
imports: [
11+
CommonModule,
12+
CardModule,
13+
],
14+
declarations: [
15+
RightSidebarLayoutComponent,
16+
RightSidebarComponent,
17+
RightSidebarContentComponent,
18+
],
19+
exports: [
20+
RightSidebarLayoutComponent,
21+
RightSidebarContentComponent,
22+
RightSidebarComponent,
23+
],
24+
})
25+
export class RightSidebarModule { }

‎src/theme/components/right-sidebar/sidebar/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { RightSidebarComponent } from './sidebar.component';

‎src/theme/components/right-sidebar/sidebar/sidebar.component.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<div *ngIf="isClosed" class="open-icon">
2+
<button class="mdl-button mdl-js-button mdl-button--icon mdl-button--raised button--colored-teal mdl-js-ripple-effect" (click)="openSidebar()">
3+
<i class="material-icons">close</i>
4+
</button>
5+
</div>
6+
7+
<base-card *ngIf="!isClosed">
8+
<div class="right-sidebar-wrap">
9+
<base-card-title>
10+
<h2 class="mdl-card__title-text">{{ title }}</h2>
11+
<div class="close">
12+
<button class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect" (click)="closeSidebar()">
13+
<i class="material-icons">close</i>
14+
</button>
15+
</div>
16+
</base-card-title>
17+
<div class="right-sidebar-body">
18+
<ng-content></ng-content>
19+
</div>
20+
</div>
21+
</base-card>

0 commit comments

Comments
 (0)