Add visual json editor

This commit is contained in:
Nick O'Leary
2019-06-11 14:44:44 +01:00
parent c97786e12c
commit e3e0378857
6 changed files with 923 additions and 90 deletions

View File

@@ -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);
}