[stable21] Fix tooltip, popups, dialogs... in fullscreen mode

src/collections.js

@@ -43,7 +43,14 @@ import RoomSelector from './views/RoomSelector'
  const body = document.getElementById('body-user')
  body.appendChild(container)
  const ComponentVM = new Vue({
- render: h => h(RoomSelector),
+ render: h => h(RoomSelector, {
+ props: {
+ // Even if it is used from Talk the Collections menu is
+ // independently loaded, so the properties that depend
+ // on the store need to be explicitly injected.
+ container: window.store ? window.store.getters.getMainContainerSelector() : undefined,
+ },
+ }),
  })
  ComponentVM.$mount(container)
  ComponentVM.$root.$on('close', () => {

src/components/AvatarWrapper/AvatarWrapper.spec.js

@@ -1,9 +1,27 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
 import { shallowMount } from '@vue/test-utils'
 import AvatarWrapper from './AvatarWrapper'
 
+Vue.use(Vuex)
+
 describe('AvatarWrapper.vue', () => {
+ let store
+
+ beforeEach(() => {
+ // cloneDeep() fails with "Cannot convert a Symbol value to a string"
+ // when called on the real store, so a fake store with just the needed
+ // getter is used instead.
+ store = new Vuex.Store({
+ getters: {
+ getMainContainerSelector: () => () => undefined,
+ },
+ })
+ })
+
  it('Renders user avatars properly', () => {
  const wrapper = shallowMount(AvatarWrapper, {
+ store,
  propsData: {
  id: 'test-id',
  source: 'users',
@@ -17,6 +35,7 @@ describe('AvatarWrapper.vue', () => {
  })
  it('Renders group icons properly', () => {
  const wrapper = shallowMount(AvatarWrapper, {
+ store,
  propsData: {
  id: '',
  source: 'groups',
@@ -29,6 +48,7 @@ describe('AvatarWrapper.vue', () => {
  })
  it('Renders email icons properly', () => {
  const wrapper = shallowMount(AvatarWrapper, {
+ store,
  propsData: {
  id: '',
  source: 'emails',
@@ -43,6 +63,7 @@ describe('AvatarWrapper.vue', () => {
  })
  it('Renders guests icons properly', () => {
  const wrapper = shallowMount(AvatarWrapper, {
+ store,
  propsData: {
  id: '',
  name: '',

src/components/AvatarWrapper/AvatarWrapper.vue

@@ -29,6 +29,7 @@
  <Avatar v-else-if="id"
  :user="id"
  :display-name="name"
+ :menu-container="menuContainer"
  menu-position="left"
  :disable-tooltip="disableTooltip"
  :disable-menu="disableMenu"
@@ -114,6 +115,9 @@ export default {
  const customName = this.name !== t('spreed', 'Guest') ? this.name : '?'
  return customName.charAt(0)
  },
+ menuContainer() {
+ return this.$store.getters.getMainContainerSelector()
+ },
  // Takes the the size prop and makes it a string for the classes
  sizeToString() {
  return this.size.toString()

src/components/AvatarWrapper/AvatarWrapperSmall.vue

@@ -29,6 +29,7 @@
  <Avatar v-else-if="id"
  :user="id"
  :display-name="name"
+ :menu-container="menuContainer"
  menu-position="left"
  :show-user-status="showUserStatus"
  :disable-tooltip="disableTooltip"
@@ -103,6 +104,9 @@ export default {
  const customName = this.name !== t('spreed', 'Guest') ? this.name : '?'
  return customName.charAt(0)
  },
+ menuContainer() {
+ return this.$store.getters.getMainContainerSelector()
+ },
  // Takes the the size prop and makes it a string for the classes
  sizeToString() {
  return this.size.toString()

src/components/CallView/shared/LocalMediaControls.vue

@@ -98,7 +98,7 @@
  <Actions
  v-if="showActions"
  v-tooltip="t('spreed', 'More actions')"
- container="#content-vue"
+ :container="container"
  :aria-label="t('spreed', 'More actions')">
  <ActionButton
  :close-after-click="true"
@@ -349,6 +349,10 @@ export default {
  return (this.model.attributes.localScreen || this.splitScreenSharingMenu) ? t('spreed', 'Screensharing options') : t('spreed', 'Enable screensharing')
  },
 
+ container() {
+ return this.$store.getters.getMainContainerSelector()
+ },
+
  isQualityWarningTooltipDismissed() {
  return this.$store.getters.isQualityWarningTooltipDismissed
  },

src/components/ConversationIcon.vue

@@ -28,6 +28,7 @@
  :size="44"
  :user="item.name"
  :display-name="item.displayName"
+ :menu-container="menuContainer"
  menu-position="left"
  class="conversation-icon__avatar" />
  <div v-if="showCall"
@@ -100,6 +101,15 @@ export default {
 
  return ''
  },
+ menuContainer() {
+ // The store may not be defined in the RoomSelector if used from
+ // the Collaboration menu outside Talk.
+ if (!this.$store) {
+ return undefined
+ }
+
+ return this.$store.getters.getMainContainerSelector()
+ },
  },
 }
 </script>

src/components/ConversationSettings/ConversationSettingsDialog.vue

@@ -24,7 +24,8 @@
  role="dialog"
  :aria-label="t('spreed', 'Conversation settings')"
  :open.sync="showSettings"
- :show-navigation="false">
+ :show-navigation="false"
+ :container="container">
  <AppSettingsSection
  :title="t('spreed', 'Guests access')"
  class="app-settings-section">
@@ -88,6 +89,10 @@ export default {
  },
 
  computed: {
+ container() {
+ return this.$store.getters.getMainContainerSelector()
+ },
+
  canUserEnableSIP() {
  return this.conversation.canEnableSIP
  },

src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue

@@ -72,6 +72,7 @@
  class="icon icon-edit"
  @click="showLogContent" />
  <Modal v-if="logModal"
+ :container="container"
  @close="closeLogModal">
  <div class="modal__content">
  <textarea v-model="processLog" class="log-content" />
@@ -521,6 +522,9 @@ export default {
  ? t('spreed', 'not running, check Matterbridge log')
  : t('spreed', 'not running')
  },
+ container() {
+ return this.$store.getters.getMainContainerSelector()
+ },
  },
 
  beforeMount() {

src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue

@@ -35,6 +35,7 @@
  <!-- New group form -->
  <Modal
  v-if="modal"
+ :container="container"
  @close="closeModal">
  <!-- Wrapper for content & navigation -->
  <div
@@ -184,6 +185,9 @@ export default {
  },
 
  computed: {
+ container() {
+ return this.$store.getters.getMainContainerSelector()
+ },
  // Trims whitespaces from the input string
  conversationName() {
  return this.conversationNameInput.trim()

src/components/MessagesList/MessagesGroup/AuthorAvatar.vue

@@ -25,6 +25,7 @@
  class="messages__avatar__icon"
  :user="authorId"
  :show-user-status="false"
+ :menu-container="menuContainer"
  menu-position="left"
  :display-name="displayName" />
  <div v-else-if="isDeletedUser"
@@ -84,6 +85,10 @@ export default {
  const customName = this.displayName !== t('spreed', 'Guest') ? this.displayName : '?'
  return customName.charAt(0)
  },
+
+ menuContainer() {
+ return this.$store.getters.getMainContainerSelector()
+ },
  },
 }
 </script>

src/components/MessagesList/MessagesGroup/Message/Message.vue

@@ -126,7 +126,8 @@ the main body of the message as well as a quote.
  <Actions
  v-show="hasActionsMenu"
  :force-menu="true"
- container="#content-vue">
+ :container="container"
+ :boundaries-element="containerElement">
  <template
  v-for="action in messageActions">
  <ActionButton
@@ -452,6 +453,14 @@ export default {
  return this.isSystemMessage || !this.showActions || this.isTallEnough
  },
 
+ container() {
+ return this.$store.getters.getMainContainerSelector()
+ },
+
+ containerElement() {
+ return document.querySelector(this.container)
+ },
+
  isTemporaryUpload() {
  return this.isTemporary && this.messageParameters.file
  },

src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue

@@ -375,6 +375,19 @@ export default {
  },
  ],
  })
+
+ // FIXME Remove this hack once it is possible to set the parent
+ // element of the viewer.
+ // By default the viewer is a sibling of the fullscreen element, so
+ // it is not visible when in fullscreen mode. It is not possible to
+ // specify the parent nor to know when the viewer was actually
+ // opened, so for the time being it is reparented if needed shortly
+ // after calling it.
+ setTimeout(() => {
+ if (this.$store.getters.isFullscreen()) {
+ document.getElementById('content-vue').appendChild(document.getElementById('viewer'))
+ }
+ }, 1000)
  },
  },
 }

src/components/NewMessageForm/NewMessageForm.vue

@@ -41,7 +41,8 @@
  v-if="canUploadFiles || canShareFiles"
  class="new-message-form__button">
  <Actions
- container="#content-vue"
+ :container="container"
+ :boundaries-element="containerElement"
  default-icon="icon-clip-add-file"
  class="new-message-form__button"
  :aria-label="t('spreed', 'Share files to the conversation')"
@@ -65,7 +66,9 @@
  <div
  v-if="!isReadOnly"
  class="new-message-form__button">
- <EmojiPicker @select="addEmoji">
+ <EmojiPicker
+ :container="container"
+ @select="addEmoji">
  <button
  type="button"
  class="nc-button nc-button__main"
@@ -211,6 +214,14 @@ export default {
  attachmentFolderFreeSpace() {
  return this.$store.getters.getAttachmentFolderFreeSpace()
  },
+
+ container() {
+ return this.$store.getters.getMainContainerSelector()
+ },
+
+ containerElement() {
+ return document.querySelector(this.container)
+ },
  },
 
  mounted() {
@@ -364,6 +375,19 @@ export default {
  shareFile(path, this.token)
  this.$refs.advancedInput.focusInput()
  })
+
+ // FIXME Remove this hack once it is possible to set the parent
+ // element of the file picker.
+ // By default the file picker is a sibling of the fullscreen
+ // element, so it is not visible when in fullscreen mode. It is not
+ // possible to specify the parent nor to know when the file picker
+ // was actually opened, so for the time being it is reparented if
+ // needed shortly after calling it.
+ setTimeout(() => {
+ if (this.$store.getters.isFullscreen()) {
+ document.getElementById('content-vue').appendChild(document.querySelector('.oc-dialog'))
+ }
+ }, 1000)
  },
 
  /**

src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue

@@ -43,7 +43,8 @@
  :preloaded-user-status="preloadedUserStatus"
  :name="computedName"
  :source="participant.source || participant.actorType"
- :offline="isOffline" />
+ :offline="isOffline"
+ :menu-container="container" />
  <div
  class="participant-row__user-wrapper"
  :class="{
@@ -95,7 +96,7 @@
  </div>
  <Actions
  v-if="canModerate && !isSearched"
- container="#content-vue"
+ :container="container"
  :aria-label="participantSettingsAriaLabel"
  class="participant-row__actions">
  <ActionText
@@ -200,6 +201,10 @@ export default {
  },
 
  computed: {
+ container() {
+ return this.$store.getters.getMainContainerSelector()
+ },
+
  participantSettingsAriaLabel() {
  return t('spreed', 'Settings for participant "{user}"', { user: this.computedName })
  },

src/components/SettingsDialog/SettingsDialog.vue

@@ -20,7 +20,11 @@
 -->
 
 <template>
- <AppSettingsDialog :open.sync="showSettings" :show-navigation="true" first-selected-section="keyboard shortcuts">
+ <AppSettingsDialog
+ :open.sync="showSettings"
+ :show-navigation="true"
+ first-selected-section="keyboard shortcuts"
+ :container="container">
  <AppSettingsSection :title="t('spreed', 'Choose devices')"
  class="app-settings-section">
  <MediaDevicesPreview />
@@ -138,6 +142,10 @@ export default {
  },
 
  computed: {
+ container() {
+ return this.$store.getters.getMainContainerSelector()
+ },
+
  attachmentFolder() {
  return this.$store.getters.getAttachmentFolder()
  },