Skip to content

Commit b291bee

Browse files
tomastrajantomastrajan
committed
feat(layout): add base layout
1 parent ec77e01 commit b291bee

40 files changed

+539
-174
lines changed

‎.prettierrc

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
{
2-
"singleQuote": true,
3-
"printWidth": 120
4-
}
1+
{
2+
"singleQuote": true,
3+
"printWidth": 80
4+
}

‎angular.json

+14-6
Original file line numberDiff line numberDiff line change
@@ -27,18 +27,20 @@
2727
"lint": {
2828
"builder": "@angular-devkit/build-angular:tslint",
2929
"options": {
30-
"tsConfig": ["projects/elements/tsconfig.lib.json", "projects/elements/tsconfig.spec.json"],
30+
"tsConfig": [
31+
"projects/elements/tsconfig.lib.json",
32+
"projects/elements/tsconfig.spec.json"
33+
],
3134
"exclude": ["**/node_modules/**"]
3235
}
3336
}
3437
}
3538
},
3639
"elements-demo": {
3740
"projectType": "application",
38-
"schematics": {},
3941
"root": "projects/elements-demo",
4042
"sourceRoot": "projects/elements-demo/src",
41-
"prefix": "app",
43+
"prefix": "demo",
4244
"architect": {
4345
"build": {
4446
"builder": "@angular-devkit/build-angular:browser",
@@ -51,7 +53,10 @@
5153
"polyfills": "projects/elements-demo/src/polyfills.ts",
5254
"tsConfig": "projects/elements-demo/tsconfig.app.json",
5355
"aot": false,
54-
"assets": ["projects/elements-demo/src/favicon.ico", "projects/elements-demo/src/assets"],
56+
"assets": [
57+
"projects/elements-demo/src/favicon.ico",
58+
"projects/elements-demo/src/assets"
59+
],
5560
"styles": ["projects/elements-demo/src/styles.scss"],
5661
"scripts": []
5762
},
@@ -106,7 +111,10 @@
106111
"polyfills": "projects/elements-demo/src/polyfills.ts",
107112
"tsConfig": "projects/elements-demo/tsconfig.spec.json",
108113
"karmaConfig": "projects/elements-demo/karma.conf.js",
109-
"assets": ["projects/elements-demo/src/favicon.ico", "projects/elements-demo/src/assets"],
114+
"assets": [
115+
"projects/elements-demo/src/favicon.ico",
116+
"projects/elements-demo/src/assets"
117+
],
110118
"styles": ["projects/elements-demo/src/styles.scss"],
111119
"scripts": []
112120
}
@@ -137,7 +145,7 @@
137145
}
138146
}
139147
},
140-
"defaultProject": "elements",
148+
"defaultProject": "elements-demo",
141149
"schematics": {
142150
"@schematics/angular:component": {
143151
"style": "scss"

‎projects/elements-demo/src/app/app-routing.module.ts

+31-30
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,31 @@
1-
import { NgModule } from '@angular/core';
2-
import { Routes, RouterModule } from '@angular/router';
3-
4-
import { HomeComponent } from './features/home/home/home.component';
5-
import { EagerComponent } from './features/eager/eager/eager.component';
6-
7-
const routes: Routes = [
8-
{
9-
path: 'home',
10-
component: HomeComponent
11-
},
12-
{
13-
path: 'eager',
14-
component: EagerComponent
15-
},
16-
{
17-
path: 'lazy',
18-
loadChildren: () => import('./features/lazy/lazy.module').then(m => m.LazyModule)
19-
},
20-
{
21-
path: '**',
22-
redirectTo: 'home'
23-
}
24-
];
25-
26-
@NgModule({
27-
imports: [RouterModule.forRoot(routes)],
28-
exports: [RouterModule]
29-
})
30-
export class AppRoutingModule {}
1+
import { NgModule } from '@angular/core';
2+
import { Routes, RouterModule } from '@angular/router';
3+
4+
import { HomeComponent } from './features/home/home/home.component';
5+
import { EagerComponent } from './features/eager/eager/eager.component';
6+
7+
const routes: Routes = [
8+
{
9+
path: 'home',
10+
component: HomeComponent
11+
},
12+
{
13+
path: 'eager',
14+
component: EagerComponent
15+
},
16+
{
17+
path: 'lazy',
18+
loadChildren: () =>
19+
import('./features/lazy/lazy.module').then(m => m.LazyModule)
20+
},
21+
{
22+
path: '**',
23+
redirectTo: 'home'
24+
}
25+
];
26+
27+
@NgModule({
28+
imports: [RouterModule.forRoot(routes)],
29+
exports: [RouterModule]
30+
})
31+
export class AppRoutingModule {}

‎projects/elements-demo/src/app/app.component.html

+24-26
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,27 @@
1-
<mat-toolbar color="primary">
2-
<span>@angular-extensions/elements demo</span>
1+
<demo-toolbar></demo-toolbar>
2+
<mat-sidenav-container hasBackdrop="false">
3+
<mat-sidenav mode="push" opened>
4+
<demo-navigation></demo-navigation>
5+
</mat-sidenav>
6+
<mat-sidenav-content>
7+
<router-outlet></router-outlet>
8+
</mat-sidenav-content>
9+
</mat-sidenav-container>
10+
<demo-footer></demo-footer>
311

4-
<span class="spacer"></span>
5-
<button mat-flat-button routerLink="home" routerLinkActive="active" color="primary">Home</button>
6-
<button mat-flat-button routerLink="eager" routerLinkActive="active" color="primary">Eager</button>
7-
<button mat-flat-button routerLink="lazy" routerLinkActive="active" color="primary">Lazy</button>
8-
<a mat-icon-button href="https://github.com/angular-extensions/elements" target="_blank">
9-
<mat-icon svgIcon="github" aria-hidden="false" aria-label="GitHub"></mat-icon>
10-
</a>
11-
</mat-toolbar>
12+
<!-- <p>Parent simple: {{ simple }}</p>-->
13+
<!-- <p>Parent complex: {{ complex | json }}</p>-->
1214

13-
<router-outlet></router-outlet>
14-
<p>Parent simple: {{ simple }}</p>
15-
<p>Parent complex: {{ complex | json }}</p>
15+
<!-- <ng-template #loading>-->
16+
<!-- <p>Loading...</p>-->
17+
<!-- </ng-template>-->
1618

17-
<ng-template #loading>
18-
<p>Loading...</p>
19-
</ng-template>
20-
21-
<some-element
22-
*axLazyElement="'assets/some-element.js'; loading: loading"
23-
[simple]="simple"
24-
[complex]="complex"
25-
(simpleChange)="onSimpleChange($event.detail)"
26-
(complexChange)="onComplexChange($event.detail)"
27-
>
28-
<p>Projected content</p>
29-
</some-element>
19+
<!-- <some-element-->
20+
<!-- *axLazyElement="'assets/some-element.js'; loading: loading"-->
21+
<!-- [simple]="simple"-->
22+
<!-- [complex]="complex"-->
23+
<!-- (simpleChange)="onSimpleChange($event.detail)"-->
24+
<!-- (complexChange)="onComplexChange($event.detail)"-->
25+
<!-- >-->
26+
<!-- <p>Projected content</p>-->
27+
<!-- </some-element>-->

‎projects/elements-demo/src/app/app.component.scss

+10-7
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1-
.spacer {
2-
flex: 1 0 auto;
3-
}
4-
5-
button {
6-
margin: 0 0 0 10px;
7-
}
1+
:host {
2+
height: 100%;
3+
width: 100%;
4+
display: flex;
5+
flex-direction: column;
6+
7+
mat-sidenav-container {
8+
flex: 1 0 auto;
9+
}
10+
}

‎projects/elements-demo/src/app/app.component.scss-theme.scss

+17-17
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
@import '~@angular/material/theming';
2-
3-
@mixin app-component-theme($theme) {
4-
$primary: map-get($theme, primary);
5-
$accent: map-get($theme, accent);
6-
$warn: map-get($theme, warn);
7-
$foreground: map-get($theme, foreground);
8-
$background: map-get($theme, background);
9-
10-
mat-toolbar {
11-
button {
12-
&.active {
13-
background-color: mat-color($primary, lighter) !important;
14-
}
15-
}
16-
}
17-
}
1+
@import '~@angular/material/theming';
2+
3+
@mixin demo-root-component-theme($theme) {
4+
$primary: map-get($theme, primary);
5+
$accent: map-get($theme, accent);
6+
$warn: map-get($theme, warn);
7+
$foreground: map-get($theme, foreground);
8+
$background: map-get($theme, background);
9+
10+
mat-toolbar {
11+
button {
12+
&.active {
13+
background-color: mat-color($primary, lighter) !important;
14+
}
15+
}
16+
}
17+
}

‎projects/elements-demo/src/app/app.component.ts

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
import { Component, OnInit } from '@angular/core';
2+
import { FlatTreeControl } from '@angular/cdk/tree';
23

34
@Component({
4-
selector: 'app-root',
5+
selector: 'demo-root',
56
templateUrl: './app.component.html',
67
styleUrls: ['./app.component.scss']
78
})
89
export class AppComponent implements OnInit {
10+
treeControl = new FlatTreeControl<any>(
11+
node => node.level,
12+
node => node.expandable
13+
);
14+
915
simple = 'simple';
1016
complex = { id: 1 };
1117

‎projects/elements-demo/src/app/app.module.ts

+10-18
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
import { BrowserModule, DomSanitizer } from '@angular/platform-browser';
1+
import { BrowserModule } from '@angular/platform-browser';
2+
import { HttpClientModule } from '@angular/common/http';
23
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
34
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
4-
import { MatButtonModule, MatIconModule, MatIconRegistry, MatToolbarModule } from '@angular/material';
5-
import { HttpClientModule } from '@angular/common/http';
65

76
import { LazyElementsModule } from '../../../elements/src/lib/lazy-elements/lazy-elements.module';
87

9-
import { AppComponent } from './app.component';
10-
import { AppRoutingModule } from './app-routing.module';
8+
import { CoreModule } from './core/core.module';
9+
import { SharedModule } from './shared/shared.module';
1110
import { HomeModule } from './features/home/home.module';
1211
import { EagerModule } from './features/eager/eager.module';
12+
import { AppRoutingModule } from './app-routing.module';
13+
14+
import { AppComponent } from './app.component';
1315

1416
@NgModule({
1517
schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -20,27 +22,17 @@ import { EagerModule } from './features/eager/eager.module';
2022
BrowserAnimationsModule,
2123
HttpClientModule,
2224

23-
// material
24-
MatToolbarModule,
25-
MatButtonModule,
26-
MatIconModule,
27-
2825
// the library module
2926
LazyElementsModule,
3027

3128
// local
29+
CoreModule,
30+
SharedModule,
3231
AppRoutingModule,
3332
HomeModule,
3433
EagerModule
3534
],
3635
providers: [],
3736
bootstrap: [AppComponent]
3837
})
39-
export class AppModule {
40-
constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer) {
41-
this.matIconRegistry.addSvgIcon(
42-
'github',
43-
this.domSanitizer.bypassSecurityTrustResourceUrl('assets/logo/github.svg')
44-
);
45-
}
46-
}
38+
export class AppModule {}

‎projects/elements-demo/src/app/core/core.module.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { NgModule } from '@angular/core';
2+
import { RouterModule } from '@angular/router';
3+
4+
import { SharedModule } from '../shared/shared.module';
5+
6+
import { ToolbarComponent } from './layout/toolbar/toolbar.component';
7+
import { NavigationComponent } from './layout/navigation/navigation.component';
8+
import { FooterComponent } from './layout/footer/footer.component';
9+
10+
@NgModule({
11+
declarations: [ToolbarComponent, NavigationComponent, FooterComponent],
12+
imports: [RouterModule, SharedModule],
13+
exports: [ToolbarComponent, NavigationComponent, FooterComponent]
14+
})
15+
export class CoreModule {}

‎projects/elements-demo/src/app/core/layout/footer/footer.component.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<span>© {{ year }}</span>
2+
<a
3+
mat-icon-button
4+
class="signature"
5+
href="https://twitter.com/tomastrajan"
6+
target="_blank"
7+
>
8+
<mat-icon
9+
svgIcon="twitter"
10+
aria-hidden="false"
11+
aria-label="Twitter"
12+
></mat-icon>
13+
@tomastrajan
14+
</a>
15+
<span>🚀 {{ version }}</span>

‎projects/elements-demo/src/app/core/layout/footer/footer.component.scss

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
:host {
2+
padding: 20px;
3+
display: flex;
4+
align-items: center;
5+
text-align: center;
6+
7+
.signature {
8+
flex: 1 0 auto;
9+
}
10+
}

‎projects/elements-demo/src/app/core/layout/footer/footer.component.scss-theme.scss

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
@import '~@angular/material/theming';
2+
3+
@mixin demo-footer-component-theme($theme) {
4+
$primary: map-get($theme, primary);
5+
$accent: map-get($theme, accent);
6+
$warn: map-get($theme, warn);
7+
$foreground: map-get($theme, foreground);
8+
$background: map-get($theme, background);
9+
10+
demo-footer {
11+
color: mat-color($primary, lighter-contrast);
12+
background-color: mat-color($primary, lighter);
13+
}
14+
}

‎projects/elements-demo/src/app/core/layout/footer/footer.component.spec.ts

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
import { HttpClientTestingModule } from '@angular/common/http/testing';
3+
4+
import { SharedModule } from '../../../shared/shared.module';
5+
6+
import { FooterComponent } from './footer.component';
7+
8+
describe('FooterComponent', () => {
9+
let component: FooterComponent;
10+
let fixture: ComponentFixture<FooterComponent>;
11+
12+
beforeEach(async(() => {
13+
TestBed.configureTestingModule({
14+
imports: [HttpClientTestingModule, SharedModule],
15+
declarations: [FooterComponent]
16+
}).compileComponents();
17+
}));
18+
19+
beforeEach(() => {
20+
fixture = TestBed.createComponent(FooterComponent);
21+
component = fixture.componentInstance;
22+
fixture.detectChanges();
23+
});
24+
25+
it('should create', () => {
26+
expect(component).toBeTruthy();
27+
});
28+
});

0 commit comments

Comments
 (0)