mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-02-21 02:56:40 -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>
<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: {
ColorCircles,
},

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

@ -187,6 +187,15 @@
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-s: 20%;
--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) {
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,
} from '../Interface';
import { mapGetters } from 'vuex';
import { getStyleTokenValue } from '@/components/helpers';
const NODE_SIZE = 100;
const DEFAULT_START_POSITION_X = 250;
@ -1312,34 +1313,32 @@ export default mixins(
}
},
initNodeView () {
const connectionOverlays: OverlaySpec[] = [];
if (this.isReadOnly === false) {
connectionOverlays.push.apply(connectionOverlays, [
[
'Arrow',
{
location: 1,
foldback: 0.7,
width: 12,
},
],
[
'Label',
{
id: 'drop-add-node',
label: 'Drop connection<br />to create node',
cssClass: 'drop-add-node-label',
location: 0.5,
},
],
]);
}
const connectionOverlays: OverlaySpec[] = [
[
'Arrow',
{
location: 1,
width: 12,
foldback: 1,
length: 10,
},
],
[
'Label',
{
id: 'drop-add-node',
label: 'Drop connection<br />to create node',
cssClass: 'drop-add-node-label',
location: 0.5,
},
],
];
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 }],
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' },
HoverPaintStyle: { stroke: '#ff6d5a', lineWidth: 4 },
EndpointHoverStyle: { fill: '#ff6d5a', stroke: '#acd' },
@ -1379,9 +1378,10 @@ export default mixins(
info.connection.addOverlay([
'Arrow',
{
location: 0.55,
foldback: 0.7,
location: 0.5,
width: 12,
foldback: 1,
length: 10,
},
]);
}
@ -2395,31 +2395,6 @@ export default mixins(
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 {
color: #555;
font-weight: 600;