feat: Replace dropdown with segmented button group for view mode

This commit is contained in:
Paul Gauthier (aider) 2025-04-13 08:44:36 -07:00
parent fcf44cbebe
commit d4a68c80bc

View file

@ -20,10 +20,10 @@ Aider works best with high-scoring models, though it [can connect to almost any
<div id="controls-container" style="display: flex; align-items: center; max-width: 800px; margin: 10px auto; gap: 10px;"> <div id="controls-container" style="display: flex; align-items: center; max-width: 800px; margin: 10px auto; gap: 10px;">
<input type="text" id="editSearchInput" placeholder="Search..." style="flex-grow: 1; padding: 8px; border: 1px solid #ddd; border-radius: 4px;"> <input type="text" id="editSearchInput" placeholder="Search..." style="flex-grow: 1; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
<select id="view-mode-select" style="padding: 8px; border: 1px solid #ddd; border-radius: 4px; background-color: #f8f9fa; cursor: pointer;"> <div id="view-mode-toggle" style="display: inline-flex; border: 1px solid #ccc; border-radius: 4px;">
<option value="view" selected>View</option> <button id="mode-view-btn" class="mode-button active" data-mode="view" style="padding: 8px 12px; border: none; background-color: #e9ecef; border-radius: 3px 0 0 3px; cursor: pointer; font-size: 14px; line-height: 1.5;">View</button>
<option value="select">Select</option> <button id="mode-select-btn" class="mode-button" data-mode="select" style="padding: 8px 12px; border: none; background-color: #f8f9fa; border-radius: 0 3px 3px 0; cursor: pointer; border-left: 1px solid #ccc; font-size: 14px; line-height: 1.5;">Select</button>
</select> </div>
</div> </div>
<table style="width: 100%; max-width: 800px; margin: auto; border-collapse: collapse; box-shadow: 0 2px 4px rgba(0,0,0,0.1); font-size: 14px;"> <table style="width: 100%; max-width: 800px; margin: auto; border-collapse: collapse; box-shadow: 0 2px 4px rgba(0,0,0,0.1); font-size: 14px;">
@ -199,7 +199,9 @@ document.addEventListener('DOMContentLoaded', function() {
const allMainRows = document.querySelectorAll('tr[id^="main-row-"]'); const allMainRows = document.querySelectorAll('tr[id^="main-row-"]');
const allDetailsRows = document.querySelectorAll('tr[id^="details-"]'); const allDetailsRows = document.querySelectorAll('tr[id^="details-"]');
const searchInput = document.getElementById('editSearchInput'); const searchInput = document.getElementById('editSearchInput');
const viewModeSelect = document.getElementById('view-mode-select'); // Get the dropdown const modeViewButton = document.getElementById('mode-view-btn');
const modeSelectButton = document.getElementById('mode-select-btn');
const modeButtons = [modeViewButton, modeSelectButton];
const selectAllCheckbox = document.getElementById('select-all-checkbox'); const selectAllCheckbox = document.getElementById('select-all-checkbox');
function applySearchFilter() { function applySearchFilter() {