diff options
| author | Azul <azul@riseup.net> | 2022-01-04 19:23:47 +0300 |
|---|---|---|
| committer | Max <max@nextcloud.com> | 2022-01-18 12:18:36 +0300 |
| commit | a956b076a48c31c145b559bbae24ddab3650f873 (patch) | |
| tree | b1b4dce37210abb88204db1fa538e67956c7f938 /src | |
| parent | 8dea6f6228fae79c0c850dbc74f67d841cc8afcd (diff) | |
fix: 2020 let heading menu overflow workspace
* roll back parts of #1903 that broke it again.
* Calculate top of menububble based on scrollHeight of content-wrapper.
* Always display menububble below selected line.
This will make it less likely to conflict with the menubar
or mobile copy and paste toolbars.
* Add cypress tests for the workspace.
Signed-off-by: Azul <azul@riseup.net>
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/EditorWrapper.vue | 2 | ||||
| -rw-r--r-- | src/components/MenuBubble.vue | 28 | ||||
| -rw-r--r-- | src/views/RichWorkspace.vue | 6 |
3 files changed, 26 insertions, 10 deletions
diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue index 31db2d7c2..950bfd3bc 100644 --- a/src/components/EditorWrapper.vue +++ b/src/components/EditorWrapper.vue @@ -52,7 +52,7 @@ </div> <slot name="header" /> </MenuBar> - <div class="content-wrapper"> + <div ref="wrapper" class="content-wrapper"> <MenuBubble v-if="!readOnly && isRichEditor" :editor="tiptap" :file-path="relativePath" /> diff --git a/src/components/MenuBubble.vue b/src/components/MenuBubble.vue index e187cc1e2..b17f0c9b9 100644 --- a/src/components/MenuBubble.vue +++ b/src/components/MenuBubble.vue @@ -96,6 +96,21 @@ export default { isUsingDirectEditing: loadState('text', 'directEditingToken', null) !== null, } }, + computed: { + + // Minimum left value for the bubble so that it stays inside the editor. + // the width of the menububble changes depending on its state + // during the bubblePosition calculation it has not been rendered yet. + // so we have to hard code the minimum. + minLeft() { + if (this.linkMenuIsActive || !this.editor.isActive.link()) { + return 150 + } else { + return 225 + } + }, + + }, methods: { showLinkMenu(attrs) { this.linkUrl = attrs.href @@ -145,15 +160,14 @@ export default { this.hideLinkMenu() }, bubblePosition(menu) { - // below the first line, above all others - const vertical = menu.top < 45 - ? { top: `${menu.top}px` } - : { bottom: `${menu.bottom}px` } + const wrapper = this.$parent.$refs.wrapper + const left = Math.max(this.minLeft, menu.left) return { - ...vertical, - left: `${menu.left}px`, + top: `${menu.top + wrapper.scrollTop + 5}px`, + left: `${left}px`, } }, + }, } </script> @@ -217,7 +231,7 @@ export default { font: inherit; border: none; background: transparent; - min-width: 150px; + min-width: 250px; } } </style> diff --git a/src/views/RichWorkspace.vue b/src/views/RichWorkspace.vue index 370699731..cd85a9bf1 100644 --- a/src/views/RichWorkspace.vue +++ b/src/views/RichWorkspace.vue @@ -213,12 +213,14 @@ export default { } #rich-workspace::v-deep #editor { - overflow: scroll !important; - max-height: calc(40vh - 40px); + overflow: visible !important; } #rich-workspace::v-deep .content-wrapper { + overflow: scroll !important; + max-height: calc(40vh - 50px); padding-left: 10px; + padding-bottom: 60px; /* ensure menububble fits below */ } #rich-workspace::v-deep #editor-wrapper .ProseMirror { |