Skip to content

style(Computer Avatar Selector): Improve selection flow #2293

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hirokiterashima merged 4 commits into from
Apr 2, 2026
Merged

style(Computer Avatar Selector): Improve selection flow #2293

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b7d4b9b
style(Computer Avatar Selector): Make selection flow more obvious
hirokiterashima Mar 27, 2026
a686041
Add bounce animation to continue button
breity Apr 1, 2026
d14bbbd
Updated messages
github-actions[bot] Apr 1, 2026
d99872c
Revert avatar names to regular case
breity Apr 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 46 additions & 34 deletions src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,41 +4,53 @@
<div class="mat-body-2" [innerHtml]="computerAvatarSettings.prompt"></div>
<mat-divider />
}
@if (avatars.length === 1) {
<div class="mat-subtitle-2 accent" i18n>Your {{ label }}:</div>
} @else {
@if (selectedAvatar == null) {
<div class="mat-subtitle-2 accent" i18n>Choose Your {{ label }}:</div>
<div class="flex flex-wrap mt-2">
@for (avatar of avatars; track avatar.id) {
<button
class="avatar-button"
matButton
[value]="avatar"
(click)="selectedAvatar = avatar"
aria-label="{{ avatar.name }}"
>
<img [src]="avatarsPath + avatar.image" alt="{{ avatar.name }}" class="avatar-image" />
<div class="name">
<b>{{ avatar.name }}</b>
</div>
</button>
}
</div>
} @else {
<div class="mat-subtitle-2 accent" i18n>Your {{ label }}:</div>
<span class="flex flex-col items-center">
<img
[src]="avatarsPath + selectedAvatar.image"
alt="{{ selectedAvatar.name }}"
class="selected-avatar-image"
/>
<div class="selected-avatar-name">
<b>{{ selectedAvatar.name }}</b>
</div>
</span>
}
<mat-button-toggle-group
[(ngModel)]="selectedAvatar"
[disabled]="avatars.length === 1"
class="flex flex-wrap"
aria-label="Selected avatar"
i18n-aria-label
>
@for (avatar of avatars; track avatar.id) {
<mat-button-toggle
[value]="avatar"
(click)="selectedAvatar = avatar"
aria-label="{{ avatar.name }}"
>
<img [src]="avatarsPath + avatar.image" alt="{{ avatar.name }}" class="avatar-image" />
<div class="name">
<b>{{ avatar.name }}</b>
</div>
</mat-button-toggle>
}
</mat-button-toggle-group>
</mat-card-content>
<mat-card-actions align="end">
<button
mat-flat-button
color="primary"
[disabled]="selectedAvatar == null"
(click)="chooseAvatarEvent.emit(this.selectedAvatar)"
i18n
>
Continue
</button>
</mat-card-actions>
@if (selectedAvatar != null) {
<mat-card-actions class="flex justify-end">
@if (avatars.length > 1) {
<button mat-flat-button (click)="selectedAvatar = null" i18n>Back</button>
<span class="flex-grow"></span>
}
<button
mat-flat-button
color="primary"
class="motion-safe:animate-bounce"
(click)="chooseAvatarEvent.emit(this.selectedAvatar)"
i18n
>
Chat with {{ selectedAvatar.name }}
</button>
</mat-card-actions>
}
</mat-card>
47 changes: 28 additions & 19 deletions src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,36 +11,45 @@
}
}

