feat(Authoring): Use slider to set activity width (#2310)

Co-authored-by: Jonathan Lim-Breitbart <breity10@gmail.com>

Author: hirokiterashima

src/app/authoring-tool/edit-component-width/edit-component-width.component.ts

@@ -1,20 +1,46 @@
 import { Component } from '@angular/core';
-import { EditComponentFieldComponent } from '../edit-component-field.component';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
 import { FormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { EditComponentFieldComponent } from '../edit-component-field.component';
 
 @Component({
-  imports: [FormsModule, MatFormFieldModule, MatInputModule],
+  imports: [FormsModule, MatButtonToggleModule, MatIconModule, MatTooltipModule],
   selector: 'edit-component-width',
-  template: `<mat-form-field>
-    <mat-label i18n>Activity Width</mat-label>
-    <input
-      matInput
-      type="number"
-      [(ngModel)]="componentContent.componentWidth"
-      (ngModelChange)="inputChanged.next($event)"
-    />
-  </mat-form-field> `
+  template: `<div class="flex items-center gap-2 my-2">
+      <span i18n>Activity width</span>
+      <mat-icon
+        tabindex="0"
+        matTooltip="The activity's width determines how it appears on the screen. If two adjacent
+        activities are set to 50% each (or 67% and 33%, for example), they will appear side-by-side."
+        matTooltipPosition="above"
+        i18n-matTooltip
+        >help</mat-icon
+      >
+    </div>
+    <mat-button-toggle-group
+      [(ngModel)]="selectedValue"
+      (change)="onWidthChange()"
+      aria-label="Activity width"
+      hideSingleSelectionIndicator="true"
+    >
+      @for (value of possibleValues; track $index) {
+        <mat-button-toggle value="{{ value }}">{{ value }}%</mat-button-toggle>
+      }
+    </mat-button-toggle-group>`
 })
-export class EditComponentWidthComponent extends EditComponentFieldComponent {}
+export class EditComponentWidthComponent extends EditComponentFieldComponent {
+  protected possibleValues = [25, 33, 50, 67, 75, 100];
+  protected selectedValue = '100';
+
+  public override ngOnInit(): void {
+    super.ngOnInit();
+    this.selectedValue = String(this.componentContent.componentWidth ?? 100);
+  }
+
+  protected onWidthChange(): void {
+    this.componentContent.componentWidth = Number(this.selectedValue);
+    this.inputChanged.next(Number(this.selectedValue));
+  }
+}

src/messages.xlf

@@ -1096,11 +1096,19 @@
           <context context-type="linenumber">85</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="2810375050239191789" datatype="html">
-        <source>Activity Width</source>
+      <trans-unit id="8084155234460667951" datatype="html">
+        <source>Activity width</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/edit-component-width/edit-component-width.component.ts</context>
-          <context context-type="linenumber">11,15</context>
+          <context context-type="linenumber">12,15</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="6520102811746443451" datatype="html">
+        <source>The activity&apos;s width determines how it appears on the screen. If two adjacent
+        activities are set to 50% each (or 67% and 33%, for example), they will appear side-by-side.</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/authoring-tool/edit-component-width/edit-component-width.component.ts</context>
+          <context context-type="linenumber">15,19</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8650499415827640724" datatype="html">