Skip to content
This repository was archived by the owner on Nov 6, 2019. It is now read-only.

GH-223 Enable / Disable Tab Dragging in DockPanel#275

Open
GordonSmith wants to merge 1 commit intophosphorjs:masterfrom
GordonSmith:GH-223
Open

GH-223 Enable / Disable Tab Dragging in DockPanel#275
GordonSmith wants to merge 1 commit intophosphorjs:masterfrom
GordonSmith:GH-223

Conversation

@GordonSmith
Copy link

Allow user to enable / disable tab dragging at runtime.

Fixes GH-223

Signed-off-by: Gordon Smith gordonjsmith@gmail.com

@sccolbert
Copy link
Member

I'm not convinced this is the right solution for making a "dashboard" type layout.

In the feature-datagrid branch I'm working on right now, I've added a GridLayout class which would be much more apt for creating dashboards. That feature branch should be merged soon, at which point I can create an associated GridPanel.

@GordonSmith
Copy link
Author

Well I can't comment until I see the new code, but am now intrigued - does it also support dragging and stacking of panels in a similar tabbed way?

FWIW being able to enable / disable the runtime configuration of the DockPanel (based on user / mode) is still a useful thing to me and I do have a real world use for it...

@sccolbert
Copy link
Member

No, it doesn't have that ability. It's just a "static" layout.

Can you describe your use case a bit more? It may be something that can be handled semantically with a new DockPanel mode.

@sccolbert
Copy link
Member

The reason I'm probing is because there may be other interactions we want to control for this use case as well, like disabling drag/drop altogether so that other widgets can't be dropped. We could do that while still allowing the tabs to be reordered.

@GordonSmith
Copy link
Author

I am potentially going to be adopting phosphor for several scenarios, but this "fix" gives me enough to go ahead and drop it in here: http://rawgit.com/hpcc-systems/Visualization/master/demos/dermatology.html?src/layout/Grid.complex&designMode=false

  • Clicking on the "properties" button will enable the dragging and re-ordering, and turning it off will disable it again.

The main reason I was drawn to phosphor was the ability to drag and stack the tabs at a user configurable level.

The other features are:

  • Ability to persist the new layout (done - thank you)
  • Ability to to either:
    • hide the tabs for the case there is only 1 tab (and replace with a toolbar) OR
    • Extend the one tab so its more toolbar like

Everything else is falling into the over engineering category for now!

@GordonSmith
Copy link
Author

GordonSmith commented May 26, 2017

(Obviously if there are cleaner implementations I am open to suggested approaches etc. still just getting my fingers dirty.)
Also I am pretty close to being able to drop it in, so no rush on this PR - if you want to play with a real world example first.

@sccolbert
Copy link
Member

FYI: You can use CSS to expand the tabs to fill the whole tab bar.

So the dashboard you linked is use a grid-style layout, whereas the dock panel is (effectively) a hierarchy of vertical/horizontal box layouts. In a grid-style layout, the edges of widgets remain aligned to row and column boundaries, which is not the case for the dock panel. I would think most dashboard authors would want the grid-style layout.

We do have plans to address dashboarding this year, so I'm hesitant to add stuff to dock panel when it's not actually solving the right problem.

I would be possible to build a drag/drop dashboarding tool based on a grid layout, we would just need to specify what the interactions/features should be.

@GordonSmith
Copy link
Author

GordonSmith commented May 26, 2017

...but the reason I landed on phosphor was the new requirement to allow users to drag the dashboards on top of each other, to create a tabbed interface...

IMO this Issue / PR shouldn't be defined by the dashboard use case - let me throw a different scenario at you:

I am also developing a web based IDE / Debugging tool and I want to create a bunch of pre-canned layouts for the users based on what they are doing and what features they have access to.
Also I want to enable our "product" folks to create, save and publish these layouts on a per user basis, without them annoying me.

As a visual idea something like this: http://52.51.90.23:8010/?Widget=ECLPlaygroundWidget but with more (optional) capabilities.

@sccolbert
Copy link
Member

Ok. If you don't want the layout to be reconfigurable, do you still want the tabs to re-orderable within a given tab bar? And what about resizing of the existing sections interactively? i.e. to what extent do we need to "lock down" the interactivity of the layout?

@GordonSmith
Copy link
Author

Locking down the detach and tab ordering while leaving the split pane resizable is actually perfect for what I need.
With my over engineering hat on I would want the ability to lock each individually (detach, order and split).

@sccolbert
Copy link
Member

What's your timeline on requiring this feature?

@GordonSmith
Copy link
Author

No rush as I can drive on with my forked version (with the naïve implementation).

@alalonde
Copy link

@sccolbert Any more thoughts on the dashboarding use case? We're essentially looking for a DockPanel sans tabs. Everything else is really useful: intuitive drag n drop, import/exporting layouts, and drag-to-resize. I can take a stab at it if it's buried in your backlog.

@GordonSmith
Copy link
Author

...I am a bit surprised this PR was never pulled - I know I find the option useful and its not like the code is invasive, just exposing a feature which is available internally.

Allow user to enable / disable tab dragging at runtime. Fixes phosphorjsGH-223 Signed-off-by: Gordon Smith <gordonjsmith@gmail.com>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

3 participants