Implement sidebar component

[skjnldsv]

@nextcloud/vue

Closes nextcloud/server#10289

Standardisation is minimal but looks very nice and allow quite a few specificity that looks really great!

1	2

<app-sidebar v-show="show"
	title="andy-yeo-1387151-unsplash.jpg"
	subtitle="4,3 MB, last edited 19 days ago"
	background="/core/preview?fileId=54&x=1880&y=993&a=true"
	:actions="menu"
	:tabs="tabs"
	@close="closeSidebar">
	<template #primary-action>
		<button class="primary">Leave call</button>
	</template>
	<template #secondary-action>
		<input name="link-checkbox" id="link-checkbox" class="checkbox link-checkbox" value="1" type="checkbox">
		<label for="link-checkbox" class="link-checkbox-label">Share link</label>
	</template>
	<tab name="Chat" icon="icon-talk">
		this is the chat tab
	</tab>
	<tab name="Activity" icon="icon-activity">
		this is the activity tab
	</tab>
	<tab name="Comments" icon="icon-comment">
		this is the comments tab
	</tab>
</app-sidebar>

[skjnldsv]

Okay, we're all good here!
here is the vuexample I'm using vueexample.tar.gz

I added some accessibility stuff according to the aria guidelines.
@nextcloud/accessibility I need some opinions on the tab/tab-content focus vidual feedback (blue border and blue shadow on tab content). When you're focusing the tabs, you can navigate with arrows and pageUp/Down. Pressing tab focus the tab content (aria guidelines) but we need a feedback for the user to know where the focus is. Same goes for the tabs navigation, we need to differentiate the focus and the selected tab.

Please test! 🙏 🙇‍♀️

To ignore:

• menu ... off center (fixed in Action and popovermenu accessibility #342)
• image not taking full cover (to be implemented by the app itself)

[ChristophWurst]

Tested and works nicely 👍

[korelstar]

Tabs should be optional. Currently, I'm forced to use them (otherwise I will get JavaScript errors). However, using tabs if there is only few content to display doesn't make any sense.

Alternatively, I could provide a single tab and you could hide app-sidebar-tabs__nav if there is only one tab. But then I have to use a fake name and icon for the tab.

[skjnldsv]

@korelstar why would tabs be optional?
The idea is also to try to improve the sidebar content. Currently we have a lot of apps that push a lot of thing at the same location and looks messy.
Ideally, we should regroup and tabify the data displayed in the sidebar! :)

Though I agree, you could also have too little informations to need 2 tabs or more.
Though a clear separation is needed, those are not the best looking visual :(

Any ideas?

1	2

[korelstar]

In general, I agree totally, that tabs are useful. It just looks weird if I need one tab only. But you're right, the second variant isn't the best. Maybe you could just add more space between button 1 and the (tab) content?

[jancborchardt]

Yes, @korelstar has a good point – if there is only 1 section of content, the tabs are not needed.

The tab content fields should also be self-explanatory (chat will have chat history and an input box, and detail inputs will have labels etc.) so we can leave it if there is only one tab.

[skjnldsv]

@jancborchardt so, we don't change anything and we left it like the second screenshot?
I also agree that no tabs are needed in that case, but I also simply sees that the ui is not really great as is, without tabs. 😉

[jancborchardt]

@skjnldsv yup, I'd say 2nd screenshot is good!

(Of course with only 1 line of text it looks off, but that's also the case with the tab header. ;)

[skjnldsv]

All done!
@korelstar if no tabs used, you can just put raw content without the tab component. :)

[korelstar]

@skjnldsv

if no tabs used, you can just put raw content without the tab component. :)

No, this doesn't work, because you get an error "Error in mounted hook: "TypeError: this.tabs[0] is undefined"

But using a single tab is fine for me. This works as expected, now.

[skjnldsv]

@korelstar ah, I might have forgot a check somewhere :)

[skjnldsv]

@korelstar could you open a new issue with the full log stack? :)

[korelstar]

Even better: I've provided a fix for that problem in #359. :-)