Position menububble relative to content-wrapper #1903
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Before: After: After scrolling: |
|
The only issue I see now would be that the menububble no longer overlays the menubar on the very first line of the rich workspace.
This seems to be due to the scroll overflow of the content-wrapper and due to the fact that we don't have the upper margin to keep the rich workspace compact. |
|
Might be one of the things that tiptap has resolved on the v2 release as the new bubble menu component seems to dynamically align at the top or bottom of the selected text, depending on the available space: https://tiptap.dev/examples/menus |
|
Actually we can make use of ueberdosis/tiptap#459 it seems so we'd just need to either use top or bottom depending on if the menububble fits the available space to the menu bar. |
azul
force-pushed
the
azul/fix-1677-menububble-position
branch
2 times, most recently
from
ef6636a to
750fe80
Compare
in the viewersecond line
first line
in the workspace in filesfirst line
second line - slightly too high
I suspect the size of the |
azul
force-pushed
the
azul/fix-1677-menububble-position
branch
2 times, most recently
from
1a8f340 to
0b19101
Compare
Add a `position: relative` to `content-wrapper` to fix misalignment of the menububble. The menububble has an absolute position which is calculated by tiptap based on the position of the highlighted text. It is styled with `left` and `bottom` attributes. These are relative to the position of the `.content-wrapper`. Signed-off-by: Azul <azul@riseup.net>
For the rest of the text we keep the position above. Signed-off-by: Azul <azul@riseup.net>
In rich workspaces scrolling still made the menu-bubble render at the wrong place. The element that the absolute position of the menu-bubble is relative to needs to grow with the text so tiptap can position the menu-bubble correctly. Now we also do not need the margin bottom anymore. Signed-off-by: Azul <azul@riseup.net>
Signed-off-by: Julius Härtl <jus@bitgrid.net>
juliusknorr
force-pushed
the
azul/fix-1677-menububble-position
branch
from
0b19101 to
8dddfc7
Compare
juliusknorr
approved these changes
Nov 5, 2021
|
Took the liberty to push a lint fix and rebase ;) |
|
/backport to stable22 |
|
/backport to stable21 |
|
The backport to stable22 failed. Please do this backport manually. |
|
The backport to stable21 failed. Please do this backport manually. |
|
/backport to stable21 |
|
/backport to stable22 |
|
The backport to stable21 failed. Please do this backport manually. |
|
The backport to stable22 failed. Please do this backport manually. |
This was referenced Dec 20, 2021
azul
added a commit
that referenced
this pull request
Jan 4, 2022
* 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.
azul
added a commit
that referenced
this pull request
Jan 4, 2022
* 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>
azul
added a commit
that referenced
this pull request
Jan 5, 2022
* 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>
azul
added a commit
that referenced
this pull request
Jan 5, 2022
* 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>
azul
added a commit
that referenced
this pull request
Jan 10, 2022
* 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>
max-nextcloud
added
backported
julien-nc
pushed a commit
that referenced
this pull request
Jan 13, 2022
* 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>
julien-nc
pushed a commit
that referenced
this pull request
Jan 13, 2022
* 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>
max-nextcloud
pushed a commit
that referenced
this pull request
Jan 18, 2022
* 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>
max-nextcloud
pushed a commit
that referenced
this pull request
Jan 19, 2022
* 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>
This was referenced Jan 19, 2022
Closed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Add a
position: relativetocontent-wrapperto fix misalignment of the menububble.
The menububble has an absolute position
which is calculated by tiptap
based on the position of the highlighted text.
It is styled with
leftandbottomattributes.These are relative to the position of the
.content-wrapper.