feat(Authoring): Use slider to set activity width

[hirokiterashima]

Notes

Please style as you see fit. It might be better to hide the explanation text in an info tooltip instead of always displaying it.

Changes

• In the activity advanced authoring > general tab, use a mat-slider to set the activity's width, in percentages. Possible values are 25, 33, 50, 66, 75, and 100. The default is 100.
• Add a blurb about what setting the activity width means in terms of display layout.

Before, we just displayed a input without any instructions, which was confusing for most people.

Test

• Existing activities show 100 (which is the default value).
• You can change the activity width to any of the possible values.
• Changes are saved.

[qltysh]

Coverage Impact

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

Modified Files with Diff Coverage (1)

Rating	File	% Diff	Uncovered Line #s
	...ng-tool/edit-component-width/edit-component-width.component.ts	83.3%	24-25
	Total	83.3%

🤖 Increase coverage with AI coding...

In the `activity-width-slider` branch, add test coverage for this new code:

- `src/app/authoring-tool/edit-component-width/edit-component-width.component.ts` -- Line 24-25

🚦 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 works well. I updated the explanation text and reduced the width of the slider slightly.

Because the slider goes from 25%-100%, the position of the slider thumb doesn't match visually with the selected value for anything under 100%. This is a bit confusing to me, as you would assume that a 50% width should be right in the middle of the slider, for example. Ideally, the slider could include 0%, but it would not be selectable. I experimented a bit and this is not easy to do with a mat-slider. Perhaps it's not too big of an issue for now. But another option could be to use a mat-button-toggle instead of a slider to reduce the visual disconnect.

I was also thinking that the width authoring setting could be moved out of the "General" advanced authoring tab, as it gets buried at the bottom for component types with lots of advanced settings. I think we could group it with the visibility constraint authoring, which is currently the only setting in the "Visibility" tab. We could rename the tab to "Appearance" or something like that and show width as the first setting and visibility constraints below that. This could be done is a separate PR.

[hirokiterashima]

As we discussed, I changed this component to use a mat-toggle-button instead of a mat-slider and also hid the explanation text in a tooltip. Good improvements! PTAL and style as needed.

[breity]

Looks great. I updated styles and tooltip text slightly.

[hirokiterashima]

🎉 This PR is included in version 5.230.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