mirror of
https://github.com/node-red/node-red.git
synced 2025-03-01 10:36:34 +00:00
Add visual json editor
This commit is contained in:
@@ -461,3 +461,114 @@ button.red-ui-button-small
|
||||
margin: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.red-ui-editor input.red-ui-editor-type-json-editor-key {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.red-ui-editor-type-json-editor {
|
||||
height: calc(100% - 10px);
|
||||
.red-ui-treeList-container {
|
||||
background: $secondary-background;
|
||||
}
|
||||
.red-ui-treeList-label {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
white-space: nowrap;
|
||||
min-height: 35px;
|
||||
.red-ui-treeList-icon:before {
|
||||
content:'';
|
||||
display: inline-block;
|
||||
height: 35px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
> span, > span > span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
&:hover, &:hover .red-ui-treeList-sublabel-text {
|
||||
background: $secondary-background-disabled;
|
||||
.red-ui-editor-type-json-editor-item-gutter {
|
||||
> span, > button {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.selected {
|
||||
.red-ui-editor-type-json-editor-item-gutter {
|
||||
background: $secondary-background-hover;
|
||||
}
|
||||
&:hover {
|
||||
.red-ui-editor-type-json-editor-item-gutter {
|
||||
background: $secondary-background-selected;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.red-ui-editor-type-json-root-node {
|
||||
.red-ui-editor-type-json-editor-item-gutter {
|
||||
> span, > button {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.red-ui-editor-type-json-editor-controls {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
display: none;
|
||||
}
|
||||
.red-ui-editor-type-json-editor-key {
|
||||
width: 100px;
|
||||
}
|
||||
.red-ui-editor-type-json-editor-label {
|
||||
display: inline-block;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.red-ui-editor-type-json-editor-label-value {
|
||||
min-width: 200px;
|
||||
}
|
||||
.red-ui-editor-type-json-editor-label-value,
|
||||
.red-ui-editor-type-json-editor-label-key {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
min-height: 34px;
|
||||
line-height: 30px;
|
||||
padding: 0 2px;
|
||||
border: 2px solid rgba(0,0,0,0);
|
||||
border-radius: 3px;
|
||||
&:not(.red-ui-editor-type-json-editor-label-array-key):hover {
|
||||
border-color: $list-item-background-hover;
|
||||
border-style: dashed;
|
||||
}
|
||||
}
|
||||
.red-ui-editor-type-json-editor-item-gutter {
|
||||
width: 48px;
|
||||
padding-left: 4px;
|
||||
|
||||
height: 100%;
|
||||
line-height: 35px;
|
||||
color: $tertiary-text-color;
|
||||
background: $secondary-background-disabled;
|
||||
> span {
|
||||
display: inline-block;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
width: 20px;
|
||||
text-align:center;
|
||||
}
|
||||
> span, > button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.red-ui-editor-type-json-editor-item-handle {
|
||||
cursor: move;
|
||||
}
|
||||
.red-ui-editor-type-json-tab-content {
|
||||
position: relative;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
|
Reference in New Issue
Block a user