Skip to content

Commit e05c051

Browse files
yallen011sumitarora
yallen011
authored and
sumitarora
committed
Update UI for example projects (#94)
* updated ui for example projects * * made suggested changes * refactored header into a shared component for reusability
1 parent 630290f commit e05c051

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+13549
-245
lines changed

‎package-lock.json‎

Lines changed: 13147 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/app.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,16 @@ import { NgModule } from '@angular/core';
33

44
import { AppRoutingModule } from './app-routing.module';
55
import { AppComponent } from './app.component';
6+
import { SharedModule } from './shared/shared.module';
67

78
@NgModule({
89
declarations: [
910
AppComponent
1011
],
1112
imports: [
1213
BrowserModule,
13-
AppRoutingModule
14+
AppRoutingModule,
15+
SharedModule
1416
],
1517
providers: [],
1618
bootstrap: [AppComponent]

‎src/app/dependency-injection/base/base.component.ts‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,27 @@
11
import { Component } from '@angular/core';
2+
import { NavItem } from 'src/app/shared/nav-item';
23

34
@Component({
45
selector: 'app-di-root',
56
template: `
6-
<div class="pa2">
7-
<div class="ba br4 p2 pl3 mb3 bg-purple white">
8-
<h1>{{title}}</h1>
7+
<app-header [navItems]="navModel"></app-header>
8+
<div class="pt6 ph3">
9+
<div class="center">
10+
<app-form-new-user></app-form-new-user>
11+
</div>
12+
<div class="pt3">
13+
<app-user-info></app-user-info>
14+
</div>
915
</div>
10-
<div class="center">
11-
<app-form-new-user></app-form-new-user>
12-
</div>
13-
<div class="pt3">
14-
<app-user-info></app-user-info>
15-
</div>
16-
</div>
1716
`,
1817
styleUrls: ['./base.component.css']
1918
})
2019
export class BaseComponent {
21-
title = 'Augury Dependency Injection Demo';
20+
navModel: NavItem[] = [
21+
{
22+
title: 'Augury Dependency Injection Demo',
23+
defaultStyle: true,
24+
headerOnly: true
25+
}
26+
];
2227
}

‎src/app/dependency-injection/dependency-injection.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { BaseComponent } from './base/base.component';
77
import { FormNewUserComponent } from './form-new-user/form-new-user.component';
88
import { NewUserService } from './new-user.service';
99
import { UserInfoComponent } from './user-info/user-info.component';
10+
import { SharedModule } from '../shared/shared.module';
1011

1112
@NgModule({
1213
declarations: [
@@ -16,8 +17,9 @@ import { UserInfoComponent } from './user-info/user-info.component';
1617
],
1718
imports: [
1819
CommonModule,
20+
DependencyInjectionRoutingModule,
1921
FormsModule,
20-
DependencyInjectionRoutingModule
22+
SharedModule
2123
],
2224
providers: [NewUserService]
2325
})

‎src/app/dependency-injection/form-new-user/form-new-user.component.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<form #formRef="ngForm">
2+
<div class="dt dt--fixed w-100 pt2">
3+
<div class="dt dt--fixed">
4+
<label for="name" class="fl w-20 tr pt1 pr4 mb2 f4">Name</label>
5+
<input class="fl ba pa2 b--black-20 w-40 mb2 br3" type="text" id="name" name="name" ngModel required />
6+
</div>
7+
<div class="dt dt--fixed">
8+
<label for="surname" class="fl w-20 tr pt1 pr4 mb2 f4">Surname</label>
9+
<input class="fl ba pa2 b--black-20 w-40 mb2 br3" type="text" id="surname" name="surname" ngModel required />
10+
</div>
11+
<div class="dt dt--fixed">
12+
<label for="email" class="fl w-20 tr pt1 pr4 mb2 f4">Email</label>
13+
<input class="fl ba pa2 b--black-20 w-40 mb2 br3" type="text" id="email" name="email" ngModel required />
14+
</div>
15+
<div class="dt dt--fixed">
16+
<label for="password" class="fl w-20 tr pt1 pr4 mb2 f4">Password</label>
17+
<input class="fl ba pa2 b--black-20 w-40 mb2 br3" type="password" id="password" name="password" ngModel required />
18+
<label for="surname" class="fl w-20 tr pr2 mb2">&nbsp;</label>
19+
</div>
20+
<div class="dt dt--fixed">
21+
<div class="fl ml6 mt2">
22+
<button (click)="onSubmit(formRef.value); formRef.reset();"
23+
[disabled]="!formRef.valid"
24+
class="link br2 bw3 btn-bg tr black fl ml6">Create</button>
25+
</div>
26+
</div>
27+
</div>
28+
</form>

‎src/app/dependency-injection/form-new-user/form-new-user.component.ts‎

Lines changed: 6 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3,34 +3,12 @@ import { NewUserService } from '../new-user.service';
33

44
@Component({
55
selector: 'app-form-new-user',
6-
template: `
7-
<form #formRef="ngForm">
8-
<div class="dt dt--fixed w-100 ba pt2">
9-
10-
<div class="dt dt--fixed">
11-
<label for="name" class="fl w-20 tr pr2 mb2 ">Name:</label>
12-
<input type="text" id="name" name="name" ngModel required class="fl w-25 mb2" />
13-
<label for="surname" class="fl w-20 tr pr2 mb2">Surname:</label>
14-
<input type="text" id="surname" name="surname" ngModel required class="fl w-25 mb2" />
15-
</div>
16-
17-
<div class="dt dt--fixed">
18-
<label for="email" class="fl w-20 tr pr2 mb2">Email:</label>
19-
<input type="text" id="email" name="email" ngModel required class="fl w-25 mb2" />
20-
</div>
21-
22-
<div class="dt dt--fixed">
23-
<label for="password" class="fl w-20 tr pr2 mb2">Password:</label>
24-
<input type="password" id="password" name="password" ngModel required class="fl w-25 mb2"/>
25-
<label for="surname" class="fl w-20 tr pr2 mb2">&nbsp;</label>
26-
<button (click)="onSubmit(formRef.value); formRef.reset();" [disabled]="!formRef.valid" class="link br2 ba bw1 bg-black yellow b--black fl w-25">Create</button>
27-
</div>
28-
29-
</div>
30-
31-
</form>
32-
`,
33-
styles: []
6+
templateUrl: './form-new-user.component.html',
7+
styles: [`
8+
button[disabled] {
9+
color: gray;
10+
}
11+
`]
3412
})
3513
export class FormNewUserComponent {
3614

‎src/app/dependency-injection/user-info/user-info.component.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<div class="pt4 pl6" *ngIf="userInfo">
2+
<div class="overflow-auto">
3+
<table class="f6 w-100 mw8" cellspacing="0">
4+
<thead>
5+
<tr class="stripe-purple">
6+
<th class="fw6 tl pa3 bg-white">Name</th>
7+
<th class="fw6 tl pa3 bg-white">Surname</th>
8+
<th class="fw6 tl pa3 bg-white">Email</th>
9+
<th class="fw6 tl pa3 bg-white">Password</th>
10+
</tr>
11+
</thead>
12+
<tbody class="lh-copy">
13+
<tr class="stripe-purple">
14+
<td class="pa3">{{userInfo.name}}</td>
15+
<td class="pa3">{{userInfo.surname}}</td>
16+
<td class="pa3">{{userInfo.email}}</td>
17+
<td class="pa3">{{userInfo.password}}</td>
18+
</tr>
19+
</tbody>
20+
</table>
21+
</div>
22+
</div>

‎src/app/dependency-injection/user-info/user-info.component.ts‎

Lines changed: 6 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,12 @@ import { NewUserService } from '../new-user.service';
33

44
@Component({
55
selector: 'app-user-info',
6-
template: `
7-
<div *ngIf="userInfo">
8-
<div class="overflow-auto">
9-
<table class="f6 w-100 mw8 ba" cellspacing="0">
10-
<thead>
11-
<tr class="stripe-dark">
12-
<th class="fw6 tl pa2 ba bg-white">Name</th>
13-
<th class="fw6 tl pa2 ba bg-white">Surname</th>
14-
<th class="fw6 tl pa2 ba bg-white">Email</th>
15-
<th class="fw6 tl pa2 ba bg-white">Password</th>
16-
</tr>
17-
</thead>
18-
<tbody class="lh-copy">
19-
<tr class="stripe-dark">
20-
<td class="pa2 ba">{{userInfo.name}}</td>
21-
<td class="pa2 ba">{{userInfo.surname}}</td>
22-
<td class="pa2 ba">{{userInfo.email}}</td>
23-
<td class="pa2 ba">{{userInfo.password}}</td>
24-
</tr>
25-
</tbody>
26-
</table>
27-
</div>
28-
</div>
29-
`,
30-
styles: []
6+
templateUrl: './user-info.component.html',
7+
styles: [`
8+
.stripe-purple:nth-child(odd) {
9+
background-color: rgba(241, 224, 255, 0.7);
10+
}
11+
`]
3112
})
3213
export class UserInfoComponent {
3314

‎src/app/forms-demo/base/base.component.html‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
<div class="ba br4 p2 pl3 bg-purple white">
2-
<h1>{{title}}</h1>
3-
</div>
4-
<login-form></login-form>
1+
<app-header [navItems]="navModel"></app-header>
52

6-
<login-model-form></login-model-form>
3+
<app-login-form></app-login-form>
74

8-
<model-form></model-form>
5+
<app-login-model-form></app-login-model-form>
6+
7+
<app-model-form></app-model-form>

‎src/app/forms-demo/base/base.component.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
11
import { Component } from '@angular/core';
2+
import { NavItem } from 'src/app/shared/nav-item';
23

34
@Component({
45
selector: 'app-forms-root',
56
templateUrl: './base.component.html',
67
styleUrls: ['./base.component.css']
78
})
89
export class BaseComponent {
9-
title = 'Augury Forms Demo';
10+
navModel: NavItem[] = [
11+
{
12+
title: 'Augury Forms Demo',
13+
defaultStyle: true,
14+
headerOnly: true
15+
}
16+
];
1017
}

0 commit comments

Comments
 (0)