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

Demo: Improve style, remove headers from windows

Browse Source
This commit is contained in:
Daniel Imms
2025-12-27 08:57:26 -08:00
parent 33daadb4ea
commit 01c1c477c3
11 changed files with 19 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demo/client/components/window/addonImageWindow.ts
+6 -20
View File
@@ -15,17 +15,6 @@ export class AddonImageWindow extends BaseWindow implements IControlWindow {
private _imageOptionsTextarea: HTMLTextAreaElement;
public build(container: HTMLElement): void {
const h4 = document.createElement('h4');
h4.textContent = 'Image Addon';
container.appendChild(h4);
const details = document.createElement('details');
const summary = document.createElement('summary');
summary.textContent = 'image addon settings';
details.appendChild(summary);
const wrapper = document.createElement('div');
// Storage limit
const storageLimitLabel = document.createElement('label');
storageLimitLabel.textContent = 'Storage Limit (in MB) ';
@@ -33,8 +22,8 @@ export class AddonImageWindow extends BaseWindow implements IControlWindow {
this._imageStorageLimitInput.type = 'number';
this._imageStorageLimitInput.id = 'image-storagelimit';
storageLimitLabel.appendChild(this._imageStorageLimitInput);
wrapper.appendChild(storageLimitLabel);
wrapper.appendChild(document.createElement('br'));
container.appendChild(storageLimitLabel);
container.appendChild(document.createElement('br'));
// Show placeholder
const placeholderLabel = document.createElement('label');
@@ -43,9 +32,9 @@ export class AddonImageWindow extends BaseWindow implements IControlWindow {
this._imageShowPlaceholderCheckbox.type = 'checkbox';
this._imageShowPlaceholderCheckbox.id = 'image-showplaceholder';
placeholderLabel.appendChild(this._imageShowPlaceholderCheckbox);
wrapper.appendChild(placeholderLabel);
wrapper.appendChild(document.createElement('br'));
wrapper.appendChild(document.createElement('br'));
container.appendChild(placeholderLabel);
container.appendChild(document.createElement('br'));
container.appendChild(document.createElement('br'));
// Ctor options
const optionsLabel = document.createElement('label');
@@ -56,10 +45,7 @@ export class AddonImageWindow extends BaseWindow implements IControlWindow {
this._imageOptionsTextarea.cols = 40;
this._imageOptionsTextarea.rows = 12;
optionsLabel.appendChild(this._imageOptionsTextarea);
wrapper.appendChild(optionsLabel);
details.appendChild(wrapper);
container.appendChild(details);
container.appendChild(optionsLabel);
}
public get imageStorageLimitInput(): HTMLInputElement {
demo/client/components/window/addonSearchWindow.ts
-4
View File
@@ -19,10 +19,6 @@ export class AddonSearchWindow extends BaseWindow implements IControlWindow {
private _highlightAllMatchesCheckbox: HTMLInputElement;
public build(container: HTMLElement): void {
const h4 = document.createElement('h4');
h4.textContent = 'SearchAddon';
container.appendChild(h4);
const wrapper = document.createElement('div');
wrapper.style.display = 'flex';
wrapper.style.flexDirection = 'column';
demo/client/components/window/addonSerializeWindow.ts
-4
View File
@@ -18,10 +18,6 @@ export class AddonSerializeWindow extends BaseWindow implements IControlWindow {
private _writeToTerminalCheckbox: HTMLInputElement;
public build(container: HTMLElement): void {
const h4 = document.createElement('h4');
h4.textContent = 'SerializeAddon';
container.appendChild(h4);
const wrapper = document.createElement('div');
// Serialize button
demo/client/components/window/addonsWindow.ts
-5
View File
@@ -13,11 +13,6 @@ export class AddonsWindow extends BaseWindow implements IControlWindow {
private _addonsContainer: HTMLElement;
public build(container: HTMLElement): void {
// Heading
const heading = document.createElement('h3');
heading.textContent = 'Addons';
container.appendChild(heading);
// Description
const description = document.createElement('p');
description.textContent = 'Addons can be loaded and unloaded on a particular terminal to extend its functionality.';
demo/client/components/window/gpuWindow.ts
-4
View File
@@ -13,10 +13,6 @@ export class GpuWindow extends BaseWindow implements IControlWindow {
private _textureAtlasContainer: HTMLElement;
public build(container: HTMLElement): void {
const heading = document.createElement('h3');
heading.textContent = 'WebGL';
container.appendChild(heading);
const zoomCheckbox = document.createElement('input');
zoomCheckbox.type = 'checkbox';
zoomCheckbox.id = 'texture-atlas-zoom';
demo/client/components/window/optionsWindow.ts
-4
View File
@@ -53,10 +53,6 @@ export class OptionsWindow extends BaseWindow implements IControlWindow {
public build(container: HTMLElement): void {
this._container = container;
const heading = document.createElement('h3');
heading.textContent = 'Options';
container.appendChild(heading);
const description = document.createElement('p');
description.innerHTML = 'These options can be set in the <code>Terminal</code> constructor or by using the <code>Terminal.options</code> property.';
container.appendChild(description);
demo/client/components/window/styleWindow.ts
-4
View File
@@ -13,10 +13,6 @@ export class StyleWindow extends BaseWindow implements IControlWindow {
private _paddingElement: HTMLInputElement;
public build(container: HTMLElement): void {
const heading = document.createElement('h3');
heading.textContent = 'Style';
container.appendChild(heading);
const wrapper = document.createElement('div');
wrapper.style.display = 'inline-block';
wrapper.style.marginRight = '16px';
demo/client/components/window/testWindow.ts
-4
View File
@@ -29,10 +29,6 @@ export class TestWindow extends BaseWindow implements IControlWindow {
}
public build(container: HTMLElement): void {
const heading = document.createElement('h3');
heading.textContent = 'Test';
container.appendChild(heading);
const wrapper = document.createElement('div');
wrapper.style.display = 'inline-block';
wrapper.style.marginRight = '16px';
demo/client/components/window/vtWindow.ts
-4
View File
@@ -17,10 +17,6 @@ export class VtWindow extends BaseWindow implements IControlWindow {
public build(container: HTMLElement): void {
this._container = container;
const heading = document.createElement('h3');
heading.textContent = 'VT';
container.appendChild(heading);
const vtContainer = document.createElement('div');
vtContainer.id = 'vt-container';
container.appendChild(vtContainer);
demo/client/components/window/webglWindow.ts
-4
View File
@@ -13,10 +13,6 @@ export class WebglWindow extends BaseWindow implements IControlWindow {
private _textureAtlasContainer: HTMLElement;
public build(container: HTMLElement): void {
const heading = document.createElement('h3');
heading.textContent = 'WebGL';
container.appendChild(heading);
const zoomCheckbox = document.createElement('input');
zoomCheckbox.type = 'checkbox';
zoomCheckbox.id = 'texture-atlas-zoom';
demo/index.css
+13 -7
View File
@@ -14,8 +14,7 @@ body {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
border-bottom: 1px solid #0005;
padding: 0 15px;
}
.banner-title {
color: #5DA5D5;
@@ -50,6 +49,11 @@ body {
p {
font-size: 0.9em;
font-style: italic
}
dl:first-child,
p:first-child {
margin-top: 0;
}
#option-container {
@@ -94,12 +98,15 @@ div:first-of-type.grid {
#sidebar {
position: fixed;
top: 24px;
right: 0;
right: 15px; /* Room for scrollbar */
width: 400px;
max-width: calc(100vw - 30px); /* Don't exceed screen width minus scrollbar */
height: 500px;
background: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
background: #161716;
color: #fff;
border: 1px solid #333;
border-top: none;
box-shadow: 0 2px 10px rgba(0,0,0,0.4);
z-index: 1000;
overflow: auto;
flex: none;
@@ -155,7 +162,6 @@ div:first-of-type.grid {
.tabContent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}