Scrolling nested containers (#538)

* Scrolling nested containers

* Return boolean if any scrolling occurred in any descendant in scroll_to_widget
This commit is contained in:
darrenburns
2022-06-08 16:20:53 +01:00
committed by GitHub
parent 0438a6b78e
commit 7366421635
3 changed files with 65 additions and 44 deletions

View File

@@ -42,7 +42,7 @@ App > Screen {
background: $primary-background-darken-2;
color: $text-primary-darken-2 ;
border-right: outer $primary-darken-3;
content-align: center middle;
content-align: center middle;
}
#sidebar .user {
@@ -71,14 +71,13 @@ App > Screen {
color: $text-background;
background: $background;
layout: vertical;
overflow-y: scroll;
overflow-y: scroll;
}
Tweet {
height: 12;
width: 80;
margin: 1 3;
background: $panel;
color: $text-panel;
@@ -106,9 +105,8 @@ Tweet {
height: 34;
width: 100%;
}
}
TweetHeader {
height:1;
@@ -136,12 +134,12 @@ Tweet.scroll-horizontal TweetBody {
/* border-top: hidden $accent-darken-3; */
border: tall $accent-darken-2;
/* border-left: tall $accent-darken-1; */
/* padding: 1 0 0 0 ; */
transition: background 200ms in_out_cubic, color 300ms in_out_cubic;
}
.button:hover {
@@ -151,10 +149,10 @@ Tweet.scroll-horizontal TweetBody {
height: 3;
border: tall $accent-darken-1;
/* border-left: tall $accent-darken-3; */
}
#footer {
@@ -194,11 +192,11 @@ Error {
background: $error;
color: $text-error;
border-top: hkey $error-darken-2;
border-bottom: hkey $error-darken-2;
border-bottom: hkey $error-darken-2;
margin: 1 3;
text-style: bold;
align-horizontal: center;
align-horizontal: center;
}
Warning {
@@ -207,7 +205,7 @@ Warning {
background: $warning;
color: $text-warning-fade-1;
border-top: hkey $warning-darken-2;
border-bottom: hkey $warning-darken-2;
border-bottom: hkey $warning-darken-2;
margin: 1 2;
text-style: bold;
align-horizontal: center;
@@ -215,12 +213,12 @@ Warning {
Success {
width: 80;
height:3;
height:3;
box-sizing: border-box;
background: $success-lighten-3;
color: $text-success-lighten-3-fade-1;
border-top: hkey $success;
border-bottom: hkey $success;
border-bottom: hkey $success;
margin: 1 2;
text-style: bold;
align-horizontal: center;

View File

@@ -100,6 +100,8 @@ class BasicApp(App, css_path="basic.css"):
def on_mount(self):
"""Build layout here."""
self.scroll_to_target = Tweet(TweetBody())
self.mount(
header=Static(
Text.from_markup(
@@ -110,6 +112,7 @@ class BasicApp(App, css_path="basic.css"):
Tweet(TweetBody()),
Widget(
Static(Syntax(CODE, "python"), classes="code"),
self.scroll_to_target,
classes="scrollable",
),
Error(),
@@ -150,6 +153,9 @@ class BasicApp(App, css_path="basic.css"):
tweet_body.short_lorem = not tweet_body.short_lorem
tweet_body.refresh(layout=True)
def key_v(self):
self.get_child(id="content").scroll_to_widget(self.scroll_to_target)
app = BasicApp()