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 styles

Browse source
This commit is contained in:
Mutasem 2022-08-05 15:13:45 +02:00
parent 26c08e041e
commit 4036e9131d
3 changed files with 32 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/design-system/src/components/N8nTree/Tree.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div class="n8n-tree"> <div class="n8n-tree">
<n8n-tree-node :input="input"></n8n-tree-node> <n8n-tree-node :input="input" :path="path"></n8n-tree-node>
</div> </div>
</template> </template>
@ -17,6 +17,10 @@ export default Vue.extend({
input: { input: {
type: Object, type: Object,
}, },
path: {
type: String,
default: '',
},
}, },
computed: { computed: {
}, },

27
packages/design-system/src/components/N8nTree/TreeNode.vue
View file

@ -1,15 +1,14 @@
<template> <template>
<div class="n8n-tree-node"> <div class="n8n-tree-node">
<div v-if="isSimple(input)">{{ input }}</div> <div v-for="(label, i) in Object.keys(input)" :key="i" :class="{[$style.indent]: depth > 0}">
<div v-else v-for="(label, i) in Object.keys(input)" :key="i">
<div :class="$style.simple" v-if="isSimple(input[label])"> <div :class="$style.simple" v-if="isSimple(input[label])">
<span>{{ label }} :</span> <span>{{ label }} :&nbsp;</span>
<span>{{ input[label] }}</span> <span :class="$style.value">{{ input[label] }}</span>
</div> </div>
<div v-else> <div v-else>
<span>{{ label }}</span> <span>{{ label }}</span>
<div :class="$style.indent"> <div>
<n8n-tree-node :input="input[label]" /> <n8n-tree-node :path="getPath(label)" :depth="depth + 1" :input="input[label]" />
</div> </div>
</div> </div>
</div> </div>
@ -27,6 +26,14 @@ export default Vue.extend({
input: { input: {
type: Object, type: Object,
}, },
path: {
type: String,
default: '',
},
depth: {
type: Number,
default: 0,
},
}, },
computed: { computed: {
}, },
@ -34,6 +41,9 @@ export default Vue.extend({
isSimple(data: unkown): boolean { isSimple(data: unkown): boolean {
return typeof data !== 'object'; return typeof data !== 'object';
}, },
getPath(key: string): string {
return `${this.path}["${key}"]`;
},
}, },
}); });
</script> </script>
@ -48,4 +58,9 @@ export default Vue.extend({
margin-left: var(--spacing-l); margin-left: var(--spacing-l);
} }
.value {
word-break: break-all;
}
</style> </style>

10
packages/editor-ui/src/components/RunDataTable.vue
View file

@ -55,8 +55,8 @@
@mouseenter="onMouseEnterCell" @mouseenter="onMouseEnterCell"
@mouseleave="onMouseLeaveCell" @mouseleave="onMouseLeaveCell"
> >
<!-- <span v-if="isSimple()">{{ [null, undefined].includes(data) ? '&nbsp;' : data }}</span> --> <span v-if="isSimple(data)">{{ [null, undefined].includes(data) ? '&nbsp;' : data }}</span>
<n8n-tree :input="data" /> <n8n-tree path="$json" :input="data" />
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -167,6 +167,9 @@ export default Vue.extend({
}); });
}, 1000); // ensure dest data gets set if drop }, 1000); // ensure dest data gets set if drop
}, },
isSimple(data: unknown): boolean {
return typeof data !== 'object';
},
}, },
watch: { watch: {
focusedMappableInput (curr: boolean) { focusedMappableInput (curr: boolean) {
@ -206,15 +209,14 @@ export default Vue.extend({
border-left: var(--border-base); border-left: var(--border-base);
position: sticky; position: sticky;
top: 0; top: 0;
max-width: 300px;
} }
td { td {
vertical-align: top;
padding: var(--spacing-2xs); padding: var(--spacing-2xs);
border-bottom: var(--border-base); border-bottom: var(--border-base);
border-left: var(--border-base); border-left: var(--border-base);
overflow-wrap: break-word; overflow-wrap: break-word;
max-width: 300px;
white-space: pre-wrap; white-space: pre-wrap;
} }