Add Icon Button Component

frontend/src/app/annotate/annotate.component.html

@@ -62,31 +62,23 @@
         }
         <div class="d-flex flex-column gap-2 align-items-stretch">
             @if (browsing) {
-            <button
-                type="button"
-                class="btn btn-secondary d-flex align-items-center justify-content-center"
+            <la-icon-button
+                [icon]="faPlus"
+                label="Add new problem"
                 (click)="addProblem()"
-            >
-                <fa-icon
-                    [icon]="faPlus"
-                    aria-hidden="true"
-                    focusable="false"
-                ></fa-icon>
-                <span class="ms-3" i18n>Add new problem</span>
-            </button>
+                buttonStyle="secondary"
+                fullWidth
+                i18n-label
+            />
             } @else {
-            <button
-                type="button"
-                class="btn btn-secondary d-flex align-items-center justify-content-center"
+            <la-icon-button
+                [icon]="faBinoculars"
+                label="Browse existing problems"
                 (click)="firstProblemId && goToProblem(firstProblemId)"
-            >
-                <fa-icon
-                    [icon]="faBinoculars"
-                    aria-hidden="true"
-                    focusable="false"
-                ></fa-icon>
-                <span class="ms-3" i18n>Browse existing problems</span>
-            </button>
+                buttonStyle="secondary"
+                fullWidth
+                i18n-label
+            />
             }
         </div>
     </div>

frontend/src/app/annotate/annotate.component.ts

@@ -12,6 +12,7 @@ import { CommonModule } from "@angular/common";
 import { Dataset } from "@/types";
 import { AppModeService } from "@/services/app-mode.service";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { IconButtonComponent } from "@/shared/icon-button/icon-button.component";
 
 @Component({
     selector: "la-annotate",
@@ -23,6 +24,7 @@ import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
         SearchComponent,
         FontAwesomeModule,
         CommonModule,
+        IconButtonComponent,
     ],
     templateUrl: "./annotate.component.html",
     styleUrl: "./annotate.component.scss",

frontend/src/app/annotate/annotation-input/annotation-input.component.html

@@ -12,45 +12,28 @@
             <la-knowledge-base-form [form]="form" />
         </div>
         <div class="d-flex justify-content-between mt-3">
-            <button
-                type="button"
-                class="btn btn-success d-flex align-items-center justify-content-center"
+            <la-icon-button
+                [icon]="faTree"
+                buttonStyle="success"
+                label="Start parse"
                 (click)="startParse()"
-            >
-                <fa-icon
-                    [icon]="faTree"
-                    class="fa-md"
-                    aria-hidden="true"
-                    focusable="false"
-                />
-                <span class="ms-2" i18n>Start parse</span>
-            </button>
+                i18n-label
+            />
             @if ((viewMode === 'edit' || viewMode === 'add') && userProblem) {
-            <button
-                type="button"
-                class="btn btn-primary d-flex align-items-center justify-content-center"
+            <la-icon-button
+                [icon]="faFloppyDisk"
+                label="Save problem"
                 (click)="saveProblem()"
-            >
-                <fa-icon
-                    [icon]="faFloppyDisk"
-                    aria-hidden="true"
-                    focusable="false"
-                ></fa-icon>
-                <span class="ms-3" i18n>Save problem</span>
-            </button>
+                i18n-label
+            />
             } @else if (userProblem) {
-                <button
-                    type="button"
-                    class="btn btn-secondary d-flex align-items-center justify-content-center"
-                    (click)="editProblem()"
-                >
-                    <fa-icon
-                        [icon]="faWrench"
-                        aria-hidden="true"
-                        focusable="false"
-                    ></fa-icon>
-                    <span class="ms-3" i18n>Edit problem</span>
-                </button>
+            <la-icon-button
+                [icon]="faWrench"
+                buttonStyle="secondary"
+                label="Edit problem"
+                (click)="editProblem()"
+                i18n-label
+            />
             }
         </div>
         }

frontend/src/app/annotate/annotation-input/annotation-input.component.ts

@@ -21,6 +21,7 @@ import { ParseService } from "@/services/parse.service";
 import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { AppModeService } from "@/services/app-mode.service";
 import { ToastService } from "@/services/toast.service";
+import { IconButtonComponent } from "@/shared/icon-button/icon-button.component";
 
 export type ParseInputForm = FormGroup<{
     id: FormControl<number | null>;
@@ -49,6 +50,7 @@ export type ParseInput = ReturnType<ParseInputForm["getRawValue"]>;
         ReactiveFormsModule,
         ProblemDetailsComponent,
         FontAwesomeModule,
+        IconButtonComponent
     ],
     templateUrl: "./annotation-input.component.html",
     styleUrl: "./annotation-input.component.scss",

frontend/src/app/annotate/annotation-input/knowledge-base-form/knowledge-base-form.component.html

