-
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 45a170ca528..b120e0854ff 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
@@ -1,121 +1,64 @@
-@import
- 'style/abstracts/variables',
- 'style/abstracts/functions';
-
-.top-button-bar {
- padding: 16px 8px 4px;
- background-color: white;
- position: sticky;
- top: 26px;
- z-index: 2;
-}
-
-.node-title {
- width: 50%;
-}
-
-.node-buttons {
- margin: 8px 0;
-}
-
-.insert-component-message {
- margin-top: 10px;
-}
-
-.insert-as-first-component-div {
- margin: 10px 30px;
-}
-
-.insert-as-first-component-message {
- font-weight: bold;
-}
-
-.no-components-message {
- margin-left: 45px;
- margin-top: 45px;
- font-size: 1em;
- font-weight: bold;
-}
-
-.components-header {
- margin-top: 8px;
- margin-left: 8px;
- margin-right: 8px;
-}
-
-.component {
- margin: 4px 16px 16px;
- border: 2px solid #dddddd;
- border-radius: 6px;
- position: relative;
-}
-
-.component-header {
- height: 48px;
- padding: 0px 20px 0px 10px;
- cursor: pointer;
-}
-
-.component-header-highlight:hover {
- background-color: #add8e6;
-}
-
-.component-label {
- font-weight: bold;
-}
-
-.component-expand-collapse-div {
- flex-grow: 1;
- align-self: stretch;
-}
-
-.dynamic-component-button {
- display: none;
- margin-right: 20px;
- &.show-dynamic-component-button {
- display: block;
+.node-authoring {
+ .node-authoring-header {
+ margin: 8px 8px 0;
}
-}
-.component-header:hover .dynamic-component-button {
- display: block;
-}
-
-.component-authoring {
- padding: 0px 20px;
-}
-
-.insert-after-div {
- margin: 0px 30px;
-}
+ .node-authoring-controls {
+ padding: 8px 16px;
+ background-color: white;
+ position: sticky;
+ top: 0;
+ z-index: 2;
+ }
-.mat-icon {
- margin: 0px;
-}
+ .component {
+ flex: 1;
+
+ .mat-expansion-panel-header {
+ padding-inline-start: 8px;
+ }
+
+ .mat-expansion-panel-header-title {
+ flex-grow: 100;
+ }
+
+ .mat-expansion-panel-body {
+ padding-left: 16px;
+ padding-right: 16px;
+ }
+
+ &:hover, &:focus-within, &.mat-expanded {
+ .component-action {
+ display: block;
+ }
+ }
+
+ &.mat-expanded {
+ edit-component-advanced-button {
+ display: block;
+ }
+ }
+ }
-.add-component {
- position: absolute;
- bottom: 24px;
- height: 0px;
- width: 100%;
- text-align: center;
- z-index: 1;
-}
+ edit-component-advanced-button {
+ display: none;
+ }
-.drag-handle {
- cursor: move;
- margin-right: 4px;
- margin-left: 4px;
-}
+ .component-action {
+ display: none;
+ }
-.cdk-drag-placeholder {
- opacity: .4;
-}
+ .drag-handle {
+ cursor: move;
+ margin-right: 4px;
+ margin-left: 4px;
+ }
-mat-icon[disabled=true] {
- opacity: .5;
-}
+ .cdk-drag-placeholder {
+ opacity: .4;
+ }
-.component-label {
- color: rgba(0,0,0,.87);
+ .mat-icon {
+ margin: 0;
+ }
}
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 5ccbf0c7edc..058b125aa94 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
@@ -28,11 +28,11 @@ import { TeacherProjectTranslationService } from '../../../services/teacherProje
import { ComponentTypeServiceModule } from '../../../services/componentTypeService.module';
import { DeleteTranslationsService } from '../../../services/deleteTranslationsService';
import { PreviewComponentButtonComponent } from '../../components/preview-component-button/preview-component-button.component';
-import { TranslatableInputComponent } from '../../components/translatable-input/translatable-input.component';
import { CopyTranslationsService } from '../../../services/copyTranslationsService';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { RouterTestingModule } from '@angular/router/testing';
import { CreateComponentService } from '../../../services/createComponentService';
+import { MatExpansionModule } from '@angular/material/expansion';
let component: NodeAuthoringComponent;
let component1: any;
@@ -60,6 +60,7 @@ describe('NodeAuthoringComponent', () => {
EditNodeTitleComponent,
FormsModule,
MatCheckboxModule,
+ MatExpansionModule,
MatIconModule,
MatInputModule,
PreviewComponentButtonComponent,
@@ -142,7 +143,7 @@ describe('NodeAuthoringComponent', () => {
function copyComponent() {
describe('copyComponent()', () => {
it('should copy component', () => {
- clickComponentHeader(component2.id);
+ clickComponent(component2.id);
fixture.detectChanges();
expect(teacherProjectService.idToNode[nodeId1].components).toEqual(node1Components);
clickComponentCopyButton(component2.id);
@@ -159,7 +160,7 @@ function copyComponent() {
function deleteComponent() {
describe('deleteComponent()', () => {
it('should delete component', () => {
- clickComponentHeader(component2.id);
+ clickComponent(component2.id);
fixture.detectChanges();
expect(teacherProjectService.idToNode[nodeId1].components).toEqual(node1Components);
confirmSpy.and.returnValue(true);
@@ -200,8 +201,8 @@ function clickComponentCheckbox(componentId: string): void {
queryByCssAndClick(`#${componentId} mat-checkbox label`);
}
-function clickComponentHeader(componentId: string): void {
- queryByCssAndClick(`#${componentId} .component-header`);
+function clickComponent(componentId: string): void {
+ queryByCssAndClick(`#${componentId}`);
}
function queryByCssAndClick(css: string): void {
@@ -212,11 +213,6 @@ function clickComponentCopyButton(componentId: string): void {
queryByCssAndClickCopy(`#${componentId} button`);
}
-function clickCopyComponentsButton(): void {
- queryByCssAndClickCopy('button');
- fixture.detectChanges();
-}
-
function queryByCssAndClickCopy(css: string): void {
clickNativeElement(queryByCssAndInnerText(css, 'content_copy'));
}
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 d8878f10a3d..77114eeff08 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
@@ -1,4 +1,13 @@
-import { Component, Input, OnInit, Signal, WritableSignal, computed, signal } from '@angular/core';
+import {
+ Component,
+ Input,
+ OnInit,
+ Signal,
+ ViewEncapsulation,
+ WritableSignal,
+ computed,
+ signal
+} from '@angular/core';
import { Subscription } from 'rxjs';
import { TeacherDataService } from '../../../services/teacherDataService';
import { TeacherProjectService } from '../../../services/teacherProjectService';
@@ -16,7 +25,8 @@ import { copy } from '../../../common/object/object';
@Component({
selector: 'node-authoring',
templateUrl: './node-authoring.component.html',
- styleUrls: ['./node-authoring.component.scss']
+ styleUrls: ['./node-authoring.component.scss'],
+ encapsulation: ViewEncapsulation.None
})
export class NodeAuthoringComponent implements OnInit {
components: ComponentContent[] = [];
@@ -261,8 +271,8 @@ export class NodeAuthoringComponent implements OnInit {
});
}
- protected toggleComponent(componentId: string): void {
- this.componentsToExpanded[componentId] = !this.componentsToExpanded[componentId];
+ protected toggleComponent(componentId: string, expanded: boolean = true): void {
+ this.componentsToExpanded[componentId] = expanded;
this.projectService.uiChanged();
}
diff --git a/src/assets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.scss b/src/assets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.scss
index d0f9d93b4d2..ef6dbc055bc 100644
--- a/src/assets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.scss
+++ b/src/assets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.scss
@@ -3,6 +3,10 @@
padding-inline-start: 8px;
}
+ .mat-expansion-panel-header-title {
+ flex-grow: 100;
+ }
+
.mat-expansion-panel-body {
padding-left: 8px;
padding-right: 8px;
@@ -17,7 +21,6 @@
}
.no-steps-message {
- height: 40px;
- margin-left: 40px;
+ padding: 0 8px;
}
}
diff --git a/src/messages.xlf b/src/messages.xlf
index b957a6476f6..26d3cdaabcb 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -1175,7 +1175,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
- 119
+ 114
src/assets/wise5/components/common/feedbackRule/edit-feedback-rules/edit-feedback-rules.component.html
@@ -10240,14 +10240,14 @@ Click "Cancel" to keep the invalid JSON open so you can fix it.
src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html
- 11
+ 16
Preview component
src/assets/wise5/authoringTool/components/preview-component-button/preview-component-button.component.html
- 4
+ 3
@@ -12059,53 +12059,65 @@ The branches will be removed but the steps will remain in the unit.
Components
src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html
- 26
+ 27
Move Components
src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html
- 36
+ 37
Copy Components
src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html
- 46
+ 47
Delete Components
src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html
- 56
+ 57
-
+
+ Expand All
src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html
- 72,74
+ 73,75
+
+
+ src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-grading-view/milestone-grading-view.component.html
+ 22,24
+
+
+ src/assets/wise5/classroomMonitor/student-grading/student-grading.component.html
+ 34,36
-
+
- Collapse All
src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html
- 82,84
+ 83,85
+
+
+ src/assets/wise5/classroomMonitor/student-grading/student-grading.component.html
+ 45,47
This step does not have any components. Click the + button to add a component.
src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html
- 89
+ 91
-
- Toggle component authoring
+
+ Expand/collapse component
src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html
111
@@ -12115,21 +12127,14 @@ The branches will be removed but the steps will remain in the unit.
Select component
src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html
- 128
-
-
-
- Click to expand/collapse
-
- src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html
- 139
+ 124
Delete Component
src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html
- 173
+ 148
@@ -12137,7 +12142,7 @@ The branches will be removed but the steps will remain in the unit.
src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.ts
- 193
+ 203
@@ -12145,7 +12150,7 @@ The branches will be removed but the steps will remain in the unit.
src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.ts
- 194
+ 204
@@ -13877,17 +13882,6 @@ The branches will be removed but the steps will remain in the unit.
18
-
- + Expand All
-
- src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestones/milestone-grading-view/milestone-grading-view.component.html
- 22,24
-
-
- src/assets/wise5/classroomMonitor/student-grading/student-grading.component.html
- 34,36
-
-
Collapse All
@@ -15384,13 +15378,6 @@ Are you sure you want to proceed?
40
-
- - Collapse All
-
- src/assets/wise5/classroomMonitor/student-grading/student-grading.component.html
- 45,47
-
-
Sort by step