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

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

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

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

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