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:
@@ -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
@@ -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>';
|
||||
|
||||
Reference in New Issue
Block a user