feat(node-authoring): Move add component button position

src/app/teacher/authoring-tool.module.ts

@@ -46,7 +46,6 @@ import { NodeAuthoringParentComponent } from '../../assets/wise5/authoringTool/n
 import { AddLessonChooseTemplateComponent } from '../../assets/wise5/authoringTool/addLesson/add-lesson-choose-template/add-lesson-choose-template.component';
 import { EditNodeTitleComponent } from '../../assets/wise5/authoringTool/node/edit-node-title/edit-node-title.component';
 import { EditProjectLanguageSettingComponent } from '../../assets/wise5/authoringTool/project-info/edit-project-language-setting/edit-project-language-setting.component';
-import { AddComponentButtonComponent } from '../../assets/wise5/authoringTool/node/add-component-button/add-component-button.component';
 import { CopyComponentButtonComponent } from '../../assets/wise5/authoringTool/node/copy-component-button/copy-component-button.component';
 import { ProjectAuthoringLessonComponent } from '../../assets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component';
 import { ProjectAuthoringStepComponent } from '../../assets/wise5/authoringTool/project-authoring-step/project-authoring-step.component';
@@ -59,6 +58,7 @@ import { CreateBranchComponent } from '../../assets/wise5/authoringTool/create-b
 import { EditBranchComponent } from '../../assets/wise5/authoringTool/edit-branch/edit-branch.component';
 import { ComponentTypeButtonComponent } from '../../assets/wise5/authoringTool/components/component-type-button/component-type-button.component';
 import { MatExpansionModule } from '@angular/material/expansion';
