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

Refactor preview popover and fix dropdown header styling

Browse Source 
- 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:
myprestarocks
2026-01-29 12:13:13 +00:00
parent eb15170e1c
commit 6f248605a7
11 changed files with 1675 additions and 1136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
sources/js/admin/entity-selector/_events.js
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();

1078
sources/js/admin/entity-selector/_preview.js
View File

File diff suppressed because it is too large Load Diff

60
sources/js/admin/entity-selector/_search.js
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>';

6
sources/scss/_mixins.scss
View File

@@ -21,6 +21,12 @@
justify-content: space-between;
}
@mixin grid-columns($cols) {
display: grid;
grid-template-columns: repeat($cols, 1fr);
gap: $es-spacing-sm;
}
// =============================================================================
// Text
// =============================================================================

370
sources/scss/components/_dropdown.scss
View File

@@ -159,26 +159,29 @@
}
// Result item (both class names for compatibility)
.dropdown-result-item,
.dropdown-item {
// Note: Main dropdown-item styling is in the global .target-search-dropdown section below
.dropdown-result-item {
display: flex;
align-items: center;
gap: $es-spacing-sm;
padding: $es-spacing-sm;
padding: $es-spacing-sm 0;
background: $es-white;
border: 1px solid $es-border-color;
border-radius: $es-radius-md;
border: none;
border-bottom: 1px solid $es-border-color;
border-radius: 0;
cursor: pointer;
transition: all $es-transition-fast;
transition: background $es-transition-fast;
&:last-child {
border-bottom: none;
}
&:hover {
background: $es-bg-hover;
border-color: $es-slate-300;
}
&.selected {
background: $es-primary-light;
border-color: $es-primary;
}
&.disabled {
@@ -187,7 +190,6 @@
&:hover {
background: $es-white;
border-color: $es-border-color;
}
}
}
@@ -963,26 +965,71 @@ body > .target-search-dropdown,
.sort-controls {
display: flex;
align-items: center;
gap: 0.25rem;
// No gap - elements are connected
}
.sort-field-select {
@include input-base;
padding: 0.25rem 0.5rem;
font-size: $es-font-size-xs;
min-width: 80px;
height: 28px; // Match btn-sort-dir height
border-radius: $es-radius-sm 0 0 $es-radius-sm;
border-right: none;
}
.btn-sort-dir {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
min-width: 38px;
flex-shrink: 0;
height: 28px;
padding: 0;
margin: 0;
color: $es-text-muted;
background: $es-white;
border: 1px solid $es-border-color;
border-radius: 0 $es-radius-sm $es-radius-sm 0;
cursor: pointer;
transition: all $es-transition-fast;
i {
font-size: 14px;
}
&:hover {
background: $es-bg-hover;
color: $es-text-primary;
}
&.active {
background: $es-primary-light;
border-color: $es-primary;
color: $es-primary;
}
}
.sort-field-select,
.view-mode-select {
@include input-base;
padding: 0.25rem 0.5rem;
font-size: $es-font-size-xs;
min-width: 80px;
margin-left: 0.25rem;
}
.btn-sort-dir,
.btn-toggle-filters,
.btn-show-history {
@include button-reset;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
width: 32px;
min-width: 32px;
flex-shrink: 0;
height: 28px;
padding: 0;
margin: 0;
color: $es-text-muted;
background: $es-white;
border: 1px solid $es-border-color;
@@ -990,6 +1037,10 @@ body > .target-search-dropdown,
cursor: pointer;
transition: all $es-transition-fast;
i {
font-size: 14px;
}
&:hover {
background: $es-bg-hover;
color: $es-text-primary;
@@ -1005,33 +1056,66 @@ body > .target-search-dropdown,
.refine-compact {
display: flex;
align-items: center;
gap: 0.25rem;
// No gap - elements are connected
// Connected to refine-input
.btn-refine-negate {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
min-width: 32px;
flex-shrink: 0;
height: 28px;
padding: 0;
margin: 0;
color: $es-text-muted;
background: $es-white;
border: 1px solid $es-border-color;
border-right: none;
border-radius: $es-radius-sm 0 0 $es-radius-sm;
cursor: pointer;
transition: all $es-transition-fast;
&:hover {
background: $es-bg-hover;
color: $es-text-primary;
}
&.active {
background: $es-danger-light;
color: $es-danger;
border-color: $es-danger;
}
}
.refine-input {
@include input-base;
width: 100px;
padding: 0.25rem 0.5rem;
font-size: $es-font-size-xs;
border-radius: 0 $es-radius-sm $es-radius-sm 0;
}
.btn-refine-negate,
.btn-clear-refine {
@include button-reset;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
width: 28px;
height: 28px;
padding: 0;
margin: 0;
margin-left: -1px; // Overlap input border when visible
color: $es-text-muted;
border-radius: $es-radius-sm;
background: $es-white;
border: 1px solid $es-border-color;
border-radius: 0 $es-radius-sm $es-radius-sm 0;
cursor: pointer;
transition: all $es-transition-fast;
&:hover {
background: $es-bg-hover;
}
&.active {
color: $es-danger;
color: $es-text-primary;
}
}
}
@@ -1380,34 +1464,6 @@ body > .target-search-dropdown,
padding: $es-spacing-sm;
}
// Dropdown item
.dropdown-item {
display: flex;
align-items: center;
gap: $es-spacing-sm;
padding: $es-spacing-sm;
background: $es-white;
border: 1px solid $es-border-color;
border-radius: $es-radius-md;
cursor: pointer;
transition: all $es-transition-fast;
&:hover {
background: $es-bg-hover;
border-color: $es-slate-300;
}
&.selected {
background: $es-primary-light;
border-color: $es-primary;
}
&.disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
.item-checkbox {
flex-shrink: 0;
width: 16px;
@@ -1589,7 +1645,8 @@ body > .target-search-dropdown,
color: $es-text-primary;
}
.btn-remove-history {
.btn-remove-history,
.btn-delete-history {
@include button-reset;
display: flex;
align-items: center;
@@ -1598,18 +1655,20 @@ body > .target-search-dropdown,
height: 20px;
color: $es-text-muted;
border-radius: $es-radius-sm;
opacity: 0;
transition: all $es-transition-fast;
&:hover {
background: $es-slate-200;
color: $es-text-primary;
color: $es-danger;
}
}
}
&:hover .btn-remove-history {
opacity: 1;
}
// Search history list container
.search-history-list {
display: flex;
flex-direction: column;
gap: $es-spacing-xs;
}
// Results header (for list view columns)
@@ -1644,46 +1703,44 @@ body > .target-search-dropdown,
// Results container
.dropdown-results {
padding: $es-spacing-sm;
background: $es-white;
min-height: 200px;
}
// Grid view modes
.dropdown-results-grid {
display: grid;
gap: $es-spacing-sm;
&.view-list {
grid-template-columns: 1fr;
}
&.view-grid-2 {
grid-template-columns: repeat(2, 1fr);
}
&.view-grid-3 {
grid-template-columns: repeat(3, 1fr);
}
}
// Result item styles
.dropdown-result-item {
// Dropdown item (search result)
.dropdown-item {
position: relative;
display: flex;
align-items: center;
gap: $es-spacing-sm;
padding: $es-spacing-sm;
padding: $es-spacing-sm 0;
background: $es-white;
border: 1px solid $es-border-color;
border-radius: $es-radius-md;
border: none;
border-bottom: 1px solid $es-border-color;
border-radius: 0;
cursor: pointer;
transition: all $es-transition-fast;
transition: background $es-transition-fast;
&:last-child {
border-bottom: none;
}
&:hover {
background: $es-bg-hover;
border-color: $es-slate-300;
}
&.selected {
background: $es-primary-light;
border-color: $es-primary;
.result-checkbox {
background: $es-primary;
border-color: $es-primary;
color: $es-white;
i {
display: block;
}
}
}
&.disabled {
@@ -1692,6 +1749,136 @@ body > .target-search-dropdown,
}
}
// Checkbox indicator
.result-checkbox {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 18px;
height: 18px;
background: $es-white;
border: 2px solid $es-border-dark;
border-radius: 3px;
transition: all $es-transition-fast;
i {
display: none;
font-size: 10px;
}
}
// View mode classes (applied to dropdown container)
&.view-cols-2 .dropdown-results { @include grid-columns(2); }
&.view-cols-3 .dropdown-results { @include grid-columns(3); }
&.view-cols-4 .dropdown-results { @include grid-columns(4); }
&.view-cols-5 .dropdown-results { @include grid-columns(5); }
&.view-cols-6 .dropdown-results { @include grid-columns(6); }
&.view-cols-7 .dropdown-results { @include grid-columns(7); }
&.view-cols-8 .dropdown-results { @include grid-columns(8); }
// Grid view item styling (compact cards)
&.view-cols-2,
&.view-cols-3,
&.view-cols-4,
&.view-cols-5,
&.view-cols-6,
&.view-cols-7,
&.view-cols-8 {
.dropdown-item {
flex-direction: column;
align-items: center;
text-align: center;
padding: 0;
border: 1px solid $es-border-color;
border-radius: $es-radius-sm;
.result-checkbox {
position: absolute;
top: $es-spacing-xs;
left: $es-spacing-xs;
}
.result-image,
.result-icon {
width: 48px;
height: 48px;
margin-bottom: $es-spacing-xs;
}
.result-info {
width: 100%;
}
.result-name {
font-size: $es-font-size-xs;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.result-subtitle {
display: none;
}
// Show compact product info in grid
.result-col {
display: none;
}
.result-grid-info {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.25rem;
margin-top: $es-spacing-xs;
font-size: 0.65rem;
.grid-price {
color: $es-text-primary;
font-weight: $es-font-weight-semibold;
}
.grid-stock {
color: $es-text-muted;
&.stock-out { color: $es-danger; }
&.stock-low { color: $es-warning; }
}
.grid-discount {
color: $es-success;
font-weight: $es-font-weight-medium;
}
}
}
// Hide results header in grid views
.results-header {
display: none;
}
}
// Smaller items for higher column counts
&.view-cols-5,
&.view-cols-6,
&.view-cols-7,
&.view-cols-8 {
.dropdown-item {
.result-image,
.result-icon {
width: 40px;
height: 40px;
}
.result-name {
font-size: 0.65rem;
}
}
}
// Product-specific result item
.result-item-product {
display: flex;
@@ -1881,20 +2068,25 @@ body > .target-search-dropdown,
}
.btn-load-more {
@include button-reset;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: $es-spacing-xs;
margin: 0;
border: none;
color: $es-primary;
background: $es-primary-light;
background: $es-primary-light !important;
border-radius: $es-radius-sm;
cursor: pointer;
transition: all $es-transition-fast;
font: inherit;
i {
font-size: 14px;
}
&:hover {
background: rgba($es-primary, 0.2);
background: rgba($es-primary, 0.2) !important;
}
}
}

97
sources/scss/components/_list-preview.scss
View File

@@ -86,16 +86,95 @@
gap: $es-spacing-xs;
}
// Filter input section
.preview-filter {
padding: $es-spacing-sm $es-spacing-md;
border-bottom: 1px solid $es-border-color;
.preview-filter-input {
@include input-base;
width: 100%;
padding: $es-spacing-sm;
font-size: $es-font-size-sm;
box-sizing: border-box;
&::placeholder {
color: $es-text-muted;
}
}
}
.preview-footer {
padding: $es-spacing-sm $es-spacing-md;
background: $es-slate-50;
border-top: 1px solid $es-border-color;
text-align: center;
.preview-more-info {
font-size: $es-font-size-xs;
color: $es-text-muted;
font-weight: $es-font-weight-medium;
text-align: center;
}
}
// Load more controls (select dropdown style)
.load-more-controls {
display: flex;
align-items: center;
justify-content: center;
gap: $es-spacing-sm;
font-size: $es-font-size-xs;
color: $es-text-muted;
.load-more-label {
white-space: nowrap;
}
.load-more-select {
@include input-base;
padding: 0.25rem 0.5rem;
font-size: $es-font-size-xs;
min-width: 70px;
}
.load-more-of {
white-space: nowrap;
}
.remaining-count {
font-weight: $es-font-weight-semibold;
color: $es-text-secondary;
}
.btn-load-more {
display: flex;
align-items: center;
justify-content: center;
padding: $es-spacing-xs;
margin: 0;
border: none;
color: $es-primary;
background: $es-primary-light !important;
border-radius: $es-radius-sm;
cursor: pointer;
transition: all $es-transition-fast;
font: inherit;
i {
font-size: 14px;
}
&:hover {
background: rgba($es-primary, 0.2) !important;
}
&.loading {
cursor: wait;
i {
animation: spin 0.6s linear infinite;
}
}
}
}
}
@@ -111,20 +190,24 @@
gap: $es-spacing-xs;
}
// Preview item
// Preview item (list-style with bottom border divider)
.preview-item {
display: flex;
align-items: center;
gap: $es-spacing-sm;
padding: $es-spacing-sm;
padding: $es-spacing-sm 0;
background: $es-white;
border: 1px solid $es-border-color;
border-radius: $es-radius-md;
transition: all $es-transition-fast;
border: none;
border-bottom: 1px solid $es-border-color;
border-radius: 0;
transition: background $es-transition-fast;
&:last-child {
border-bottom: none;
}
&:hover {
background: $es-bg-hover;
border-color: $es-slate-300;
}
}