mirror of
https://github.com/n8n-io/n8n.git
synced 2024-09-11 13:15:28 +03:00
feat: Improve minimap design and position in new canvas (no-changelog) (#10429)
This commit is contained in:
parent
5e1f4cf778
commit
469896ac0d
@ -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"
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user