mohiit1502/Automata
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(editor): Add node context menu (#7620)

Browse Source 
![image](https://github.com/n8n-io/n8n/assets/8850410/5a601fae-cb8e-41bb-beca-ac9ab7065b75)
This commit is contained in:
Elias Meire
2023-11-20 14:37:12 +01:00
committed by GitHub
parent 4dbae0e2e9
commit 8d12c1ad8d
46 changed files with 1612 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/design-system/src/css/_tokens.dark.scss
View File

@@ -25,6 +25,10 @@
--color-background-light: var(--prim-gray-820);
--color-background-xlight: var(--prim-gray-740);
--box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.1);
--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.2);
--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
// Secondary tokens
// Canvas
@@ -160,6 +164,9 @@
--color-switch-background: var(--prim-gray-820);
--color-switch-toggle: var(--prim-gray-40);
// Action Dropdown
--color-action-dropdown-item-active-background: var(--color-background-xlight);
// Various
--color-info-tint-1: var(--prim-gray-420);
--color-info-tint-2: var(--prim-gray-740);

6
packages/design-system/src/css/_tokens.scss
View File

@@ -236,6 +236,8 @@
--color-value-survey-background: var(--prim-gray-740);
--color-value-survey-font: var(--prim-gray-0);
// Action Dropdown
--color-action-dropdown-item-active-background: var(--color-background-base);
// Switch (Activation, boolean)
--color-switch-background: var(--prim-gray-420);
--color-switch-active-background: var(--prim-color-alt-i);
@@ -292,6 +294,10 @@
}
}
--box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12);
--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
--border-radius-xlarge: 12px;
--border-radius-large: 8px;
--border-radius-base: 4px;

4
packages/design-system/src/css/common/transition.scss
View File

@@ -45,6 +45,10 @@
transform: scaleY(1);
transition: var.$md-fade-transition;
transform-origin: center top;
&[data-popper-placement^='top'] {
transform-origin: center bottom;
}
}
.el-zoom-in-top-enter-from,
.el-zoom-in-top-leave-active {

18
packages/design-system/src/css/common/var.scss
View File

@@ -75,15 +75,11 @@ $focus-outline-width: 2px;
/* Box shadow
-------------------------- */
/// boxShadow|1|Shadow|1
$box-shadow-base:
0 2px 4px rgba(0, 0, 0, 0.12),
0 0 6px rgba(0, 0, 0, 0.04);
$box-shadow-base: var(--box-shadow-base);
// boxShadow|1|Shadow|1
$box-shadow-dark:
0 2px 4px rgba(0, 0, 0, 0.12),
0 0 6px rgba(0, 0, 0, 0.12);
$box-shadow-dark: var(--box-shadow-dark);
/// boxShadow|1|Shadow|1
$box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
$box-shadow-light: var(--box-shadow-light);
/* Fill
-------------------------- */
@@ -726,13 +722,13 @@ $popover-title-font-color: var(--color-text-dark);
/* Tooltip
-------------------------- */
/// color|1|Color|0
$tooltip-fill: var(--color-text-dark);
$tooltip-fill: var(--color-background-dark);
/// color|1|Color|0
$tooltip-color: $color-white;
/// fontSize||Font|1
$tooltip-font-size: 12px;
/// color||Color|0
$tooltip-border-color: var(--color-text-dark);
$tooltip-border-color: var(--color-background-dark);
$tooltip-arrow-size: 6px;
/// padding||Spacing|3
$tooltip-padding: 10px;
@@ -766,8 +762,8 @@ $tree-expand-icon-color: var(--color-text-lighter);
/* Dropdown
-------------------------- */
$dropdown-menu-box-shadow: $box-shadow-light;
$dropdown-menuItem-hover-fill: var(--color-background-xlight);
$dropdown-menuItem-hover-color: $link-color;
$dropdown-menuItem-hover-fill: var(--color-action-dropdown-item-active-background);
$dropdown-menuItem-hover-color: var(--color-text-dark);
/* Badge
-------------------------- */

9
packages/design-system/src/css/dropdown.scss
View File

@@ -81,7 +81,6 @@
background-color: var.$color-white;
border: 1px solid var(--border-color-light);
border-radius: var(--border-radius-base);
box-shadow: var.$dropdown-menu-box-shadow;
position: relative;
list-style: none;
@@ -92,7 +91,7 @@
margin: 0;
font-size: var.$font-size-base;
font-weight: var(--font-weight-regular);
color: var(--color-text-dark);
color: var(--color-text-base);
cursor: pointer;
outline: none;
white-space: nowrap;
@@ -117,14 +116,13 @@
content: '';
height: $divided-offset;
display: block;
margin: 0 -16px;
background-color: var.$color-white;
}
}
@include mixins.when(disabled) {
cursor: default;
color: var.$font-color-disabled-base;
color: var(--color-text-lighter);
pointer-events: none;
}
}
@@ -143,7 +141,6 @@
&:before {
height: $divided-offset;
margin: 0 -17px;
}
}
}
@@ -163,7 +160,6 @@
&:before {
height: $divided-offset;
margin: 0 -15px;
}
}
}
@@ -183,7 +179,6 @@
&:before {
height: $divided-offset;
margin: 0 -10px;
}
}
}

8
packages/design-system/src/css/popper.scss
View File

@@ -54,7 +54,7 @@
&[data-popper-placement^='top'] .el-popper__arrow {
bottom: -(var.$popover-arrow-size);
left: 50%;
margin-right: #{var.$tooltip-arrow-size * 0.5};
margin: 0 #{var.$tooltip-arrow-size * 0.5};
border-top-color: var.$popover-border-color;
border-bottom-width: 0;
@@ -69,7 +69,7 @@
&[data-popper-placement^='bottom'] .el-popper__arrow {
top: -(var.$popover-arrow-size);
left: 50%;
margin-right: #{var.$tooltip-arrow-size * 0.5};
margin: 0 #{var.$tooltip-arrow-size * 0.5};
border-top-width: 0;
border-bottom-color: var.$popover-border-color;
@@ -84,7 +84,7 @@
&[data-popper-placement^='right'] .el-popper__arrow {
top: 50%;
left: -(var.$popover-arrow-size);
margin-bottom: #{var.$tooltip-arrow-size * 0.5};
margin: #{var.$tooltip-arrow-size * 0.5} 0;
border-right-color: var.$popover-border-color;
border-left-width: 0;
@@ -99,7 +99,7 @@
&[data-popper-placement^='left'] .el-popper__arrow {
top: 50%;
right: -(var.$popover-arrow-size);
margin-bottom: #{var.$tooltip-arrow-size * 0.5};
margin: #{var.$tooltip-arrow-size * 0.5} 0;
border-right-width: 0;
border-left-color: var.$popover-border-color;