eiac/xterm.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 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" /> <input type="number" id="padding" />
</div> </div>
</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> <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> <script src="dist/bundle.js" defer ></script>
</body> </body>
demo/main.js
+8 -4
View File
@@ -187,19 +187,23 @@ function initOptions(term) {
}); });
var html = ''; var html = '';
html += '<div class="option-group">';
booleanOptions.forEach(o => { 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 => { 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 => { Object.keys(stringOptions).forEach(o => {
if (stringOptions[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 { } 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'); var container = document.getElementById('options-container');
container.innerHTML = html; container.innerHTML = html;
demo/style.css
+16
View File
@@ -14,3 +14,19 @@ h1 {
margin: 0 auto; margin: 0 auto;
padding: 2px; 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;
}