Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Enhancement: Allow calcite-shell-panel resizing #2770

Closed
bpatterson88 opened this issue Aug 9, 2021 · 26 comments
Closed

Enhancement: Allow calcite-shell-panel resizing #2770

bpatterson88 opened this issue Aug 9, 2021 · 26 comments
Assignees
@benelan
Labels
4 - verified Issues that have been released and confirmed resolved. enhancement Issues tied to a new feature or request.
Milestone
Sprint 11/22 - 12/3

Comments

@bpatterson88
Copy link
Contributor

Description

Allow users to resize calcite-panel with click and drag.

Acceptance Criteria

  • User can click and drag to resize calcite-panel width

Relevant Info

Changing the width of the panel through width-scale property (M->L) doesn't leave enough room for the dashboard preview.

Which Component

calcite-panel

Example Use Case

ArcGIS Dashboards is planning to place calcite-tree in calcite-panel. Users will be able to add items to calcite-tree, potentially creating a tree that is too wide for calcite-panel, causing a breakdown in the UI. It would be very nice if users could resize calcite-panel by clicking and dragging the right border.

Screen Shot 2021-08-09 at 3 35 05 PM

This interaction is pretty common in similar UIs:

figma-panel-resize

Untitled
@bpatterson88 bpatterson88 added enhancement Issues tied to a new feature or request. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Aug 9, 2021
@bstifle
Copy link

bstifle commented Aug 10, 2021

This would be so dope! What are your thoughts on the hover/press/drag states?

Just simple like figma, or do you want to design something more like vscode?

@TheBlueDog
Copy link

We've implemented this in ArcGIS Field Maps. Works like most other web apps, with just a cursor change on hover of the panel border.

Aug-10-2021 12-08-53

@TheBlueDog
Copy link

I would add that this would need to be incorporated to app-shell instead of, or in addition to the panel. We are experimenting with moving FM to the shell component, but know this is a feature we would loose if we did.

@driskull
Copy link
Member

It would probably be good to add a resizable prop to where we need it. Maybe just the calcite-shell-panel for now? We would also use a tailwind property for setting css resize.

@bpatterson88
Copy link
Contributor Author

bpatterson88 commented Aug 11, 2021 •
edited
Loading

What are your thoughts on the hover/press/drag states? Just simple like figma, or do you want to design something more like vscode?

  • Simple like Figma, using either the ew-resize or col-resize cursors.
  • Min width would match width-scale=s, max-width would match width-scale=l
  • Closing and reopening panel would retain custom width if set.
  • Overflowing text would get truncated with ellipsis

@bstifle
Copy link

bstifle commented Aug 11, 2021

cool. what about behaviors like double clicking to expand to longest item?

@bpatterson88
Copy link
Contributor Author

bpatterson88 commented Aug 11, 2021 •
edited
Loading

Double click to expand would be pretty cool to have, but probably not a requirement.