@@ -8,25 +8,23 @@
         >
             <span i18n>Knowledge base items</span>
             @if (viewMode === 'add' || viewMode === 'edit') {
-            <button
-                type="button"
-                class="btn btn-sm btn-outline-primary"
+            <la-icon-button
+                [icon]="faPlus"
+                iconPosition="right"
+                size="sm"
+                label="Add knowledge base item"
                 (click)="addKnowledgeBaseItem()"
-            >
-                <span class="me-1" i18n>Add knowledge base item</span>
-                <fa-icon
-                    [icon]="faPlus"
-                    class="fa-sm"
-                    aria-hidden="true"
-                    focusable="false"
-                ></fa-icon>
-            </button>
+                i18n-label
+                outline
+            />
             }
         </legend>
     </fieldset>
 
     <ul class="ps-0 list-unstyled" formArrayName="kbItems">
-        @for (kbItem of kbControls; let i = $index; track `${i}-${kbItem.value.entity1}-${kbItem.value.relationship}-${kbItem.value.entity2}`) {
+        @for (kbItem of kbControls; let i = $index; track
+        `${i}-${kbItem.value.entity1}-${kbItem.value.relationship}-${kbItem.value.entity2}`)
+        {
         <li class="mb-3">
             @if (viewMode === 'add' || viewMode === 'edit') {
             <div [formGroupName]="i" class="input-group">
@@ -60,7 +58,7 @@
                     (click)="removeKnowledgeBaseItem(i)"
                     aria-labelledby="remove-kb-item"
                     title="Remove knowledge base item"
-                    title-i18n
+                    i18n-title
                 >
                     <fa-icon
                         [icon]="faTrash"

frontend/src/app/annotate/annotation-input/knowledge-base-form/knowledge-base-form.component.ts

@@ -7,6 +7,7 @@ import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { ParseInputForm } from "../annotation-input.component";
 import { AppModeService } from "@/services/app-mode.service";
 import { KnowledgeBaseRelationship } from "@/types";
+import { IconButtonComponent } from "@/shared/icon-button/icon-button.component";
 
 
 
@@ -20,7 +21,7 @@ const relationshipDisplayMapping: Record<KnowledgeBaseRelationship, string> = {
 @Component({
     selector: "la-knowledge-base-form",
     standalone: true,
-    imports: [CommonModule, ReactiveFormsModule, FontAwesomeModule],
+    imports: [CommonModule, ReactiveFormsModule, FontAwesomeModule, IconButtonComponent],
     templateUrl: "./knowledge-base-form.component.html",
     styleUrls: ["./knowledge-base-form.component.scss"],
 })

frontend/src/app/annotate/annotation-input/premises-form/premises-form.component.html

@@ -8,24 +8,21 @@
         >
             <span i18n>Premises</span>
             @if (viewMode === 'add' || viewMode === 'edit') {
-            <button
-                type="button"
-                class="btn btn-sm btn-outline-primary"
+            <la-icon-button
+                [icon]="faPlus"
+                label="Add premise"
                 (click)="addPremise()"
-            >
-                <span class="me-1" i18n>Add premise</span>
-                <fa-icon
-                    [icon]="faPlus"
-                    class="fa-sm"
-                    aria-hidden="true"
-                    focusable="false"
-                ></fa-icon>
-            </button>
+                size="sm"
+                iconPosition="right"
+                i18n-label
+                outline
+            />
             }
         </legend>
 
         <ul class="ps-0 list-unstyled" formArrayName="premises">
-            @for (control of premiseControls; let i = $index; track `${i}-${control.value}`) {
+            @for (control of premiseControls; let i = $index; track
+            `${i}-${control.value}`) {
             <li class="mb-3">
                 <div class="input-group">
                     <input
@@ -45,7 +42,7 @@
                         (click)="removePremise(i)"
                         aria-labelledby="remove-premise"
                         title="Remove premise"
-                        title-i18n
+                        i18n-title
                     >
                         <fa-icon
                             [icon]="faTrash"
@@ -86,6 +83,8 @@
             "
             [formControl]="form().controls.hypothesis"
         />
-        <p class="invalid-feedback" i18n>Each problem must have a hypothesis.</p>
+        <p class="invalid-feedback" i18n>
+            Each problem must have a hypothesis.
+        </p>
     </div>
 </form>

frontend/src/app/annotate/annotation-input/premises-form/premises-form.component.ts

@@ -5,6 +5,7 @@ import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { ParseInputForm } from "../annotation-input.component";
 import { AppModeService } from "@/services/app-mode.service";
+import { IconButtonComponent } from "@/shared/icon-button/icon-button.component";
 
 export interface Premises {
     premises: string[];
@@ -14,7 +15,7 @@ export interface Premises {
 @Component({
     selector: "la-premises-form",
     standalone: true,
-    imports: [ReactiveFormsModule, CommonModule, FontAwesomeModule],
+    imports: [ReactiveFormsModule, CommonModule, FontAwesomeModule, IconButtonComponent],
     templateUrl: "./premises-form.component.html",
     styleUrl: "./premises-form.component.scss",
 })