From 7479c3a5f01ce1e3e827f0c80d650b493417ddde Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Wed, 6 May 2026 16:38:43 -0700 Subject: [PATCH 1/6] feat(Authoring): Use slider to set activity width --- .../edit-component-width.component.ts | 51 ++++++++++++++----- src/messages.xlf | 13 +++-- 2 files changed, 48 insertions(+), 16 deletions(-) diff --git a/src/app/authoring-tool/edit-component-width/edit-component-width.component.ts b/src/app/authoring-tool/edit-component-width/edit-component-width.component.ts index afd02ef8bd6..541ded1c395 100644 --- a/src/app/authoring-tool/edit-component-width/edit-component-width.component.ts +++ b/src/app/authoring-tool/edit-component-width/edit-component-width.component.ts @@ -1,20 +1,45 @@ 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 { MatSliderModule } from '@angular/material/slider'; @Component({ - imports: [FormsModule, MatFormFieldModule, MatInputModule], + imports: [FormsModule, MatSliderModule], selector: 'edit-component-width', - template: ` - Activity Width - - ` + template: `Activity width: + + + + {{ selectedValue }}% +

+ *Setting the activities' widths determines how they appear on the screen. For example, if two + adjacent activities' widths are both set to 50%, they will appear side-by-side. +

` }) -export class EditComponentWidthComponent extends EditComponentFieldComponent {} +export class EditComponentWidthComponent extends EditComponentFieldComponent { + protected possibleValues = [25, 33, 50, 66, 75, 100]; + protected selectedIndex = 0; + protected selectedValue = this.possibleValues[0]; + + public override ngOnInit(): void { + super.ngOnInit(); + this.selectedValue = this.componentContent.componentWidth ?? 100; + this.selectedIndex = this.possibleValues.indexOf(this.selectedValue); + } + + protected formatLabel = (index: number): string => `${this.possibleValues[index]}%`; + + protected onSliderChange(event: any): void { + this.selectedValue = this.possibleValues[event.target.value]; + this.componentContent.componentWidth = this.selectedValue; + this.inputChanged.next(this.selectedValue); + } +} diff --git a/src/messages.xlf b/src/messages.xlf index f2d59366f21..6a9eee29454 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -1096,11 +1096,18 @@ 85 - - Activity Width + + Activity width: src/app/authoring-tool/edit-component-width/edit-component-width.component.ts - 11,15 + 9,12 + + + + *Setting the activities' widths determines how they appear on the screen. For example, if two adjacent activities' widths are both set to 50%, they will appear side-by-side. + + src/app/authoring-tool/edit-component-width/edit-component-width.component.ts + 23,27 From bb82d8c374a592645e57d334ef12354adb4b2496 Mon Sep 17 00:00:00 2001 From: Jonathan Lim-Breitbart Date: Thu, 7 May 2026 11:23:22 -0700 Subject: [PATCH 2/6] Update explanation text and change 66% option to 67% --- .../edit-component-width.component.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/app/authoring-tool/edit-component-width/edit-component-width.component.ts b/src/app/authoring-tool/edit-component-width/edit-component-width.component.ts index 541ded1c395..a74a2f518e9 100644 --- a/src/app/authoring-tool/edit-component-width/edit-component-width.component.ts +++ b/src/app/authoring-tool/edit-component-width/edit-component-width.component.ts @@ -6,7 +6,7 @@ import { MatSliderModule } from '@angular/material/slider'; @Component({ imports: [FormsModule, MatSliderModule], selector: 'edit-component-width', - template: `Activity width: + template: `Activity width:  {{ selectedValue }}%

- *Setting the activities' widths determines how they appear on the screen. For example, if two - adjacent activities' widths are both set to 50%, they will appear side-by-side. + *Setting 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.

` }) export class EditComponentWidthComponent extends EditComponentFieldComponent { - protected possibleValues = [25, 33, 50, 66, 75, 100]; + protected possibleValues = [25, 33, 50, 67, 75, 100]; protected selectedIndex = 0; protected selectedValue = this.possibleValues[0]; From 6d968d745e37b12b51f91783b2078ea557c294e3 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 7 May 2026 18:28:43 +0000 Subject: [PATCH 3/6] Updated messages --- src/messages.xlf | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/messages.xlf b/src/messages.xlf index 6a9eee29454..1641a49506c 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -1103,8 +1103,8 @@ 9,12 - - *Setting the activities' widths determines how they appear on the screen. For example, if two adjacent activities' widths are both set to 50%, they will appear side-by-side. + + *Setting 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. src/app/authoring-tool/edit-component-width/edit-component-width.component.ts 23,27 From cf88411c6f62b778bc60c23d832e64722c05f969 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Thu, 7 May 2026 16:34:02 -0700 Subject: [PATCH 4/6] Replace mat-slider with mat-button-toggle --- .../edit-component-width.component.ts | 55 +++++++++---------- src/messages.xlf | 13 +++-- 2 files changed, 33 insertions(+), 35 deletions(-) diff --git a/src/app/authoring-tool/edit-component-width/edit-component-width.component.ts b/src/app/authoring-tool/edit-component-width/edit-component-width.component.ts index a74a2f518e9..9e8739acd2c 100644 --- a/src/app/authoring-tool/edit-component-width/edit-component-width.component.ts +++ b/src/app/authoring-tool/edit-component-width/edit-component-width.component.ts @@ -1,45 +1,42 @@ import { Component } from '@angular/core'; -import { EditComponentFieldComponent } from '../edit-component-field.component'; import { FormsModule } from '@angular/forms'; -import { MatSliderModule } from '@angular/material/slider'; +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, MatSliderModule], + imports: [FormsModule, MatButtonToggleModule, MatIconModule, MatTooltipModule], selector: 'edit-component-width', - template: `Activity width:  - Activity widthhelp
+ - - - {{ selectedValue }}% -

- *Setting 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. -

` + @for (value of possibleValues; track $index) { + {{ value }}% + } + ` }) export class EditComponentWidthComponent extends EditComponentFieldComponent { protected possibleValues = [25, 33, 50, 67, 75, 100]; - protected selectedIndex = 0; - protected selectedValue = this.possibleValues[0]; + protected selectedValue = '100'; public override ngOnInit(): void { super.ngOnInit(); - this.selectedValue = this.componentContent.componentWidth ?? 100; - this.selectedIndex = this.possibleValues.indexOf(this.selectedValue); + this.selectedValue = String(this.componentContent.componentWidth ?? 100); } - protected formatLabel = (index: number): string => `${this.possibleValues[index]}%`; - - protected onSliderChange(event: any): void { - this.selectedValue = this.possibleValues[event.target.value]; - this.componentContent.componentWidth = this.selectedValue; - this.inputChanged.next(this.selectedValue); + protected onWidthChange(): void { + this.componentContent.componentWidth = Number(this.selectedValue); + this.inputChanged.next(Number(this.selectedValue)); } } diff --git a/src/messages.xlf b/src/messages.xlf index 1641a49506c..25303376eb6 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -1096,18 +1096,19 @@ 85 - - Activity width: + + Activity width src/app/authoring-tool/edit-component-width/edit-component-width.component.ts - 9,12 + 11,13 - - *Setting 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. + + *Setting 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. src/app/authoring-tool/edit-component-width/edit-component-width.component.ts - 23,27 + 13,18 From 6749f3f7f38a55b7811177f86ada5926f6f9c929 Mon Sep 17 00:00:00 2001 From: Jonathan Lim-Breitbart Date: Fri, 8 May 2026 15:28:40 -0700 Subject: [PATCH 5/6] Update styles and tooltip text --- .../edit-component-width.component.ts | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/app/authoring-tool/edit-component-width/edit-component-width.component.ts b/src/app/authoring-tool/edit-component-width/edit-component-width.component.ts index 9e8739acd2c..a235ec70548 100644 --- a/src/app/authoring-tool/edit-component-width/edit-component-width.component.ts +++ b/src/app/authoring-tool/edit-component-width/edit-component-width.component.ts @@ -8,13 +8,17 @@ import { EditComponentFieldComponent } from '../edit-component-field.component'; @Component({ imports: [FormsModule, MatButtonToggleModule, MatIconModule, MatTooltipModule], selector: 'edit-component-width', - template: `Activity widthhelp
+ template: `
+ Activity width + help +
Date: Fri, 8 May 2026 22:34:01 +0000 Subject: [PATCH 6/6] Updated messages --- src/messages.xlf | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/messages.xlf b/src/messages.xlf index 25303376eb6..e5ea8b971f0 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -1100,15 +1100,15 @@ Activity width src/app/authoring-tool/edit-component-width/edit-component-width.component.ts - 11,13 + 12,15 - - *Setting 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. + + 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. src/app/authoring-tool/edit-component-width/edit-component-width.component.ts - 13,18 + 15,19