From 05067515d6d820e0cc69995a1d87d41486d0add1 Mon Sep 17 00:00:00 2001 From: Kodjo Sossouvi Date: Sat, 6 Dec 2025 10:06:42 +0100 Subject: [PATCH] Added recursion to Properties.py --- src/app.py | 10 +++++- src/myfasthtml/assets/myfasthtml.css | 37 +++++++++++++++------ src/myfasthtml/controls/DataGridsManager.py | 12 ++++--- src/myfasthtml/controls/Properties.py | 37 +++++++++++++++------ 4 files changed, 69 insertions(+), 27 deletions(-) diff --git a/src/app.py b/src/app.py index 503e8e8..8ee355a 100644 --- a/src/app.py +++ b/src/app.py @@ -2,6 +2,7 @@ import logging.config import yaml from fasthtml import serve +from fasthtml.components import Div from myfasthtml.controls.CommandsDebugger import CommandsDebugger from myfasthtml.controls.DataGridsManager import DataGridsManager @@ -122,8 +123,15 @@ def index(session): layout.left_drawer.add(btn_file_upload, "Test") layout.left_drawer.add(btn_popup, "Test") layout.left_drawer.add(tree_view, "TreeView") - layout.left_drawer.add(DataGridsManager(layout, _id="-datagrids"), "Documents") + + # data grids + dgs_manager = DataGridsManager(layout, _id="-datagrids") + layout.left_drawer.add_group("Documents", Div("Documents", dgs_manager.mk_main_icons(), cls="mf-layout-group flex gap-3")) + layout.left_drawer.add(dgs_manager, "Documents") layout.set_main(tabs_manager) + + + # keyboard shortcuts keyboard = Keyboard(layout, _id="-keyboard").add("ctrl+o", add_tab("File Open", FileUpload(layout, _id="-file_upload"))) keyboard.add("ctrl+n", add_tab("File Open", FileUpload(layout, _id="-file_upload"))) diff --git a/src/myfasthtml/assets/myfasthtml.css b/src/myfasthtml/assets/myfasthtml.css index 096a4bb..7d43e1c 100644 --- a/src/myfasthtml/assets/myfasthtml.css +++ b/src/myfasthtml/assets/myfasthtml.css @@ -697,23 +697,30 @@ /* ************* Properties Component ************ */ /* *********************************************** */ -/* Properties container */ +/*!* Properties container *!*/ .mf-properties { display: flex; flex-direction: column; gap: 1rem; } -/* Group card - using DaisyUI card styling */ +/*!* Group card - using DaisyUI card styling *!*/ .mf-properties-group-card { background-color: var(--color-base-100); border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent); border-radius: var(--radius-md); - overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + overflow: auto; } -/* Group header - gradient using DaisyUI primary color */ +.mf-properties-group-container { + display: inline-block; /* important */ + min-width: max-content; /* important */ + width: 100%; +} + + +/*!* Group header - gradient using DaisyUI primary color *!*/ .mf-properties-group-header { background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in oklab, var(--color-primary) 80%, black) 100%); color: var(--color-primary-content); @@ -722,20 +729,24 @@ font-size: var(--properties-font-size); } -/* Group content area */ +/*!* Group content area *!*/ .mf-properties-group-content { display: flex; flex-direction: column; + min-width: max-content; } -/* Property row */ +/*!* Property row *!*/ .mf-properties-row { - display: flex; - justify-content: space-between; + display: grid; + grid-template-columns: 6rem 1fr; + align-items: center; padding: calc(var(--properties-font-size) * 0.4) calc(var(--properties-font-size) * 0.75); + border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 5%, transparent); transition: background-color 0.15s ease; + gap: calc(var(--properties-font-size) * 0.75); } @@ -747,20 +758,24 @@ background-color: color-mix(in oklab, var(--color-base-content) 3%, transparent); } -/* Property key - normal font */ +/*!* Property key - normal font *!*/ .mf-properties-key { + align-items: start; font-weight: 600; color: color-mix(in oklab, var(--color-base-content) 70%, transparent); flex: 0 0 40%; font-size: var(--properties-font-size); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } -/* Property value - monospace font */ +/*!* Property value - monospace font *!*/ .mf-properties-value { font-family: var(--default-mono-font-family); color: var(--color-base-content); flex: 1; - text-align: right; + text-align: left; font-size: var(--properties-font-size); overflow: hidden; text-overflow: ellipsis; diff --git a/src/myfasthtml/controls/DataGridsManager.py b/src/myfasthtml/controls/DataGridsManager.py index 6a75171..86e44c6 100644 --- a/src/myfasthtml/controls/DataGridsManager.py +++ b/src/myfasthtml/controls/DataGridsManager.py @@ -43,13 +43,15 @@ class DataGridsManager(MultipleInstance): content = df.to_html(index=False) self._tabs_manager.switch(tab_id, content) + def mk_main_icons(self): + return Div( + mk.icon(folder_open20_regular, tooltip="Upload from source", command=self.commands.upload_from_source()), + mk.icon(table_add20_regular, tooltip="New grid"), + cls="flex" + ) + def render(self): return Div( - Div( - mk.icon(folder_open20_regular, tooltip="Upload from source", command=self.commands.upload_from_source()), - mk.icon(table_add20_regular, tooltip="New grid"), - cls="flex" - ), self.tree, id=self._id, ) diff --git a/src/myfasthtml/controls/Properties.py b/src/myfasthtml/controls/Properties.py index 0aa1e02..e78de5b 100644 --- a/src/myfasthtml/controls/Properties.py +++ b/src/myfasthtml/controls/Properties.py @@ -16,21 +16,38 @@ class Properties(MultipleInstance): self.groups = groups self.properties_by_group = self._create_properties_by_group() + def _mk_group_content(self, properties: dict): + return Div( + *[ + Div( + Div(k, cls="mf-properties-key", data_tooltip=f"{k}"), + self._mk_property_value(v), + cls="mf-properties-row" + ) + for k, v in properties.items() + ], + cls="mf-properties-group-content" + ) + + def _mk_property_value(self, value): + if isinstance(value, dict): + return self._mk_group_content(value) + + if isinstance(value, (list, tuple)): + return self._mk_group_content({i: item for i, item in enumerate(value)}) + + return Div(str(value), + cls="mf-properties-value", + title=str(value)) + def render(self): return Div( *[ Div( - Div(group_name if group_name is not None else "", cls="mf-properties-group-header"), Div( - *[ - Div( - Div(k, cls="mf-properties-key"), - Div(str(v), cls="mf-properties-value", title=str(v)), - cls="mf-properties-row" - ) - for k, v in proxy.as_dict().items() - ], - cls="mf-properties-group-content" + Div(group_name if group_name is not None else "", cls="mf-properties-group-header"), + self._mk_group_content(proxy.as_dict()), + cls="mf-properties-group-container" ), cls="mf-properties-group-card" )