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

binary data classes

Browse source
This commit is contained in:
Mutasem 2022-03-31 21:49:14 +02:00
parent 291c235690
commit 43e0940725
1 changed files with 59 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

116
packages/editor-ui/src/components/RunData.vue
View file

@ -139,36 +139,36 @@
<div v-else-if="displayMode === 'binary'" :class="$style.dataDisplay"> <div v-else-if="displayMode === 'binary'" :class="$style.dataDisplay">
<div v-for="(binaryDataEntry, index) in binaryData" :key="index"> <div v-for="(binaryDataEntry, index) in binaryData" :key="index">
<div class="binary-data-row-index" v-if="binaryData.length > 1"> <div :class="$style.binaryIndex" v-if="binaryData.length > 1">
<div class="binary-data-cell-index"> <div>
{{index + 1}} {{index + 1}}
</div> </div>
</div> </div>
<div class="binary-data-row"> <div :class="$style.binaryRow">
<div class="binary-data-cell" v-for="(binaryData, key) in binaryDataEntry" :key="index + '_' + key"> <div :class="$style.binaryCell" v-for="(binaryData, key) in binaryDataEntry" :key="index + '_' + key">
<div class="binary-data-information"> <div>
<div class="binary-data-cell-name"> <div :class="$style.binaryHeader">
{{key}} {{key}}
</div> </div>
<div v-if="binaryData.fileName"> <div v-if="binaryData.fileName">
<div class="label">{{ $locale.baseText('runData.fileName') }}: </div> <div><n8n-text size="small" :bold="true">{{ $locale.baseText('runData.fileName') }}: </n8n-text></div>
<div class="value">{{binaryData.fileName}}</div> <div :class="$style.binaryValue">{{binaryData.fileName}}</div>
</div> </div>
<div v-if="binaryData.directory"> <div v-if="binaryData.directory">
<div class="label">{{ $locale.baseText('runData.directory') }}: </div> <div><n8n-text size="small" :bold="true">{{ $locale.baseText('runData.directory') }}: </n8n-text></div>
<div class="value">{{binaryData.directory}}</div> <div :class="$style.binaryValue">{{binaryData.directory}}</div>
</div> </div>
<div v-if="binaryData.fileExtension"> <div v-if="binaryData.fileExtension">
<div class="label">{{ $locale.baseText('runData.fileExtension') }}:</div> <div><n8n-text size="small" :bold="true">{{ $locale.baseText('runData.fileExtension') }}:</n8n-text></div>
<div class="value">{{binaryData.fileExtension}}</div> <div :class="$style.binaryValue">{{binaryData.fileExtension}}</div>
</div> </div>
<div v-if="binaryData.mimeType"> <div v-if="binaryData.mimeType">
<div class="label">{{ $locale.baseText('runData.mimeType') }}: </div> <div><n8n-text size="small" :bold="true">{{ $locale.baseText('runData.mimeType') }}: </n8n-text></div>
<div class="value">{{binaryData.mimeType}}</div> <div :class="$style.binaryValue">{{binaryData.mimeType}}</div>
</div> </div>
<div class="binary-data-show-data-button-wrapper"> <div :class="$style.binaryButtonContainer">
<n8n-button size="small" :label="$locale.baseText('runData.showBinaryData')" class="binary-data-show-data-button" @click="displayBinaryData(index, key)" /> <n8n-button size="small" :label="$locale.baseText('runData.showBinaryData')" class="binary-data-show-data-button" @click="displayBinaryData(index, key)" />
</div> </div>
</div> </div>
@ -839,79 +839,63 @@ export default mixins(
padding: 5px; padding: 5px;
} }
</style> .binaryIndex {
display: block;
padding: var(--spacing-2xs);
<style lang="scss">
.binary-data-row {
display: inline-flex;
font-size: var(--font-size-2xs); font-size: var(--font-size-2xs);
.binary-data-cell { > * {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: var(--border-radius-base);
text-align: center;
background-color: var(--color-foreground-xdark);
font-weight: var(--font-weight-bold);
color: var(--color-text-xlight);
}
}
.binaryRow {
display: inline-flex;
font-size: var(--font-size-2xs);
}
.binaryCell {
display: inline-block; display: inline-block;
width: 300px; width: 300px;
overflow: hidden; overflow: hidden;
background-color: #fff; background-color: #fff;
margin-right: var(--spacing-s); margin-right: var(--spacing-s);
margin-bottom: var(--spacing-s); margin-bottom: var(--spacing-s);
border-radius: 3px; border-radius: var(--border-radius-base);
-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.05); border: var(--border-base);
-moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.05); padding: var(--spacing-s);
box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.05); }
.binary-data-information { .binaryHeader {
margin: 1em;
.binary-data-cell-name {
color: $--color-primary; color: $--color-primary;
font-weight: 600; font-weight: 600;
font-size: 1.2em; font-size: 1.2em;
padding-bottom: 0.5em; padding-bottom: 0.5em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
}
.binary-data-show-data-button-wrapper {
margin-top: 1.5em;
text-align: center;
}
.label {
padding-top: 0.5em;
font-weight: bold;
}
.value {
white-space: initial;
word-wrap: break-word;
}
}
}
} }
.binary-data-row-index { .binaryButtonContainer {
display: block; margin-top: 1.5em;
padding: 1em 1em 0.25em 1em;
font-size: var(--font-size-2xs);
margin-bottom: var(--spacing-2xs);
.binary-data-cell-index {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 5px;
text-align: center; text-align: center;
padding: 0 0.1em; }
background-color: $--custom-header-background;
font-weight: 600; .binaryValue {
color: #fff; white-space: initial;
} word-wrap: break-word;
} }
</style> </style>
<style lang="scss"> <style lang="scss">
.vjs-checkbox { .vjs-checkbox {
position: absolute; position: absolute;