Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[stable26] Add container context for NewMessageForm #8999

Merged
merged 1 commit into from Mar 8, 2023
Merged

[stable26] Add container context for NewMessageForm #8999

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
23 changes: 21 additions & 2 deletions src/components/BreakoutRoomsEditor/SendMessageDialog.vue
View file
Open in desktop
Expand Up @@ -20,14 +20,16 @@
-->

<template>
<NcModal v-on="$listeners">
<NcModal ref="modal" v-on="$listeners">
<div class="send-message-dialog">
<h2 class="send-message-dialog__title">
{{ dialogTitle }}
</h2>
<NewMessageForm role="region"
<NewMessageForm v-if="modalContainerId"
role="region"
:token="token"
:breakout-room="true"
:container-id="modalContainerId"
:aria-label="t('spreed', 'Post message')"
:broadcast="broadcast"
@sent="handleMessageSent"
Expand Down Expand Up @@ -79,6 +81,12 @@ export default {
},
},

data() {
return {
modalContainerId: null,
}
},

computed: {
dialogTitle() {
return this.broadcast
Expand All @@ -87,6 +95,11 @@ export default {
},
},

mounted() {
// Postpone render of NewMessageForm until modal container is mounted
this.modalContainerId = `#modal-description-${this.$refs.modal.randId}`
},

methods: {
handleMessageSent() {
showSuccess(this.broadcast
Expand All @@ -111,4 +124,10 @@ export default {
margin-bottom: 0;
}
}

:deep(.modal-container) {
// Fix visibility for popovers, like EmojiPicker
overflow: visible !important;
}

</style>
18 changes: 15 additions & 3 deletions src/components/NewMessageForm/NewMessageForm.vue
View file
Open in desktop
Expand Up @@ -119,6 +119,7 @@
:auto-complete="autoComplete"
:disabled="disabled"
:user-data="userData"
:menu-container="containerElement"
:placeholder="placeholderText"
:aria-label="placeholderText"
@shortkey="focusInput"
Expand Down Expand Up @@ -169,7 +170,7 @@
<!-- Text file creation dialog -->
<NcModal v-if="showTextFileDialog !== false"
size="normal"
:container="$store.getters.getMainContainerSelector()"
:container="container"
class="templates-picker"
@close="dismissTextFileCreation">
<div class="new-text-file">
Expand Down Expand Up @@ -306,6 +307,15 @@ export default {
default: false,
},

/**
* When this component is used to send message to a breakout room we
* pass an id of modal containing component to render properly.
*/
containerId: {
type: String,
default: null,
},

/**
* Broadcast messages to all breakout rooms of a given conversation.
*/
Expand Down Expand Up @@ -399,11 +409,13 @@ export default {
},

container() {
return this.$store.getters.getMainContainerSelector()
return this.containerId ?? this.$store.getters.getMainContainerSelector()
},

containerElement() {
return document.querySelector(this.container)
// TODO can't find DOM element by #content-vue. undefined is passed
// for NcRichContenteditable to use 'document.body' by default
return document.querySelector(this.container) ?? undefined
},

isOneToOne() {
Expand Down