From 390c393b0cae45032e8304bee33679b2b1f00e1b Mon Sep 17 00:00:00 2001 From: VikingKong Date: Tue, 8 Nov 2022 22:41:21 +0300 Subject: [PATCH] Implement feed and article panes and j/k keybindings --- App.py | 68 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ app.css | 37 +++++++++++++++++++++++++++++++ 2 files changed, 105 insertions(+) create mode 100644 App.py create mode 100644 app.css diff --git a/App.py b/App.py new file mode 100644 index 0000000..c800b61 --- /dev/null +++ b/App.py @@ -0,0 +1,68 @@ +from textual.containers import Container, Vertical +from textual.app import ComposeResult, App +from textual.widgets import Static, Header + + +class FeedPane(Vertical): + def __init__(self, content): + super().__init__() + self.content = content + self.id = "feed-pane" + + def compose(self): + yield Vertical(*self.content, id="left-container") + + +class FeedItem(Static): + def __init__(self, content, id): + super().__init__() + self.content = content + self.id = "feed-" + str(id) + if id == 0: + self.set_styles("color: blue;") + + def on_mount(self): + self.update(self.content) + self.on_event + + def on_click(self): + self.update("x") + + +class GUI(App): + CSS_PATH = "app.css" + + def __init__(self): + super().__init__() + self.i = 0 + + def on_key(self, event): + item = self.query(FeedItem)[self.i] + item.set_styles("color: auto;") + if event.key == "j": + self.i += 1 + elif event.key == "k": + self.i -= 1 + else: + pass + item = self.query(FeedItem)[self.i] + item.set_styles("color: blue;") + + def compose(self) -> ComposeResult: + yield Header() + yield Container( + FeedPane([FeedItem(f"Feed# {number}", number) for number in range(15)]), + Vertical( + *[Static("Horizontally"), + Static("Positioned"), + Static("Children"), + Static("Here")], + id="right-pane", + ), + id="app-grid", + ) + + +if __name__ == "__main__": + app = GUI() + app.run() diff --git a/app.css b/app.css new file mode 100644 index 0000000..450f11a --- /dev/null +++ b/app.css @@ -0,0 +1,37 @@ +#app-grid { + layout: grid; + grid-size: 2; + grid-columns: 1fr 2fr; + grid-rows: 1fr; +} + +#left-container > Static { + background: $boost; + margin-bottom: 1; +} + +#feed-active { + color: blue; + border: dodgerblue; +} + +#feed-nonactive { + color: auto; +} + +#feed-pane { + row-span: 1; + background: $panel; + border: dodgerblue; +} + +#right-pane { + background: $panel; + border: dodgerblue; +} + +#right-pane > Static { + margin-bottom: 1; + background: $boost; +} +