Skip to content

Commit d938831

Browse files
hirokiterashimahirokiterashima
authored
Merge pull request #2901 from WISE-Community/issue-2895-upgrade-label-authoring-to-angular
Upgrade Label authoring to Angular component
2 parents 8d6cb15 + b8d87ca commit d938831

11 files changed

Lines changed: 669 additions & 573 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
@@ -51,6 +51,7 @@ import { MultipleChoiceAuthoring } from '../../../wise5/components/multipleChoic
5151
import { ConceptMapAuthoring } from '../../../wise5/components/conceptMap/concept-map-authoring/concept-map-authoring.component';
5252
import { DrawAuthoring } from '../../../wise5/components/draw/draw-authoring/draw-authoring.component';
5353
import { MatchAuthoring } from '../../../wise5/components/match/match-authoring/match-authoring.component';
54+
import { LabelAuthoring } from '../../../wise5/components/label/label-authoring/label-authoring.component';
5455

5556
@NgModule({
5657
declarations: [
@@ -72,6 +73,7 @@ import { MatchAuthoring } from '../../../wise5/components/match/match-authoring/
7273
EditHTMLAdvancedComponent,
7374
EditOutsideUrlAdvancedComponent,
7475
HtmlAuthoring,
76+
LabelAuthoring,
7577
ManageStudentsComponent,
7678
MatchAuthoring,
7779
MilestonesComponent,

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

Lines changed: 222 additions & 0 deletions
Large diffs are not rendered by default.

‎src/main/webapp/wise5/authoringTool/components/component-authoring.component.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,11 @@ export abstract class ComponentAuthoring {
6262
);
6363
}
6464

65+
ngOnDestroy() {
66+
this.componentChangedSubscription.unsubscribe();
67+
this.starterStateResponseSubscription.unsubscribe();
68+
}
69+
6570
promptChanged(prompt: string): void {
6671
this.promptChange.next(prompt);
6772
}
@@ -103,6 +108,16 @@ export abstract class ComponentAuthoring {
103108
});
104109
}
105110

