Style: chips toolbar compact design with bootstrap specificity fix

- Add bootstrap specificity overrides for input/select in chips toolbar
- Use #content.bootstrap selector with doubled classes for specificity
- Reduce toolbar height with consistent padding (0.2rem vertical)
- Change border-radius from pill to subtle rounded corners
- Simplify input structure (embedded search icon via background)
- Align all toolbar elements (input, select, count, clear button)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-31 22:40:57 +01:00
parent acbcf55b1c
commit 603be61f71
10 changed files with 375 additions and 221 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -1408,7 +1408,7 @@
});
// Save - commit pending selections to chips
this.$dropdown.on('click', '.btn-confirm-dropdown', function(e) {
this.$dropdown.on('click', '.btn-save', function(e) {
e.preventDefault();
if (self.pendingPicker && self.pendingSelections) {
@@ -1437,7 +1437,7 @@
});
// Cancel - discard pending selections (no changes to chips)
this.$dropdown.on('click', '.btn-cancel-dropdown', function(e) {
this.$dropdown.on('click', '.btn-cancel', function(e) {
e.preventDefault();
// Just discard pending - chips remain unchanged
@@ -2519,21 +2519,27 @@
// Results
html += '<div class="dropdown-results"></div>';
// Footer
// Footer - unified load more + actions
html += '<div class="dropdown-footer">';
html += '<div class="load-more-controls" style="display:none;">';
html += '<span class="load-more-label">' + (trans.load || 'Load') + '</span>';
// Left side: load more
html += '<div class="dropdown-footer-left" style="visibility:hidden;">';
html += '<span class="load-label">' + (trans.load || 'Load') + '</span>';
html += '<select class="load-more-select">';
html += '<option value="10">10</option>';
html += '<option value="20" selected>20</option>';
html += '<option value="20">20</option>';
html += '<option value="50">50</option>';
html += '<option value="100">100</option>';
html += '<option value="all">' + (trans.all || 'All') + '</option>';
html += '</select>';
html += '<span class="load-more-of">' + (trans.of || 'of') + ' <span class="remaining-count">0</span> ' + (trans.remaining || 'remaining') + '</span>';
html += '<button type="button" class="btn-load-more"><i class="icon-plus"></i></button>';
html += '<span class="remaining-text">' + (trans.of || 'of') + ' <strong class="remaining-count">0</strong> ' + (trans.remaining || 'remaining') + '</span>';
html += '</div>';
html += '<button type="button" class="btn-cancel-dropdown"><i class="icon-times"></i> ' + (trans.cancel || 'Cancel') + ' <kbd>Esc</kbd></button>';
html += '<button type="button" class="btn-confirm-dropdown"><i class="icon-check"></i> ' + (trans.save || 'Save') + ' <kbd>⏎</kbd></button>';
// Right side: action buttons
html += '<div class="dropdown-footer-right">';
html += '<button type="button" class="dropdown-action-btn btn-cancel"><i class="icon-times"></i> ' + (trans.cancel || 'Cancel') + ' <span class="btn-shortcut">Esc</span></button>';
html += '<button type="button" class="dropdown-action-btn btn-save"><i class="icon-check"></i> ' + (trans.save || 'Save') + ' <span class="btn-shortcut">⏎</span></button>';
html += '</div>';
html += '</div>';
html += '</div>';
@@ -3963,10 +3969,7 @@
// Create wrapper structure - integrated filter toolbar with sort
var wrapperHtml = '<div class="chips-wrapper">' +
'<div class="chips-toolbar">' +
'<span class="chips-filter-group">' +
'<i class="icon-search"></i>' +
'<input type="text" class="chips-search-input" placeholder="' + (trans.filter_selected || 'Filter selected') + '...">' +
'</span>' +
'<select class="chips-sort-select" title="' + (trans.sort || 'Sort') + '">' +
'<option value="added">' + (trans.sort_added || 'Order added') + '</option>' +
'<option value="name_asc">' + (trans.sort_name_asc || 'Name A-Z') + '</option>' +

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long