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:
@@ -343,6 +343,16 @@
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.chip-attrs {
|
||||
font-size: 0.85em;
|
||||
opacity: 0.7;
|
||||
margin-left: 2px;
|
||||
|
||||
&::before {
|
||||
content: '— ';
|
||||
}
|
||||
}
|
||||
|
||||
.chip-remove {
|
||||
@include button-reset;
|
||||
display: flex;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -368,6 +368,7 @@
|
||||
// Single mode specific styles
|
||||
.target-conditions-trait.single-mode,
|
||||
.entity-selector-trait.single-mode {
|
||||
// Hide tabs in standalone layout (has separate header, 1 tab is redundant)
|
||||
.target-block-tabs {
|
||||
display: none;
|
||||
}
|
||||
@@ -375,6 +376,11 @@
|
||||
.target-block-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// In form-content layout, always show tabs — they serve as the block title
|
||||
.entity-selector-tabs-row .target-block-tabs {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
// Header action buttons
|
||||
|
||||
@@ -931,6 +931,36 @@
|
||||
background-size: 1.25em 1.25em;
|
||||
}
|
||||
|
||||
// Single mode — strip padding, borders, backgrounds for clean single-selection UI
|
||||
&[data-mode=single],
|
||||
.mode-single {
|
||||
.groups-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.group-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.group-include {
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.selection-group {
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.group-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Condition match count badge
|
||||
.condition-match-count {
|
||||
display: inline-flex;
|
||||
|
||||
@@ -66,6 +66,23 @@
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Positioned above trigger - arrow pointing down
|
||||
&.position-above {
|
||||
&::before {
|
||||
top: auto;
|
||||
bottom: -8px;
|
||||
border-top: 8px solid $es-border-color;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: auto;
|
||||
bottom: -6px;
|
||||
border-top: 6px solid $es-white;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
|
||||
Reference in New Issue
Block a user