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.

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

Add resize handle to panels #285

Closed
adrianbj opened this issue Mar 22, 2018 · 11 comments
Closed

Add resize handle to panels #285

adrianbj opened this issue Mar 22, 2018 · 11 comments

Comments

@adrianbj
Copy link
Contributor

@adrianbj adrianbj commented Mar 22, 2018

  • bug report? no
  • feature request? yes

Description

I think it would be great to make panels resizable. Unfortunately because the panels are typically positioned based on their bottom/right corner, it's not really possible to make use of css resize property, so a custom solution would be needed that adds a handle to the top left of the panel.

This would be really useful for panels with overflowing content.

@dg dg closed this in 05e46f1 Apr 3, 2018
dg added a commit that referenced this issue Apr 3, 2018
@adrianbj

This comment has been minimized.

Copy link
Contributor Author

@adrianbj adrianbj commented Apr 5, 2018

@dg - this is looking awesome - thanks very much!

I do have a few issues/tweaks though:

  1. I think the max-width & max-height values for tracy-inner need to be removed, because otherwise if you drag the size of the panel larger than these, in the tracy-inner div doesn't fill the panel container.

  2. The overflow scrollbars seem to be attached to the tracy-panel wrapper. I think they should be on tracy-inner so that the panel header doesn't scroll with the content - I think the header should always be visible. This is something I have done with my local modifications, but I think it belongs in the core. eg:

image

  1. It's possible for the top of a panel to end up above the top of the viewport such that it's impossible to access the panel header to drag it back down. This can happen with the panel is large and you open the browser dev tools, forcing it up above.

Please let me know if you have any problem reproducing any of these, or have questions as to what I mean.

Thanks again!

@dg

This comment has been minimized.

Copy link
Member

@dg dg commented Apr 5, 2018

IMHO it should be fixed

dg added a commit that referenced this issue Apr 5, 2018
dg added a commit that referenced this issue Apr 5, 2018
@adrianbj

This comment has been minimized.

Copy link
Contributor Author

@adrianbj adrianbj commented Apr 6, 2018

IMHO it should be fixed

Yeah, it look great here too!

Thanks again for this - it's a really nice enhancement :)

@adrianbj

This comment has been minimized.

Copy link
Contributor Author

@adrianbj adrianbj commented Apr 6, 2018

@dg - Sorry I just discovered what I think should be considered a bug. I think that it stems from changing the coords system from right-bottom to left-top. The problem is that now when you toggle open a section in a panel and the panel expands its size, much of the panel ends up offscreen to the right and bottom. I think there needs to be a listener (ResizeObserver perhaps) to check if a panel increases in size when a section is toggled open and if so, move its position up and left enough for everything to fit in the viewport.

Does that sound reasonable?

@adrianbj

This comment has been minimized.

Copy link
Contributor Author

@adrianbj adrianbj commented Apr 6, 2018

Here's a screencap if it helps to explain:

toggle-size-issue

dg added a commit that referenced this issue Apr 6, 2018
@dg

This comment has been minimized.

Copy link
Member

@dg dg commented Apr 6, 2018

Fixed

dg added a commit that referenced this issue Apr 6, 2018
dg added a commit that referenced this issue Apr 6, 2018
@rostenkowski

This comment has been minimized.

Copy link

@rostenkowski rostenkowski commented Apr 6, 2018

@dg can you please release this?

@dg

This comment has been minimized.

Copy link
Member

@dg dg commented Apr 6, 2018

Within a few weeks

@adrianbj

This comment has been minimized.

Copy link
Contributor Author

@adrianbj adrianbj commented Apr 6, 2018

Thanks @dg for the toggle position fix (it mostly works - I just need to tweak my custom css I think).

A new issue I am seeing is that each time a reload a page, the debug bar moves left. This is with all my custom css disabled:

bar-move-issue

@dg

This comment has been minimized.

Copy link
Member

@dg dg commented Apr 6, 2018

@adrianbj This does not happen to me. Can you try to find out what is causing it?

dg added a commit that referenced this issue Apr 6, 2018
@adrianbj

This comment has been minimized.

Copy link
Contributor Author

@adrianbj adrianbj commented Apr 6, 2018

This does not happen to me. Can you try to find out what is causing it?

Sorry, it was due to my replacement of the standard close icon with a custom hide/show icon. It worked as is before, but since the recent changes I now need to add:

window.Tracy.Debug.bar.restorePosition();

after I removeChild on the close icon and appendChild with the hide/show icon.

Anyway, all sorted now.

dg added a commit that referenced this issue Apr 17, 2018
dg added a commit that referenced this issue May 4, 2018
dg added a commit that referenced this issue May 8, 2018
dg added a commit that referenced this issue May 8, 2018
dg added a commit that referenced this issue May 9, 2018
dg added a commit that referenced this issue May 10, 2018
dg added a commit that referenced this issue May 11, 2018
dg added a commit that referenced this issue May 11, 2018
dg added a commit that referenced this issue May 11, 2018
dg added a commit that referenced this issue May 11, 2018
dg added a commit that referenced this issue May 16, 2018
dg added a commit that referenced this issue May 17, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.