mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-31 23:47:28 -08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

add selected state

Browse source
This commit is contained in:
Mutasem 2021-10-27 13:24:04 +02:00
parent f96a8f841c
commit e9e7d1f2a4
3 changed files with 38 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -16,7 +16,7 @@ import VariableTable from './VariableTable.vue';
<Canvas> <Canvas>
<Story name="border-radius"> <Story name="border-radius">
{{ {{
template: `<variable-table :variables="['--border-radius-small','--border-radius-base', '--border-radius-large']" />`, template: `<variable-table :variables="['--border-radius-small','--border-radius-base', '--border-radius-large', '--border-radius-xlarge']" />`,
components: { components: {
VariableTable, VariableTable,
}, },

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

@ -277,6 +277,7 @@
var(--color-background-xlight-l) var(--color-background-xlight-l)
); );
--border-radius-xlarge: 12px;
--border-radius-large: 8px; --border-radius-large: 8px;
--border-radius-base: 4px; --border-radius-base: 4px;
--border-radius-small: 2px; --border-radius-small: 2px;

46
packages/editor-ui/src/components/Node.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="node-wrapper" :style="nodePosition"> <div :class="{'node-wrapper': true, 'has-subtitles': !!nodeSubtitle}" :style="nodePosition">
<div class="node-default" :ref="data.name" :style="nodeStyle" :class="nodeClass" @dblclick="setNodeActive" @click.left="mouseLeftClick" v-touch:start="touchStart" v-touch:end="touchEnd"> <div class="node-default" :ref="data.name" :style="nodeStyle" :class="nodeClass" @dblclick="setNodeActive" @click.left="mouseLeftClick" v-touch:start="touchStart" v-touch:end="touchEnd">
<div v-if="hasIssues" class="node-info-icon node-issues"> <div v-if="hasIssues" class="node-info-icon node-issues">
<n8n-tooltip placement="top" > <n8n-tooltip placement="top" >
@ -248,7 +248,7 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.node-wrapper { .node-wrapper {
position: absolute; position: absolute;
@ -283,12 +283,13 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
} }
.node-default { .node-default {
position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #fff; background-color: #fff;
border-radius: var(--border-radius-large); border-radius: var(--border-radius-large);
text-align: center; text-align: center;
z-index: 24; z-index: 5;
cursor: pointer; cursor: pointer;
color: #444; color: #444;
border: 2px solid var(--color-foreground-xdark); border: 2px solid var(--color-foreground-xdark);
@ -412,9 +413,21 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
} }
} }
.selected {
position: absolute;
top: -8px;
left: -8px;
background-color: var(--color-foreground-base);
height: 116px;
width: 116px;
border-radius: var(--border-radius-xlarge);
opacity: 0.8;
z-index: 0;
}
</style> </style>
<style> <style lang="scss">
.el-badge__content { .el-badge__content {
border-width: 2px; border-width: 2px;
background-color: #67c23a; background-color: #67c23a;
@ -422,7 +435,7 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
/** connector */ /** connector */
.jtk-connector { .jtk-connector {
z-index:4; z-index: 3;
} }
.jtk-connector path { .jtk-connector path {
@ -459,11 +472,24 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
z-index: 9; z-index: 9;
} }
.jtk-drag-selected .node-default { .jtk-drag-selected {
/* https://www.cssmatic.com/box-shadow */ &.has-subtitles:before {
-webkit-box-shadow: 0px 0px 6px 2px rgba(50, 75, 216, 0.37); height: 166px;
-moz-box-shadow: 0px 0px 6px 2px rgba(50, 75, 216, 0.37); }
box-shadow: 0px 0px 6px 2px rgba(50, 75, 216, 0.37);
&:before {
content: ' ';
display: block;
position: absolute;
top: -8px;
left: -8px;
background-color: var(--color-foreground-base);
height: 140px;
width: 116px;
border-radius: var(--border-radius-xlarge);
opacity: 0.8;
z-index: 0;
}
} }
.disabled .node-icon img { .disabled .node-icon img {