style(Component Selection): Group by function (#2302)

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

Author: hirokiterashima

src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.html

@@ -1,16 +1,17 @@
 <h2 mat-dialog-title i18n>Add New Activity</h2>
-<mat-dialog-content>
+<mat-dialog-content class="@container">
   <p class="flex flex-wrap justify-start items-center gap-2">
     <span i18n>Select the activity you want to add or</span>
     <button mat-raised-button color="primary" (click)="goToImportComponent()" i18n>
       import from another unit
     </button>
   </p>
-  <div class="flex flex-wrap justify-start items-center">
-    @for (componentType of componentTypes; track componentType.type) {
-      <component-type-button
-        [componentType]="componentType.type"
-        (componentSelectedEvent)="selectComponent(componentType.type)"
+  <div class="@lg:columns-2 @2xl:columns-3 @4xl:columns-4 gap-2">
+    @for (componentGroup of componentGroups; track componentGroup.name) {
+      <component-type-group
+        class="mb-2 block break-inside-avoid-column"
+        [componentGroup]="componentGroup"
+        (componentSelectedEvent)="selectComponent($event.type)"
       />
     }
   </div>

src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.ts

@@ -1,24 +1,24 @@
 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,
     private dialogRef: MatDialogRef<ChooseNewComponent>
   ) {}
 
   ngOnInit(): void {
-    this.componentTypes = this.componentTypeService.getComponentTypes();
+    this.componentGroups = this.componentTypeService.getComponentGroups();
   }
 
   protected goToImportComponent(): void {

src/app/authoring-tool/component-type-group/component-type-group.component.html

@@ -0,0 +1,17 @@
+<mat-card appearance="filled">
+  <mat-card-header>
+    <mat-card-title class="pb-2">{{ componentGroup.name }}</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <div class="@container">
+      <div class="grid @sm:grid-cols-2 gap-2">
+        @for (componentType of componentGroup.types; track componentType.type) {
+          <component-type-button
+            [componentType]="componentType.type"
+            (componentSelectedEvent)="componentSelectedEvent.emit(componentType)"
+          />
+        }
+      </div>
+    </div>
+  </mat-card-content>
+</mat-card>

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<any>();
+}

src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html

@@ -1,4 +1,4 @@
-<form role="form" [formGroup]="addNodeFormGroup">
+<form role="form" [formGroup]="addNodeFormGroup" class="@container">
   <mat-form-field appearance="fill" class="title-field">
     <mat-label i18n>Step Title</mat-label>
     <input matInput type="text" id="title" name="title" formControlName="title" required />
@@ -7,8 +7,11 @@
     }
   </mat-form-field>
   <h5 i18n>Select activities to add to your new step (optional):</h5>
-  <div class="flex flex-col md:flex-row">
-    <div class="initial-components notice-bg-bg flex items-start md:w-1/3 lg:w-1/4">
+  <p class="info mat-small" i18n>
+    *Note: You can always add or remove content later by editing the step.
+  </p>
+  <div class="grid @lg:grid-cols-2 @2xl:grid-cols-3 gap-3">
+    <div class="initial-components flex items-start p-3">
       @if (initialComponents.length == 0) {
         <div class="mat-small" i18n>No activities added</div>
       }
@@ -32,20 +35,16 @@ <h5 i18n>Select activities to add to your new step (optional):</h5>
         </div>
       }
     </div>
-    <div class="flex flex-col md:w-2/3 lg:w-3/4">
-      <div class="flex flex-wrap justify-stretch items-center">
-        @for (componentType of componentTypes; track componentType.type) {
-          <div class="component-type">
-            <component-type-button
-              [componentType]="componentType.type"
-              (componentSelectedEvent)="addComponent(componentType)"
-            />
-          </div>
+    <div class="flex flex-col @2xl:col-span-2 @container">
+      <div class="@2xl:columns-2 gap-2">
+        @for (componentGroup of componentGroups; track componentGroup.name) {
+          <component-type-group
+            class="mb-2 block break-inside-avoid-column"
+            [componentGroup]="componentGroup"
+            (componentSelectedEvent)="addComponent($event)"
+          />
         }
       </div>
-      <p class="info mat-small" i18n>
-        *Note: You can always add or remove content later by editing the step.
-      </p>
     </div>
   </div>
   <div class="nav-controls">

src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.scss

@@ -1,4 +1,5 @@
 @use '@angular/material' as mat;
+@import 'tailwindcss';
 
 $border-color: #dddddd;
 $transform: transform 250ms cubic-bezier(0, 0, 0.2, 1);
@@ -10,8 +11,7 @@ $transform: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
 
 .initial-components {
-  padding: 8px;
-  margin: 4px;
+  background-color: var(--color-gray-100);
 }
 
 .component-list {

src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.ts

@@ -14,7 +14,7 @@ import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
-import { ComponentTypeButtonComponent } from '../../components/component-type-button/component-type-button.component';
+import { ComponentTypeGroupComponent } from '../../../../../app/authoring-tool/component-type-group/component-type-group.component';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatButtonModule } from '@angular/material/button';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
@@ -25,7 +25,7 @@ import { ensureDefaultIcon } from '../../../common/Node';
 
 @Component({
   imports: [
-    ComponentTypeButtonComponent,
+    ComponentTypeGroupComponent,
     DragDropModule,
     FormsModule,
     MatButtonModule,
@@ -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 {

src/assets/wise5/authoringTool/components/component-type-button/component-type-button.component.scss

@@ -6,4 +6,6 @@ mat-card {
   width: 100%;
   justify-content: flex-start;
   text-transform: capitalize;
+  text-align: start;
+  padding: 0 8px;
 }

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',

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() {