diff options
author | Vincent Petry <vincent@nextcloud.com> | 2021-03-02 13:18:02 +0300 |
---|---|---|
committer | Vincent Petry <vincent@nextcloud.com> | 2021-03-03 19:26:15 +0300 |
commit | 9eaa04318ebe0a032dc524609d0eda1e95f6f88b (patch) | |
tree | 06f404fd078cc8a329e4aab6388b95695421e675 | |
parent | 53f12a82ac374845b2eda9428b75f3db323d45bd (diff) |
Use container property to fix popups in fulllscreen mode
Many popup components are usually appending themselves to the document
body. This doesn't work in fullscreen mode where we use another
component as the root.
This fix sets the "container" property for all relevant popup components
to make sure they can be visible in fullscreen mode.
Signed-off-by: Vincent Petry <vincent@nextcloud.com>
11 files changed, 22 insertions, 7 deletions
diff --git a/src/components/AvatarWrapper/AvatarWrapper.vue b/src/components/AvatarWrapper/AvatarWrapper.vue index f6dad0537..b887d9893 100644 --- a/src/components/AvatarWrapper/AvatarWrapper.vue +++ b/src/components/AvatarWrapper/AvatarWrapper.vue @@ -29,6 +29,7 @@ <Avatar v-else-if="id" :user="id" :display-name="name" + menu-container="#content-vue" menu-position="left" :disable-tooltip="disableTooltip" :disable-menu="disableMenu" diff --git a/src/components/AvatarWrapper/AvatarWrapperSmall.vue b/src/components/AvatarWrapper/AvatarWrapperSmall.vue index 2c30e5773..9785bfa6b 100644 --- a/src/components/AvatarWrapper/AvatarWrapperSmall.vue +++ b/src/components/AvatarWrapper/AvatarWrapperSmall.vue @@ -29,6 +29,7 @@ <Avatar v-else-if="id" :user="id" :display-name="name" + menu-container="#content-vue" menu-position="left" :show-user-status="showUserStatus" :disable-tooltip="disableTooltip" diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue index 4990bfdc4..4183c4e38 100644 --- a/src/components/ConversationIcon.vue +++ b/src/components/ConversationIcon.vue @@ -28,6 +28,7 @@ :size="44" :user="item.name" :display-name="item.displayName" + menu-container="#content-vue" menu-position="left" class="conversation-icon__avatar" /> <div v-if="showCall" diff --git a/src/components/ConversationSettings/ConversationSettingsDialog.vue b/src/components/ConversationSettings/ConversationSettingsDialog.vue index 3f0bf8ccf..ed844714b 100644 --- a/src/components/ConversationSettings/ConversationSettingsDialog.vue +++ b/src/components/ConversationSettings/ConversationSettingsDialog.vue @@ -24,7 +24,8 @@ role="dialog" :aria-label="t('spreed', 'Conversation settings')" :open.sync="showSettings" - :show-navigation="true"> + :show-navigation="true" + container="#content-vue"> <!-- Notifications settings --> <AppSettingsSection :title="t('spreed', 'Chat notifications')" diff --git a/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue b/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue index e87392d99..cbf4092b6 100644 --- a/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue +++ b/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue @@ -72,7 +72,8 @@ class="icon icon-edit" @click="showLogContent" /> <Modal v-if="logModal" - @close="closeLogModal"> + @close="closeLogModal" + container="#content-vue"> <div class="modal__content"> <textarea v-model="processLog" class="log-content" /> </div> diff --git a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue index 6c1b828df..41edb9480 100644 --- a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue +++ b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue @@ -35,7 +35,8 @@ <!-- New group form --> <Modal v-if="modal" - @close="closeModal"> + @close="closeModal" + container="#content-vue"> <!-- Wrapper for content & navigation --> <div class="new-group-conversation talk-modal"> diff --git a/src/components/MessagesList/MessagesGroup/AuthorAvatar.vue b/src/components/MessagesList/MessagesGroup/AuthorAvatar.vue index ea9bfd42f..74cb0e351 100644 --- a/src/components/MessagesList/MessagesGroup/AuthorAvatar.vue +++ b/src/components/MessagesList/MessagesGroup/AuthorAvatar.vue @@ -25,6 +25,7 @@ class="messages__avatar__icon" :user="authorId" :show-user-status="false" + menu-container="#content-vue" menu-position="left" :display-name="displayName" /> <div v-else-if="isDeletedUser" diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue index e06fe93b3..3bdb5e4cb 100644 --- a/src/components/NewMessageForm/NewMessageForm.vue +++ b/src/components/NewMessageForm/NewMessageForm.vue @@ -63,7 +63,9 @@ </Actions> </div> <div> - <EmojiPicker @select="addEmoji"> + <EmojiPicker + container="#content-vue" + @select="addEmoji"> <button type="button" :disabled="disabled" diff --git a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue index 5ac1c2331..6cbd48056 100644 --- a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue +++ b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue @@ -42,7 +42,8 @@ :show-user-status-compact="false" :name="computedName" :source="participant.source || participant.actorType" - :offline="isOffline" /> + :offline="isOffline" + menu-container="#content-vue" /> <div class="participant-row__user-wrapper" :class="{ diff --git a/src/components/SettingsDialog/SettingsDialog.vue b/src/components/SettingsDialog/SettingsDialog.vue index d61d941e9..d4fe317ac 100644 --- a/src/components/SettingsDialog/SettingsDialog.vue +++ b/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="#content-vue"> <AppSettingsSection :title="t('spreed', 'Choose devices')" class="app-settings-section"> <MediaDevicesPreview /> diff --git a/src/components/UploadEditor.vue b/src/components/UploadEditor.vue index bd376dd15..9b6a57bad 100644 --- a/src/components/UploadEditor.vue +++ b/src/components/UploadEditor.vue @@ -22,7 +22,8 @@ <template> <Modal v-if="showModal" class="upload-editor" - @close="handleDismiss"> + @close="handleDismiss" + container="#content-vue"> <!--native file picker, hidden --> <input id="file-upload" ref="fileUploadInput" |