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

refactor: entity selector full overhaul — Mar 2026

Browse Source 
- Unified _setBadgeCount for ALL badge updates
- target-conditions-trait → entity-selector-trait
- target-* → es-* class rename (20+ classes)
- SCSS recompiled: zero duplicate selectors
- CSS transitions replace jQuery slideDown/slideUp
- Serialize cache, method swap cache
- Badge: no-matches gray, consistent hover, no blending
- Inline condition count always visible
- Preview popover refreshes in-place on sort change
- Categories add chips immediately
- Entity type icons on chips
- Consistent info_outline icons via buildHelpIcon
- Method dropdown text clipping fix (line-height)
- mpr-input-compact on all inputs
- Dropdown padding fixed in SCSS source
- Chips wrapper: same container always
- Reusable helpers: _buildEmptyState, _buildSearchBoxHtml, _buildInfoTooltip
- Asset path: uses $this->module->getPathUri() not reflection
- Debug logs removed

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
myprestarocks
2026-03-30 18:05:43 +00:00
parent d2d4f96c5e
commit c6fd5cee13
38 changed files with 7670 additions and 8929 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,16 +6,15 @@
@use '../variables' as *;
@use '../mixins' as *;
.target-conditions-trait,
.entity-selector-trait {
// Search wrapper
.target-search-wrapper {
.es-search-wrapper {
position: relative;
}
// Search dropdown
.target-search-dropdown {
.es-search-dropdown {
@include dropdown-container;
display: none;
width: 600px;
@@ -117,7 +116,7 @@
// Results container
.dropdown-results {
padding: 0 $es-spacing-sm;
padding: 0;
}
// Results count text
@@ -159,12 +158,12 @@
}
// Result item (both class names for compatibility)
// Note: Main dropdown-item styling is in the global .target-search-dropdown section below
// Note: Main dropdown-item styling is in the global .es-search-dropdown section below
.dropdown-result-item {
display: flex;
align-items: center;
gap: $es-spacing-sm;
padding: $es-spacing-sm 0;
padding: $es-spacing-sm;
background: $es-white;
border: none;
border-bottom: 1px solid $es-border-color;
@@ -359,20 +358,6 @@
gap: $es-spacing-sm;
}
// Combination-level search results ('both' mode)
.dropdown-item.is-combination {
padding-left: 28px;
.result-name {
font-size: 0.9em;
}
}
.dropdown-item.is-parent-product {
background: $es-slate-50;
font-weight: $es-font-weight-medium;
}
// No results state
.no-results {
display: flex;
@@ -616,7 +601,6 @@
}
// Category tree view
.target-conditions-trait,
.entity-selector-trait {
.category-tree {
padding: $es-spacing-sm;
@@ -884,8 +868,8 @@
// Global dropdown styles (when appended to body instead of inside wrapper)
// Duplicates key styles for when dropdown is outside .entity-selector-trait
// =============================================================================
body > .target-search-dropdown,
.target-search-dropdown {
body > .es-search-dropdown,
.es-search-dropdown {
@include dropdown-container;
display: none;
width: 600px;
@@ -1304,9 +1288,50 @@ body > .target-search-dropdown,
font-weight: $es-font-weight-medium;
}
// Count with eye icon (like group-count-badge)
.toggle-count {
display: inline-flex;
align-items: center;
gap: 0.125rem;
color: $es-text-muted;
font-size: 0.65rem;
i {
font-size: 10px;
color: $es-primary;
}
// Clickable preview badge
&.clickable {
cursor: pointer;
padding: 0.125rem 0.25rem;
border-radius: $es-radius-sm;
transition: all $es-transition-fast;
&:hover {
background: rgba($es-primary, 0.1);
color: $es-primary;
i {
color: $es-primary;
}
}
&.popover-open {
background: $es-primary;
color: $es-white;
i {
color: $es-white;
}
}
&.loading {
i {
animation: spin 0.6s linear infinite;
}
}
}
}
}
@@ -1399,67 +1424,6 @@ body > .target-search-dropdown,
color: rgba(255, 255, 255, 0.8);
}
// Filter chip wrapper (chip/toggle + preview button)
.filter-chip-wrapper {
display: inline-flex;
align-items: stretch;
border-radius: $es-radius-sm;
overflow: hidden;
// Left element gets left-only border-radius
.filter-chip,
.filter-group-toggle {
border-radius: $es-radius-sm 0 0 $es-radius-sm;
}
// Preview eye button — unified for both value chips and group toggles
.chip-preview-btn {
@include button-reset;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 0.375rem;
font-size: 10px;
color: $es-text-muted;
background: $es-slate-100;
border-left: 1px solid $es-border-color;
border-radius: 0 $es-radius-sm $es-radius-sm 0;
cursor: pointer;
transition: all $es-transition-fast;
&:hover {
background: rgba($es-primary, 0.1);
color: $es-primary;
}
&.popover-open {
background: $es-primary;
color: $es-white;
}
&.loading i {
animation: spin 0.6s linear infinite;
}
}
// When no preview button, restore full border-radius
.filter-chip:last-child,
.filter-group-toggle:last-child {
border-radius: $es-radius-sm;
}
// Group toggle active/has-selection states propagate to wrapper border
.filter-group-toggle.active + .chip-preview-btn {
border-left-color: $es-primary;
background: rgba($es-primary, 0.05);
}
.filter-group-toggle.has-selection + .chip-preview-btn {
border-left-color: $es-success;
background: rgba($es-success, 0.03);
}
}
// Dropdown content
.dropdown-content {
max-height: 400px;
@@ -1787,7 +1751,7 @@ body > .target-search-dropdown,
// Results container
.dropdown-results {
padding: 0 $es-spacing-sm;
padding: 0;
background: $es-white;
min-height: 200px;
}
@@ -1798,7 +1762,7 @@ body > .target-search-dropdown,
display: flex;
align-items: center;
gap: $es-spacing-sm;
padding: $es-spacing-sm 0;
padding: $es-spacing-sm;
background: $es-white;
border: none;
border-bottom: 1px solid $es-border-color;
@@ -2295,15 +2259,15 @@ body > .target-search-dropdown,
// ============================================================================
// Standalone dropdown styles (for when dropdown is appended to body)
// These selectors work because .target-search-dropdown is on the dropdown itself
// These selectors work because .es-search-dropdown is on the dropdown itself
// ============================================================================
.target-search-dropdown {
.es-search-dropdown {
// Results container - scrollable
.dropdown-results {
max-height: 400px;
overflow-y: auto;
padding: 0 $es-spacing-sm;
padding: 0;
@include custom-scrollbar;
}
@@ -2385,7 +2349,7 @@ body > .target-search-dropdown,
display: flex;
align-items: center;
gap: $es-spacing-sm;
padding: 0;
padding: $es-spacing-sm;
border: none;
border-bottom: 1px solid $es-border-color;
border-radius: 0;
@@ -2559,7 +2523,7 @@ body > .target-search-dropdown,
}
// Body-level dropdown (when appended to body for z-index)
body > .target-search-dropdown {
body > .es-search-dropdown {
// Override dropdown-item border when inside body-appended dropdown
.dropdown-item {
border: none;