Remove bulk selection checkboxes, restore click-to-select
Interface simplification: - Removed bulk selection checkboxes from image items - Restored original click-to-select behavior for image selection - Users can now click directly on images to select/deselect them - Select All/Deselect All buttons now work by directly modifying image classes - Kept Enable/Disable checkbox functionality unchanged Benefits: - Cleaner visual interface with fewer checkboxes - More intuitive selection - click on image to select it - Reduced visual clutter while maintaining all functionality - Same bulk operations (select all, deselect all, delete selected) still work - Original UX restored where selection was visual highlight, not checkbox
This commit is contained in:
parent
7597bc8eed
commit
f4d695aa76
19
game.js
19
game.js
|
|
@ -1139,9 +1139,6 @@ class TaskChallengeGame {
|
|||
${isCustom ? '<span class="custom-badge">Custom</span>' : ''}
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-item-select">
|
||||
<input type="checkbox" class="bulk-select-checkbox">
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Add event listener for enable/disable
|
||||
|
|
@ -1150,7 +1147,7 @@ class TaskChallengeGame {
|
|||
|
||||
// Add event listener for individual image selection (click to select/deselect)
|
||||
imageItem.addEventListener('click', (e) => {
|
||||
// Don't toggle selection if clicking on the checkbox or bulk select checkbox
|
||||
// Don't toggle selection if clicking on the checkbox
|
||||
if (e.target.type !== 'checkbox') {
|
||||
this.toggleImageSelection(imageItem);
|
||||
}
|
||||
|
|
@ -1619,20 +1616,18 @@ ${usagePercent > 85 ? '⚠️ Storage getting full - consider deleting some imag
|
|||
selectAllImages(tabType = 'task') {
|
||||
const galleryId = tabType === 'task' ? 'task-images-gallery' : 'consequence-images-gallery';
|
||||
const gallery = document.getElementById(galleryId);
|
||||
const checkboxes = gallery.querySelectorAll('.bulk-select-checkbox');
|
||||
checkboxes.forEach(checkbox => {
|
||||
checkbox.checked = true;
|
||||
checkbox.closest('.image-item').classList.add('selected');
|
||||
const imageItems = gallery.querySelectorAll('.image-item');
|
||||
imageItems.forEach(imageItem => {
|
||||
imageItem.classList.add('selected');
|
||||
});
|
||||
}
|
||||
|
||||
deselectAllImages(tabType = 'task') {
|
||||
const galleryId = tabType === 'task' ? 'task-images-gallery' : 'consequence-images-gallery';
|
||||
const gallery = document.getElementById(galleryId);
|
||||
const checkboxes = gallery.querySelectorAll('.bulk-select-checkbox');
|
||||
checkboxes.forEach(checkbox => {
|
||||
checkbox.checked = false;
|
||||
checkbox.closest('.image-item').classList.remove('selected');
|
||||
const imageItems = gallery.querySelectorAll('.image-item');
|
||||
imageItems.forEach(imageItem => {
|
||||
imageItem.classList.remove('selected');
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue