fix(Authoring): Only show one lesson tooltip at a time (#1648)

WISE-Community · Feb 22, 2024 · 732a4c2 · 732a4c2
1 parent e28b7e3
commit 732a4c2
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 34 deletions.
diff --git a/...sets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.html b/...sets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.html
@@ -1,46 +1,44 @@
 <div id="{{ lesson.id }}" class="lesson" [ngClass]="{ 'lesson-collapsed': !expanded }">
-  <div class="lesson-bar full-width pointer" fxLayoutAlign="start center">
+  <div
+    (click)="toggleExpanded()"
+    class="lesson-bar full-width pointer"
+    fxLayout="row wrap"
+    fxLayoutAlign="start center"
+  >
     <mat-checkbox
       color="primary"
       (change)="selectNode($event.checked)"
+      (click)="$event.stopPropagation()"
       [disabled]="nodeTypeSelected() === 'step'"
       aria-label="Select lesson"
       i18n-aria-label
     >
+      <node-icon-and-title [nodeId]="lesson.id" [showPosition]="showPosition"></node-icon-and-title>
     </mat-checkbox>
     <div
-      (click)="toggleExpanded()"
-      class="toggle-div full-width"
-      fxLayout="row wrap"
-      fxLayoutAlign="start center"
-      fxLayoutGap="8px"
+      class="lesson-expand-collapse-div"
       matTooltip="Click to expand/collapse lesson"
       matTooltipPosition="above"
       i18n-matTooltip
+    ></div>
+    <button
+      mat-icon-button
+      (click)="setCurrentNode(lesson.id)"
+      class="edit-lesson-button"
+      [ngClass]="{ 'lesson-expanded': expanded }"
+      color="primary"
+      matTooltip="Edit 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
-          (click)="setCurrentNode(lesson.id)"
-          class="edit-lesson-button"
-          [ngClass]="{ 'lesson-expanded': expanded }"
-          color="primary"
-          matTooltip="Edit lesson"
-          matTooltipPosition="above"
-          i18n-matTooltip
-        >
-          <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>
+      <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>

diff --git a/...sets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.scss b/...sets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.scss
@@ -28,7 +28,13 @@
   cursor: pointer;
 }
 
+.lesson-expand-collapse-div {
+  flex-grow: 1;
+  align-self: stretch;
+}
+
 .edit-lesson-button {
+  margin-right: 8px;
   display: none;
 
   &.lesson-expanded {

diff --git a/...s/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.spec.ts b/...s/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.spec.ts
@@ -86,7 +86,7 @@ function lessonIsExpanded_clickCollapseButton_hideSteps() {
     describe('lesson div is clicked', () => {
       it('hides steps', async () => {
         component.expanded = true;
-        (await harness.getToggleDiv()).click();
+        (await harness.getExpandCollapseDiv()).click();
         expect(component.expanded).toBeFalse();
         const steps = await harness.getSteps();
         expect(steps.length).toEqual(0);
@@ -100,7 +100,7 @@ function lessonIsCollapsed_clickExpandButton_showSteps() {
     describe('lesson div is clicked', () => {
       it('shows steps', async () => {
         component.expanded = false;
-        (await harness.getToggleDiv()).click();
+        (await harness.getExpandCollapseDiv()).click();
         expect(component.expanded).toBeTrue();
         const steps = await harness.getSteps();
         expect(steps.length).toEqual(2);

diff --git a/src/assets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.harness.ts b/src/assets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.harness.ts
@@ -3,9 +3,9 @@ import { ProjectAuthoringStepHarness } from '../project-authoring-step/project-a
 
 export class ProjectAuthoringLessonHarness extends ComponentHarness {
   static hostSelector = 'project-authoring-lesson';
+  getExpandCollapseDiv = this.locatorFor('.lesson-expand-collapse-div');
   getExpandCollapseIcon = this.locatorFor('.expand-collapse-icon .mat-icon');
   getSteps = this.locatorForAll(ProjectAuthoringStepHarness);
-  getToggleDiv = this.locatorFor('.toggle-div');
 
   async isExpanded(): Promise<boolean> {
     return (await (await this.getExpandCollapseIcon()).text()) === 'expand_less';

diff --git a/src/messages.xlf b/src/messages.xlf
@@ -12179,14 +12179,14 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Select 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">7</context>
+          <context context-type="linenumber">13</context>
         </context-group>
       </trans-unit>
       <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">17</context>
+          <context context-type="linenumber">20</context>
         </context-group>
       </trans-unit>
       <trans-unit id="17da2a2b5dd4e012d364db7471ae1343b4a3266b" datatype="html">