style: align TUI layout and borders closer to original mockup plan
This commit is contained in:
parent
78bac31c5f
commit
61493533c0
1 changed files with 79 additions and 45 deletions
|
|
@ -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,22 +105,28 @@ 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")
|
|
||||||
video_input = Input(
|
with Horizontal(classes="form-row"):
|
||||||
placeholder="Enter path to video file...",
|
yield Label("Video file:", classes="form-label")
|
||||||
id="video-input",
|
video_input = Input(
|
||||||
)
|
placeholder="Enter path to video...",
|
||||||
yield video_input
|
id="video-input",
|
||||||
yield PathAutoComplete(target=video_input, path=".")
|
)
|
||||||
yield Label("Frame interval:", classes="field-label")
|
yield video_input
|
||||||
yield Input(
|
yield PathAutoComplete(target=video_input, path=".")
|
||||||
value="30",
|
|
||||||
placeholder="Frame interval",
|
with Horizontal(classes="form-row"):
|
||||||
id="interval-input",
|
yield Label("Frame interval:", classes="form-label")
|
||||||
type="integer",
|
yield Input(
|
||||||
)
|
value="30",
|
||||||
|
id="interval-input",
|
||||||
|
type="integer",
|
||||||
|
)
|
||||||
|
|
||||||
yield Label("", id="error-label")
|
yield Label("", id="error-label")
|
||||||
yield Button("Start", id="start-btn", variant="primary")
|
|
||||||
|
with Horizontal(id="button-container"):
|
||||||
|
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:
|
||||||
if event.button.id == "start-btn":
|
if event.button.id == "start-btn":
|
||||||
|
|
@ -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,18 +450,19 @@ class FaceSelectionScreen(Screen):
|
||||||
variant="default",
|
variant="default",
|
||||||
classes="view-btn",
|
classes="view-btn",
|
||||||
)
|
)
|
||||||
yield Label("Blur method:", id="blur-method-label")
|
with Horizontal(id="blur-method-row"):
|
||||||
yield Select(
|
yield Label("Blur method:", id="blur-method-label")
|
||||||
[
|
yield Select(
|
||||||
("Gaussian", "gaussian"),
|
[
|
||||||
("Pixelate", "pixelate"),
|
("Gaussian", "gaussian"),
|
||||||
("Blackout", "blackout"),
|
("Pixelate", "pixelate"),
|
||||||
("Elliptical", "elliptical"),
|
("Blackout", "blackout"),
|
||||||
("Median", "median"),
|
("Elliptical", "elliptical"),
|
||||||
],
|
("Median", "median"),
|
||||||
value="gaussian",
|
],
|
||||||
id="blur-method",
|
value="gaussian",
|
||||||
)
|
id="blur-method",
|
||||||
|
)
|
||||||
with Horizontal(id="buttons-row"):
|
with Horizontal(id="buttons-row"):
|
||||||
yield Button("Back", id="back-btn")
|
yield Button("Back", id="back-btn")
|
||||||
yield Button(
|
yield Button(
|
||||||
|
|
@ -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)
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue