mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 18:12:04 +00:00
✨ Implement design system (#2050)
* split up main, sass imports, import new nds * migrate most buttons * update sizes based on feedback * update copy buttons * update executions list * fix issues * force message box buttons * update warning color * update more buttons * wrap message box buttons * update last component * lint fixes * add build report step * breakout imports * set package.json * fix notification bug * clean up imports * use build directories directly * update imports * remove xl size * update number inputs * fix input width * update line height, fix icon bug * fix up editor * fix spacing between buttons * Reset line height * revert changes to this * revert changes * clean up button sizes * change to outline * update select height * update tooltip * remove build report step * clean up impl * remove regenerator runtime * add design system repo * apply editorconfig * apply editor config prettier * lint issue * switch to tabs * switch to single space * update eslintrc * remove git modules * update sass package * support dart sass * add build * update dependency * update contributing.md * set repo * update versions * add tslint step * update spacing to spaces, add dev step * add test step * add test step * update browser lint rc * remove .github * delete .gitignore * set comment for icons * remove preview link * update button interface * update types * set types * clean up intro * update intro * remove assets * move into preview * remove headline comment * reduce theme build * loading executions * match deps versions * match deps versions * fix lint issues * fix lint issues * update callback * disable codacy for docs.css * fix storybook issues * add design system to docker image * update spacing around delete sort button * set line height to stop juggling headline * update sizes * clean up vars * fix scss issues * update button vars * add shade color * fix button without click * fix buttons bug * fix bug with executions list * clean up theme * update link styling * fix typo * run prettier * 🎨 code format * 🎨 code format * 🔥 remove empty files * ✨ N8n 2284 new inputs (#2075) * implement inputs * prettier fixes * revert unnessary change * move input components and tooltip * remove form elements * move select * update input placements * update sizes * update credentails * clean up select size * fix caret issue * update inputs * clean up select * fix tags dropdown border * clean up tags input * fix workflow name bug * clean up select here * add sizes template * fix option caret * fix input sizes * update date input size * remove tags input override * update prop * update input size * center run data inputs * update disabled colors * update execution header * update scrollbar * update text area spacing * fix items in header * update run data tooltip * remove popover * update prefix positions * add filterable demo * address design issues * fix input issues, flip boolean input to text * update input sufffix colors * remove override * speed up switch, fix toggle spacing issue * update icon * remove icon classes * clean up inputs * clean up inputs with icons * update input spacing again * update suffix position * build * Add support for xlarge inputs * fix input issues * fix input issue * update listeners * update number inputs for settings * update append/prepend spacing * clean up inputs, set expression input as text * fix type errors * fix workflow number input * fix tags dropdown bug * fix bugs * fix menu item bug * remove font weight from link element * remove default * fix select option * fix contrast issues * allow overflow x for multi selects * fix icon * update options select * fix issue that resolves expression to null * update how actions are centered * fix up selects * update selects to support limiting size * update option styles * ⚡ Apply suggestions BHesseldieck Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com> * 🎨 code format Co-authored-by: Jan <janober@users.noreply.github.com> Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com> Co-authored-by: Ben Hesseldieck <b.hesseldieck@gmail.com> * ⏪ Revert "🔥 remove empty files" This reverts commit e91ace4e52403f4a6b00b7be68b86fc48b7d8fef. * ⚡ Remove private from n8n-design-system package * 🎨 Change to spaces to stay consistent with editorconfig & others package files * ⚡ Fix year in license Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com> Co-authored-by: Ben Hesseldieck <b.hesseldieck@gmail.com> Co-authored-by: Jan <janober@users.noreply.github.com> Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>
This commit is contained in:
Mutasem Aldmour
@@ -2,72 +2,76 @@
|
||||
<div class="run-data-view" v-loading="workflowRunning">
|
||||
<BinaryDataDisplay :windowVisible="binaryDataDisplayVisible" :displayData="binaryDataDisplayData" @close="closeBinaryDataDisplay"/>
|
||||
|
||||
<el-button
|
||||
<div
|
||||
v-if="node && !isReadOnly"
|
||||
:disabled="workflowRunning"
|
||||
@click.stop="runWorkflow(node.name, 'RunData.ExecuteNodeButton')"
|
||||
class="execute-node-button"
|
||||
:title="`Executes this ${node.name} node after executing any previous nodes that have not yet returned data`"
|
||||
>
|
||||
<div class="run-icon-button">
|
||||
<font-awesome-icon v-if="!workflowRunning" icon="play-circle"/>
|
||||
<font-awesome-icon v-else icon="spinner" spin />
|
||||
</div>
|
||||
|
||||
Execute Node
|
||||
</el-button>
|
||||
<n8n-button
|
||||
:title="`Executes this ${node.name} node after executing any previous nodes that have not yet returned data`"
|
||||
:loading="workflowRunning"
|
||||
icon="play-circle"
|
||||
label="Execute Node"
|
||||
@click.stop="runWorkflow(node.name, 'RunData.ExecuteNodeButton')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="header">
|
||||
<div class="title-text">
|
||||
<strong v-if="dataCount < maxDisplayItems">
|
||||
Items: {{ dataCount }}
|
||||
</strong>
|
||||
<strong v-else>Items:
|
||||
<el-select v-model="maxDisplayItems" @click.stop>
|
||||
<el-option v-for="option in maxDisplayItemsOptions" :label="option" :value="option" :key="option" />
|
||||
</el-select> /
|
||||
{{ dataCount }}
|
||||
</strong>
|
||||
<div v-else class="title-text">
|
||||
<strong>Items:</strong>
|
||||
<span class="opts">
|
||||
<n8n-select size="mini" v-model="maxDisplayItems" @click.stop>
|
||||
<n8n-option v-for="option in maxDisplayItemsOptions" :label="option" :value="option" :key="option" />
|
||||
</n8n-select>
|
||||
</span> /
|
||||
<strong>{{ dataCount }}</strong>
|
||||
</div>
|
||||
|
||||
<el-popover
|
||||
<n8n-tooltip
|
||||
v-if="runMetadata"
|
||||
placement="right"
|
||||
width="400"
|
||||
trigger="hover"
|
||||
>
|
||||
<strong>Start Time:</strong> {{runMetadata.startTime}}<br/>
|
||||
<strong>Execution Time:</strong> {{runMetadata.executionTime}} ms
|
||||
<font-awesome-icon icon="info-circle" class="primary-color" slot="reference" />
|
||||
</el-popover>
|
||||
<div slot="content">
|
||||
<strong>Start Time:</strong> {{runMetadata.startTime}}<br/>
|
||||
<strong>Execution Time:</strong> {{runMetadata.executionTime}} ms
|
||||
</div>
|
||||
<font-awesome-icon icon="info-circle" class="primary-color" />
|
||||
</n8n-tooltip>
|
||||
<span v-if="maxOutputIndex > 0">
|
||||
| Output:
|
||||
<el-select v-model="outputIndex" @click.stop>
|
||||
<el-option v-for="option in (maxOutputIndex + 1)" :label="getOutputName(option-1)" :value="option -1" :key="option">
|
||||
</el-option>
|
||||
</el-select>
|
||||
| Output:
|
||||
</span>
|
||||
<span class="opts" v-if="maxOutputIndex > 0" >
|
||||
<n8n-select size="mini" v-model="outputIndex" @click.stop>
|
||||
<n8n-option v-for="option in (maxOutputIndex + 1)" :label="getOutputName(option-1)" :value="option -1" :key="option">
|
||||
</n8n-option>
|
||||
</n8n-select>
|
||||
</span>
|
||||
<span v-if="maxRunIndex > 0">
|
||||
| Data of Execution:
|
||||
<el-select v-model="runIndex" @click.stop>
|
||||
<el-option v-for="option in (maxRunIndex + 1)" :label="option + '/' + (maxRunIndex+1)" :value="option-1" :key="option">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<span v-if="maxRunIndex > 0">
|
||||
| Data of Execution:
|
||||
</span>
|
||||
<span class="opts">
|
||||
<n8n-select v-if="maxRunIndex > 0" size="mini" v-model="runIndex" @click.stop>
|
||||
<n8n-option v-for="option in (maxRunIndex + 1)" :label="option + '/' + (maxRunIndex+1)" :value="option-1" :key="option">
|
||||
</n8n-option>
|
||||
</n8n-select>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<div v-if="node && workflowRunData !== null && workflowRunData.hasOwnProperty(node.name) && !workflowRunData[node.name][runIndex].error" class="title-data-display-selector" @click.stop>
|
||||
<div v-if="hasNodeRun && !hasRunError" class="title-data-display-selector" @click.stop>
|
||||
<el-radio-group v-model="displayMode" size="mini">
|
||||
<el-radio-button label="JSON" :disabled="showData === false"></el-radio-button>
|
||||
<el-radio-button label="Table"></el-radio-button>
|
||||
<el-radio-button label="Binary" v-if="binaryData.length !== 0"></el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="select-button" v-if="displayMode === 'JSON' && state.path !== deselectedPlaceholder">
|
||||
<div v-if="hasNodeRun && !hasRunError && displayMode === 'JSON' && state.path !== deselectedPlaceholder" class="select-button">
|
||||
<el-dropdown trigger="click" @command="handleCopyClick">
|
||||
<span class="el-dropdown-link">
|
||||
<el-button class="retry-button" circle type="text" size="small" title="Copy">
|
||||
<font-awesome-icon icon="copy" />
|
||||
</el-button>
|
||||
<n8n-icon-button title="Copy to Clipboard" icon="copy" />
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item :command="{command: 'itemPath'}">Copy Item Path</el-dropdown-item>
|
||||
@@ -75,7 +79,6 @@
|
||||
<el-dropdown-item :command="{command: 'value'}">Copy Value</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-display-content">
|
||||
@@ -84,7 +87,7 @@
|
||||
<NodeErrorView :error="workflowRunData[node.name][runIndex].error" />
|
||||
</div>
|
||||
<span v-else>
|
||||
<div v-if="showData === false" class="to-much-data">
|
||||
<div v-if="showData === false" class="too-much-data">
|
||||
<h3>
|
||||
Node returned a large amount of data
|
||||
</h3>
|
||||
@@ -96,10 +99,11 @@
|
||||
If you do decide to display it, avoid the JSON view!
|
||||
</div>
|
||||
|
||||
<el-button size="small" @click="displayMode = 'Table';showData = true;">
|
||||
<font-awesome-icon icon="eye"/>
|
||||
Display Data Anyway
|
||||
</el-button>
|
||||
<n8n-button
|
||||
icon="eye"
|
||||
label="Display Data Anyway"
|
||||
@click="displayMode = 'Table';showData = true;"
|
||||
/>
|
||||
</div>
|
||||
<div v-else-if="['JSON', 'Table'].includes(displayMode)">
|
||||
<div v-if="jsonData.length === 0" class="no-data">
|
||||
@@ -169,11 +173,8 @@
|
||||
<div class="value">{{binaryData.mimeType}}</div>
|
||||
</div>
|
||||
|
||||
<!-- <el-button @click="displayBinaryData(binaryData)"> -->
|
||||
<div class="binary-data-show-data-button-wrapper">
|
||||
<el-button size="mini" class="binary-data-show-data-button" @click="displayBinaryData(index, key)">
|
||||
Show Binary Data
|
||||
</el-button>
|
||||
<n8n-button size="small" label="Show Binary Data" class="binary-data-show-data-button" @click="displayBinaryData(index, key)" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -270,6 +271,12 @@ export default mixins(
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
hasNodeRun(): boolean {
|
||||
return Boolean(this.node && this.workflowRunData && this.workflowRunData.hasOwnProperty(this.node.name));
|
||||
},
|
||||
hasRunError(): boolean {
|
||||
return Boolean(this.node && this.workflowRunData && this.workflowRunData[this.node.name] && this.workflowRunData[this.node.name][this.runIndex] && this.workflowRunData[this.node.name][this.runIndex].error);
|
||||
},
|
||||
workflowRunning (): boolean {
|
||||
return this.$store.getters.isActionActive('workflowRunning');
|
||||
},
|
||||
@@ -649,6 +656,7 @@ export default mixins(
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow-y: auto;
|
||||
line-height: 1.5;
|
||||
|
||||
.binary-data-row {
|
||||
display: inline-flex;
|
||||
@@ -680,11 +688,6 @@ export default mixins(
|
||||
.binary-data-show-data-button-wrapper {
|
||||
margin-top: 1.5em;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
.binary-data-show-data-button {
|
||||
width: 130px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
@@ -718,6 +721,8 @@ export default mixins(
|
||||
}
|
||||
|
||||
.json-data {
|
||||
line-height: 1.5;
|
||||
|
||||
&.vjs-tree {
|
||||
color: $--custom-input-font;
|
||||
}
|
||||
@@ -730,7 +735,7 @@ export default mixins(
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.to-much-data {
|
||||
.too-much-data {
|
||||
margin: 1em;
|
||||
text-align: center;
|
||||
|
||||
@@ -767,27 +772,16 @@ export default mixins(
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
height: 30px;
|
||||
width: 140px;
|
||||
padding: 7px;
|
||||
border-radius: 13px;
|
||||
color: $--color-primary;
|
||||
border: 1px solid $--color-primary;
|
||||
background-color: #fff;
|
||||
}
|
||||
.execute-node-button:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.run-icon-button {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding-top: 10px;
|
||||
padding-left: 10px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
|
||||
.select-button {
|
||||
height: 30px;
|
||||
top: 50px;
|
||||
@@ -799,8 +793,8 @@ export default mixins(
|
||||
}
|
||||
|
||||
.title-text {
|
||||
display: inline-block;
|
||||
line-height: 30px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-data-display-selector {
|
||||
@@ -808,7 +802,6 @@ export default mixins(
|
||||
left: calc(50% - 105px);
|
||||
width: 210px;
|
||||
display: inline-block;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
|
||||
.entry.active {
|
||||
@@ -816,22 +809,9 @@ export default mixins(
|
||||
}
|
||||
}
|
||||
|
||||
.el-select {
|
||||
.opts {
|
||||
width: 80px;
|
||||
z-index: 1;
|
||||
|
||||
.el-input__suffix-inner {
|
||||
// TODO: Not sure why I have to do that. Invesigate when I have some time
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
input.el-input__inner {
|
||||
border: 1px solid $--color-primary;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user