From 765d674c8cbb62bb5528aba0f8b799d1108f6ae9 Mon Sep 17 00:00:00 2001 From: sbkelley Date: Wed, 3 Dec 2025 00:25:11 -0500 Subject: [PATCH] quite a lot of CSS updates --- src/obs_ctl/app.py | 4 +- src/obs_ctl/data/layout.tcss | 147 +++++++++++------- src/obs_ctl/interface/element/bool_control.py | 20 +-- src/obs_ctl/interface/element/text_readout.py | 12 +- .../interface/molecule/record_controls.py | 12 +- .../settings_block/pane/obs_settings.py | 29 ++-- .../molecule/settings_block/settings_block.py | 1 - .../interface/molecule/stats_display.py | 41 ++--- 8 files changed, 132 insertions(+), 134 deletions(-) diff --git a/src/obs_ctl/app.py b/src/obs_ctl/app.py index d6ff1e3..092e877 100644 --- a/src/obs_ctl/app.py +++ b/src/obs_ctl/app.py @@ -3,7 +3,7 @@ from logging import getLogger from textual import on from textual.app import App -from textual.containers import Horizontal, ScrollableContainer +from textual.containers import HorizontalGroup, ScrollableContainer from textual.widgets import Footer, Header # need to import log to initalize logging @@ -21,7 +21,7 @@ class OBSCtlApp(App): yield Footer() yield obs.API(1, id="api") logger.debug("Composing OBSCtlApp") - with Horizontal(id="top_block", classes="block"): + with HorizontalGroup(id="top_block", classes="block"): yield RecordControls(id="record_controls", classes="section") yield SettingsBlock(id="settings_container", classes="section") yield StatsDisplay(id="stats_display", classes="section") diff --git a/src/obs_ctl/data/layout.tcss b/src/obs_ctl/data/layout.tcss index 7e0bb14..1dfc21d 100644 --- a/src/obs_ctl/data/layout.tcss +++ b/src/obs_ctl/data/layout.tcss @@ -1,67 +1,106 @@ -#top_block { - RecordControls { - Grid { +# ------ +# Layout +# ------ +#top_block { + height:3fr; + min-height:10; + max-height:30; + RecordControls { /** ScrollContainer */ + .record_controls--content { + height:10; + min-width:30; grid-size:2; - grid-rows:5; - min-height:10; } - .bool_control--light { - background:$panel; - text-align:center; - align:center bottom; - } - .bool_control--true_button { - width:1fr; - # height:1fr; - } - .bool_control--false_button { - width:1fr; - # height:1fr; - } - .record_controls--output_control { - background:$surface; - border:blank; - } - - .record_controls--obsws_control { - background:$background; - border:solid $primary; - } - } - SettingsBlock { - OBSSettings { - .obssettingspane--input { - width:1fr; - } - Grid { - grid-size:2 1; - grid-columns:21 1fr; - Label { - width:1fr; - text-align:right; - padding-right:1; - } - } + } + SettingsBlock { /** Container */ + .obs_settings_pane--content { + grid-size:2 1; + grid-columns:16 1fr; + min-width:36; } } } StatsDisplay { - Grid { - grid-size:4; - grid-rows:4; + height:5fr; + min-height:10; + max-height:30; + + .stats_display--content { + grid-size:12; min-height:8; + max-height:12; + min-width:77; + } + + .stats_display--top { + column-span:3; } - TextReadout { + + .stats_display--bottom { + column-span:4; + } +} + +# ---------- +# Aesthetics +# ---------- +RecordControls { + align:center middle; + border:solid $secondary; + padding:0 1; + .bool_control--light { + background:$panel; + align:center bottom; + } + + .record_controls--output_control { + background:$surface; + border:blank; + } + + .record_controls--obsws_control { + background:$background; border:solid $primary; - width:1fr; + } +} + +SettingsBlock { + border:solid $secondary; + padding:0 1; + .obs_settings_pane--scrollbox { background:$surface; - .text_readout--label { - height:1; - align:center middle; - } - .text_readout--text { - align:center middle; - } + border:solid $primary; + padding:0 1; + } + + .obs_settings_pane--label { + width:1fr; + text-align:right; + padding-right:1; + } + + .obs_settings_pane--input { + background:$panel; } } + +StatsDisplay { + align:center middle; + border:solid $secondary; + padding:1 2; +} + +TextReadout { + background:$surface; + border:solid $primary; + + .text_readout--readout { + align-horizontal:center; + background:$panel; + } + + .text_readout--label { + align-vertical:bottom; + } +} \ No newline at end of file diff --git a/src/obs_ctl/interface/element/bool_control.py b/src/obs_ctl/interface/element/bool_control.py index a07d7fd..3003204 100644 --- a/src/obs_ctl/interface/element/bool_control.py +++ b/src/obs_ctl/interface/element/bool_control.py @@ -39,21 +39,11 @@ class BoolControl(Container): """ DEFAULT_CSS = """ - # .bool_control--light { - # background:$panel; - # text-align:center; - # align:center bottom; - # width:1fr; - # height:1; - # } - # .bool_control--true_button { - # width:1fr; - # height:1fr; - # } - # .bool_control--false_button { - # width:1fr; - # height:1fr; - # } + BoolControl { + Button { + width:1fr; + } + } """ COMPONENT_CLASSES = { "bool_control--light", diff --git a/src/obs_ctl/interface/element/text_readout.py b/src/obs_ctl/interface/element/text_readout.py index 13826c2..1b60115 100644 --- a/src/obs_ctl/interface/element/text_readout.py +++ b/src/obs_ctl/interface/element/text_readout.py @@ -14,16 +14,12 @@ class TextReadout(Container): # Component Classes text_readout--label text_readout--text - """ - DEFAULT_CSS = """ - # TextReadout { - # width:1fr; - # background:$surface; - # } + text_readout--readout """ COMPONENT_CLASSES = { "text_readout--label", "text_readout--text", + "text_readout--readout", } text = reactive("Text") label = reactive("Label") @@ -46,8 +42,8 @@ class TextReadout(Container): def compose(self): - yield Container(Label(self.label, id="label"), classes="text_readout--label") - yield Container(Label(self.text, id="text"), classes="text_readout--text") + yield Container(Label(self.label, id="label"), classes="text_readout--label text_readout--readout") + yield Container(Label(self.text, id="text"), classes="text_readout--text text_readout--readout") def watch_text(self, value: str): text: Label = self.query_exactly_one("#text") diff --git a/src/obs_ctl/interface/molecule/record_controls.py b/src/obs_ctl/interface/molecule/record_controls.py index 598dcdd..8e471af 100644 --- a/src/obs_ctl/interface/molecule/record_controls.py +++ b/src/obs_ctl/interface/molecule/record_controls.py @@ -29,15 +29,15 @@ class RecordControls(ScrollableContainer): |OBSWSDisconnected|Posted when obsws_disconnected is set False.||| """ DEFAULT_CSS = """ - /*Grid { - grid-size:2; - grid-rows:5; - }*/ + .record_controls--content { + height:auto; + } """ COMPONENT_CLASSES = { "record_controls--control", "record_controls--output_control", - "record_controls--obsws_control" + "record_controls--obsws_control", + "record_controls--content" } recording: reactive[bool] = reactive(False) paused: reactive[bool] = reactive(False) @@ -55,7 +55,7 @@ class RecordControls(ScrollableContainer): def compose(self): - with Grid(): + with Grid(classes="record_controls--content"): yield BoolControl( False, label="OBS WS", diff --git a/src/obs_ctl/interface/molecule/settings_block/pane/obs_settings.py b/src/obs_ctl/interface/molecule/settings_block/pane/obs_settings.py index 6bd6bc5..14436ad 100644 --- a/src/obs_ctl/interface/molecule/settings_block/pane/obs_settings.py +++ b/src/obs_ctl/interface/molecule/settings_block/pane/obs_settings.py @@ -1,4 +1,4 @@ -from textual.containers import VerticalScroll, Grid +from textual.containers import ScrollableContainer, Grid from textual.message import Message from textual.reactive import reactive from textual.widgets import Label, Input, TabPane @@ -8,22 +8,11 @@ from logging import getLogger logger = getLogger(__name__) class OBSSettings(TabPane): - DEFAULT_CSS = """ - # .obssettingspane--input { - # width:1fr; - # } - # Grid { - # grid-size:2 1; - # grid-columns:21 1fr; - # Label { - # width:1fr; - # text-align:right; - # padding-right:1; - # } - # } - """ COMPONENT_CLASSES = { - "obssettingspane--input", + "obs_settings_pane--input", + "obs_settings_pane--output", + "obs_settings_pane--content", + "obs_settings_pane--scrollbox" } record_path: reactive[str] = reactive("") @@ -41,10 +30,10 @@ class OBSSettings(TabPane): def compose(self): - with VerticalScroll(): - with Grid(): - yield Label("Record path:") - yield Input("path", id="input_record_path", classes="obssettingspane--input", compact=True) + with ScrollableContainer(classes="obs_settings_pane--scrollbox"): + with Grid(classes="obs_settings_pane--content"): + yield Label("Record path:", classes="obs_settings_pane--label") + yield Input("path", id="input_record_path", classes="obs_settings_pane--input", compact=True) def on_input_submitted(self, event:Input.Submitted): diff --git a/src/obs_ctl/interface/molecule/settings_block/settings_block.py b/src/obs_ctl/interface/molecule/settings_block/settings_block.py index 581405e..3ef0750 100644 --- a/src/obs_ctl/interface/molecule/settings_block/settings_block.py +++ b/src/obs_ctl/interface/molecule/settings_block/settings_block.py @@ -5,7 +5,6 @@ from . import pane class SettingsBlock(Container): - def compose(self): with TabbedContent(classes="settings_block--tabbed-content"): yield pane.OBSSettings(id="settings-content", classes="settings_block--obs_settings") diff --git a/src/obs_ctl/interface/molecule/stats_display.py b/src/obs_ctl/interface/molecule/stats_display.py index de80ec1..9efb571 100644 --- a/src/obs_ctl/interface/molecule/stats_display.py +++ b/src/obs_ctl/interface/molecule/stats_display.py @@ -17,25 +17,7 @@ class StatsDisplay(ScrollableContainer): stats_display--dropped_ren stats_display--dropped_enc """ - DEFAULT_CSS = """ - /* StatsDisplay { - Grid { - grid-size:4; - grid-rows:4; - min-height:8; - } - TextReadout { - border:solid $primary; - .text_readout--label { - height:1; - align:center middle; - } - .text_readout--text { - align:center middle; - } - } - }*/ - """ + COMPONENT_CLASSES = { "stats_display--cpu", "stats_display--ram", @@ -43,19 +25,22 @@ class StatsDisplay(ScrollableContainer): "stats_display--fps", "stats_display--dropped_net", "stats_display--droped_ren", - "stats-display--dropped_enc" + "stats_display--dropped_enc", + "stats_display--bottom", + "stats_display--top", + "stats_display--content" } def compose(self): - with Grid(): - yield TextReadout("CPU Usage", "-.-%", id="cpu", classes="stats_display--cpu") - yield TextReadout("RAM Usage", "-b", id="ram", classes="stats_display--ram") - yield TextReadout("Time 'til Full", "N/A", id="hdd", classes="stats_display--hdd") - yield TextReadout("FPS", "--.--", id="fps", classes="stats_display-fps") - yield TextReadout("Netwrk frames dropped", "-/- (-.-%)", id="dropped_net", classes="stats_display--dropped_net") - yield TextReadout("Render frames dropped", "-/- (-.-%)", id="dropped_ren", classes="stats_display--dropped_ren") - yield TextReadout("Encdng frames dropped", "-/- (-.-%)", id="dropped_enc", classes="stats_display--dropped_enc") + with Grid(classes="stats_display--content"): + yield TextReadout("CPU Usage", "-.-%", id="cpu", classes="stats_display--cpu stats_display--top") + yield TextReadout("RAM Usage", "-b", id="ram", classes="stats_display--ram stats_display--top") + yield TextReadout("ETA (disk)", "N/A", id="hdd", classes="stats_display--hdd stats_display--top") + yield TextReadout("FPS", "--.--", id="fps", classes="stats_display-fps stats_display--top") + yield TextReadout("Netwrk frames dropped", "-/- (-.-%)", id="dropped_net", classes="stats_display--dropped_net stats_display--bottom") + yield TextReadout("Render frames dropped", "-/- (-.-%)", id="dropped_ren", classes="stats_display--dropped_ren stats_display--bottom") + yield TextReadout("Encdng frames dropped", "-/- (-.-%)", id="dropped_enc", classes="stats_display--dropped_enc stats_display--bottom") def update_text_readouts(self, obs_stats: obs.OBSStats): -- 2.47.3