sandre/SkydiveLogs
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update styles

Browse Source
This commit is contained in:
Sébastien André
2021-01-13 16:14:02 +01:00
parent df653eef0d
commit a2732f42c7
4 changed files with 101 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Front/skydivelogs-app/src/app/app.component.css
View File

@@ -50,3 +50,7 @@
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.mat-icon {
margin-right: 15px;
}

21
Front/skydivelogs-app/src/app/app.component.html
View File

@@ -11,16 +11,6 @@
</svg> </svg>
<h2 style="display: inline;">{{ title }}</h2> <h2 style="display: inline;">{{ title }}</h2>
</div> </div>
<div>
<a routerLink="/user" routerLinkActive="active" skipLocationChange>
<mat-icon aria-hidden="false" aria-label="User account">account_box</mat-icon>
<h2 style="display: inline;" *ngIf="currentUser">{{ this.currentUser.firstName }}
{{ this.currentUser.lastName }}</h2>
</a>
<a *ngIf="currentUser" (click)="logout()" style="cursor: pointer; margin-left:15px;">
<mat-icon aria-hidden="false" aria-label="To logout">logout</mat-icon>
</a>
</div>
</div> </div>
<nav class="navigation" [ngClass]="{'side-menu-active': showMenu}"> <nav class="navigation" [ngClass]="{'side-menu-active': showMenu}">
@@ -60,6 +50,17 @@
<a routerLink="/gears" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>List of <a routerLink="/gears" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>List of
gears</a> gears</a>
</li> </li>
<li *ngIf="currentUser">
<hr class="splitter">
<mat-icon aria-hidden="false" aria-label="User account">account_box</mat-icon>
<a routerLink="/user" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>
{{ this.currentUser.firstName }} {{ this.currentUser.lastName }}
</a>
</li>
<li *ngIf="currentUser">
<mat-icon aria-hidden="false" aria-label="To logout">logout</mat-icon>
<span (click)="logout()" style="cursor: pointer;">Logout</span>
</li>
</ul> </ul>
</nav> </nav>
</header> </header>

75
Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.html
View File

@@ -1,40 +1,39 @@
<div style="display: flex; flex-direction: row;"> <div>
<div style="width: 40%;"> <form [formGroup]="imgForm" (ngSubmit)="onSubmit(imgForm.value)" autocomplete="off" style="padding: 10px;">
<form [formGroup]="imgForm" (ngSubmit)="onSubmit(imgForm.value)" autocomplete="off" style="padding: 10px;"> <p>
<p> <input type="file" #fileUpload id="fileUpload" name="fileUpload" accept="image/*" formControlName="image"
<input type="file" #fileUpload id="fileUpload" name="fileUpload" accept="image/*" formControlName="image" (change)="onFileChanged($event)" />
(change)="onFileChanged($event)" /> </p>
</p> <p>
<p> <mat-form-field>
<mat-form-field> <mat-label>Comment about the image</mat-label>
<mat-label>Comment about the image</mat-label> <input matInput type="text" formControlName="comment" />
<input matInput type="text" formControlName="comment" /> </mat-form-field>
</mat-form-field> </p>
</p>
<button mat-button color="warn" type="submit"> <button mat-button color="warn" type="submit">
<mat-icon>file_upload</mat-icon> <mat-icon>file_upload</mat-icon>
Upload image Upload image
</button> </button>
<label>{{ imageError }}</label> <label>{{ imageError }}</label>
</form> </form>
</div> </div>
<div style="width: 40%;">
<table mat-table [dataSource]="dataSourceTable"> <div *ngIf="resultsLength > 0">
<ng-container matColumnDef="comment"> <table mat-table [dataSource]="dataSourceTable">
<th mat-header-cell *matHeaderCellDef>Name</th> <ng-container matColumnDef="comment">
<td mat-cell *matCellDef="let element">{{element.comment}}</td> <th mat-header-cell *matHeaderCellDef>Name</th>
</ng-container> <td mat-cell *matCellDef="let element">{{element.comment}}</td>
</ng-container>
<ng-container matColumnDef="data">
<th mat-header-cell *matHeaderCellDef>Image</th> <ng-container matColumnDef="data">
<td mat-cell *matCellDef="let element"><img src="{{element.data}}" alt="toto"></td> <th mat-header-cell *matHeaderCellDef>Image</th>
</ng-container> <td mat-cell *matCellDef="let element"><img src="{{element.data}}" alt="toto"></td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
</table> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
</div> <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
</div> </div>

91
Front/skydivelogs-app/src/app/user-profile/user-profile.component.html
View File

@@ -1,45 +1,52 @@
<div class="content"> <div class="content" style="display: flex; flex-direction: row;">
<form [formGroup]="userForm" (ngSubmit)="onSubmit(userForm.value)">
<p>
<mat-form-field>
<mat-label>Login</mat-label>
<input matInput type="text" formControlName="login" readonly />
</mat-form-field>
</p>
<p>
<mat-form-field>
<mat-label>Firstname</mat-label>
<input matInput type="text" formControlName="firstName" />
</mat-form-field>
</p>
<p>
<mat-form-field>
<mat-label>Lastname</mat-label>
<input matInput type="text" formControlName="lastName" />
</mat-form-field>
</p>
<p>
<mat-form-field>
<mat-label>E-mail</mat-label>
<input matInput type="text" formControlName="email" />
</mat-form-field>
</p>
<p> <fieldset style="width: 50%;">
<mat-form-field> <legend>Profile</legend>
<mat-label>Current password</mat-label> <form [formGroup]="userForm" (ngSubmit)="onSubmit(userForm.value)">
<input matInput type="text" formControlName="currentPassword" /> <p>
</mat-form-field> <mat-form-field>
</p> <mat-label>Login</mat-label>
<p> <input matInput type="text" formControlName="login" readonly />
<mat-form-field> </mat-form-field>
<mat-label>New password</mat-label> </p>
<input matInput type="text" formControlName="newPassword" /> <p>
</mat-form-field> <mat-form-field>
</p> <mat-label>Firstname</mat-label>
<input matInput type="text" formControlName="firstName" />
</mat-form-field>
</p>
<p>
<mat-form-field>
<mat-label>Lastname</mat-label>
<input matInput type="text" formControlName="lastName" />
</mat-form-field>
</p>
<p>
<mat-form-field>
<mat-label>E-mail</mat-label>
<input matInput type="text" formControlName="email" />
</mat-form-field>
</p>
<p>
<mat-form-field>
<mat-label>Current password</mat-label>
<input matInput type="text" formControlName="currentPassword" />
</mat-form-field>
</p>
<p>
<mat-form-field>
<mat-label>New password</mat-label>
<input matInput type="text" formControlName="newPassword" />
</mat-form-field>
</p>
<button type="submit" mat-raised-button color="accent">Update my profile</button>
</form>
</fieldset>
<button type="submit" mat-raised-button color="accent">Update my profile</button> <fieldset style="width: 50%;">
</form> <legend>Images</legend>
<app-list-of-images></app-list-of-images>
<app-list-of-images></app-list-of-images> </fieldset>
</div> </div>