diff options
| author | Azul <azul@riseup.net> | 2022-01-10 14:29:36 +0300 |
|---|---|---|
| committer | Julien Veyssier <eneiluj@posteo.net> | 2022-01-13 16:23:54 +0300 |
| commit | 2b73d23537d6a5f8bf54a20a6815bbca1159c3a0 (patch) | |
| tree | b9e563c84e38730536e96678350fb502ae48036b /src | |
| parent | 9a07509183d2c368a77c771a44cb0884e9d7b3b5 (diff) | |
hand the content wrapper to the menububble explicitly
Signed-off-by: Azul <azul@riseup.net>
Signed-off-by: Julien Veyssier <eneiluj@posteo.net>
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/EditorWrapper.vue | 18 | ||||
| -rw-r--r-- | src/components/MenuBubble.vue | 10 |
2 files changed, 22 insertions, 6 deletions
diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue index d37bfd3a0..26b59deea 100644 --- a/src/components/EditorWrapper.vue +++ b/src/components/EditorWrapper.vue @@ -22,7 +22,7 @@ <template> <div id="editor-container"> - <div v-if="currentSession && active" class="document-status"> + <div v-if="displayed" class="document-status"> <p v-if="idle" class="msg"> {{ t('text', 'Document idle for {timeout} minutes, click to continue editing', { timeout: IDLE_TIMEOUT }) }} <a class="button primary" @click="reconnect">{{ t('text', 'Reconnect') }}</a> </p> @@ -33,7 +33,7 @@ {{ t('text', 'File could not be loaded. Please check your internet connection.') }} <a class="button primary" @click="reconnect">{{ t('text', 'Reconnect') }}</a> </p> </div> - <div v-if="currentSession && active" id="editor-wrapper" :class="{'has-conflicts': hasSyncCollission, 'icon-loading': !initialLoading && !hasConnectionIssue, 'richEditor': isRichEditor, 'show-color-annotations': showAuthorAnnotations}"> + <div v-if="displayed" id="editor-wrapper" :class="{'has-conflicts': hasSyncCollission, 'icon-loading': !initialLoading && !hasConnectionIssue, 'richEditor': isRichEditor, 'show-color-annotations': showAuthorAnnotations}"> <div id="editor"> <MenuBar v-if="!syncError && !readOnly" ref="menubar" @@ -45,7 +45,7 @@ :is-public="isPublic" :autohide="autohide" @show-help="showHelp"> - <div v-if="currentSession && active" id="editor-session-list"> + <div id="editor-session-list"> <div v-tooltip="lastSavedStatusTooltip" class="save-status" :class="lastSavedStatusClass"> {{ lastSavedStatus }} </div> @@ -55,9 +55,10 @@ </div> <slot name="header" /> </MenuBar> - <div ref="wrapper" class="content-wrapper"> + <div ref="contentWrapper" class="content-wrapper"> <MenuBubble v-if="!readOnly && isRichEditor" :editor="tiptap" + :content-wrapper="contentWrapper" :file-path="relativePath" /> <EditorContent v-show="initialLoading" class="editor__content" @@ -177,6 +178,7 @@ export default { saveStatusPolling: null, displayHelp: false, + contentWrapper: null, } }, computed: { @@ -236,11 +238,19 @@ export default { ? this.relativePath.split('/').slice(0, -1).join('/') : '/' }, + displayed() { + return this.currentSession && this.active + }, }, watch: { lastSavedStatus() { this.$refs.menubar && this.$refs.menubar.redrawMenuBar() }, + displayed() { + this.$nextTick(() => { + this.contentWrapper = this.$refs.contentWrapper + }) + }, }, mounted() { if (this.active && (this.hasDocumentParameters)) { diff --git a/src/components/MenuBubble.vue b/src/components/MenuBubble.vue index 9343d72c1..e7a893f45 100644 --- a/src/components/MenuBubble.vue +++ b/src/components/MenuBubble.vue @@ -94,6 +94,12 @@ export default { required: false, default: null, }, + // used to calculate the position based on the scrollOffset + contentWrapper: { + type: Object, + required: false, + default: null, + }, filePath: { type: String, required: false, @@ -174,10 +180,10 @@ export default { command({ href: null }) }, bubblePosition(menu) { - const wrapper = this.$parent.$refs.wrapper const left = Math.max(this.minLeft, menu.left) + const offset = this.contentWrapper?.scrollTop || 0 return { - top: `${menu.top + wrapper.scrollTop + 5}px`, + top: `${menu.top + offset + 5}px`, left: `${left}px`, } }, |