diff options
| author | Daniel Calviño Sánchez <danxuliu@gmail.com> | 2021-08-27 01:01:02 +0200 |
|---|---|---|
| committer | Daniel Calviño Sánchez <danxuliu@gmail.com> | 2021-08-27 01:07:59 +0200 |
| commit | 0fb450b4167f57f3b98346ae1ff5fafc5164511d (patch) | |
| tree | e7c36636c3113ab72b7a6641c3fc0b5401b2f4c9 | |
| parent | 2d26b6c2d04d363ab015932b2f2c770996506f0d (diff) | |
Fix (partially) actions position when Talk is embedded in the Files app
Using the default container causes the action menus in the Talk tab to
be repositioned at wrong places when the menus are shown and the file
list is scrolled. To address this (although it does not fully fix the
issue, there are still some strange behaviours) the main container for
Talk components used when Talk is embedded in the Files app is Talk tab.
Besides that, both the container and the boundaries element of the
actions are set to the Talk tab.
Despite setting the main container this change does not affect other
components (like the room selector) or slightly improves their behaviour
(like the author avatar menu, which no longer appears outside the tab
when scrolling).
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
| -rw-r--r-- | src/components/MessagesList/MessagesGroup/Message/Message.vue | 7 | ||||
| -rw-r--r-- | src/components/NewMessageForm/NewMessageForm.vue | 5 | ||||
| -rw-r--r-- | src/mainFilesSidebar.js | 2 |
3 files changed, 13 insertions, 1 deletions
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue index 89f049be0..5e00ecd51 100644 --- a/src/components/MessagesList/MessagesGroup/Message/Message.vue +++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue @@ -132,7 +132,8 @@ the main body of the message as well as a quote. </Actions> <Actions :force-menu="true" - :container="container"> + :container="container" + :boundaries-element="containerElement"> <ActionButton v-if="isPrivateReplyable" icon="icon-user" @@ -577,6 +578,10 @@ export default { return this.$store.getters.getMainContainerSelector() }, + containerElement() { + return document.querySelector(this.container) + }, + isTemporaryUpload() { return this.isTemporary && this.messageParameters.file }, diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue index 64acc12ce..5e89d01e4 100644 --- a/src/components/NewMessageForm/NewMessageForm.vue +++ b/src/components/NewMessageForm/NewMessageForm.vue @@ -43,6 +43,7 @@ <Actions ref="uploadMenu" :container="container" + :boundaries-element="containerElement" :disabled="disabled" :aria-label="t('spreed', 'Share files to the conversation')" :aria-haspopup="true"> @@ -249,6 +250,10 @@ export default { container() { return this.$store.getters.getMainContainerSelector() }, + + containerElement() { + return document.querySelector(this.container) + }, }, watch: { diff --git a/src/mainFilesSidebar.js b/src/mainFilesSidebar.js index 1551ff23f..21c9b7966 100644 --- a/src/mainFilesSidebar.js +++ b/src/mainFilesSidebar.js @@ -73,6 +73,8 @@ Vue.use(VueShortKey, { prevent: ['input', 'textarea', 'div'] }) Vue.use(vOutsideEvents) Vue.use(VueObserveVisibility) +store.dispatch('setMainContainerSelector', '.talkChatTab') + const newCallView = () => new Vue({ store, render: h => h(FilesSidebarCallViewApp), |