Skip to content

Commit 3bb1e3a

Browse files
ByPortByPort
committed
feat(pages): add right sidebar page
1 parent 87bcd7c commit 3bb1e3a

18 files changed

+132
-10
lines changed

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.mdl-navigation base-menu-item:nth-child(2) i.material-icons {
2+
transform: rotate(180deg);
3+
}

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ import { SidebarComponent as BaseSidebarComponent } from 'theme/components/sideb
44

55
@Component({
66
selector: 'app-sidebar',
7-
styleUrls: ['../../../theme/components/sidebar/sidebar.component.scss'],
7+
styleUrls: ['../../../theme/components/sidebar/sidebar.component.scss', './sidebar.component.scss'],
88
templateUrl: '../../../theme/components/sidebar/sidebar.component.html',
99
})
1010
export class SidebarComponent extends BaseSidebarComponent {
1111
public title = 'darkboard';
1212
public menu = [
1313
{ name: 'Classic Dashboard', link: '/app/dashboard', icon: 'dashboard' },
14-
{ name: 'Custom Dashboard', link: '/app/dashboard-custom', icon: 'dashboard' },
14+
{ name: 'Custom Dashboard', link: '/app/dashboard-custom', icon: 'view_quilt' },
1515
{
1616
name: 'UI',
1717
children: [
@@ -27,6 +27,10 @@ export class SidebarComponent extends BaseSidebarComponent {
2727
name: ui[0].toUpperCase() + ui.slice(1),
2828
link: `/ui/${ui}`,
2929
})),
30+
{
31+
name: 'Right sidebar',
32+
link: '/ui/right-sidebar',
33+
},
3034
],
3135
icon: 'view_comfy',
3236
},

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import { WeatherComponent } from './weather';
3333
],
3434
exports: [
3535
WeatherComponent,
36+
TrendingComponent,
3637
],
3738
})
3839
export class DashboardModule { }

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ <h2 class="mdl-card__title-text">Country Statistics</h2>
1919
<div class="mdl-cell mdl-cell--4-col-desktop mdl-cell--5-col-tablet mdl-cell--12-col-phone">
2020
<app-weather></app-weather>
2121
</div>
22+
23+
<div class="mdl-cell mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--12-col-phone">
24+
<app-trending></app-trending>
25+
</div>
2226
</div>
2327
</base-right-sidebar-content>
2428

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
app-dashboard-2 {
22
app-map-advanced {
3-
margin: -0.5rem !important;
3+
margin: 0 !important;
44

55
&.map-advanced {
66
min-height: 500px;

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

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
<div class="mdl-cell mdl-cell--8-col-desktop mdl-cell--12-col-tablet mdl-cell--12-col-phone">
2-
<base-card>
3-
<div #gmap class="mdl-card--expand map__window">
4-
</div>
5-
</base-card>
6-
</div>
1+
<base-card>
2+
<div #gmap class="mdl-card--expand map__window"></div>
3+
</base-card>

‎src/app/pages/ui/right-sidebar/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/ui/right-sidebar/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/ui/right-sidebar/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/ui/right-sidebar/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/ui/right-sidebar/index.ts

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

‎src/app/pages/ui/right-sidebar/right-sidebar.component.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<base-right-sidebar-layout>
2+
<base-right-sidebar-content>
3+
</base-right-sidebar-content>
4+
5+
<base-right-sidebar [title]="'Filters'">
6+
<app-filters></app-filters>
7+
</base-right-sidebar>
8+
9+
</base-right-sidebar-layout>
10+

‎src/app/pages/ui/right-sidebar/right-sidebar.component.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
base-right-sidebar {
2+
.mdl-card__title-text {
3+
text-transform: uppercase;
4+
font-size: 14px;
5+
line-height: 16px;
6+
}
7+
}

‎src/app/pages/ui/right-sidebar/right-sidebar.component.ts

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

‎src/app/pages/ui/right-sidebar/right-sidebar.module.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
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 { FiltersComponent } from './filters/filters.component';
9+
import { RightSidebarComponent } from './right-sidebar.component';
10+
11+
@NgModule({
12+
imports: [
13+
CommonModule,
14+
ThemeModule,
15+
FormsModule,
16+
MaterialAngularSelectModule,
17+
],
18+
declarations: [
19+
RightSidebarComponent,
20+
FiltersComponent,
21+
],
22+
})
23+
export class RightSidebarModule {}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { ColorsComponent } from './colors';
99
import { ComponentsComponent } from './components';
1010
import { FormsComponent } from './forms';
1111
import { IconsComponent } from './icons';
12+
import { RightSidebarComponent } from './right-sidebar';
1213
import { TablesComponent } from './tables';
1314
import { TypographyComponent } from './typography';
1415

@@ -27,6 +28,7 @@ import { TypographyComponent } from './typography';
2728
{ path: 'typography', component: TypographyComponent, pathMatch: 'full' },
2829
{ path: 'tables', component: TablesComponent, pathMatch: 'full' },
2930
{ path: 'components', component: ComponentsComponent, pathMatch: 'full' },
31+
{ path: 'right-sidebar', component: RightSidebarComponent, pathMatch: 'full' },
3032
],
3133
},
3234
]),

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { ColorsComponent } from './colors';
1010
import { ComponentsModule } from './components';
1111
import { FormsComponent } from './forms';
1212
import { IconsComponent } from './icons';
13+
import { RightSidebarModule } from './right-sidebar';
1314
import { TablesComponent, TablesService } from './tables';
1415
import { TypographyComponent } from './typography';
1516
import { UIRoutingModule } from './ui-routing.module';
@@ -21,6 +22,7 @@ import { UIRoutingModule } from './ui-routing.module';
2122
ThemeModule,
2223
ComponentsModule,
2324
MaterialAngularSelectModule,
25+
RightSidebarModule,
2426
],
2527
declarations: [
2628
ButtonsComponent,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ base-right-sidebar {
2727
}
2828

2929
.mdl-card__title {
30-
padding-left: 0.5rem;
30+
padding-left: 8px;
3131
}
3232

3333
.mdl-card__supporting-text {

0 commit comments

Comments
 (0)