mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-18 02:21:13 +00:00
refactor(editor): Move editor-ui and design-system to frontend dir (no-changelog) (#13564)
This commit is contained in:
Alex Grozav
15
packages/frontend/editor-ui/src/styles/_animations.scss
Normal file
15
packages/frontend/editor-ui/src/styles/_animations.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
.executions-list-move,
|
||||
.executions-list-enter-active,
|
||||
.executions-list-leave-active {
|
||||
transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
|
||||
.executions-list-enter-from,
|
||||
.executions-list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-100px);
|
||||
}
|
||||
|
||||
.executions-list-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
3
packages/frontend/editor-ui/src/styles/_global.scss
Normal file
3
packages/frontend/editor-ui/src/styles/_global.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
:root {
|
||||
--navbar--height: 64px;
|
||||
}
|
||||
1
packages/frontend/editor-ui/src/styles/_variables.scss
Normal file
1
packages/frontend/editor-ui/src/styles/_variables.scss
Normal file
@@ -0,0 +1 @@
|
||||
$ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
|
||||
4
packages/frontend/editor-ui/src/styles/index.scss
Normal file
4
packages/frontend/editor-ui/src/styles/index.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
@import 'variables';
|
||||
@import 'plugins';
|
||||
@import 'global';
|
||||
@import 'animations';
|
||||
356
packages/frontend/editor-ui/src/styles/plugins/_codemirror.scss
Normal file
356
packages/frontend/editor-ui/src/styles/plugins/_codemirror.scss
Normal file
@@ -0,0 +1,356 @@
|
||||
.code-node-editor .cm-editor .cm-tooltip-autocomplete > ul[role='listbox'] {
|
||||
border-bottom: none;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.cm-editor .cm-tooltip-autocomplete {
|
||||
background-color: var(--color-background-xlight) !important;
|
||||
box-shadow: var(--box-shadow-light);
|
||||
border: none;
|
||||
|
||||
.cm-tooltip {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
> ul[role='listbox'] {
|
||||
font-family: var(--font-family-monospace);
|
||||
max-height: min(220px, 20vh);
|
||||
max-width: 240px;
|
||||
min-width: 200px;
|
||||
|
||||
border: var(--border-base);
|
||||
border-top-left-radius: var(--border-radius-base);
|
||||
border-bottom-left-radius: var(--border-radius-base);
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
|
||||
&:has(+ .cm-completionInfo-left) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-right-radius: var(--border-radius-base);
|
||||
border-bottom-right-radius: var(--border-radius-base);
|
||||
}
|
||||
|
||||
&:has(+ .cm-completionInfo) {
|
||||
height: min(220px, 20vh);
|
||||
}
|
||||
|
||||
li[role='option'] {
|
||||
color: var(--color-text-base);
|
||||
display: flex;
|
||||
line-height: var(--font-line-height-xloose);
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--spacing-5xs) var(--spacing-2xs);
|
||||
gap: var(--spacing-2xs);
|
||||
scroll-padding: 40px;
|
||||
scroll-margin: 40px;
|
||||
}
|
||||
|
||||
li .cm-completionLabel {
|
||||
font-size: var(--font-size-2xs);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
li .cm-completionDetail {
|
||||
color: var(--color-text-light);
|
||||
font-size: var(--font-size-3xs);
|
||||
margin-left: 0;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
li[aria-selected] {
|
||||
background-color: var(--color-background-base);
|
||||
color: var(--color-autocomplete-item-selected);
|
||||
}
|
||||
|
||||
> .cm-section-header {
|
||||
padding: var(--spacing-4xs) var(--spacing-3xs);
|
||||
border-bottom: 1px solid var(--color-autocomplete-section-header-border);
|
||||
background-color: var(--color-background-xlight);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
> .cm-section-header:not(:first-child) {
|
||||
margin-top: var(--spacing-2xs);
|
||||
}
|
||||
|
||||
.cm-section-title {
|
||||
color: var(--color-text-dark);
|
||||
font-family: var(--font-family);
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: var(--font-size-3xs);
|
||||
text-transform: uppercase;
|
||||
padding: var(--spacing-5xs) var(--spacing-4xs);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cm-editor .cm-tooltip.cm-completionInfo,
|
||||
.cm-editor .cm-tooltip.cm-cursorInfo,
|
||||
.cm-editor .cm-tooltip-hover {
|
||||
// Add padding when infobox only contains text
|
||||
&:not(:has(div)) {
|
||||
padding: var(--spacing-xs);
|
||||
}
|
||||
|
||||
&:has(.cm-tooltip-lint) {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.cm-diagnostic {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
||||
.autocomplete-info-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xs);
|
||||
padding: var(--spacing-xs) 0;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
strong.autocomplete-info-arg,
|
||||
strong.autocomplete-info-arg-name {
|
||||
font-weight: var(--font-weight-regular);
|
||||
text-decoration: underline;
|
||||
color: var(--color-text-dark);
|
||||
}
|
||||
|
||||
.autocomplete-info-description {
|
||||
padding: 0 var(--spacing-xs);
|
||||
color: var(--color-text-base);
|
||||
font-size: var(--font-size-2xs);
|
||||
|
||||
.autocomplete-info-example {
|
||||
border-radius: var(--border-radius-base);
|
||||
border: 1px solid var(--color-infobox-examples-border-color);
|
||||
color: var(--color-text-base);
|
||||
margin-top: var(--spacing-xs);
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 0;
|
||||
color: var(--color-text-base);
|
||||
font-size: var(--font-size-2xs);
|
||||
font-family: var(--font-family);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: var(--font-line-height-loose);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-text-dark);
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.autocomplete-info-header {
|
||||
padding: 0 var(--spacing-xs);
|
||||
color: var(--color-text-base);
|
||||
font-size: var(--font-size-2xs);
|
||||
font-family: var(--font-family-monospace);
|
||||
line-height: var(--font-line-height-compact);
|
||||
}
|
||||
|
||||
.autocomplete-info-name {
|
||||
color: var(--color-autocomplete-item-selected);
|
||||
}
|
||||
|
||||
.autocomplete-info-arg {
|
||||
color: var(--color-text-base);
|
||||
font-weight: var(--font-weight-regular);
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.autocomplete-info-return {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.autocomplete-info-args {
|
||||
padding: 0 var(--spacing-xs);
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
text-indent: calc(var(--spacing-2xs) * -1);
|
||||
margin-left: var(--spacing-2xs);
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-top: var(--spacing-4xs);
|
||||
}
|
||||
|
||||
.autocomplete-info-args {
|
||||
margin-top: var(--spacing-4xs);
|
||||
padding-left: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
.autocomplete-info-arg-name {
|
||||
font-size: var(--font-size-2xs);
|
||||
color: var(--color-text-base);
|
||||
}
|
||||
|
||||
.autocomplete-info-arg-description {
|
||||
color: var(--color-text-base);
|
||||
margin-left: var(--spacing-4xs);
|
||||
font-size: var(--font-size-2xs);
|
||||
|
||||
code {
|
||||
padding: 0;
|
||||
color: var(--color-text-base);
|
||||
font-size: var(--font-size-2xs);
|
||||
font-family: var(--font-family);
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.autocomplete-info-examples {
|
||||
pre {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
code {
|
||||
background: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.autocomplete-info-examples-list {
|
||||
margin: var(--spacing-xs) var(--spacing-xs) 0 var(--spacing-xs);
|
||||
border-radius: var(--border-radius-base);
|
||||
border: 1px solid var(--color-infobox-examples-border-color);
|
||||
}
|
||||
|
||||
.autocomplete-info-example {
|
||||
color: var(--color-text-base);
|
||||
}
|
||||
|
||||
.autocomplete-info-example code {
|
||||
color: var(--color-text-base);
|
||||
display: block;
|
||||
padding: var(--spacing-3xs) var(--spacing-2xs);
|
||||
font-size: 0.688rem; // Equals 11px. Add a new token in _tokens.scss if this size is needed elsewhere
|
||||
font-family: var(--font-family-monospace);
|
||||
line-height: var(--font-line-height-compact);
|
||||
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.autocomplete-info-example-comment {
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
.autocomplete-info-example + .autocomplete-info-example {
|
||||
margin-top: var(--spacing-4xs);
|
||||
}
|
||||
|
||||
.autocomplete-info-section-title {
|
||||
margin: var(--spacing-3xs) 0;
|
||||
padding: 0 var(--spacing-xs) var(--spacing-3xs) var(--spacing-xs);
|
||||
border-bottom: 1px solid var(--color-autocomplete-section-header-border);
|
||||
text-transform: uppercase;
|
||||
color: var(--color-text-dark);
|
||||
font-size: var(--font-size-3xs);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
// Syntax highlighting
|
||||
.ts-keyword,
|
||||
.ts-punctuation {
|
||||
color: var(--color-code-tags-keyword);
|
||||
}
|
||||
|
||||
.ts-stringLiteral,
|
||||
.ts-primitive {
|
||||
color: var(--color-code-tags-primitive);
|
||||
}
|
||||
|
||||
.ts-localName,
|
||||
.ts-parameterName,
|
||||
.ts-methodName {
|
||||
color: var(--color-code-tags-variable);
|
||||
}
|
||||
|
||||
.ts-typeName,
|
||||
.ts-interfaceName,
|
||||
.ts-className,
|
||||
.ts-aliasName {
|
||||
color: var(--color-code-tags-class);
|
||||
}
|
||||
}
|
||||
|
||||
.cm-editor .cm-tooltip.cm-completionInfo {
|
||||
background-color: var(--color-background-xlight);
|
||||
border: var(--border-base);
|
||||
box-shadow: var(--box-shadow-light);
|
||||
clip-path: inset(-12px -12px -12px 0); // Clip box-shadow on the left
|
||||
border-left: none;
|
||||
border-bottom-right-radius: var(--border-radius-base);
|
||||
border-top-right-radius: var(--border-radius-base);
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
line-height: var(--font-line-height-loose);
|
||||
padding: 0;
|
||||
|
||||
// Overwrite codemirror positioning
|
||||
top: 0 !important;
|
||||
left: 100% !important;
|
||||
right: auto !important;
|
||||
max-width: 280px !important;
|
||||
height: 100%;
|
||||
|
||||
&.cm-completionInfo-left-narrow,
|
||||
&.cm-completionInfo-right-narrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.cm-completionInfo-left {
|
||||
left: auto !important;
|
||||
right: 100% !important;
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: var(--border-radius-base);
|
||||
border-bottom-left-radius: var(--border-radius-base);
|
||||
border-left: var(--border-base);
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&.cm-completionInfo-right {
|
||||
background-color: var(--color-infobox-background);
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.cm-editor .cm-tooltip.cm-cursorInfo,
|
||||
.cm-editor .cm-tooltip-hover {
|
||||
background-color: var(--color-infobox-background);
|
||||
border: var(--border-base);
|
||||
box-shadow: var(--box-shadow-light);
|
||||
border-radius: var(--border-radius-base);
|
||||
line-height: var(--font-line-height-loose);
|
||||
padding: 0;
|
||||
max-width: 280px;
|
||||
|
||||
.cm-tooltip-section:not(:first-child) {
|
||||
border-top: var(--border-base);
|
||||
}
|
||||
|
||||
.autocomplete-info-container {
|
||||
height: auto;
|
||||
max-height: min(220px, 20vh);
|
||||
}
|
||||
}
|
||||
123
packages/frontend/editor-ui/src/styles/plugins/_vueflow.scss
Normal file
123
packages/frontend/editor-ui/src/styles/plugins/_vueflow.scss
Normal file
@@ -0,0 +1,123 @@
|
||||
/**
|
||||
* Resizer
|
||||
*/
|
||||
|
||||
.vue-flow__resize-control.line {
|
||||
border-color: transparent;
|
||||
z-index: 1;
|
||||
|
||||
&.top {
|
||||
height: var(--spacing-s);
|
||||
border-top-width: var(--spacing-s);
|
||||
}
|
||||
|
||||
&.right {
|
||||
width: var(--spacing-s);
|
||||
border-right-width: var(--spacing-s);
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
height: var(--spacing-s);
|
||||
border-bottom-width: var(--spacing-s);
|
||||
}
|
||||
|
||||
&.left {
|
||||
width: var(--spacing-s);
|
||||
border-left-width: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
.vue-flow__resize-control.handle {
|
||||
background-color: transparent;
|
||||
width: var(--spacing-s);
|
||||
height: var(--spacing-s);
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Minimap
|
||||
*/
|
||||
|
||||
.vue-flow__minimap {
|
||||
height: 120px;
|
||||
overflow: hidden;
|
||||
margin-bottom: calc(48px + 2 * var(--spacing-xs));
|
||||
border: var(--border-base);
|
||||
border-radius: var(--border-radius-base);
|
||||
background: var(--color-background-light);
|
||||
|
||||
.minimap-node-default {
|
||||
fill: var(--color-foreground-dark);
|
||||
}
|
||||
|
||||
.minimap-node-n8n-nodes-base-stickyNote {
|
||||
fill: var(--color-foreground-dark);
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
@include mixins.breakpoint('xs-only') {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Nodes
|
||||
*/
|
||||
|
||||
.vue-flow__node {
|
||||
&,
|
||||
&.draggable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.dragging {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
&:has(.sticky--active) {
|
||||
z-index: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.vue-flow__nodes:has(.bring-to-front) {
|
||||
z-index: 2 !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* Selection
|
||||
*/
|
||||
|
||||
.vue-flow__nodesselection-rect {
|
||||
box-sizing: content-box;
|
||||
margin-top: calc(-1 * var(--spacing-2xs));
|
||||
margin-left: calc(-1 * var(--spacing-2xs));
|
||||
padding: var(--spacing-2xs);
|
||||
}
|
||||
|
||||
/**
|
||||
* Edges
|
||||
*/
|
||||
|
||||
.vue-flow__edges:has(.bring-to-front),
|
||||
.vue-flow__edge-label.selected {
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* Controls
|
||||
*/
|
||||
|
||||
.vue-flow__controls {
|
||||
margin: var(--spacing-s);
|
||||
|
||||
@include mixins.breakpoint('xs-only') {
|
||||
max-width: calc(100% - 3 * var(--spacing-s) - var(--spacing-2xs));
|
||||
overflow: auto;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: var(--spacing-s);
|
||||
padding-right: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
@import 'codemirror';
|
||||
@import 'vueflow';
|
||||
Reference in New Issue
Block a user