Skip to content

Commit f0dfd16

Browse files
SplaktarSplaktar
committed
refactor: fix file structure so that schematics work. add Material/CDK components
1 parent 6b6f4ec commit f0dfd16

27 files changed

+456
-36
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@ The following steps will configure a module that loads `$templateCache` at build
4343

4444
- `gulp-angular-templatecache` automates `$templateCache` loading. See simple [gulpfile](gulpfile.ts).
4545
- `gulp-htmlmin` minifies the templates before putting them in the `$templateCache`
46-
- The output goes in [src/angularjs/templates/templates.js](src/angularjs/templates/templates.js).
47-
- The [src/angularjs/templates/index.js](src/angularjs/templates/index.js) file sets up a module.
46+
- The output goes in [src/app/angularjs/templates/templates.js](src/app/angularjs/templates/templates.js).
47+
- The [src/app/angularjs/templates/index.js](src/app/angularjs/templates/index.js) file sets up a module.
4848
- Then we import the module and use the `'templates'` string in our AngularJS module creation.
4949

5050
## TODO

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

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎src/angular/app.component.html‎ renamed to ‎src/app/angular/app.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ <h2>{{ name }} Demo</h2>
2626
Components built for Angular version 9
2727
</mat-panel-description>
2828
</mat-expansion-panel-header>
29-
<p>Coming soon...</p>
29+
<app-tabs></app-tabs>
3030
</mat-expansion-panel>
3131
</mat-accordion>
3232
<br>

‎src/angular/app.component.scss‎ renamed to ‎src/app/angular/app.component.scss‎

File renamed without changes.

‎src/angular/app.component.ts‎ renamed to ‎src/app/angular/app.component.ts‎

File renamed without changes.

‎src/app/angular/buttons/buttons.component.html‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<section>
2+
<div class="example-label">Basic</div>
3+
<div class="example-button-row">
4+
<button mat-button>Basic</button>
5+
<button mat-button color="primary">Primary</button>
6+
<button mat-button color="accent">Accent</button>
7+
<button mat-button color="warn">Warn</button>
8+
<button mat-button disabled>Disabled</button>
9+
<a mat-button href="https://www.google.com/" target="_blank">Link</a>
10+
</div>
11+
</section>
12+
<mat-divider></mat-divider>
13+
<section>
14+
<div class="example-label">Raised</div>
15+
<div class="example-button-row">
16+
<button mat-raised-button>Basic</button>
17+
<button mat-raised-button color="primary">Primary</button>
18+
<button mat-raised-button color="accent">Accent</button>
19+
<button mat-raised-button color="warn">Warn</button>
20+
<button mat-raised-button disabled>Disabled</button>
21+
<a mat-raised-button href="https://www.google.com/" target="_blank">Link</a>
22+
</div>
23+
</section>
24+
<mat-divider></mat-divider>
25+
<section>
26+
<div class="example-label">Stroked</div>
27+
<div class="example-button-row">
28+
<button mat-stroked-button>Basic</button>
29+
<button mat-stroked-button color="primary">Primary</button>
30+
<button mat-stroked-button color="accent">Accent</button>
31+
<button mat-stroked-button color="warn">Warn</button>
32+
<button mat-stroked-button disabled>Disabled</button>
33+
<a mat-stroked-button href="https://www.google.com/" target="_blank">Link</a>
34+
</div>
35+
</section>
36+
<mat-divider></mat-divider>
37+
<section>
38+
<div class="example-label">Flat</div>
39+
<div class="example-button-row">
40+
<button mat-flat-button>Basic</button>
41+
<button mat-flat-button color="primary">Primary</button>
42+
<button mat-flat-button color="accent">Accent</button>
43+
<button mat-flat-button color="warn">Warn</button>
44+
<button mat-flat-button disabled>Disabled</button>
45+
<a mat-flat-button href="https://www.google.com/" target="_blank">Link</a>
46+
</div>
47+
</section>
48+
<mat-divider></mat-divider>
49+
<section>
50+
<div class="example-label">Icon</div>
51+
<div class="example-button-row">
52+
<div class="example-flex-container">
53+
<button mat-icon-button aria-label="Example icon button with a vertical three dot icon">
54+
<mat-icon>more_vert</mat-icon>
55+
</button>
56+
<button mat-icon-button color="primary" aria-label="Example icon button with a home icon">
57+
<mat-icon>home</mat-icon>
58+
</button>
59+
<button mat-icon-button color="accent" aria-label="Example icon button with a menu icon">
60+
<mat-icon>menu</mat-icon>
61+
</button>
62+
<button mat-icon-button color="warn" aria-label="Example icon button with a heart icon">
63+
<mat-icon>favorite</mat-icon>
64+
</button>
65+
<button mat-icon-button disabled aria-label="Example icon button with a open in new tab icon">
66+
<mat-icon>open_in_new</mat-icon>
67+
</button>
68+
</div>
69+
</div>
70+
</section>
71+
<mat-divider></mat-divider>
72+
<section>
73+
<div class="example-label">FAB</div>
74+
<div class="example-button-row">
75+
<div class="example-flex-container">
76+
<div class="example-button-container">
77+
<button mat-fab color="primary" aria-label="Example icon button with a delete icon">
78+
<mat-icon>delete</mat-icon>
79+
</button>
80+
</div>
81+
<div class="example-button-container">
82+
<button mat-fab color="accent" aria-label="Example icon button with a bookmark icon">
83+
<mat-icon>bookmark</mat-icon>
84+
</button>
85+
</div>
86+
<div class="example-button-container">
87+
<button mat-fab color="warn" aria-label="Example icon button with a home icon">
88+
<mat-icon>home</mat-icon>
89+
</button>
90+
</div>
91+
<div class="example-button-container">
92+
<button mat-fab disabled aria-label="Example icon button with a heart icon">
93+
<mat-icon>favorite</mat-icon>
94+
</button>
95+
</div>
96+
</div>
97+
</div>
98+
</section>
99+
<mat-divider></mat-divider>
100+
<section>
101+
<div class="example-label">Mini FAB</div>
102+
<div class="example-button-row">
103+
<div class="example-flex-container">
104+
<div class="example-button-container">
105+
<button mat-mini-fab color="primary" aria-label="Example icon button with a menu icon">
106+
<mat-icon>menu</mat-icon>
107+
</button>
108+
</div>
109+
<div class="example-button-container">
110+
<button mat-mini-fab color="accent" aria-label="Example icon button with a plus one icon">
111+
<mat-icon>plus_one</mat-icon>
112+
</button>
113+
</div>
114+
<div class="example-button-container">
115+
<button mat-mini-fab color="warn" aria-label="Example icon button with a filter list icon">
116+
<mat-icon>filter_list</mat-icon>
117+
</button>
118+
</div>
119+
<div class="example-button-container">
120+
<button mat-mini-fab disabled aria-label="Example icon button with a home icon">
121+
<mat-icon>home</mat-icon>
122+
</button>
123+
</div>
124+
</div>
125+
</div>
126+
</section>

