style: align TUI layout and borders closer to original mockup plan

This commit is contained in:
fiatcode 2026-02-28 08:33:35 +07:00
parent 78bac31c5f
commit 61493533c0

View file

@ -47,8 +47,7 @@ class WelcomeScreen(Screen):
#app-container { #app-container {
width: 60; width: 60;
height: auto; height: auto;
max-height: 24; border: heavy $accent;
border: round $accent;
padding: 1 2; padding: 1 2;
} }
@ -56,32 +55,48 @@ class WelcomeScreen(Screen):
text-align: center; text-align: center;
color: $text; color: $text;
text-style: bold; text-style: bold;
margin-bottom: 2;
width: 100%;
}
.form-row {
height: 3;
align: left middle;
margin-bottom: 1; margin-bottom: 1;
} }
.form-label {
width: 16;
content-align: right middle;
margin-right: 1;
color: $text-muted;
}
#video-input { #video-input {
margin-bottom: 1; width: 1fr;
} }
#interval-input { #interval-input {
width: 20; width: 10;
margin-bottom: 1; }
#button-container {
width: 100%;
align: center middle;
margin-top: 1;
height: 3;
} }
#start-btn { #start-btn {
margin-top: 1; min-width: 16;
width: 100%;
} }
#error-label { #error-label {
color: $error; color: $error;
text-align: center; text-align: center;
display: none; display: none;
} width: 100%;
margin-top: 1;
.field-label {
margin-bottom: 0;
color: $text-muted;
} }
""" """
@ -90,21 +105,27 @@ class WelcomeScreen(Screen):
with Middle(): with Middle():
with Vertical(id="app-container"): with Vertical(id="app-container"):
yield Static(LOGO, id="logo") yield Static(LOGO, id="logo")
yield Label("Video file:", classes="field-label")
with Horizontal(classes="form-row"):
yield Label("Video file:", classes="form-label")
video_input = Input( video_input = Input(
placeholder="Enter path to video file...", placeholder="Enter path to video...",
id="video-input", id="video-input",
) )
yield video_input yield video_input
yield PathAutoComplete(target=video_input, path=".") yield PathAutoComplete(target=video_input, path=".")
yield Label("Frame interval:", classes="field-label")
with Horizontal(classes="form-row"):
yield Label("Frame interval:", classes="form-label")
yield Input( yield Input(
value="30", value="30",
placeholder="Frame interval",
id="interval-input", id="interval-input",
type="integer", type="integer",
) )
yield Label("", id="error-label") yield Label("", id="error-label")
with Horizontal(id="button-container"):
yield Button("Start", id="start-btn", variant="primary") yield Button("Start", id="start-btn", variant="primary")
def on_button_pressed(self, event: Button.Pressed) -> None: def on_button_pressed(self, event: Button.Pressed) -> None:
@ -151,7 +172,7 @@ class ProcessingScreen(Screen):
#processing-container { #processing-container {
width: 60; width: 60;
height: auto; height: auto;
border: round $accent; border: heavy $accent;
padding: 1 2; padding: 1 2;
} }
@ -193,7 +214,7 @@ class ProcessingScreen(Screen):
yield Label("", id="status-label") yield Label("", id="status-label")
def on_mount(self) -> None: def on_mount(self) -> None:
self.run_worker(self._process(), thread=True) self.run_worker(self._process, thread=True)
def _update_ui(self, phase: str, status: str, progress: float) -> None: def _update_ui(self, phase: str, status: str, progress: float) -> None:
"""Thread-safe UI update.""" """Thread-safe UI update."""
@ -319,7 +340,7 @@ class FaceSelectionScreen(Screen):
width: 65; width: 65;
height: auto; height: auto;
max-height: 30; max-height: 30;
border: round $accent; border: heavy $accent;
padding: 1 2; padding: 1 2;
} }
@ -349,11 +370,23 @@ class FaceSelectionScreen(Screen):
margin-left: 2; margin-left: 2;
} }
#blur-method-label { #blur-method-row {
height: 3;
align: left middle;
margin-top: 1; margin-top: 1;
}
#blur-method-label {
width: 16;
content-align: right middle;
margin-right: 1;
color: $text-muted; color: $text-muted;
} }
#blur-method {
width: 24;
}
#buttons-row { #buttons-row {
margin-top: 1; margin-top: 1;
height: 3; height: 3;
@ -417,6 +450,7 @@ class FaceSelectionScreen(Screen):
variant="default", variant="default",
classes="view-btn", classes="view-btn",
) )
with Horizontal(id="blur-method-row"):
yield Label("Blur method:", id="blur-method-label") yield Label("Blur method:", id="blur-method-label")
yield Select( yield Select(
[ [
@ -508,7 +542,7 @@ class EncodingScreen(Screen):
#encoding-container { #encoding-container {
width: 60; width: 60;
height: auto; height: auto;
border: round $accent; border: heavy $accent;
padding: 1 2; padding: 1 2;
} }
@ -568,7 +602,7 @@ class EncodingScreen(Screen):
yield Button("Done — Exit", id="done-btn", variant="success") yield Button("Done — Exit", id="done-btn", variant="success")
def on_mount(self) -> None: def on_mount(self) -> None:
self.run_worker(self._encode(), thread=True) self.run_worker(self._encode, thread=True)
def _update_ui(self, status: str, progress: float) -> None: def _update_ui(self, status: str, progress: float) -> None:
self.app.call_from_thread(self._do_update_ui, status, progress) self.app.call_from_thread(self._do_update_ui, status, progress)