0

I am displaying a tree structure with Angular Material and angular-ui-tree as shown below:

enter image description here

I'm not happy with the look of it (lots of white space, distance between buttons and text) but can't think of a better alternative. The distance between elements is mainly dictated by Angular Material.

Is there a better/nicer way to show the tree whilst still respecting the distances between elements?

Edit: The chevron button toggles the display of the children of an element in the tree. The checkbox toggles the display of the actual element in another (3D) view.

Improve this question

1 Answer 1

Reset to default
1

A lot of the problems are cause by the green ticks congesting up the interface. Look what happens when you remove them

enter image description here

But you still need that state indicator, right?

So you need to move them and make them less obtrusive.

enter image description here

thats not perfect at all but you get the idea. Make the ticks visable but not in a way that detracts from the interface

what are the ticks for anyway? To validate a state of a folder? State of an object?

Improve this answer
7
  • Interesting. The checkbox toggles (show/hides) the element visually.
    – user28987
    Commented Nov 27, 2015 at 16:20
  • well thats thrown the whole question. And why do you want to show/hide an element you can show'hide with the tree icons? Edit: its a pattern I dont recognise
    – colmcq
    Commented Nov 27, 2015 at 16:22
  • I guess I could have explained this a bit better. :-) The chevron button toggles the display of the children of an element in the tree. The checkbox toggles the display of the element in another view.
    – user28987
    Commented Nov 27, 2015 at 16:24
  • I dont like the dual control in this tree. Once you've chosen to hide a node, how do you unhide it? Id just abandon this checkbox idea completely unless there's a compelling reason to keep it
    – colmcq
    Commented Nov 27, 2015 at 16:35
  • The tree represents a 3D model. The checkbox is used to hide/unhide the element in the view showing the actual 3D model.
    – user28987
    Commented Nov 27, 2015 at 16:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.