Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
aee07c4
commit 3f4f86c
Showing
6 changed files
with
121 additions
and
103 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
66 changes: 35 additions & 31 deletions
66
CRBM-Viz/src/app/Shared/Forms/authors-form/authors-form.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,49 +1,53 @@ | ||
| <div> | ||
| <div fxLayout="row" fxLayoutAlign="space-between flex-end"> | ||
| <h3>Authors</h3> | ||
| <a (click)="this.addAuthor()"> | ||
| <button mat-icon-button (click)="this.addAuthor()"> | ||
| <fa-icon | ||
| aria-hidden="true" | ||
| aria-label="Add icon" | ||
| [icon]="['fas', 'plus']" | ||
| ></fa-icon> | ||
| Add | ||
| </a> | ||
| </button> | ||
| </div> | ||
| <ng-container [formGroup]="control" *ngIf="control.controls.length > 0"> | ||
| <div cdkDropList (cdkDropListDropped)="drop($event)"> | ||
| <div | ||
| *ngFor="let group of control.controls; index as i" | ||
| cdkDrag | ||
| class="form-container" | ||
| [formGroupName]="i" | ||
| > | ||
| <mat-form-field class="authorField" appearance="fill"> | ||
| <mat-label> First Name</mat-label> | ||
| <input matInput formControlName="firstName" /> | ||
| </mat-form-field> | ||
| <mat-form-field class="authorField" appearance="fill"> | ||
| <mat-label> Middle Name</mat-label> | ||
| <input matInput formControlName="middleName" /> | ||
| </mat-form-field> | ||
| <mat-form-field class="authorField" appearance="fill"> | ||
| <mat-label> Last Name</mat-label> | ||
| <input matInput formControlName="lastName" /> | ||
| </mat-form-field> | ||
| <fa-icon | ||
| aria-hidden="true" | ||
| aria-label="Drag icon" | ||
| [icon]="['fas', 'grip-lines-vertical']" | ||
| class="drag" | ||
| ></fa-icon> | ||
| <fa-icon | ||
| aria-hidden="true" | ||
| aria-label="Delete icon" | ||
| [icon]="['fas', 'trash-alt']" | ||
| (click)="this.removeControl(i)" | ||
| ></fa-icon> | ||
| <div fxLayout="row wrap" fxLayoutAlign="space-around center"> | ||
| <mat-form-field fxFlex="3 1 auto" appearance="fill"> | ||
| <mat-label> First Name</mat-label> | ||
| <input matInput formControlName="firstName" /> | ||
| </mat-form-field> | ||
| <div fxFlex="0 0 1em"></div> | ||
| <mat-form-field fxFlex="1 1 auto" appearance="fill"> | ||
| <mat-label> Middle Name</mat-label> | ||
| <input matInput placeholder="c" formControlName="middleName" /> | ||
| </mat-form-field> | ||
| <div fxFlex="0 0 1em"></div> | ||
| <mat-form-field fxFlex="3 1 auto" appearance="fill"> | ||
| <mat-label> Last Name</mat-label> | ||
| <input matInput formControlName="lastName" /> | ||
| </mat-form-field> | ||
| <div fxFlex="0 0 1em"></div> | ||
| <fa-icon | ||
| fxFlex="0 0 auto" | ||
| aria-hidden="true" | ||
| aria-label="Drag icon" | ||
| [icon]="['fas', 'grip-lines-vertical']" | ||
| class="drag" | ||
| ></fa-icon> | ||
| <div fxFlex="0 0 0.5em"></div> | ||
| <fa-icon | ||
| fxFlex="0 0 auto" | ||
| aria-hidden="true" | ||
| aria-label="Delete icon" | ||
| [icon]="['fas', 'trash-alt']" | ||
| (click)="this.removeControl(i)" | ||
| ></fa-icon> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </ng-container> | ||
| <button mat-raised-button color="primary" (click)="this.addAuthor()"> | ||
| Add Author | ||
| </button> |
5 changes: 0 additions & 5 deletions
5
CRBM-Viz/src/app/Shared/Forms/authors-form/authors-form.component.sass
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +0,0 @@ | ||
| .form-container | ||
| display: flex | ||
| flex-direction: row | ||
| align-items: center | ||
| width: 100% | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters