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;
|
||||
}
|
||||
|
||||
.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) {
|
||||
body {
|
||||
background: #f5f5f5;
|
||||
|
|
@ -661,10 +741,13 @@
|
|||
<body>
|
||||
<header>
|
||||
<h1>claude-remote</h1>
|
||||
<div style="display: flex; align-items: center; gap: 16px;">
|
||||
<button class="settings-btn" onclick="openStyleModal()" title="Display Settings">⚙️</button>
|
||||
<div class="status" id="status">
|
||||
<span class="status-dot"></span>
|
||||
<span class="status-text">connecting</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
|
|
@ -703,6 +786,48 @@
|
|||
</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>
|
||||
const state = {
|
||||
sessions: new Map(),
|
||||
|
|
@ -726,6 +851,7 @@
|
|||
const $instructionsModal = document.getElementById('instructionsModal');
|
||||
const $instructionsTextarea = document.getElementById('instructionsTextarea');
|
||||
const $instructionsError = document.getElementById('instructionsError');
|
||||
const $styleModal = document.getElementById('styleModal');
|
||||
|
||||
function setStatus(connected) {
|
||||
if (connected) {
|
||||
|
|
@ -1528,6 +1654,75 @@
|
|||
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
|
||||
loadSettings();
|
||||
applySettings();
|
||||
|
|
|
|||
Loading…
Reference in a new issue