mypresta.rocks/prestashop-entity-selector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style: chips toolbar compact design with bootstrap specificity fix

Browse Source 
- 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:
myprestarocks
2026-01-31 22:40:57 +01:00
parent acbcf55b1c
commit 603be61f71
10 changed files with 375 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
assets/js/admin/entity-selector.js
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>' +