Fix missing Talk sidebar trigger in public share pages

[danxuliu]

Follow up to #7576
Fixes #7578

Since the removal of SCSS files the menu-people icon can no longer be used directly with a CSS class. However, it is available as a Vue component; although it would be possible to directly render the Vue component for the icon* inside the button element the whole button is moved to Vue instead, as the other approach requires more fighting with the styles.

*For reference in case it is ever needed:

const talkSidebarTriggerIconVm = new Vue({
	// MenuPeople is a functional component, so it needs to be explicitly
	// rendered rather than just spread (...MenuPeople) in the constructor
	// of the Vue instance.
	render: h => h(MenuPeople, {
		props: {
			fillColor: 'var(--color-primary-text)',
			size: 20,
			decorative: true,
		},
	}),
})
talkSidebarTriggerIconVm.$mount('#talk-sidebar-trigger-icon')

[nickvergessen]

It's not a functional component anymore with #7592 🤕😅

[nickvergessen]

Keyboard tabbing before nextcloud-libraries/nextcloud-vue#2869

Keyboard tabbing with nextcloud-libraries/nextcloud-vue#2869

So let's get this in nextcloud-libraries/nextcloud-vue#2871

[nickvergessen]

Vue lib is in

[danxuliu]

Header menu toggles and app buttons have an opacity of 0.85, but the Vue button uses 0.7. Should the opacity be increased (in PublicShareSidebarTrigger)?

Other than the comments, tested and works 👍

Thanks for adding the style for the Vue button!

[danxuliu]

Header contents are vertically centered. Are the vertical margins needed?

Out of curiosity, why 5px instead of 2px for margin-right?

[nickvergessen]

The margins where needed otherwise the box shadow was cut off.

For the right sidebar I added 3px on top so the white border of keyboard active doesn't touch the browser as it looked too weird.

[danxuliu]

The margins where needed otherwise the box shadow was cut off.

I tried removing the margins (or, rather, replacing with margin-right: 3px) and as far as I can tell it was working fine 🤷 That is why I was asking. But maybe it depends on the browser, I do not know.

For the right sidebar I added 3px on top so the white border of keyboard active doesn't touch the browser as it looked too weird.

👍

[danxuliu]

Is it needed to horizontally center the button? As the div has no explicit width it should have the width of its child elements, so the button should be already centerd in the div. Or am I missing something?

[nickvergessen]

Copied this from the app icons and only then the centering worked as expected.

[danxuliu]

Same as above, I tried removing the rules and as far as I can tell it was working fine. But same as above, maybe it is related to the browser, no idea 🤷

[marcoambrosini]

We should probably not rely on the opacity for the hover effect in the button in the first place @danxuliu

[danxuliu]

We should probably not rely on the opacity for the hover effect in the button in the first place @danxuliu

And how it should be done? Using a background? Something else? In any case it should be changed in nextcloud-vue as well as in the header stylesheet.

[marcoambrosini]

Yes I mean changing it in the vue library. The hover feedback can be just the change in cursor (we have a tertiary style that has a background feedback), this one should be used only for special cases. The keyboard navigation feedback is a big box shadow.

[nickvergessen]

Since vue 5.4 is merged, this can be rebased and then merged.

[nickvergessen]

Nevermind, one of the things that was merged after 5.4.0 nextcloud-libraries/nextcloud-vue#2940

[nickvergessen]

Rebased

[nickvergessen]

As per chat:

Also I'd vote to merge the sidebar trigger even though it currently shows wrong colors, but at least it can be used again

Updating the vue lib to 6 with #7711 will fix it.