From 2545fe162d00ff1c8d163d3e8b85ccddf9856222 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Sun, 12 Apr 2026 17:46:35 -0700 Subject: [PATCH 1/5] Rename activity names --- .../dialogGuidance/DialogGuidanceInfo.ts | 4 +- .../dialogGuidance/dialogGuidanceService.ts | 2 +- .../wise5/components/embedded/EmbeddedInfo.ts | 7 ++- .../components/embedded/embeddedService.ts | 2 +- src/assets/wise5/components/html/HtmlInfo.ts | 4 +- .../wise5/components/html/htmlService.ts | 2 +- .../wise5/components/match/MatchInfo.ts | 4 +- .../wise5/components/match/matchService.ts | 2 +- .../components/showMyWork/ShowMyWorkInfo.ts | 4 +- .../wise5/components/summary/SummaryInfo.ts | 4 +- .../components/summary/summaryService.ts | 2 +- src/messages.xlf | 54 +++++++++---------- 12 files changed, 45 insertions(+), 46 deletions(-) diff --git a/src/assets/wise5/components/dialogGuidance/DialogGuidanceInfo.ts b/src/assets/wise5/components/dialogGuidance/DialogGuidanceInfo.ts index 1dd03d84632..a38e2b3b2b9 100644 --- a/src/assets/wise5/components/dialogGuidance/DialogGuidanceInfo.ts +++ b/src/assets/wise5/components/dialogGuidance/DialogGuidanceInfo.ts @@ -2,10 +2,10 @@ import { ComponentInfo } from '../ComponentInfo'; export class DialogGuidanceInfo extends ComponentInfo { protected description: string = $localize`Students chat with a computer avatar about a specific topic.`; - protected label: string = $localize`Dialog Guidance`; + protected label: string = $localize`Dialog`; protected previewExamples: any[] = [ { - label: $localize`Dialog Guidance`, + label: $localize`Dialog`, content: { id: 'abcde12345', type: 'DialogGuidance', diff --git a/src/assets/wise5/components/dialogGuidance/dialogGuidanceService.ts b/src/assets/wise5/components/dialogGuidance/dialogGuidanceService.ts index 3d7b68a9669..253dec3846e 100644 --- a/src/assets/wise5/components/dialogGuidance/dialogGuidanceService.ts +++ b/src/assets/wise5/components/dialogGuidance/dialogGuidanceService.ts @@ -10,7 +10,7 @@ export class DialogGuidanceService extends ComponentService { } getComponentTypeLabel(): string { - return $localize`Dialog Guidance`; + return $localize`Dialog`; } createComponent() { diff --git a/src/assets/wise5/components/embedded/EmbeddedInfo.ts b/src/assets/wise5/components/embedded/EmbeddedInfo.ts index 1611727c7fc..9dce9918095 100644 --- a/src/assets/wise5/components/embedded/EmbeddedInfo.ts +++ b/src/assets/wise5/components/embedded/EmbeddedInfo.ts @@ -2,10 +2,10 @@ import { ComponentInfo } from '../ComponentInfo'; export class EmbeddedInfo extends ComponentInfo { protected description: string = $localize`Students interact with a custom applicatio, such as a model or simulation.`; - protected label: string = $localize`Embedded (Custom)`; + protected label: string = $localize`Custom`; protected previewExamples: any[] = [ { - label: $localize`Embedded`, + label: $localize`Custom`, content: { id: 'abcde12345', type: 'Embedded', @@ -13,8 +13,7 @@ export class EmbeddedInfo extends ComponentInfo { showSaveButton: false, showSubmitButton: false, showAddToNotebookButton: false, - url: - 'https://wise.berkeley.edu/curriculum/shared/plate-tectonics-convection-explorer/v1/index.html?maxWidth=900', + url: 'https://wise.berkeley.edu/curriculum/shared/plate-tectonics-convection-explorer/v1/index.html?maxWidth=900', height: 600, constraints: [] } diff --git a/src/assets/wise5/components/embedded/embeddedService.ts b/src/assets/wise5/components/embedded/embeddedService.ts index 8ecdc8c1c29..d82d5fa7a0e 100644 --- a/src/assets/wise5/components/embedded/embeddedService.ts +++ b/src/assets/wise5/components/embedded/embeddedService.ts @@ -27,7 +27,7 @@ export class EmbeddedService extends ComponentService { } getComponentTypeLabel(): string { - return $localize`Embedded (Custom)`; + return $localize`Custom`; } createComponent() { diff --git a/src/assets/wise5/components/html/HtmlInfo.ts b/src/assets/wise5/components/html/HtmlInfo.ts index 11e00f882e6..f6f3595a90f 100644 --- a/src/assets/wise5/components/html/HtmlInfo.ts +++ b/src/assets/wise5/components/html/HtmlInfo.ts @@ -2,10 +2,10 @@ import { ComponentInfo } from '../ComponentInfo'; export class HtmlInfo extends ComponentInfo { protected description: string = $localize`Students view rich text (HTML) content.`; - protected label: string = $localize`Rich Text (HTML)`; + protected label: string = $localize`Display Content`; protected previewExamples: any[] = [ { - label: $localize`Rich Text (HTML)`, + label: $localize`Display Content`, content: { id: 'abcde12345', type: 'HTML', diff --git a/src/assets/wise5/components/html/htmlService.ts b/src/assets/wise5/components/html/htmlService.ts index ea0649df0f4..644784511b7 100644 --- a/src/assets/wise5/components/html/htmlService.ts +++ b/src/assets/wise5/components/html/htmlService.ts @@ -4,7 +4,7 @@ import { Injectable } from '@angular/core'; @Injectable() export class HTMLService extends ComponentService { getComponentTypeLabel(): string { - return $localize`Rich Text (HTML)`; + return $localize`Display Content`; } createComponent() { diff --git a/src/assets/wise5/components/match/MatchInfo.ts b/src/assets/wise5/components/match/MatchInfo.ts index 8d24dd0d259..067b6dc941c 100644 --- a/src/assets/wise5/components/match/MatchInfo.ts +++ b/src/assets/wise5/components/match/MatchInfo.ts @@ -2,10 +2,10 @@ import { ComponentInfo } from '../ComponentInfo'; export class MatchInfo extends ComponentInfo { protected description: string = $localize`Students sort items into different buckets.`; - protected label: string = $localize`Match`; + protected label: string = $localize`Sort`; protected previewExamples: any[] = [ { - label: $localize`Match`, + label: $localize`Sort`, content: { id: 'abcde12345', type: 'Match', diff --git a/src/assets/wise5/components/match/matchService.ts b/src/assets/wise5/components/match/matchService.ts index 09a0f9f8fb5..9ca8dec00fc 100644 --- a/src/assets/wise5/components/match/matchService.ts +++ b/src/assets/wise5/components/match/matchService.ts @@ -5,7 +5,7 @@ import { MatchContent } from './MatchContent'; @Injectable() export class MatchService extends ComponentService { getComponentTypeLabel(): string { - return $localize`Match`; + return $localize`Sort`; } createComponent() { diff --git a/src/assets/wise5/components/showMyWork/ShowMyWorkInfo.ts b/src/assets/wise5/components/showMyWork/ShowMyWorkInfo.ts index 4a91b73fd1c..07aabd82e98 100644 --- a/src/assets/wise5/components/showMyWork/ShowMyWorkInfo.ts +++ b/src/assets/wise5/components/showMyWork/ShowMyWorkInfo.ts @@ -2,10 +2,10 @@ import { ComponentInfo } from '../ComponentInfo'; export class ShowMyWorkInfo extends ComponentInfo { protected description: string = $localize`Students are shown work that they submitted for a specific item.`; - protected label: string = $localize`Show My Work`; + protected label: string = $localize`Show Student Work`; protected previewExamples: any[] = [ { - label: $localize`Show My Work`, + label: $localize`Show Student Work`, content: { id: 'abcde12345', type: 'ShowMyWork', diff --git a/src/assets/wise5/components/summary/SummaryInfo.ts b/src/assets/wise5/components/summary/SummaryInfo.ts index 126e1608666..e072c05b5c9 100644 --- a/src/assets/wise5/components/summary/SummaryInfo.ts +++ b/src/assets/wise5/components/summary/SummaryInfo.ts @@ -2,10 +2,10 @@ import { ComponentInfo } from '../ComponentInfo'; export class SummaryInfo extends ComponentInfo { protected description: string = $localize`Students are shown an aggregate graph summarizing data from the class.`; - protected label: string = $localize`Summary`; + protected label: string = $localize`Graph Summary`; protected previewExamples: any[] = [ { - lable: $localize`Summary`, + lable: $localize`Graph Summary`, content: { id: 'abcde12345', type: 'Summary', diff --git a/src/assets/wise5/components/summary/summaryService.ts b/src/assets/wise5/components/summary/summaryService.ts index f28d143fc7c..34700b5d08b 100644 --- a/src/assets/wise5/components/summary/summaryService.ts +++ b/src/assets/wise5/components/summary/summaryService.ts @@ -37,7 +37,7 @@ export class SummaryService extends ComponentService { } getComponentTypeLabel(): string { - return $localize`Summary`; + return $localize`Graph Summary`; } createComponent() { diff --git a/src/messages.xlf b/src/messages.xlf index 4d3fe9d9a6c..45f301ba45a 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -2403,18 +2403,6 @@ src/app/contact/contact-form/contact-form.component.html 77,78 - - src/assets/wise5/components/summary/SummaryInfo.ts - 5 - - - src/assets/wise5/components/summary/SummaryInfo.ts - 8 - - - src/assets/wise5/components/summary/summaryService.ts - 40 - Summary required @@ -18545,8 +18533,8 @@ Category Name: 4 - - Dialog Guidance + + Dialog src/assets/wise5/components/dialogGuidance/DialogGuidanceInfo.ts 5 @@ -19743,23 +19731,20 @@ Category Name: 4 - - Embedded (Custom) + + Custom src/assets/wise5/components/embedded/EmbeddedInfo.ts 5 - - src/assets/wise5/components/embedded/embeddedService.ts - 30 - - - - Embedded src/assets/wise5/components/embedded/EmbeddedInfo.ts 8 + + src/assets/wise5/components/embedded/embeddedService.ts + 30 + Model Parameters @@ -20712,8 +20697,8 @@ Category Name: 4 - - Rich Text (HTML) + + Display Content src/assets/wise5/components/html/HtmlInfo.ts 5 @@ -20977,8 +20962,8 @@ Category Name: 4 - - Match + + Sort src/assets/wise5/components/match/MatchInfo.ts 5 @@ -22338,6 +22323,21 @@ If this problem continues, let your teacher know and move on to the next activit 4 + + Graph Summary + + src/assets/wise5/components/summary/SummaryInfo.ts + 5 + + + src/assets/wise5/components/summary/SummaryInfo.ts + 8 + + + src/assets/wise5/components/summary/summaryService.ts + 40 + + Choose the step and activity to show the summary data for: From 24ec480ae29261b9227933fc603394205692fa72 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Sun, 12 Apr 2026 19:22:54 -0700 Subject: [PATCH 2/5] Group activities by function --- .../choose-new-component.component.html | 15 ++-- .../choose-new-component.component.ts | 4 +- .../add-your-own-node.component.html | 17 +++-- .../add-your-own-node.component.ts | 4 +- .../wise5/services/componentTypeService.ts | 72 +++++++++++++------ src/messages.xlf | 53 ++++++++++---- 6 files changed, 113 insertions(+), 52 deletions(-) diff --git a/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.html b/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.html index 834b3cbe697..189b0c745f6 100644 --- a/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.html +++ b/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.html @@ -7,11 +7,16 @@

Add New Activity

- @for (componentType of componentTypes; track componentType.type) { - + @for (componentGroup of componentGroups; track componentGroup.name) { +
+

{{ componentGroup.name }}

+ @for (componentType of componentGroup.types; track componentType.type) { + + } +
}
diff --git a/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.ts b/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.ts index 6f0853e190c..e97582e5339 100644 --- a/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.ts +++ b/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.ts @@ -10,7 +10,7 @@ import { ComponentTypeService } from '../../../../assets/wise5/services/componen templateUrl: 'choose-new-component.component.html' }) export class ChooseNewComponent { - protected componentTypes: any[]; + protected componentGroups: any[]; constructor( private componentTypeService: ComponentTypeService, @@ -18,7 +18,7 @@ export class ChooseNewComponent { ) {} ngOnInit(): void { - this.componentTypes = this.componentTypeService.getComponentTypes(); + this.componentGroups = this.componentTypeService.getComponentGroups(); } protected goToImportComponent(): void { diff --git a/src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html b/src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html index 9cfd50bac1d..787cfa03da6 100644 --- a/src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html +++ b/src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html @@ -34,12 +34,17 @@
Select activities to add to your new step (optional):
- @for (componentType of componentTypes; track componentType.type) { -
- + @for (componentGroup of componentGroups; track componentGroup.name) { +
+

{{ componentGroup.name }}

+ @for (componentType of componentGroup.types; track componentType.type) { +
+ +
+ }
}
diff --git a/src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.ts b/src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.ts index 20c7769a2f9..36c9d133b8a 100644 --- a/src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.ts +++ b/src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.ts @@ -44,7 +44,7 @@ export class AddYourOwnNodeComponent { protected addNodeFormGroup: FormGroup = this.fb.group({ title: new FormControl($localize`New Step`, [Validators.required]) }); - protected componentTypes: any[]; + protected componentGroups: any[]; protected initialComponents: string[] = []; protected submitting: boolean; protected target: AddStepTarget; @@ -58,7 +58,7 @@ export class AddYourOwnNodeComponent { private route: ActivatedRoute, private router: Router ) { - this.componentTypes = this.componentTypeService.getComponentTypes(); + this.componentGroups = this.componentTypeService.getComponentGroups(); } ngOnInit(): void { diff --git a/src/assets/wise5/services/componentTypeService.ts b/src/assets/wise5/services/componentTypeService.ts index 38bb59c5cbb..caea190606d 100644 --- a/src/assets/wise5/services/componentTypeService.ts +++ b/src/assets/wise5/services/componentTypeService.ts @@ -11,32 +11,58 @@ export class ComponentTypeService { private userService: UserService ) {} - getComponentTypes(): any[] { - const componentTypes = [ - { type: 'Animation', name: this.getComponentTypeLabel('Animation') }, - { type: 'AudioOscillator', name: this.getComponentTypeLabel('AudioOscillator') }, - { type: 'ConceptMap', name: this.getComponentTypeLabel('ConceptMap') }, - { type: 'DialogGuidance', name: this.getComponentTypeLabel('DialogGuidance') }, - { type: 'Discussion', name: this.getComponentTypeLabel('Discussion') }, - { type: 'Draw', name: this.getComponentTypeLabel('Draw') }, - { type: 'Embedded', name: this.getComponentTypeLabel('Embedded') }, - { type: 'Graph', name: this.getComponentTypeLabel('Graph') }, - { type: 'Label', name: this.getComponentTypeLabel('Label') }, - { type: 'Match', name: this.getComponentTypeLabel('Match') }, - { type: 'MultipleChoice', name: this.getComponentTypeLabel('MultipleChoice') }, - { type: 'OpenResponse', name: this.getComponentTypeLabel('OpenResponse') }, - { type: 'OutsideURL', name: this.getComponentTypeLabel('OutsideURL') }, - { type: 'PeerChat', name: this.getComponentTypeLabel('PeerChat') }, - { type: 'HTML', name: this.getComponentTypeLabel('HTML') }, - { type: 'ShowGroupWork', name: this.getComponentTypeLabel('ShowGroupWork') }, - { type: 'ShowMyWork', name: this.getComponentTypeLabel('ShowMyWork') }, - { type: 'Summary', name: this.getComponentTypeLabel('Summary') }, - { type: 'Table', name: this.getComponentTypeLabel('Table') } + getComponentGroups(): any[] { + const groups = [ + { + name: $localize`View Information`, + types: [ + { type: 'HTML', name: this.getComponentTypeLabel('HTML') }, + { type: 'Summary', name: this.getComponentTypeLabel('Summary') }, + { type: 'ShowMyWork', name: this.getComponentTypeLabel('ShowMyWork') } + ] + }, + { + name: $localize`Explain and Assess`, + types: [ + { type: 'ConceptMap', name: this.getComponentTypeLabel('ConceptMap') }, + { type: 'Draw', name: this.getComponentTypeLabel('Draw') }, + { type: 'Label', name: this.getComponentTypeLabel('Label') }, + { type: 'MultipleChoice', name: this.getComponentTypeLabel('MultipleChoice') }, + { type: 'OpenResponse', name: this.getComponentTypeLabel('OpenResponse') }, + { type: 'Match', name: this.getComponentTypeLabel('Match') } + ] + }, + { + name: $localize`Collaborate`, + types: [ + { type: 'DialogGuidance', name: this.getComponentTypeLabel('DialogGuidance') }, + { type: 'Discussion', name: this.getComponentTypeLabel('Discussion') }, + { type: 'PeerChat', name: this.getComponentTypeLabel('PeerChat') }, + { type: 'ShowGroupWork', name: this.getComponentTypeLabel('ShowGroupWork') } + ] + }, + { + name: $localize`Experiment, Discover and Distinguish`, + types: [ + { type: 'Animation', name: this.getComponentTypeLabel('Animation') }, + { type: 'AudioOscillator', name: this.getComponentTypeLabel('AudioOscillator') }, + { type: 'Embedded', name: this.getComponentTypeLabel('Embedded') }, + { type: 'Graph', name: this.getComponentTypeLabel('Graph') }, + { type: 'OutsideURL', name: this.getComponentTypeLabel('OutsideURL') }, + { type: 'Table', name: this.getComponentTypeLabel('Table') } + ] + } ]; + if (this.isAiChatAllowed()) { - componentTypes.unshift({ type: 'AiChat', name: this.getComponentTypeLabel('AiChat') }); + groups[2].types.unshift({ type: 'AiChat', name: this.getComponentTypeLabel('AiChat') }); } - return componentTypes; + + return groups; + } + + getComponentTypes(): any[] { + return this.getComponentGroups().flatMap((group) => group.types); } getComponentTypeLabel(componentType: string): string { diff --git a/src/messages.xlf b/src/messages.xlf index 45f301ba45a..735161d4a47 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -405,7 +405,7 @@ Cancel src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.html - 19,21 + 24,26 src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.html @@ -469,7 +469,7 @@ src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html - 58,62 + 61,65 src/assets/wise5/authoringTool/addNode/choose-new-node-template/choose-new-node-template.component.html @@ -1594,7 +1594,7 @@ src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html - 55,58 + 58,61 src/assets/wise5/authoringTool/addNode/choose-automated-assessment/choose-automated-assessment.component.html @@ -1677,7 +1677,7 @@ src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html - 69,74 + 72,77 src/assets/wise5/authoringTool/addNode/choose-simulation/choose-simulation.component.html @@ -10422,7 +10422,7 @@ *Note: You can always add or remove content later by editing the step. src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html - 47,52 + 50,55 @@ -22291,8 +22291,8 @@ If this problem continues, let your teacher know and move on to the next activit 4 - - Show My Work + + Show Student Work src/assets/wise5/components/showMyWork/ShowMyWorkInfo.ts 5 @@ -22301,6 +22301,10 @@ If this problem continues, let your teacher know and move on to the next activit src/assets/wise5/components/showMyWork/ShowMyWorkInfo.ts 8 + + src/assets/wise5/components/showMyWork/showMyWorkService.ts + 7 + (No response) @@ -22309,13 +22313,6 @@ If this problem continues, let your teacher know and move on to the next activit 5,8 - - Show Student Work - - src/assets/wise5/components/showMyWork/showMyWorkService.ts - 7 - - Students are shown an aggregate graph summarizing data from the class. @@ -23346,6 +23343,34 @@ If this problem continues, let your teacher know and move on to the next activit 23 + + View Information + + src/assets/wise5/services/componentTypeService.ts + 17 + + + + Explain and Assess + + src/assets/wise5/services/componentTypeService.ts + 25 + + + + Collaborate + + src/assets/wise5/services/componentTypeService.ts + 36 + + + + Experiment, Discover and Distinguish + + src/assets/wise5/services/componentTypeService.ts + 45 + + Ermina From 4a5aa3dab90a98b6ab48a04aae74298ce5b13c65 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Mon, 13 Apr 2026 02:37:37 +0000 Subject: [PATCH 3/5] Updated messages --- src/messages.xlf | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/messages.xlf b/src/messages.xlf index 735161d4a47..5047ae9b909 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -469,7 +469,7 @@ src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html - 61,65 + 63,67 src/assets/wise5/authoringTool/addNode/choose-new-node-template/choose-new-node-template.component.html @@ -1594,7 +1594,7 @@ src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html - 58,61 + 60,63 src/assets/wise5/authoringTool/addNode/choose-automated-assessment/choose-automated-assessment.component.html @@ -1677,7 +1677,7 @@ src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html - 72,77 + 74,79 src/assets/wise5/authoringTool/addNode/choose-simulation/choose-simulation.component.html @@ -10422,7 +10422,7 @@ *Note: You can always add or remove content later by editing the step. src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html - 50,55 + 52,57 From 7fc0b4e3d74abf3497f4a94c9f0ed68a258a0079 Mon Sep 17 00:00:00 2001 From: Jonathan Lim-Breitbart Date: Thu, 16 Apr 2026 11:16:44 -0700 Subject: [PATCH 4/5] Extract component type group to new component; update styles and layout --- .../choose-new-component.component.html | 18 ++++------- .../choose-new-component.component.ts | 4 +-- .../component-type-group.component.html | 17 ++++++++++ .../component-type-group.component.ts | 32 +++++++++++++++++++ .../add-your-own-node.component.html | 32 ++++++++----------- .../add-your-own-node.component.scss | 4 +-- .../add-your-own-node.component.ts | 4 +-- .../component-type-button.component.scss | 2 ++ .../wise5/components/summary/SummaryInfo.ts | 4 +-- .../components/summary/summaryService.ts | 2 +- .../wise5/services/componentTypeService.ts | 24 +++++++------- 11 files changed, 92 insertions(+), 51 deletions(-) create mode 100644 src/app/authoring-tool/component-type-group/component-type-group.component.html create mode 100644 src/app/authoring-tool/component-type-group/component-type-group.component.ts diff --git a/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.html b/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.html index 189b0c745f6..219b3414936 100644 --- a/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.html +++ b/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.html @@ -1,22 +1,18 @@

Add New Activity

- +

Select the activity you want to add or

-
+
@for (componentGroup of componentGroups; track componentGroup.name) { -
-

{{ componentGroup.name }}

- @for (componentType of componentGroup.types; track componentType.type) { - - } -
+ }
diff --git a/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.ts b/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.ts index e97582e5339..fed1044daaf 100644 --- a/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.ts +++ b/src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatDialogModule, MatDialogRef } from '@angular/material/dialog'; -import { ComponentTypeButtonComponent } from '../../../../assets/wise5/authoringTool/components/component-type-button/component-type-button.component'; +import { ComponentTypeGroupComponent } from '../../component-type-group/component-type-group.component'; import { ComponentTypeService } from '../../../../assets/wise5/services/componentTypeService'; @Component({ - imports: [ComponentTypeButtonComponent, MatButtonModule, MatDialogModule], + imports: [ComponentTypeGroupComponent, MatButtonModule, MatDialogModule], styles: ['component-type-button { width: 250px; padding: 4px; }'], templateUrl: 'choose-new-component.component.html' }) diff --git a/src/app/authoring-tool/component-type-group/component-type-group.component.html b/src/app/authoring-tool/component-type-group/component-type-group.component.html new file mode 100644 index 00000000000..1266707dd83 --- /dev/null +++ b/src/app/authoring-tool/component-type-group/component-type-group.component.html @@ -0,0 +1,17 @@ + + + {{ componentGroup.name }} + + +
+
+ @for (componentType of componentGroup.types; track componentType.type) { + + } +
+
+
+
diff --git a/src/app/authoring-tool/component-type-group/component-type-group.component.ts b/src/app/authoring-tool/component-type-group/component-type-group.component.ts new file mode 100644 index 00000000000..7bad6974d2f --- /dev/null +++ b/src/app/authoring-tool/component-type-group/component-type-group.component.ts @@ -0,0 +1,32 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { ComponentTypeButtonComponent } from '../../../assets/wise5/authoringTool/components/component-type-button/component-type-button.component'; +import { MatCardModule } from '@angular/material/card'; + +@Component({ + imports: [ComponentTypeButtonComponent, MatCardModule], + selector: 'component-type-group', + styles: ` + @import 'tailwindcss'; + :host { + --mat-card-filled-container-color: var(--color-gray-100); + --mat-card-title-text-size: var(--mat-sys-title-medium-font-size); + --mat-card-title-text-line-height: var(--mat-sys-title-medium-line-height); + } + .mat-mdc-card-header { + padding: 12px 12px 0; + } + .mat-mdc-card-content { + padding-left: 12px; + padding-right: 12px; + + &:last-child { + padding-bottom: 12px; + } + } + `, + templateUrl: './component-type-group.component.html' +}) +export class ComponentTypeGroupComponent { + @Input() componentGroup: any; + @Output() componentSelectedEvent = new EventEmitter(); +} diff --git a/src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html b/src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html index 787cfa03da6..ad5d8f4b16f 100644 --- a/src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html +++ b/src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html @@ -1,4 +1,4 @@ -
+ Step Title @@ -7,8 +7,11 @@ }
Select activities to add to your new step (optional):
-
-
+

+ *Note: You can always add or remove content later by editing the step. +

+
+
@if (initialComponents.length == 0) {
No activities added
} @@ -32,25 +35,16 @@
Select activities to add to your new step (optional):
}
-
-
+
+
@for (componentGroup of componentGroups; track componentGroup.name) { -
-

{{ componentGroup.name }}

- @for (componentType of componentGroup.types; track componentType.type) { -
- -
- } -
+ }
-

- *Note: You can always add or remove content later by editing the step. -