mirror of
https://github.com/pgadmin-org/pgadmin4.git
synced 2025-02-25 18:55:31 -06:00
Added support for formatted JSON viewer/editor when interacting with data in a JSON column. Fixes #5198
This commit is contained in:
Yogesh Mahajan
committed by
Akshay Joshi
Akshay Joshi
parent
23265061b2
commit
8e214ca8fb
406
web/pgadmin/static/scss/_jsoneditor.overrides.scss
Normal file
406
web/pgadmin/static/scss/_jsoneditor.overrides.scss
Normal file
@@ -0,0 +1,406 @@
|
||||
.jsoneditor-menu a.jsoneditor-poweredBy {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.jsoneditor {
|
||||
border-color: $border-color;
|
||||
}
|
||||
|
||||
/* Menu Bar*/
|
||||
.jsoneditor-menu {
|
||||
background: $color-gray-light;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
/* Menu Bar buttons*/
|
||||
.jsoneditor-menu>button {
|
||||
font-family: $font-family-icon !important;
|
||||
font-size: $navbar-font-size !important;
|
||||
line-height: $line-height-base !important;
|
||||
background-image:none !important;
|
||||
font-weight: 600 !important;
|
||||
border-radius: $border-radius;
|
||||
border-color:$color-gray;
|
||||
opacity: 1;
|
||||
background-color:$btn-primary-icon-bg;
|
||||
color: $color-fg;
|
||||
font-weight: normal !important;
|
||||
}
|
||||
|
||||
/* Navigation Bar */
|
||||
.jsoneditor-navigation-bar{
|
||||
font-family: $font-family-primary !important;
|
||||
background-color: $color-bg;
|
||||
color: $color-fg;
|
||||
border-bottom: 1px solid $color-gray;
|
||||
}
|
||||
|
||||
/* Over rides icons */
|
||||
.jsoneditor-menu>button.jsoneditor-expand-all::before{
|
||||
content: "\f424";
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.jsoneditor-menu>button.jsoneditor-collapse-all::before{
|
||||
content: "\f422";
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.jsoneditor-menu>button.jsoneditor-redo::before {
|
||||
content: "\f01e";
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.jsoneditor-menu>button.jsoneditor-undo::before {
|
||||
content: "\f0e2";
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.jsoneditor-menu>button.jsoneditor-format::before {
|
||||
content: "\f03c";
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.jsoneditor-menu>button.jsoneditor-compact::before {
|
||||
content: "\f066";
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.jsoneditor-menu>button.jsoneditor-sort::before {
|
||||
content: "\f160";
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.jsoneditor-menu>button.jsoneditor-repair::before {
|
||||
content: "\f0ad";
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.jsoneditor-menu>button.jsoneditor-transform::before {
|
||||
content: "\f0b0";
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
/* Undo redo buttons */
|
||||
.jsoneditor-menu>.jsoneditor-modes>button:disabled,
|
||||
.jsoneditor-menu>button:disabled {
|
||||
color:$color-fg !important;
|
||||
opacity: $btn-disabled-opacity;
|
||||
border: thin solid;
|
||||
border-color:$color-gray;
|
||||
border-radius: $border-radius;
|
||||
background-color:$btn-primary-icon-bg !important;
|
||||
}
|
||||
|
||||
/* Mode drop-down */
|
||||
.jsoneditor-menu>.jsoneditor-modes>button,{
|
||||
font-family: $font-family-primary !important;
|
||||
font-size: $font-size-base !important;
|
||||
line-height: $line-height-base !important;
|
||||
background-image:none !important;
|
||||
font-weight: 600 !important;
|
||||
border-radius: $border-radius;
|
||||
border-color:$color-gray;
|
||||
opacity: 1;
|
||||
background-color:$btn-primary-icon-bg;
|
||||
color: $color-fg;
|
||||
font-weight: normal !important;
|
||||
}
|
||||
|
||||
/* Mode drop-down options */
|
||||
.jsoneditor-contextmenu .jsoneditor-menu button,
|
||||
.jsoneditor-contextmenu .jsoneditor-separator {
|
||||
font-family: $font-family-primary !important;
|
||||
font-size: $font-size-base !important;
|
||||
background-color: $color-bg !important;
|
||||
color: $color-fg !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Drop-down hovered*/
|
||||
.jsoneditor-contextmenu .jsoneditor-menu li button:hover {
|
||||
background-color: $select2-container-hover-bg !important;
|
||||
}
|
||||
|
||||
/* Drop-down selected*/
|
||||
.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected,
|
||||
.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:focus,
|
||||
.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:hover {
|
||||
background-color: $color-primary !important;
|
||||
color: $color-fg;
|
||||
}
|
||||
|
||||
/* Search Box*/
|
||||
.jsoneditor-frame,
|
||||
.jsoneditor-search input{
|
||||
color: $color-fg;
|
||||
background-color: $color-bg;
|
||||
}
|
||||
|
||||
/* Search Box results */
|
||||
.jsoneditor-results {
|
||||
color: $color-fg;
|
||||
}
|
||||
|
||||
/* Ace editor Setting */
|
||||
/* Ace editor numbers */
|
||||
.ace-jsoneditor .ace_gutter {
|
||||
background-color:$color-gray-light;
|
||||
color:$color-fg;
|
||||
}
|
||||
/* Ace editor code background */
|
||||
.ace-jsoneditor .ace_scroller {
|
||||
background-color: $color-bg;
|
||||
}
|
||||
|
||||
// .ace-jsoneditor .ace_scroller:read-only{
|
||||
// background-color: $color-gray-lighter;
|
||||
// }
|
||||
|
||||
|
||||
/* Ace editor hide indent guide */
|
||||
.ace-jsoneditor .ace_indent-guide {
|
||||
background: none;
|
||||
}
|
||||
/* Ace editor Key names */
|
||||
.ace-jsoneditor .ace_variable {
|
||||
color: $color-fg !important;
|
||||
}
|
||||
|
||||
/* Ace editorfonts */
|
||||
.ace_editor,
|
||||
.ace-jsoneditor *{
|
||||
font-family: $font-family-editor !important;
|
||||
font-size: $font-size-base !important;
|
||||
line-height: $line-height-base !important;
|
||||
color: $color-fg;
|
||||
}
|
||||
.ace-jsoneditor.ace_editor {
|
||||
font-family: $font-family-editor !important;
|
||||
font-size: $font-size-base !important;
|
||||
line-height: $line-height-base !important;
|
||||
color: $color-fg;
|
||||
background-color:$color-bg !important;
|
||||
}
|
||||
|
||||
|
||||
/* /* font setting all other mode */
|
||||
/* form, tree, code, preview, schema-error */
|
||||
div.jsoneditor-default,
|
||||
div.jsoneditor-field,
|
||||
div.jsoneditor-value,
|
||||
div.jsoneditor textarea,
|
||||
div.jsoneditor td,
|
||||
div.jsoneditor-readonly,
|
||||
.jsoneditor-popover{
|
||||
font-family: $font-family-primary !important;
|
||||
font-size: $font-size-base !important;
|
||||
line-height: $line-height-base !important;
|
||||
color: $color-fg;
|
||||
background-color:$color-bg;
|
||||
}
|
||||
|
||||
|
||||
pre.jsoneditor-preview{
|
||||
background-color: $color-gray-lighter !important;
|
||||
}
|
||||
|
||||
|
||||
/* Hilight selected values in tree/form modes */
|
||||
div.jsoneditor-field.jsoneditor-highlight,
|
||||
div.jsoneditor-field[contenteditable=true]:focus,
|
||||
div.jsoneditor-field[contenteditable=true]:hover,
|
||||
div.jsoneditor-value.jsoneditor-highlight,
|
||||
div.jsoneditor-value[contenteditable=true]:focus,
|
||||
div.jsoneditor-value[contenteditable=true]:hover
|
||||
{
|
||||
background-color: $color-primary-light;
|
||||
border: 1px solid $color-primary-light;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
/* Hi-light line in code */
|
||||
.ace-jsoneditor .ace_marker-layer .ace_active-line {
|
||||
background-color: $color-primary-light;
|
||||
border: 1px solid $color-primary-light;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.ace-jsoneditor .ace_gutter-active-line {
|
||||
background-color:$color-gray-light;
|
||||
}
|
||||
|
||||
.ace-jsoneditor .ace_marker-layer .ace_selected-word {
|
||||
border: 1px solid $color-primary-light;
|
||||
}
|
||||
|
||||
|
||||
.ace-jsoneditor .ace_marker-layer .ace_selection {
|
||||
background: $color-primary-light;
|
||||
}
|
||||
|
||||
/* Nested DD*/
|
||||
.jsoneditor-contextmenu .jsoneditor-icon {
|
||||
background-image:none;
|
||||
}
|
||||
|
||||
.jsoneditor-contextmenu .jsoneditor-text {
|
||||
padding:4px 4px 4px 5px;
|
||||
}
|
||||
|
||||
|
||||
.jsoneditor-contextmenu .jsoneditor-menu{
|
||||
border: 1px solid $border-color;
|
||||
background: $color-bg !important;
|
||||
color: $color-fg !important;
|
||||
}
|
||||
|
||||
|
||||
.jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-expand, {
|
||||
height:0px;
|
||||
background-color: $color-gray-light !important;
|
||||
}
|
||||
|
||||
.jsoneditor-contextmenu .jsoneditor-menu li ul {
|
||||
padding: 0;
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.jsoneditor-contextmenu .jsoneditor-separator {
|
||||
height: 0;
|
||||
border-top: 1px solid $border-color;
|
||||
padding-top: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* Status Bar */
|
||||
.jsoneditor-statusbar {
|
||||
background-color: $color-gray-light !important;
|
||||
color: $color-primary-light-fg !important;
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
|
||||
/* Validation Bar */
|
||||
.jsoneditor .jsoneditor-validation-errors {
|
||||
background-color:$sql-history-error-bg !important;
|
||||
color:$color-fg;
|
||||
border: 1px solid $color-danger;
|
||||
}
|
||||
|
||||
.jsoneditor .jsoneditor-text-errors {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-top: 1px solid $color-gray;;
|
||||
}
|
||||
|
||||
|
||||
.jsoneditor .jsoneditor-text-errors tr,
|
||||
.jsoneditor .jsoneditor-text-errors td,
|
||||
.jsoneditor .jsoneditor-text-errors td pre,
|
||||
.jsoneditor .jsoneditor-text-errors tr.parse-error {
|
||||
background-color: $color-danger-lighter !important;
|
||||
color:$color-fg;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Transform & sort */
|
||||
/* Header */
|
||||
.jsoneditor-modal .pico-modal-header {
|
||||
font-family: $font-family-primary !important;
|
||||
font-size: $font-size-base !important;
|
||||
font-weight: bold;
|
||||
background: $color-primary;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
/* Body */
|
||||
.pico-content{
|
||||
background-color: $color-gray-light !important;
|
||||
}
|
||||
|
||||
/* Disable links */
|
||||
.jsoneditor-modal a {
|
||||
color: $color-fg !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Hide links */
|
||||
.jsoneditor-modal br{
|
||||
|
||||
}
|
||||
|
||||
/* Fields */
|
||||
.jsoneditor-modal,
|
||||
.jsoneditor-modal #query,
|
||||
.jsoneditor-modal input,
|
||||
.jsoneditor-modal input[type=text],
|
||||
.jsoneditor-modal input[type=text]:focus,
|
||||
.jsoneditor-modal option,
|
||||
.jsoneditor-modal select,
|
||||
.jsoneditor-modal table td,
|
||||
.jsoneditor-modal table th,
|
||||
.jsoneditor-modal textarea, {
|
||||
color: $color-fg !important;
|
||||
background-color: $color-bg !important;
|
||||
font-size: $font-size-base !important;
|
||||
font-family: $font-family-primary !important;
|
||||
padding: 4px;
|
||||
border-color:$input-border-color;
|
||||
}
|
||||
|
||||
/* Ascending descending buttons */
|
||||
.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-asc input.jsoneditor-button-asc,
|
||||
.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-desc input.jsoneditor-button-desc {
|
||||
color: $color-fg !important;
|
||||
background-color: $color-primary !important;
|
||||
border-color: $color-primary !important;
|
||||
}
|
||||
|
||||
|
||||
.jsoneditor-modal input[type=button]{
|
||||
color: $color-fg;
|
||||
background-color: $color-bg;
|
||||
}
|
||||
|
||||
/* OK Button */
|
||||
.jsoneditor-modal input[type=submit] {
|
||||
color: $btn-primary-color !important;
|
||||
border-color: $color-primary !important;
|
||||
background-color: $color-primary !important;
|
||||
}
|
||||
|
||||
.jsoneditor-modal .jsoneditor-jmespath-label {
|
||||
color: $color-fg;
|
||||
font-weight: bold;
|
||||
}
|
||||
.selectr-option,
|
||||
.selectr-options-container {
|
||||
color: $color-fg;
|
||||
background-color: $color-bg;
|
||||
}
|
||||
|
||||
.selectr-option.selected {
|
||||
background-color: $color-primary !important;
|
||||
color: $color-fg !important;
|
||||
}
|
||||
|
||||
.selectr-option.active {
|
||||
color: $color-fg !important;
|
||||
background-color: $color-gray-light !important;
|
||||
}
|
||||
|
||||
.jsoneditor-modal .selectr-selected{
|
||||
color: $color-fg;
|
||||
background-color: $color-bg;
|
||||
}
|
||||
|
||||
.jsoneditor-modal .selectr-selected .selectr-tag {
|
||||
color: $color-fg !important;
|
||||
background-color: $color-primary !important;
|
||||
border: 1px solid $color-primary;
|
||||
}
|
||||
|
||||
.jsoneditor-modal .selectr-selected .selectr-tag-remove::before{
|
||||
color: $color-primary !important;
|
||||
}
|
||||
@@ -32,3 +32,4 @@ $theme-colors: (
|
||||
@import 'bootstrap4-toggle.overrides';
|
||||
@import 'pickr.overrides';
|
||||
@import 'tippy.overrides';
|
||||
@import 'jsoneditor.overrides';
|
||||
|
||||
Reference in New Issue
Block a user