mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Fix NDV panels size on narrow screens

Browse source
This commit is contained in:
Milorad Filipovic 2025-03-05 14:58:45 +01:00
parent 8790a0df3d
commit 85ea9977b1
No known key found for this signature in database
2 changed files with 28 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
packages/frontend/editor-ui/src/components/NDVDraggablePanels.vue
View file

@ -43,6 +43,7 @@ const props = defineProps<Props>();
const isDragging = ref<boolean>(false); const isDragging = ref<boolean>(false);
const initialized = ref<boolean>(false); const initialized = ref<boolean>(false);
const containerWidth = ref<number>(uiStore.appGridWidth);
const emit = defineEmits<{ const emit = defineEmits<{
init: [{ position: number }]; init: [{ position: number }];
@ -84,28 +85,36 @@ onBeforeUnmount(() => {
ndvEventBus.off('setPositionByName', setPositionByName); ndvEventBus.off('setPositionByName', setPositionByName);
}); });
const containerWidth = computed(() => uiStore.appGridWidth); watch(
() => uiStore.appGridWidth,
(width) => {
const ndv = document.getElementById('ndv');
if (ndv) {
const { width: ndvWidth } = ndv.getBoundingClientRect();
containerWidth.value = ndvWidth;
} else {
containerWidth.value = width;
}
const minRelativeWidth = pxToRelativeWidth(MIN_PANEL_WIDTH);
const isBelowMinWidthMainPanel = mainPanelDimensions.value.relativeWidth < minRelativeWidth;
watch(containerWidth, (width) => { // Prevent the panel resizing below MIN_PANEL_WIDTH while maintain position
const minRelativeWidth = pxToRelativeWidth(MIN_PANEL_WIDTH); if (isBelowMinWidthMainPanel) {
const isBelowMinWidthMainPanel = mainPanelDimensions.value.relativeWidth < minRelativeWidth; setMainPanelWidth(minRelativeWidth);
}
// Prevent the panel resizing below MIN_PANEL_WIDTH whhile maintaing position const isBelowMinLeft = minimumLeftPosition.value > mainPanelDimensions.value.relativeLeft;
if (isBelowMinWidthMainPanel) { const isMaxRight = maximumRightPosition.value > mainPanelDimensions.value.relativeRight;
setMainPanelWidth(minRelativeWidth);
}
const isBelowMinLeft = minimumLeftPosition.value > mainPanelDimensions.value.relativeLeft; // When user is resizing from non-supported view(sub ~488px) we need to refit the panels
const isMaxRight = maximumRightPosition.value > mainPanelDimensions.value.relativeRight; if (width > MIN_WINDOW_WIDTH && isBelowMinLeft && isMaxRight) {
setMainPanelWidth(minRelativeWidth);
setPositions(getInitialLeftPosition(mainPanelDimensions.value.relativeWidth));
}
// When user is resizing from non-supported view(sub ~488px) we need to refit the panels setPositions(mainPanelDimensions.value.relativeLeft);
if (width > MIN_WINDOW_WIDTH && isBelowMinLeft && isMaxRight) { },
setMainPanelWidth(minRelativeWidth); );
setPositions(getInitialLeftPosition(mainPanelDimensions.value.relativeWidth));
}
setPositions(mainPanelDimensions.value.relativeLeft);
});
const currentNodePaneType = computed((): MainPanelType => { const currentNodePaneType = computed((): MainPanelType => {
if (!hasInputSlot.value) return 'inputless'; if (!hasInputSlot.value) return 'inputless';

1
packages/frontend/editor-ui/src/components/NodeDetailsView.vue
View file

@ -706,6 +706,7 @@ onBeforeUnmount(() => {
<template> <template>
<el-dialog <el-dialog
id="ndv"
:model-value="(!!activeNode || renaming) && !isActiveStickyNode" :model-value="(!!activeNode || renaming) && !isActiveStickyNode"
:before-close="close" :before-close="close"
:show-close="false" :show-close="false"