/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
.mat-button-toggle-group {
border: 0 none;
margin-top: 16px;
.avatar-button{
height: auto;
text-transform: none;
}

/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
.mat-button-toggle-group-appearance-standard {
/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
.mat-button-toggle, .mat-button-toggle + .mat-button-toggle {
border-left: 0 none;
border-radius: variables.$card-border-radius;
margin: 4px;
}
.avatar-image {
width: 88px;
height: auto;
border-radius: 50%;
padding: 8px 0;
}

/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
.mat-button-toggle-disabled.mat-button-toggle-checked {
background-color: transparent;
.name {
line-height: 1;
padding-bottom: 8px;
}

.avatar-image {
width: 88px;

.selected-avatar-image {
width: 168px;
height: auto;
border-radius: 50%;
padding: 8px 0;
}

.name {
.selected-avatar-name {
line-height: 1;
padding-bottom: 8px;
}

@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.06);
}
}

.pulse {
animation: pulse 2s ease-in-out infinite;
}
42 changes: 37 additions & 5 deletions src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,21 +33,53 @@ describe('ComputerAvatarSelectorComponent', () => {

ngOnInit();
selectAvatar();
onlyOneAvatar();
});

function onlyOneAvatar() {
describe('only one avatar', () => {
beforeEach(() => {
component.computerAvatarSettings.ids = ['robot'];
component.ngOnInit();
fixture.detectChanges();
});

it('should automatically select the avatar and only show the continue button', () => {
expect(fixture.debugElement.queryAll(By.css('.avatar-button')).length).toEqual(0);
expect(fixture.debugElement.query(By.css('.selected-avatar-image'))).toBeTruthy();
expect(
fixture.debugElement.query(By.css('.selected-avatar-name')).nativeElement.textContent.trim()
).toEqual('Robot');

const backButton = fixture.debugElement
.queryAll(By.css('button'))
.find((btn) => btn.nativeElement.textContent.includes('Back'));

expect(getContinueButton()).toBeTruthy();
expect(backButton).toBeUndefined();
});

it('clicking continue should emit selected avatar', () => {
const spy = spyOn(component.chooseAvatarEvent, 'emit');
getContinueButton().nativeElement.click();
fixture.detectChanges();
expect(spy).toHaveBeenCalledWith(avatars[0]);
});
});
}

function ngOnInit() {
describe('ngOnInit()', () => {
it('should show avatars and the continue button should be disabled', () => {
expect(fixture.debugElement.queryAll(By.css('mat-button-toggle')).length).toEqual(2);
expect(getContinueButton().nativeElement.disabled).toBeTrue();
it('should show avatars', () => {
expect(fixture.debugElement.queryAll(By.css('.avatar-button')).length).toEqual(2);
});
});
}

function selectAvatar() {
describe('select avatar', () => {
beforeEach(() => {
fixture.debugElement.queryAll(By.css('mat-button-toggle'))[0].nativeElement.click();
fixture.debugElement.queryAll(By.css('.avatar-button'))[0].nativeElement.click();
fixture.detectChanges();
});
it('should enable the continue button', () => {
Expand All @@ -72,5 +104,5 @@ function clickContinueButton_shouldEmitAvatar() {
function getContinueButton() {
return fixture.debugElement
.queryAll(By.css('button'))
.find((buttonDebugEl) => buttonDebugEl.nativeElement.textContent.includes('Continue'));
.find((buttonDebugEl) => buttonDebugEl.nativeElement.textContent.includes('Chat with'));
}
3 changes: 1 addition & 2 deletions src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,13 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatDividerModule } from '@angular/material/divider';
import { ComputerAvatar } from '../../common/computer-avatar/ComputerAvatar';
import { ComputerAvatarService } from '../../services/computerAvatarService';
import { ComputerAvatarSettings } from '../../common/computer-avatar/ComputerAvatarSettings';

@Component({
imports: [FormsModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatDividerModule],
imports: [FormsModule, MatButtonModule, MatCardModule, MatDividerModule],
selector: 'computer-avatar-selector',
styleUrl: './computer-avatar-selector.component.scss',
templateUrl: './computer-avatar-selector.component.html'
Expand Down
25 changes: 11 additions & 14 deletions src/messages.xlf
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1551,6 +1551,10 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
<context context-type="sourcefile">src/assets/wise5/classroomMonitor/dataExport/export-student-work/export-student-work.component.html</context>
<context context-type="linenumber">7,10</context>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.html</context>
<context context-type="linenumber">42,46</context>
</context-group>
</trans-unit>
<trans-unit id="8132424293432274889" datatype="html">
<source> Back </source>
Expand Down Expand Up @@ -23258,32 +23262,25 @@ If this problem continues, let your teacher know and move on to the next activit
<context context-type="linenumber">70,73</context>
</context-group>
</trans-unit>
<trans-unit id="5926207769041293626" datatype="html">
<source>Your <x id="INTERPOLATION" equiv-text="{{ label }}"/>:</source>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.html</context>
<context context-type="linenumber">8,9</context>
</context-group>
</trans-unit>
<trans-unit id="2670863509967113900" datatype="html">
<source>Choose Your <x id="INTERPOLATION" equiv-text="{{ label }}"/>:</source>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.html</context>
<context context-type="linenumber">10,12</context>
<context context-type="linenumber">8,9</context>
</context-group>
</trans-unit>
<trans-unit id="4626694020452925586" datatype="html">
<source>Selected avatar</source>
<trans-unit id="5926207769041293626" datatype="html">
<source>Your <x id="INTERPOLATION" equiv-text="{{ label }}"/>:</source>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.html</context>
<context context-type="linenumber">16,19</context>
<context context-type="linenumber">26,27</context>
</context-group>
</trans-unit>
<trans-unit id="2917314929120683887" datatype="html">
<source> Continue </source>
<trans-unit id="962551360143606449" datatype="html">
<source> Chat with <x id="INTERPOLATION" equiv-text="{{ selectedAvatar.name }}"/> </source>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/vle/computer-avatar-selector/computer-avatar-selector.component.html</context>
<context context-type="linenumber">41,45</context>
<context context-type="linenumber">52,54</context>
</context-group>
</trans-unit>
<trans-unit id="1098411996448900439" datatype="html">
Expand Down
Loading