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

feat: unified preview eye icon component, enhanced search & preview

Browse Source 
- Unify filter group and filter value preview icons into shared
  .filter-chip-wrapper + .chip-preview-btn component pattern
- Remove old .toggle-count.clickable inline eye icon approach
- Add dropdown-level event handler for preview buttons (dropdown
  appended to body, needs separate delegation)
- Enhanced EntitySearchEngine with improved product condition
  resolution and preview data
- Add EntityPreviewHandler for richer preview popovers
- Various SCSS improvements for chips, groups, and list-preview

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
myprestarocks
2026-02-20 21:33:14 +00:00
parent a7fbfa372c
commit 55e3135903
23 changed files with 2683 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -359,6 +359,20 @@
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;
@@ -1290,50 +1304,9 @@ 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;
}
}
}
}
}
@@ -1426,6 +1399,67 @@ 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;