The new layout is ok. We can work on the content
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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}",
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user