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
2021-08-29 13:36:17 +02:00
committed by GitHub
parent 8dd0d547a2
commit 5bd8f7c93e
240 changed files with 22656 additions and 1214 deletions

View File

@@ -1,133 +1,132 @@
<template>
<span>
<el-dialog class="workflow-settings" :visible="dialogVisible" append-to-body width="65%" title="Workflow Settings" :before-close="closeDialog">
<el-dialog class="workflow-settings" custom-class="classic" :visible="dialogVisible" append-to-body width="65%" title="Workflow Settings" :before-close="closeDialog">
<div v-loading="isLoading">
<el-row>
<el-col :span="10" class="setting-name">
Error Workflow:
<el-tooltip class="setting-info" placement="top" effect="light">
<n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-html="helpTexts.errorWorkflow"></div>
<font-awesome-icon icon="question-circle" />
</el-tooltip>
</n8n-tooltip>
</el-col>
<el-col :span="14" class="ignore-key-press">
<el-select v-model="workflowSettings.errorWorkflow" placeholder="Select Workflow" size="small" filterable>
<el-option
<n8n-select v-model="workflowSettings.errorWorkflow" placeholder="Select Workflow" size="medium" filterable :limit-popper-width="true">
<n8n-option
v-for="item in workflows"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</n8n-option>
</n8n-select>
</el-col>
</el-row>
<el-row>
<el-col :span="10" class="setting-name">
Timezone:
<el-tooltip class="setting-info" placement="top" effect="light">
<n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-html="helpTexts.timezone"></div>
<font-awesome-icon icon="question-circle" />
</el-tooltip>
</n8n-tooltip>
</el-col>
<el-col :span="14" class="ignore-key-press">
<el-select v-model="workflowSettings.timezone" placeholder="Select Timezone" size="small" filterable>
<el-option
<n8n-select v-model="workflowSettings.timezone" placeholder="Select Timezone" size="medium" filterable :limit-popper-width="true">
<n8n-option
v-for="timezone of timezones"
:key="timezone.key"
:label="timezone.value"
:value="timezone.key">
</el-option>
</el-select>
</n8n-option>
</n8n-select>
</el-col>
</el-row>
<el-row>
<el-col :span="10" class="setting-name">
Save Data Error Execution:
<el-tooltip class="setting-info" placement="top" effect="light">
<n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-html="helpTexts.saveDataErrorExecution"></div>
<font-awesome-icon icon="question-circle" />
</el-tooltip>
</n8n-tooltip>
</el-col>
<el-col :span="14" class="ignore-key-press">
<el-select v-model="workflowSettings.saveDataErrorExecution" placeholder="Select Option" size="small" filterable>
<el-option
<n8n-select v-model="workflowSettings.saveDataErrorExecution" placeholder="Select Option" size="medium" filterable :limit-popper-width="true">
<n8n-option
v-for="option of saveDataErrorExecutionOptions"
:key="option.key"
:label="option.value"
:value="option.key">
</el-option>
</el-select>
</n8n-option>
</n8n-select>
</el-col>
</el-row>
<el-row>
<el-col :span="10" class="setting-name">
Save Data Success Execution:
<el-tooltip class="setting-info" placement="top" effect="light">
<n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-html="helpTexts.saveDataSuccessExecution"></div>
<font-awesome-icon icon="question-circle" />
</el-tooltip>
</n8n-tooltip>
</el-col>
<el-col :span="14" class="ignore-key-press">
<el-select v-model="workflowSettings.saveDataSuccessExecution" placeholder="Select Option" size="small" filterable>
<el-option
<n8n-select v-model="workflowSettings.saveDataSuccessExecution" placeholder="Select Option" size="medium" filterable :limit-popper-width="true">
<n8n-option
v-for="option of saveDataSuccessExecutionOptions"
:key="option.key"
:label="option.value"
:value="option.key">
</el-option>
</el-select>
</n8n-option>
</n8n-select>
</el-col>
</el-row>
<el-row>
<el-col :span="10" class="setting-name">
Save Manual Executions:
<el-tooltip class="setting-info" placement="top" effect="light">
<n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-html="helpTexts.saveManualExecutions"></div>
<font-awesome-icon icon="question-circle" />
</el-tooltip>
</n8n-tooltip>
</el-col>
<el-col :span="14" class="ignore-key-press">
<el-select v-model="workflowSettings.saveManualExecutions" placeholder="Select Option" size="small" filterable>
<el-option
<n8n-select v-model="workflowSettings.saveManualExecutions" placeholder="Select Option" size="medium" filterable :limit-popper-width="true">
<n8n-option
v-for="option of saveManualOptions"
:key="option.key"
:label="option.value"
:value="option.key">
</el-option>
</el-select>
</n8n-option>
</n8n-select>
</el-col>
</el-row>
<el-row>
<el-col :span="10" class="setting-name">
Save Execution Progress:
<el-tooltip class="setting-info" placement="top" effect="light">
<n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-html="helpTexts.saveExecutionProgress"></div>
<font-awesome-icon icon="question-circle" />
</el-tooltip>
</n8n-tooltip>
</el-col>
<el-col :span="14" class="ignore-key-press">
<el-select v-model="workflowSettings.saveExecutionProgress" placeholder="Select Option" size="small" filterable>
<el-option
<n8n-select v-model="workflowSettings.saveExecutionProgress" placeholder="Select Option" size="medium" filterable :limit-popper-width="true">
<n8n-option
v-for="option of saveExecutionProgressOptions"
:key="option.key"
:label="option.value"
:value="option.key">
</el-option>
</el-select>
</n8n-option>
</n8n-select>
</el-col>
</el-row>
<el-row>
<el-col :span="10" class="setting-name">
Timeout Workflow:
<el-tooltip class="setting-info" placement="top" effect="light">
<n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-html="helpTexts.executionTimeoutToggle"></div>
<font-awesome-icon icon="question-circle" />
</el-tooltip>
</n8n-tooltip>
</el-col>
<el-col :span="14">
<div>
<el-switch ref="inputField" :value="workflowSettings.executionTimeout > -1" @change="toggleTimeout" active-color="#13ce66"></el-switch>
<div class="expression-info clickable" @click="expressionEditDialogVisible = true">Edit Expression</div>
</div>
</el-col>
</el-row>
@@ -135,29 +134,30 @@
<el-row>
<el-col :span="10" class="setting-name">
Timeout After:
<el-tooltip class="setting-info" placement="top" effect="light">
<n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-html="helpTexts.executionTimeout"></div>
<font-awesome-icon icon="question-circle" />
</el-tooltip>
</n8n-tooltip>
</el-col>
<el-col :span="4">
<el-input-number size="small" v-model="timeoutHMS.hours" :min="0" placeholder="hours" type="number" class="el-input_inner"></el-input-number><br />
<div class="timeout-setting-name">hours</div>
<n8n-input size="medium" :value="timeoutHMS.hours" @input="(value) => setTimeout('hours', value)" :min="0">
<template slot="append">hours</template>
</n8n-input>
</el-col>
<el-col :span="4">
<el-input-number size="small" v-model="timeoutHMS.minutes" :min="0" placeholder="minutes" type="number" class="el-input_inner"></el-input-number><br />
<div class="timeout-setting-name">minutes</div>
<el-col :span="4" class="timeout-input">
<n8n-input size="medium" :value="timeoutHMS.minutes" @input="(value) => setTimeout('minutes', value)" :min="0" :max="60">
<template slot="append">minutes</template>
</n8n-input>
</el-col>
<el-col :span="4">
<el-input-number size="small" v-model="timeoutHMS.seconds" :min="0" placeholder="seconds" type="number" class="el-input_inner"></el-input-number><br />
<div class="timeout-setting-name">seconds</div>
<el-col :span="4" class="timeout-input">
<n8n-input size="medium" :value="timeoutHMS.seconds" @input="(value) => setTimeout('seconds', value)" :min="0" :max="60">
<template slot="append">seconds</template>
</n8n-input>
</el-col>
</el-row>
</div>
<div class="action-buttons">
<el-button type="success" @click="saveSettings">
Save
</el-button>
<n8n-button label="Save" size="large" @click="saveSettings" />
</div>
</div>
</el-dialog>
@@ -237,6 +237,14 @@ export default mixins(
this.$emit('closeDialog');
return false;
},
setTimeout (key: string, value: string) {
const time = value ? parseInt(value, 10) : 0;
this.timeoutHMS = {
...this.timeoutHMS,
[key]: time,
};
},
async loadSaveDataErrorExecutionOptions () {
this.saveDataErrorExecutionOptions.length = 0;
this.saveDataErrorExecutionOptions.push.apply( // eslint-disable-line no-useless-call
@@ -471,7 +479,7 @@ export default mixins(
});
this.closeDialog();
this.$externalHooks().run('workflowSettings.saveSettings', { oldSettings });
},
toggleTimeout() {
@@ -518,9 +526,8 @@ export default mixins(
}
}
.timeout-setting-name {
text-align: center;
width: calc(100% - 20px);
.timeout-input {
margin-left: 5px;
}
</style>