111+
chooseBackgroundImage(): void {
112+
const params = {
113+
isPopup: true,
114+
nodeId: this.nodeId,
115+
componentId: this.componentId,
116+
target: 'background'
117+
};
118+
this.openAssetChooser(params);
119+
}
120+
106121
openAssetChooser(params: any): any {
107122
return this.ProjectAssetService.openAssetChooser(params).then((data: any) => {
108123
return this.assetSelected(data);

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

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -156,16 +156,6 @@ export class ConceptMapAuthoring extends ComponentAuthoring {
156156
}
157157
}
158158

159-
chooseBackgroundImage(): void {
160-
const params = {
161-
isPopup: true,
162-
nodeId: this.nodeId,
163-
componentId: this.componentId,
164-
target: 'background'
165-
};
166-
this.openAssetChooser(params);
167-
}
168-
169159
chooseNodeImage(conceptMapNodeId: string): void {
170160
const params = {
171161
isPopup: true,

‎src/main/webapp/wise5/components/draw/draw-authoring/draw-authoring.component.ts‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -176,16 +176,6 @@ export class DrawAuthoring extends ComponentAuthoring {
176176
this.componentChanged();
177177
}
178178

179-
chooseBackgroundImage(): void {
180-
const params = {
181-
isPopup: true,
182-
nodeId: this.nodeId,
183-
componentId: this.componentId,
184-
target: 'background'
185-
};
186-
this.openAssetChooser(params);
187-
}
188-
189179
chooseStampImage(stampIndex: number): void {
190180
const params = {
191181
isPopup: true,

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

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

‎src/main/webapp/wise5/components/label/label-authoring/label-authoring.component.html‎

Lines changed: 236 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,236 @@
1+
<mat-form-field class="prompt">
2+
<mat-label i18n>Prompt</mat-label>
3+
<textarea matInput
4+
[ngModel]="authoringComponentContent.prompt"
5+
(ngModelChange)="promptChanged($event)"
6+
placeholder="Enter Prompt Here"
7+
i18n-placeholder
8+
cdkTextareaAutosize>
9+
</textarea>
10+
</mat-form-field>
11+
<div>
12+
<mat-form-field class="background-image input">
13+
<mat-label i18n>Background Image</mat-label>
14+
<input matInput
15+
[(ngModel)]="authoringComponentContent.backgroundImage"
16+
(ngModelChange)="textInputChange.next($event)"/>
17+
</mat-form-field>
18+
<button mat-raised-button
19+
color="primary"
20+
(click)="chooseBackgroundImage()"
21+
matTooltip="Choose an Image"
22+
matTooltipPosition="above"
23+
i18n-matTooltip
24+
aria-label="Image"
25+
i18n-aria-label>
26+
<mat-icon>insert_photo</mat-icon>
27+
</button>
28+
</div>
29+
<div>
30+
<mat-form-field class="input">
31+
<mat-label i18n>Canvas Width (px)</mat-label>
32+
<input matInput
33+
type="number"
34+
[(ngModel)]="authoringComponentContent.width"
35+
(ngModelChange)="numberInputChange.next($event)"/>
36+
</mat-form-field>
37+
<mat-form-field class="input">
38+
<mat-label i18n>Canvas Height (px)</mat-label>
39+
<input matInput
40+
type="number"
41+
[(ngModel)]="authoringComponentContent.height"
42+
(ngModelChange)="numberInputChange.next($event)"/>
43+
</mat-form-field>
44+
</div>
45+
<div>
46+
<mat-form-field class="input">
47+
<mat-label i18n>Point Radius Size (px)</mat-label>
48+
<input matInput
49+
type="number"
50+
[(ngModel)]="authoringComponentContent.pointSize"
51+
(ngModelChange)="numberInputChange.next($event)"/>
52+
</mat-form-field>
53+
<mat-form-field class="input">
54+
<mat-label i18n>Font Size</mat-label>
55+
<input matInput
56+
type="number"
57+
[(ngModel)]="authoringComponentContent.fontSize"
58+
(ngModelChange)="numberInputChange.next($event)"/>
59+
</mat-form-field>
60+
<mat-form-field class="input">
61+
<mat-label i18n>Label Max Character Width</mat-label>
62+
<input matInput
63+
type="number"
64+
[(ngModel)]="authoringComponentContent.labelWidth"
65+
(ngModelChange)="numberInputChange.next($event)"/>
66+
</mat-form-field>
67+
</div>
68+
<div>
69+
<div class="checkbox">
70+
<mat-checkbox
71+
color="primary"
72+
[(ngModel)]="authoringComponentContent.canCreateLabels"
73+
(change)="componentChanged()"
74+
i18n>
75+
Can Student Create Labels
76+
</mat-checkbox>
77+
</div>
78+
<div class="checkbox">
79+
<mat-checkbox
80+
color="primary"
81+
[(ngModel)]="authoringComponentContent.enableCircles"
82+
(ngModelChange)="componentChanged()"
83+
i18n>
84+
Enable Dots
85+
</mat-checkbox>
86+
</div>
87+
<div class="checkbox">
88+
<mat-checkbox
89+
color="primary"
90+
[(ngModel)]="authoringComponentContent.enableStudentUploadBackground"
91+
(ngModelChange)="componentChanged()"
92+
i18n>
93+
Allow Student to Upload Image for Background
94+
</mat-checkbox>
95+
</div>
96+
</div>
97+
<div>
98+
<div layout="row" class="starter-labels-button-container">
99+
<span i18n class="starter-labels-button-label">Starter Labels</span>
100+
<button mat-raised-button
101+
color="primary"
102+
(click)="addLabel()"
103+
matTooltip="Add Starter Label"
104+
matTooltipPosition="above"
105+
i18n-matTooltip
106+
aria-label="add"
107+
i18n-aria-label>
108+
<mat-icon>add</mat-icon>
109+
</button>
110+
</div>
111+
<div *ngIf="authoringComponentContent.labels == null || authoringComponentContent.labels.length === 0"
112+
class="info-block"
113+
i18n>
114+
There are no starter labels. Click the "Add Label" button to add a starter label.
115+
</div>
116+
<div *ngFor="let label of authoringComponentContent.labels; index as labelIndex"
117+
class="starter-label-container">
118+
<div>
119+
<mat-form-field class="input label-input">
120+
<mat-label i18n>Text</mat-label>
121+
<input matInput
122+
[(ngModel)]="label.text"
123+
(ngModelChange)="textInputChange.next($event)"
124+
placeholder="Enter Label Text Here"
125+
i18n-placeholder/>
126+
</mat-form-field>
127+
<mat-form-field class="input color-input">
128+
<mat-label i18n>Color</mat-label>
129+
<input matInput
130+
[(ngModel)]="label.color"
131+
(ngModelChange)="textInputChange.next($event)"
132+
ng-model-options="{ debounce: 1000 }"/>
133+
</mat-form-field>
134+
<button mat-raised-button
135+
color="primary"
136+
(click)="openColorViewer()"
137+
matTooltip="View Colors"
138+
matTooltipPosition="above"
139+
i18n-matTooltip
140+
aria-label="Color Palette"
141+
i18n-aria-label>
142+
<mat-icon>palette</mat-icon>
143+
</button>
144+
</div>
145+
<div>
146+
<div class="checkbox">
147+
<mat-checkbox
148+
color="primary"
149+
[(ngModel)]="label.canEdit"
150+
(ngModelChange)="componentChanged()"
151+
i18n>
152+
Can Student Edit Label
153+
</mat-checkbox>
154+
</div>
155+
<div class="checkbox">
156+
<mat-checkbox
157+
color="primary"
158+
[(ngModel)]="label.canDelete"
159+
(ngModelChange)="componentChanged()"
160+
i18n>
161+
Can Student Delete Label
162+
</mat-checkbox>
163+
</div>
164+
</div>
165+
<div *ngIf="authoringComponentContent.enableCircles"
166+
fxLayout="row wrap" fxLayoutAlign="start center">
167+
<span class="coordinate-location-label" i18n>Point Location</span>
168+
<mat-form-field class="input coordinate-input">
169+
<mat-label i18n>X</mat-label>
170+
<input matInput
171+
type="number"
172+
[(ngModel)]="label.pointX"
173+
(ngModelChange)="numberInputChange.next($event)"/>
174+
</mat-form-field>
175+
<mat-form-field class="input coordinate-input">
176+
<mat-label i18n>Y</mat-label>
177+
<input matInput
178+
type="number"
179+
[(ngModel)]="label.pointY"
180+
(ngModelChange)="numberInputChange.next($event)"/>
181+
</mat-form-field>
182+
</div>
183+
<div fxLayout="row wrap" fxLayoutAlign="start center">
184+
<span class="coordinate-location-label" i18n>Text Location</span>
185+
<mat-form-field class="input coordinate-input">
186+
<mat-label i18n>X</mat-label>
187+
<input matInput
188+
type="number"
189+
[(ngModel)]="label.textX"
190+
(ngModelChange)="numberInputChange.next($event)"/>
191+
</mat-form-field>
192+
<mat-form-field class="input coordinate-input">
193+
<mat-label i18n>Y</mat-label>
194+
<input matInput
195+
type="number"
196+
[(ngModel)]="label.textY"
197+
(ngModelChange)="numberInputChange.next($event)"/>
198+
</mat-form-field>
199+
<span fxFlex></span>
200+
<button mat-raised-button
201+
color="primary"
202+
(click)="deleteLabel(labelIndex, label)"
203+
matTooltip="Delete Label"
204+
matTooltipPosition="above"
205+
i18n-matTooltip
206+
aria-label="Delete"
207+
i18n-aria-label>
208+
<mat-icon>delete</mat-icon>
209+
</button>
210+
</div>
211+
</div>
212+
</div>
213+
<div class="starter-labels-buttons-container">
214+
<button mat-raised-button
215+
color="primary"
216+
class="starter-labels-button"
217+
(click)="saveStarterLabels()"
218+
matTooltip="Save Starter Labels"
219+
matTooltipPosition="above"
220+
i18n-matTooltip
221+
aria-label="Save"
222+
i18n-aria-label>
223+
<mat-icon>create</mat-icon>
224+
</button>
225+
<button mat-raised-button
226+
color="primary"
227+
class="starter-labels-button"
228+
(click)="deleteStarterLabels()"
229+
matTooltip="Delete Starter Labels"
230+
matTooltipPosition="above"
231+
i18n-matTooltip
232+
aria-label="Delete"
233+
i18n-aria-label>
234+
<mat-icon>delete_sweep</mat-icon>
235+
</button>
236+
</div>

‎src/main/webapp/wise5/components/label/label-authoring/label-authoring.component.scss‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
.prompt {
2+
width: 100%;
3+
}
4+
5+
.background-image {
6+
width: 80%;
7+
}
8+
9+
.input {
10+
margin-right: 20px;
11+
}
12+
13+
.checkbox {
14+
margin-top: 10px;
15+
margin-bottom: 10px;
16+
}
17+
18+
.starter-labels-button-container {
19+
margin-top: 20px;
20+
margin-bottom: 20px;
21+
}
22+
23+
.starter-labels-button-label {
24+
margin-right: 10px;
25+
}
26+
27+
.starter-label-container {
28+
border: 2px solid #dddddd;
29+
border-radius: 5px;
30+
margin-bottom: 10px;
31+
padding: 20px 20px 10px 20px;
32+
}
33+
34+
.info-block {
35+
margin-bottom: 20px;
36+
text-align: center;
37+
font-weight: 500;
38+
}
39+
40+
.label-input {
41+
width: 40%;
42+
}
43+
44+
.color-input {
45+
width: 30%;
46+
}
47+
48+
.coordinate-location-label {
49+
margin-right: 20px;
50+
}
51+
52+
.coordinate-input {
53+
width: 15%;
54+
}
55+
56+
.starter-labels-buttons-container {
57+
margin-top: 20px;
58+
margin-bottom: 10px;
59+
margin-left: 10px;
60+
}
61+
62+
.starter-labels-button {
63+
margin-right: 10px;
64+
}

0 commit comments

Comments
 (0)