From 1d31a3caa693a6944b4e46ea46c0458f612bf35b Mon Sep 17 00:00:00 2001 From: Sipke Schoorstra Date: Fri, 24 Jun 2022 21:36:40 +0200 Subject: [PATCH] Revert "added bottom panel with resize functionality (#3149)" This reverts commit e71d39d59eec370ff35e7677d1bbe992c0619cda. --- .../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, 31 insertions(+), 85 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 98126ef3a..8d57cfb2c 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(--workflow-editor-width) - var(--activity-picker-width)) !important; + width: calc(100vw - var(--activity-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 16f21809f..8fa05598d 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,11 +1,6 @@ -.panel-state-collapsed { +.panel-state-closed { - &.panel { - - &-position-bottom { - right: var(--workflow-editor-width); - left: var(--activity-picker-width); - } + .panel { &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 6cdc490be..5031ea357 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,13 +45,10 @@ export class Panel { resize = (e: MouseEvent) => { if (this.position === PanelPosition.Right) { - applyResize({ position: PanelPosition.Right, size: document.body.clientWidth - e.pageX }); + applyResize({ position: PanelPosition.Right, width: document.body.clientWidth - e.pageX }); } if (this.position === PanelPosition.Left) { - applyResize({ position: PanelPosition.Left, size: e.pageX }); - } - if (this.position === PanelPosition.Bottom) { - applyResize({ position: PanelPosition.Bottom, size: document.body.offsetHeight - e.pageY }); + applyResize({ position: PanelPosition.Left, width: e.pageX }); } }; @@ -70,7 +67,6 @@ 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]; @@ -82,17 +78,14 @@ export class Panel { const toggleCssClass = toggleClassMap[position]; - 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]; + const dragBarClass = position === PanelPosition.Left ? 'right-0' : 'left-0'; 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 6c4776e80..646136dde 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,36 +4,33 @@ type ApplyResizeParams = { position: PanelPosition; isDefault?: boolean; isHide?: boolean; - size?: number; + width?: number; }; const positionToLocalStorage = { [PanelPosition.Right]: 'LS/rightPanelWidth', [PanelPosition.Left]: 'LS/leftPanelWidth', - [PanelPosition.Bottom]: 'LS/bottomPanelWidth', }; const positionToCssVariable = { - [PanelPosition.Right]: '--workflow-editor-width', + [PanelPosition.Right]: '--activity-editor-width', [PanelPosition.Left]: '--activity-picker-width', - [PanelPosition.Bottom]: '--activity-editor-height', }; -const positionToDefaultSize = { +const positionToDefaultWidth = { [PanelPosition.Right]: 580, [PanelPosition.Left]: 300, - [PanelPosition.Bottom]: 200, }; -function getPanelDefaultSize(position: PanelPosition) { - return localStorage.getItem(positionToLocalStorage[position]) || positionToDefaultSize[position]; +function getPanelDefaultWidth(position: PanelPosition) { + return localStorage.getItem(positionToLocalStorage[position]) || positionToDefaultWidth[position]; } -function updatePanelDefaultSize(position: PanelPosition, size: number) { - return localStorage.setItem(positionToLocalStorage[position], size.toString()); +function updatePanelDefaultWidth(position: PanelPosition, width: number) { + return localStorage.setItem(positionToLocalStorage[position], width.toString()); } -export function applyResize({ position, isDefault, isHide, size }: ApplyResizeParams) { +export function applyResize({ position, isDefault, isHide, width }: ApplyResizeParams) { const root = document.querySelector(':root'); if (isHide) { @@ -42,11 +39,11 @@ export function applyResize({ position, isDefault, isHide, size }: ApplyResizePa } if (isDefault) { - root.style.setProperty(positionToCssVariable[position], `${getPanelDefaultSize(position)}px`); + root.style.setProperty(positionToCssVariable[position], `${getPanelDefaultWidth(position)}px`); return; } - root.style.setProperty(positionToCssVariable[position], `${size}px`); - updatePanelDefaultSize(position, size); + root.style.setProperty(positionToCssVariable[position], `${width}px`); + updatePanelDefaultWidth(position, width); 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 b34f21867..4108be89d 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,37 +1,29 @@ :root { - --workflow-editor-width: 580px; + --activity-editor-width: 580px; --activity-picker-width: 300px; - --activity-editor-height: 200px; } elsa-canvas { left: var(--activity-picker-width); top: 54px; - right: var(--workflow-editor-width); - bottom: var(--activity-editor-height); + right: var(--activity-editor-width); + bottom: 0; } .elsa-panel-toolbar { left: var(--activity-picker-width); - right: var(--workflow-editor-width); + right: var(--activity-editor-width); } elsa-panel.panel-state-expanded.elsa-activity-picker-container { width: var(--activity-picker-width); } -elsa-panel.panel-state-expanded.elsa-workflow-editor-container { - width: var(--workflow-editor-width); +elsa-panel.panel-state-expanded.elsa-activity-editor-container { + width: var(--activity-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; @@ -61,15 +53,3 @@ 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 2bceae1ee..ee30d1368 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 @@ -214,20 +214,14 @@ export class WorkflowDefinitionEditor { onDragOver={this.onDragOver} onDrop={this.onDrop}/> this.onWorkflowEditorPanelStateChanged(e.detail)}> + onExpandedStateChanged={e => this.onActivityEditorPanelStateChanged(e.detail)}>
{this.renderSelectedObject()}
- this.onActivityEditorPanelStateChanged(e.detail)}> -
-
- +
); } @@ -312,8 +306,7 @@ export class WorkflowDefinitionEditor { }; private onActivityPickerPanelStateChanged = async (e: PanelStateChangedArgs) => await this.updateContainerLayout('activity-picker-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 onActivityEditorPanelStateChanged = async (e: PanelStateChangedArgs) => await this.updateContainerLayout('object-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 7f0df1012..7d43d697d 100644 --- a/src/designer/elsa-workflows-designer/src/global/tailwind.css +++ b/src/designer/elsa-workflows-designer/src/global/tailwind.css @@ -59,14 +59,6 @@ @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; @@ -145,7 +137,3 @@ tbody tr td:first-child { .pager-chevron.right { @apply rounded-r-md -ml-px; } - -body { - min-height: 100vh; -} \ No newline at end of file