Add style popover with column layout and display controls
This commit is contained in:
parent
66b4989226
commit
057966469d
GPG key ID:
22B5C6D66A38B06C
1 changed files with 198 additions and 3 deletions
|
|
@ -584,6 +584,86 @@
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.settings-btn {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: #888;
|
||||||
|
font-size: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-width: 44px;
|
||||||
|
min-height: 44px;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background 0.2s, color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-btn:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
color: #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-group {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-group:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-group label {
|
||||||
|
display: block;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #888;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-btn {
|
||||||
|
padding: 8px 16px;
|
||||||
|
border: 1px solid #3a3a3a;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: #1a1a1a;
|
||||||
|
color: #e0e0e0;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
min-width: 44px;
|
||||||
|
min-height: 44px;
|
||||||
|
transition: background 0.2s, border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-btn:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-btn:active {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-btn.active {
|
||||||
|
background: #ff9800;
|
||||||
|
border-color: #ff9800;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-display {
|
||||||
|
padding: 8px 16px;
|
||||||
|
color: #e0e0e0;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
body {
|
body {
|
||||||
background: #f5f5f5;
|
background: #f5f5f5;
|
||||||
|
|
@ -661,9 +741,12 @@
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1>claude-remote</h1>
|
<h1>claude-remote</h1>
|
||||||
<div class="status" id="status">
|
<div style="display: flex; align-items: center; gap: 16px;">
|
||||||
<span class="status-dot"></span>
|
<button class="settings-btn" onclick="openStyleModal()" title="Display Settings">⚙️</button>
|
||||||
<span class="status-text">connecting</span>
|
<div class="status" id="status">
|
||||||
|
<span class="status-dot"></span>
|
||||||
|
<span class="status-text">connecting</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
@ -703,6 +786,48 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-overlay" id="styleModal" onclick="handleStyleModalOverlayClick(event)">
|
||||||
|
<div class="modal" onclick="event.stopPropagation()" style="max-width: 320px;">
|
||||||
|
<div class="modal-header">Display Settings</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="setting-group">
|
||||||
|
<label>Columns</label>
|
||||||
|
<div class="setting-buttons">
|
||||||
|
<button onclick="setSetting('columns', 1)" class="setting-btn" data-setting="columns" data-value="1">1</button>
|
||||||
|
<button onclick="setSetting('columns', 2)" class="setting-btn" data-setting="columns" data-value="2">2</button>
|
||||||
|
<button onclick="setSetting('columns', 3)" class="setting-btn" data-setting="columns" data-value="3">3</button>
|
||||||
|
<button onclick="setSetting('columns', 'fit')" class="setting-btn" data-setting="columns" data-value="fit">Fit</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="setting-group">
|
||||||
|
<label>Text Size</label>
|
||||||
|
<div class="setting-buttons">
|
||||||
|
<button onclick="adjustSetting('fontSize', -1)" class="setting-btn">−</button>
|
||||||
|
<span class="setting-display" id="font-size-display">12px</span>
|
||||||
|
<button onclick="adjustSetting('fontSize', 1)" class="setting-btn">+</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="setting-group">
|
||||||
|
<label>Terminal Height</label>
|
||||||
|
<div class="setting-buttons">
|
||||||
|
<button onclick="adjustSetting('terminalHeight', -50)" class="setting-btn">−</button>
|
||||||
|
<span class="setting-display" id="terminal-height-display">400px</span>
|
||||||
|
<button onclick="adjustSetting('terminalHeight', 50)" class="setting-btn">+</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="setting-group">
|
||||||
|
<label>Text Wrap</label>
|
||||||
|
<div class="setting-buttons">
|
||||||
|
<button onclick="toggleSetting('wrapText')" class="setting-btn" id="wrap-toggle">On</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const state = {
|
const state = {
|
||||||
sessions: new Map(),
|
sessions: new Map(),
|
||||||
|
|
@ -726,6 +851,7 @@
|
||||||
const $instructionsModal = document.getElementById('instructionsModal');
|
const $instructionsModal = document.getElementById('instructionsModal');
|
||||||
const $instructionsTextarea = document.getElementById('instructionsTextarea');
|
const $instructionsTextarea = document.getElementById('instructionsTextarea');
|
||||||
const $instructionsError = document.getElementById('instructionsError');
|
const $instructionsError = document.getElementById('instructionsError');
|
||||||
|
const $styleModal = document.getElementById('styleModal');
|
||||||
|
|
||||||
function setStatus(connected) {
|
function setStatus(connected) {
|
||||||
if (connected) {
|
if (connected) {
|
||||||
|
|
@ -1528,6 +1654,75 @@
|
||||||
root.style.setProperty('--wrap-mode', state.settings.wrapText ? 'pre-wrap' : 'pre');
|
root.style.setProperty('--wrap-mode', state.settings.wrapText ? 'pre-wrap' : 'pre');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function updateSettingsUI() {
|
||||||
|
// Update column buttons
|
||||||
|
document.querySelectorAll('.setting-btn[data-setting="columns"]').forEach(btn => {
|
||||||
|
const value = btn.dataset.value === 'fit' ? 'fit' : Number(btn.dataset.value);
|
||||||
|
if (value === state.settings.columns) {
|
||||||
|
btn.classList.add('active');
|
||||||
|
} else {
|
||||||
|
btn.classList.remove('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update font size display
|
||||||
|
document.getElementById('font-size-display').textContent = `${state.settings.fontSize}px`;
|
||||||
|
|
||||||
|
// Update terminal height display
|
||||||
|
document.getElementById('terminal-height-display').textContent = `${state.settings.terminalHeight}px`;
|
||||||
|
|
||||||
|
// Update wrap toggle
|
||||||
|
document.getElementById('wrap-toggle').textContent = state.settings.wrapText ? 'On' : 'Off';
|
||||||
|
}
|
||||||
|
|
||||||
|
window.openStyleModal = () => {
|
||||||
|
updateSettingsUI();
|
||||||
|
$styleModal.classList.add('active');
|
||||||
|
};
|
||||||
|
|
||||||
|
window.closeStyleModal = () => {
|
||||||
|
$styleModal.classList.remove('active');
|
||||||
|
};
|
||||||
|
|
||||||
|
window.handleStyleModalOverlayClick = (event) => {
|
||||||
|
if (event.target === $styleModal) {
|
||||||
|
closeStyleModal();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
window.setSetting = (key, value) => {
|
||||||
|
state.settings[key] = value;
|
||||||
|
saveSettings();
|
||||||
|
applySettings();
|
||||||
|
updateSettingsUI();
|
||||||
|
};
|
||||||
|
|
||||||
|
window.adjustSetting = (key, delta) => {
|
||||||
|
const bounds = {
|
||||||
|
fontSize: { min: 10, max: 18, step: 1 },
|
||||||
|
terminalHeight: { min: 200, max: 600, step: 50 },
|
||||||
|
};
|
||||||
|
|
||||||
|
const config = bounds[key];
|
||||||
|
if (!config) return;
|
||||||
|
|
||||||
|
// Adjust with bounds
|
||||||
|
let newValue = state.settings[key] + delta;
|
||||||
|
newValue = Math.max(config.min, Math.min(config.max, newValue));
|
||||||
|
|
||||||
|
state.settings[key] = newValue;
|
||||||
|
saveSettings();
|
||||||
|
applySettings();
|
||||||
|
updateSettingsUI();
|
||||||
|
};
|
||||||
|
|
||||||
|
window.toggleSetting = (key) => {
|
||||||
|
state.settings[key] = !state.settings[key];
|
||||||
|
saveSettings();
|
||||||
|
applySettings();
|
||||||
|
updateSettingsUI();
|
||||||
|
};
|
||||||
|
|
||||||
// Initialize
|
// Initialize
|
||||||
loadSettings();
|
loadSettings();
|
||||||
applySettings();
|
applySettings();
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue