fix(app-shell): enhancement to be resizable app-shell

[vicalcantFrontEnd]

Description

The help option panel is now resizable to the left, it can now scroll with a maximum width of 600 px. Help panel text wraps automatically

What's included?

• This PR includes the functionality to make the Help Panel resizable

Test Steps

• npm run start
• then this
• finally this

General Tests for Every PR

• npm run start still works.
• npm run lint passes.
• npm run stylelint passes.
• npm test passes and code coverage is not lower.
• npm run build still works.

Screenshots or link to StackBlitz/Plunker

[adamnel]

Looks very nice visually. A couple functional tweaks:

• It's laggy, the mouse can move independently of the drag line and it takes a bit to catch up
• Probably related: the highlighted drag line doesn't stay highlighted while dragging if the mouse has moved off of it
• The panel resets to the default width every time it's closed. It should reopen to the previous width for some duration of time, probably just for the current session
• A double-click on the drag line should reset the width to the default starter width

[owilliams320]

@vicalcantFrontEnd In general this is looking good! i did notice the delay is from the transition-property...not sure how you want to handle this but looks like while we are resizing we want to disable the transition property, but have it enabled when the use clicks open/close action.

transition-property: width;
transition-duration: 200ms;

[owilliams320]

I also notice when in small view the help panel no longer takes up the full width of the screen. this is a regression and should be accounted for as well.

[vicalcantFrontEnd]

Looks very nice visually. A couple functional tweaks:

• It's laggy, the mouse can move independently of the drag line and it takes a bit to catch up
• Probably related: the highlighted drag line doesn't stay highlighted while dragging if the mouse has moved off of it
• The panel resets to the default width every time it's closed. It should reopen to the previous width for some duration of time, probably just for the current session
• A double-click on the drag line should reset the width to the default starter width

@adamnel

I have included all the improvements that you mentioned in the comments.

1. All comment features have been included.
2. Resizing delay seems to have improved
3. Please let me know if you have any questions or changes.

[vicalcantFrontEnd]

Looks very nice visually. A couple functional tweaks:

• It's laggy, the mouse can move independently of the drag line and it takes a bit to catch up
• Probably related: the highlighted drag line doesn't stay highlighted while dragging if the mouse has moved off of it
• The panel resets to the default width every time it's closed. It should reopen to the previous width for some duration of time, probably just for the current session
• A double-click on the drag line should reset the width to the default starter width

@adamnel I push the version with the features that are in the comments, please let me know if you have some questions or changes.

[vicalcantFrontEnd]

I also notice when in small view the help panel no longer takes up the full width of the screen. this is a regression and should be accounted for as well.

Fixed the responsive mode

[adamnel]

We don't want to limit the width of the help panel, or rather, any limitation should come from a minimum width or other control on the main content.

Right now the help panel looks to be maxed out at 600px wide, but this forces it to be artificially narrow on wide screens, but still allows it to crush the content on narrower ones. That main content should handle its own min width to prevent the crushing, not the panel itself setting an arbitrary max value.

[vicalcantFrontEnd]

We don't want to limit the width of the help panel, or rather, any limitation should come from a minimum width or other control on the main content.

Right now the help panel looks to be maxed out at 600px wide, but this forces it to be artificially narrow on wide screens, but still allows it to crush the content on narrower ones. That main content should handle its own min width to prevent the crushing, not the panel itself setting an arbitrary max value.

Thank you for your comments. To make sure I'm understanding the proposed changes, I'd like to confirm a couple of points:

1. Remove the 600px width restriction to allow for greater flexibility on larger screens.
2. Add a min-width to the main content to ensure its usability and legibility under all conditions. What do you think would be an appropriate value in pixels for this min-width?
3. Behavior on Small Screens, currently, the help panel covers 100% of the width on small screens. Would you like to maintain this design, or is there any modification we should consider to improve the experience on small devices?

[adamnel]

1. Remove the 600px width restriction to allow for greater flexibility on larger screens.

Correct

2. Add a min-width to the main content to ensure its usability and legibility under all conditions. What do you think would be an appropriate value in pixels for this min-width?

The main content should be able to override this value on any given screen but set a default of 600px.

3. Behavior on Small Screens, currently, the help panel covers 100% of the width on small screens. Would you like to maintain this design, or is there any modification we should consider to improve the experience on small devices?

The behavior on small screens is good as is.

[vicalcantFrontEnd]

1. Remove the 600px width restriction to allow for greater flexibility on larger screens.

Correct

2. Add a min-width to the main content to ensure its usability and legibility under all conditions. What do you think would be an appropriate value in pixels for this min-width?

The main content should be able to override this value on any given screen but set a default of 600px.

3. Behavior on Small Screens, currently, the help panel covers 100% of the width on small screens. Would you like to maintain this design, or is there any modification we should consider to improve the experience on small devices?

The behavior on small screens is good as is.

@adamnel I removed the max-width 600px restriction in the help pannel and add min-width to main to ensure its its usability and legibility under all conditions.

[adamnel]

Looks great!

[bsahitya]

Looks great! 🎉

[owilliams320]

🔥

[owilliams320]

🎉 This PR is included in version 8.12.1 🎉

The release is available on:

• v8.12.1
• GitHub release

Your semantic-release bot 📦🚀