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

Rework Subflow Instance property UI (#2236)

Browse Source 
* Add support of Subflow UI definition

* new UI definition for env var

* fix label

* fixed value obtaining

* fixed label width

* fix checkbox

* fix subflow info

* remove old subflow ui tests

* add tests

* merge ui new changes

* fix initial open button

* fix environment variable edit tab

* WIP: cp-1

* Rework subflow ui property

* Restrict SF value type according to input selection

* Move subflow property UI code to subflow.js

* Update subflow ui type select appearance

* Present subflow instance properties as table rather than generated UI

* Move subflow instance properties to separate tab

* Fix subflow property ui element layout issues
This commit is contained in:
Nick O'Leary
2019-08-12 15:01:54 +01:00
committed by GitHub
parent c8acc6a12e
commit 880757fb5d
19 changed files with 2125 additions and 381 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -60,10 +60,12 @@
.red-ui-icon-picker {
a {
text-decoration: none;
color: $primary-text-color;
}
a:hover,
a:focus {
text-decoration: none;
color: $primary-text-color;
}
p {

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

@@ -79,6 +79,9 @@
}
a {
img {
max-width: 14px;
}
.fa {
width: 20px;
margin-left: -25px;

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

@@ -190,6 +190,10 @@ button.red-ui-tray-resize-button {
border-color: $form-input-border-error-color !important;
}
.input-updated {
border-color: $node-selected-color !important;
}
.form-row {
clear: both;
color: $form-text-color;
@@ -421,6 +425,15 @@ button.red-ui-button-small
height: 200px;
overflow-y: scroll;
line-height: 0px;
&.red-ui-icon-list-dark {
.red-ui-palette-icon-fa {
color: $secondary-text-color;
}
.red-ui-palette-icon-container {
background: $secondary-background;
border-radius: 4px;
}
}
}
.red-ui-icon-list-icon {
display: inline-block;
@@ -428,6 +441,7 @@ button.red-ui-button-small
padding: 4px;
cursor: pointer;
border-radius: 4px;
&:hover {
background: $list-item-background-hover;
}
@@ -579,3 +593,406 @@ button.red-ui-button-small
button.red-ui-toggleButton.toggle {
text-align: left;
}
.red-ui-editor-subflow-env-ui-row {
margin-right: 3px;
>div {
display: grid;
grid-template-columns: 16px 40px 35% auto;
}
>div:first-child {
font-size: 0.9em;
color: $tertiary-text-color;
margin: 3px 0 -4px;
>div {
padding-left: 3px;
}
}
>div:last-child {
>div {
height: 40px;
line-height: 30px;
display: inline-block;
box-sizing: border-box;
// border-left: 2px dashed $secondary-border-color;
// border-bottom: 2px dashed $secondary-border-color;
// border: 1px dashed $secondary-border-color;
border-right: none;
&:not(:first-child) {
padding: 3px;
}
// &:last-child {
// border-right: 1px dashed $secondary-border-color;
// }
.placeholder-input {
position: relative;
padding: 0 3px;
line-height: 24px;
opacity: 0.8
}
.red-ui-typedInput-value-label,.red-ui-typedInput-option-label {
select,.placeholder-input {
margin: 3px;
height: 26px;
width: calc(100% - 10px);
padding-left: 3px;
}
.placeholder-input {
span:first-child {
display:inline-block;
height: 100%;
width: 20px;
text-align:center;
border-right: 1px solid $secondary-border-color;
background: $tertiary-background;
}
}
input[type="checkbox"] {
margin-left: 8px;
margin-top: 0;
height: 100%;
}
}
}
>div:nth-child(1) {
border: none;
padding: 2px;
.red-ui-editableList-item-handle {
position:relative;
top: 0px;
color: $tertiary-text-color;
}
}
>div:nth-child(2) {
margin: 4px;
height: 32px;
border: 1px dashed $secondary-border-color;
text-align: center;
a {
display: block;
width: 100%;
height: 100%;
line-height: 32px;
&:hover {
background: $secondary-background-hover;
}
i {
height: 100%;
vertical-align: middle;
}
}
}
>div:nth-child(3) {
position: relative;
input {
width: 100%;
}
}
}
}
span.red-ui-editor-subflow-env-lang-icon {
position: absolute;
display: inline-block;
background: $secondary-background;
opacity: 0.8;
width: 20px;
line-height: 32px;
height: 32px;
text-align: center;
top: 4px;
right: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
// .red-ui-editor-subflow-ui-grid {
// width: 100%;
// .red-ui-editableList-container {
// border: none;
// border-radius: 0;
// }
// .red-ui-editableList-container li {
// border: none;
// padding: 0;
// &:not(:first-child) .red-ui-editableList-item-content >div:first-child >div {
// border-top: none;
// }
// &.ui-sortable-helper {
// border: 2px dashed $secondary-border-color;
// .red-ui-editableList-item-content {
// >div {
// border: none;
// opacity: 0.7
// }
//
// }
// }
// }
//
// .red-ui-editableList-item-content {
// >div>div {
// display: inline-block;
// box-sizing: border-box;
// border-left: 1px dashed $secondary-border-color;
// border-bottom: 1px dashed $secondary-border-color;
// }
// >div:first-child {
// font-size: 0.9em;
// display: grid;
// grid-template-columns: 25px auto 20px;
// >div {
// border-top: 1px dashed $secondary-border-color;
// padding: 1px;
// }
// >div:nth-child(3) {
// border-top: none;
// border-bottom: none;
// // width: 20px;
// }
// }
// >div:last-child {
// display: grid;
// grid-template-columns: 25px 140px auto 20px;
// >div {
// height: 48px;
// line-height: 30px;
// // display: inline-block;
// // height: 48px;
// // line-height: 30px;
// // box-sizing: border-box;
// //
// // border-left: 2px dashed $secondary-border-color;
// border-top: none;
// // border-bottom: 2px dashed $secondary-border-color;
// &:not(:first-child) {
// padding: 6px 3px;
// }
// .placeholder-input {
// position: relative;
// padding: 0 3px;
// line-height: 24px;
// opacity: 0.8
// }
// .red-ui-typedInput-value-label,.red-ui-typedInput-option-label {
// select,.placeholder-input {
// margin: 3px;
// height: 26px;
// width: calc(100% - 10px);
// padding-left: 3px;
// }
// input[type="checkbox"] {
// margin-left: 8px;
// margin-top: 0;
// height: 100%;
// }
// }
// }
// >div:nth-child(1) {
// text-align: center;
// a {
// display: block;
// width: 100%;
// height: 100%;
// line-height: 45px;
// &:hover {
// background: $secondary-background-hover;
// }
// }
// }
// >div:nth-child(2) {
// input {
// width: 100%;
// }
// // width: 140px;
// }
// >div:nth-child(3) {
// position: relative;
// .options-button {
// position: absolute;
// top: calc(50% - 10px);
// margin-right: 2px;
// right: 2px;
// }
// }
// >div:nth-child(4) {
// border-top: none;
// border-bottom: none;
// // width: 20px;
// }
//
// }
// }
// }
.red-ui-editor-subflow-ui-edit-panel {
padding-bottom: 3px;
background: $primary-background;
.red-ui-editableList-border {
border: none;
border-radius: 0;
border-bottom: 1px solid $secondary-border-color;
}
.red-ui-editableList-container {
}
.red-ui-editableList-addButton {
margin-left: 2px;
}
.red-ui-editableList-header {
background: $primary-background;
display: grid;
grid-template-columns: 50% 50%;
color: $secondary-text-color;
div:first-child {
padding-left: 23px;
}
div:last-child {
padding-left: 3px;
}
}
.red-ui-editableList-container {
padding: 0 1px;
li {
background: $secondary-background;
// border-bottom: none;
padding: 0;
.red-ui-editableList-item-content {
display: grid;
grid-template-columns: 50% 50%;
>div {
position:relative;
}
}
input {
margin-bottom: 0;
border:none;
width: 100%;
border-right: 1px solid $secondary-border-color;
border-radius: 0;
&:focus {
box-shadow: 0 0 0 1px inset $form-input-focus-color;
}
&:first-child {
border-left: 1px solid $secondary-border-color;
}
}
button.red-ui-typedInput-type-select, button.red-ui-typedInput-option-expand, button.red-ui-typedInput-option-trigger {
border-radius: 0;
height: 34px;
}
.red-ui-typedInput-container {
border-radius: 0;
border: none;
input.red-ui-typedInput-input {
height: 34px;
border-right: none;
}
}
.red-ui-editor-subflow-env-lang-icon {
top: 1px;
right: 1px;
border-top-right-radius:0;
border-bottom-right-radius:0;
}
.red-ui-editableList-item-remove {
right: 3px;
}
}
}
}
.node-input-env-locales-row {
position: relative;
top: -20px;
float: right;
select {
width: 160px;
height: 20px;
min-width: 20px;
line-height: 18px;
font-size: 10px;
}
}
.node-input-env-container-row {
min-width: 470px;
position: relative;
.red-ui-editableList-item-content {
label {
margin-bottom: 0;
line-height: 32px;
span {
display: inline-block;
width: 20px;
text-align: center;
}
}
>div:first-child {
display: grid;
padding-left: 5px;
grid-template-columns: 40% auto 37px;
> :first-child {
width: calc(100% - 5px);
}
input {
width: calc(100% - 5px);
}
}
&.red-ui-editor-subflow-env-editable {
>div:first-child {
padding-left: 0;
grid-template-columns: 24px 40% auto 37px;
> a:first-child {
text-align: center;
line-height: 32px;
i.fa-angle-right {
transition: all 0.2s linear;
}
&.expanded {
i.fa-angle-right {
transform: rotate(90deg);
}
}
}
}
}
}
.red-ui-editableList-border .red-ui-editableList-header {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background: $tertiary-background;
padding: 0;
>div {
display: grid;
grid-template-columns: 24px 40% auto 37px;
>div {
display: inline-block;
}
}
}
.red-ui-editableList-container {
padding: 0;
.red-ui-editableList-item-handle {
top: 25px;
}
.red-ui-editableList-item-remove {
top: 25px;
right: 5px;
}
}
}
#subflow-input-ui {
// .form-row {
// display: grid;
// grid-template-columns: 120px auto;
// label span {
// display: inline-block;
// width: 20px;
// text-align: center;
// }
// }
}

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

@@ -150,7 +150,8 @@
input[type="tel"],
input[type="color"],
div[contenteditable="true"],
.uneditable-input {
.uneditable-input,
.placeholder-input {
box-sizing: border-box;
display: inline-block;
height: 34px;
@@ -190,7 +191,8 @@
input[type="tel"],
input[type="color"],
div[contenteditable="true"],
.uneditable-input {
.uneditable-input,
.placeholder-input {
background-color: $form-input-background;
border: 1px solid $form-input-border-color;
}

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

@@ -192,6 +192,7 @@
color: $header-menu-color;
padding: 3px 40px;
img {
max-width: 100%;
margin-right: 10px;
padding: 4px;
border: 3px solid transparent;

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

@@ -162,3 +162,15 @@
background: none;
color: $tertiary-text-color;
}
.red-ui-popover-panel {
@include component-shadow;
font-family: $primary-font;
font-size: $primary-font-size;
position: absolute;
box-sizing: border-box;
border: 1px solid $primary-border-color;
background: $secondary-background;
z-index: 2000;
}

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

@@ -58,118 +58,6 @@
text-overflow: ellipsis;
}
button.red-ui-typedInput-type-select,
button.red-ui-typedInput-option-expand,
button.red-ui-typedInput-option-trigger
{
text-align: left;
border: none;
position: absolute;
box-sizing: border-box;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
padding: 0 1px 0 5px;
display:inline-block;
background: $form-button-background;
height: 32px;
line-height: 32px;
vertical-align: middle;
color: $form-text-color;
i.red-ui-typedInput-icon {
margin-left: 1px;
margin-right: 2px;
vertical-align: middle;
}
&.disabled {
cursor: default;
i.red-ui-typedInput-icon {
color: $secondary-text-color-disabled;
}
}
.red-ui-typedInput-type-label,.red-ui-typedInput-option-label {
display: inline-block;
height: 100%;
padding: 0 1px 0 5px;
img {
max-width: none;
}
}
&:not(.disabled):hover {
text-decoration: none;
background: $workspace-button-background-hover;
}
&:focus {
text-decoration: none;
outline: none;
box-shadow: inset 0 0 0 1px $form-input-focus-color;
}
&:not(.disabled):active {
background: $workspace-button-background-active;
text-decoration: none;
}
&.red-ui-typedInput-full-width {
width: 100%;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
&:before {
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
}
}
button.red-ui-typedInput-option-expand {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
right: 0;
}
button.red-ui-typedInput-option-trigger {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
padding: 0 0 0 0;
position:absolute;
right: 0;
.red-ui-typedInput-option-label {
background:$form-button-background;
color: $form-text-color;
position:absolute;
left:0;
right:23px;
top: 0;
padding: 0 5px 0 8px;
i.red-ui-typedInput-icon {
margin-right: 4px;
}
}
.red-ui-typedInput-option-caret {
top: 0;
position: absolute;
right: 0;
bottom: 0;
width: 17px;
padding-left: 6px;
&:before {
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
}
}
&:focus {
box-shadow: none;
}
&:focus .red-ui-typedInput-option-caret {
box-shadow: inset 0 0 0 1px $form-input-focus-color;
}
}
}
.red-ui-typedInput-options {
@include component-shadow;
@@ -180,6 +68,7 @@
max-height: 350px;
overflow-y: auto;
border: 1px solid $primary-border-color;
box-sizing: border-box;
background: $secondary-background;
z-index: 2000;
a {
@@ -200,8 +89,124 @@
text-decoration: none;
background: $workspace-button-background-active;
}
input[type="checkbox"] {
margin-right: 6px;
}
}
.red-ui-typedInput-icon {
margin-right: 4px;
margin-right: 6px;
}
}
button.red-ui-typedInput-type-select,
button.red-ui-typedInput-option-expand,
button.red-ui-typedInput-option-trigger
{
text-align: left;
border: none;
position: absolute;
box-sizing: border-box;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
padding: 0 1px 0 5px;
display:inline-block;
background: $form-button-background;
height: 32px;
line-height: 30px;
min-width: 23px;
vertical-align: middle;
color: $form-text-color;
i.red-ui-typedInput-icon {
margin-left: 1px;
margin-right: 2px;
vertical-align: middle;
}
&.disabled {
cursor: default;
i.red-ui-typedInput-icon {
color: $secondary-text-color-disabled;
}
}
.red-ui-typedInput-type-label,.red-ui-typedInput-option-label {
display: inline-block;
vertical-align: middle;
height: 100%;
padding: 0 1px 0 5px;
img {
max-width: none;
}
}
&:not(.disabled):hover {
text-decoration: none;
background: $workspace-button-background-hover;
}
&:focus {
text-decoration: none;
outline: none;
box-shadow: inset 0 0 0 1px $form-input-focus-color;
}
&:not(.disabled):active {
background: $workspace-button-background-active;
text-decoration: none;
}
&.red-ui-typedInput-full-width {
width: 100%;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
&:before {
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
}
}
button.red-ui-typedInput-option-expand {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
right: 0;
}
button.red-ui-typedInput-option-trigger {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
padding: 0 0 0 0;
position:absolute;
right: 0;
.red-ui-typedInput-option-label {
background:$form-button-background;
color: $form-text-color;
position:absolute;
left:0;
right:23px;
top: 0;
padding: 0 5px 0 8px;
i.red-ui-typedInput-icon {
margin-right: 4px;
}
}
.red-ui-typedInput-option-caret {
top: 0;
position: absolute;
right: 0;
bottom: 0;
width: 17px;
padding-left: 5px;
&:before {
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
}
}
&:focus {
box-shadow: none;
}
&:focus .red-ui-typedInput-option-caret {
box-shadow: inset 0 0 0 1px $form-input-focus-color;
}
}