+import { AddComponentComponent } from '../../assets/wise5/authoringTool/node/add-component/add-component.component';
 
 @NgModule({
   declarations: [
@@ -81,7 +81,7 @@ import { MatExpansionModule } from '@angular/material/expansion';
     RubricAuthoringComponent
   ],
   imports: [
-    AddComponentButtonComponent,
+    AddComponentComponent,
     AddLessonButtonComponent,
     AddLessonChooseTemplateComponent,
     AddLessonConfigureComponent,

src/assets/wise5/authoringTool/node/add-component-button/add-component-button.component.html

@@ -1,31 +1,9 @@
-@if (firstComponent) {
-  <button
-    mat-icon-button
-    color="primary"
-    [matMenuTriggerFor]="componentMenu"
-    #menuTrigger
-    [matTooltip]="tooltipText"
-    matTooltipPosition="after"
-  >
-    <mat-icon>add_circle</mat-icon>
-  </button>
-  <mat-menu #componentMenu="matMenu">
-    <button mat-menu-item (click)="addComponent(null)">
-      <mat-icon class="rotate-180 flip-vertical">subdirectory_arrow_left</mat-icon
-      ><span i18n>Add component before</span>
-    </button>
-    <button mat-menu-item (click)="addComponent()">
-      <mat-icon>subdirectory_arrow_left</mat-icon><span i18n>Add component after</span>
-    </button>
-  </mat-menu>
-} @else {
-  <button
-    mat-icon-button
-    color="primary"
-    [matTooltip]="tooltipText"
-    matTooltipPosition="after"
-    (click)="addComponent()"
-  >
-    <mat-icon>add_circle</mat-icon>
-  </button>
-}
+<button
+  mat-icon-button
+  color="primary"
+  matTooltip="Add component"
+  matTooltipPosition="after"
+  (click)="addComponent()"
+>
+  <mat-icon>add_circle</mat-icon>
+</button>

src/assets/wise5/authoringTool/node/add-component/add-component.component.html

@@ -0,0 +1,12 @@
+<div fxLayout="row" fxLayoutAlign="end center">
+  <mat-divider class="component-divider" [ngClass]="{ active: focus }" />
+  <add-component-button
+    [insertAfterComponentId]="afterComponentId"
+    [node]="node"
+    (newComponentsEvent)="newComponentsEvent.emit($event)"
+    (mouseover)="focus = true"
+    (mouseleave)="focus = false"
+    (focusin)="focus = true"
+    (focusout)="focus = false"
+  />
+</div>

src/assets/wise5/authoringTool/node/add-component/add-component.component.scss

@@ -0,0 +1,26 @@
+.component-divider {
+  width: 100%;
+  position: relative;
+
+  &:after {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    border-bottom-style: solid;
+    content: "";
+    border-bottom-width: var(--mdc-filled-text-field-focus-active-indicator-height);
+    border-bottom-color: var(--mdc-filled-text-field-focus-active-indicator-color);
+    transform: scaleX(0);
+    transform-origin: 100%;
+    transition: transform 360ms cubic-bezier(0.4, 0, 0.2, 1),opacity 360ms cubic-bezier(0.4, 0, 0.2, 1);
+    opacity: 0;
+  }
+
+  &.active {
+    &:after {
+      transform: scaleX(1);
+      opacity: 1;
+    }
+  }
+}

src/assets/wise5/authoringTool/node/add-component/add-component.component.spec.ts

@@ -0,0 +1,34 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AddComponentComponent } from './add-component.component';
+import { CreateComponentService } from '../../../services/createComponentService';
+import { StudentTeacherCommonServicesModule } from '../../../../../app/student-teacher-common-services.module';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { TeacherProjectService } from '../../../services/teacherProjectService';
+import { provideRouter } from '@angular/router';
+import { Node } from '../../../common/Node';
+
+describe('AddComponentComponent', () => {
+  let component: AddComponentComponent;
+  let fixture: ComponentFixture<AddComponentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AddComponentComponent, StudentTeacherCommonServicesModule],
+      providers: [
+        CreateComponentService,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideRouter([]),
+        TeacherProjectService
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AddComponentComponent);
+    component = fixture.componentInstance;
+    component.node = new Node();
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/assets/wise5/authoringTool/node/add-component/add-component.component.ts

@@ -0,0 +1,20 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { AddComponentButtonComponent } from '../add-component-button/add-component-button.component';
+import { MatDividerModule } from '@angular/material/divider';
+import { Node } from '../../../common/Node';
+import { CommonModule } from '@angular/common';
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+@Component({
+  selector: 'add-component',
+  standalone: true,
+  imports: [AddComponentButtonComponent, CommonModule, FlexLayoutModule, MatDividerModule],
+  templateUrl: './add-component.component.html',
+  styleUrl: './add-component.component.scss'
+})
+export class AddComponentComponent {
+  @Input() afterComponentId: string;
+  @Input() node: Node;
+  @Output() newComponentsEvent: EventEmitter<any> = new EventEmitter<any>();
+  protected focus: boolean;
+}

src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html

@@ -22,110 +22,110 @@
 </div>
 @if (components.length === 0 && !isGroupNode) {
   <p i18n>This step does not have any components.</p>
-  <add-component-button
-    class="add-component"
-    [node]="node"
-    (newComponentsEvent)="highlightComponents($event)"
-  />
+  <add-component [node]="node" (newComponentsEvent)="highlightComponents($event)" />
 }
 <div
   cdkDropList
   cdkDropListLockAxis="y"
+  cdkDropListAutoScrollStep="10"
   (cdkDropListDropped)="dropComponent($event)"
   cdkScrollable
   fxLayout="column"
-  fxLayoutGap="16px"
 >
+  @if (components.length > 0) {
+    <add-component [node]="node" (newComponentsEvent)="highlightComponents($event)" />
+  }
   @for (component of components; track component.id; let i = $index; let last = $last) {
-    <div fxLayout="row" cdkDrag [cdkDragDisabled]="components.length < 2">
-      <mat-card
-        [id]="component.id"
-        class="component"
-        [ngClass]="{ 'component-editing': component.id === editingComponentId }"
-      >
-        <div
-          class="component-header"
-          fxLayout="row"
-          fxLayoutAlign="start center"
-          [ngClass]="{ 'selected-bg-bg': component.id === editingComponentId }"
+    <div cdkDrag [cdkDragDisabled]="components.length < 2">
+      <div fxLayout="row">
+        <mat-card
+          [id]="component.id"
+          class="component"
+          [ngClass]="{ 'component-editing': component.id === editingComponentId }"
         >
-          <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
-            @if (components.length > 1) {
-              <mat-icon class="drag-handle" cdkDragHandle title="Drag to reorder" i18n-title
-                >drag_indicator</mat-icon
+          <div
+            class="component-header"
+            fxLayout="row"
+            fxLayoutAlign="start center"
+            [ngClass]="{ 'selected-bg-bg': component.id === editingComponentId }"
+          >
+            <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
+              @if (components.length > 1) {
+                <mat-icon class="drag-handle" cdkDragHandle title="Drag to reorder" i18n-title
+                  >drag_indicator</mat-icon
+                >
+              }
+              <span class="heavy">{{ i + 1 }}. {{ getComponentTypeLabel(component.type) }}</span>
+            </div>
+            <span fxFlex></span>
+            <div class="text" fxLayoutAlign="end center">
+              @if (component.id === editingComponentId) {
+                <edit-component-advanced-button [componentContent]="component" [nodeId]="nodeId" />
+              }
+              <copy-component-button
+                [node]="node"
+                [componentId]="component.id"
+                (newComponentEvent)="highlightComponents($event)"
+              />
+              <button
+                mat-icon-button
+                (click)="$event.stopPropagation(); deleteComponent($event, i + 1, component)"
+                (keydown)="$event.stopPropagation()"
+                matTooltip="Delete Component"
+                matTooltipPosition="above"
+                i18n-matTooltip
               >
-            }
-            <span class="heavy">{{ i + 1 }}. {{ getComponentTypeLabel(component.type) }}</span>
+                <mat-icon>delete</mat-icon>
+              </button>
+            </div>
           </div>
-          <span fxFlex></span>
-          <div class="text" fxLayoutAlign="end center">
-            @if (component.id === editingComponentId) {
-              <edit-component-advanced-button [componentContent]="component" [nodeId]="nodeId" />
-            }
-            <copy-component-button
-              [node]="node"
-              [componentId]="component.id"
-              (newComponentEvent)="highlightComponents($event)"
+          <mat-divider></mat-divider>
+          <div>
+            <component-authoring
+              [nodeId]="nodeId"
+              [componentContent]="component"
+              [editing]="component.id === editingComponentId"
+              (editComponentEvent)="editComponent(component.id)"
             />
+          </div>
+        </mat-card>
+        <div fxLayout="column">
+          @if (i > 0) {
             <button
               mat-icon-button
-              (click)="$event.stopPropagation(); deleteComponent($event, i + 1, component)"
-              (keydown)="$event.stopPropagation()"
-              matTooltip="Delete Component"
-              matTooltipPosition="above"
+              color="primary"
+              matTooltip="Move up"
+              matTooltipPosition="after"
               i18n-matTooltip
+              (click)="moveComponent(i, i - 1, true)"
             >
-              <mat-icon>delete</mat-icon>
+              <mat-icon>arrow_upward</mat-icon>
             </button>
-          </div>
-        </div>
-        <mat-divider></mat-divider>
-        <div>
-          <component-authoring
-            [nodeId]="nodeId"
-            [componentContent]="component"
-            [editing]="component.id === editingComponentId"
-            (editComponentEvent)="editComponent(component.id)"
-          />
+          }
+          @if (!last) {
+            <button
+              mat-icon-button
+              color="primary"
+              matTooltip="Move down"
+              matTooltipPosition="after"
+              i18n-matTooltip
+              (click)="moveComponent(i, i + 1, true)"
+            >
+              <mat-icon>arrow_downward</mat-icon>
+            </button>
+          }
         </div>
-      </mat-card>
-      <div fxLayout="column">
-        <add-component-button
-          class="add-component"
-          [insertAfterComponentId]="component.id"
-          [node]="node"
-          (newComponentsEvent)="highlightComponents($event)"
-        />
-        @if (i > 0) {
-          <button
-            mat-icon-button
-            color="primary"
-            matTooltip="Move up"
-            matTooltipPosition="after"
-            i18n-matTooltip
-            (click)="moveComponent(i, i - 1, true)"
-          >
-            <mat-icon>arrow_upward</mat-icon>
-          </button>
-        }
-        @if (!last) {
-          <button
-            mat-icon-button
-            color="primary"
-            matTooltip="Move down"
-            matTooltipPosition="after"
-            i18n-matTooltip
-            (click)="moveComponent(i, i + 1, true)"
+        <mat-card *cdkDragPreview>
+          <mat-card-content
+            >{{ i + 1 }}. {{ getComponentTypeLabel(component.type) }}</mat-card-content
           >
-            <mat-icon>arrow_downward</mat-icon>
-          </button>
-        }
+        </mat-card>
       </div>
-      <mat-card *cdkDragPreview>
-        <mat-card-content
-          >{{ i + 1 }}. {{ getComponentTypeLabel(component.type) }}</mat-card-content
-        >
-      </mat-card>
+      <add-component
+        [node]="node"
+        [afterComponentId]="component.id"
+        (newComponentsEvent)="highlightComponents($event)"
+      />
     </div>
   }
 </div>

src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.scss

@@ -43,7 +43,6 @@ component-authoring {
   border: dotted 3px #999;
   min-height: 40px;
   min-width: 360px;
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
 
 .mat-icon {

src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.spec.ts

@@ -21,7 +21,6 @@ import { ActivatedRoute, Router, convertToParamMap } from '@angular/router';
 import { of } from 'rxjs';
 import { TeacherNodeService } from '../../../services/teacherNodeService';
 import { EditNodeTitleComponent } from '../edit-node-title/edit-node-title.component';
-import { AddComponentButtonComponent } from '../add-component-button/add-component-button.component';
 import { CopyComponentButtonComponent } from '../copy-component-button/copy-component-button.component';
 import { ProjectLocale } from '../../../../../app/domain/projectLocale';
 import { TeacherProjectTranslationService } from '../../../services/teacherProjectTranslationService';
@@ -33,6 +32,7 @@ import { CreateComponentService } from '../../../services/createComponentService
 import { VLEProjectService } from '../../../vle/vleProjectService';
 import { NotebookService } from '../../../services/notebookService';
 import { MatDividerModule } from '@angular/material/divider';
+import { AddComponentComponent } from '../add-component/add-component.component';
 
 let component: NodeAuthoringComponent;
 let component1: any;
@@ -51,7 +51,7 @@ describe('NodeAuthoringComponent', () => {
     await TestBed.configureTestingModule({
       declarations: [NodeAuthoringComponent],
       imports: [
-        AddComponentButtonComponent,
+        AddComponentComponent,
         BrowserAnimationsModule,
         ComponentAuthoringModule,
         ComponentTypeServiceModule,