frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add RED.view.selectNodes api for node selection whilst editing

Browse Source
This commit is contained in:
Nick O'Leary
2019-05-23 16:39:06 +01:00
parent b9b900e908
commit cae003d4fa
12 changed files with 290 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/node_modules/@node-red/editor-client/src/sass/colors.scss vendored
View File

@@ -90,6 +90,7 @@ $event-log-selection-background: #999;
$list-item-color: $primary-text-color;
$list-item-secondary-color: $secondary-text-color;
$list-item-background: $secondary-background;
$list-item-background-disabled: $secondary-background-inactive;
$list-item-background-hover: $secondary-background-hover;
@@ -185,6 +186,7 @@ $view-lasso-stroke: #ff7f0e;
$view-lasso-fill: rgba(20,125,255,0.1);
$view-background: $secondary-background;
$view-select-mode-background: $secondary-background-selected;
$view-grid-color: #eee;
$node-label-color: #333;

28
packages/node_modules/@node-red/editor-client/src/sass/flow.scss vendored
View File

@@ -54,6 +54,23 @@
cursor: move;
stroke-width: 1;
}
.red-ui-workspace-select-mode {
g.red-ui-flow-node.red-ui-flow-node-hovered * {
cursor: pointer !important
}
g.red-ui-flow-node, g.red-ui-flow-link {
opacity: 0.5;
}
g.red-ui-flow-node.red-ui-flow-node-hovered:not(.red-ui-flow-node-selected) {
opacity: 0.9;
.red-ui-flow-node {
stroke-width: 2;
stroke: $node-selected-color !important;
stroke-dasharray: 10, 4;
}
}
}
.red-ui-flow-node-unknown {
stroke-dasharray:10,4;
stroke: $node-border-unknown;
@@ -115,9 +132,14 @@
stroke-linecap: round;
}
.red-ui-flow-node-selected {
stroke-width: 2;
stroke: $node-selected-color !important;
g.red-ui-flow-node-selected {
.red-ui-workspace-select-mode & {
opacity: 1;
}
.red-ui-flow-node,.red-ui-flow-subflow-port {
stroke-width: 2;
stroke: $node-selected-color !important;
}
}
.red-ui-flow-node-highlighted {
border-color: $node-selected-color !important;

15
packages/node_modules/@node-red/editor-client/src/sass/notifications.scss vendored
View File

@@ -33,6 +33,9 @@
border: 1px solid $notification-border-default;
border-left-width: 16px;
overflow: hidden;
.ui-dialog-buttonset {
margin-top: 20px;
}
}
.red-ui-notification p:first-child {
font-size: 1.1em;
@@ -55,6 +58,18 @@
border-color: $notification-border-error;
}
.red-ui-notification-compact {
p {
margin: 0;
}
.ui-dialog-buttonset {
margin-top: 0;
position: absolute;
top: 8px;
right: 10px;
}
}
.red-ui-notification-shake-horizontal {
-webkit-animation: red-ui-notification-shake-horizontal 0.3s steps(2, end) both;
animation: red-ui-notification-shake-horizontal 0.3s steps(2, end) both;

27
packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss vendored
View File

@@ -77,18 +77,18 @@
margin: 0;
position: relative;
// &:hover {
// background: $list-item-background-hover;
// color: $list-item-color;
// text-decoration: none;
// }
&:focus {
&:hover, &:hover .red-ui-treeList-sublabel-text {
background: $list-item-background-hover;
color: $list-item-color;
text-decoration: none;
}
&:focus, &:focus .red-ui-treeList-sublabel-text {
background: $list-item-background-hover;
outline: none;
color: $list-item-color;
text-decoration: none;
}
&.selected {
&.selected, &.selected .red-ui-treeList-sublabel-text {
background: $list-item-background-selected;
outline: none;
color: $list-item-color;
@@ -101,6 +101,19 @@
.red-ui-treeList-label-text {
margin-left: 4px;
}
.red-ui-treeList-sublabel-text {
top: 0;
bottom: 0;
right: 0;
padding: 0 10px 0 5px;
line-height: 32px;
font-size: 0.9em;
color: $list-item-secondary-color;
position: absolute;
background: $list-item-background;
}
.red-ui-treeList-icon {
display: inline-block;
width: 20px;

16
packages/node_modules/@node-red/editor-client/src/sass/workspace.scss vendored
View File

@@ -39,6 +39,12 @@
outline: none;
}
}
#red-ui-workspace-tabs-shade {
@include shade;
z-index: 2;
bottom: auto;
height: 35px;
}
.red-ui-workspace-chart-background {
fill: $view-background;
@@ -49,6 +55,15 @@
stroke: $view-grid-color;
stroke-width: 1px;
}
.red-ui-workspace-select-mode {
.red-ui-workspace-chart-background {
opacity: 0.7;
// fill: $view-select-mode-background;
}
.red-ui-workspace-chart-grid line {
opacity: 0.8;
}
}
.red-ui-palette-closed #red-ui-workspace {
left: 7px;
@@ -92,6 +107,7 @@
}
}
#red-ui-navigator-canvas {
position: absolute;
bottom: 0;