diff --git a/src/hosts/tui/add_entry_modal.py b/src/hosts/tui/add_entry_modal.py index d5b1de7..35612cd 100644 --- a/src/hosts/tui/add_entry_modal.py +++ b/src/hosts/tui/add_entry_modal.py @@ -11,6 +11,7 @@ from textual.screen import ModalScreen from textual.binding import Binding from ..core.models import HostEntry +from .styles import ADD_ENTRY_MODAL_CSS class AddEntryModal(ModalScreen): @@ -20,51 +21,7 @@ class AddEntryModal(ModalScreen): Provides a floating window with input fields for creating new entries. """ - CSS = """ - AddEntryModal { - align: center middle; - } - - .add-entry-container { - width: 80; - height: 25; - background: $surface; - border: thick $primary; - padding: 1; - } - - .add-entry-title { - text-align: center; - text-style: bold; - color: $primary; - margin-bottom: 1; - } - - .add-entry-section { - margin: 1 0; - } - - .add-entry-input { - margin: 0 2; - width: 1fr; - } - - .button-row { - margin-top: 2; - align: center middle; - } - - .add-entry-button { - margin: 0 1; - min-width: 10; - } - - .validation-error { - color: $error; - margin: 0 2; - text-style: italic; - } - """ + CSS = ADD_ENTRY_MODAL_CSS BINDINGS = [ Binding("escape", "cancel", "Cancel"), diff --git a/src/hosts/tui/app.py b/src/hosts/tui/app.py index ab72db3..5c8679e 100644 --- a/src/hosts/tui/app.py +++ b/src/hosts/tui/app.py @@ -460,7 +460,6 @@ class HostsManagerApp(App): self.push_screen(DeleteConfirmationModal(entry), handle_delete_confirmation) - def action_quit(self) -> None: """Quit the application.""" self.navigation_handler.quit_application() diff --git a/src/hosts/tui/config_modal.py b/src/hosts/tui/config_modal.py index 618853c..3f12dbd 100644 --- a/src/hosts/tui/config_modal.py +++ b/src/hosts/tui/config_modal.py @@ -11,6 +11,7 @@ from textual.screen import ModalScreen from textual.binding import Binding from ..core.config import Config +from .styles import CONFIG_MODAL_CSS class ConfigModal(ModalScreen): @@ -20,44 +21,7 @@ class ConfigModal(ModalScreen): Provides a floating window with configuration options. """ - CSS = """ - ConfigModal { - align: center middle; - } - - .config-container { - width: 80; - height: 20; - background: $surface; - border: thick $primary; - padding: 1; - } - - .config-title { - text-align: center; - text-style: bold; - color: $primary; - margin-bottom: 1; - } - - .config-section { - margin: 1 0; - } - - .config-option { - margin: 0 2; - } - - .button-row { - margin-top: 2; - align: center middle; - } - - .config-button { - margin: 0 1; - min-width: 10; - } - """ + CSS = CONFIG_MODAL_CSS BINDINGS = [ Binding("escape", "cancel", "Cancel"), diff --git a/src/hosts/tui/delete_confirmation_modal.py b/src/hosts/tui/delete_confirmation_modal.py index 8e1f4d5..bc99152 100644 --- a/src/hosts/tui/delete_confirmation_modal.py +++ b/src/hosts/tui/delete_confirmation_modal.py @@ -11,6 +11,7 @@ from textual.screen import ModalScreen from textual.binding import Binding from ..core.models import HostEntry +from .styles import DELETE_CONFIRMATION_MODAL_CSS class DeleteConfirmationModal(ModalScreen): @@ -20,48 +21,7 @@ class DeleteConfirmationModal(ModalScreen): Provides a confirmation dialog before deleting host entries. """ - CSS = """ - DeleteConfirmationModal { - align: center middle; - } - - .delete-container { - width: 60; - height: 15; - background: $surface; - border: thick $error; - padding: 1; - } - - .delete-title { - text-align: center; - text-style: bold; - color: $error; - margin-bottom: 1; - } - - .delete-message { - text-align: center; - margin: 1 0; - } - - .entry-info { - text-align: center; - text-style: bold; - color: $primary; - margin: 1 0; - } - - .button-row { - margin-top: 2; - align: center middle; - } - - .delete-button { - margin: 0 1; - min-width: 10; - } - """ + CSS = DELETE_CONFIRMATION_MODAL_CSS BINDINGS = [ Binding("escape", "cancel", "Cancel"), diff --git a/src/hosts/tui/help_modal.py b/src/hosts/tui/help_modal.py index 56249a5..4e1bbc5 100644 --- a/src/hosts/tui/help_modal.py +++ b/src/hosts/tui/help_modal.py @@ -10,6 +10,8 @@ from textual.widgets import Static, Button from textual.screen import ModalScreen from textual.binding import Binding +from .styles import HELP_MODAL_CSS + class HelpModal(ModalScreen): """ @@ -18,59 +20,7 @@ class HelpModal(ModalScreen): Provides comprehensive help information for using the application. """ - CSS = """ - HelpModal { - align: center middle; - } - - .help-container { - width: 90; - height: 40; - background: $surface; - border: thick $primary; - padding: 1; - } - - .help-title { - text-align: center; - text-style: bold; - color: $primary; - margin-bottom: 1; - } - - .help-content { - height: 35; - margin: 1 0; - } - - .help-section { - margin-bottom: 1; - } - - .help-section-title { - text-style: bold; - color: $primary; - margin-bottom: 0; - } - - .help-item { - margin: 0 2; - } - - .keyboard-shortcut { - text-style: bold; - color: $accent; - } - - .button-row { - margin-top: 1; - align: center middle; - } - - .help-button { - min-width: 10; - } - """ + CSS = HELP_MODAL_CSS BINDINGS = [ Binding("escape", "close", "Close"), diff --git a/src/hosts/tui/password_modal.py b/src/hosts/tui/password_modal.py index fc6b189..f4098c1 100644 --- a/src/hosts/tui/password_modal.py +++ b/src/hosts/tui/password_modal.py @@ -10,6 +10,8 @@ from textual.widgets import Static, Button, Input from textual.screen import ModalScreen from textual.binding import Binding +from .styles import PASSWORD_MODAL_CSS + class PasswordModal(ModalScreen): """ @@ -18,52 +20,7 @@ class PasswordModal(ModalScreen): Provides a floating window for entering sudo password with proper masking. """ - CSS = """ - PasswordModal { - align: center middle; - } - - .password-container { - width: 60; - height: 12; - background: $surface; - border: thick $primary; - padding: 1; - } - - .password-title { - text-align: center; - text-style: bold; - color: $primary; - margin-bottom: 1; - } - - .password-message { - text-align: center; - color: $text; - margin-bottom: 1; - } - - .password-input { - margin: 1 0; - } - - .button-row { - margin-top: 1; - align: center middle; - } - - .password-button { - margin: 0 1; - min-width: 10; - } - - .error-message { - color: $error; - text-align: center; - margin: 1 0; - } - """ + CSS = PASSWORD_MODAL_CSS BINDINGS = [ Binding("escape", "cancel", "Cancel"), diff --git a/src/hosts/tui/save_confirmation_modal.py b/src/hosts/tui/save_confirmation_modal.py index a49f8f1..8b9f1cf 100644 --- a/src/hosts/tui/save_confirmation_modal.py +++ b/src/hosts/tui/save_confirmation_modal.py @@ -10,6 +10,8 @@ from textual.widgets import Static, Button, Label from textual.screen import ModalScreen from textual.binding import Binding +from .styles import SAVE_CONFIRMATION_MODAL_CSS + class SaveConfirmationModal(ModalScreen): """ @@ -18,45 +20,7 @@ class SaveConfirmationModal(ModalScreen): Provides a confirmation dialog asking whether to save or discard changes. """ - CSS = """ - SaveConfirmationModal { - align: center middle; - } - - .save-confirmation-container { - width: 60; - height: 15; - background: $surface; - border: thick $primary; - padding: 1; - } - - .save-confirmation-title { - text-align: center; - text-style: bold; - color: $primary; - margin-bottom: 1; - } - - .save-confirmation-message { - text-align: center; - margin-bottom: 2; - color: $text; - } - - .button-row { - align: center middle; - } - - .save-confirmation-button { - margin: 0 1; - min-width: 12; - } - - .save-confirmation-button:focus { - border: thick $accent; - } - """ + CSS = SAVE_CONFIRMATION_MODAL_CSS BINDINGS = [ Binding("escape", "cancel", "Cancel"), diff --git a/src/hosts/tui/styles.py b/src/hosts/tui/styles.py index ec61e37..7b913a4 100644 --- a/src/hosts/tui/styles.py +++ b/src/hosts/tui/styles.py @@ -128,3 +128,294 @@ Header.-tall { height: 1; /* Fix tall header also to height 1 */ } """ + +# Common CSS classes shared across components +COMMON_CSS = """ +.button-row { + margin-top: 1; + align: center middle; +} + +.hidden { + display: none; +} +""" + +# Help Modal CSS +HELP_MODAL_CSS = ( + COMMON_CSS + + """ +HelpModal { + align: center middle; +} + +.help-container { + width: 90; + height: 40; + background: $surface; + border: thick $primary; + padding: 1; +} + +.help-title { + text-align: center; + text-style: bold; + color: $primary; + margin-bottom: 1; +} + +.help-content { + height: 35; + margin: 1 0; +} + +.help-section { + margin-bottom: 1; +} + +.help-section-title { + text-style: bold; + color: $primary; + margin-bottom: 0; +} + +.help-item { + margin: 0 2; +} + +.keyboard-shortcut { + text-style: bold; + color: $accent; +} + +.help-button { + min-width: 10; +} +""" +) + +# Add Entry Modal CSS +ADD_ENTRY_MODAL_CSS = ( + COMMON_CSS + + """ +AddEntryModal { + align: center middle; +} + +.add-entry-container { + width: 80; + height: 25; + background: $surface; + border: thick $primary; + padding: 1; +} + +.add-entry-title { + text-align: center; + text-style: bold; + color: $primary; + margin-bottom: 1; +} + +.add-entry-section { + margin: 1 0; +} + +.add-entry-input { + margin: 0 2; + width: 1fr; +} + +.button-row { + margin-top: 2; + align: center middle; +} + +.add-entry-button { + margin: 0 1; + min-width: 10; +} + +.validation-error { + color: $error; + margin: 0 2; + text-style: italic; +} +""" +) + +# Delete Confirmation Modal CSS +DELETE_CONFIRMATION_MODAL_CSS = ( + COMMON_CSS + + """ +DeleteConfirmationModal { + align: center middle; +} + +.delete-container { + width: 60; + height: 15; + background: $surface; + border: thick $error; + padding: 1; +} + +.delete-title { + text-align: center; + text-style: bold; + color: $error; + margin-bottom: 1; +} + +.delete-message { + text-align: center; + margin: 1 0; +} + +.entry-info { + text-align: center; + text-style: bold; + color: $primary; + margin: 1 0; +} + +.button-row { + margin-top: 2; + align: center middle; +} + +.delete-button { + margin: 0 1; + min-width: 10; +} +""" +) + +# Password Modal CSS +PASSWORD_MODAL_CSS = ( + COMMON_CSS + + """ +PasswordModal { + align: center middle; +} + +.password-container { + width: 60; + height: 12; + background: $surface; + border: thick $primary; + padding: 1; +} + +.password-title { + text-align: center; + text-style: bold; + color: $primary; + margin-bottom: 1; +} + +.password-message { + text-align: center; + color: $text; + margin-bottom: 1; +} + +.password-input { + margin: 1 0; +} + +.password-button { + margin: 0 1; + min-width: 10; +} + +.error-message { + color: $error; + text-align: center; + margin: 1 0; +} +""" +) + +# Config Modal CSS +CONFIG_MODAL_CSS = ( + COMMON_CSS + + """ +ConfigModal { + align: center middle; +} + +.config-container { + width: 80; + height: 20; + background: $surface; + border: thick $primary; + padding: 1; +} + +.config-title { + text-align: center; + text-style: bold; + color: $primary; + margin-bottom: 1; +} + +.config-section { + margin: 1 0; +} + +.config-option { + margin: 0 2; +} + +.button-row { + margin-top: 2; + align: center middle; +} + +.config-button { + margin: 0 1; + min-width: 10; +} +""" +) + +# Save Confirmation Modal CSS +SAVE_CONFIRMATION_MODAL_CSS = ( + COMMON_CSS + + """ +SaveConfirmationModal { + align: center middle; +} + +.save-confirmation-container { + width: 60; + height: 15; + background: $surface; + border: thick $primary; + padding: 1; +} + +.save-confirmation-title { + text-align: center; + text-style: bold; + color: $primary; + margin-bottom: 1; +} + +.save-confirmation-message { + text-align: center; + margin-bottom: 2; + color: $text; +} + +.save-confirmation-button { + margin: 0 1; + min-width: 12; +} + +.save-confirmation-button:focus { + border: thick $accent; +} +""" +)