[css][scrollbar gutter] Manage the scrollbar-gutter: stable CSS property
#501
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
olivierphi
force-pushed
the
css-add-scrollbar-gutter-property
branch
2 times, most recently
from
4b7b85f
to
6b5cf82
Compare
olivierphi
commented
May 12, 2022
| lorem = Text.from_markup( | ||
| """Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. """ | ||
| """Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. """ | ||
| lorem_short = """Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit liber a a a, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum.""" |
There was a problem hiding this comment.
just a tiny update to our dear "basic" sandbox: when we press "t" the top text is changed between a "short lorem" and a "long lorem", which allows us to test the layout engine with dynamically updated content - it works pretty well, out of the box! 👌
| @@ -135,9 +142,18 @@ async def on_key(self, event) -> None: | |||
| def key_d(self): | |||
| self.dark = not self.dark | |||
|
|
|||
| async def key_q(self): | |||
There was a problem hiding this comment.
just because I naturally always press "q" to quit 😅
| @@ -770,6 +771,18 @@ def process_align_vertical(self, name: str, tokens: list[Token]) -> None: | |||
| process_content_align_horizontal = process_align_horizontal | |||
| process_content_align_vertical = process_align_vertical | |||
|
|
|||
| def process_scrollbar_gutter(self, name: str, tokens: list[Token]) -> None: | |||
There was a problem hiding this comment.
it was interesting to see all the different steps of adding a new CSS property in Textual 🙂
| @@ -316,7 +316,7 @@ def replace_rules( | |||
| styles = node.styles | |||
| base_styles = styles.base | |||
|
|
|||
| # Styles currently used an new rules | |||
| # Styles currently used on new rules | |||
There was a problem hiding this comment.
quick typo fix as I was reading code here and there to try to understand how to add a new CSS property :-)
| @@ -493,6 +493,9 @@ def _arrange_container(self, region: Region) -> Region: | |||
| Region: The widget region minus scrollbars. | |||
| """ | |||
| show_vertical_scrollbar, show_horizontal_scrollbar = self.scrollbars_enabled | |||
| if self.styles.scrollbar_gutter == "stable": | |||
| # Let's _always_ reserve some space, whether the scrollbar is actually displayed or not: | |||
| show_vertical_scrollbar = True | |||
There was a problem hiding this comment.
...and that's the implementation itself! ✨
| "overflow_y,scrollbar_gutter,text_length,expected_text_widget_width,expects_vertical_scrollbar", | ||
| ( | ||
| # ------------------------------------------------ | ||
| # ----- Let's start with `overflow-y: auto`: |
There was a problem hiding this comment.
hopefully I've described these test cases well enough to make this test maintainable :-) 🤞
| @@ -38,6 +38,9 @@ def __init__( | |||
| log_color_system="256", | |||
| ) | |||
|
|
|||
| # Let's disable all features by default | |||
| self.features = frozenset() | |||
There was a problem hiding this comment.
let's make sure that by default our AppTest class has all features disabled - which should make integration tests faster in local environments, as they won't try to connect to the DevTools console even if TEXTUAL=devtools is enabled
…perty (only for vertical content though; we may see later on if we want to also apply that logic for horizontal scrolls?) https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter
olivierphi
force-pushed
the
css-add-scrollbar-gutter-property
branch
from
6b5cf82
to
685a2fb
Compare
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.
(only for vertical content though; we may see later on if we want to also apply that logic for horizontal scrolls?)
https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter
closes #421
Demo time!
A text box with and without scrollbar, by default: we can see the text's layout is changing at the end of the first line depending on whether or not the scrollbar must be displayed:
sandbox-basic-scrollbar-gutter.mp4
Now the same text box, with
scrollbar-gutter: stable: we can see that the text's layout is stable, with or without scrollbar:sandbox-basic-scrollbar-gutter-stable.mp4