feat(VLE): Show Step Tools when viewing Unit Plan

src/assets/wise5/themes/default/navigation/navigation.component.html

@@ -1,5 +1,4 @@
 <div class="nav flex flex-col">
-  <div class="mat-subtitle-1 secondary-text nav-header" i18n>Unit Plan</div>
   <div class="flex flex-wrap justify-center items-center">
     @for (id of rootNode.ids; track id) {
       <nav-item

src/assets/wise5/themes/default/themeComponents/stepTools/step-tools.component.html

@@ -1,72 +1,78 @@
 <div class="step-tools flex flex-row justify-between items-center">
   <div class="flex flex-row items-center">
-    <button
-      matIconButton
-      (click)="goToPrevNode()"
-      [disabled]="!prevId"
-      matTooltip="Previous Step"
-      i18n-matTooltip
-    >
-      <mat-icon>{{ icons.prev }}</mat-icon>
-    </button>
-    <div class="node-icon-div me-1 hidden sm:block">
-      <node-icon [nodeId]="nodeId" size="18" [icon]="nodeStatus.icon" />
-    </div>
-    <mat-form-field appearance="fill">
-      <mat-select
-        [panelClass]="'select-panel-full-height'"
-        placeholder="Select a Step"
-        i18n-placeholder
-        [(ngModel)]="toNodeId"
-        hideSingleSelectionIndicator="true"
-        (ngModelChange)="toNodeIdChanged()"
+    @if (stepView) {
+      <button
+        matIconButton
+        (click)="goToPrevNode()"
+        [disabled]="!prevId"
+        matTooltip="Previous Step"
+        i18n-matTooltip
       >
-        <mat-select-trigger>
-          {{ getNodePositionAndTitle(nodeId) }}
-        </mat-select-trigger>
-        @for (nodeId of nodeIds; track nodeId) {
-          @if (nodeStatuses[nodeId].isVisible) {
-            <mat-option [value]="nodeId">
-              <div class="flex flex-row items-center gap-2">
-                <node-icon
-                  [nodeId]="nodeId"
-                  size="18"
-                  [icon]="nodeStatuses[nodeId].icon"
-                  custom-class="node-select__icon"
-                />
-                <span [ngClass]="{ strong: isGroupNode(nodeId) }">{{
-                  getNodePositionAndTitle(nodeId)
-                }}</span>
-              </div>
-            </mat-option>
+        <mat-icon>{{ icons.prev }}</mat-icon>
+      </button>
+      <div class="node-icon-div me-1 hidden sm:block">
+        <node-icon [nodeId]="nodeId" size="18" [icon]="nodeStatus.icon" />
+      </div>
+      <mat-form-field appearance="fill">
+        <mat-select
+          [panelClass]="'select-panel-full-height'"
+          placeholder="Select a Step"
+          i18n-placeholder
+          [(ngModel)]="toNodeId"
+          hideSingleSelectionIndicator="true"
+          (ngModelChange)="toNodeIdChanged()"
+        >
+          <mat-select-trigger>
+            {{ getNodePositionAndTitle(nodeId) }}
+          </mat-select-trigger>
+          @for (nodeId of nodeIds; track nodeId) {
+            @if (nodeStatuses[nodeId].isVisible) {
+              <mat-option [value]="nodeId">
+                <div class="flex flex-row items-center gap-2">
+                  <node-icon
+                    [nodeId]="nodeId"
+                    size="18"
+                    [icon]="nodeStatuses[nodeId].icon"
+                    custom-class="node-select__icon"
+                  />
+                  <span [ngClass]="{ strong: isGroupNode(nodeId) }">{{
+                    getNodePositionAndTitle(nodeId)
+                  }}</span>
+                </div>
+              </mat-option>
+            }
           }
-        }
-      </mat-select>
-    </mat-form-field>
-    <div class="node-status-div">
-      <node-status-icon [nodeId]="nodeId" />
-    </div>
-    <button
-      matIconButton
-      (click)="goToNextNode()"
-      [disabled]="!nextId"
-      matTooltip="Next Step"
-      i18n-matTooltip
-    >
-      <mat-icon>{{ icons.next }}</mat-icon>
-    </button>
-    <button
-      mat-icon-button
-      (click)="closeNode()"
-      aria-label="Unit Plan"
-      i18n-aria-label
-      matTooltip="Unit Plan"
-      i18n-matTooltip
-    >
-      <mat-icon class="unit-plan-icon">view_list</mat-icon>
-    </button>
+        </mat-select>
+      </mat-form-field>
+      <div class="node-status-div">
+        <node-status-icon [nodeId]="nodeId" />
+      </div>
+      <button
+        matIconButton
+        (click)="goToNextNode()"
+        [disabled]="!nextId"
+        matTooltip="Next Step"
+        i18n-matTooltip
+      >
+        <mat-icon>{{ icons.next }}</mat-icon>
+      </button>
+    } @else {
+      <span i18n class="px-3">Unit Plan</span>
+    }
   </div>
   <div>
+    @if (stepView) {
+      <button
+        mat-icon-button
+        (click)="closeNode()"
+        aria-label="Unit Plan"
+        i18n-aria-label
+        matTooltip="Unit Plan"
+        i18n-matTooltip
+      >
+        <mat-icon class="unit-plan-icon">view_list</mat-icon>
+      </button>
+    }
     @if (notebookConfig.itemTypes.note.enabled) {
       <notebook-launcher [notebookConfig]="notebookConfig" />
     }

src/assets/wise5/themes/default/themeComponents/stepTools/step-tools.component.ts

@@ -46,6 +46,7 @@ export class StepToolsComponent implements OnInit {
   protected nodeStatuses: any;
   @Input() notebookConfig: any;
   protected prevId: string;
+  @Input() stepView: boolean;
   private subscriptions: Subscription = new Subscription();
   protected toNodeId: string;
 

src/assets/wise5/vle/vle.component.html

@@ -37,14 +37,13 @@
 <div id="wise-link-communicator" class="wise-link-communicator"></div>
 
 <ng-template #defaultVLETemplate>
-  @if (layoutState === 'node') {
-    <step-tools
-      class="control-bg-bg mat-elevation-z1"
-      [notebookConfig]="notebookConfig"
-      [chatbotEnabled]="chatbotEnabled"
-      (toggleChatbot)="chatbotVisible = !chatbotVisible"
-    />
-  }
+  <step-tools
+    class="control-bg-bg mat-elevation-z1"
+    [stepView]="layoutState === 'node'"
+    [notebookConfig]="notebookConfig"
+    [chatbotEnabled]="chatbotEnabled"
+    (toggleChatbot)="chatbotVisible = !chatbotVisible"
+  />
   <div
     id="content"
     class="vle-content"

src/assets/wise5/vle/vle.component.scss

@@ -30,9 +30,11 @@ step-tools {
   overflow: auto;
 }
 
-.node-view {
+.node-view, .nav-view {
   top: variables.$toolbar-height + variables.$secondary-toolbar-height;
+}
 
+.node-view {
   &.tabbed {
     position: absolute;
     top: variables.$toolbar-height;
@@ -80,10 +82,6 @@ node-navigation {
   padding: 0 16px;
 }
 
-.nav-view {
-  top: variables.$toolbar-height;
-}
-
 notebook-launcher {
   bottom: 24px;
   position: fixed;

src/messages.xlf

@@ -16046,7 +16046,7 @@ Are you sure you want to proceed?</source>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/themes/default/themeComponents/stepTools/step-tools.component.html</context>
-          <context context-type="linenumber">7,11</context>
+          <context context-type="linenumber">8,11</context>
         </context-group>
       </trans-unit>
       <trans-unit id="884032441322142017" datatype="html">
@@ -16061,7 +16061,7 @@ Are you sure you want to proceed?</source>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/themes/default/themeComponents/stepTools/step-tools.component.html</context>
-          <context context-type="linenumber">18,21</context>
+          <context context-type="linenumber">19,22</context>
         </context-group>
       </trans-unit>
       <trans-unit id="33473533304469858" datatype="html">
@@ -16087,7 +16087,7 @@ Are you sure you want to proceed?</source>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/themes/default/themeComponents/stepTools/step-tools.component.html</context>
-          <context context-type="linenumber">53,56</context>
+          <context context-type="linenumber">54,57</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5353912858871423613" datatype="html">
@@ -22357,21 +22357,6 @@ If this problem continues, let your teacher know and move on to the next activit
           <context context-type="linenumber">37</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="4299173667761940990" datatype="html">
-        <source>Unit Plan</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/themes/default/navigation/navigation.component.html</context>
-          <context context-type="linenumber">2,4</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/themes/default/themeComponents/stepTools/step-tools.component.html</context>
-          <context context-type="linenumber">61,64</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/themes/default/themeComponents/stepTools/step-tools.component.html</context>
-          <context context-type="linenumber">63,66</context>
-        </context-group>
-      </trans-unit>
       <trans-unit id="8784868761263923006" datatype="html">
         <source><x id="INTERPOLATION" equiv-text="{{ textInputLabel }}"/> required</source>
         <context-group purpose="location">
@@ -22450,6 +22435,21 @@ If this problem continues, let your teacher know and move on to the next activit
           <context context-type="linenumber">13,16</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="4299173667761940990" datatype="html">
+        <source>Unit Plan</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/themes/default/themeComponents/stepTools/step-tools.component.html</context>
+          <context context-type="linenumber">60,66</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/themes/default/themeComponents/stepTools/step-tools.component.html</context>
+          <context context-type="linenumber">68,71</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/themes/default/themeComponents/stepTools/step-tools.component.html</context>
+          <context context-type="linenumber">70,73</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="5926207769041293626" datatype="html">
         <source>Your <x id="INTERPOLATION" equiv-text="{{ label }}"/>:</source>
         <context-group purpose="location">