In fullscreen, neither the call actions menu nor the personal controls menu works, the viewer neither

[marcoambrosini]

In fullscreen, neither the call actions menu nor the personal controls menu works, the viewer neither.

[PVince81]

probably a containment issue:

the popover element is appended into the body but the element we picked for fullscreen is not in that hierarchy

[PVince81]

also broken in Talk 10.0.5

[nickvergessen]

Also broken in 9
Basically since the menus use the popover and that was moved to the body instead of being in place.
But i think in reset versions the popover menu has an option where to mount it:

https://github.com/nextcloud/nextcloud-vue/blob/master/src/components/Actions/Actions.vue#L297

If we set that to the item we fullscreen it should work again?

[PVince81]

yes, that or boundariesElement.

and find a good way to set the main container globally to all vues, like the store or mixins.

[nickvergessen]

yes, that or boundariesElement.

Well additionally maybe, but it needs to "container"ed in the fullscreened element because everything else is not rendered/visible.

and find a good way to set the main container globally to all vues, like the store or mixins.

Please don't break everything again 🙈

[PVince81]

I didn't mean reparenting, only exposing a reusable value to avoid repeating "document.getElementById('content-vue')" everywhere. I noticed that "this.$root.$el" contains that element too but the first time it's evaluated it contains the old element "#content" which gets replaced after Vue finishes it initialization. So not usable in a computed property.

I guess a helper method will do, then, so that this gets reevaluated every time.

[PVince81]

• Actions menu => set container="#content-vue" in all relevant occurrences: Fix Actions menus in fullscreen mode #5270
• Emoji picker: missing support for container property: Use container property to fix popups in fulllscreen mode #5291
• Avatar: missing support for container property: Use container property to fix popups in fulllscreen mode #5291
• Modal: missing support for container property: Use container property to fix popups in fulllscreen mode #5291

[PVince81]

PR for the Actions bit: #5270

others will need more work as they require to extend the nextcloud-vue components...

[PVince81]

• check if some tooltips also need a container: it might be possible to update their defaultContainer value when switching to and from fullscreen

[PVince81]

PR for nextcloud-vue to add the container prop: nextcloud-libraries/nextcloud-vue#1734

[PVince81]

PR for talk app adjustments: #5291

[PVince81]

the tooltips are not working either.

adding this Tooltip.options.defaultContainer = '#content-vue' in main.js makes it work globally but could potentially affect tooltips in the header.

I've also tried to set that value after switching to fullscreen, but it requires a re-render of the matching components to make it work

[PVince81]

all merged, now only the tooltip issue remains

[PVince81]

adding this Tooltip.options.defaultContainer = '#content-vue' in main.js makes it work globally but could potentially affect tooltips in the header.

I've verified that the tooltip default only affects the Talk app by logging that setting inside another app that uses the library.
More details in my PR: #5488