feat: unified preview eye icon component, enhanced search & preview
- 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:
@@ -799,6 +799,10 @@
|
||||
.entity-selector-trait.single-mode .target-block-container {
|
||||
display: block;
|
||||
}
|
||||
.target-conditions-trait.single-mode .entity-selector-tabs-row .target-block-tabs,
|
||||
.entity-selector-trait.single-mode .entity-selector-tabs-row .target-block-tabs {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.target-conditions-trait .header-actions,
|
||||
.entity-selector-trait .header-actions {
|
||||
@@ -1749,6 +1753,19 @@
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.target-conditions-trait .dropdown-item.is-combination,
|
||||
.entity-selector-trait .dropdown-item.is-combination {
|
||||
padding-left: 28px;
|
||||
}
|
||||
.target-conditions-trait .dropdown-item.is-combination .result-name,
|
||||
.entity-selector-trait .dropdown-item.is-combination .result-name {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.target-conditions-trait .dropdown-item.is-parent-product,
|
||||
.entity-selector-trait .dropdown-item.is-parent-product {
|
||||
background: #f8fafc;
|
||||
font-weight: 500;
|
||||
}
|
||||
.target-conditions-trait .no-results,
|
||||
.entity-selector-trait .no-results {
|
||||
display: flex;
|
||||
@@ -3041,46 +3058,9 @@ body > .target-search-dropdown .filter-group-toggle .toggle-name,
|
||||
}
|
||||
body > .target-search-dropdown .filter-group-toggle .toggle-count,
|
||||
.target-search-dropdown .filter-group-toggle .toggle-count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.125rem;
|
||||
color: #6c757d;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
body > .target-search-dropdown .filter-group-toggle .toggle-count i,
|
||||
.target-search-dropdown .filter-group-toggle .toggle-count i {
|
||||
font-size: 10px;
|
||||
color: #25b9d7;
|
||||
}
|
||||
body > .target-search-dropdown .filter-group-toggle .toggle-count.clickable,
|
||||
.target-search-dropdown .filter-group-toggle .toggle-count.clickable {
|
||||
cursor: pointer;
|
||||
padding: 0.125rem 0.25rem;
|
||||
border-radius: 0.2rem;
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
body > .target-search-dropdown .filter-group-toggle .toggle-count.clickable:hover,
|
||||
.target-search-dropdown .filter-group-toggle .toggle-count.clickable:hover {
|
||||
background: rgba(37, 185, 215, 0.1);
|
||||
color: #25b9d7;
|
||||
}
|
||||
body > .target-search-dropdown .filter-group-toggle .toggle-count.clickable:hover i,
|
||||
.target-search-dropdown .filter-group-toggle .toggle-count.clickable:hover i {
|
||||
color: #25b9d7;
|
||||
}
|
||||
body > .target-search-dropdown .filter-group-toggle .toggle-count.clickable.popover-open,
|
||||
.target-search-dropdown .filter-group-toggle .toggle-count.clickable.popover-open {
|
||||
background: #25b9d7;
|
||||
color: #ffffff;
|
||||
}
|
||||
body > .target-search-dropdown .filter-group-toggle .toggle-count.clickable.popover-open i,
|
||||
.target-search-dropdown .filter-group-toggle .toggle-count.clickable.popover-open i {
|
||||
color: #ffffff;
|
||||
}
|
||||
body > .target-search-dropdown .filter-group-toggle .toggle-count.clickable.loading i,
|
||||
.target-search-dropdown .filter-group-toggle .toggle-count.clickable.loading i {
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
body > .target-search-dropdown .filter-chip, body > .target-search-dropdown .filter-attr-chip,
|
||||
body > .target-search-dropdown .filter-feat-chip,
|
||||
.target-search-dropdown .filter-chip,
|
||||
@@ -3201,6 +3181,81 @@ body > .target-search-dropdown .filter-chip.active .chip-count,
|
||||
.target-search-dropdown .active.filter-feat-chip .chip-count {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
body > .target-search-dropdown .filter-chip-wrapper,
|
||||
.target-search-dropdown .filter-chip-wrapper {
|
||||
display: inline-flex;
|
||||
align-items: stretch;
|
||||
border-radius: 0.2rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
body > .target-search-dropdown .filter-chip-wrapper .filter-chip,
|
||||
body > .target-search-dropdown .filter-chip-wrapper .filter-group-toggle,
|
||||
.target-search-dropdown .filter-chip-wrapper .filter-chip,
|
||||
.target-search-dropdown .filter-chip-wrapper .filter-attr-chip,
|
||||
.target-search-dropdown .filter-chip-wrapper .filter-feat-chip,
|
||||
.target-search-dropdown .filter-chip-wrapper .filter-group-toggle {
|
||||
border-radius: 0.2rem 0 0 0.2rem;
|
||||
}
|
||||
body > .target-search-dropdown .filter-chip-wrapper .chip-preview-btn,
|
||||
.target-search-dropdown .filter-chip-wrapper .chip-preview-btn {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
body > .target-search-dropdown .filter-chip-wrapper .chip-preview-btn:focus,
|
||||
.target-search-dropdown .filter-chip-wrapper .chip-preview-btn:focus {
|
||||
outline: none;
|
||||
}
|
||||
body > .target-search-dropdown .filter-chip-wrapper .chip-preview-btn,
|
||||
.target-search-dropdown .filter-chip-wrapper .chip-preview-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 0.375rem;
|
||||
font-size: 10px;
|
||||
color: #6c757d;
|
||||
background: #f1f5f9;
|
||||
border-left: 1px solid #dee2e6;
|
||||
border-radius: 0 0.2rem 0.2rem 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
body > .target-search-dropdown .filter-chip-wrapper .chip-preview-btn:hover,
|
||||
.target-search-dropdown .filter-chip-wrapper .chip-preview-btn:hover {
|
||||
background: rgba(37, 185, 215, 0.1);
|
||||
color: #25b9d7;
|
||||
}
|
||||
body > .target-search-dropdown .filter-chip-wrapper .chip-preview-btn.popover-open,
|
||||
.target-search-dropdown .filter-chip-wrapper .chip-preview-btn.popover-open {
|
||||
background: #25b9d7;
|
||||
color: #ffffff;
|
||||
}
|
||||
body > .target-search-dropdown .filter-chip-wrapper .chip-preview-btn.loading i,
|
||||
.target-search-dropdown .filter-chip-wrapper .chip-preview-btn.loading i {
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
body > .target-search-dropdown .filter-chip-wrapper .filter-chip:last-child,
|
||||
body > .target-search-dropdown .filter-chip-wrapper .filter-group-toggle:last-child,
|
||||
.target-search-dropdown .filter-chip-wrapper .filter-chip:last-child,
|
||||
.target-search-dropdown .filter-chip-wrapper .filter-attr-chip:last-child,
|
||||
.target-search-dropdown .filter-chip-wrapper .filter-feat-chip:last-child,
|
||||
.target-search-dropdown .filter-chip-wrapper .filter-group-toggle:last-child {
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
body > .target-search-dropdown .filter-chip-wrapper .filter-group-toggle.active + .chip-preview-btn,
|
||||
.target-search-dropdown .filter-chip-wrapper .filter-group-toggle.active + .chip-preview-btn {
|
||||
border-left-color: #25b9d7;
|
||||
background: rgba(37, 185, 215, 0.05);
|
||||
}
|
||||
body > .target-search-dropdown .filter-chip-wrapper .filter-group-toggle.has-selection + .chip-preview-btn,
|
||||
.target-search-dropdown .filter-chip-wrapper .filter-group-toggle.has-selection + .chip-preview-btn {
|
||||
border-left-color: #28a745;
|
||||
background: rgba(40, 167, 69, 0.03);
|
||||
}
|
||||
body > .target-search-dropdown .dropdown-content,
|
||||
.target-search-dropdown .dropdown-content {
|
||||
max-height: 400px;
|
||||
@@ -4982,6 +5037,16 @@ body > .target-search-dropdown .dropdown-item:not(:last-child) {
|
||||
.entity-selector-trait .chip-name {
|
||||
word-break: break-word;
|
||||
}
|
||||
.target-conditions-trait .chip-attrs,
|
||||
.entity-selector-trait .chip-attrs {
|
||||
font-size: 0.85em;
|
||||
opacity: 0.7;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.target-conditions-trait .chip-attrs::before,
|
||||
.entity-selector-trait .chip-attrs::before {
|
||||
content: "— ";
|
||||
}
|
||||
.target-conditions-trait .chip-remove,
|
||||
.entity-selector-trait .chip-remove {
|
||||
padding: 0;
|
||||
@@ -7070,6 +7135,42 @@ body > .target-search-dropdown .dropdown-item:not(:last-child) {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.25em 1.25em;
|
||||
}
|
||||
.target-conditions-trait[data-mode=single] .groups-container,
|
||||
.target-conditions-trait .mode-single .groups-container,
|
||||
.entity-selector-trait[data-mode=single] .groups-container,
|
||||
.entity-selector-trait .mode-single .groups-container {
|
||||
padding: 0;
|
||||
}
|
||||
.target-conditions-trait[data-mode=single] .group-body,
|
||||
.target-conditions-trait .mode-single .group-body,
|
||||
.entity-selector-trait[data-mode=single] .group-body,
|
||||
.entity-selector-trait .mode-single .group-body {
|
||||
padding: 0;
|
||||
}
|
||||
.target-conditions-trait[data-mode=single] .group-include,
|
||||
.target-conditions-trait .mode-single .group-include,
|
||||
.entity-selector-trait[data-mode=single] .group-include,
|
||||
.entity-selector-trait .mode-single .group-include {
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
.target-conditions-trait[data-mode=single] .selection-group,
|
||||
.target-conditions-trait .mode-single .selection-group,
|
||||
.entity-selector-trait[data-mode=single] .selection-group,
|
||||
.entity-selector-trait .mode-single .selection-group {
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.target-conditions-trait[data-mode=single] .group-header,
|
||||
.target-conditions-trait .mode-single .group-header,
|
||||
.entity-selector-trait[data-mode=single] .group-header,
|
||||
.entity-selector-trait .mode-single .group-header {
|
||||
display: none;
|
||||
}
|
||||
.target-conditions-trait .condition-match-count,
|
||||
.entity-selector-trait .condition-match-count {
|
||||
display: inline-flex;
|
||||
@@ -8182,6 +8283,20 @@ body > .target-search-dropdown .dropdown-item:not(:last-child) {
|
||||
right: 20px;
|
||||
transform: none;
|
||||
}
|
||||
.target-preview-popover.position-above::before,
|
||||
.target-list-preview-popover.position-above::before {
|
||||
top: auto;
|
||||
bottom: -8px;
|
||||
border-top: 8px solid #dee2e6;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.target-preview-popover.position-above::after,
|
||||
.target-list-preview-popover.position-above::after {
|
||||
top: auto;
|
||||
bottom: -6px;
|
||||
border-top: 6px solid #ffffff;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.preview-header {
|
||||
display: flex;
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user