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

Styling improvements in the transform modal

This commit is contained in:
jos 2019-03-31 17:17:47 +02:00
parent 9e3b6fb196
commit 4818c4bb27
3 changed files with 102 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
HISTORY.md
View File

@ -6,6 +6,7 @@ https://github.com/josdejong/jsoneditor
## not yet released, version 5.32.2 ## not yet released, version 5.32.2
- Fixed #416: Clipped action menu for append nodes. - Fixed #416: Clipped action menu for append nodes.
- Styling improvements in the transform modal.
## 2018-03-28, version 5.32.1 ## 2018-03-28, version 5.32.1

37
src/css/contextmenu.css
View File

@ -262,13 +262,16 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {
.jsoneditor-modal table th, .jsoneditor-modal table th,
.jsoneditor-modal table td { .jsoneditor-modal table td {
padding: 5px 20px 5px 0;
text-align: left; text-align: left;
vertical-align: top; vertical-align: top;
font-weight: normal; font-weight: normal;
color: #4d4d4d; color: #4d4d4d;
line-height: 32px; border-spacing: 0;
border-collapse: collapse;
}
.jsoneditor-modal table td {
padding: 5px 0;
} }
.jsoneditor-modal p:first-child { .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 table td:first-child {
} }
.jsoneditor-modal .jsoneditor-jmespath-block {
margin-bottom: 10px;
}
.jsoneditor-modal table td.jsoneditor-modal-input { .jsoneditor-modal table td.jsoneditor-modal-input {
text-align: right; text-align: right;
padding-right: 0; padding-right: 0;
@ -323,6 +330,10 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {
font-family: arial, sans-serif; font-family: arial, sans-serif;
} }
.jsoneditor-modal table th {
vertical-align: middle;
}
.jsoneditor-modal #query, .jsoneditor-modal #query,
.jsoneditor-modal .jsoneditor-transform-preview { .jsoneditor-modal .jsoneditor-transform-preview {
font-family: "dejavu sans mono", "droid sans mono", consolas, monaco, "lucida console", "courier new", courier, monospace, sans-serif; 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 { .jsoneditor-modal .jsoneditor-jmespath-wizard {
line-height: 1.2em; line-height: 1.2em;
width: 100%; width: 100%;
background: #ffffe0; padding: 0;
border: 1px solid #ffe99a;
padding: 0 10px 10px;
border-radius: 3px; 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 { .jsoneditor-modal .jsoneditor-jmespath-wizard-label {
font-style: italic; font-style: italic;
margin: 4px 0 2px 0; margin: 4px 0 2px 0;
@ -448,7 +468,10 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 100%; width: 100%;
padding: 2px; }
.jsoneditor-modal .jsoneditor-inline:not(:last-child) {
padding-right: 2px;
} }
.jsoneditor-modal .jsoneditor-jmespath-filter { .jsoneditor-modal .jsoneditor-jmespath-filter {

154
src/js/showTransformModal.js
View File

@ -21,84 +21,75 @@ 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/>' + '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>.' + 'To learn JMESPath, go to <a href="http://jmespath.org/tutorial.html" target="_blank">the interactive tutorial</a>.' +
'</p>' + '</p>' +
'<table>' + '<div class="jsoneditor-jmespath-label">' + translate('transformWizardLabel') + ' </div>' +
'<tbody>' + '<div id="wizard" class="jsoneditor-jmespath-block jsoneditor-jmespath-wizard">' +
'<tr>' + ' <table class="jsoneditor-jmespath-wizard-table">' +
' <th>' + translate('transformWizardLabel') + ' </th>' + ' <tbody>' +
' <td>' + ' <tr>' +
' <div id="wizard" class="jsoneditor-jmespath-wizard">' + ' <th>' + translate('transformWizardFilter') + '</th>' +
' <div>' + ' <td class="jsoneditor-jmespath-filter">' +
' <div class="jsoneditor-jmespath-wizard-label">' + translate('transformWizardFilter') + '</div>' + ' <div class="jsoneditor-inline jsoneditor-jmespath-filter-field" >' +
' <div class="jsoneditor-jmespath-filter">' + ' <select id="filterField">' +
' <div class="jsoneditor-inline jsoneditor-jmespath-filter-field" >' + ' </select>' +
' <select id="filterField">' + ' </div>' +
' </select>' + ' <div class="jsoneditor-inline jsoneditor-jmespath-filter-relation" >' +
' </div>' + ' <select id="filterRelation">' +
' <div class="jsoneditor-inline jsoneditor-jmespath-filter-relation" >' + ' <option value="==">==</option>' +
' <select id="filterRelation">' + ' <option value="!=">!=</option>' +
' <option value="==">==</option>' + ' <option value="<">&lt;</option>' +
' <option value="!=">!=</option>' + ' <option value="<=">&lt;=</option>' +
' <option value="<">&lt;</option>' + ' <option value=">">&gt;</option>' +
' <option value="<=">&lt;=</option>' + ' <option value=">=">&gt;=</option>' +
' <option value=">">&gt;</option>' + ' </select>' +
' <option value=">=">&gt;=</option>' + ' </div>' +
' </select>' + ' <div class="jsoneditor-inline jsoneditor-jmespath-filter-value" >' +
' </div>' + ' <input placeholder="value..." id="filterValue" />' +
' <div class="jsoneditor-inline jsoneditor-jmespath-filter-value" >' + ' </div>' +
' <input placeholder="value..." id="filterValue" />' + ' </td>' +
' </div>' + ' </tr>' +
' </div>' + ' <tr>' +
' </div>' + ' <th>' + translate('transformWizardSortBy') + '</th>' +
' <div>' + ' <td class="jsoneditor-jmespath-filter">' +
' <div class="jsoneditor-jmespath-wizard-label">' + translate('transformWizardSortBy') + '</div>' + ' <div class="jsoneditor-inline jsoneditor-jmespath-sort-field">' +
' <div class="jsoneditor-jmespath-filter">' + ' <select id="sortField">' +
' <div class="jsoneditor-inline jsoneditor-jmespath-sort-field">' + ' </select>' +
' <select id="sortField">' + ' </div>' +
' </select>' + ' <div class="jsoneditor-inline jsoneditor-jmespath-sort-order" >' +
' </div>' + ' <select id="sortOrder">' +
' <div class="jsoneditor-inline jsoneditor-jmespath-sort-order" >' + ' <option value="asc">Ascending</option>' +
' <select id="sortOrder">' + ' <option value="desc">Descending</option>' +
' <option value="asc">Ascending</option>' + ' </select>' +
' <option value="desc">Descending</option>' + ' </div>' +
' </select>' + ' </td>' +
' </div>' + ' </tr>' +
' </div>' + ' <tr>' +
' </div>' + ' <th>' + translate('transformWizardSelectFields') + '</th>' +
' <div id="selectFieldsPart">' + ' <td class="jsoneditor-jmespath-filter">' +
' <div class="jsoneditor-jmespath-wizard-label">' + translate('transformWizardSelectFields') + '</div>' + ' <select class="jsoneditor-jmespath-select-fields" id="selectFields" multiple></select>' +
' <select class="jsoneditor-jmespath-select-fields" id="selectFields" multiple>' + ' </td>' +
' </select>' + ' </tr>' +
' </div>' + ' </tbody>' +
' </div>' + ' </table>' +
' </td>' + '</div>' +
'</tr>' + '<div class="jsoneditor-jmespath-label">' + translate('transformQueryLabel') + ' </div>' +
'<tr>' + '<div class="jsoneditor-jmespath-block">' +
' <th>' + translate('transformQueryLabel') + ' </th>' + ' <textarea id="query" ' +
' <td class="jsoneditor-modal-input">' + ' rows="4" ' +
' <textarea id="query" ' + ' autocomplete="off" ' +
' rows="4" ' + ' autocorrect="off" ' +
' autocomplete="off" ' + ' autocapitalize="off" ' +
' autocorrect="off" ' + ' spellcheck="false"' +
' autocapitalize="off" ' + ' title="' + translate('transformQueryTitle') + '">[*]</textarea>' +
' spellcheck="false"' + '</div>' +
' title="' + translate('transformQueryTitle') + '">[*]</textarea>' + '<div class="jsoneditor-jmespath-label">' + translate('transformPreviewLabel') + ' </div>' +
' </td>' + '<div class="jsoneditor-jmespath-block">' +
'</tr>' + ' <textarea id="preview" ' +
'<tr>' + ' class="jsoneditor-transform-preview"' +
' <th>' + translate('transformPreviewLabel') + ' </th>' + ' readonly> </textarea>' +
' <td class="jsoneditor-modal-input">' + '</div>' +
' <textarea id="preview" ' + '<div class="jsoneditor-jmespath-block jsoneditor-modal-actions">' +
' class="jsoneditor-transform-preview"' +
' readonly> </textarea>' +
' </td>' +
'</tr>' +
'<tr>' +
'<td colspan="2" class="jsoneditor-modal-input jsoneditor-modal-actions">' +
' <input type="submit" id="ok" value="' + translate('ok') + '" autofocus />' + ' <input type="submit" id="ok" value="' + translate('ok') + '" autofocus />' +
'</td>' + '</div>' +
'</tr>' +
'</tbody>' +
'</table>' +
'</div>'; '</div>';
picoModal({ picoModal({
@ -123,11 +114,8 @@ function showTransformModal (node, container) {
var preview = elem.querySelector('#preview'); var preview = elem.querySelector('#preview');
if (!Array.isArray(value)) { if (!Array.isArray(value)) {
wizard.style.display = 'none'; wizard.style.fontStyle = 'italic';
wizard.parentNode.style.fontStyle = 'italic'; wizard.innerHTML = '(wizard not available for objects, only for arrays)'
wizard.parentNode.appendChild(
document.createTextNode('(wizard not available for objects, only for arrays)')
);
} }
var paths = node.getChildPaths(); 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 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 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 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); selectrFilterField.on('selectr.change', generateQueryFromWizard);
selectrFilterRelation.on('selectr.change', generateQueryFromWizard); selectrFilterRelation.on('selectr.change', generateQueryFromWizard);