Skip to content

Commit e108cd7

Browse files
jeroenouwjeroenouw
committed
Refactor to new material version
1 parent 5108a3a commit e108cd7

40 files changed

+317
-314
lines changed

‎src/app/app.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<md-sidenav-container class="container">
1+
<mat-sidenav-container class="container">
22

33
<app-header></app-header><br />
44
<router-outlet></router-outlet>
@@ -10,4 +10,4 @@
1010

1111
<app-footer></app-footer>
1212

13-
</md-sidenav-container>
13+
</mat-sidenav-container>

‎src/app/app.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
padding: 20px;
33
}
44

5-
.app-content md-card{
5+
.app-content mat-card{
66
margin: 20px;
77
}
88

‎src/app/app.module.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
// Modules 3rd party
22
import { NgModule } from '@angular/core';
33
import { BrowserModule } from '@angular/platform-browser';
4-
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
5-
import { MdButtonModule, MdCheckboxModule, MdMenuModule, MdInputModule,
6-
MdToolbarModule, MdDialogModule, MdSidenavModule, MdNativeDateModule,
7-
MaterialModule } from '@angular/material';
4+
import { BrowserAnimationsModule } from '@angular/platform-browser/aniMations';
5+
import { MatButtonModule, MatCheckboxModule, MatMenuModule, MatInputModule, MatSnackBarModule,
6+
MatToolbarModule, MatDialogModule, MatSidenavModule, MatNativeDateModule,
7+
MatCardModule, MatIconModule } from '@angular/Material';
88
import 'hammerjs';
99
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
1010
import { HttpClientModule } from '@angular/common/http';
@@ -57,9 +57,9 @@ import { EmailMeComponent } from './components/email-me/email-me.component';
5757
imports: [
5858
BrowserModule,
5959
BrowserAnimationsModule,
60-
MdButtonModule, MdCheckboxModule, MdMenuModule, MdInputModule,
61-
MdToolbarModule, MdDialogModule, MdSidenavModule, MdNativeDateModule,
62-
MaterialModule,
60+
MatButtonModule, MatCheckboxModule, MatMenuModule, MatInputModule, MatSnackBarModule,
61+
MatToolbarModule, MatDialogModule, MatSidenavModule, MatNativeDateModule,
62+
MatCardModule, MatIconModule,
6363
FormsModule,
6464
ReactiveFormsModule,
6565
HttpClientModule,

‎src/app/components/about-me/about-me.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div id="content">
2-
<md-card>
2+
<mat-card>
33
<h1>About me</h1>
44
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eleifend metus vel imperdiet cursus.
55
Donec tempor placerat nibh ac hendrerit. Nulla feugiat augue ac fringilla facilisis. Aenean eget nibh at quam egestas commodo.
@@ -18,6 +18,6 @@ <h1>About me</h1>
1818
Proin mattis ultrices blandit. Vivamus accumsan vulputate sem vel tincidunt. Etiam imperdiet imperdiet ante, sit amet suscipit tortor finibus maximus.
1919
Maecenas euismod pulvinar lorem.
2020
</p>
21-
</md-card>
21+
</mat-card>
2222
</div>
2323

‎src/app/components/auth/auth.module.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import { CommonModule } from '@angular/common';
44
import { BrowserModule } from '@angular/platform-browser';
55
import { FormsModule } from '@angular/forms';
66
import { HttpModule } from '@angular/http';
7-
import { MdButtonModule, MdInputModule, MdProgressBarModule, MaterialModule } from '@angular/material';
7+
import { MatButtonModule, MatInputModule, MatProgressBarModule,
8+
MatCardModule, MatIconModule } from '@angular/material';
89
import { UsersRouting } from './users.routing'
910

1011
// Components
@@ -23,7 +24,8 @@ import { PhoneSigninComponent } from './phone-signin/phone-signin.component';
2324
BrowserModule,
2425
FormsModule,
2526
HttpModule,
26-
MdButtonModule, MdInputModule, MdProgressBarModule, MaterialModule,
27+
MatButtonModule, MatInputModule, MatProgressBarModule,
28+
MatCardModule, MatIconModule,
2729
UsersRouting
2830
],
2931
providers: [

‎src/app/components/auth/phone-signin/phone-signin.component.html‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,37 @@
1-
<md-card>
1+
<mat-card>
22
<div [hidden]="currentUser">
33
<h3>Phone Number login</h3><h5>Currently only saving phonenumber to database, login in progress. (temporary place)</h5>
44

55
<br/>+
6-
<md-input-container>
7-
<input mdInput type="text" [(ngModel)]="phoneNumber.country" class="input" placeholder="31" maxlength="2">
8-
</md-input-container>
9-
<md-input-container>
10-
<input mdInput type="text" [(ngModel)]="phoneNumber.area" class="input" placeholder="612" maxlength="3">
11-
</md-input-container>
12-
<md-input-container>
13-
<input mdInput type="text" [(ngModel)]="phoneNumber.prefix" class="input" placeholder="345" maxlength="3">
14-
</md-input-container>
15-
<md-input-container>
16-
<input mdInput type="text" [(ngModel)]="phoneNumber.line" class="input" placeholder="678" maxlength="4">
17-
</md-input-container>
6+
<mat-input-container>
7+
<input matInput type="text" [(ngModel)]="phoneNumber.country" class="input" placeholder="31" maxlength="2">
8+
</mat-input-container>
9+
<mat-input-container>
10+
<input matInput type="text" [(ngModel)]="phoneNumber.area" class="input" placeholder="612" maxlength="3">
11+
</mat-input-container>
12+
<mat-input-container>
13+
<input matInput type="text" [(ngModel)]="phoneNumber.prefix" class="input" placeholder="345" maxlength="3">
14+
</mat-input-container>
15+
<mat-input-container>
16+
<input matInput type="text" [(ngModel)]="phoneNumber.line" class="input" placeholder="678" maxlength="4">
17+
</mat-input-container>
1818

1919
<div id="recaptcha-container"></div><br/>
2020

21-
<button md-raised-button (click)="sendLoginCode()">SMS me the text login code</button>
21+
<button mat-raised-button (click)="sendLoginCode()">SMS me the text login code</button>
2222

2323
<div *ngIf="windowRef.confirmationResult">
2424
<hr>
2525
<h4>Enter your verification code here</h4><br>
26-
<md-input-container>
27-
<input mdInput type="text" name="code" [(ngModel)]="verificationCode">
28-
</md-input-container>
26+
<mat-input-container>
27+
<input matInput type="text" name="code" [(ngModel)]="verificationCode">
28+
</mat-input-container>
2929

30-
<button md-raised-button (click)="verifyLoginCode()">Verify</button>
30+
<button mat-raised-button (click)="verifyLoginCode()">Verify</button>
3131
</div>
3232

3333
</div>
34-
</md-card>
34+
</mat-card>
3535

3636
<div *ngIf="currentUser">
3737
You have successfully logged in with your phone number!

‎src/app/components/auth/signin.component.html‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,59 @@
11
<!-- Spinner -->
2-
<!-- <md-spinner *ngIf="loading" mode="indeterminate"></md-spinner> -->
2+
<!-- <mat-spinner *ngIf="loading" mode="indeterminate"></mat-spinner> -->
33
<!-- Progress bar -->
4-
<md-progress-bar *ngIf="loading" mode="indeterminate"></md-progress-bar>
4+
<mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar>
55

6-
<md-card>
6+
<mat-card>
77
<h3>Social login</h3>
88
<form (ngSubmit)="onSignInGoogle(g)" #g="ngForm">
9-
<md-card-actions class="button">
10-
<!-- md-raised-button class="primary" -->
9+
<mat-card-actions class="button">
10+
<!-- mat-raised-button class="primary" -->
1111
<button class="btn btn-block btn-social btn-google" type="submit" [disabled]="!g.valid"><span class="fa fa-google"></span> Login with your Google Account</button>
12-
</md-card-actions>
12+
</mat-card-actions>
1313
</form>
1414
<form (ngSubmit)="onSignInTwitter(t)" #t="ngForm">
15-
<md-card-actions class="button">
15+
<mat-card-actions class="button">
1616
<button class="btn btn-block btn-social btn-twitter" type="submit" [disabled]="!t.valid"><span class="fa fa-twitter"></span> Login with your Twitter Account</button>
17-
</md-card-actions>
17+
</mat-card-actions>
1818
</form>
1919
<form (ngSubmit)="onSignInFacebook(fb)" #fb="ngForm">
20-
<md-card-actions class="button">
20+
<mat-card-actions class="button">
2121
<button class="btn btn-block btn-social btn-facebook" type="submit" [disabled]="!fb.valid"><span class="fa fa-facebook"></span> Login with your Facebook Account</button>
22-
</md-card-actions>
22+
</mat-card-actions>
2323
</form>
2424
<form (ngSubmit)="onSignInGithub(gh)" #gh="ngForm">
25-
<md-card-actions class="button">
25+
<mat-card-actions class="button">
2626
<button class="btn btn-block btn-social btn-github" type="submit" [disabled]="!gh.valid"><span class="fa fa-github"></span> Login with your Github Account</button>
27-
</md-card-actions>
27+
</mat-card-actions>
2828
</form>
2929

3030
<hr>
3131

3232
<h3>Login</h3>
3333
<form (ngSubmit)="onSignin(f)" #f="ngForm">
34-
<md-input-container class="full-width">
34+
<mat-input-container class="full-width">
3535
<!--<label for ="email">Mail</label>-->
36-
<input mdInput placeholder="Email" type="email" id="email" name="email" ngModel required>
37-
</md-input-container>
38-
<md-input-container class="full-width">
36+
<input matInput placeholder="Email" type="email" id="email" name="email" ngModel required>
37+
</mat-input-container>
38+
<mat-input-container class="full-width">
3939
<!--<label for ="password">Password</label>-->
40-
<input mdInput placeholder="Password" type="password" id="password" name="password" ngModel required>
41-
</md-input-container>
42-
<md-card-actions class="button">
43-
<button md-raised-button class="primary" type="submit" [disabled]="!f.valid">Login</button>
44-
</md-card-actions>
40+
<input matInput placeholder="Password" type="password" id="password" name="password" ngModel required>
41+
</mat-input-container>
42+
<mat-card-actions class="button">
43+
<button mat-raised-button class="primary" type="submit" [disabled]="!f.valid">Login</button>
44+
</mat-card-actions>
4545
</form>
4646

4747
<hr>
4848

4949
<h3>Anonymous login</h3>
5050
<form (ngSubmit)="onSigninAnonymous(a)" #a="ngForm">
51-
<md-card-actions class="button">
52-
<button md-raised-button class="primary" type="submit">Login anonymously</button>
53-
</md-card-actions>
51+
<mat-card-actions class="button">
52+
<button mat-raised-button class="primary" type="submit">Login anonymously</button>
53+
</mat-card-actions>
5454
</form>
5555

56-
</md-card>
56+
</mat-card>
5757

5858
<!-- TEMPORARY PLACE, LOGIN NEEDS TO BE FIXED -->
5959
<app-phone-signin></app-phone-signin>

‎src/app/components/auth/signin.component.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
md-card {
1+
mat-card {
22
width: 400px;
33
// height: 540px;
44
// Height with Anonymous login:
55
height: 710px;
66
margin: 100px auto;
77
}
88

9-
md-progress-bar {
9+
mat-progress-bar {
1010
margin-top: -21px;
1111
}
1212

13-
md-spinner {
13+
mat-spinner {
1414
width: 100px;
1515
height: 100px;
1616
margin: 20px auto 0 auto;

‎src/app/components/auth/signup.component.html‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,64 @@
11
<!-- Spinner -->
2-
<!-- <md-spinner *ngIf="loading" mode="indeterminate"></md-spinner> -->
3-
<md-progress-bar *ngIf="loading" mode="indeterminate"></md-progress-bar>
2+
<!-- <mat-spinner *ngIf="loading" mode="indeterminate"></mat-spinner> -->
3+
<mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar>
44

5-
<md-card>
5+
<mat-card>
66
<h3>Social Sign up</h3>
77
<form (ngSubmit)="onSignupGoogle(g)" #g="ngForm">
8-
<md-card-actions class="button">
9-
<!-- md-raised-button class="primary" -->
8+
<mat-card-actions class="button">
9+
<!-- mat-raised-button class="primary" -->
1010
<button class="btn btn-block btn-social btn-google" type="submit" [disabled]="!g.valid"><span class="fa fa-google"></span> Sign up with your Google Account</button>
11-
</md-card-actions>
11+
</mat-card-actions>
1212
</form>
1313
<form (ngSubmit)="onSignupTwitter(t)" #t="ngForm">
14-
<md-card-actions class="button">
14+
<mat-card-actions class="button">
1515
<button class="btn btn-block btn-social btn-twitter" type="submit" [disabled]="!t.valid"><span class="fa fa-twitter"></span> Sign up with your Twitter Account</button>
16-
</md-card-actions>
16+
</mat-card-actions>
1717
</form>
1818
<form (ngSubmit)="onSignupFacebook(fb)" #fb="ngForm">
19-
<md-card-actions class="button">
19+
<mat-card-actions class="button">
2020
<button class="btn btn-block btn-social btn-facebook" type="submit" [disabled]="!fb.valid"><span class="fa fa-facebook"></span> Sign up with your Facebook Account</button>
21-
</md-card-actions>
21+
</mat-card-actions>
2222
</form>
2323
<form (ngSubmit)="onSignupGithub(gh)" #gh="ngForm">
24-
<md-card-actions class="button">
24+
<mat-card-actions class="button">
2525
<button class="btn btn-block btn-social btn-github" type="submit" [disabled]="!gh.valid"><span class="fa fa-github"></span> Sign up with your Github Account</button>
26-
</md-card-actions>
26+
</mat-card-actions>
2727
</form>
2828

2929
<hr />
3030
<h3>Or sign up with your email</h3>
3131

3232
<form (ngSubmit)="onSignup(f)" #f="ngForm">
33-
<md-input-container class="full-width">
33+
<mat-input-container class="full-width">
3434
<!--<label for ="email">Mail</label>-->
35-
<input mdInput placeholder="Email" type="email" id="email" name="email" ngModel required>
36-
</md-input-container>
37-
<md-input-container class="full-width">
35+
<input matInput placeholder="Email" type="email" id="email" name="email" ngModel required>
36+
</mat-input-container>
37+
<mat-input-container class="full-width">
3838
<!--<label for ="password">Password</label>-->
39-
<input mdInput placeholder="Password" type="password" id="password" name="password" ngModel required>
40-
</md-input-container>
41-
<md-card-actions class="button">
42-
<button md-raised-button class="primary" type="submit" [disabled]="!f.valid">Register</button>
43-
</md-card-actions>
39+
<input matInput placeholder="Password" type="password" id="password" name="password" ngModel required>
40+
</mat-input-container>
41+
<mat-card-actions class="button">
42+
<button mat-raised-button class="primary" type="submit" [disabled]="!f.valid">Register</button>
43+
</mat-card-actions>
4444
</form>
4545
<!--
4646
<form (ngSubmit)="onSignupCellphone(cp)" #cp="ngForm">
47-
<md-input-container class="full-width">-->
47+
<mat-input-container class="full-width">-->
4848
<!--<label for ="email">Mail</label>-->
49-
<!--<input mdInput placeholder="phoneNumber" type="phoneNumber" id="phoneNumber" name="phoneNumber" ngModel>
50-
</md-input-container>
51-
<md-input-container class="form-group">-->
49+
<!--<input matInput placeholder="phoneNumber" type="phoneNumber" id="phoneNumber" name="phoneNumber" ngModel>
50+
</mat-input-container>
51+
<mat-input-container class="form-group">-->
5252
<!--<label for ="password">Password</label>-->
53-
<!--<input mdInput placeholder="appVerifier" type="appVerifier" id="appVerifier" name="appVerifier" ngModel>
54-
</md-input-container>
55-
<md-input-container class="form-group">-->
53+
<!--<input matInput placeholder="appVerifier" type="appVerifier" id="appVerifier" name="appVerifier" ngModel>
54+
</mat-input-container>
55+
<mat-input-container class="form-group">-->
5656
<!--<label for ="password">Password</label>-->
57-
<!--<input mdInput placeholder="code" type="code" id="code" name="code" ngModel>
58-
</md-input-container>
59-
<md-card-actions class="button">
60-
<button md-raised-button class="primary" type="submit" [disabled]="!cp.valid">Cellphone</button>
61-
</md-card-actions>
57+
<!--<input matInput placeholder="code" type="code" id="code" name="code" ngModel>
58+
</mat-input-container>
59+
<mat-card-actions class="button">
60+
<button mat-raised-button class="primary" type="submit" [disabled]="!cp.valid">Cellphone</button>
61+
</mat-card-actions>
6262
</form>-->
6363

64-
</md-card>
64+
</mat-card>

‎src/app/components/auth/signup.component.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
md-card {
1+
mat-card {
22
width: 400px;
33
height: 580px;
44
margin: 100px auto;
55
}
66

7-
md-progress-bar {
7+
mat-progress-bar {
88
margin-top: -21px;
99
}
1010

11-
md-spinner {
11+
mat-spinner {
1212
width: 100px;
1313
height: 100px;
1414
margin: 20px auto 0 auto;

0 commit comments

Comments
 (0)