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

feat: Improve minimap design and position in new canvas (no-changelog) (#10429)

Browse source
This commit is contained in:
Alex Grozav 2024-08-15 13:18:04 +03:00 committed by GitHub
parent 5e1f4cf778
commit 469896ac0d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 31 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
packages/editor-ui/src/components/canvas/Canvas.vue
View file

@ -328,6 +328,14 @@ function onContextMenuAction(action: ContextMenuAction, nodeIds: string[]) {
}
}
/**
* Minimap
*/
function minimapNodeClassnameFn(node: CanvasNode) {
return `minimap-node-${node.data?.render.type.replace(/\./g, '-') ?? 'default'}`;
}
/**
* Lifecycle
*/
@ -407,7 +415,16 @@ watch(() => props.readOnly, setReadonly, {
<Background data-test-id="canvas-background" pattern-color="#aaa" :gap="GRID_SIZE" />
<MiniMap data-test-id="canvas-minimap" pannable />
<MiniMap
data-test-id="canvas-minimap"
aria-label="n8n Minimap"
:height="120"
:width="200"
:position="PanelPosition.BottomLeft"
pannable
zoomable
:node-class-name="minimapNodeClassnameFn"
/>
<Controls
data-test-id="canvas-controls"

13
packages/editor-ui/src/styles/plugins/_vueflow.scss
View file

@ -5,3 +5,16 @@
.vue-flow__resize-control.handle {
background-color: transparent;
}
.vue-flow__minimap {
margin-bottom: calc(48px + 2 * var(--spacing-xs));
.minimap-node-default {
fill: var(--color-foreground-dark);
}
.minimap-node-n8n-nodes-base-stickyNote {
opacity: 0.05;
fill: var(--color-background-dark);
}
}