feat(VLE): Separate activities visually in step view

src/app/possible-score/possible-score.component.html

@@ -1,9 +1,7 @@
 @if (maxScore > 0 && !hidePossibleScores) {
-  <span class="gray-darker md-body-1 possible-score">
-    @if (maxScore === 1) {
-      (<span i18n>{{ maxScore }} point</span>)
-    } @else {
-      (<span i18n>{{ maxScore }} points</span>)
-    }
-  </span>
+  @if (maxScore === 1) {
+    <span i18n class="rounded-md notice-bg-bg mat-caption p-1">{{ maxScore }} point</span>
+  } @else {
+    <span i18n class="rounded-md notice-bg-bg mat-caption p-1">{{ maxScore }} points</span>
+  }
 }

src/assets/wise5/authoringTool/components/edit-component-title/edit-component-title.component.ts

@@ -11,7 +11,7 @@ import { TranslatableInputComponent } from '../translatable-input/translatable-i
     <translatable-input
       [content]="componentContent"
       [hasClearButton]="true"
-      key="title"
+      key="componentTitle"
       label="Activity Title"
       i18n-label
       (defaultLanguageTextChanged)="titleChanged($event)"
@@ -23,7 +23,7 @@ export class EditComponentTitleComponent {
   private projectService = inject(TeacherProjectService);
 
   titleChanged(title: string): void {
-    this.componentContent.title = title;
+    this.componentContent.componentTitle = title;
     this.projectService.saveProject();
   }
 }

src/assets/wise5/common/ComponentContent.ts

@@ -9,11 +9,11 @@ export interface ComponentContent {
   };
   anonymizeResponses?: boolean;
   connectedComponents?: any[];
+  componentTitle?: string;
   constraints?: any[];
   cRaterRubric?: CRaterRubric;
   dynamicPrompt?: DynamicPrompt;
   excludeFromTotalScore?: boolean;
-  title?: string;
   maxScore?: number;
   maxSubmitCount?: number;
   prompt?: string;

src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.html

@@ -5,19 +5,17 @@
   />
 }
 @if (!computerAvatarSelectorVisible) {
-  <mat-card appearance="outlined" class="mat-elevation-z2">
-    <component-header [component]="component" />
-    <div #messagesContainer class="messages">
-      <ai-chat-messages
-        [messages]="messages"
-        [workgroupId]="workgroupId"
-        [waitingForComputerResponse]="waitingForComputerResponse"
-        [computerAvatar]="computerAvatar"
-      />
-    </div>
-    <chat-input
-      [submitDisabled]="waitingForComputerResponse"
-      (submitEvent)="submitStudentResponse($event)"
+  <component-header [component]="component" />
+  <div #messagesContainer class="messages">
+    <ai-chat-messages
+      [messages]="messages"
+      [workgroupId]="workgroupId"
+      [waitingForComputerResponse]="waitingForComputerResponse"
+      [computerAvatar]="computerAvatar"
     />
-  </mat-card>
+  </div>
+  <chat-input
+    [submitDisabled]="waitingForComputerResponse"
+    (submitEvent)="submitStudentResponse($event)"
+  />
 }

src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.scss

@@ -1,11 +1,3 @@
-@use 'style/abstracts/functions';
-
-.mat-mdc-card {
-  padding: 12px;
-  margin-top: 16px;
-  max-width: functions.breakpoint('sm.min');
-}
-
 .messages {
   margin-bottom: 12px;
   max-height: 500px;

src/assets/wise5/components/aiChat/ai-chat-student/ai-chat-student.component.ts

@@ -18,7 +18,6 @@ import { ComputerAvatarInitializer } from '../../../common/computer-avatar/compu
 import { ComputerAvatarService } from '../../../services/computerAvatarService';
 import { StudentStatusService } from '../../../services/studentStatusService';
 import { ComputerAvatarSelectorComponent } from '../../../vle/computer-avatar-selector/computer-avatar-selector.component';
-import { MatCard } from '@angular/material/card';
 import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component';
 import { ChatInputComponent } from '../../../common/chat-input/chat-input.component';
 import { AiChatMessagesComponent } from '../ai-chat-messages/ai-chat-messages.component';
@@ -28,8 +27,7 @@ import { AiChatMessagesComponent } from '../ai-chat-messages/ai-chat-messages.co
     AiChatMessagesComponent,
     ChatInputComponent,
     ComponentHeaderComponent,
-    ComputerAvatarSelectorComponent,
-    MatCard
+    ComputerAvatarSelectorComponent
   ],
   styleUrl: './ai-chat-student.component.scss',
   templateUrl: './ai-chat-student.component.html'

