Neat styling of modal popup contents
This commit is contained in:
parent
2e207196df
commit
bd87ac83d5
|
@ -286,6 +286,7 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {
|
|||
vertical-align: middle;
|
||||
font-size: 10pt;
|
||||
font-family: arial, sans-serif;
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.jsoneditor-modal table td:first-child {
|
||||
|
@ -303,4 +304,31 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {
|
|||
.jsoneditor-modal .pico-close {
|
||||
background: none !important;
|
||||
font-size: 24px !important;
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.jsoneditor-modal select,
|
||||
.jsoneditor-modal input {
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #d3d3d3;
|
||||
color: #4d4d4d;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.jsoneditor-modal select {
|
||||
padding: 6px 28px 6px 10px;
|
||||
|
||||
/* https://stackoverflow.com/questions/20366166/bootstrap-3-styled-select-dropdown-looks-ugly-in-firefox-on-os-x */
|
||||
background: #f5f5f5 url("data:image/svg+xml,\
|
||||
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='14px'\
|
||||
height='14px' viewBox='0 0 1200 1000' fill='rgb(77,77,77)'>\
|
||||
<path d='M1100 411l-198 -199l-353 353l-353 -353l-197 199l551 551z'/>\
|
||||
</svg>") no-repeat calc(100% - 5px) 50%;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.jsoneditor-modal input {
|
||||
padding: 6px 20px;
|
||||
}
|
|
@ -3735,13 +3735,13 @@ Node.prototype._showSortModal = function () {
|
|||
picoModal({
|
||||
parent: this.editor.frame,
|
||||
content: '<div class="pico-modal-contents">' +
|
||||
'<form onsubmit="alert(1)">' +
|
||||
'<form>' +
|
||||
'<table>' +
|
||||
'<tbody>' +
|
||||
'<tr>' +
|
||||
' <td>Sort by:</td>' +
|
||||
' <td class="jsoneditor-modal-input">' +
|
||||
' <select id="sortBy">' +
|
||||
' <select id="sortBy" title="A nested field on which to sort the array or object">' +
|
||||
' </select>' +
|
||||
' </td>' +
|
||||
'</tr>' +
|
||||
|
@ -3756,7 +3756,7 @@ Node.prototype._showSortModal = function () {
|
|||
'</tr>' +
|
||||
'<tr>' +
|
||||
'<td colspan="2" class="jsoneditor-modal-input">' +
|
||||
' <button type="submit" id="ok">Sort</button>' +
|
||||
' <input type="submit" id="ok" value="Sort" />' +
|
||||
'</td>' +
|
||||
'</tr>' +
|
||||
'</tbody>' +
|
||||
|
@ -3769,7 +3769,7 @@ Node.prototype._showSortModal = function () {
|
|||
.afterCreate(function (modal) {
|
||||
var sortBy = modal.modalElem().querySelector('#sortBy');
|
||||
var direction = modal.modalElem().querySelector('#direction');
|
||||
var ok = modal.modalElem().querySelector('#ok');
|
||||
var form = modal.modalElem().querySelector('form');
|
||||
|
||||
node.getSortablePaths().sort().forEach(function (path) {
|
||||
var option = document.createElement('option');
|
||||
|
@ -3778,7 +3778,9 @@ Node.prototype._showSortModal = function () {
|
|||
sortBy.appendChild(option);
|
||||
});
|
||||
|
||||
ok.onclick = function () {
|
||||
form.onsubmit = function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
modal.close();
|
||||
|
||||
var path = sortBy.value;
|
||||
|
|
Loading…
Reference in New Issue