feat: Add more custom stying to SettingDescription

kraanzu · Dec 10, 2023 · ab2f7d4 · ab2f7d4
1 parent fb1bf5d
commit ab2f7d4
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 12 deletions.
diff --git a/termtyper/ui/css/themes/nord.sass b/termtyper/ui/css/themes/nord.sass
@@ -14,6 +14,7 @@ $aurora_red: #bf616a
 $aurora_orange: #d08770
 $aurora_yellow: #ebcb8b
 $aurora_green: #a3be8c
+$aurora_purple: #b48ead
 
 BaseWindow
   background: $black1
@@ -54,6 +55,12 @@ SettingDescription
   &.theme-nord
     .setting--header
       color: $frost_green
+    .setting--info
+      color: $aurora_yellow
+    .setting--option
+      color: $aurora_purple
+    .setting--option-description
+      color: $white1
 
 StripSetting
   &.theme-nord

diff --git a/termtyper/ui/css/themes/nord.tcss b/termtyper/ui/css/themes/nord.tcss
@@ -35,6 +35,15 @@ Setting.theme-nord.selected {
 SettingDescription.theme-nord .setting--header {
   color: #8fbcbb;
 }
+SettingDescription.theme-nord .setting--info {
+  color: #ebcb8b;
+}
+SettingDescription.theme-nord .setting--option {
+  color: #b48ead;
+}
+SettingDescription.theme-nord .setting--option-description {
+  color: #d8dee9;
+}
 
 StripSetting.theme-nord {
   background: #3b4252;

diff --git a/termtyper/ui/widgets/settings_options.py b/termtyper/ui/widgets/settings_options.py
@@ -9,7 +9,12 @@
 
 
 class SettingDescription(Widget):
-    COMPONENT_CLASSES = {"setting--header"}
+    COMPONENT_CLASSES = {
+        "setting--header",
+        "setting--info",
+        "setting--option",
+        "setting--option-description",
+    }
 
     def __init__(
         self,
@@ -25,19 +30,25 @@ def __init__(
         self.items = items
 
     def render(self) -> RenderableType:
+        def create_options(options: Dict[str, str]) -> Text:
+            text = Text()
+            for option, desc in options.items():
+                text += (
+                    Text(option, c3) + ": " + Text.from_markup(desc, style=c4) + "\n"
+                )
+
+            return text
 
         c1 = self.get_component_rich_style("setting--header")
-        c2 = "yellow"
-        c3 = "cyan"
-        return Text(self.title, c1) + "\n" + Text(self.info, c2)
-        return Text.from_markup(
-            f"[{c1}]{self.title}[/{c1}]"
-            + "\n"
-            + f"[{c2}]{self.info}[/{c2}]"
-            + "\n".join(
-                f"[{c3}]{sub}[/{c3}]: {desc}" for sub, desc in self.items.items()
-            )
-        )
+        c2 = self.get_component_rich_style("setting--info")
+        c3 = self.get_component_rich_style("setting--option")
+        c4 = self.get_component_rich_style("setting--option-description")
+
+        text = Text(self.title, c1) + "\n" + Text(self.info, c2)
+        if self.items:
+            text = text + "\n" + create_options(self.items)
+
+        return text
 
 
 class Setting(Widget):