More usable and accessible navigation between View/Edit/Results

[jancborchardt]

The icon-only navigation on the top right is not super visible and not understandable, so I worked on some improvements sort-of inspired by our mockups for the new tabs (which we can also eventually use once it’s updated in the component) nextcloud-libraries/nextcloud-vue#603

Before

• Lots of icons
• Some icons show only in some context

Forms.navigation.old.mp4

After

• Everything has text
• View/Edit/Results is grouped
• All buttons show always

Forms.navigation.new.mp4

To do

Issues which still need fixing and some of which I need help with @jotoeri @Chartman123 :)

• Sidebar toggle only works in "Edit" mode ("Share" button always switches to "Edit" mode too). This should be possible from everywhere.
• Mobile responsiveness, buttons could be icon-only on mobile
• Test if it works in all views like sharing
• Loading overlay makes the buttons flash (not essential)

[Chartman123]

Some smaller changes to fix the Lint warnings and error. Also I'm not quite sure if we really need the border around the first three buttons

[jancborchardt]

Some smaller changes to fix the Lint warnings and error. Also I'm not quite sure if we really need the border around the first three buttons

Thank you for the help, I will look into it! :)
The border is intended to group them, as those 3 belong together, like a "tab bar" of the ones which change the content. Both "Share form" and the sidebar icon are different things, so it’s good to visually separate.

[jotoeri]

The border is intended to group them, as those 3 belong together, like a "tab bar" of the ones which change the content. Both "Share form" and the sidebar icon are different things, so it’s good to visually separate.

I agree with that. But i also think we should go with less border radius. Similar to the design you linked in vue. On the results we have it completely without inner radius, but thats indeed probably strange with the inner one of the three.

[Chartman123]

On the results we have it completely without inner radius, but thats indeed probably strange with the inner one of the three.

@jancborchardt I know that this would be some bigger change also to the vue component, but would it make sense to switch to the NcCheckboxRadioSwitch component with the alternate layout and horizontal grouping? At the moment there is no icon slot and I also don't know if that's planned or possible... But would make it a lot more easier for single applications to have such a grouped button element... I already did some experiments with this for the results view switching, but currently it's still very ugly. 😄

[jotoeri]

@Chartman123 Hmm, be careful not to project anything onto the same component, just because it has a similar base... Components are in fact a reusable version of specialisations of the underlying HTML with specialised behaviour and design.
That does neither forbid us, to use the HTML directly, nor does a single component need to cover the (kind of) generalisation to support all possible use-cases.

[Chartman123]

@jotoeri Yes that's true. But if there are any plans at Nextcloud to have these "button groups" standardized for other apps as well, it might be a good thing to place it inside nextcloud-vue and have a re-usable design. I didn't neccessarily mean to "abuse" the NcCheckboxRadioSwitch, but this was my first starting point as the alternate horizontal layout kind of looks like the thing we'd need here.

[jancborchardt]

I agree with that. But i also think we should go with less border radius. Similar to the design you linked in vue. On the results we have it completely without inner radius, but thats indeed probably strange with the inner one of the three.

Right, so for now I didn’t go with the design like in Vue because in our case it’s a horizontal button, not a vertical one. I would propose we first go with this design as it’s the least invasive and we use standard buttons there anyway – and then when the tab component is updated, we can use that.

I would also say that NcCheckboxRadioSwitch is not correct semantically here.

What do you think?

[Chartman123]

I'm fine with that :)

[jancborchardt]

Cool, then I need help with at least that 1 point in the todo :)

Sidebar toggle only works in "Edit" mode ("Share" button always switches to "Edit" mode too). This should be possible from everywhere.

The sidebar and share button should show in every view as otherwise the tab bar is moving positions.

[jotoeri]

I agree with that. But i also think we should go with less border radius. Similar to the design you linked in vue. On the results we have it completely without inner radius, but thats indeed probably strange with the inner one of the three.

Right, so for now I didn’t go with the design like in Vue because in our case it’s a horizontal button, not a vertical one. I would propose we first go with this design as it’s the least invasive and we use standard buttons there anyway – and then when the tab component is updated, we can use that.

I would also say that NcCheckboxRadioSwitch is not correct semantically here.

What do you think?

Tbh. I'm not fine with that. Why doing half things? It should be just a bit of more CSS (just border-radius?) to get a much better design here.

[Chartman123]

@jancborchardt while having a look at the sidebar thing I found a little regression: as you show all the buttons all the time you can also click on a button for the route you're currently at (e.g. click edit button twice). There is an error message then in the browser console...

[jancborchardt]

Tbh. I'm not fine with that. Why doing half things? It should be just a bit of more CSS (just border-radius?) to get a much better design here.

