Merge pull request #26 from Textualize/style-update

styles

Author: willmcgugan

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "trogon"
-version = "0.3.0"
+version = "0.4.0"
 description = "Automatically generate a Textual TUI for your Click CLI"
 authors = ["Darren Burns <darrenb900@gmail.com>"]
 readme = "README.md"

trogon/trogon.py

@@ -51,12 +51,8 @@ class CommandBuilder(Screen):
             key="ctrl+t", action="focus_command_tree", description="Focus Command Tree"
         ),
         Binding(key="ctrl+o", action="show_command_info", description="Command Info"),
-        Binding(key="f1", action="about", description="About Trogon"),
-        Binding(
-            key="ctrl+s",
-            action="focus('search')",
-            description="Search",
-        ),
+        Binding(key="ctrl+s", action="focus('search')", description="Search"),
+        Binding(key="f1", action="about", description="About"),
     ]
 
     def __init__(

trogon/trogon.scss

@@ -4,11 +4,13 @@
 
 #home-body {
   height: 100%;
-  width: auto;      
+  width: 1fr;    
 }
 
 #home-body-scroll {
-  height: 100%;      
+  width: 1fr;
+  height: 1fr;     
+
 }
 
 #home-exec-preview {
@@ -65,10 +67,9 @@
   height: 4;
   padding: 1 2;
   color: $text;
-  background: $accent-lighten-2 5%;
+  background: $accent-lighten-2 5%;  
 }
 
-
 CommandBuilder .version-string {
   color: $text-muted;
   background: $background 50%;
@@ -128,13 +129,13 @@ CommandTree > .tree--guides-hover {
 }
 
 ParameterControls {
-  height: auto;
+  height: auto;    
 }
 
 ControlGroup {
   height: auto;
   border: solid $panel-lighten-2;
-  margin: 0 1; 
+  
 }
 
 ControlGroup.single-item {
@@ -160,10 +161,16 @@ Pretty {
 }
 
 .add-another-button {
-  margin: 0 2;
-  padding: 0 1;
-  height: 1;
-  border: none; 
+  margin-right: 1;  
+  background: transparent;
+  color: $success;
+  border: none;
+  background: $boost;
+  height: 1;  
+ }
+
+.add-another-button:hover {
+  background: transparent;
 }
 
 .add-another-button-container {
@@ -190,7 +197,7 @@ $command-info-header-bg: $primary-darken-1;
   dock: top;
   background: $command-info-header-bg;
   color: $text;
-  height: auto;
+  height: auto;  
 }
 
 .command-info-container {
@@ -236,7 +243,7 @@ Tabs:focus .underline--bar {
 }
 
 Select.command-form-select  {
-  margin: 0 1 0 1;       
+  
 }
 
 Select.command-form-select SelectCurrent {
@@ -246,3 +253,16 @@ Select.command-form-select SelectCurrent {
 Select.command-form-select:focus SelectCurrent {
   border: tall $accent;
 }
+
+.command-form-multiple-choice {
+  margin-left: 0;
+  border: tall transparent;      
+  background: $boost;
+  padding: 0 1;
+  margin-top: 0;
+}
+
+.command-form-multiple-choice:focus-within {
+  
+  border: tall $accent;        
+}

trogon/widgets/form.py

@@ -29,26 +29,21 @@ class CommandForm(Widget):
     """Form which is constructed from an introspected Click app. Users
     make use of this form in order to construct CLI invocation strings."""
 
-    DEFAULT_CSS = """
+    DEFAULT_CSS = """    
     .command-form-heading {
-        padding: 1 0 0 2;
+        padding: 1 0 0 1;
         text-style: u;
-        color: $text 70%;
+        color: $text;
     }
-    .command-form-input {
-        margin: 0 1 0 1;
+    .command-form-input {        
         border: tall transparent;
     }
     .command-form-label {
-        padding: 1 0 0 2;
-    }
-    
-    .command-form-multiple-choice {
-        margin: 0 0 0 2;
+        padding: 1 0 0 1;
     }
     .command-form-checkbox {
         background: $boost;
-        margin: 1 0 0 1;
+        margin: 1 0 0 0;
         padding-left: 1;
         border: tall transparent;
     }
@@ -59,7 +54,9 @@ class CommandForm(Widget):
         text-style: none;
     }
     .command-form-command-group {
+        
         margin: 1 2;
+        padding: 0 1;
         height: auto;
         background: $foreground 3%;
         border: panel $background;
@@ -71,10 +68,11 @@ class CommandForm(Widget):
     .command-form-command-group:focus-within {
         border: panel $primary;
     }
-    .command-form-control-help-text {
-        margin: 0 0 0 2;
+    .command-form-control-help-text {        
         height: auto;
         color: $text 40%;
+        padding-top: 0;
+        padding-left: 1;
     }
     """
 

trogon/widgets/parameter_controls.py

@@ -81,8 +81,12 @@ def apply_filter(self, filter_query: str) -> bool:
                 should_be_visible = name_contains_query
             else:
                 # Option names are lists since they can have multiple names (e.g. -v and --verbose)
-                name_contains_query = any(filter_query in name.casefold() for name in self.schema.name)
-                help_contains_query = filter_query in getattr(self.schema, "help", "").casefold()
+                name_contains_query = any(
+                    filter_query in name.casefold() for name in self.schema.name
+                )
+                help_contains_query = (
+                    filter_query in getattr(self.schema, "help", "").casefold()
+                )
                 should_be_visible = name_contains_query or help_contains_query
 
             self.display = should_be_visible
@@ -92,7 +96,9 @@ def apply_filter(self, filter_query: str) -> bool:
             try:
                 help_label = self.query_one(".command-form-control-help-text", Static)
                 new_help_text = Text(help_text)
-                new_help_text.highlight_words(filter_query.split(), "black on yellow", case_sensitive=False)
+                new_help_text.highlight_words(
+                    filter_query.split(), "black on yellow", case_sensitive=False
+                )
                 help_label.update(new_help_text)
             except NoMatches:
                 pass
@@ -183,7 +189,7 @@ def compose(self) -> ComposeResult:
         # button.
         if multiple or nargs == -1 and not isinstance(argument_type, click.Choice):
             with Horizontal(classes="add-another-button-container"):
-                yield Button("+ value", variant="primary", classes="add-another-button")
+                yield Button("+ value", variant="success", classes="add-another-button")
 
         # Render the dim help text below the form controls
         if help_text:
@@ -269,7 +275,7 @@ def list_to_tuples(
                 # Unspecified number of arguments as per Click docs.
                 tuple_size = 1
             return [
-                tuple(lst[i: i + tuple_size]) for i in range(0, len(lst), tuple_size)
+                tuple(lst[i : i + tuple_size]) for i in range(0, len(lst), tuple_size)
             ]
 
         controls = list(self.query(f".{self.schema.key}"))