itwinjs-core icon indicating copy to clipboard operation
itwinjs-core copied to clipboard

iTwins Viewer Side Panel Grab Handle

Open sweetld opened this issue 4 years ago • 8 comments

I have noticed that when you have panels docked on the right hand side of the viewer, you can see a three dot "grab handle" which helps to show the user that they can drag this across to split the viewer and display the panels docked on the right hand side again.

This is useful, and works - however several of our users are complaining that it's difficult and confusing to use...

I believe that they are uncomfortable with the way this grab handle acts in a slightly "sticky" way, in that you have to drag it across to the left beyond a certain point for it to stay open when you let go of the handle, and once you have the right hand panels showing, you have to drag the handle to the right beyond a certain point for it to actually close again.

Personally, it seems to me as though this is useful, as it prevents the side panel being opened to such a narrow width for it to be useless, however I can understand my user's feedback that they find this difficult and annoying.

To that end, I simply wanted to know whether there was any way to turn off this feature / functionality, and make it work like a normal side panel that the user can make as narrow as they want without interference??

Any pointers, suggestions gratefully received!

sweetld avatar Oct 14 '21 09:10 sweetld

@sweetld Currently there is a 200px minimum width set for the side panels. Once you drag the handle smaller than 100px it will close, but until that point it will stay at the 200px minimum. There is currently no way to change this functionality. Users can double-click on the handle to quickly toggle the panel between its open and closed states. @NancyMcCallB @GerardasB @FlyersPh9 we should add a backlog item to make these values configurable.

bsteinbk avatar Oct 14 '21 12:10 bsteinbk

Thank you for coming back to me on this, I shall pass this information on.

sweetld avatar Oct 14 '21 13:10 sweetld

Question: are you talking about the Side Navigation Submenu or the Information Panel?

We are trying to move away from the grab handle component on resizable areas. Screen Shot 2021-10-14 at 9 52 09 AM

Instead, we've been going with something like what we have implemented on the info panel & table columns currently: resizer

We initially tried to use the resizer on the side navigation's submenu, but the resizer was interfering with the scrollbar, so we decided to use the native resize: horizontal on the submenu for initial release.

FlyersPh9 avatar Oct 14 '21 13:10 FlyersPh9

@FlyersPh9 If we get rid of the handle, there's no affordance when the panel is collapsed to let the user know it's populated.

NancyMcCallB avatar Oct 14 '21 18:10 NancyMcCallB

@FlyersPh9, if im not mistaken the user is referring to the grab handles for the side panels in AppUi, see image

aruniverse avatar Oct 14 '21 18:10 aruniverse

Hi, thanks, yes this is what I was referring to. Apologies if this was not clear.

sweetld avatar Oct 14 '21 18:10 sweetld

I don't want to turn off the "handle", as obviously the user would then not know that there was a side panel to view...

But rather as above, be able to set the minimum width in px for the side panels. That way we would be able to set it to 0px to effectively prevent the "sticky" behavior, so you don't have to drag the handle larger than 100px to make it open.

sweetld avatar Oct 14 '21 18:10 sweetld

Oops, I didn't even notice this wasn't the iTwinUI repo I'm commenting in. 😅 My mistake, ignore what I said.

FlyersPh9 avatar Oct 14 '21 21:10 FlyersPh9

@sweetld Since this issue was created, it is now possible to control the minimum width of a panel (which will still trigger this auto-close behavior, but you can put it to 0 if needed)

If your application uses the StandardFrontstageProvider to create your frontstage, you can provide the constructor with this configuration (along the required elements):

const frontstageProvider = new StandardFrontstageProvider({rightPanelProps: { minSize: 1 } });

raplemie avatar Oct 17 '22 19:10 raplemie

@sweetld, The grab handles on the side panels have undergone a redesign. Please reevaluate them with the 3.5 release.

Thanks! Nancy McCall

NancyMcCallB avatar Jan 12 '23 20:01 NancyMcCallB

Please reevaluate them with the 3.5 release.

The updated grab handles were apart of this pr, and will actually be included in the upcoming 3.6 release. Keep your eye on the GitHub releases to know when it's out!

aruniverse avatar Jan 12 '23 20:01 aruniverse