From 4ac3eb2dfac6e435b9ad043ba4f65f81faa3c841 Mon Sep 17 00:00:00 2001 From: Kodjo Sossouvi Date: Sun, 3 Aug 2025 18:11:26 +0200 Subject: [PATCH] The new layout is ok. We can work on the content --- src/components/workflows/assets/Workflows.css | 56 +++++++++++++++++++ src/components/workflows/commands.py | 6 ++ .../components/WorkflowDesignerProperties.py | 26 ++++++--- 3 files changed, 80 insertions(+), 8 deletions(-) diff --git a/src/components/workflows/assets/Workflows.css b/src/components/workflows/assets/Workflows.css index 2761e8c..96360a9 100644 --- a/src/components/workflows/assets/Workflows.css +++ b/src/components/workflows/assets/Workflows.css @@ -47,6 +47,62 @@ .wkf-properties { box-sizing: border-box; + position: relative; + font-family: Arial, sans-serif; + background-color: var(--color-base-100); /* bg-base-100 */ +} + +.wkf-properties-input, .wkf-properties-output { + display: inline-block; + vertical-align: top; + padding: 10px; + box-sizing: border-box; + font-family: Arial, sans-serif; + background-color: var(--color-base-100); /* bg-base-100 */ + +} + +.wkf-properties-input { + border-width: 1px; + border-top-left-radius: 0.5rem; /* rounded on left side */ + border-bottom-left-radius: 0.5rem; + border-top-right-radius: 0; /* not rounded on right side */ + border-bottom-right-radius: 0; +} + +.wkf-properties-output { + border-width: 1px; + border-top-right-radius: 0.5rem; /* rounded on right side */ + border-bottom-right-radius: 0.5rem; + border-top-left-radius: 0; /* not rounded on left side */ + border-bottom-left-radius: 0; +} + +.wkf-properties-properties { + display: inline-block; + vertical-align: top; + position: relative; + box-sizing: border-box; +} + +.wkf-properties-handle-left { + position: absolute; + left: 0; + top: 0; + width: 5px; + height: 100%; + cursor: ew-resize; + background-color: transparent; +} + +.wkf-properties-handle-right { + position: absolute; + right: 0; + top: 0; + width: 5px; + height: 100%; + cursor: ew-resize; + background-color: transparent; } .wkf-canvas { diff --git a/src/components/workflows/commands.py b/src/components/workflows/commands.py index ca596ca..3a1c3e1 100644 --- a/src/components/workflows/commands.py +++ b/src/components/workflows/commands.py @@ -34,6 +34,12 @@ class WorkflowDesignerCommandManager(BaseCommandManager): def __init__(self, owner): super().__init__(owner) + def on_save(self): + return {} + + def on_cancel(self): + return {} + def select_processor(self, component_id: str): return { "hx_post": f"{ROUTE_ROOT}{Routes.SelectProcessor}", diff --git a/src/components/workflows/components/WorkflowDesignerProperties.py b/src/components/workflows/components/WorkflowDesignerProperties.py index 8ad3e6f..542d02c 100644 --- a/src/components/workflows/components/WorkflowDesignerProperties.py +++ b/src/components/workflows/components/WorkflowDesignerProperties.py @@ -26,7 +26,7 @@ class WorkflowDesignerProperties(BaseComponent): if self._owner.get_state().properties_input_width is None: input_width = self._boundaries["width"] // 3 properties_width = self._boundaries["width"] // 3 - output_width = self._boundaries["width"] - input_width - properties_width - 10 + output_width = self._boundaries["width"] - input_width - properties_width else: input_width = self._owner.get_state().properties_input_width properties_width = self._owner.get_state().properties_properties_width @@ -45,14 +45,16 @@ class WorkflowDesignerProperties(BaseComponent): return Div( "Input", id=f"pi_{self._id}", - style=f"width: {self.layout.input_width}px; height: {self._boundaries['height']}px; background-color: #f0f0f0; border: 1px solid #ccc; display: inline-block; vertical-align: top; padding: 10px; box-sizing: border-box;" + style=f"width: {self.layout.input_width}px;", + cls="wkf-properties-input" ) def _mk_output(self): return Div( "Output", id=f"po_{self._id}", - style=f"width: {self.layout.output_width}px; height: {self._boundaries['height']}px; background-color: #f0f0f0; border: 1px solid #ccc; display: inline-block; vertical-align: top; padding: 10px; box-sizing: border-box;" + style=f"width: {self.layout.output_width}px;", + cls="wkf-properties-output" ) def _mk_properties(self): @@ -77,23 +79,25 @@ class WorkflowDesignerProperties(BaseComponent): Button("Cancel", **self._commands.on_cancel(), style="padding: 5px 10px;"), style="text-align: center;" ), - style=f"padding: 10px; height: {self._boundaries['height'] - 20}px; box-sizing: border-box;" + style=f"padding: 10px; box-sizing: border-box;" ), # Left resize handle Div( id=f"ppl_{self._id}", - style="position: absolute; left: 0; top: 0; width: 5px; height: 100%; cursor: ew-resize; background-color: transparent;" + cls="wkf-properties-handle-left" ), # Right resize handle Div( id=f"ppr_{self._id}", - style="position: absolute; right: 0; top: 0; width: 5px; height: 100%; cursor: ew-resize; background-color: transparent;" + cls="wkf-properties-handle-right" ), id=f"pp_{self._id}", - style=f"width: {self.layout.properties_width}px; height: {self._boundaries['height']}px; background-color: #f8f8f8; border: 1px solid #ccc; display: inline-block; vertical-align: top; position: relative; box-sizing: border-box;" + style=f"width: {self.layout.properties_width}px;", + cls="wkf-properties-properties" + ) def _mk_layout(self): @@ -101,13 +105,19 @@ class WorkflowDesignerProperties(BaseComponent): self._mk_input(), self._mk_properties(), self._mk_output(), + cls="flex", + style="height: 100%; width: 100%; flex: 1;" ) def __ft__(self, oob=False): # return self.render() return Div( self._mk_layout(), - style=f"height: {self._boundaries['height']}px; border: 2px solid #333; position: relative; font-family: Arial, sans-serif;", + style=f"height: {self._get_height()}px;", id=f"p_{self._id}", hx_swap_oob='true' if oob else None, + cls="wkf-properties" ) + + def _get_height(self): + return self._boundaries["height"] - self._owner.get_state().designer_height - 86