Refactor preview popover and fix dropdown header styling

- Refactor preview popover into reusable component with filter input and load more
- Fix sort controls: connect sort-field-select to btn-sort-dir (shared border)
- Fix refine controls: connect btn-refine-negate to refine-input
- Add flex-shrink: 0 and min-width to prevent button shrinking
- Fix grid view items: border on all 4 sides, no padding
- Add EXCEPT separator styling for selection groups
- Various button width and height fixes for consistency

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-29 12:13:13 +00:00
parent eb15170e1c
commit 6f248605a7
11 changed files with 1675 additions and 1136 deletions

View File

@@ -1579,14 +1579,6 @@
var groupType = $badge.data('type');
var groupName = $badge.data('groupName');
console.log('[EntitySelector] Filter toggle count clicked', {
groupId: groupId,
groupType: groupType,
groupName: groupName,
hasMethod: typeof self.showFilterGroupPreviewPopover === 'function',
self: self
});
if ($badge.hasClass('popover-open')) {
self.hidePreviewPopover();
} else {
@@ -1594,6 +1586,25 @@
}
});
// View mode select change
this.$dropdown.on('change', '.view-mode-select', function() {
var mode = $(this).val();
self.viewMode = mode;
// Remove all view mode classes and add the new one
self.$dropdown
.removeClass('view-list view-tree view-cols-2 view-cols-3 view-cols-4 view-cols-5 view-cols-6 view-cols-7 view-cols-8')
.addClass('view-' + mode.replace('cols-', 'cols-'));
// For tree view, load the category tree
if (mode === 'tree') {
self.loadCategoryTree();
} else {
// Re-render current results with new view mode
self.renderSearchResults(false);
}
});
// Close values row
this.$dropdown.on('click', '.btn-close-values', function(e) {
e.preventDefault();

File diff suppressed because it is too large Load Diff

View File

@@ -392,32 +392,48 @@
html += '</div>';
// Add product-specific columns (price, sale price, stock, sold)
if (item.type === 'product' && isListView) {
// Regular price
html += '<div class="result-col result-col-price">';
html += '<span class="col-value">' + (item.regular_price_formatted || item.price_formatted || '') + '</span>';
html += '</div>';
if (item.type === 'product') {
if (isListView) {
// List view: full columns
// Regular price
html += '<div class="result-col result-col-price">';
html += '<span class="col-value">' + (item.regular_price_formatted || item.price_formatted || '') + '</span>';
html += '</div>';
// Sale price (only if discounted)
if (item.has_discount) {
html += '<div class="result-col result-col-sale">';
html += '<span class="col-value">' + (item.price_formatted || '') + '</span>';
// Sale price (only if discounted)
if (item.has_discount) {
html += '<div class="result-col result-col-sale">';
html += '<span class="col-value">' + (item.price_formatted || '') + '</span>';
html += '</div>';
} else {
html += '<div class="result-col result-col-sale"></div>';
}
// Stock column
var stockClass = item.stock_status === 'out_of_stock' ? 'stock-out' :
(item.stock_status === 'low_stock' ? 'stock-low' : 'stock-ok');
html += '<div class="result-col result-col-stock">';
html += '<span class="col-value ' + stockClass + '">' + (item.stock_qty !== undefined ? item.stock_qty : '') + '</span>';
html += '</div>';
// Sales column
html += '<div class="result-col result-col-sales">';
html += '<span class="col-value">' + (item.sales_qty !== undefined ? item.sales_qty : '0') + '</span>';
html += '</div>';
} else {
html += '<div class="result-col result-col-sale"></div>';
// Grid view: compact info line
var gridStockClass = item.stock_status === 'out_of_stock' ? 'stock-out' :
(item.stock_status === 'low_stock' ? 'stock-low' : '');
html += '<div class="result-grid-info">';
html += '<span class="grid-price">' + (item.price_formatted || '') + '</span>';
if (item.stock_qty !== undefined) {
html += '<span class="grid-stock ' + gridStockClass + '">' + item.stock_qty + ' qty</span>';
}
if (item.has_discount) {
html += '<span class="grid-discount">-' + (item.discount_percent || '') + '%</span>';
}
html += '</div>';
}
// Stock column
var stockClass = item.stock_status === 'out_of_stock' ? 'stock-out' :
(item.stock_status === 'low_stock' ? 'stock-low' : 'stock-ok');
html += '<div class="result-col result-col-stock">';
html += '<span class="col-value ' + stockClass + '">' + (item.stock_qty !== undefined ? item.stock_qty : '') + '</span>';
html += '</div>';
// Sales column
html += '<div class="result-col result-col-sales">';
html += '<span class="col-value">' + (item.sales_qty !== undefined ? item.sales_qty : '0') + '</span>';
html += '</div>';
}
html += '</div>';