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; margin: 0;
} }
#settings-screen TabbedContent { .settings-section {
height: 1fr; height: auto;
}
#settings-screen ContentSwitcher {
border: round $accent; border: round $accent;
padding: 1; padding: 1 2;
margin: 0 0 1 0;
} }
#settings-screen TabPane { .settings-section Static {
padding: 0 1; margin: 0;
} }
#settings-screen TabPane Static { .settings-section Input,
margin: 0 0 0 0; .settings-section Select {
}
#settings-screen TabPane Input,
#settings-screen TabPane Select {
margin: 0 0 1 0; margin: 0 0 1 0;
} }

View File

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