Merge pull request #11260 from nextcloud/backport/11222/stable27

[stable27] fix: use body element if not the fullscreen

src/App.vue

@@ -676,6 +676,10 @@ export default {
 	z-index: 10001 !important;
 }
 
+/* FIXME: remove after https://github.com/nextcloud-libraries/nextcloud-vue/pull/4959 is released */
+body .modal-wrapper * {
+	box-sizing: border-box;
+}
 </style>
 
 <style lang="scss" scoped>

src/components/CallView/shared/ViewerOverlayCallView.vue

@@ -196,7 +196,7 @@ export default {
 		},
 
 		portalSelector() {
-			return this.$store.getters.isFullscreen() ? '#content-vue' : 'body'
+			return this.$store.getters.getMainContainerSelector()
 		},
 	},
 

src/components/ChatView.vue

@@ -59,12 +59,12 @@
 		</div>
 
 		<NewMessage v-if="containerId"
+			:key="containerId"
 			role="region"
 			:token="token"
 			:container="containerId"
 			has-typing-indicator
 			:aria-label="t('spreed', 'Post message')" />
-
 	</div>
 </template>
 
@@ -131,11 +131,21 @@ export default {
 		token() {
 			return this.$store.getters.getToken()
 		},
+
+		container() {
+			return this.$store.getters.getMainContainerSelector()
+		},
+	},
+
+	watch: {
+		container(value) {
+			this.containerId = value
+		},
 	},
 
 	mounted() {
 		// Postpone render of NewMessage until application is mounted
-		this.containerId = this.$store.getters.getMainContainerSelector()
+		this.containerId = this.container
 	},
 
 	methods: {

src/components/MessagesList/MessagesGroup/MessagesSystemGroup.vue

@@ -107,7 +107,7 @@ export default {
 	computed: {
 		lastReadMessageId() {
 			return this.$store.getters.conversation(this.token)?.lastReadMessage
-		}
+		},
 	},
 
 	watch: {

src/components/TopBar/TopBarMenu.vue

@@ -175,6 +175,7 @@ import StopIcon from 'vue-material-design-icons/Stop.vue'
 import VideoIcon from 'vue-material-design-icons/Video.vue'
 
 import { getCapabilities } from '@nextcloud/capabilities'
+import { showWarning } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
@@ -391,6 +392,16 @@ export default {
 		},
 
 		toggleFullscreen() {
+			// Don't toggle fullscreen if there is an open modal
+			// FIXME won't be needed without Fulscreen API
+			if (Array.from(document.body.childNodes).filter(child => {
+				return child.nodeName === 'DIV' && child.classList.contains('modal-mask')
+					&& window.getComputedStyle(child).display !== 'none'
+			}).length !== 0) {
+				showWarning(t('spreed', 'You need to close a dialog to toggle full screen'))
+				return
+			}
+
 			if (this.isFullscreen) {
 				this.disableFullscreen()
 				this.$store.dispatch('setIsFullscreen', false)

src/store/uiModeStore.js

@@ -31,8 +31,8 @@ const state = {
 }
 
 const getters = {
-	getMainContainerSelector: (state) => () => {
-		return state.mainContainerSelector
+	getMainContainerSelector: (state, getters, rootState, rootGetters) => () => {
+		return rootGetters.isFullscreen() ? state.mainContainerSelector : 'body'
 	},
 }