feat(Authoring): Click lesson bar to expand and collapse steps (#1629)

src/assets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.html

@@ -1,4 +1,4 @@
-<div id="{{ lesson.id }}" class="lesson">
+<div id="{{ lesson.id }}" class="lesson" [ngClass]="{ 'lesson-collapsed': !expanded }">
   <div class="lesson-bar full-width pointer" fxLayoutAlign="start center">
     <mat-checkbox
       color="primary"
@@ -8,42 +8,39 @@
       i18n-aria-label
     >
     </mat-checkbox>
-    <div class="full-width" fxLayoutAlign="start center" fxLayoutGap="10px">
-      <div
-        (click)="setCurrentNode(lesson.id)"
-        fxFlex
-        matTooltip="Click to enter lesson"
-        matTooltipPosition="above"
-        i18n-matTooltip
-      >
-        <node-icon-and-title
-          [nodeId]="lesson.id"
-          [showPosition]="showPosition"
-        ></node-icon-and-title>
-      </div>
-      <div *ngIf="lesson.ids.length > 0" fxLayout="row" fxLayoutAlign="end center">
-        <button
-          mat-icon-button
-          *ngIf="!expanded"
-          (click)="toggleExpanded()"
-          fxLayoutAlign="end center"
-          matTooltip="Click to expand"
-          matTooltipPosition="above"
-          i18n-matTooltip
-        >
-          <mat-icon>expand_more</mat-icon>
-        </button>
+    <div
+      (click)="toggleExpanded()"
+      class="toggle-div full-width"
+      fxLayout="row wrap"
+      fxLayoutAlign="start center"
+      fxLayoutGap="8px"
+      matTooltip="Click to expand/collapse lesson"
+      matTooltipPosition="above"
+      i18n-matTooltip
+    >
+      <node-icon-and-title [nodeId]="lesson.id" [showPosition]="showPosition"></node-icon-and-title>
+      <div fxFlex></div>
+      <div fxLayoutAlign="start center" fxLayoutGap="8px">
         <button
           mat-icon-button
-          *ngIf="expanded"
-          (click)="toggleExpanded()"
-          fxLayoutAlign="end center"
-          matTooltip="Click to collapse"
+          (click)="setCurrentNode(lesson.id)"
+          class="edit-lesson-button"
+          [ngClass]="{ 'lesson-expanded': expanded }"
+          color="primary"
+          matTooltip="Edit lesson"
           matTooltipPosition="above"
           i18n-matTooltip
         >
-          <mat-icon>expand_less</mat-icon>
+          <mat-icon>edit</mat-icon>
         </button>
+        <div class="expand-collapse-icon">
+          <div *ngIf="!expanded" fxLayoutAlign="center center">
+            <mat-icon>expand_more</mat-icon>
+          </div>
+          <div *ngIf="expanded" fxLayoutAlign="center center">
+            <mat-icon>expand_less</mat-icon>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -56,5 +53,8 @@
         [projectId]="projectId"
       ></project-authoring-step>
     </ng-container>
+    <div *ngIf="lesson.ids.length === 0" class="no-steps-message" fxLayoutAlign="start center">
+      This lesson has no steps
+    </div>
   </div>
 </div>

src/assets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.scss

@@ -6,8 +6,18 @@
   position: relative;
 }
 
