style(Authoring Tool): Edit activity in a dialog

[hirokiterashima]

Notes

• Please style and a11y as you see fit. Right now there seems to be some extra vertical padding in the header and the footer.
• This is part of the our effort to make the authoring tool a bit more WYSIWYG. In the future, the step editing view layout will more-closely match what the students see: blocks of component previews with the authored widths.

Changes

• When "Edit content" is clicked in the step editing view, it now launches a Edit Activity dialog where the author can make changes to the component content. Before, it would switch the component preview to the component editing view inline, which caused some jarring visual effects.
• Moved the Advanced Component Authoring button to the top right corner of this new Edit Activity dialog. Clicking on it will launch another dialog where they can made changes to the advanced component settings.
• The Advanced Activity authoring became accessible via a toggle once you open the dialog.

Test

• Things work as described above.
• The changes made in the Edit Activity dialog are saved and reflected in the component preview when the dialog is closed.

[qltysh]

Coverage Impact

Unable to calculate total coverage change because base branch coverage was not found.

Modified Files with Diff Coverage (7)

Rating	File	% Diff	Uncovered Line #s
	...l/edit-component-advanced/edit-component-advanced.component.ts	100.0%
	...-tool/edit-component-rubric/edit-component-rubric.component.ts	100.0%
	...se5/components/html/html-authoring/html-authoring.component.ts	100.0%
	...ring-tool/edit-component-tags/edit-component-tags.component.ts	0.0%	50-63
	...nents/edit-component-dialog/edit-component-dialog.component.ts	58.8%	24-33
	...wise-tinymce-editor/wise-authoring-tinymce-editor.component.ts	100.0%
	...ise5/authoringTool/components/component-authoring.component.ts	85.7%	48
	Total	71.4%

🤖 Increase coverage with AI coding...

In the `edit-activity-in-dialog` branch, add test coverage for this new code:

- `src/app/authoring-tool/edit-component-tags/edit-component-tags.component.ts` -- Line 50-63
- `src/assets/wise5/authoringTool/components/component-authoring.component.ts` -- Line 48
- `src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts` -- Line 24-33

🚦 See full report on Qlty Cloud »

🛟 Help

• Diff Coverage: Coverage for added or modified lines of code (excludes deleted files). Learn more.

• Total Coverage: Coverage for the whole repository, calculated as the sum of all File Coverage. Learn more.

• File Coverage: Covered Lines divided by Covered Lines plus Missed Lines. (Excludes non-executable lines including blank lines and comments.)

  • Indirect Changes: Changes to File Coverage for files that were not modified in this PR. Learn more.

[breity]

Functionality looks good. I cleaned up the dialog styles. I think we should wait to merge until we have the toggle for regular and advanced editing rather than the icon button that opens advanced editing in another dialog.

I was also thinking it would be better to have the editing dialog title include the activity number in the step, rather than just the activity type. So the dialog title could be "Edit: 1. Open Response", for example, rather than "Edit Activity (Open Response)". The activity number is not readily available in the dialog component as of now, so this would involve making it available to the dialog or maybe via a service lookup function.

[hirokiterashima]

After testing the latest, I noticed that when I author an HTML activity and try to "insert/edit images" and "insert/edit media", those dialogs appear behind the Edit Activity dialog.

I tried adding a z-index in skin.css (see below) to make sure that the TinyMCE dialog/menu appear above the Edit Activity dialog, but no luck. Can you take a look?

.tox-tinymce-aux {
  z-index: 99999 !important;
}

[hirokiterashima]

Related to this, none of the menu items (File, Edit, font size, etc) are displayed when clicked on.

Also, can we make the TinyMCE take up the entire height of the dialog?

[hirokiterashima]

🎉 This PR is included in version 5.232.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