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

update connection style

Browse source
This commit is contained in:
Mutasem 2021-10-12 15:53:47 +02:00
parent a1f440d9ab
commit c449879460
4 changed files with 41 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/design-system/src/styleguide/colors.stories.mdx
View file

@ -109,7 +109,7 @@ import ColorCircles from './ColorCircles.vue';
<Canvas> <Canvas>
<Story name="foreground"> <Story name="foreground">
{{ {{
template: `<color-circles :colors="['--color-foreground-base', '--color-foreground-light', '--color-foreground-xlight']" />`, template: `<color-circles :colors="['--color-foreground-dark', '--color-foreground-base', '--color-foreground-light', '--color-foreground-xlight']" />`,
components: { components: {
ColorCircles, ColorCircles,
}, },

9
packages/design-system/theme/src/_tokens.scss
View file

@ -187,6 +187,15 @@
var(--color-text-xlight-l) var(--color-text-xlight-l)
); );
--color-foreground-dark-h: 228;
--color-foreground-dark-s: 9.6%;
--color-foreground-dark-l: 79.6%;
--color-foreground-dark: hsl(
var(--color-foreground-dark-h),
var(--color-foreground-dark-s),
var(--color-foreground-dark-l)
);
--color-foreground-base-h: 220; --color-foreground-base-h: 220;
--color-foreground-base-s: 20%; --color-foreground-base-s: 20%;
--color-foreground-base-l: 88.2%; --color-foreground-base-l: 88.2%;

5
packages/editor-ui/src/components/helpers.ts
View file

@ -19,3 +19,8 @@ export function convertToHumanReadableDate (epochTime: number) {
export function getAppNameFromCredType(name: string) { export function getAppNameFromCredType(name: string) {
return name.split(' ').filter((word) => !KEYWORDS_TO_FILTER.includes(word)).join(' '); return name.split(' ').filter((word) => !KEYWORDS_TO_FILTER.includes(word)).join(' ');
} }
export function getStyleTokenValue(name: string) {
const style = getComputedStyle(document.body);
return style.getPropertyValue(name);
}

77
packages/editor-ui/src/views/NodeView.vue
View file

@ -164,6 +164,7 @@ import {
IExecutionsSummary, IExecutionsSummary,
} from '../Interface'; } from '../Interface';
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import { getStyleTokenValue } from '@/components/helpers';
const NODE_SIZE = 100; const NODE_SIZE = 100;
const DEFAULT_START_POSITION_X = 250; const DEFAULT_START_POSITION_X = 250;
@ -1312,34 +1313,32 @@ export default mixins(
} }
}, },
initNodeView () { initNodeView () {
const connectionOverlays: OverlaySpec[] = []; const connectionOverlays: OverlaySpec[] = [
if (this.isReadOnly === false) { [
connectionOverlays.push.apply(connectionOverlays, [ 'Arrow',
[ {
'Arrow', location: 1,
{ width: 12,
location: 1, foldback: 1,
foldback: 0.7, length: 10,
width: 12, },
}, ],
], [
[ 'Label',
'Label', {
{ id: 'drop-add-node',
id: 'drop-add-node', label: 'Drop connection<br />to create node',
label: 'Drop connection<br />to create node', cssClass: 'drop-add-node-label',
cssClass: 'drop-add-node-label', location: 0.5,
location: 0.5, },
}, ],
], ];
]);
}
this.instance.importDefaults({ this.instance.importDefaults({
Connector: ['Flowchart', { cornerRadius: 8, stub: 50, alwaysRespectStubs: true }], Connector: ['Flowchart', { cornerRadius: 8, stub: 60, gap: 5, alwaysRespectStubs: false}],
Endpoint: ['Dot', { radius: 5 }], Endpoint: ['Dot', { radius: 5 }],
DragOptions: { cursor: 'pointer', zIndex: 5000 }, DragOptions: { cursor: 'pointer', zIndex: 5000 },
PaintStyle: { strokeWidth: 2, stroke: '#334455' }, PaintStyle: { strokeWidth: 2, stroke: getStyleTokenValue('--color-foreground-dark') },
EndpointStyle: { radius: 9, fill: '#acd', stroke: 'red' }, EndpointStyle: { radius: 9, fill: '#acd', stroke: 'red' },
HoverPaintStyle: { stroke: '#ff6d5a', lineWidth: 4 }, HoverPaintStyle: { stroke: '#ff6d5a', lineWidth: 4 },
EndpointHoverStyle: { fill: '#ff6d5a', stroke: '#acd' }, EndpointHoverStyle: { fill: '#ff6d5a', stroke: '#acd' },
@ -1379,9 +1378,10 @@ export default mixins(
info.connection.addOverlay([ info.connection.addOverlay([
'Arrow', 'Arrow',
{ {
location: 0.55, location: 0.5,
foldback: 0.7,
width: 12, width: 12,
foldback: 1,
length: 10,
}, },
]); ]);
} }
@ -2395,31 +2395,6 @@ export default mixins(
white-space: nowrap; white-space: nowrap;
} }
.delete-connection {
font-weight: 500;
}
.remove-connection-label {
font-size: 12px;
color: #fff;
line-height: 13px;
border-radius: 15px;
height: 15px;
background-color: #334455;
position: relative;
height: 15px;
width: 15px;
text-align: center;
&:hover {
background-color: $--color-primary;
font-size: 20px;
line-height: 17px;
height: 20px;
width: 20px;
}
}
.drop-add-node-label { .drop-add-node-label {
color: #555; color: #555;
font-weight: 600; font-weight: 600;