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.

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?

  • Interesting. The checkbox toggles (show/hides) the element visually. – camden_kid Nov 27 '15 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 Nov 27 '15 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. – camden_kid Nov 27 '15 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 Nov 27 '15 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. – camden_kid Nov 27 '15 at 16:40

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.