waveterm/xterm.js
0
0
Fork 0
mirror of https://github.com/wavetermdev/xterm.js.git synced 2026-08-05 13:43:48 -07:00
Code Issues Packages Projects Releases Wiki Activity

Improve display of options

Browse Source
This commit is contained in:
Daniel Imms
2018-06-03 15:37:01 +02:00
parent 908b06cfa7
commit adb0cf41ab
3 changed files with 25 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demo/index.html
+1
View File
@@ -30,6 +30,7 @@
<input type="number" id="padding" />
</div>
</div>
<hr/>
<p><strong>Attention:</strong> The demo is a barebones implementation and is designed for the development and evaluation of xterm.js only. Exposing the demo to the public as is would introduce security risks for the host.</p>
<script src="dist/bundle.js" defer ></script>
</body>
demo/main.js
+8 -4
View File
@@ -187,19 +187,23 @@ function initOptions(term) {
});
var html = '';
html += '<div class="option-group">';
booleanOptions.forEach(o => {
html += `<div><label><input id="opt-${o}" type="checkbox" ${term.getOption(o) ? 'checked' : ''}/> ${o}</label></div>`;
html += `<div class="option"><label><input id="opt-${o}" type="checkbox" ${term.getOption(o) ? 'checked' : ''}/> ${o}</label></div>`;
});
html += '</div><div class="option-group">';
numberOptions.forEach(o => {
html += `<div><label>${o} <input id="opt-${o}" type="number" value="${term.getOption(o)}"/></label></div>`;
html += `<div class="option"><label>${o} <input id="opt-${o}" type="number" value="${term.getOption(o)}"/></label></div>`;
});
html += '</div><div class="option-group">';
Object.keys(stringOptions).forEach(o => {
if (stringOptions[o]) {
html += `<div><label>${o} <select id="opt-${o}">${stringOptions[o].map(v => `<option ${term.getOption(o) === v ? 'selected' : ''}>${v}</option>`).join('')}</select></label></div>`;
html += `<div class="option"><label>${o} <select id="opt-${o}">${stringOptions[o].map(v => `<option ${term.getOption(o) === v ? 'selected' : ''}>${v}</option>`).join('')}</select></label></div>`;
} else {
html += `<div><label>${o} <input id="opt-${o}" type="text" value="${term.getOption(o)}"/></label></div>`
html += `<div class="option"><label>${o} <input id="opt-${o}" type="text" value="${term.getOption(o)}"/></label></div>`
}
});
html += '</div>';
var container = document.getElementById('options-container');
container.innerHTML = html;
demo/style.css
+16
View File
@@ -14,3 +14,19 @@ h1 {
margin: 0 auto;
padding: 2px;
}
p {
font-size: 0.9em;
font-style: italic
}
#option-container {
display: flex;
justify-content: center;
}
.option-group {
display: inline-block;
padding-left: 20px;
vertical-align: top;
}