Display metadata icon

redhat-developer · Sep 8, 2023 · 163a173 · 163a173
1 parent 56b868d
commit 163a173
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/ui/src/app/forms/metadata/metadata.component.css b/ui/src/app/forms/metadata/metadata.component.css
@@ -1,3 +1,7 @@
 .main { padding: 16px; }
 mat-form-field.full-width { width: 100%; }
 mat-form-field.mid-width { width: 50%; }
+.quart-width { width: 25%; }
+.icon-display { display: inline-flex; position: relative; left: 16px; top: 22px; }
+.width-10 { width: 10%; }
+.width-40 { width: 40%; }
diff --git a/ui/src/app/forms/metadata/metadata.component.html b/ui/src/app/forms/metadata/metadata.component.html
@@ -34,8 +34,11 @@
             <mat-label>Icon</mat-label>
             <input placeholder="Can be a URI or a relative path in the project" matInput formControlName="icon">
         </mat-form-field>
+        <span class="icon-display width-10">
+            <img width="56" [src]="form.controls['icon'].value">
+        </span>
 
-        <mat-form-field appearance="outline" class="mid-width">
+        <mat-form-field appearance="outline" class="width-40">
             <mat-label>Global Memory Limit</mat-label>
             <input placeholder="Informative limit of memory used by the devfile. Ex: 1Gi" matInput formControlName="globalMemoryLimit">
         </mat-form-field>