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..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,16 +1,17 @@

Add New Activity

- +

Select the activity you want to add or

-
- @for (componentType of componentTypes; track componentType.type) { - + @for (componentGroup of componentGroups; track componentGroup.name) { + }
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..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,16 +1,16 @@ 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' }) 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/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 9cfd50bac1d..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,20 +35,16 @@
Select activities to add to your new step (optional):
}
-
-
- @for (componentType of componentTypes; track componentType.type) { -
- -
+
+
+ @for (componentGroup of componentGroups; track componentGroup.name) { + }
-

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