Tearing off DockPanel tabs into floating dialogs

[jjrv]

phosphor-float-area now adds support for tearing tabs off DockPanels into freely movable dialogs.

Best to see the online demo first.

Features in the demo:

• Tabs dragged over the white "Main" area become floating dialogs.
• Tabs can be dragged into an existing dialog, between dialogs or back into the dock.
• Dialogs are freely movable by dragging a grip next to their tabs, but always stay in the "Main" area.
• Dialogs are resizable by dragging any edge or corner.
• Widget minimum sizes are respected. Try resizing the main area edges or the browser window.
• Widgets moved due to size constraints return to where the user dragged them once enough size is available again.
• Clicking a dialog moves it in front of other dialogs.

Could this be linked from the PhosphorJS docs / readme? Any further improvements needed for that to happen?

Currently adding useful content in the "Main" area (under the dialogs) requires subclassing the FloatArea widget. Next step is to allow passing it a separate background widget which will then always stretch to fill the FloatArea and remain under all dialogs. In my application it will show a zoomable world map.

[jasongrout]

Wow, that demo is pretty nice! Thanks for sharing this!

[jjrv]

Hopefully it's useful for others. My intention is to maintain it and make it easy to include in any PhosphorJS apps.

Some other ideas:

• An option to send a dialog to the bottom of z-order. Without a mechanism like alt+tab or a task bar, this seems necessary for easily accessing dialogs covered by others. See the AmigaOS depth gadget.
• An option to float the dialog as a new browser window. I've seen this functionality requested for PhosphorJS and tearing off to an MDI dialog first and then sending that to a new browser window seems like a reasonable flow of user interactions. I won't implement it now, but would collaborate on it.

Those could be buttons or popup menu options when right-clicking the dialog drag handle or edges.

[jjrv]

The included demo itself is somewhat interesting. When developing it only requires 5 other NPM packages (counting the entire dependency hierarchy except PhosphorJS) for the whole pipeline of compiling TypeScript and serving it to a browser together with necessary CSS.

Meanwhile during development PhosphorJS example-dockpanel depends on 315 packages...

I'm a big fan of SystemJS and TypeScript IDEs with compileOnSave to minimize build system bloat.

[nmichaud]

@jjrv This implementation looks interesting. What's the use case for having free dialogs that are constrained to the browser window?

[jjrv]

@nmichaud In my case, floating toolbars and other controls over a world map. You can see that kind of interface for example in Photoshop or Illustrator.

If you were to turn them into separate browser windows, then interacting with the main window would immediately hide the floating windows under it. In my opinion this is a worse user experience than windows always floating on top, even if their movement is constrained.