feat(editor): Filter component + implement in If node (#7490)

New Filter component + implementation in If node (v2)

<img width="3283" alt="image"
src="https://github.com/n8n-io/n8n/assets/8850410/35c379ef-4b62-4d06-82e7-673d4edcd652">

---------

Co-authored-by: Giulio Andreini <andreini@netseven.it>
Co-authored-by: Michael Kret <michael.k@radency.com>
This commit is contained in:
Elias Meire
2023-12-13 14:45:22 +01:00
committed by GitHub
parent 09a5729305
commit 8a5343401d
56 changed files with 5060 additions and 900 deletions

View File

@@ -399,8 +399,16 @@ $input-placeholder-color: var(--input-placeholder-color, var(--color-text-light)
$input-focus-border: var(--input-focus-border-color, var(--color-secondary));
$input-border-color: var(--input-border-color, var(--border-color-base));
$input-border-style: var(--input-border-style, var(--border-style-base));
$input-border-width: var(--border-width-base);
$input-border-width: var(--input-border-width, var(--border-width-base));
$input-border: $input-border-color $input-border-style $input-border-width;
$input-border-right-color: var(
--input-border-right-color,
var(--input-border-color, var(--border-color-base))
);
$input-border-bottom-color: var(
--input-border-bottom-color,
var(--input-border-color, var(--border-color-base))
);
$input-font-size: var(--input-font-size, var(--font-size-s));
/// color||Color|0
@@ -411,6 +419,23 @@ $input-width: 140px;
$input-height: 40px;
/// borderRadius||Border|2
$input-border-radius: var(--input-border-radius, var(--border-radius-base));
$input-border-top-left-radius: var(
--input-border-top-left-radius,
var(--input-border-radius, var(--border-radius-base))
);
$input-border-top-right-radius: var(
--input-border-top-right-radius,
var(--input-border-radius, var(--border-radius-base)),
);
$input-border-bottom-left-radius: var(
--input-border-bottom-left-radius,
var(--input-border-radius, var(--border-radius-base)),
);
$input-border-bottom-right-radius: var(
--input-border-bottom-right-radius,
var(--input-border-radius, var(--border-radius-base)),
);
$input-border-radius: var(--input-border-radius, var(--border-radius-base));
$input-border-color-hover: $border-color-hover;
/// color||Color|0
$input-background-color: var(--input-background-color, var(--color-foreground-xlight));

View File

@@ -20,6 +20,11 @@
background-color: var.$input-background-color;
background-image: none;
border-radius: var.$input-border-radius;
border-top-left-radius: var.$input-border-top-left-radius;
border-top-right-radius: var.$input-border-top-right-radius;
border-bottom-left-radius: var.$input-border-bottom-left-radius;
border-bottom-right-radius: var.$input-border-bottom-right-radius;
transition: var.$border-transition-base;
&,
@@ -108,7 +113,13 @@
background-color: var.$input-background-color;
background-image: none;
border-radius: var.$input-border-radius;
border-top-left-radius: var.$input-border-top-left-radius;
border-top-right-radius: var.$input-border-top-right-radius;
border-bottom-left-radius: var.$input-border-bottom-left-radius;
border-bottom-right-radius: var.$input-border-bottom-right-radius;
border: var.$input-border;
border-right-color: var.$input-border-right-color;
border-bottom-color: var.$input-border-bottom-color;
box-sizing: border-box;
color: var.$input-font-color;
display: inline-block;
@@ -145,6 +156,7 @@
}
@include mixins.e(suffix-inner) {
display: inline-flex;
pointer-events: all;
}
@@ -286,8 +298,14 @@
vertical-align: middle;
display: table-cell;
position: relative;
border: var(--border-base);
border: var.$input-border;
border-radius: var.$input-border-radius;
border-top-left-radius: var.$input-border-top-left-radius;
border-top-right-radius: var.$input-border-top-right-radius;
border-bottom-left-radius: var.$input-border-bottom-left-radius;
border-bottom-right-radius: var.$input-border-bottom-right-radius;
border-right-color: var.$input-border-right-color;
border-bottom-color: var.$input-border-bottom-color;
padding: 0 10px;
width: 1px;
white-space: nowrap;

View File

@@ -80,6 +80,14 @@
&.is-focus .el-input__inner {
border-color: var.$select-input-focus-border-color;
}
&__prefix {
left: var(--spacing-2xs);
}
&--prefix .el-input__inner {
padding-left: 26px;
}
}
> .el-input {