mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-20 11:22:15 +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
@@ -3,34 +3,30 @@
|
||||
<el-dialog :visible="dialogVisible" append-to-body width="80%" :title="`Workflow Executions ${combinedExecutions.length}/${finishedExecutionsCountEstimated === true ? '~' : ''}${combinedExecutionsCount}`" :before-close="closeDialog">
|
||||
<div class="filters">
|
||||
<el-row>
|
||||
<el-col :span="4" class="filter-headline">
|
||||
<el-col :span="2" class="filter-headline">
|
||||
Filters:
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-select v-model="filter.workflowId" placeholder="Select Workflow" size="small" filterable @change="handleFilterChanged">
|
||||
<el-option
|
||||
<el-col :span="7">
|
||||
<n8n-select v-model="filter.workflowId" placeholder="Select Workflow" size="medium" filterable @change="handleFilterChanged">
|
||||
<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-col :span="2">
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-select v-model="filter.status" placeholder="Select Status" size="small" filterable @change="handleFilterChanged">
|
||||
<el-option
|
||||
<el-col :span="5" :offset="1">
|
||||
<n8n-select v-model="filter.status" placeholder="Select Status" size="medium" filterable @change="handleFilterChanged">
|
||||
<n8n-option
|
||||
v-for="item in statuses"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</n8n-option>
|
||||
</n8n-select>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
</el-col>
|
||||
<el-col :span="4" class="autorefresh">
|
||||
<el-col :span="4" :offset="5" class="autorefresh">
|
||||
<el-checkbox v-model="autoRefresh" @change="handleAutoRefreshToggle">Auto refresh</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -39,7 +35,7 @@
|
||||
<div class="selection-options">
|
||||
<span v-if="checkAll === true || isIndeterminate === true">
|
||||
Selected: {{numSelected}} / <span v-if="finishedExecutionsCountEstimated === true">~</span>{{finishedExecutionsCount}}
|
||||
<el-button type="danger" title="Delete Selected" icon="el-icon-delete" size="mini" @click="handleDeleteSelected" circle></el-button>
|
||||
<n8n-icon-button title="Delete Selected" icon="trash" size="small" @click="handleDeleteSelected" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -76,10 +72,10 @@
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Status" width="120" align="center">
|
||||
<el-table-column label="Status" width="122" align="center">
|
||||
<template slot-scope="scope" align="center">
|
||||
|
||||
<el-tooltip placement="top" effect="light">
|
||||
<n8n-tooltip placement="top" >
|
||||
<div slot="content" v-html="statusTooltipText(scope.row)"></div>
|
||||
|
||||
<span class="status-badge running" v-if="scope.row.waitTill">
|
||||
@@ -97,13 +93,18 @@
|
||||
<span class="status-badge warning" v-else>
|
||||
Unknown
|
||||
</span>
|
||||
</el-tooltip>
|
||||
</n8n-tooltip>
|
||||
|
||||
<el-dropdown trigger="click" @command="handleRetryClick">
|
||||
<span class="el-dropdown-link">
|
||||
<el-button class="retry-button" v-bind:class="{ warning: scope.row.stoppedAt === null }" circle v-if="scope.row.stoppedAt !== undefined && !scope.row.finished && scope.row.retryOf === undefined && scope.row.retrySuccessId === undefined && scope.row.waitTill === undefined" type="text" size="small" title="Retry execution">
|
||||
<font-awesome-icon icon="redo" />
|
||||
</el-button>
|
||||
<span class="retry-button">
|
||||
<n8n-icon-button
|
||||
v-if="scope.row.stoppedAt !== undefined && !scope.row.finished && scope.row.retryOf === undefined && scope.row.retrySuccessId === undefined && !scope.row.waitTill"
|
||||
type="light"
|
||||
:theme="scope.row.stoppedAt === null ? 'warning': 'danger'"
|
||||
size="small"
|
||||
title="Retry execution"
|
||||
icon="redo"
|
||||
/>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item :command="{command: 'currentlySaved', row: scope.row}">Retry with currently saved workflow</el-dropdown-item>
|
||||
@@ -131,24 +132,20 @@
|
||||
</el-table-column>
|
||||
<el-table-column label="" width="100" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.stoppedAt === undefined || scope.row.waitTill" class="execution-actions">
|
||||
<el-button circle title="Stop Execution" @click.stop="stopExecution(scope.row.id)" :loading="stoppingExecutions.includes(scope.row.id)" size="mini">
|
||||
<font-awesome-icon icon="stop" />
|
||||
</el-button>
|
||||
</span>
|
||||
<span v-if="scope.row.stoppedAt !== undefined && scope.row.id" class="execution-actions">
|
||||
<el-button circle title="Open Past Execution" @click.stop="displayExecution(scope.row)" size="mini">
|
||||
<font-awesome-icon icon="folder-open" />
|
||||
</el-button>
|
||||
</span>
|
||||
<div class="actions-container">
|
||||
<span v-if="scope.row.stoppedAt === undefined || scope.row.waitTill">
|
||||
<n8n-icon-button icon="stop" title="Stop Execution" @click.stop="stopExecution(scope.row.id)" :loading="stoppingExecutions.includes(scope.row.id)" />
|
||||
</span>
|
||||
<span v-if="scope.row.stoppedAt !== undefined && scope.row.id" >
|
||||
<n8n-icon-button icon="folder-open" title="Open Past Execution" @click.stop="displayExecution(scope.row)" />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="load-more" v-if="finishedExecutionsCount > finishedExecutions.length || finishedExecutionsCountEstimated === true">
|
||||
<el-button title="Load More" @click="loadMore()" size="small" :disabled="isDataLoading">
|
||||
<font-awesome-icon icon="sync" /> Load More
|
||||
</el-button>
|
||||
<n8n-button icon="sync" title="Load More" label="Load More" @click="loadMore()" :loading="isDataLoading" />
|
||||
</div>
|
||||
|
||||
</el-dialog>
|
||||
@@ -697,13 +694,7 @@ export default mixins(
|
||||
}
|
||||
|
||||
.retry-button {
|
||||
color: $--custom-error-text;
|
||||
background-color: $--custom-error-background;
|
||||
margin-left: 5px;
|
||||
&.warning {
|
||||
background-color: $--custom-warning-background;
|
||||
color: $--custom-warning-text;
|
||||
}
|
||||
}
|
||||
|
||||
.selection-options {
|
||||
@@ -714,30 +705,26 @@ export default mixins(
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
height: 22.6px;
|
||||
line-height: 22.6px;
|
||||
border-radius: 15px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
|
||||
&.error {
|
||||
background-color: $--custom-error-background;
|
||||
color: $--custom-error-text;
|
||||
}
|
||||
|
||||
&.running {
|
||||
background-color: $--custom-running-background;
|
||||
color: $--custom-running-text;
|
||||
background-color: var(--color-danger-tint-1);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
&.success {
|
||||
background-color: $--custom-success-background;
|
||||
color: $--custom-success-text;
|
||||
background-color: var(--color-success-tint-1);
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: $--custom-warning-background;
|
||||
color: $--custom-warning-text;
|
||||
&.running, &.warning {
|
||||
background-color: var(--color-warning-tint-2);
|
||||
color: var(--color-warning);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -745,6 +732,10 @@ export default mixins(
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.actions-container > * {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
Reference in New Issue
Block a user