SemianiakaVY/elsa-core
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity

added toolbar layouts (#3113)

Browse source 
Co-authored-by: Ivan Hrynevytskyi <ivan.hrynevytskyi@IHRYNEVYTSKYIL.local>
This commit is contained in:
Ivan Hrynevytskyi (FE-underwriting) 2022-06-13 12:51:13 +03:00 committed by GitHub
parent 38fe7c41c7
commit 4eaa0f6d13
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 37 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/designer/elsa-workflows-designer/src/components.d.ts vendored
View file

@ -202,6 +202,8 @@ export namespace Components {
"updateWorkflowDefinition": (workflowDefinition: WorkflowDefinition) => Promise<void>;
"workflowDefinition"?: WorkflowDefinition;
}
interface ElsaWorkflowDefinitionEditorToolbar {
}
interface ElsaWorkflowDefinitionEditorToolbox {
"graph": Graph;
}
@ -461,6 +463,12 @@ declare global {
prototype: HTMLElsaWorkflowDefinitionEditorElement;
new (): HTMLElsaWorkflowDefinitionEditorElement;
};
interface HTMLElsaWorkflowDefinitionEditorToolbarElement extends Components.ElsaWorkflowDefinitionEditorToolbar, HTMLStencilElement {
}
var HTMLElsaWorkflowDefinitionEditorToolbarElement: {
prototype: HTMLElsaWorkflowDefinitionEditorToolbarElement;
new (): HTMLElsaWorkflowDefinitionEditorToolbarElement;
};
interface HTMLElsaWorkflowDefinitionEditorToolboxElement extends Components.ElsaWorkflowDefinitionEditorToolbox, HTMLStencilElement {
}
var HTMLElsaWorkflowDefinitionEditorToolboxElement: {
@ -562,6 +570,7 @@ declare global {
"elsa-tooltip": HTMLElsaTooltipElement;
"elsa-workflow-definition-browser": HTMLElsaWorkflowDefinitionBrowserElement;
"elsa-workflow-definition-editor": HTMLElsaWorkflowDefinitionEditorElement;
"elsa-workflow-definition-editor-toolbar": HTMLElsaWorkflowDefinitionEditorToolbarElement;
"elsa-workflow-definition-editor-toolbox": HTMLElsaWorkflowDefinitionEditorToolboxElement;
"elsa-workflow-definition-editor-toolbox-activities": HTMLElsaWorkflowDefinitionEditorToolboxActivitiesElement;
"elsa-workflow-definition-properties-editor": HTMLElsaWorkflowDefinitionPropertiesEditorElement;
@ -749,6 +758,8 @@ declare namespace LocalJSX {
"onWorkflowUpdated"?: (event: CustomEvent<WorkflowDefinitionUpdatedArgs>) => void;
"workflowDefinition"?: WorkflowDefinition;
}
interface ElsaWorkflowDefinitionEditorToolbar {
}
interface ElsaWorkflowDefinitionEditorToolbox {
"graph"?: Graph;
}
@ -828,6 +839,7 @@ declare namespace LocalJSX {
"elsa-tooltip": ElsaTooltip;
"elsa-workflow-definition-browser": ElsaWorkflowDefinitionBrowser;
"elsa-workflow-definition-editor": ElsaWorkflowDefinitionEditor;
"elsa-workflow-definition-editor-toolbar": ElsaWorkflowDefinitionEditorToolbar;
"elsa-workflow-definition-editor-toolbox": ElsaWorkflowDefinitionEditorToolbox;
"elsa-workflow-definition-editor-toolbox-activities": ElsaWorkflowDefinitionEditorToolboxActivities;
"elsa-workflow-definition-properties-editor": ElsaWorkflowDefinitionPropertiesEditor;
@ -879,6 +891,7 @@ declare module "@stencil/core" {
"elsa-tooltip": LocalJSX.ElsaTooltip & JSXBase.HTMLAttributes<HTMLElsaTooltipElement>;
"elsa-workflow-definition-browser": LocalJSX.ElsaWorkflowDefinitionBrowser & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionBrowserElement>;
"elsa-workflow-definition-editor": LocalJSX.ElsaWorkflowDefinitionEditor & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionEditorElement>;
"elsa-workflow-definition-editor-toolbar": LocalJSX.ElsaWorkflowDefinitionEditorToolbar & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionEditorToolbarElement>;
"elsa-workflow-definition-editor-toolbox": LocalJSX.ElsaWorkflowDefinitionEditorToolbox & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionEditorToolboxElement>;
"elsa-workflow-definition-editor-toolbox-activities": LocalJSX.ElsaWorkflowDefinitionEditorToolboxActivities & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionEditorToolboxActivitiesElement>;
"elsa-workflow-definition-properties-editor": LocalJSX.ElsaWorkflowDefinitionPropertiesEditor & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionPropertiesEditorElement>;

18
src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/toolbar.tsx Normal file
View file

@ -0,0 +1,18 @@
import { Component, h } from '@stencil/core';
@Component({
tag: 'elsa-workflow-definition-editor-toolbar',
})
export class Toolbar {
render() {
return (
<div class="flex justify-center absolute border-b border-gray-200 top-0 px-1 pl-4 py-2 text-sm bg-white z-10 elsa-panel-toolbar">
<elsa-tooltip tooltipPosition="right" tooltipContent={<p class="text-gray-600 text-sm">Currently in development</p>}>
<button class="relative inline-flex items-center px-4 py-2 rounded border border-blue-600 bg-blue-600 text-sm font-medium text-white hover:bg-blue-700 focus:z-10 focus:outline-none focus:ring-blue-600 hover:border-blue-700">
Auto-Layout
</button>
</elsa-tooltip>
</div>
);
}
}

5
src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.scss
View file

@ -9,6 +9,11 @@ elsa-canvas {
bottom: 0;
}
.elsa-panel-toolbar {
left: var(--activity-picker-width);
right: var(--activity-editor-width);
}
elsa-panel.panel-state-expanded.elsa-activity-picker-container {
width: var(--activity-picker-width);
}

1
src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx
View file

@ -170,6 +170,7 @@ export class WorkflowDefinitionEditor {
return (
<WorkflowEditorTunnel.Provider state={tunnelState}>
<div class="absolute inset-0" ref={el => this.container = el}>
<elsa-workflow-definition-editor-toolbar />
<elsa-panel
class="elsa-activity-picker-container"
position={PanelPosition.Left}