search

lumenwrites / nulis

Mind-mapping software that helps writers collect and organize their knowledge, develop their ideas. Built with React, Redux, Node.js, hosted on Digital Ocean.
https://nulis.io
GNU Affero General Public License v3.0
742 stars 43 forks source link

Horizontal-align "children" to "parents" #5

Open j6k4m8 opened 6 years ago

j6k4m8 commented 6 years ago

In this screenshot, it's unclear to me that "Ask questions..." is not a descendent of "Learn more...":

image

It would make more sense — to me at least — if children were aligned so that I could read "across" a row; if there isn't a node in that row, then perhaps display empty space there:

image

Or perhaps I'm misunderstanding the semantics of this UI!

Excited to discuss this; I think this is a tool I've been looking for for a long time.

eldelacajita commented 6 years ago

I think I understand what you mean. You could align all children to their parents, but that would create an interface full of gaps. Imagine you have parent 1 with 10 children, and parent 2 with 5 children. In order to align each children to their parents, the distance between parent 1 and 2 would have to be equal to the height of 10 children, spreading the parents too far apart and making the whole UI almost unusable. You want to keep things reasonably compact.

So, instead, all elements flow vertically and children align only when the parent is selected. Both parents and children are shown in white, while the rest remains in grey, which is already a clear hint to tell which elements are related or not to each other.

j6k4m8 commented 5 years ago

Sorry, meant to reply to this ages ago!

My interpretation is that the gaps are semantically meaningful: Those gaps in the UI are indicators of information flow.

Perhaps a way around this is is to collapse the height of non-selected children so they don't take up that much vertical space?

Another way around this is to just keep doing what you're doing, since it rocks :)