Another wrinkle is handling items with right aligned actions. I suppose they would hug the right edge of the panel until they collide with the left edge of the item at which point they would overflow the panel. (The reality is probably more complex than that, and it might be a concern of items rather than the panel, but I think that'd be the target behavior.)

@TheBlueDog
Copy link

cool. what about behaviors like double clicking to expand to longest item?

Since you can't predict what content will be in the panel, and what components will be used for that content, this would over complicate things.

I'm in favor of just simple implementation. Maybe not even put a max on it. We follow the principle of "let the user be in control of their workspace." So if they want the left panel 800px wide, let em.

@TheBlueDog
Copy link

Panels can still be open/closed by using the actions in the action bar

@asangma
Copy link
Contributor

asangma commented Aug 17, 2021

This looks like a solid enhancement for when the Shell is in its default state (content-behind="false").

There are some UX concerns we'd want to address for when content-behind="true" as it has impacts on a map-centric application might work (e.g. Map Viewer).

That being said, if this needs priority, we could

  1. do a V1 in which we disable the drag-to-resize capability when content-behind="true"
  2. do some UX work with stakeholders
  3. enhance accordingly
  4. profit

@asangma
Copy link
Contributor

asangma commented Aug 17, 2021

@bpatterson88 I believe this would actually be an enhancement to ShellPanel and Shell.

@julio8a julio8a removed the needs triage Planning workflow - pending design/dev review. label Sep 24, 2021
@julio8a julio8a added this to the Sprint 10/11 – 10/22 milestone Sep 24, 2021
@julio8a
Copy link

julio8a commented Sep 24, 2021

This should be done in shell-panel as @driskull suggested.

@driskull
Copy link
Member

I could take this one once we get the form epic completed. Not for this sprint though.

@driskull driskull changed the title Enhancement: Resize calcite-panel with click-and-drag Enhancement: Resize calcite-shell-panel resizing Nov 10, 2021
@driskull driskull changed the title Enhancement: Resize calcite-shell-panel resizing Enhancement: Allow calcite-shell-panel resizing Nov 10, 2021
@driskull driskull self-assigned this Nov 10, 2021
@driskull driskull added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Nov 10, 2021
driskull added a commit that referenced this issue Nov 18, 2021
@driskull
feat(shell-panel): Add resizable property to allow resizing of content.
5be48ef 
#2770
@driskull driskull mentioned this issue Nov 18, 2021
Merged
@driskull
Copy link
Member

@asangma do we have a design for this?

@benelan benelan mentioned this issue Nov 18, 2021
Closed
@rslibed
Copy link

rslibed commented Nov 18, 2021

FYI @kellyhutchins @bcree11 @Csmith246

@benelan benelan added this to the Sprint 11/22 - 12/3 milestone Nov 20, 2021
driskull added a commit that referenced this issue Nov 29, 2021
@driskull @macandcheese
feat(shell-panel): Add resizable property to allow resizing of content.
c08d4c4 
#2770 (#3535)

* WIP

* WIP

* add note

* feat(shell-panel): Add resizable property to allow resizing of content. #2770

* cleanup

* Property description

* tests & cleanup

* add story

* review fixes

* Add separator styles

* only allow resizing when detached is false.

Co-authored-by: Adam Tirella <adam@tirel.la>
@driskull driskull added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Nov 29, 2021
@github-actions github-actions bot assigned benelan and unassigned driskull Nov 29, 2021
@github-actions
Copy link
Contributor

Installed and assigned for verification.

@jmanke
Copy link

jmanke commented Dec 1, 2021

Tried implementing this and it's looking great! However, I found when dir=rtl resizing seems to be inverted (please see this codepen)

@jmanke
Copy link

jmanke commented Dec 1, 2021

I was also wondering if there's a way to set both the min and max width when it's resizable? For example, it would be nice to have the min-width of the calcite-shell-panel be the min-width of width-scale="m" and the max-width be the max-width of width-scale="l".

@driskull
Copy link
Member

driskull commented Dec 1, 2021

I'll fix the RTL part. 👍

@benelan benelan assigned driskull and unassigned benelan Dec 1, 2021
@benelan benelan added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Dec 1, 2021
driskull added a commit that referenced this issue Dec 1, 2021
@driskull
fix(shell-panel): Correct resizing of panels in RTL direction. #2770
f978c71
@driskull driskull mentioned this issue Dec 1, 2021
Merged
@benelan
Copy link
Member

benelan commented Dec 1, 2021

I was also wondering if there's a way to set both the min and max width when it's resizable? For example, it would be nice to have the min-width of the calcite-shell-panel be the min-width of width-scale="m" and the max-width be the max-width of width-scale="l".

This is not possible at the moment, the only props added for this were resizable (boolean) and intlResize (string for i18n label).

@bpatterson88
Copy link
Contributor Author

This is not possible at the moment, the only props added for this were resizable (boolean) and intlResize (string for i18n label).

@benelan Is there a plan to make this more flexible? As mentioned above, Dashboards requires the ability to resize panels to a maximum width of at least width-scale="l".

@benelan
Copy link
Member

benelan commented Dec 1, 2021

Can you please create an enhancement for that?

@benelan
Copy link
Member

benelan commented Dec 2, 2021

here is an example of the current functionality https://codepen.io/benesri/pen/JjroXgd

driskull added a commit that referenced this issue Dec 2, 2021
@driskull
fix(shell-panel): Correct resizing of panels in RTL direction. #2770 (#…
fdab1a4 
…3614)

* fix(shell-panel): Correct resizing of panels in RTL direction. #2770

* review fixes

* only invert factor for left/right keys.
@driskull driskull added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Dec 2, 2021
@github-actions github-actions bot assigned benelan and unassigned driskull Dec 2, 2021
@github-actions
Copy link
Contributor

github-actions bot commented Dec 2, 2021

Installed and assigned for verification.

@benelan
Copy link
Member

benelan commented Dec 10, 2021

verified on next

@benelan benelan closed this as completed Dec 10, 2021
@benelan benelan added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Dec 10, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@benelan benelan

Labels
4 - verified Issues that have been released and confirmed resolved. enhancement Issues tied to a new feature or request.
Projects
None yet
Milestone
Sprint 11/22 - 12/3
Development

No branches or pull requests
10 participants
@driskull @kellyhutchins @TheBlueDog @julio8a @benelan @asangma @bstifle @bpatterson88 @jmanke @rslibed