-
Notifications
You must be signed in to change notification settings - Fork 111
fix: scroll for outline #3999
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.
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
fix: scroll for outline #3999
Conversation
mejo-
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice, thanks for looking into this. Could we get rid of the horizontal scrollbar in cases where it's not necessary?
1 failed and 2 flaky tests on run #9370 โ๏ธDetails:
|
|||||||||||||||||||||||||||||||||
| Test | Artifacts | |
|---|---|---|
| Sync > recovers from a lost connection |
Output
Screenshots
|
|
ย sync.spec.js โข 1 flaky test
| Test | Artifacts | |
|---|---|---|
| Sync > saves the actual file and document state |
Output
Screenshots
|
|
ย share.spec.js โข 1 flaky test
| Test | Artifacts | |
|---|---|---|
| Open test.md in viewer > Share a file with download disabled shows an error |
Output
Screenshots
|
|
This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.
|
@mejo- I got rid of the horizontal scrollbar. |
74af41a to
1a4b9c7
Compare
15af1a1 to
bb1942d
Compare
|
@juliushaertl @mejo- Please check again. |
bb1942d to
a50a0dc
Compare
mejo-
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Dear @luka-nextcloud,
I see several problems with the PR as it is right now:
max-height: calc(100% - 100px)works only in Viewer, not in Collectives (where we have an extra title bar of 60px height).padding-bottom: 100pxin.editor-outlineseems like the wrong approach to me..editor--outline__headeris not sticky.- Width of the
.editor--toc__itemitems still grows bigger than the container width.
Here's the local changes that fixed those issues for me, maybe you can take a look and apply them if the seem sensible to you:
diff --git a/src/components/Editor/EditorOutline.vue b/src/components/Editor/EditorOutline.vue
index 36915b224..373913634 100644
--- a/src/components/Editor/EditorOutline.vue
+++ b/src/components/Editor/EditorOutline.vue
@@ -55,10 +55,11 @@ export default {
<style lang="scss" scoped>
.editor--outline {
width: 300px;
- padding: 0 10px 100px 10px;
+ padding: 0 10px 10px 10px;
position: fixed;
overflow: auto;
- max-height: calc(100% - 100px);
+ // 204px = 50px nc header + 60px collectives titlebar + 44px menubar + 50px bottom margin
+ max-height: calc(100% - 204px);
&-mobile {
box-shadow: 8px 0 17px -19px var(--color-box-shadow);
@@ -69,6 +70,9 @@ export default {
&__header {
margin: 0;
position: sticky;
+ top: 0;
+ z-index: 1;
+ background-color: var(--color-main-background);
padding: 0.6em 0.6em 0.6em 0;
display: flex;
align-items: center;
diff --git a/src/components/Editor/TableOfContents.vue b/src/components/Editor/TableOfContents.vue
index 064ba42bc..3f860ac9d 100644
--- a/src/components/Editor/TableOfContents.vue
+++ b/src/components/Editor/TableOfContents.vue
@@ -90,6 +90,7 @@ export default {
overflow: hidden;
white-space: nowrap;
animation: initialPadding calc(var(--animation-duration) * 2);
+ width: calc(100% - var(--padding-left));
a:hover {
color: var(--color-primary-hover);|
Please note that one problem remains even with my changes: the |
|
This seems trickier than expected. I was just thinking if it would make sense to move the table of content component outside of the .editor-content-wrapper to be able to align it with the top element of text but this could become even more complex than having a resize observer on the #editor-container and adapt it dynamically to that height. One further case where this will not work though is with the current scroll behaviour within deck as we use a scroll container outside of text there. I'm unsure about how we best proceed here, so maybe we discuss this in our call next week. |
Signed-off-by: Luka Trovic <[email protected]>
06d0047 to
b741f92
Compare
|
After discussing this again with @juliushaertl, we agreed to merge the PR as it is for now. At least it fixes the issue for Text in Viewer, standalone and in Collectives. |
mejo-
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@luka-nextcloud I took the liberty to rebase and squash the commits.
Signed-off-by: Jonas <[email protected]>
462c208 to
e5f57db
Compare
|
/compile |
Signed-off-by: nextcloud-command <[email protected]>
|
/backport b741f92 to stable26 |
|
/backport b741f92 to stable25 |
|
/backport /b741f9237e4b5b1335fd02d33b333e366703e57e,e5f57db008e73f40a7b00db5ff57bf2dcc7753cc to stable26 |
๐ Summary
๐ผ๏ธ Screenshots
๐ง TODO
๐ Checklist
npm run lint/npm run stylelint/composer run cs:check)