mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
dev sandbox
This commit is contained in:
33
sandbox/dev_sandbox.py
Normal file
33
sandbox/dev_sandbox.py
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
from rich.console import RenderableType
|
||||||
|
from rich.panel import Panel
|
||||||
|
|
||||||
|
from textual.app import App
|
||||||
|
from textual.widget import Widget
|
||||||
|
|
||||||
|
|
||||||
|
class PanelWidget(Widget):
|
||||||
|
def render(self) -> RenderableType:
|
||||||
|
return Panel("hello world!", title="Title")
|
||||||
|
|
||||||
|
|
||||||
|
class BasicApp(App):
|
||||||
|
"""Sandbox application used for testing/development by Textual developers"""
|
||||||
|
|
||||||
|
def on_load(self):
|
||||||
|
"""Bind keys here."""
|
||||||
|
self.bind("tab", "toggle_class('#sidebar', '-active')")
|
||||||
|
self.bind("a", "toggle_class('#header', '-visible')")
|
||||||
|
self.bind("c", "toggle_class('#content', '-content-visible')")
|
||||||
|
self.bind("d", "toggle_class('#footer', 'dim')")
|
||||||
|
|
||||||
|
def on_mount(self):
|
||||||
|
"""Build layout here."""
|
||||||
|
self.mount(
|
||||||
|
header=Widget(),
|
||||||
|
content=PanelWidget(),
|
||||||
|
footer=Widget(),
|
||||||
|
sidebar=Widget(),
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
BasicApp.run(css_file="dev_sandbox.scss", watch_css=True, log="textual.log")
|
||||||
63
sandbox/dev_sandbox.scss
Normal file
63
sandbox/dev_sandbox.scss
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
/* CSS file for dev_sandbox.py */
|
||||||
|
|
||||||
|
$text: #f0f0f0;
|
||||||
|
$primary: #021720;
|
||||||
|
$secondary:#95d52a;
|
||||||
|
$background: #262626;
|
||||||
|
|
||||||
|
$primary-style: $text on $background;
|
||||||
|
$animation-speed: 500ms;
|
||||||
|
$animation: offset $animation-speed in_out_cubic;
|
||||||
|
|
||||||
|
App > View {
|
||||||
|
docks: side=left/1;
|
||||||
|
text: on $background;
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget:hover {
|
||||||
|
outline: heavy;
|
||||||
|
text: bold !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar {
|
||||||
|
text: $primary-style;
|
||||||
|
dock: side;
|
||||||
|
width: 30;
|
||||||
|
offset-x: -100%;
|
||||||
|
transition: $animation;
|
||||||
|
border-right: outer $secondary;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar.-active {
|
||||||
|
offset-x: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header {
|
||||||
|
text: $text on $primary;
|
||||||
|
height: 3;
|
||||||
|
border-bottom: hkey $secondary;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header.-visible {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content {
|
||||||
|
text: $text on $background;
|
||||||
|
offset-y: -3;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content.-content-visible {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer {
|
||||||
|
opacity: 1;
|
||||||
|
text: $text on $primary;
|
||||||
|
height: 3;
|
||||||
|
border-top: hkey $secondary;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer.dim {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user