diff --git a/src/app/teacher/authoring-tool.module.ts b/src/app/teacher/authoring-tool.module.ts index 3095e1714f..19c48699ec 100644 --- a/src/app/teacher/authoring-tool.module.ts +++ b/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, diff --git a/src/assets/wise5/authoringTool/node/add-component-button/add-component-button.component.html b/src/assets/wise5/authoringTool/node/add-component-button/add-component-button.component.html index b21aa47227..3ad499a74e 100644 --- a/src/assets/wise5/authoringTool/node/add-component-button/add-component-button.component.html +++ b/src/assets/wise5/authoringTool/node/add-component-button/add-component-button.component.html @@ -1,31 +1,9 @@ -@if (firstComponent) { - - - - - -} @else { - -} + diff --git a/src/assets/wise5/authoringTool/node/add-component/add-component.component.html b/src/assets/wise5/authoringTool/node/add-component/add-component.component.html new file mode 100644 index 0000000000..fc888ad57d --- /dev/null +++ b/src/assets/wise5/authoringTool/node/add-component/add-component.component.html @@ -0,0 +1,12 @@ +
+ + +
diff --git a/src/assets/wise5/authoringTool/node/add-component/add-component.component.scss b/src/assets/wise5/authoringTool/node/add-component/add-component.component.scss new file mode 100644 index 0000000000..8d64ed3317 --- /dev/null +++ b/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; + } + } +} \ No newline at end of file diff --git a/src/assets/wise5/authoringTool/node/add-component/add-component.component.spec.ts b/src/assets/wise5/authoringTool/node/add-component/add-component.component.spec.ts new file mode 100644 index 0000000000..aedf591c2e --- /dev/null +++ b/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; + + 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(); + }); +}); diff --git a/src/assets/wise5/authoringTool/node/add-component/add-component.component.ts b/src/assets/wise5/authoringTool/node/add-component/add-component.component.ts new file mode 100644 index 0000000000..9f1a621109 --- /dev/null +++ b/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 = new EventEmitter(); + protected focus: boolean; +} diff --git a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html b/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html index 32193e544a..2fa0cdda3d 100644 --- a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html +++ b/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html @@ -22,110 +22,110 @@ @if (components.length === 0 && !isGroupNode) {

This step does not have any components.

- + }
+ @if (components.length > 0) { + + } @for (component of components; track component.id; let i = $index; let last = $last) { -
- -
+
+ -
- @if (components.length > 1) { - drag_indicator +
+ @if (components.length > 1) { + drag_indicator + } + {{ i + 1 }}. {{ getComponentTypeLabel(component.type) }} +
+ +
+ @if (component.id === editingComponentId) { + + } + + +
- -
- @if (component.id === editingComponentId) { - - } - +
+ +
+ +
+ @if (i > 0) { -
-
- -
- + } + @if (!last) { + + }
- -
- - @if (i > 0) { - - } - @if (!last) { - - } +
- - {{ i + 1 }}. {{ getComponentTypeLabel(component.type) }} - +
}
diff --git a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.scss b/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.scss index 74ced36e24..d2688edfb7 100644 --- a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.scss +++ b/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 { diff --git a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.spec.ts b/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.spec.ts index 5beae635f7..38d3aabe30 100644 --- a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.spec.ts +++ b/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, diff --git a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.ts b/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.ts index 03fd7bb9f1..9928558765 100644 --- a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.ts +++ b/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.ts @@ -162,6 +162,14 @@ export class NodeAuthoringComponent implements OnInit { ); } + private isElementInViewport(element: HTMLElement): boolean { + const rect = element.getBoundingClientRect(); + return ( + rect.top >= -100 && + rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + 100 + ); + } + /** * Temporarily highlight the specified components * @param components an array of components to highlight @@ -170,7 +178,10 @@ export class NodeAuthoringComponent implements OnInit { // wait for the UI to update and then highlight the first component setTimeout(() => { if (components.length > 0) { - document.getElementById(components[0].id).scrollIntoView(); + const element = document.getElementById(components[0].id); + if (!this.isElementInViewport(element)) { + element.scrollIntoView(); + } components.forEach((component) => temporarilyHighlightElement(component.id)); } }, 100); diff --git a/src/messages.xlf b/src/messages.xlf index c1cb85b0cd..c41b00d018 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -1220,7 +1220,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html - 103 + 97 src/assets/wise5/components/common/feedbackRule/edit-feedback-rules/edit-feedback-rules.component.html @@ -1239,7 +1239,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html - 115 + 109 src/assets/wise5/components/common/feedbackRule/edit-feedback-rules/edit-feedback-rules.component.html @@ -11665,20 +11665,6 @@ The branches will be removed but the steps will remain in the unit. 129 - - Add component before - - src/assets/wise5/authoringTool/node/add-component-button/add-component-button.component.html - 15 - - - - Add component after - - src/assets/wise5/authoringTool/node/add-component-button/add-component-button.component.html - 18 - - Add component