phg/hosts
0
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

Refactor entry details and edit forms: enhance layout with section titles and consistent styling for improved clarity and usability.

Browse source
This commit is contained in:
Philip Henning 2025-08-17 19:13:31 +02:00
parent de5acd4dad
commit 6171e0ca0b
2 changed files with 64 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

89
src/hosts/tui/app.py
View file

@ -93,40 +93,69 @@ class HostsManagerApp(App):
right_pane.border_title = "Entry Details" right_pane.border_title = "Entry Details"
# Details display form (disabled inputs) # Details display form (disabled inputs)
with Vertical(id="entry-details-display"): with Vertical(id="entry-details-display", classes="entry-form"):
yield Label("IP Address:") with Vertical(classes="default-section section-no-top-margin") as ip_address:
yield Input( ip_address.border_title = "IP Address"
placeholder="No entry selected", yield Input(
id="details-ip-input", placeholder="No entry selected",
disabled=True, id="details-ip-input",
) disabled=True,
yield Label("Hostnames (comma-separated):") classes="default-input",
yield Input( )
placeholder="No entry selected",
id="details-hostname-input", with Vertical(classes="default-section") as hostnames:
disabled=True, hostnames.border_title = "Hostnames (comma-separated)"
) yield Input(
yield Label("Comment:") placeholder="No entry selected",
yield Input( id="details-hostname-input",
placeholder="No entry selected", disabled=True,
id="details-comment-input", classes="default-input",
disabled=True, )
)
yield Checkbox( with Vertical(classes="default-section") as comment:
"Active", id="details-active-checkbox", disabled=True comment.border_title = "Comment:"
yield Input(
placeholder="No entry selected",
id="details-comment-input",
disabled=True,
classes="default-input",
) )
with Vertical(classes="default-section") as active:
active.border_title = "Active"
yield Checkbox(
"Active", id="details-active-checkbox", disabled=True, classes="default-checkbox"
)
# Edit form (initially hidden) # Edit form (initially hidden)
with Vertical(id="entry-edit-form", classes="hidden"): with Vertical(id="entry-edit-form", classes="entry-form hidden"):
yield Label("IP Address:") with Vertical(classes="default-section section-no-top-margin") as ip_address:
yield Input(placeholder="Enter IP address", id="ip-input") ip_address.border_title = "IP Address"
yield Label("Hostnames (comma-separated):") yield Input(
yield Input(placeholder="Enter hostnames", id="hostname-input") placeholder="Enter IP address",
yield Label("Comment:") id="ip-input",
yield Input( classes="default-input",
placeholder="Enter comment (optional)", id="comment-input" )
with Vertical(classes="default-section") as hostnames:
hostnames.border_title = "Hostnames (comma-separated)"
yield Input(
placeholder="Enter hostnames",
id="hostname-input",
classes="default-input",
)
with Vertical(classes="default-section") as comment:
comment.border_title = "Comment:"
yield Input(
placeholder="Enter comment (optional)",
id="comment-input",
classes="default-input",
) )
yield Checkbox("Active", id="active-checkbox")
with Vertical(classes="default-section") as active:
active.border_title = "Active"
yield Checkbox("Active", id="active-checkbox", classes="default-checkbox")
# Status bar for error/temporary messages (overlay, doesn't affect layout) # Status bar for error/temporary messages (overlay, doesn't affect layout)
yield Static("", id="status-bar", classes="status-bar hidden") yield Static("", id="status-bar", classes="status-bar hidden")

34
src/hosts/tui/styles.py
View file

@ -41,6 +41,10 @@ COMMON_CSS = """
.hidden { .hidden {
display: none; display: none;
} }
.section-no-top-margin {
margin-top: 0 !important;
}
""" """
# CSS styles for the hosts manager application # CSS styles for the hosts manager application
@ -126,39 +130,11 @@ HOSTS_MANAGER_CSS = (
display: none; display: none;
} }
#entry-edit-form { .entry-form {
height: auto; height: auto;
padding: 1; padding: 1;
} }
#entry-edit-form Label {
margin-bottom: 1;
color: $accent;
text-style: bold;
}
#entry-edit-form Input {
margin-bottom: 1;
}
#entry-edit-form Checkbox {
margin-bottom: 1;
}
/* Entry details table styling */
#entry-details-table {
background: $background;
height: auto;
}
#entry-details-table .datatable--even-row {
background: $background;
}
#entry-details-table .datatable--odd-row {
background: $surface;
}
Header { Header {
height: 1; height: 1;
} }