React-sortable-tree: suggestion: keep basic template simple

[lifejuggler]

the current default template seems alittle too customized for a default theme... why not have that be a specific theme that people can designate and maybe simply the default theme to be alittle more minimalistic and basic? (possible design idea: https://examples.sencha.com/extjs/6.2.0/examples/kitchensink/#basic-trees)

[fritz-c]

True. It would be a breaking change, but I agree with your logic.

I kind of like the presence of the drag handle, as it’s a common UI to indicate the ability to drag. If you’re suggesting a plainer, full-width style, I’d like to figure out a way that the draggability can be understood easily.

[buzztone]

I kind of like the presence of the drag handle, as it’s a common UI to indicate the ability to drag.

In our user testing (not extensive at this stage) some Desktop users have found the drag handle confusing (actually they didn't know that clicking there let you drag the node). They did not associate the 'hamburger' icon with the ability to drag the node.

If you’re suggesting a plainer, full-width style, I’d like to figure out a way that the draggability can be understood easily.

In our application (creating web forms) we would love to see a full-width style option which still highlighted the draggability.

[Tedamo]

This is my suggestion to the discussion.

If the original theme is more compact it will most likely be suited in more user cases. Look at the two pictures below. The right one is more compact and displays the same information as the left one in almost half the space.

[lifejuggler]

@JWaldenback sizing could be an issue but I feel that it is merely a side product of the current design issue.
@buzztone, yes I also feel that having a hamburger icon is not the correct symbol to notify users that dragging is possible, maybe having a node highlighted by changing the background or the outline and having the mouse icon to change to hand is sufficient enough.
@fritz-c I will come up with a rough prototype and put it up as a theme and if people find that to be better default maybe we can swap it. I have a few ideas in making it a bit easier to comprehend that it is a draggable node without having a designated space just to enable a drag function
Edit:
I have something like this in my forked version

I will adjust this and turn this into a theme, but let me know what you guys think

[lifejuggler]

Hello, been pretty busy and was able to get this out now.... @fritz-c, @JWaldenback, @buzztone, Would you guys be able to give me some feedback on this?

[fritz-c]

Can you provide a link, and maybe a demo site?

[Tedamo]

@lifejuggler How do I find your solution? I'm interested in seeing what you've accomplished.

[lifejuggler]

@JWaldenback , @fritz-c sorry for getting this so late... I had heck of a time at work... https://minimal-sortabletree-theme.herokuapp.com/

[lifejuggler]

Any thoughts about my new basic theme proposal and the example that I provided? @JWaldenback, @fritz-c?

[Tedamo]

@lifejuggler I like it. But I would it to be more compact. Is that easily changed?

Have you seen this full node drag theme that fritz-c has made btw? I like it a lot, though it also needs to be more compact imo. Or at least easily customizable to change the height and size of the nodes.
https://github.com/fritz-c/react-sortable-tree-theme-full-node-drag

[wuweiweiwu]

@lifejuggler @JWaldenback Feel free to make a PR :)

[lifejuggler]

@JWaldenback, height should be adjustable... let me know if it isn't

[lifejuggler]

@fritz-c , @wuweiweiwu, I made a pull request with the new custom theme added into the readme

[wuweiweiwu]

closed by #289