feat: migrate editor-ui to Vite.js and various DX improvements (N8N-2277) (#4061)

* feat: Added vite.js dependencies.

* chore: Removed tests folder to follow same structure as design-system

* chore: Removed unused testing config.

* chore: Created vite.js index.html

* refactor: Updated scss structure and imports.

* refactor: Updated workflow building.

* fix: Cleared up all workflow dependency cycles. Added proper package.json imports config.

* feat: Got a working build using Vite. Need to fix issues next.

* fix: Progress! Getting process.env error.

* fix: Changed process.env to import.meta.env.

* fix: Fixed circular imports that used require(). Fixed monaco editor.

* chore: Removed commented code.

* chore: Cleaned up package.json

* feat: Made necessary changes to replace base path in css files.

* feat: Serve CSS files for `editor-ui` Vite migration (#4069)

 Serve CSS files for Vite migration

* chore: Fixed package-lock.json.

* fix: Fixed build after centralized tsconfig update.

* fix: Removed lodash-es replacement.

* fix: Commented out vitest test command.

* style: Fixed linting issues.

* fix: Added lodash-es hotfix back.

* chore: Updated package-lock.json

* refactor: Renamed all n8n scss variables to no longer be defined as private.

* feat(editor): add application-wide el-button replacement.

* fix(editor): Fix import in page alert after merge.

* chore(editor): update package-lock.json.

* fix: Case sensitive lodash-es replacement for vue-agile.

* fix: add alias for lodash-es camelcase import.

* fix: add patch-package support for fixing quill

* feat: add patch-package on postinstall

* fix: update quill patch path.

* refactor: rename quill patch

* fix: update quill version.

* fix: update quill patch

* fix: fix linting rules after installing eslint in design-system

* fix: update date picker button to have primary color

* test: update callout component snapshots

* fix(editor): fix linting issues in editor after enabling eslint

* fix(cli): add /assets/* to auth ignore endpoints in server

* chore: update package-lock.json

* chore: update package-lock.json

* fix(editor): fix linting issues

* feat: add vite-legacy support

* fix: update workflow package interface imports to type imports.

* chore: update package-lock.json

* fix(editor) fix importing translations other than english

* fix(editor): remove test command until vitest is added

* fix: increase memory allocation for vite build

* fix: add patch-package patches to n8n-custom docker build

* fix: add performance and load time improvements

* fix: add proper typing to setNodeType

* chore: update package-lock.json

* style: use generic type for reduce in setNodeType

Co-authored-by: Iván Ovejero <ivov.src@gmail.com>
This commit is contained in:
Alex Grozav
2022-09-23 17:14:28 +03:00
committed by GitHub
parent e709cb5fe2
commit 27e2ce0470
248 changed files with 6220 additions and 10845 deletions

View File

@@ -0,0 +1,134 @@
@use "mixins/mixins";
@use "mixins/_button";
@use "./common/var";
@include mixins.b(radio-button) {
position: relative;
display: inline-block;
outline: none;
@include mixins.e(inner) {
display: inline-block;
line-height: 1;
white-space: nowrap;
vertical-align: middle;
background: var.$button-default-background-color;
border: var(--border-base);
font-weight: var(--font-weight-bold);
border-left: 0;
color: var.$button-default-font-color;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
position: relative;
cursor: pointer;
transition: var.$all-transition;
border-radius: 0;
@include button.button-size(
var.$button-padding-vertical,
var.$button-padding-horizontal,
var.$button-font-size
);
&:hover {
color: var(--color-primary);
}
& [class*='el-icon-'] {
line-height: 0.9;
& + span {
margin-left: 5px;
}
}
}
&:first-child {
.el-radio-button__inner {
border-left: var(--border-base);
border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);
box-shadow: none !important;
}
}
@include mixins.e(orig-radio) {
opacity: 0;
outline: none;
position: absolute;
z-index: -1;
&:checked {
& + .el-radio-button__inner {
color: var.$radio-button-checked-font-color;
background-color: var.$radio-button-checked-background-color;
border-color: var.$radio-button-checked-border-color;
box-shadow: -1px 0 0 0 var.$radio-button-checked-border-color;
}
}
&:disabled {
& + .el-radio-button__inner {
color: var.$button-disabled-font-color;
cursor: not-allowed;
background-image: none;
background-color: var.$button-disabled-background-color;
border-color: var.$button-disabled-border-color;
box-shadow: none;
}
&:checked + .el-radio-button__inner {
background-color: var.$radio-button-disabled-checked-fill;
}
}
}
&:last-child {
.el-radio-button__inner {
border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
}
}
&:first-child:last-child {
.el-radio-button__inner {
border-radius: var(--border-radius-base);
}
}
@include mixins.m(medium) {
& .el-radio-button__inner {
border-radius: 0;
@include button.button-size(
var.$button-medium-padding-vertical,
var.$button-medium-padding-horizontal,
var.$button-medium-font-size
);
}
}
@include mixins.m(small) {
& .el-radio-button__inner {
border-radius: 0;
@include button.button-size(
var.$button-small-padding-vertical,
var.$button-small-padding-horizontal,
var.$button-small-font-size
);
}
}
@include mixins.m(mini) {
& .el-radio-button__inner {
border-radius: 0;
@include button.button-size(
var.$button-mini-padding-vertical,
var.$button-mini-padding-horizontal,
var.$button-mini-font-size
);
}
}
&:focus:not(.is-focus):not(:active):not(.is-disabled) {
/*获得焦点时 样式提醒*/
box-shadow: 0 0 2px 2px var.$radio-button-checked-border-color;
}
}