Merge pull request #3439 from simran916/ui-reformed
Issue #3425 (Terminal controls shifted to the right of the demo)
This commit is contained in:
Daniel Imms
+84
-36
@@ -15,42 +15,90 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1 style="color: #2D2E2C">xterm.js: A terminal for the <em style="color: #5DA5D5">web</em></h1>
|
<h1 style="color: #2D2E2C">xterm.js: A terminal for the <em style="color: #5DA5D5">web</em></h1>
|
||||||
<div id="terminal-container"></div>
|
<div id="container">
|
||||||
<div>
|
<div id="grid">
|
||||||
<h3>Options</h3>
|
<div id="terminal-container"></div>
|
||||||
<p>These options can be set in the <code>Terminal</code> constructor or by using the <code>Terminal.setOption</code> function.</p>
|
</div>
|
||||||
<div id="options-container"></div>
|
<div id="grid">
|
||||||
</div>
|
<div class="tab">
|
||||||
<div>
|
<button id= "optionsbutton" class="tabLinks" onclick="openSection(event, 'options')">Options</button>
|
||||||
<h3>Addons</h3>
|
<button id= "addonsbutton" class="tabLinks" onclick="openSection(event, 'addons')">Add Ons</button>
|
||||||
<p>Addons can be loaded and unloaded on a particular terminal to extend its functionality.</p>
|
<button id= "stylebutton" class="tabLinks" onclick="openSection(event, 'style')">Style</button>
|
||||||
<div id="addons-container"></div>
|
<button id= "testbutton" class="tabLinks" onclick="openSection(event, 'test')">Test</button>
|
||||||
<h3>Addons Control</h3>
|
</div>
|
||||||
<h4>SearchAddon</h4>
|
<div id="options" class="tabContent">
|
||||||
<p>
|
<h3>Options</h3>
|
||||||
<label>Find next <input id="find-next"/></label>
|
<p>These options can be set in the <code>Terminal</code> constructor or by using the <code>Terminal.setOption</code> function.</p>
|
||||||
<label>Find previous <input id="find-previous"/></label>
|
<div id="options-container"></div>
|
||||||
<label>Use regex<input type="checkbox" id="regex"/></label>
|
</div>
|
||||||
<label>Case sensitive<input type="checkbox" id="case-sensitive"/></label>
|
<div id="addons" class="tabContent">
|
||||||
<label>Whole word<input type="checkbox" id="whole-word"/></label>
|
<h3>Addons</h3>
|
||||||
</p>
|
<p>Addons can be loaded and unloaded on a particular terminal to extend its functionality.</p>
|
||||||
<h4>SerializeAddon</h4>
|
<div id="addons-container"></div>
|
||||||
<p>
|
<h3>Addons Control</h3>
|
||||||
<button id="serialize">Serialize the content of terminal</button>
|
<h4>SearchAddon</h4>
|
||||||
<label><input type="checkbox" id="write-to-terminal">Write back to terminal</label>
|
<div style= "display:flex; flex-direction:column;">
|
||||||
<div><pre id="serialize-output"></pre></div>
|
<label>Find next <input id="find-next"/></label>
|
||||||
</p>
|
<label>Find previous <input id="find-previous"/></label>
|
||||||
</div>
|
<label><input type="checkbox" id="regex"/>Use regex</label>
|
||||||
<div>
|
<label><input type="checkbox" id="case-sensitive"/>Case sensitive</label>
|
||||||
<h3>Style</h3>
|
<label><input type="checkbox" id="whole-word"/>Whole word</label>
|
||||||
<div style="display: inline-block; margin-right: 16px;">
|
</div>
|
||||||
<label for="padding">Padding</label>
|
<h4>SerializeAddon</h4>
|
||||||
<input type="number" id="padding" />
|
<div>
|
||||||
|
<button id="serialize">Serialize the content of terminal</button>
|
||||||
|
<label><input type="checkbox" id="write-to-terminal">Write back to terminal</label>
|
||||||
|
<div><pre id="serialize-output"></pre></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="style" class="tabContent">
|
||||||
|
<h3>Style</h3>
|
||||||
|
<div style="display: inline-block; margin-right: 16px;">
|
||||||
|
<label for="padding">Padding</label>
|
||||||
|
<input type="number" id="padding" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="test" class="tabContent">
|
||||||
|
<h3>Test</h3>
|
||||||
|
<div style="display: inline-block; margin-right: 16px;">
|
||||||
|
<button id="dispose" title="This is used to testing memory leaks">Dispose terminal</button>
|
||||||
|
<button id="custom-glyph" title="Write custom box drawing and block element characters to the terminal">Test custom glyphs</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr/>
|
<script src="dist/client-bundle.js" defer ></script>
|
||||||
<button id="dispose" title="This is used to testing memory leaks">Dispose terminal</button>
|
<script>
|
||||||
<button id="custom-glyph" title="Write custom box drawing and block element characters to the terminal">Test custom glyphs</button>
|
var tab = localStorage.getItem("tab");
|
||||||
<script src="dist/client-bundle.js" defer ></script>
|
|
||||||
</body>
|
if(tab === null){
|
||||||
|
document.getElementById("options").style.display = "block";
|
||||||
|
document.getElementById("optionsbutton").classList.add("active");
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
const tabContent = document.getElementsByClassName("tabContent");
|
||||||
|
let itr;
|
||||||
|
for (itr = 0; itr < tabContent.length; itr+=1) {
|
||||||
|
tabContent[itr].style.display = "none";
|
||||||
|
}
|
||||||
|
document.getElementById(""+tab+"").style.display = "block";
|
||||||
|
document.getElementById(""+tab+"button").classList.add("active");
|
||||||
|
}
|
||||||
|
function openSection(event, section) {
|
||||||
|
const tabContent = document.getElementsByClassName("tabContent");
|
||||||
|
let itr;
|
||||||
|
for (itr = 0; itr < tabContent.length; itr+=1) {
|
||||||
|
tabContent[itr].style.display = "none";
|
||||||
|
}
|
||||||
|
const tabLinks = document.getElementsByClassName("tabLinks");
|
||||||
|
for (itr = 0; itr < tabLinks.length; itr+=1) {
|
||||||
|
tabLinks[itr].className = tabLinks[itr].className.replace(" active", "");
|
||||||
|
}
|
||||||
|
document.getElementById(section).style.display = "block";
|
||||||
|
localStorage.setItem("tab", section);
|
||||||
|
event.currentTarget.className += " active";
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -41,3 +41,52 @@ pre {
|
|||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#container {
|
||||||
|
display: flex;
|
||||||
|
height: 75vh;
|
||||||
|
}
|
||||||
|
#grid {
|
||||||
|
flex: 1;
|
||||||
|
/* max-height: 80vh;
|
||||||
|
overflow-y: auto; */
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.tab {
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the buttons inside the tab */
|
||||||
|
.tab button {
|
||||||
|
background-color: inherit;
|
||||||
|
float: left;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 14px 16px;
|
||||||
|
transition: 0.3s;
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Change background color of buttons on hover */
|
||||||
|
.tab button:hover {
|
||||||
|
background-color: #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Create an active/current tablink class */
|
||||||
|
.tab button.active {
|
||||||
|
background-color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the tab content */
|
||||||
|
.tabContent {
|
||||||
|
display: none;
|
||||||
|
padding: 6px 12px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-top: none;
|
||||||
|
max-height: 100vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user