Skip to content

webxr client: add clear button to Server IP field #685

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jiwenc-nv wants to merge 1 commit into
base: main
Choose a base branch
from
Open

webxr client: add clear button to Server IP field #685

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions deps/cloudxr/webxr_client/src/CloudXR2DUI.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,8 @@ export class CloudXR2DUI {
private startButton!: HTMLButtonElement;
/** Input field for the CloudXR server IP address */
private serverIpInput!: HTMLInputElement;
/** Button to clear the prefilled server IP (re-enables the browser autocomplete dropdown) */
private serverIpClearButton!: HTMLButtonElement;
/** Input field for the CloudXR server port number */
private portInput!: HTMLInputElement;
/** Input field for proxy URL configuration */
Expand Down Expand Up @@ -359,6 +361,7 @@ export class CloudXR2DUI {
private initializeElements(): void {
this.startButton = this.getElement<HTMLButtonElement>('startButton');
this.serverIpInput = this.getElement<HTMLInputElement>('serverIpInput');
this.serverIpClearButton = this.getElement<HTMLButtonElement>('serverIpClearButton');
this.portInput = this.getElement<HTMLInputElement>('portInput');
this.proxyUrlInput = this.getElement<HTMLInputElement>('proxyUrl');
this.immersiveSelect = this.getElement<HTMLSelectElement>('immersive');
Expand Down Expand Up @@ -545,6 +548,23 @@ export class CloudXR2DUI {
addListener(this.serverTypeSelect, 'change', updateConfig);
addListener(this.serverIpInput, 'input', updateConfig);
addListener(this.serverIpInput, 'change', updateConfig);

// Show the clear ("x") button only while the server IP field has a value,
// and clear the prefill (incl. localStorage) on click so the browser's
// autocomplete dropdown of previously connected servers can show again.
const updateServerIpClearButton = () => {
this.serverIpClearButton.classList.toggle('visible', this.serverIpInput.value.length > 0);
};
addListener(this.serverIpInput, 'input', updateServerIpClearButton);
addListener(this.serverIpClearButton, 'click', () => {
this.serverIpInput.value = '';
// 'input' updates the live config + clear-button state; 'change' persists
// the now-empty value via the enableLocalStorage handler.
this.serverIpInput.dispatchEvent(new Event('input', { bubbles: true }));
this.serverIpInput.dispatchEvent(new Event('change', { bubbles: true }));
this.serverIpInput.focus();
});
updateServerIpClearButton();
addListener(this.portInput, 'input', updateConfig);
addListener(this.portInput, 'change', updateConfig);
const updateResValidation = () => this.updateResolutionValidationMessage();
Expand Down
57 changes: 55 additions & 2 deletions deps/cloudxr/webxr_client/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,55 @@
color: #999;
}

/* Server IP field paired with an inline clear ("x") button */
.input-with-clear {
position: relative;
}

.input-with-clear .ui-input {
/* leave room so the IP text never sits under the clear button */
padding-right: 44px;
}

.input-clear-btn {
position: absolute;
/* center on the 48px-tall input, ignoring its 16px margin-bottom */
top: 24px;
right: 8px;
transform: translateY(-50%);
display: none;
align-items: center;
justify-content: center;
/* equal width/height + override the global button min-height so the
hover highlight is a circle, not a tall pill */
width: 28px;
height: 28px;
min-height: 0;
padding: 0;
border: none;
border-radius: 50%;
background: transparent;
color: #999;
font-size: 1.25rem;
line-height: 1;
cursor: pointer;
}

/* Shown only while the field has a value (toggled in CloudXR2DUI) */
.input-clear-btn.visible {
display: flex;
}

.input-clear-btn:hover {
background: rgba(0, 0, 0, 0.08);
color: var(--text-main);
}

.input-clear-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(118, 185, 0, 0.2);
}

.settings-table {
width: 100%;
margin-bottom: 24px;
Expand Down Expand Up @@ -609,8 +658,12 @@ <h2 class="settings-title">Settings</h2>

<div id="manualFields">
<label for="serverIpInput" class="input-label">Server IP</label>
<input id="serverIpInput" class="ui-input" type="text" placeholder="Server IP (default: page URL hostname)"
spellcheck="false" autocapitalize="off">
<div class="input-with-clear">
<input id="serverIpInput" class="ui-input" type="text" placeholder="Server IP (default: page URL hostname)"
spellcheck="false" autocapitalize="off">
<button id="serverIpClearButton" type="button" class="input-clear-btn"
aria-label="Clear server IP" title="Clear server IP">&times;</button>
</div>
<label for="portInput" class="input-label">Port</label>
<input id="portInput" class="ui-input" type="number" placeholder="Port (default: 49100)"
spellcheck="false" min="1" max="65535">
Expand Down
Loading