-.lesson-bar:hover {
-  background-color: #add8e6;
+.lesson:hover {
+  &.lesson-collapsed {
+    background-color: #add8e6;
+  }
+}
+
+.lesson:hover .edit-lesson-button {
+  display: block;
+}
+
+.lesson-bar {
+  height: 40px;
 }
 
 .full-width {
@@ -17,3 +27,21 @@
 .pointer {
   cursor: pointer;
 }
+
+.edit-lesson-button {
+  display: none;
+
+  &.lesson-expanded {
+    display: block;
+  }
+}
+
+.expand-collapse-icon {
+  width: 40px;
+  margin-right: 10px;
+}
+
+.no-steps-message {
+  height: 40px;
+  margin-left: 40px;
+}

src/assets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.spec.ts

@@ -79,10 +79,10 @@ describe('ProjectAuthoringLessonComponent', () => {
 
 function lessonIsExpanded_clickCollapseButton_hideSteps() {
   describe('lesson is expanded', () => {
-    describe('collapse button is clicked', () => {
+    describe('lesson div is clicked', () => {
       it('hides steps', async () => {
         component.expanded = true;
-        await (await harness.getCollapseButton()).click();
+        (await harness.getToggleDiv()).click();
         expect(component.expanded).toBeFalse();
         const steps = await harness.getSteps();
         expect(steps.length).toEqual(0);
@@ -93,10 +93,10 @@ function lessonIsExpanded_clickCollapseButton_hideSteps() {
 
 function lessonIsCollapsed_clickExpandButton_showSteps() {
   describe('lesson is collapsed', () => {
-    describe('expand button is clicked', () => {
+    describe('lesson div is clicked', () => {
       it('shows steps', async () => {
         component.expanded = false;
-        await (await harness.getExpandButton()).click();
+        (await harness.getToggleDiv()).click();
         expect(component.expanded).toBeTrue();
         const steps = await harness.getSteps();
         expect(steps.length).toEqual(2);

src/assets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.harness.ts

@@ -1,22 +1,17 @@
 import { ComponentHarness } from '@angular/cdk/testing';
-import { MatButtonHarness } from '@angular/material/button/testing';
 import { ProjectAuthoringStepHarness } from '../project-authoring-step/project-authoring-step.harness';
 
 export class ProjectAuthoringLessonHarness extends ComponentHarness {
   static hostSelector = 'project-authoring-lesson';
-  getExpandButton = this.locatorForOptional(
-    MatButtonHarness.with({ selector: '[matTooltip="Click to expand"]' })
-  );
-  getCollapseButton = this.locatorForOptional(
-    MatButtonHarness.with({ selector: '[matTooltip="Click to collapse"]' })
-  );
+  getExpandCollapseIcon = this.locatorFor('.expand-collapse-icon .mat-icon');
   getSteps = this.locatorForAll(ProjectAuthoringStepHarness);
+  getToggleDiv = this.locatorFor('.toggle-div');
 
   async isExpanded(): Promise<boolean> {
-    return (await this.getExpandButton()) == null;
+    return (await (await this.getExpandCollapseIcon()).text()) === 'expand_less';
   }
 
   async isCollapsed(): Promise<boolean> {
-    return (await this.getCollapseButton()) == null;
+    return (await (await this.getExpandCollapseIcon()).text()) === 'expand_more';
   }
 }

src/messages.xlf

@@ -12190,27 +12190,20 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="linenumber">7</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="bed409327441403b4138bdbe2289b3bc58b61f86" datatype="html">
-        <source>Click to enter lesson</source>
+      <trans-unit id="ad6affd1feb3803d26ea4c21021ad6d25b1fba13" datatype="html">
+        <source>Click to expand/collapse lesson</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.html</context>
-          <context context-type="linenumber">15</context>
+          <context context-type="linenumber">17</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="7ea36eedd5af1d2e78d642c80ded9ea3cc830e7f" datatype="html">
-        <source>Click to expand</source>
+      <trans-unit id="17da2a2b5dd4e012d364db7471ae1343b4a3266b" datatype="html">
+        <source>Edit lesson</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.html</context>
           <context context-type="linenumber">30</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="c4ac015c8e81aa2be8dc2a3f5aa06ef098099b53" datatype="html">
-        <source>Click to collapse</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.html</context>
-          <context context-type="linenumber">41</context>
-        </context-group>
-      </trans-unit>
       <trans-unit id="0788cea8f340f4f5399901765d2003f90af76669" datatype="html">
         <source>Select step</source>
         <context-group purpose="location">