add functionality to format CSS stylesheets (#257)

Quansight · Dec 20, 2023 · 2056246 · 2056246
1 parent a437e7e
commit 2056246
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 33 deletions.
diff --git a/ragna/deploy/_ui/central_view.py b/ragna/deploy/_ui/central_view.py
@@ -293,39 +293,35 @@ def on_click_chat_info_wrapper(self, event):
                         dedent=True,
                         # debug
                         # pn.pane.Markdown(f"Chat ID: {self.current_chat['id']}"),
-                        stylesheets=[
-                            """ :host {  width: 100%; } 
-                                                 
-                                                .pills_list {
-                                                    /*background-color:gold;*/
-                                                    display: grid;
-                                                    grid-auto-flow: row;
-                                                    row-gap: 10px;
-                                                    grid-template: repeat({{GRID_HEIGHT}}, 1fr) / repeat(3, 1fr);
-                                                    max-height: 200px;
-                                                    overflow: scroll;
-                                                }
-                                                 
-                                                .chat_document_pill {
-                                                                    background-color: rgb(241,241,241);
-                                                                    
-                                                                    margin-left: 5px;   
-                                                                    margin-right: 5px;
-                                                                    padding: 5px 15px;
-                                                                    border-radius: 10px;
-                                                                    color:var(--accent-color);
-                                                                    width:fit-content;
-                                                                    grid-column: span 1;
-                                                                    
-                                                                }   
-                                                ul {
-                                                    list-style-type: none
-                                                }                                                 
-
-                                                """.replace(
-                                "{{GRID_HEIGHT}}", str(grid_height)
-                            )
-                        ],
+                        stylesheets=ui.stylesheets(
+                            (":host", {"width": "100%"}),
+                            (
+                                ".pills_list",
+                                {
+                                    # "background-color": "gold",
+                                    "display": "grid",
+                                    "grid-auto-flow": "row",
+                                    "row-gap": "10px",
+                                    "grid-template": f"repeat({grid_height}, 1fr) / repeat(3, 1fr)",
+                                    "max-height": "200px",
+                                    "overflow": "scroll",
+                                },
+                            ),
+                            (
+                                ".chat_document_pill",
+                                {
+                                    "background-color": "rgb(241,241,241)",
+                                    "margin-left": "5px",
+                                    "margin-right": "5px",
+                                    "padding": "5px 15px",
+                                    "border-radius": "10px",
+                                    "color": "var(--accent-color)",
+                                    "width": "fit-content",
+                                    "grid-column": "span 1",
+                                },
+                            ),
+                            ("ul", {"list-style-type": "none"}),
+                        ),
                     ),
                 ],
             )

diff --git a/ragna/deploy/_ui/styles.py b/ragna/deploy/_ui/styles.py
@@ -1,6 +1,8 @@
 """
 UI Helpers
 """
+from typing import Optional
+
 import panel as pn
 
 
@@ -12,6 +14,26 @@ def divider():
 CSS constants
 """
 
+
+def stylesheets(*class_selectors: tuple[str, dict[str, str]]) -> Optional[list[str]]:
+    if not class_selectors:
+        return None
+
+    return [
+        "\n".join(
+            [
+                f"{selector} {{",
+                *[
+                    f"    {property}: {value};"
+                    for property, value in declarations.items()
+                ],
+                "}",
+            ]
+        )
+        for selector, declarations in class_selectors
+    ]
+
+
 MAIN_COLOR = "#DF5538"  # "rgba(223, 85, 56, 1)"