Styling improvements in the transform modal
This commit is contained in:
jos
parent
9e3b6fb196
commit
4818c4bb27
|
|
@ -6,6 +6,7 @@ https://github.com/josdejong/jsoneditor
|
|||
## not yet released, version 5.32.2
|
||||
|
||||
- Fixed #416: Clipped action menu for append nodes.
|
||||
- Styling improvements in the transform modal.
|
||||
|
||||
|
||||
## 2018-03-28, version 5.32.1
|
||||
|
|
|
|||
|
|
@ -262,13 +262,16 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {
|
|||
|
||||
.jsoneditor-modal table th,
|
||||
.jsoneditor-modal table td {
|
||||
padding: 5px 20px 5px 0;
|
||||
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
font-weight: normal;
|
||||
color: #4d4d4d;
|
||||
line-height: 32px;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.jsoneditor-modal table td {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.jsoneditor-modal p:first-child {
|
||||
|
|
@ -282,6 +285,10 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {
|
|||
.jsoneditor-modal table td:first-child {
|
||||
}
|
||||
|
||||
.jsoneditor-modal .jsoneditor-jmespath-block {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.jsoneditor-modal table td.jsoneditor-modal-input {
|
||||
text-align: right;
|
||||
padding-right: 0;
|
||||
|
|
@ -323,6 +330,10 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {
|
|||
font-family: arial, sans-serif;
|
||||
}
|
||||
|
||||
.jsoneditor-modal table th {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.jsoneditor-modal #query,
|
||||
.jsoneditor-modal .jsoneditor-transform-preview {
|
||||
font-family: "dejavu sans mono", "droid sans mono", consolas, monaco, "lucida console", "courier new", courier, monospace, sans-serif;
|
||||
|
|
@ -433,12 +444,21 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {
|
|||
.jsoneditor-modal .jsoneditor-jmespath-wizard {
|
||||
line-height: 1.2em;
|
||||
width: 100%;
|
||||
background: #ffffe0;
|
||||
border: 1px solid #ffe99a;
|
||||
padding: 0 10px 10px;
|
||||
padding: 0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.jsoneditor-modal .jsoneditor-jmespath-label {
|
||||
font-weight: bold;
|
||||
color: dodgerblue;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.jsoneditor-modal .jsoneditor-jmespath-wizard-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.jsoneditor-modal .jsoneditor-jmespath-wizard-label {
|
||||
font-style: italic;
|
||||
margin: 4px 0 2px 0;
|
||||
|
|
@ -448,7 +468,10 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {
|
|||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.jsoneditor-modal .jsoneditor-inline:not(:last-child) {
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.jsoneditor-modal .jsoneditor-jmespath-filter {
|
||||
|
|
|
|||
|
|
@ -21,15 +21,13 @@ function showTransformModal (node, container) {
|
|||
'Enter a <a href="http://jmespath.org" target="_blank">JMESPath</a> query to filter, sort, or transform the JSON data.<br/>' +
|
||||
'To learn JMESPath, go to <a href="http://jmespath.org/tutorial.html" target="_blank">the interactive tutorial</a>.' +
|
||||
'</p>' +
|
||||
'<table>' +
|
||||
'<tbody>' +
|
||||
'<tr>' +
|
||||
' <th>' + translate('transformWizardLabel') + ' </th>' +
|
||||
' <td>' +
|
||||
' <div id="wizard" class="jsoneditor-jmespath-wizard">' +
|
||||
' <div>' +
|
||||
' <div class="jsoneditor-jmespath-wizard-label">' + translate('transformWizardFilter') + '</div>' +
|
||||
' <div class="jsoneditor-jmespath-filter">' +
|
||||
'<div class="jsoneditor-jmespath-label">' + translate('transformWizardLabel') + ' </div>' +
|
||||
'<div id="wizard" class="jsoneditor-jmespath-block jsoneditor-jmespath-wizard">' +
|
||||
' <table class="jsoneditor-jmespath-wizard-table">' +
|
||||
' <tbody>' +
|
||||
' <tr>' +
|
||||
' <th>' + translate('transformWizardFilter') + '</th>' +
|
||||
' <td class="jsoneditor-jmespath-filter">' +
|
||||
' <div class="jsoneditor-inline jsoneditor-jmespath-filter-field" >' +
|
||||
' <select id="filterField">' +
|
||||
' </select>' +
|
||||
|
|
@ -47,11 +45,11 @@ function showTransformModal (node, container) {
|
|||
' <div class="jsoneditor-inline jsoneditor-jmespath-filter-value" >' +
|
||||
' <input placeholder="value..." id="filterValue" />' +
|
||||
' </div>' +
|
||||
' </div>' +
|
||||
' </div>' +
|
||||
' <div>' +
|
||||
' <div class="jsoneditor-jmespath-wizard-label">' + translate('transformWizardSortBy') + '</div>' +
|
||||
' <div class="jsoneditor-jmespath-filter">' +
|
||||
' </td>' +
|
||||
' </tr>' +
|
||||
' <tr>' +
|
||||
' <th>' + translate('transformWizardSortBy') + '</th>' +
|
||||
' <td class="jsoneditor-jmespath-filter">' +
|
||||
' <div class="jsoneditor-inline jsoneditor-jmespath-sort-field">' +
|
||||
' <select id="sortField">' +
|
||||
' </select>' +
|
||||
|
|
@ -62,19 +60,19 @@ function showTransformModal (node, container) {
|
|||
' <option value="desc">Descending</option>' +
|
||||
' </select>' +
|
||||
' </div>' +
|
||||
' </div>' +
|
||||
' </div>' +
|
||||
' <div id="selectFieldsPart">' +
|
||||
' <div class="jsoneditor-jmespath-wizard-label">' + translate('transformWizardSelectFields') + '</div>' +
|
||||
' <select class="jsoneditor-jmespath-select-fields" id="selectFields" multiple>' +
|
||||
' </select>' +
|
||||
' </div>' +
|
||||
' </div>' +
|
||||
' </td>' +
|
||||
'</tr>' +
|
||||
'<tr>' +
|
||||
' <th>' + translate('transformQueryLabel') + ' </th>' +
|
||||
' <td class="jsoneditor-modal-input">' +
|
||||
' </tr>' +
|
||||
' <tr>' +
|
||||
' <th>' + translate('transformWizardSelectFields') + '</th>' +
|
||||
' <td class="jsoneditor-jmespath-filter">' +
|
||||
' <select class="jsoneditor-jmespath-select-fields" id="selectFields" multiple></select>' +
|
||||
' </td>' +
|
||||
' </tr>' +
|
||||
' </tbody>' +
|
||||
' </table>' +
|
||||
'</div>' +
|
||||
'<div class="jsoneditor-jmespath-label">' + translate('transformQueryLabel') + ' </div>' +
|
||||
'<div class="jsoneditor-jmespath-block">' +
|
||||
' <textarea id="query" ' +
|
||||
' rows="4" ' +
|
||||
' autocomplete="off" ' +
|
||||
|
|
@ -82,23 +80,16 @@ function showTransformModal (node, container) {
|
|||
' autocapitalize="off" ' +
|
||||
' spellcheck="false"' +
|
||||
' title="' + translate('transformQueryTitle') + '">[*]</textarea>' +
|
||||
' </td>' +
|
||||
'</tr>' +
|
||||
'<tr>' +
|
||||
' <th>' + translate('transformPreviewLabel') + ' </th>' +
|
||||
' <td class="jsoneditor-modal-input">' +
|
||||
'</div>' +
|
||||
'<div class="jsoneditor-jmespath-label">' + translate('transformPreviewLabel') + ' </div>' +
|
||||
'<div class="jsoneditor-jmespath-block">' +
|
||||
' <textarea id="preview" ' +
|
||||
' class="jsoneditor-transform-preview"' +
|
||||
' readonly> </textarea>' +
|
||||
' </td>' +
|
||||
'</tr>' +
|
||||
'<tr>' +
|
||||
'<td colspan="2" class="jsoneditor-modal-input jsoneditor-modal-actions">' +
|
||||
'</div>' +
|
||||
'<div class="jsoneditor-jmespath-block jsoneditor-modal-actions">' +
|
||||
' <input type="submit" id="ok" value="' + translate('ok') + '" autofocus />' +
|
||||
'</td>' +
|
||||
'</tr>' +
|
||||
'</tbody>' +
|
||||
'</table>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
|
||||
picoModal({
|
||||
|
|
@ -123,11 +114,8 @@ function showTransformModal (node, container) {
|
|||
var preview = elem.querySelector('#preview');
|
||||
|
||||
if (!Array.isArray(value)) {
|
||||
wizard.style.display = 'none';
|
||||
wizard.parentNode.style.fontStyle = 'italic';
|
||||
wizard.parentNode.appendChild(
|
||||
document.createTextNode('(wizard not available for objects, only for arrays)')
|
||||
);
|
||||
wizard.style.fontStyle = 'italic';
|
||||
wizard.innerHTML = '(wizard not available for objects, only for arrays)'
|
||||
}
|
||||
|
||||
var paths = node.getChildPaths();
|
||||
|
|
@ -165,7 +153,7 @@ function showTransformModal (node, container) {
|
|||
var selectrFilterRelation = new Selectr(filterRelation, { defaultSelected: false, clearable: true, allowDeselect: true, placeholder: 'compare...' });
|
||||
var selectrSortField = new Selectr(sortField, { defaultSelected: false, clearable: true, allowDeselect: true, placeholder: 'field...' });
|
||||
var selectrSortOrder = new Selectr(sortOrder, { defaultSelected: false, clearable: true, allowDeselect: true, placeholder: 'order...' });
|
||||
var selectrSelectFields = new Selectr(selectFields, {multiple: true, clearable: true, defaultSelected: false});
|
||||
var selectrSelectFields = new Selectr(selectFields, {multiple: true, clearable: true, defaultSelected: false, placeholder: 'select fields...'});
|
||||
|
||||
selectrFilterField.on('selectr.change', generateQueryFromWizard);
|
||||
selectrFilterRelation.on('selectr.change', generateQueryFromWizard);
|
||||
|
|
|
|||
Loading…
Reference in New Issue