fhsons/website
fhsons/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Better interface

Browse Source
This commit is contained in:
Zakary Timson 2018-08-08 00:32:31 -04:00
parent c4b134bf58
commit 58c2f936d1
1 changed files with 32 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/app/store/newProduct/newProduct.component.html
View File

@ -36,7 +36,7 @@
<span class="mx-3 text-muted">OR</span> <span class="mx-3 text-muted">OR</span>
<mat-form-field color="accent" appearance="outline"> <mat-form-field color="accent" appearance="outline">
<mat-label>Link</mat-label> <mat-label>Link</mat-label>
<input matInput #linkInput> <input matInput placeholder="URL" #linkInput>
<button mat-mini-fab matSuffix (click)="addLink(linkInput.value) ? linkInput.value = '' : null"> <button mat-mini-fab matSuffix (click)="addLink(linkInput.value) ? linkInput.value = '' : null">
<mat-icon matSuffix>add</mat-icon> <mat-icon matSuffix>add</mat-icon>
</button> </button>
@ -44,28 +44,38 @@
</mat-form-field> </mat-form-field>
</div> </div>
<mat-divider *ngIf="files?.length"></mat-divider> <mat-divider *ngIf="files?.length"></mat-divider>
<mat-list>
<mat-list-item *ngFor="let f of files; let i = index"> <mat-accordion>
<mat-icon *ngIf="f.type == 'preview'" mat-list-icon>image</mat-icon> <mat-expansion-panel *ngFor="let f of files; let i = index">
<mat-icon *ngIf="f.type == 'link'" mat-list-icon>link</mat-icon> <mat-expansion-panel-header>
<mat-icon *ngIf="f.type == 'other'" mat-list-icon>insert_drive_file</mat-icon> <mat-panel-title>
<h4 mat-line>{{f.name}}</h4> <mat-icon *ngIf="f.type == 'preview'" class="mr-3" mat-list-icon>image</mat-icon>
<p *ngIf="f.type == 'link'" mat-line> <mat-icon *ngIf="f.type == 'link'" class="mr-3" mat-list-icon>link</mat-icon>
<strong>Link:</strong> {{f.link}} <mat-icon *ngIf="f.type == 'other'" class="mr-3" mat-list-icon>insert_drive_file</mat-icon>
</p> {{f.name}}
<div mat-line class="pt-2"> </mat-panel-title>
<mat-panel-description>
{{f.link}}
</mat-panel-description>
</mat-expansion-panel-header>
<div>
<mat-form-field>
<input matInput placeholder="Name" [(ngModel)]="f.name">
</mat-form-field>
</div>
<strong>Type:</strong> <strong>Type:</strong>
<mat-radio-group [(ngModel)]="f.type"> <mat-radio-group [(ngModel)]="f.type">
<mat-radio-button class="ml-2" value="preview">Preview</mat-radio-button> <mat-radio-button class="ml-2" value="preview">Preview</mat-radio-button>
<mat-radio-button class="ml-2" value="link">Link</mat-radio-button> <mat-radio-button class="ml-2" value="link">Link</mat-radio-button>
<mat-radio-button class="ml-2" value="other">Attachment</mat-radio-button> <mat-radio-button class="ml-2" value="other">Attachment</mat-radio-button>
</mat-radio-group> </mat-radio-group>
</div> <mat-action-row>
<button mat-mini-fab color="default" (click)="files.splice(i, 1)"> <button mat-button color="warn" (click)="files.splice(i, 1)">
<mat-icon>delete</mat-icon> Delete
</button> </button>
</mat-list-item> </mat-action-row>
</mat-list> </mat-expansion-panel>
</mat-accordion>
</div> </div>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions> <mat-dialog-actions>