StardewValley
/
jsoneditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

In between menu large on the right side

This commit is contained in:
jos 2017-12-30 17:33:07 +01:00
parent 5d4a551526
commit d53e5360a3
2 changed files with 76 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/jsoneditor/components/jsoneditor.css
View File

@ -525,6 +525,22 @@ button.jsoneditor-type-Array.jsoneditor-selected span.jsoneditor-icon {
div.jsoneditor-node-container { div.jsoneditor-node-container {
position: relative; position: relative;
transition: background-color 100ms ease-in; } transition: background-color 100ms ease-in; }
div.jsoneditor-node-container div.jsoneditor-insert-area {
position: absolute;
width: 100%;
height: 6px;
left: 0;
top: -3px;
box-sizing: border-box;
z-index: 1; }
div.jsoneditor-node-container div.jsoneditor-insert-area:after {
content: '';
position: absolute;
top: -7px;
right: 0;
width: 60px;
height: 20px;
background: inherit; }
div.jsoneditor-node-container.jsoneditor-selected { div.jsoneditor-node-container.jsoneditor-selected {
background-color: #ffed99; } background-color: #ffed99; }
div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-hover { div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-hover {
@ -532,43 +548,34 @@ div.jsoneditor-node-container {
div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-hover.jsoneditor-hover-insert-area-after { div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-hover.jsoneditor-hover-insert-area-after {
background-color: #ffed99; } background-color: #ffed99; }
div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-hover.jsoneditor-hover-insert-area-after > div.jsoneditor-insert-area { div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-hover.jsoneditor-hover-insert-area-after > div.jsoneditor-insert-area {
border: 1px dashed gray; border-color: #e5e5e5;
background-color: #f2f2f2; } background-color: #e5e5e5; }
div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-hover.jsoneditor-hover-insert-area-after.jsoneditor-selected-insert-area-before > div.jsoneditor-insert-area { div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-hover.jsoneditor-hover-insert-area-after.jsoneditor-selected-insert-area-before > div.jsoneditor-insert-area {
border: 1px dashed #f4af41; border-color: #ffdb80;
background-color: #ffdb80; } background-color: #ffdb80; }
div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-selected-insert-area-before { div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-selected-insert-area-before {
background-color: inherit; } background-color: inherit; }
div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-selected-insert-area-before.jsoneditor-hover { div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-selected-insert-area-before.jsoneditor-hover {
background-color: #f2f2f2; } background-color: #e5e5e5; }
div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-selected-insert-area-before.jsoneditor-hover.jsoneditor-hover-insert-area-after { div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-selected-insert-area-before.jsoneditor-hover.jsoneditor-hover-insert-area-after {
background-color: inherit; } background-color: inherit; }
div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-selected-insert-area-before > div.jsoneditor-insert-area { div.jsoneditor-node-container.jsoneditor-selected.jsoneditor-selected-insert-area-before > div.jsoneditor-insert-area {
border: 1px dashed #f4af41; border-color: #ffed99;
background: #ffed99; } background-color: #ffed99; }
div.jsoneditor-node-container.jsoneditor-selected div.jsoneditor-hover { div.jsoneditor-node-container.jsoneditor-selected div.jsoneditor-hover {
background-color: #ffdb80; } background-color: #ffdb80; }
div.jsoneditor-node-container.jsoneditor-selected div.jsoneditor-hover.jsoneditor-hover-insert-area-after { div.jsoneditor-node-container.jsoneditor-selected div.jsoneditor-hover.jsoneditor-hover-insert-area-after {
background-color: inherit; } background-color: inherit; }
div.jsoneditor-node-container.jsoneditor-selected div.jsoneditor-hover.jsoneditor-hover-insert-area-after > div.jsoneditor-insert-area { div.jsoneditor-node-container.jsoneditor-selected div.jsoneditor-hover.jsoneditor-hover-insert-area-after > div.jsoneditor-insert-area {
border: 1px dashed #f4af41; border-color: #ffdb80;
background: #ffdb80; } background-color: #ffdb80; }
div.jsoneditor-node-container.jsoneditor-hover { div.jsoneditor-node-container.jsoneditor-hover {
background-color: #f2f2f2; } background-color: #e5e5e5; }
div.jsoneditor-node-container.jsoneditor-hover.jsoneditor-hover-insert-area-after { div.jsoneditor-node-container.jsoneditor-hover.jsoneditor-hover-insert-area-after {
background-color: inherit; } background-color: inherit; }
div.jsoneditor-node-container.jsoneditor-hover.jsoneditor-hover-insert-area-after > div.jsoneditor-insert-area { div.jsoneditor-node-container.jsoneditor-hover.jsoneditor-hover-insert-area-after > div.jsoneditor-insert-area {
border: 1px dashed gray; border-color: #e5e5e5;
background-color: #f2f2f2; } background-color: #e5e5e5; }
div.jsoneditor-node-container div.jsoneditor-insert-area {
position: absolute;
width: 100%;
height: 8px;
left: 0;
top: -4px;
border: 1px transparent;
box-sizing: border-box;
z-index: 1; }
div.jsoneditor-node-container div.jsoneditor-floating-menu { div.jsoneditor-node-container div.jsoneditor-floating-menu {
position: absolute; position: absolute;
bottom: 100%; bottom: 100%;

71
src/jsoneditor/components/jsoneditor.scss
View File

@ -9,11 +9,15 @@ $floating-menu-background: #4d4d4d;
$floating-menu-color: #fff; $floating-menu-color: #fff;
// $selectedColor: #e5e5e5; // $selectedColor: #e5e5e5;
$selectedColor: #ffed99; $selectedColor: #ffed99;
$hoverColor: #f2f2f2; //$hoverColor: #f2f2f2;
$hoverColor: #e5e5e5;
$hoverAndSelectedColor: #ffdb80; $hoverAndSelectedColor: #ffdb80;
// TODO: split this scss file into separate files per React component // TODO: split this scss file into separate files per React component
$line-height: 20px;
$insert-area-height: 6px;
.jsoneditor { .jsoneditor {
border: 1px solid $theme-color; border: 1px solid $theme-color;
width: 100%; width: 100%;
@ -139,7 +143,7 @@ div.jsoneditor-list {
.jsoneditor-value, .jsoneditor-value,
.jsoneditor-readonly, .jsoneditor-readonly,
.jsoneditor-separator { .jsoneditor-separator {
line-height: 20px; line-height: $line-height;
font-family: $fontFamily; font-family: $fontFamily;
font-size: $fontSize; font-size: $fontSize;
@ -569,6 +573,42 @@ div.jsoneditor-node-container {
// TODO: can the hover/select css be simplified? // TODO: can the hover/select css be simplified?
div.jsoneditor-insert-area {
//background: gray;
position: absolute;
width: 100%;
height: $insert-area-height;
left: 0;
top: -$insert-area-height/2;
box-sizing: border-box;
z-index: 1; // must be on top of next node, it overlaps a bit
$top: -$line-height / 2 + 3px;
// FIXME: nice border color
//&:before {
// content: '';
// position: absolute;
// right: 60px;
// top: $top;
// width: 0;
// height: 0;
// border-top: $line-height / 2 solid transparent;
// border-right: $line-height / 2 solid red;
// border-bottom: $line-height / 2 solid transparent;
//}
&:after {
content: '';
position: absolute;
top: $top;
right: 0;
width: 60px;
height: $line-height;
background: inherit;
}
}
&.jsoneditor-selected { &.jsoneditor-selected {
background-color: $selectedColor; background-color: $selectedColor;
@ -579,13 +619,13 @@ div.jsoneditor-node-container {
background-color: $selectedColor; background-color: $selectedColor;
> div.jsoneditor-insert-area { > div.jsoneditor-insert-area {
border: 1px dashed gray; border-color: $hoverColor;
background-color: $hoverColor; background-color: $hoverColor;
} }
&.jsoneditor-selected-insert-area-before { &.jsoneditor-selected-insert-area-before {
> div.jsoneditor-insert-area { > div.jsoneditor-insert-area {
border: 1px dashed #f4af41; border-color: $hoverAndSelectedColor;
background-color: $hoverAndSelectedColor; background-color: $hoverAndSelectedColor;
} }
} }
@ -604,8 +644,8 @@ div.jsoneditor-node-container {
} }
> div.jsoneditor-insert-area { > div.jsoneditor-insert-area {
border: 1px dashed #f4af41; border-color: $selectedColor;
background: $selectedColor; background-color: $selectedColor;
} }
} }
@ -617,8 +657,8 @@ div.jsoneditor-node-container {
background-color: inherit; background-color: inherit;
> div.jsoneditor-insert-area { > div.jsoneditor-insert-area {
border: 1px dashed #f4af41; border-color: $hoverAndSelectedColor;
background: $hoverAndSelectedColor; background-color: $hoverAndSelectedColor;
} }
} }
} }
@ -631,25 +671,12 @@ div.jsoneditor-node-container {
background-color: inherit; background-color: inherit;
> div.jsoneditor-insert-area { > div.jsoneditor-insert-area {
border: 1px dashed gray; border-color: $hoverColor;
background-color: $hoverColor; background-color: $hoverColor;
} }
} }
} }
div.jsoneditor-insert-area {
$height: 8px;
position: absolute;
width: 100%;
height: $height;
left: 0;
top: -$height/2;
border: 1px transparent;
box-sizing: border-box;
z-index: 1; // must be on top of next node, it overlaps a bit
}
div.jsoneditor-floating-menu { div.jsoneditor-floating-menu {
position: absolute; position: absolute;
bottom: 100%; bottom: 100%;