nextcloud-libraries
Left-align title of settings
Actually, while we're talking about alignment, it would be nice if we could align the title of the main settings dialog (which is currently centered) with the sidebar items.
This would both make more sense structurally (since it also titles the sections and it wouldn't be free floating anymore), and a nicer use of space.
When there is a sidebar (which in most cases, there will be), this would also allow us to shift the content up and make more settings visible initially. The close button could be overlaid instead of a bar, the same as other similar buttons.
And if there isn't a sidebar, the title could just be part of the main content and scroll offscreen (since in this case, the contents wouldn't scroll too much anyway as they would be short.)
Example with the current Files settings:
| Current | Proposal |
|---|---|
On that note: Why is there such a massive gap between General and Appearance? This always confused me and it doesn't look very appealing imo.
@kra-mo Do we want to add any other changes? Such as:
- Reducing the dialog internal padding to be consistent with the border radius and not so large
- Changing the gap between sections or showing a single section per navigation
- Visually splitting the navigation (with a border or background like in a draft above)
Also, this dialog with navigation is partially used in other dialogs with the navigation, like a file picker.
Reducing the dialog internal padding to be consistent with the border radius and not so large
That sounds like a good idea for the sidebar and the close button, but I do feel like the left padding for the content itself is quite tight in the draft so I wouldn't touch that.
Changing the gap between sections or showing a single section per navigation
A single section per navigation, yes. I think we all agreed that it'd be nice to do. Then we also don't have to show the section heading since you can see the selected item in the sidebar.
Visually splitting the navigation
That also sounds like a good idea, although the gray in the example is quite strong? I think we could just do something a bit more subtle or just accent-tinted but also include a border.
We could also give the content an inner border radius like in https://github.com/nextcloud-libraries/nextcloud-vue/issues/7222
So putting it all together:
The colors here are the same as fields for the sidebar and border for the border.
I do also think that we could reduce the size of the whole dialog, but that's a separate discussion I suppose.
Maybe reduce the font size and weight in the navigation buttons to use the default button style? (except for the active button's left border)?
Maybe reduce the font size and weight in the navigation buttons to use the default button style? (except for the active button's left border)?
Oh I was just frankensteining it together from a screenshot :)
But yes, it should.
I'd also make a draft with the file picker
Here is a quick mockup for that, just focusing on the sidebar style, although there are other things in this dialog that need to be updated.
What about mobile?
Ideally, if we had proper hierarchical navigation components, that would be the best. But I think this would be a bigger future endeavor.
For the time being, the same as we do for other navigation sidebars would be best: reserve some space at the top for a floating button to hide/reveal it. But only conditionally based on if there is not enough space, because if there is, here it doesn't make sense to hide the navigation since it is just settings, not really proper content.
Really nice @kra-mo! Looks way more aligned and structured, and gives more space to the content itself as you say. :)