@jotoeri I tried it out, and actually the pill radius looks much better and is more fitting to our updated circular design (and the buttons nearby). I did commit it so feel free to try it out. :)

border-radius-pill (like buttons)

Forms.navigation.new.mp4

border-radius-large (like tab bar mockup)

Sorry no video here as my screen recording app seems broken.

@nimishavijay @marcoambrosini what do you think? Ref the tab bar mockups at nextcloud-libraries/nextcloud-vue#603

[jancborchardt]

@jancborchardt while having a look at the sidebar thing I found a little regression: as you show all the buttons all the time you can also click on a button for the route you're currently at (e.g. click edit button twice). There is an error message then in the browser console...

@Chartman123 Fixed, thanks! :) Still need help with the following if you can:

Sidebar toggle only works in "Edit" mode ("Share" button always switches to "Edit" mode too). This should be possible from everywhere.

[Chartman123]

@jancborchardt I need to find some time to dive in a little deeper...

[jotoeri]

@jotoeri I tried it out, and actually the pill radius looks much better and is more fitting to our updated circular design (and the buttons nearby). I did commit it so feel free to try it out. :)

Hm, ok. Then i'm with you as a long term design here. 👍

[marcoambrosini]

tbh though I prefer the borderless version, by far

[jancborchardt]

@marcoambrosini borderless just looks not connected at all, it’s not obvious what kind of element it is. What do you think regarding pill style vs rounded borders?

Apart from that, others also do connected, pill-style tab bars (iOS does connected but rounded borders sometimes but I can’t find a proper pattern link):

MS Office on iPad:

Material design docs website:

[jancborchardt]

Addressed your issues @Chartman123 @marcoambrosini, just as said need help with the fact that the sidebar is only available in "Edit" mode. Possibly could be a follow-up pull request, you tell me. :)

Fixed :)

[Chartman123]

@jancborchardt I think I fixed the sidebar now. 🙂

[jancborchardt]

Nice @Chartman123, tested and works! :) Can we then have another review @susnux @hamza221 @jotoeri?

[susnux]

First of all I like this very much! Nice work 👍
I tested it and it works for me 😄

To me using three different elements in the top bar looks a bit inconsistent or messy (meaning it does not look clean like the other UI).
So there is the 3-button array, then there is the "share form" button and next to it is an other icon-only sidebar-toggle.
Maybe one could integrate that share button with the 3-button array or maybe even better with the "form settings"-sidebar-toggle.

But that is only my personal preference, you might ignore that 😉

A more important thing is the second ToDo, on mobile it is unusable, this is how it looks for me:

[Chartman123]

on mobile it is unusable,

Should be fixed now, I added the isMobile mixin 🙂

[Chartman123]

Question regarding aria-labels

[jotoeri]

Didn't test, just had a short look into the code. ☺️

[jotoeri]

This is now used on all three views. So it should better go to the ViewsMixin

[jancborchardt]

Fixed - I needed to remove the required attribute as otherwise Sidebar.vue had an error of a missing required prop – let me know if it should be done otherwise. (@hamza221 said we could also pass :sidebarOpened to the view in Forms.vue, but with what value then – it’s the sidebar itself. ;)

[jotoeri]

Uhm, the sidebar anyways takes a required value opened. If you replace that one and its usage with sidebarOpened it should be good. :)

[jotoeri]

Unfortunately i couldn't test it now, but i think the added commit should be it already.

[jancborchardt]

@Chartman123 @jotoeri fixed all the issues except the Duplicated Navigation thing at #1381 (comment) – I either need some pointers, or you are welcome to fix it, or we accept the error (not sure if that should be done). Thanks! :)

[Chartman123]

@jancborchardt Nice 🎉 I think that we should clean up the commits a little bit. In my opinion we can squash all commits except the last one into a big one. What do you think?

[jotoeri]

Could just test it, the Sidebar thing works. Just two more things:

• We shouldn't show the View Switch, if only 'view' is available. Having a shared form with no permissions than submitting, it currently shows the View-Topbar Part.
• @jancborchardt Can we get the border somewhat inside of the view-select? Currently we have a height of 44px+2*2px border. Can we just fix the height of the view-select to 44px?

[Chartman123]

• We shouldn't show the View Switch, if only 'view' is available. Having a shared form with no permissions than submitting, it currently shows the View-Topbar Part.

@jotoeri fixed it with my last commit

[jotoeri]

@jotoeri fixed it with my last commit

I shifted it once more, since the viewselect border was still visible.
Also added the fixed height now for the view-select.

71a6837

before	after

[jotoeri]

Fine by me now