src/assets/wise5/components/dialogGuidance/dialog-guidance-show-work/dialog-guidance-show-work.component.ts

@@ -4,28 +4,25 @@ import { ComputerAvatarService } from '../../../services/computerAvatarService';
 import { NodeService } from '../../../services/nodeService';
 import { ProjectService } from '../../../services/projectService';
 import { ComponentShowWorkDirective } from '../../component-show-work.directive';
-import { MatCardModule } from '@angular/material/card';
 import { DialogResponsesComponent } from '../dialog-responses/dialog-responses.component';
 import { CRaterRubric } from '../../common/cRater/CRaterRubric';
 import { CRaterService } from '../../../services/cRaterService';
 import { UserService } from '../../../../../app/services/user.service';
 
 @Component({
-  imports: [DialogResponsesComponent, MatCardModule],
+  imports: [DialogResponsesComponent],
   selector: 'dialog-guidance-show-work',
   styleUrls: [
     '../dialog-guidance-student/dialog-guidance-student.component.scss',
     './dialog-guidance-show-work.component.scss'
   ],
   template: `
-    <mat-card appearance="outlined" class="mat-elevation-z2">
-      <dialog-responses
-        [computerAvatar]="computerAvatar"
-        [cRaterRubric]="cRaterRubric"
-        [responses]="componentState.studentData.responses"
-        [showDetectedIdeas]="showDetectedIdeas"
-      />
-    </mat-card>
+    <dialog-responses
+      [computerAvatar]="computerAvatar"
+      [cRaterRubric]="cRaterRubric"
+      [responses]="componentState.studentData.responses"
+      [showDetectedIdeas]="showDetectedIdeas"
+    />
   `
 })
 export class DialogGuidanceShowWorkComponent extends ComponentShowWorkDirective {

src/assets/wise5/components/dialogGuidance/dialog-guidance-student/dialog-guidance-student.component.html

@@ -1,23 +1,20 @@
-<div class="mb-4">
-  @if (computerAvatarSelectorVisible) {
-    <computer-avatar-selector
-      [computerAvatarSettings]="componentContent.computerAvatarSettings"
-      (chooseAvatarEvent)="selectComputerAvatar($event)"
+@if (computerAvatarSelectorVisible) {
+  <component-header [component]="component" [showPrompt]="false" />
+  <computer-avatar-selector
+    [computerAvatarSettings]="componentContent.computerAvatarSettings"
+    (chooseAvatarEvent)="selectComputerAvatar($event)"
+  />
+} @else {
+  <component-header [component]="component" />
+  <dialog-responses
+    [responses]="responses"
+    [isWaitingForComputerResponse]="isWaitingForComputerResponse"
+    [computerAvatar]="computerAvatar"
+  />
+  @if (studentCanRespond) {
+    <chat-input
+      [submitDisabled]="isWaitingForComputerResponse"
+      (submitEvent)="submitStudentResponse($event)"
     />
-  } @else {
-    <mat-card appearance="outlined" class="mat-elevation-z2">
-      <component-header [component]="component" />
-      <dialog-responses
-        [responses]="responses"
-        [isWaitingForComputerResponse]="isWaitingForComputerResponse"
-        [computerAvatar]="computerAvatar"
-      />
-      @if (studentCanRespond) {
-        <chat-input
-          [submitDisabled]="isWaitingForComputerResponse"
-          (submitEvent)="submitStudentResponse($event)"
-        />
-      }
-    </mat-card>
   }
-</div>
+}

src/assets/wise5/components/dialogGuidance/dialog-guidance-student/dialog-guidance-student.component.scss

@@ -1,11 +1,3 @@
-@use 'style/abstracts/functions';
-
-.mat-mdc-card {
-  padding: 12px;
-  margin-top: 16px;
-  max-width: functions.breakpoint('sm.min');
-}
-
 dialog-responses {
   display: block;
   margin-bottom: 12px;

src/assets/wise5/components/dialogGuidance/dialog-guidance-student/dialog-guidance-student.component.ts

@@ -30,7 +30,6 @@ import { ConstraintService } from '../../../services/constraintService';
 import { applyMixins } from '../../../common/apply-mixins';
 import { ComputerAvatarInitializer } from '../../../common/computer-avatar/computer-avatar-initializer';
 import { ComputerAvatarSelectorComponent } from '../../../vle/computer-avatar-selector/computer-avatar-selector.component';
-import { MatCardModule } from '@angular/material/card';
 import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component';
 import { DialogResponsesComponent } from '../dialog-responses/dialog-responses.component';
 import { ChatInputComponent } from '../../../common/chat-input/chat-input.component';
@@ -41,8 +40,7 @@ import { CRaterPingService } from '../../../services/cRaterPingService';
     ChatInputComponent,
     ComponentHeaderComponent,
     ComputerAvatarSelectorComponent,
-    DialogResponsesComponent,
-    MatCardModule
+    DialogResponsesComponent
   ],
   providers: [CRaterPingService, DialogGuidanceFeedbackService],
   selector: 'dialog-guidance-student',

src/assets/wise5/components/draw/draw-student/draw-student.component.html

@@ -44,9 +44,10 @@
     </button>
   }
 </div>
-<div id="{{ drawingToolId }}" class="drawing-tool-div"></div>
+<div id="{{ drawingToolId }}"></div>
 @if (isSaveOrSubmitButtonVisible) {
   <component-save-submit-buttons
+    class="block mt-3"
     [componentState]="latestComponentState"
     [isDirty]="isDirty"
     [isDisabled]="isDisabled"

src/assets/wise5/components/draw/draw-student/draw-student.component.scss

@@ -6,8 +6,4 @@ $margin-spacing: 20px;
 
 .top-button {
   margin-right: $margin-spacing
-}
-
-.drawing-tool-div {
-  margin-bottom: $margin-spacing;
 }

src/assets/wise5/components/label/label-student/label-student.component.html

@@ -97,11 +97,12 @@
     </button>
   }
 </div>
-<div id="canvasParent_{{ canvasId }}" class="label-canvas-container">
+<div id="canvasParent_{{ canvasId }}">
   <canvas id="{{ canvasId }}" class="label-canvas" width="800" height="600"></canvas>
 </div>
 @if (isSaveOrSubmitButtonVisible) {
   <component-save-submit-buttons
+    class="block mt-3"
     [componentState]="latestComponentState"
     [isDirty]="isDirty"
     [isDisabled]="isDisabled"

src/assets/wise5/components/label/label-student/label-student.component.scss

@@ -34,10 +34,6 @@ $margin-spacing: 20px;
   margin-right: $margin-spacing;
 }
 
-.label-canvas-container {
-  margin-bottom: $margin-spacing;
-}
-
 .label-canvas {
   border: 1px solid black;
 }

src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.html

@@ -112,6 +112,7 @@ <h3 class="mat-subtitle-2" [innerHTML]="bucket.value"></h3>
 />
 @if (isSaveOrSubmitButtonVisible) {
   <component-save-submit-buttons
+    class="block mt-3"
     [componentState]="latestComponentState"
     [isDirty]="isDirty"
     [isDisabled]="isDisabled"

src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.scss

@@ -47,9 +47,3 @@
 .cdk-drag-placeholder {
   opacity: .4;
 }
-
-component-save-submit-buttons {
-  display: block;
-  margin-top: 16px;
-  margin-bottom: 8px;
-}

src/assets/wise5/components/openResponse/open-response-student/open-response-student.component.html

@@ -25,7 +25,7 @@
     </button>
   }
 </div>
-<div class="my-2">
+<div class="mt-2">
   <mat-form-field class="w-full form-field-no-hint">
     <textarea
       matInput
@@ -76,6 +76,7 @@
 }
 @if (isSaveOrSubmitButtonVisible) {
   <component-save-submit-buttons
+    class="block mt-3"
     [componentState]="latestComponentState"
     [isDirty]="isDirty"
     [isDisabled]="isDisabled"

src/assets/wise5/components/peerChat/peer-chat-chat-box/peer-chat-chat-box.component.html

@@ -1,28 +1,25 @@
-<mat-card appearance="outlined" class="chat-box mat-elevation-z2">
-  <peer-chat-members [peerChatWorkgroupInfos]="workgroupInfosWithoutTeachers" />
-  @if (messages.length > 0) {
-    <peer-chat-messages
-      [peerChatMessages]="messages"
-      [myWorkgroupId]="myWorkgroupId"
-      [workgroupInfos]="workgroupInfos"
-      [isGrading]="isGrading"
-      (deleteClickedEvent)="deleteClicked($event)"
-      (undeleteClickedEvent)="undeleteClicked($event)"
-    />
-  }
-  @if (isEnabled) {
-    <peer-chat-message-input
-      [component]="component"
-      [messageText]="response"
-      [peerGroup]="peerGroup"
-      (onSubmit)="submitResponse($event)"
-      (responseChangedEvent)="responseChanged($event)"
-    />
-  }
-  <peer-chat-member-typing-indicator
-    [component]="component"
+@if (messages.length > 0) {
+  <peer-chat-messages
+    [peerChatMessages]="messages"
     [myWorkgroupId]="myWorkgroupId"
+    [workgroupInfos]="workgroupInfos"
+    [isGrading]="isGrading"
+    (deleteClickedEvent)="deleteClicked($event)"
+    (undeleteClickedEvent)="undeleteClicked($event)"
+  />
+}
+@if (isEnabled) {
+  <peer-chat-message-input
+    [component]="component"
+    [messageText]="response"
     [peerGroup]="peerGroup"
-    class="mat-caption secondary-text"
+    (onSubmit)="submitResponse($event)"
+    (responseChangedEvent)="responseChanged($event)"
   />
-</mat-card>
+}
+<peer-chat-member-typing-indicator
+  [component]="component"
+  [myWorkgroupId]="myWorkgroupId"
+  [peerGroup]="peerGroup"
+  class="mat-caption secondary-text"
+/>

src/assets/wise5/components/peerChat/peer-chat-chat-box/peer-chat-chat-box.component.spec.ts

@@ -3,6 +3,7 @@ import { PeerChatChatBoxComponent } from './peer-chat-chat-box.component';
 import { MockComponents } from 'ng-mocks';
 import { PeerChatMemberTypingIndicatorComponent } from '../peer-chat-member-typing-indicator/peer-chat-member-typing-indicator.component';
 import { PeerChatMessageInputComponent } from '../peer-chat-message-input/peer-chat-message-input.component';
+import { PeerChatMessagesComponent } from '../peer-chat-messages/peer-chat-messages.component';
 
 describe('PeerChatChatBoxComponent', () => {
   let component: PeerChatChatBoxComponent;
@@ -12,27 +13,22 @@ describe('PeerChatChatBoxComponent', () => {
     await TestBed.configureTestingModule({
       imports: [
         PeerChatChatBoxComponent,
-        MockComponents(PeerChatMessageInputComponent, PeerChatMemberTypingIndicatorComponent)
+        MockComponents(
+          PeerChatMessageInputComponent,
+          PeerChatMemberTypingIndicatorComponent,
+          PeerChatMessagesComponent
+        )
       ]
     }).compileComponents();
   });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(PeerChatChatBoxComponent);
     component = fixture.componentInstance;
-    component.workgroupInfos = {
-      1: { isTeacher: true },
-      2: { isTeacher: false },
-      3: { isTeacher: false }
-    };
     fixture.detectChanges();
   });
 
-  it('should create with workgroup infos without teachers', () => {
+  it('should create', () => {
     expect(component).toBeTruthy();
-    expect(component['workgroupInfosWithoutTeachers']).toEqual([
-      { isTeacher: false },
-      { isTeacher: false }
-    ]);
   });
 });