From e71d39d59eec370ff35e7677d1bbe992c0619cda Mon Sep 17 00:00:00 2001 From: "Ivan Hrynevytskyi (FE-underwriting)" <83350900+im-ihrynevytskyi@users.noreply.github.com> Date: Thu, 23 Jun 2022 12:33:58 +0300 Subject: [PATCH] added bottom panel with resize functionality (#3149) * added bottom panel with resize functionality * merge conflicts fixed Co-authored-by: Ivan Hrynevytskyi --- .../activities/flowchart/flowchart.scss | 2 +- .../src/components/designer/panel/panel.scss | 9 ++++-- .../src/components/designer/panel/panel.tsx | 21 ++++++++---- .../src/components/designer/panel/resize.ts | 25 ++++++++------- .../workflow-definition-editor.scss | 32 +++++++++++++++---- .../workflow-definition-editor.tsx | 15 ++++++--- .../src/global/tailwind.css | 12 +++++++ 7 files changed, 85 insertions(+), 31 deletions(-) diff --git a/src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.scss b/src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.scss index 8d57cfb2c..98126ef3a 100644 --- a/src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.scss +++ b/src/designer/elsa-workflows-designer/src/components/activities/flowchart/flowchart.scss @@ -2,7 +2,7 @@ &.x6-graph-scroller-pannable[data-panning='false'] { cursor: default; } - width: calc(100vw - var(--activity-editor-width) - var(--activity-picker-width)) !important; + width: calc(100vw - var(--workflow-editor-width) - var(--activity-picker-width)) !important; } .x6-widget-selection-box { diff --git a/src/designer/elsa-workflows-designer/src/components/designer/panel/panel.scss b/src/designer/elsa-workflows-designer/src/components/designer/panel/panel.scss index 8fa05598d..16f21809f 100644 --- a/src/designer/elsa-workflows-designer/src/components/designer/panel/panel.scss +++ b/src/designer/elsa-workflows-designer/src/components/designer/panel/panel.scss @@ -1,6 +1,11 @@ -.panel-state-closed { +.panel-state-collapsed { - .panel { + &.panel { + + &-position-bottom { + right: var(--workflow-editor-width); + left: var(--activity-picker-width); + } &panel-position-top { width: 0; diff --git a/src/designer/elsa-workflows-designer/src/components/designer/panel/panel.tsx b/src/designer/elsa-workflows-designer/src/components/designer/panel/panel.tsx index 5031ea357..6cdc490be 100644 --- a/src/designer/elsa-workflows-designer/src/components/designer/panel/panel.tsx +++ b/src/designer/elsa-workflows-designer/src/components/designer/panel/panel.tsx @@ -45,10 +45,13 @@ export class Panel { resize = (e: MouseEvent) => { if (this.position === PanelPosition.Right) { - applyResize({ position: PanelPosition.Right, width: document.body.clientWidth - e.pageX }); + applyResize({ position: PanelPosition.Right, size: document.body.clientWidth - e.pageX }); } if (this.position === PanelPosition.Left) { - applyResize({ position: PanelPosition.Left, width: e.pageX }); + applyResize({ position: PanelPosition.Left, size: e.pageX }); + } + if (this.position === PanelPosition.Bottom) { + applyResize({ position: PanelPosition.Bottom, size: document.body.offsetHeight - e.pageY }); } }; @@ -67,6 +70,7 @@ export class Panel { const containerClassMap = []; containerClassMap[PanelPosition.Left] = 'panel-position-left left-0 top-0 bottom-0 border-r'; containerClassMap[PanelPosition.Top] = 'panel-position-top left-0 top-0 right-0 border-b'; + containerClassMap[PanelPosition.Bottom] = 'panel-position-bottom h-0 bottom-0 border-t'; containerClassMap[PanelPosition.Right] = 'panel-position-right right-0 top-0 bottom-0 border-l'; const containerCssClass = containerClassMap[position]; @@ -78,14 +82,17 @@ export class Panel { const toggleCssClass = toggleClassMap[position]; - const dragBarClass = position === PanelPosition.Left ? 'right-0' : 'left-0'; + const dragBarClassMap = { + [PanelPosition.Left]: 'right-0 h-full cursor-col-resize w-1', + [PanelPosition.Right]: 'left-0 h-full cursor-col-resize w-1', + [PanelPosition.Bottom]: 'top-0 w-full cursor-row-resize h-1', + }; + + const dragBarClass = dragBarClassMap[this.position]; return ( -
+
diff --git a/src/designer/elsa-workflows-designer/src/components/designer/panel/resize.ts b/src/designer/elsa-workflows-designer/src/components/designer/panel/resize.ts index 646136dde..6c4776e80 100644 --- a/src/designer/elsa-workflows-designer/src/components/designer/panel/resize.ts +++ b/src/designer/elsa-workflows-designer/src/components/designer/panel/resize.ts @@ -4,33 +4,36 @@ type ApplyResizeParams = { position: PanelPosition; isDefault?: boolean; isHide?: boolean; - width?: number; + size?: number; }; const positionToLocalStorage = { [PanelPosition.Right]: 'LS/rightPanelWidth', [PanelPosition.Left]: 'LS/leftPanelWidth', + [PanelPosition.Bottom]: 'LS/bottomPanelWidth', }; const positionToCssVariable = { - [PanelPosition.Right]: '--activity-editor-width', + [PanelPosition.Right]: '--workflow-editor-width', [PanelPosition.Left]: '--activity-picker-width', + [PanelPosition.Bottom]: '--activity-editor-height', }; -const positionToDefaultWidth = { +const positionToDefaultSize = { [PanelPosition.Right]: 580, [PanelPosition.Left]: 300, + [PanelPosition.Bottom]: 200, }; -function getPanelDefaultWidth(position: PanelPosition) { - return localStorage.getItem(positionToLocalStorage[position]) || positionToDefaultWidth[position]; +function getPanelDefaultSize(position: PanelPosition) { + return localStorage.getItem(positionToLocalStorage[position]) || positionToDefaultSize[position]; } -function updatePanelDefaultWidth(position: PanelPosition, width: number) { - return localStorage.setItem(positionToLocalStorage[position], width.toString()); +function updatePanelDefaultSize(position: PanelPosition, size: number) { + return localStorage.setItem(positionToLocalStorage[position], size.toString()); } -export function applyResize({ position, isDefault, isHide, width }: ApplyResizeParams) { +export function applyResize({ position, isDefault, isHide, size }: ApplyResizeParams) { const root = document.querySelector(':root'); if (isHide) { @@ -39,11 +42,11 @@ export function applyResize({ position, isDefault, isHide, width }: ApplyResizeP } if (isDefault) { - root.style.setProperty(positionToCssVariable[position], `${getPanelDefaultWidth(position)}px`); + root.style.setProperty(positionToCssVariable[position], `${getPanelDefaultSize(position)}px`); return; } - root.style.setProperty(positionToCssVariable[position], `${width}px`); - updatePanelDefaultWidth(position, width); + root.style.setProperty(positionToCssVariable[position], `${size}px`); + updatePanelDefaultSize(position, size); return; } diff --git a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.scss b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.scss index 4108be89d..b34f21867 100644 --- a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.scss +++ b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.scss @@ -1,29 +1,37 @@ :root { - --activity-editor-width: 580px; + --workflow-editor-width: 580px; --activity-picker-width: 300px; + --activity-editor-height: 200px; } elsa-canvas { left: var(--activity-picker-width); top: 54px; - right: var(--activity-editor-width); - bottom: 0; + right: var(--workflow-editor-width); + bottom: var(--activity-editor-height); } .elsa-panel-toolbar { left: var(--activity-picker-width); - right: var(--activity-editor-width); + right: var(--workflow-editor-width); } elsa-panel.panel-state-expanded.elsa-activity-picker-container { width: var(--activity-picker-width); } -elsa-panel.panel-state-expanded.elsa-activity-editor-container { - width: var(--activity-editor-width); +elsa-panel.panel-state-expanded.elsa-workflow-editor-container { + width: var(--workflow-editor-width); right: 0; left: unset; } +elsa-panel.panel-state-expanded.elsa-activity-editor-container { + height: var(--activity-editor-height); + right: var(--workflow-editor-width); + left: var(--activity-picker-width); + bottom: 0; +} + elsa-workflow-navigator { top: 70px; position: absolute; @@ -53,3 +61,15 @@ elsa-workflow-navigator { right: 0; } } + + +.activity-editor-closed { + + .activity-editor-container { + display: none; + } + + elsa-canvas { + bottom: 0; + } +} \ No newline at end of file diff --git a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx index 1ab417895..13951b266 100644 --- a/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx +++ b/src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-editor.tsx @@ -215,14 +215,20 @@ export class WorkflowDefinitionEditor { onDragOver={this.onDragOver} onDrop={this.onDrop}/> this.onActivityEditorPanelStateChanged(e.detail)}> + onExpandedStateChanged={e => this.onWorkflowEditorPanelStateChanged(e.detail)}>
{this.renderSelectedObject()}
- + this.onActivityEditorPanelStateChanged(e.detail)}> +
+
+
// ); @@ -307,7 +313,8 @@ export class WorkflowDefinitionEditor { }; private onActivityPickerPanelStateChanged = async (e: PanelStateChangedArgs) => await this.updateContainerLayout('activity-picker-closed', e.expanded) - private onActivityEditorPanelStateChanged = async (e: PanelStateChangedArgs) => await this.updateContainerLayout('object-editor-closed', e.expanded) + private onWorkflowEditorPanelStateChanged = async (e: PanelStateChangedArgs) => await this.updateContainerLayout('object-editor-closed', e.expanded) + private onActivityEditorPanelStateChanged = async (e: PanelStateChangedArgs) => await this.updateContainerLayout('activity-editor-closed', e.expanded) private onDragOver = (e: DragEvent) => { e.preventDefault(); diff --git a/src/designer/elsa-workflows-designer/src/global/tailwind.css b/src/designer/elsa-workflows-designer/src/global/tailwind.css index 7d43d697d..7f0df1012 100644 --- a/src/designer/elsa-workflows-designer/src/global/tailwind.css +++ b/src/designer/elsa-workflows-designer/src/global/tailwind.css @@ -59,6 +59,14 @@ @apply absolute py-4 bg-gray-50 border border-gray-400 text-gray-400 rounded-r z-10; } +.panel-toggle-bottom { + top: -42px; + left: 50%; + transform: translateX(-50%) rotate(270deg); + + @apply absolute py-4 bg-gray-50 border border-gray-400 text-gray-400 rounded-r z-10; +} + /* Forms */ label { @apply block text-sm font-medium text-gray-700; @@ -137,3 +145,7 @@ tbody tr td:first-child { .pager-chevron.right { @apply rounded-r-md -ml-px; } + +body { + min-height: 100vh; +} \ No newline at end of file