Skip to content

Commit 88ebfb5

Browse files
geoffreykwangeoffreykwan
committed
Upgraded Concept Map authoring to Angular. #2885 
1 parent 3ecb9d9 commit 88ebfb5

7 files changed

Lines changed: 641 additions & 596 deletions

File tree

‎src/main/webapp/site/src/app/teacher-hybrid-angular.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ import { OpenResponseAuthoring } from '../../../wise5/components/openResponse/op
4848
import { HtmlAuthoring } from '../../../wise5/components/html/html-authoring/html-authoring.component';
4949
import { OutsideUrlAuthoring } from '../../../wise5/components/outsideURL/outside-url-authoring/outside-url-authoring.component';
5050
import { MultipleChoiceAuthoring } from '../../../wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component';
51+
import { ConceptMapAuthoring } from '../../../wise5/components/conceptMap/concept-map-authoring/concept-map-authoring.component';
5152

5253
@NgModule({
5354
declarations: [
@@ -59,6 +60,7 @@ import { MultipleChoiceAuthoring } from '../../../wise5/components/multipleChoic
5960
ChooseNewComponentLocation,
6061
ComponentNewWorkBadgeComponent,
6162
ComponentSelectComponent,
63+
ConceptMapAuthoring,
6264
EditComponentRubricComponent,
6365
EditComponentJsonComponent,
6466
EditComponentMaxScoreComponent,

‎src/main/webapp/site/src/messages.xlf‎

Lines changed: 273 additions & 59 deletions
Large diffs are not rendered by default.

‎src/main/webapp/wise5/components/conceptMap/authoring.html‎

Lines changed: 0 additions & 432 deletions
This file was deleted.

‎src/main/webapp/wise5/components/conceptMap/concept-map-authoring/concept-map-authoring.component.html‎

Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
<mat-form-field class="prompt-input-container">
2+
<mat-label i18n>Prompt</mat-label>
3+
<textarea
4+
matInput
5+
[ngModel]="authoringComponentContent.prompt"
6+
(ngModelChange)="promptChanged($event)"
7+
placeholder="Enter Prompt Here"
8+
i18n-placeholder
9+
cdkTextareaAutosize>
10+
</textarea>
11+
</mat-form-field>
12+
<div fxLayout="row" fxLayoutAlign="start center">
13+
<mat-form-field class="background-input-container">
14+
<mat-label i18n>Background Image (Optional)</mat-label>
15+
<input matInput
16+
[(ngModel)]="authoringComponentContent.background"
17+
(ngModelChange)="inputChange.next($event)" />
18+
</mat-form-field>
19+
<button mat-raised-button
20+
color="primary"
21+
class="authoring-button"
22+
(click)="chooseBackgroundImage()"
23+
matTooltip="Choose an Image"
24+
matTooltipPosition="above"
25+
i18n-matTooltip>
26+
<mat-icon>insert_photo</mat-icon>
27+
</button>
28+
</div>
29+
<div>
30+
<mat-checkbox
31+
color="primary"
32+
[(ngModel)]="authoringComponentContent.stretchBackground"
33+
(ngModelChange)="componentChanged()"
34+
i18n>
35+
Stretch Background
36+
</mat-checkbox>
37+
</div>
38+
<div>
39+
<mat-form-field class="canvas-dimension-input-container">
40+
<mat-label i18n>Canvas Width (Optional)</mat-label>
41+
<input matInput
42+
[(ngModel)]="authoringComponentContent.width"
43+
(ngModelChange)="inputChange.next($event)"
44+
type="number"/>
45+
</mat-form-field>
46+
<mat-form-field class="canvas-dimension-input-container">
47+
<mat-label i18n>Canvas Height (Optional)</mat-label>
48+
<input matInput
49+
[(ngModel)]="authoringComponentContent.height"
50+
(ngModelChange)="inputChange.next($event)"
51+
type="number"/>
52+
</mat-form-field>
53+
</div>
54+
<div class="show-node-labels-checkbox-container">
55+
<mat-checkbox
56+
color="primary"
57+
[(ngModel)]="authoringComponentContent.showNodeLabels"
58+
(ngModelChange)="componentChanged()"
59+
i18n>
60+
Show Node Labels
61+
</mat-checkbox>
62+
</div>
63+
<div class="add-nodes-container">
64+
<span i18n>Nodes</span>
65+
<button mat-raised-button
66+
color="primary"
67+
class="authoring-button"
68+
(click)="addNode()"
69+
matTooltip="Add Node"
70+
matTooltipPosition="above"
71+
i18n-matTooltip
72+
aria-label="Add Node"
73+
i18n-aria-label>
74+
<mat-icon>add</mat-icon>
75+
</button>
76+
</div>
77+
<div *ngIf="authoringComponentContent.nodes == null || authoringComponentContent.nodes.length == 0">
78+
<p i18n>There are no nodes. Click the "Add Node" button to add a node.</p>
79+
</div>
80+
<div *ngFor="let node of authoringComponentContent.nodes; index as nodeIndex; first as isFirst; last as isLast"
81+
class="node-row"
82+
fxLayout="row"
83+
fxLayoutAlign="start center">
84+
<mat-form-field class="node-label-container">
85+
<mat-label i18n>Label</mat-label>
86+
<input matInput
87+
[(ngModel)]="node.label"
88+
(ngModelChange)="inputChange.next($event)"/>
89+
</mat-form-field>
90+
<mat-form-field class="node-file-name-container">
91+
<mat-label i18n>File Name</mat-label>
92+
<input matInput
93+
[(ngModel)]="node.fileName"
94+
(ngModelChange)="inputChange.next($event)"/>
95+
</mat-form-field>
96+
<button mat-raised-button
97+
color="primary"
98+
class="authoring-button"
99+
(click)="chooseNodeImage(node.id)"
100+
matTooltip="Choose an Image"
101+
matTooltipPosition="above"
102+
i18n-matTooltip
103+
aria-label="Choose an Image"
104+
i18n-aria-label>
105+
<mat-icon>insert_photo</mat-icon>
106+
</button>
107+
<mat-form-field class="node-dimension-container">
108+
<mat-label i18n>Width</mat-label>
109+
<input matInput
110+
[(ngModel)]="node.width"
111+
(ngModelChange)="inputChange.next($event)"
112+
type="number"/>
113+
</mat-form-field>
114+
<mat-form-field class="node-dimension-container">
115+
<mat-label i18n>Height</mat-label>
116+
<input matInput
117+
[(ngModel)]="node.height"
118+
(ngModelChange)="inputChange.next($event)"
119+
type="number"/>
120+
</mat-form-field>
121+
<button mat-raised-button
122+
color="primary"
123+
class="node-authoring-button"
124+
[disabled]="isFirst"
125+
(click)="moveNodeUpButtonClicked(nodeIndex)"
126+
matTooltip="Move Up"
127+
matTooltipPosition="above"
128+
i18n-matTooltip
129+
aria-label="Move Up"
130+
i18n-aria-label>
131+
<mat-icon>arrow_upward</mat-icon>
132+
</button>
133+
<button mat-raised-button
134+
color="primary"
135+
class="node-authoring-button"
136+
[disabled]="isLast"
137+
(click)="moveNodeDownButtonClicked(nodeIndex)"
138+
matTooltip="Move Down"
139+
matTooltipPosition="above"
140+
i18n-matTooltip
141+
aria-label="Move Down"
142+
i18n-aria-label>
143+
<mat-icon>arrow_downward</mat-icon>
144+
</button>
145+
<button mat-raised-button
146+
color="primary"
147+
class="node-authoring-button"
148+
(click)="nodeDeleteButtonClicked(nodeIndex)"
149+
matTooltip="Delete"
150+
matTooltipPosition="above"
151+
i18n-matTooltip
152+
aria-label="Delete"
153+
i18n-aria-label>
154+
<mat-icon>delete</mat-icon>
155+
</button>
156+
</div>
157+
<div class="add-nodes-container">
158+
<span i18n>Links</span>
159+
<button mat-raised-button
160+
color="primary"
161+
class="authoring-button"
162+
(click)="addLink()"
163+
matTooltip="Add Link"
164+
matTooltipPosition="above"
165+
i18n-matTooltip
166+
aria-label="Add Link"
167+
i18n-aria-label>
168+
<mat-icon>add</mat-icon>
169+
</button>
170+
</div>
171+
<div *ngIf="authoringComponentContent.links == null || authoringComponentContent.links.length == 0">
172+
<p i18n>There are no links. Click the "Add Link" button to add a link.</p>
173+
</div>
174+
<div *ngFor="let link of authoringComponentContent.links; index as linkIndex; first as isFirst; last as isLast"
175+
class="link-row"
176+
fxLayout="row"
177+
fxLayoutAlign="start center">
178+
<mat-form-field class="link-label-container">
179+
<mat-label i18n>Label</mat-label>
180+
<input matInput
181+
[(ngModel)]="link.label"
182+
(ngModelChange)="inputChange.next($event)"/>
183+
</mat-form-field>
184+
<mat-form-field class="link-color-container">
185+
<mat-label i18n>Color</mat-label>
186+
<input matInput
187+
[(ngModel)]="link.color"
188+
(ngModelChange)="inputChange.next($event)"/>
189+
</mat-form-field>
190+
<button mat-raised-button
191+
color="primary"
192+
class="authoring-button"
193+
[disabled]="isFirst"
194+
(click)="moveLinkUpButtonClicked(linkIndex)"
195+
matTooltip="Move Up"
196+
matTooltipPosition="above"
197+
i18n-matTooltip
198+
aria-label="Move Up"
199+
i18n-aria-label>
200+
<mat-icon>arrow_upward</mat-icon>
201+
</button>
202+
<button mat-raised-button
203+
color="primary"
204+
class="authoring-button"
205+
[disabled]="isLast"
206+
(click)="moveLinkDownButtonClicked(linkIndex)"
207+
matTooltip="Move Down"
208+
matTooltipPosition="above"
209+
i18n-matTooltip
210+
aria-label="Move Down"
211+
i18n-aria-label>
212+
<mat-icon>arrow_downward</mat-icon>
213+
</button>
214+
<button mat-raised-button
215+
color="primary"
216+
class="authoring-button"
217+
(click)="linkDeleteButtonClicked(linkIndex)"
218+
matTooltip="Delete"
219+
matTooltipPosition="above"
220+
i18n-matTooltip
221+
aria-label="Delete"
222+
i18n-aria-label>
223+
<mat-icon>delete</mat-icon>
224+
</button>
225+
</div>
226+
<div class="starter-concept-map-buttons-container">
227+
<button mat-raised-button
228+
color="primary"
229+
class="authoring-button"
230+
(click)="saveStarterConceptMap()"
231+
matTooltip="Save Starter Concept Map"
232+
matTooltipPosition="above"
233+
i18n-matTooltip
234+
aria-label="Save Starter Concept Map"
235+
i18n-aria-label>
236+
<mat-icon>create</mat-icon>
237+
</button>
238+
<button mat-raised-button
239+
color="primary"
240+
class="authoring-button"
241+
(click)="deleteStarterConceptMap()"
242+
matTooltip="Delete Starter Concept Map"
243+
matTooltipPosition="above"
244+
i18n-matTooltip
245+
aria-label="Delete Starter Concept Map"
246+
i18n-aria-label>
247+
<mat-icon>delete_sweep</mat-icon>
248+
</button>
249+
</div>

‎src/main/webapp/wise5/components/conceptMap/concept-map-authoring/concept-map-authoring.component.scss‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
.prompt-input-container {
2+
width: 100%;
3+
}
4+
5+
.background-input-container {
6+
width: 90%;
7+
}
8+
9+
.authoring-button {
10+
margin-left: 10px;
11+
margin-right: 10px;
12+
}
13+
14+
.canvas-dimension-input-container {
15+
width: 20%;
16+
margin-top: 20px;
17+
margin-right: 20px;
18+
}
19+
20+
.show-node-labels-checkbox-container {
21+
margin-top: 10px;
22+
margin-bottom: 10px;
23+
}
24+
25+
.add-nodes-container {
26+
margin-top: 20px;
27+
margin-bottom: 20px;
28+
}
29+
30+
.node-row {
31+
width: 100%;
32+
}
33+
34+
.node-label-container {
35+
width: 30%;
36+
margin-right: 20px;
37+
}
38+
39+
.node-file-name-container {
40+
width: 30%;
41+
}
42+
43+
.node-dimension-container {
44+
width: 6%;
45+
margin-left: 10px;
46+
margin-right: 10px;
47+
}
48+
49+
.node-authoring-button {
50+
margin-left: 10px;
51+
margin-right: 10px;
52+
}
53+
54+
.link-row {
55+
width: 100%;
56+
}
57+
58+
.link-label-container {
59+
width: 30%;
60+
margin-right: 20px;
61+
}
62+
63+
.link-color-container {
64+
width: 30%;
65+
}
66+
67+
.starter-concept-map-buttons-container {
68+
margin-top: 20px;
69+
margin-bottom: 20px;
70+
}

0 commit comments

Comments
 (0)