Merge pull request #11222 from nextcloud/fix/8709/set-modal-targeting

fix: use body element if not the fullscreen

src/App.vue

@@ -734,6 +734,11 @@ export default {
 .mx-datepicker-main.mx-datepicker-popup {
 	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

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

src/components/ChatView.vue

@@ -61,6 +61,7 @@
 
 		<!-- Input field -->
 		<NewMessage v-if="containerId"
+			:key="containerId"
 			role="region"
 			:token="token"
 			:container="containerId"
@@ -145,11 +146,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/TopBar/TopBarMenu.vue

@@ -176,6 +176,7 @@ import VideoIcon from 'vue-material-design-icons/Video.vue'
 import GridView from 'vue-material-design-icons/ViewGrid.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'
@@ -392,6 +393,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'
 	},
 }