misc(ui): add custom component for cards

DataKitchen · Aug 30, 2024 · b6be874 · b6be874
1 parent c296a7d
commit b6be874
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 0 deletions.
diff --git a/testgen/ui/assets/style.css b/testgen/ui/assets/style.css
@@ -14,6 +14,8 @@ body {
     --field-underline-color: #9e9e9e;
 
     --dk-text-value-background: aliceblue;
+    --dk-card-background: #fff;
+
 }
 
 img.dk-logo-img {
@@ -101,6 +103,43 @@ button[title="Show password text"] {
 }
 /* ... */
 
+/* Cards Component */
+[data-testid="stVerticalBlockBorderWrapper"]:has(> div > div[data-testid="stVerticalBlock"] > div.element-container > div.stHtml > i.testgen_card) {
+    background-color: var(--dk-card-background);
+}
+
+[data-testid="stVerticalBlockBorderWrapper"]:has(> div > div[data-testid="stVerticalBlock"] > div.element-container > div.stHtml > i.testgen_card) .testgen_card-header > .testgen_card-title {
+    margin: unset;
+    padding: unset;
+    line-height: 25px;
+}
+
+[data-testid="stVerticalBlockBorderWrapper"]:has(> div > div[data-testid="stVerticalBlock"] > div.element-container > div.stHtml > i.testgen_card) .testgen_card-header > .testgen_card-subtitle {
+    margin: unset;
+    padding: unset;
+    margin-top: 4px;
+    line-height: 15px;
+    color: var(--caption-text-color);
+    font-style: italic;
+}
+
+[data-testid="column"]:has(> div[data-testid="stVerticalBlockBorderWrapper"] > div > div[data-testid="stVerticalBlock"] > div.element-container > div.stHtml > i.testgen_card-actions) [data-testid="stVerticalBlock"] {
+    width: 100%;
+    flex-direction: row;
+    justify-content: flex-end;
+}
+
+[data-testid="column"]:has(> div[data-testid="stVerticalBlockBorderWrapper"] > div > div[data-testid="stVerticalBlock"] > div.element-container > div.stHtml > i.testgen_card-actions) [data-testid="stVerticalBlock"] > div[data-testid="element-container"],
+[data-testid="column"]:has(> div[data-testid="stVerticalBlockBorderWrapper"] > div > div[data-testid="stVerticalBlock"] > div.element-container > div.stHtml > i.testgen_card-actions) [data-testid="stVerticalBlock"] > div[data-testid="element-container"] > div[data-testid] {
+    width: auto !important;
+    max-height: 40px;
+}
+/* ... */
+
+[data-testid="stVerticalBlock"]:has(> div.element-container > div.stHtml > i.no-flex-gap) {
+    gap: unset;
+}
+
 /* Dark mode */
 @media (prefers-color-scheme: dark) {
     body {
@@ -114,6 +153,7 @@ button[title="Show password text"] {
         --sidebar-active-item-color: #10141b;
         --sidebar-active-item-border-color: #b4e3c9;
         --dk-text-value-background: unset;
+        --dk-card-background: #14181f;
     }
 
     /* Main content */

diff --git a/testgen/ui/components/widgets/__init__.py b/testgen/ui/components/widgets/__init__.py
@@ -4,3 +4,4 @@
 from testgen.ui.components.widgets.expander_toggle import expander_toggle
 from testgen.ui.components.widgets.sidebar import sidebar
 from testgen.ui.components.widgets.summary_bar import summary_bar
+from testgen.ui.components.widgets.card import card
diff --git a/testgen/ui/components/widgets/card.py b/testgen/ui/components/widgets/card.py
@@ -0,0 +1,43 @@
+import contextlib
+import dataclasses
+import typing
+
+import streamlit as st
+from streamlit.delta_generator import DeltaGenerator
+
+CARD_CLASS: str = "testgen_card"
+CARD_HEADER_CLASS: str = "testgen_card-header"
+CARD_TITLE_CLASS: str = "testgen_card-title"
+CARD_SUBTITLE_CLASS: str = "testgen_card-subtitle"
+CARD_ACTIONS_CLASS: str = "testgen_card-actions"
+
+
+@contextlib.contextmanager
+def card(
+    title: str = "",
+    subtitle: str = "",
+    border: bool = True,
+    extra_css_class: str = "",
+) -> typing.Generator["CardContext", None, None]:
+    with st.container(border=border):
+        st.html(f'<i class="{CARD_CLASS} {extra_css_class}"></i>')
+
+        title_column, actions_column = st.columns([.5, .5], vertical_alignment="center")
+        if title or subtitle:
+            with title_column:
+                header_html: str = f'<div class="{CARD_HEADER_CLASS}">'
+                if title:
+                    header_html += f'<h4 class="{CARD_TITLE_CLASS}">{title}</h4>'
+                if subtitle:
+                    header_html += f'<small class="{CARD_SUBTITLE_CLASS}">{subtitle}</small>'
+                header_html += '</div>'
+                st.html(header_html)
+
+        actions_column.html(f'<i class="{CARD_ACTIONS_CLASS}"></i>')
+
+        yield CardContext(actions=actions_column)
+
+
+@dataclasses.dataclass
+class CardContext:
+    actions: DeltaGenerator