‎src/app/angular/buttons/buttons.component.scss‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
section {
2+
display: table;
3+
margin: 8px;
4+
5+
.example-label {
6+
display: table-cell;
7+
font-size: 14px;
8+
margin-left: 8px;
9+
width: 120px;
10+
}
11+
12+
.example-button-row {
13+
display: table-cell;
14+
15+
button {
16+
display: table-cell;
17+
margin-right: 8px;
18+
}
19+
}
20+
21+
.example-flex-container {
22+
display: flex;
23+
justify-content: space-between;
24+
width: 480px;
25+
}
26+
27+
.example-button-container {
28+
display: flex;
29+
justify-content: center;
30+
width: 120px;
31+
}
32+
}

‎src/app/angular/buttons/buttons.component.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
2+
3+
import {ButtonsComponent} from './buttons.component';
4+
5+
describe('ButtonsComponent', () => {
6+
let component: ButtonsComponent;
7+
let fixture: ComponentFixture<ButtonsComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ ButtonsComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(ButtonsComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/angular/buttons/buttons.component.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import {Component, OnInit} from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-buttons',
5+
templateUrl: './buttons.component.html',
6+
styleUrls: ['./buttons.component.scss']
7+
})
8+
export class ButtonsComponent implements OnInit {
9+
static selector = 'appButtons';
10+
11+
constructor() {}
12+
13+
ngOnInit(): void {}
14+
}

‎src/app/angular/cdk-tree/cdk-tree.component.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
2+
<!-- This is the tree node template for leaf nodes -->
3+
<cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding
4+
[style.display]="shouldRender(node) ? 'flex' : 'none'"
5+
class="example-tree-node">
6+
<!-- use a disabled button to provide padding for tree leaf -->
7+
<button mat-icon-button disabled></button>
8+
{{node.name}}
9+
</cdk-tree-node>
10+
<!-- This is the tree node template for expandable nodes -->
11+
<cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
12+
[style.display]="shouldRender(node) ? 'flex' : 'none'"
13+
class="example-tree-node">
14+
<button mat-icon-button cdkTreeNodeToggle
15+
[attr.aria-label]="'toggle ' + node.filename"
16+
(click)="node.isExpanded = !node.isExpanded"
17+
[style.visibility]="node.expandable ? 'visible' : 'hidden'">
18+
<mat-icon class="mat-icon-rtl-mirror">
19+
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
20+
</mat-icon>
21+
</button>
22+
{{node.name}}
23+
</cdk-tree-node>
24+
</cdk-tree>

0 commit comments

Comments
 (0)