Replace tabs with bordered titled sections in settings screen

Use border-title panels (General, Email Notifications, SSH, Web
Dashboard) instead of TabbedContent for a cleaner visual layout.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
shuki
2026-03-07 06:07:23 +02:00
parent 350c2feb54
commit d941f1e644
2 changed files with 69 additions and 70 deletions

View File

@@ -86,25 +86,19 @@ Select {
margin: 0;
}
#settings-screen TabbedContent {
height: 1fr;
}
#settings-screen ContentSwitcher {
.settings-section {
height: auto;
border: round $accent;
padding: 1;
padding: 1 2;
margin: 0 0 1 0;
}
#settings-screen TabPane {
padding: 0 1;
.settings-section Static {
margin: 0;
}
#settings-screen TabPane Static {
margin: 0 0 0 0;
}
#settings-screen TabPane Input,
#settings-screen TabPane Select {
.settings-section Input,
.settings-section Select {
margin: 0 0 1 0;
}

View File

@@ -1,6 +1,6 @@
from textual.app import ComposeResult
from textual.screen import Screen
from textual.widgets import Header, Footer, Static, Button, Input, Select, TabbedContent, TabPane
from textual.widgets import Header, Footer, Static, Button, Input, Select
from tui.widgets.header import GnizaHeader as Header # noqa: F811
from textual.containers import Vertical, Horizontal
from textual import work
@@ -22,8 +22,7 @@ class SettingsScreen(Screen):
with Horizontal(classes="screen-with-docs"):
with Vertical(id="settings-screen"):
yield Static("Settings", id="screen-title")
with TabbedContent():
with TabPane("General", id="tab-general"):
with Vertical(classes="settings-section", id="section-general"):
yield Static("Log Level:")
yield Select(
[("Debug", "debug"), ("Info", "info"), ("Warning", "warn"), ("Error", "error")],
@@ -40,7 +39,7 @@ class SettingsScreen(Screen):
yield Input(value=settings.disk_usage_threshold, id="set-diskthreshold")
yield Static("Extra rsync options:")
yield Input(value=settings.rsync_extra_opts, id="set-rsyncopts")
with TabPane("Email", id="tab-email"):
with Vertical(classes="settings-section", id="section-email"):
yield Static("Notification Email:")
yield Input(value=settings.notify_email, id="set-email")
yield Static("Notify On:")
@@ -65,12 +64,12 @@ class SettingsScreen(Screen):
id="set-smtpsec",
value=settings.smtp_security,
)
with TabPane("SSH", id="tab-ssh"):
with Vertical(classes="settings-section", id="section-ssh"):
yield Static("SSH Timeout:")
yield Input(value=settings.ssh_timeout, id="set-sshtimeout")
yield Static("SSH Retries:")
yield Input(value=settings.ssh_retries, id="set-sshretries")
with TabPane("Web Dashboard", id="tab-web"):
with Vertical(classes="settings-section", id="section-web"):
yield Static("Port:")
yield Input(value=settings.web_port, id="set-web-port")
yield Static("Host:")
@@ -84,6 +83,12 @@ class SettingsScreen(Screen):
yield DocsPanel.for_screen("settings-screen")
yield Footer()
def on_mount(self) -> None:
self.query_one("#section-general").border_title = "General"
self.query_one("#section-email").border_title = "Email Notifications"
self.query_one("#section-ssh").border_title = "SSH"
self.query_one("#section-web").border_title = "Web Dashboard"
def on_button_pressed(self, event: Button.Pressed) -> None:
if event.button.id == "btn-back":
self.app.pop_screen()