Skip to content

Commit ced3e8a

Browse files
breitybreity
authored
Merge pull request #2888 from WISE-Community/issue-2885-upgrade-concept-map-authoring-to-angular
Upgrade Concept Map authoring to Angular component
2 parents d06a668 + 490c44e commit ced3e8a

9 files changed

Lines changed: 741 additions & 695 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: 287 additions & 66 deletions
Large diffs are not rendered by default.

‎src/main/webapp/wise5/authoringTool/node/node.html‎

Lines changed: 77 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -9,82 +9,83 @@
99
<div ui-view></div>
1010
<div ng-if="nodeAuthoringController.$state.current.name == 'root.at.project.node'">
1111
<div style='background-color: white; position: sticky; top: 17px; z-index: 2;'>
12-
<md-button id='backToProjectButton' class='topButton md-raised md-primary'
13-
ng-click='nodeAuthoringController.close()'
14-
ng-disabled='nodeAuthoringController.insertComponentMode'>
15-
<md-icon>arrow_back</md-icon>
16-
<md-tooltip md-direction='top'
17-
class='projectButtonTooltip'
12+
<div layout="row" layout-wrap>
13+
<md-button id='backToProjectButton' class='topButton md-raised md-primary'
14+
ng-click='nodeAuthoringController.close()'
15+
ng-disabled='nodeAuthoringController.insertComponentMode'>
16+
<md-icon>arrow_back</md-icon>
17+
<md-tooltip md-direction='top'
18+
class='projectButtonTooltip'
19+
ng-if='nodeAuthoringController.showStepButtons'>
20+
{{ ::'backToProjectView' | translate }}
21+
</md-tooltip>
22+
<md-tooltip md-direction='top'
23+
class='projectButtonTooltip'
24+
ng-if='!nodeAuthoringController.showStepButtons'>
25+
{{ ::'backToStepView' | translate }}
26+
</md-tooltip>
27+
</md-button>
28+
<md-button id='addComponentButton'
29+
ng-if='nodeAuthoringController.showStepButtons && !projectController.isGroupNode(nodeAuthoringController.node.id)'
30+
class='topButton md-raised md-primary'
31+
ng-click='nodeAuthoringController.addComponent()'
32+
ng-disabled='nodeAuthoringController.getSelectedComponentIds().length != 0 || nodeAuthoringController.insertComponentMode'>
33+
<md-icon>add</md-icon>
34+
<md-tooltip md-direction='top' class='projectButtonTooltip'>{{ ::'addNewComponent' | translate }}</md-tooltip>
35+
</md-button>
36+
<md-button id='importComponentButton'
37+
ng-if='nodeAuthoringController.showStepButtons && !projectController.isGroupNode(nodeAuthoringController.node.id)'
38+
class='topButton md-raised md-primary'
39+
ng-click='nodeAuthoringController.importComponent()'
40+
ng-disabled='nodeAuthoringController.getSelectedComponentIds().length != 0 || nodeAuthoringController.insertComponentMode'>
41+
<md-icon>system_update_alt</md-icon>
42+
<md-tooltip md-direction='top' class='projectButtonTooltip'>{{ ::'importComponent' | translate }}</md-tooltip>
43+
</md-button>
44+
<md-button id='moveComponentButton'
45+
ng-if='nodeAuthoringController.showStepButtons && !projectController.isGroupNode(nodeAuthoringController.node.id)'
46+
class='topButton md-raised md-primary'
47+
ng-click='nodeAuthoringController.moveButtonClicked()'
48+
ng-disabled='nodeAuthoringController.insertComponentMode'>
49+
<md-icon>redo</md-icon>
50+
<md-tooltip md-direction='top' class='projectButtonTooltip'>{{ ::'move' | translate }}</md-tooltip>
51+
</md-button>
52+
<md-button id='copyComponentButton'
53+
ng-if='nodeAuthoringController.showStepButtons && !projectController.isGroupNode(nodeAuthoringController.node.id)'
54+
class='topButton md-raised md-primary'
55+
ng-click='nodeAuthoringController.copyButtonClicked()'
56+
ng-disabled='nodeAuthoringController.insertComponentMode'>
57+
<md-icon>content_copy</md-icon>
58+
<md-tooltip md-direction='top' class='projectButtonTooltip'>{{ ::'copy' | translate }}</md-tooltip>
59+
</md-button>
60+
<md-button id='deleteComponentButton'
61+
ng-if='nodeAuthoringController.showStepButtons && !projectController.isGroupNode(nodeAuthoringController.node.id)'
62+
class='topButton md-raised md-primary'
63+
ng-click='nodeAuthoringController.deleteButtonClicked()'
64+
ng-disabled='nodeAuthoringController.insertComponentMode'>
65+
<md-icon>delete</md-icon>
66+
<md-tooltip md-direction='top' class='projectButtonTooltip'>{{ ::'DELETE' | translate }}</md-tooltip>
67+
</md-button>
68+
<md-button id='editStepRubricButton' class='topButton md-raised md-primary'
69+
ng-click='nodeAuthoringController.editRubric()'
70+
ng-disabled='nodeAuthoringController.getSelectedComponentIds().length != 0 || nodeAuthoringController.insertComponentMode'
1871
ng-if='nodeAuthoringController.showStepButtons'>
19-
{{ ::'backToProjectView' | translate }}
20-
</md-tooltip>
21-
<md-tooltip md-direction='top'
22-
class='projectButtonTooltip'
23-
ng-if='!nodeAuthoringController.showStepButtons'>
24-
{{ ::'backToStepView' | translate }}
25-
</md-tooltip>
26-
</md-button>
27-
<md-button id='addComponentButton'
28-
ng-if='nodeAuthoringController.showStepButtons && !projectController.isGroupNode(nodeAuthoringController.node.id)'
29-
class='topButton md-raised md-primary'
30-
ng-click='nodeAuthoringController.addComponent()'
31-
ng-disabled='nodeAuthoringController.getSelectedComponentIds().length != 0 || nodeAuthoringController.insertComponentMode'>
32-
<md-icon>add</md-icon>
33-
<md-tooltip md-direction='top' class='projectButtonTooltip'>{{ ::'addNewComponent' | translate }}</md-tooltip>
34-
</md-button>
35-
<md-button id='importComponentButton'
36-
ng-if='nodeAuthoringController.showStepButtons && !projectController.isGroupNode(nodeAuthoringController.node.id)'
37-
class='topButton md-raised md-primary'
38-
ng-click='nodeAuthoringController.importComponent()'
39-
ng-disabled='nodeAuthoringController.getSelectedComponentIds().length != 0 || nodeAuthoringController.insertComponentMode'>
40-
<md-icon>system_update_alt</md-icon>
41-
<md-tooltip md-direction='top' class='projectButtonTooltip'>{{ ::'importComponent' | translate }}</md-tooltip>
42-
</md-button>
43-
<md-button id='moveComponentButton'
44-
ng-if='nodeAuthoringController.showStepButtons && !projectController.isGroupNode(nodeAuthoringController.node.id)'
45-
class='topButton md-raised md-primary'
46-
ng-click='nodeAuthoringController.moveButtonClicked()'
47-
ng-disabled='nodeAuthoringController.insertComponentMode'>
48-
<md-icon>redo</md-icon>
49-
<md-tooltip md-direction='top' class='projectButtonTooltip'>{{ ::'move' | translate }}</md-tooltip>
50-
</md-button>
51-
<md-button id='copyComponentButton'
52-
ng-if='nodeAuthoringController.showStepButtons && !projectController.isGroupNode(nodeAuthoringController.node.id)'
53-
class='topButton md-raised md-primary'
54-
ng-click='nodeAuthoringController.copyButtonClicked()'
55-
ng-disabled='nodeAuthoringController.insertComponentMode'>
56-
<md-icon>content_copy</md-icon>
57-
<md-tooltip md-direction='top' class='projectButtonTooltip'>{{ ::'copy' | translate }}</md-tooltip>
58-
</md-button>
59-
<md-button id='deleteComponentButton'
60-
ng-if='nodeAuthoringController.showStepButtons && !projectController.isGroupNode(nodeAuthoringController.node.id)'
61-
class='topButton md-raised md-primary'
62-
ng-click='nodeAuthoringController.deleteButtonClicked()'
63-
ng-disabled='nodeAuthoringController.insertComponentMode'>
64-
<md-icon>delete</md-icon>
65-
<md-tooltip md-direction='top' class='projectButtonTooltip'>{{ ::'DELETE' | translate }}</md-tooltip>
66-
</md-button>
67-
<md-button id='editStepRubricButton' class='topButton md-raised md-primary'
68-
ng-click='nodeAuthoringController.editRubric()'
69-
ng-disabled='nodeAuthoringController.getSelectedComponentIds().length != 0 || nodeAuthoringController.insertComponentMode'
70-
ng-if='nodeAuthoringController.showStepButtons'>
71-
<md-icon>message</md-icon>
72-
<md-tooltip md-direction='top' class='projectButtonTooltip'>{{ ::'editStepRubric' | translate }}</md-tooltip>
73-
</md-button>
74-
<md-button id='stepAdvancedButton' class='topButton md-raised md-primary'
75-
ng-click='nodeAuthoringController.showAdvancedView()'
76-
ng-disabled='nodeAuthoringController.getSelectedComponentIds().length != 0 || nodeAuthoringController.insertComponentMode'
77-
ng-if='nodeAuthoringController.showStepButtons'>
78-
<md-icon>build</md-icon>
79-
<md-tooltip md-direction='top' class='projectButtonTooltip'>{{ ::'ADVANCED' | translate }}</md-tooltip>
80-
</md-button>
81-
<md-button id='stepUndoButton' class='topButton md-raised md-primary' ng-click='nodeAuthoringController.undo()'
82-
ng-if='!projectController.isGroupNode(nodeAuthoringController.node.id) && nodeAuthoringController.showStepButtons'
83-
ng-disabled='nodeAuthoringController.getSelectedComponentIds().length != 0 || nodeAuthoringController.undoStack.length == 0 || nodeAuthoringController.insertComponentMode'>
84-
<md-icon>undo</md-icon>
85-
<md-tooltip md-direction='top' class='projectButtonTooltip'>{{ ::'undo' | translate }}</md-tooltip>
86-
</md-button>
87-
<div style="float:right">
72+
<md-icon>message</md-icon>
73+
<md-tooltip md-direction='top' class='projectButtonTooltip'>{{ ::'editStepRubric' | translate }}</md-tooltip>
74+
</md-button>
75+
<md-button id='stepAdvancedButton' class='topButton md-raised md-primary'
76+
ng-click='nodeAuthoringController.showAdvancedView()'
77+
ng-disabled='nodeAuthoringController.getSelectedComponentIds().length != 0 || nodeAuthoringController.insertComponentMode'
78+
ng-if='nodeAuthoringController.showStepButtons'>
79+
<md-icon>build</md-icon>
80+
<md-tooltip md-direction='top' class='projectButtonTooltip'>{{ ::'ADVANCED' | translate }}</md-tooltip>
81+
</md-button>
82+
<md-button id='stepUndoButton' class='topButton md-raised md-primary' ng-click='nodeAuthoringController.undo()'
83+
ng-if='!projectController.isGroupNode(nodeAuthoringController.node.id) && nodeAuthoringController.showStepButtons'
84+
ng-disabled='nodeAuthoringController.getSelectedComponentIds().length != 0 || nodeAuthoringController.undoStack.length == 0 || nodeAuthoringController.insertComponentMode'>
85+
<md-icon>undo</md-icon>
86+
<md-tooltip md-direction='top' class='projectButtonTooltip'>{{ ::'undo' | translate }}</md-tooltip>
87+
</md-button>
88+
<span flex></span>
8889
<md-button id='stepPreviewButton' class='topButton md-raised md-primary' ng-click='nodeAuthoringController.previewStepInNewWindow()'
8990
ng-if='!projectController.isGroupNode(nodeAuthoringController.node.id)'
9091
ng-disabled='nodeAuthoringController.showEditTransitions || nodeAuthoringController.insertComponentMode'>
@@ -142,7 +143,7 @@ <h6 ng-if="projectController.isGroupNode(nodeAuthoringController.node.id)">{{ ::
142143
</div>
143144
<div ng-repeat='(componentIndex, component) in nodeAuthoringController.components'
144145
class='component md-padding'
145-
style='padding: 0; margin-top: 0; margin-left: 16px;'
146+
style='padding: 0; margin: 0 16px;'
146147
ng-if='nodeAuthoringController.showComponents'>
147148
<div id='{{component.id}}' layout='row'>
148149
<div style='margin-top: 15px; width: 300px;'>

‎src/main/webapp/wise5/authoringTool/project/project.html‎

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<div id="top" class="view-content view-content--with-sidemenu">
22
<div class="l-constrained" layout="column">
33
<md-content class="node-content md-whiteframe-1dp"
4-
style="border-color: {{::nodeController.nodeStatus.icon.color}}; position: relative;"
4+
style="padding: 0 16px; border-color: {{::nodeController.nodeStatus.icon.color}}; position: relative;"
55
layout="row" layout-wrap>
6-
<div style="padding: 0 16px; margin-top: 1px; margin-bottom: 20px; width: 100%">
7-
<div align="right" style='background-color: white; position: sticky; top: 0px; z-index: 2;'>
6+
<div style="margin-bottom: 20px; width: 100%">
7+
<div style='text-align: right; background-color: white; position: sticky; top: 0px; z-index: 2;'>
88
<div style="color:red">{{projectController.currentAuthorsMessage}}</div>
99
<div>
1010
<span>&nbsp</span>
@@ -80,17 +80,11 @@
8080
height: auto !important;
8181
white-space: pre-line;
8282
}
83-
.preview-toolbar {
84-
float:right;
85-
}
86-
[dir=rtl] .preview-toolbar {
87-
float:left;
88-
}
8983
</style>
9084
<div ng-if="projectController.$state.current.name != 'root.at.project'" ui-view></div> <!-- this ui-view shows the node authoring view -->
9185
<div ng-if="projectController.$state.current.name == 'root.at.project'"> <!-- show this only when we're in the project view -->
9286
<div style='background-color: white; margin-bottom: 15px; position: sticky; top: 17px; z-index: 2;'>
93-
<span>
87+
<div layout="row" layout-wrap>
9488
<md-button id='projectBackButton' class='topButton md-raised md-primary'
9589
ng-click='projectController.goBackToProjectList()'
9690
ng-disabled='projectController.insertGroupMode || projectController.insertNodeMode'>
@@ -175,17 +169,20 @@
175169
<md-icon>build</md-icon>
176170
<md-tooltip md-direction='top' class='projectButtonTooltip'>{{ ::'ADVANCED' | translate }}</md-tooltip>
177171
</md-button>
178-
</span>
179-
<div class='preview-toolbar'>
180-
<md-button id='previewProjectButton' class='topButton md-raised md-primary' ng-click='projectController.previewProject()'
172+
<span flex></span>
173+
<md-button id='previewProjectButton' class='topButton md-raised md-primary'
174+
ng-click='projectController.previewProject()'
181175
ng-disabled='projectController.insertGroupMode || projectController.insertNodeMode'>
182176
<md-icon>visibility</md-icon>
183-
<md-tooltip md-direction='top' class='projectButtonTooltip'>{{ ::'previewProject' | translate }}</md-tooltip>
177+
<md-tooltip md-direction='top' class='projectButtonTooltip'>{{ ::'previewProject' | translate }}
178+
</md-tooltip>
184179
</md-button>
185-
<md-button id='previewProjectWithoutConstraintsButton' class='topButton md-raised md-primary' ng-click='projectController.previewProjectWithoutConstraints()'
180+
<md-button id='previewProjectWithoutConstraintsButton' class='topButton md-raised md-primary'
181+
ng-click='projectController.previewProjectWithoutConstraints()'
186182
ng-disabled='projectController.insertGroupMode || projectController.insertNodeMode'>
187183
<md-icon>visibility_off</md-icon>
188-
<md-tooltip md-direction='top' class='projectButtonTooltip'>{{ ::'previewProjectWithoutConstraints' | translate }}</md-tooltip>
184+
<md-tooltip md-direction='top' class='projectButtonTooltip'>{{
185+
::'previewProjectWithoutConstraints' | translate }}</md-tooltip>
189186
</md-button>
190187
</div>
191188
<div ng-if='projectController.showCreateGroup' layout='row' style='height:50'>

0 commit comments

Comments
 (0)