fix: use body element if not the fullscreen

[Antreesy]

☑️ Resolves

• Fix Device preview prevents call from starting while editing document #8709
• Fix File upload dialogue inaccessible when image preview is open during call #9626
• Replaces Fix media settings in files sidebar #9792

Should be safe to use a body element while you're not in the fullscreen (as tested with ViewerOverlayCallView).
Also as long as we won't register a fullscreen state in sidebar (for Files page, for example), modal will end up in body, so above the Viewer embedded

Warning

Behaviour change: as NcModal component has more reasons against being re-mounted, then pros, hotkey 'F' to toggle Fulscreen mode is now disabled when any modal is open 368e43a

🖌️ UI Checklist

🖼️ Screenshots / Screencasts

🖼️ Window frame	🏞️ Fullscreen
Files Sidebar	-
Talk main app	-

🚧 Tasks

• Check possible drawbacks?

🏁 Checklist

• 🌏 Tested with Chrome, Firefox and Safari or should not be risky to browser differences

[DorraJaouad]

2 things to check :

• Event propagation where modals are involved ( like @event or v-on )
• CSS dependency ( using :deep to affect a modal style), as the modal may be out of scope.

Otherwise, should be fine.

[Antreesy]

• CSS dependence ( using :deep to affect a modal style), as the modal may be out of scope.

Elements inside #content-vue have inherited box-sizing: border-box.
Others attached to body - depends in each case

[Antreesy]

Fixed for NewMessage in ChatView:

It provides container to children components (EmojiPicker, autocomplete, NcActions) when mounted, and won't update anymore.
So we need to listen to fullscreen change and re-mount component accordingly

[Antreesy]

Found a drawback: if you go to Fullscreen with open modal, it will stay attached to the body element, thus won't be visible. Freshly opened modals works fine, as they get an actual container value before being mounted
Possible solution:

• attach :key="container" to each modal to re-mount i:eyes: - breaks video stream in MediaSettings (at least)
• disable hotkey [F] if modal is open - seems good as it' not expected?

[DorraJaouad]

Possible solution: attach :key="container" to each modal

As it is causing re-render only when container changes, sounds like a good solution.

[Antreesy]

NcActions works fine, as they're re-rendered and re-mounted each time the container is changed
Looks like this function is triggered each time: https://vuejs.org/api/options-rendering.html#render

https://github.com/nextcloud-libraries/nextcloud-vue/blob/ebbe5c689959fc6470ab79352fd8126d3b98aec2/src/components/NcActions/NcActions.vue#L1215-L1221

[DorraJaouad]

Nothing is blocking, can't find another drawback.

[DorraJaouad]

Approved again

[DorraJaouad]

Fixup squash and rebased

[DorraJaouad]

/backport to stable28

[DorraJaouad]

@nickvergessen backport to stable27 and stable26 ?

[nickvergessen]

My take would be no 🤔

[nickvergessen]

/backport to stable27

[backportbot-nextcloud]

The backport to stable27 failed. Please do this backport manually.

# Switch to the target branch and update it
git checkout stable27
git pull origin stable27

# Create the new backport branch
git checkout -b fix/foo-stable27

# Cherry pick the change from the commit sha1 of the change against the default branch
# This might cause conflicts. Resolve them.
git cherry-pick abc123

# Push the cherry pick commit to the remote repository and open a pull request
git push origin fix/foo-stable27

Error: Unknown error

More info at https://docs.nextcloud.com/server/latest/developer_manual/getting_started/development_process.html#manual-backport

[nickvergessen]

@DorraJaouad ^ can you take care of the backport while Maksim is out?