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

Add hierarchical tree view for category selection

Browse Source 
Features:
- Tree view mode for categories with expand/collapse
- Product count badges with clickable preview popover
- Select parent with all children button
- Client-side tree filtering (refine search)
- Keyboard shortcuts: Ctrl+A (select all), Ctrl+D (clear)
- View mode switching between tree/list/columns
- Tree view as default for categories, respects user preference

Backend:
- Add previewCategoryProducts and previewCategoryPages AJAX handlers
- Support pagination and filtering in category previews

Styling:
- Consistent count-badge styling across tree and other views
- Loading and popover-open states for count badges

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
myprestarocks
2026-01-31 15:03:51 +01:00
parent b79a89bbb4
commit 7d79273743
37 changed files with 4620 additions and 1913 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
sources/scss/components/_chips.scss
View File

@@ -9,19 +9,169 @@
.target-conditions-trait,
.entity-selector-trait {
// Chips container wrapper with toolbar
.chips-wrapper {
display: flex;
flex-direction: column;
margin-top: $es-spacing-sm;
background: $es-slate-50;
border: 1px solid $es-border-color;
border-radius: $es-radius-md;
overflow: hidden;
}
// Chips toolbar - search and actions
.chips-toolbar {
display: none; // Hidden by default, shown via JS when chips exist
align-items: center;
gap: $es-spacing-sm;
padding: $es-spacing-sm $es-spacing-md;
background: $es-white;
border-bottom: 1px solid $es-border-color;
&.has-chips {
display: flex;
}
// Search icon
> i {
color: $es-text-muted;
font-size: 14px;
flex-shrink: 0;
}
}
.chips-search-input,
input.chips-search-input,
input.chips-search-input[type="text"] {
flex: 1 !important;
min-width: 80px !important;
max-width: none !important;
width: auto !important;
height: auto !important;
padding: 0 !important;
border: none !important;
border-bottom: 1px solid transparent !important;
border-radius: 0 !important;
background: transparent !important;
font-size: $es-font-size-sm !important;
color: $es-text-primary;
box-shadow: none !important;
transition: border-color $es-transition-fast;
&:focus {
outline: none !important;
border: none !important;
border-bottom: 1px solid $es-primary !important;
box-shadow: none !important;
}
&::placeholder {
color: $es-text-muted;
}
}
.chips-count {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.625rem;
background: $es-primary;
color: $es-white;
font-size: $es-font-size-xs;
font-weight: $es-font-weight-semibold;
border-radius: $es-radius-full;
white-space: nowrap;
&.has-filter {
background: $es-cyan-500;
}
.count-filtered {
font-weight: $es-font-weight-bold;
}
.count-separator {
opacity: 0.7;
}
}
.chips-actions {
display: flex;
align-items: center;
gap: $es-spacing-xs;
margin-left: auto;
}
.btn-chips-clear {
@include button-reset;
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
color: $es-white;
font-size: $es-font-size-xs;
font-weight: $es-font-weight-semibold;
background: $es-danger;
border-radius: $es-radius-sm;
transition: all $es-transition-fast;
&:hover {
background: darken($es-danger, 8%);
}
i {
font-size: 11px;
}
}
// Chips container
.entity-chips {
display: flex;
flex-wrap: wrap;
gap: $es-spacing-xs;
padding: $es-spacing-sm 0;
min-height: 32px;
padding: $es-spacing-md;
min-height: 40px;
max-height: 300px;
overflow-y: auto;
&:empty {
display: none;
}
}
// Load more button
.chips-load-more {
display: flex;
align-items: center;
justify-content: center;
padding: $es-spacing-sm $es-spacing-md;
background: $es-white;
border-top: 1px solid $es-border-color;
.btn-load-more {
@include button-reset;
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.5rem 1rem;
color: $es-white;
font-size: $es-font-size-sm;
font-weight: $es-font-weight-semibold;
background: $es-primary;
border-radius: $es-radius-sm;
transition: all $es-transition-fast;
&:hover {
background: $es-primary-hover;
}
i {
font-size: 12px;
}
}
}
// Individual chip
.entity-chip {
display: inline-flex;
@@ -33,7 +183,6 @@
font-size: $es-font-size-xs;
font-weight: $es-font-weight-medium;
border-radius: $es-radius-full;
max-width: 200px;
transition: all $es-transition-fast;
&:hover {
@@ -44,6 +193,12 @@
&.has-image {
padding-left: 0.25rem;
}
// Hidden by search filter or pagination
&.chip-filtered-out,
&.chip-paginated-out {
display: none;
}
}
.chip-image {
@@ -55,14 +210,26 @@
}
.chip-icon {
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: $es-text-muted;
flex-shrink: 0;
// Product/entity images inside chip
img {
width: 20px;
height: 20px;
object-fit: cover;
border-radius: $es-radius-sm;
}
}
.chip-text,
.chip-name {
@include text-truncate;
// Show full name, no truncation
word-break: break-word;
}
.chip-remove {

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

@@ -117,7 +117,7 @@
// Results container
.dropdown-results {
padding: $es-spacing-sm;
padding: 0 $es-spacing-sm;
}
// Results count text
@@ -609,80 +609,7 @@
}
}
.tree-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
color: $es-text-muted;
cursor: pointer;
transition: transform $es-transition-fast;
i {
font-size: 12px;
}
}
.tree-toggle-placeholder {
width: 16px;
height: 16px;
}
.btn-select-children {
@include button-reset;
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
color: $es-primary;
border-radius: $es-radius-sm;
transition: all $es-transition-fast;
&:hover {
background: $es-primary-light;
}
i {
font-size: 12px;
}
}
.btn-select-children-placeholder {
width: 18px;
height: 18px;
}
.tree-checkbox {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 16px;
height: 16px;
border: 2px solid $es-border-dark;
border-radius: 3px;
transition: all $es-transition-fast;
i {
display: none;
font-size: 10px;
color: $es-white;
}
}
.tree-icon {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
color: $es-text-muted;
i {
font-size: 14px;
}
}
// tree-toggle, btn-select-children, tree-checkbox, tree-icon styles in _tree.scss
.tree-info {
display: flex;
@@ -1521,14 +1448,11 @@ body > .target-search-dropdown,
color: $es-text-muted;
}
.dropdown-footer-actions {
display: flex;
align-items: center;
gap: $es-spacing-sm;
}
.btn-cancel-dropdown {
@include button-reset;
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.375rem 0.75rem;
font-size: $es-font-size-sm;
color: $es-text-secondary;
@@ -1539,6 +1463,12 @@ body > .target-search-dropdown,
&:hover {
background: $es-bg-hover;
color: $es-danger;
border-color: $es-danger;
}
i {
font-size: 10px;
}
kbd {
@@ -1566,6 +1496,11 @@ body > .target-search-dropdown,
&:hover {
background: $es-primary-hover;
border-color: $es-primary-hover;
}
i {
font-size: 10px;
}
kbd {
@@ -1702,7 +1637,7 @@ body > .target-search-dropdown,
// Results container
.dropdown-results {
padding: $es-spacing-sm;
padding: 0 $es-spacing-sm;
background: $es-white;
min-height: 200px;
}
@@ -1768,16 +1703,16 @@ body > .target-search-dropdown,
}
}
// 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); }
// View mode classes (applied to dropdown container) - no gap/padding for shared borders
&.view-cols-2 .dropdown-results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; padding: 0; border-top: 1px solid $es-border-color; border-left: 1px solid $es-border-color; }
&.view-cols-3 .dropdown-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 0; border-top: 1px solid $es-border-color; border-left: 1px solid $es-border-color; }
&.view-cols-4 .dropdown-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 0; border-top: 1px solid $es-border-color; border-left: 1px solid $es-border-color; }
&.view-cols-5 .dropdown-results { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; padding: 0; border-top: 1px solid $es-border-color; border-left: 1px solid $es-border-color; }
&.view-cols-6 .dropdown-results { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; padding: 0; border-top: 1px solid $es-border-color; border-left: 1px solid $es-border-color; }
&.view-cols-7 .dropdown-results { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; padding: 0; border-top: 1px solid $es-border-color; border-left: 1px solid $es-border-color; }
&.view-cols-8 .dropdown-results { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0; padding: 0; border-top: 1px solid $es-border-color; border-left: 1px solid $es-border-color; }
// Grid view item styling (compact cards)
// Grid view item styling (compact cards with shared borders)
&.view-cols-2,
&.view-cols-3,
&.view-cols-4,
@@ -1789,9 +1724,11 @@ body > .target-search-dropdown,
flex-direction: column;
align-items: center;
text-align: center;
padding: 0;
border: 1px solid $es-border-color;
border-radius: $es-radius-sm;
padding: $es-spacing-sm;
border: none;
border-right: 1px solid $es-border-color;
border-bottom: 1px solid $es-border-color;
border-radius: 0;
.result-checkbox {
position: absolute;
@@ -1861,6 +1798,15 @@ body > .target-search-dropdown,
}
}
// Remove right border from last item in each row (per column count)
&.view-cols-2 .dropdown-results .dropdown-item:nth-child(2n) { border-right: none; }
&.view-cols-3 .dropdown-results .dropdown-item:nth-child(3n) { border-right: none; }
&.view-cols-4 .dropdown-results .dropdown-item:nth-child(4n) { border-right: none; }
&.view-cols-5 .dropdown-results .dropdown-item:nth-child(5n) { border-right: none; }
&.view-cols-6 .dropdown-results .dropdown-item:nth-child(6n) { border-right: none; }
&.view-cols-7 .dropdown-results .dropdown-item:nth-child(7n) { border-right: none; }
&.view-cols-8 .dropdown-results .dropdown-item:nth-child(8n) { border-right: none; }
// Smaller items for higher column counts
&.view-cols-5,
&.view-cols-6,
@@ -2175,80 +2121,7 @@ body > .target-search-dropdown,
}
}
.tree-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
color: $es-text-muted;
cursor: pointer;
transition: transform $es-transition-fast;
i {
font-size: 12px;
}
}
.tree-toggle-placeholder {
width: 16px;
height: 16px;
}
.btn-select-children {
@include button-reset;
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
color: $es-primary;
border-radius: $es-radius-sm;
transition: all $es-transition-fast;
&:hover {
background: $es-primary-light;
}
i {
font-size: 12px;
}
}
.btn-select-children-placeholder {
width: 18px;
height: 18px;
}
.tree-checkbox {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 16px;
height: 16px;
border: 2px solid $es-border-dark;
border-radius: 3px;
transition: all $es-transition-fast;
i {
display: none;
font-size: 10px;
color: $es-white;
}
}
.tree-icon {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
color: $es-text-muted;
i {
font-size: 14px;
}
}
// tree-toggle, btn-select-children, tree-checkbox, tree-icon styles in _tree.scss
.tree-info {
display: flex;
@@ -2280,7 +2153,7 @@ body > .target-search-dropdown,
.dropdown-results {
max-height: 400px;
overflow-y: auto;
padding: $es-spacing-sm;
padding: 0 $es-spacing-sm;
@include custom-scrollbar;
}
@@ -2498,6 +2371,7 @@ body > .target-search-dropdown,
.entity-search-icon {
color: $es-text-muted;
flex-shrink: 0;
margin-left: $es-spacing-xs;
}
// Override Bootstrap/parent form input styles

169
sources/scss/components/_groups.scss
View File

@@ -319,22 +319,13 @@
border-top: 1px dashed $es-border-color;
}
// Legacy exclude-rows (if used elsewhere)
.exclude-rows {
display: flex;
flex-direction: column;
gap: $es-spacing-sm;
}
.exclude-row {
display: flex;
align-items: flex-start;
gap: $es-spacing-sm;
padding: $es-spacing-sm;
background: rgba($es-danger, 0.05);
border: 1px solid rgba($es-danger, 0.2);
border-radius: $es-radius-md;
}
.exclude-row-content {
flex: 1;
}
@@ -534,9 +525,13 @@
}
}
// Group include section
// Group include section - green accent to distinguish from exclude
.group-include {
margin-bottom: $es-spacing-md;
padding: $es-spacing-sm;
background: rgba($es-success, 0.03);
border: 1px solid rgba($es-success, 0.2);
border-radius: $es-radius-md;
}
.section-row {
@@ -565,32 +560,81 @@
cursor: pointer;
}
// Lock indicator for method selector (when excludes are present)
.selector-locked {
.include-method-select {
opacity: 0.7;
cursor: not-allowed;
}
}
.lock-indicator {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: $es-warning;
cursor: help;
i {
font-size: 14px;
}
.mpr-tooltip {
display: none;
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
padding: $es-spacing-xs $es-spacing-sm;
background: $es-slate-800;
color: $es-white;
font-size: $es-font-size-xs;
font-weight: $es-font-weight-normal;
white-space: nowrap;
border-radius: $es-radius-sm;
z-index: 100;
}
&:hover .mpr-tooltip {
display: block;
}
}
// Group excludes section
.group-excludes {
margin-top: $es-spacing-md;
&.has-excludes {
padding-top: $es-spacing-md;
border-top: 1px dashed $es-border-color;
}
}
.except-separator {
display: flex;
align-items: center;
margin-bottom: $es-spacing-sm;
gap: $es-spacing-sm;
margin: 0 0 $es-spacing-sm 0;
// Lines on both sides
&::before,
&::after {
content: '';
flex: 1;
height: 1px;
background: rgba($es-danger, 0.3);
}
}
.except-label {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.5rem;
padding: 0.25rem 0.75rem;
background: $es-danger-light;
color: $es-danger;
font-size: $es-font-size-xs;
font-weight: $es-font-weight-semibold;
border-radius: $es-radius-sm;
border-radius: $es-radius-full;
white-space: nowrap;
flex-shrink: 0;
i {
font-size: 10px;
@@ -604,17 +648,36 @@
}
.exclude-row {
display: flex;
flex-direction: column;
padding: $es-spacing-sm;
background: rgba($es-danger, 0.03);
border: 1px solid rgba($es-danger, 0.15);
border-radius: $es-radius-md;
// Value picker inside exclude row - full width
.value-picker {
width: 100%;
margin-top: $es-spacing-sm;
}
}
.exclude-header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: $es-spacing-sm;
margin-bottom: $es-spacing-sm;
width: 100%;
.method-selector-wrapper {
flex: 1;
}
// Delete button at the far right
.btn-remove-exclude-row {
flex-shrink: 0;
margin-left: auto;
}
}
.btn-remove-exclude-row {
@@ -680,9 +743,14 @@
gap: 0.375rem;
}
// Common height for all modifier controls
$modifier-height: 26px;
.group-modifier-limit {
width: 60px;
padding: 0.25rem 0.5rem;
width: 50px;
max-width: 50px;
height: $modifier-height;
padding: 0 0.375rem;
font-size: $es-font-size-xs;
text-align: center;
border: 1px solid $es-border-color;
@@ -694,8 +762,59 @@
}
}
// Sort modifier - input group style (select + button glued together)
.modifier-sort {
gap: 0; // Remove gap to glue select + button together
.modifier-label {
margin-right: 0.375rem; // Keep space between label and input group
}
.group-modifier-sort {
height: $modifier-height;
padding: 0 0.5rem;
font-size: $es-font-size-xs;
border: 1px solid $es-border-color;
border-radius: $es-radius-sm 0 0 $es-radius-sm;
border-right: none;
cursor: pointer;
&:focus {
border-color: $es-primary;
outline: none;
position: relative;
z-index: 1;
}
}
.btn-sort-dir {
@include button-reset;
display: flex;
align-items: center;
justify-content: center;
width: $modifier-height;
height: $modifier-height;
color: $es-text-muted;
background: $es-slate-100;
border: 1px solid $es-border-color;
border-radius: 0 $es-radius-sm $es-radius-sm 0;
transition: all $es-transition-fast;
&:hover {
background: $es-slate-200;
color: $es-text-secondary;
}
i {
font-size: 11px;
}
}
}
// Fallback for elements outside .modifier-sort context
.group-modifier-sort {
padding: 0.25rem 0.5rem;
height: $modifier-height;
padding: 0 0.5rem;
font-size: $es-font-size-xs;
border: 1px solid $es-border-color;
border-radius: $es-radius-sm;
@@ -712,8 +831,8 @@
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
width: $modifier-height;
height: $modifier-height;
color: $es-text-muted;
border: 1px solid $es-border-color;
border-radius: $es-radius-sm;

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

@@ -494,3 +494,92 @@
max-width: 100px;
}
}
// =============================================================================
// Total Summary Popover (header total badge click)
// =============================================================================
.total-preview-popover {
min-width: 240px;
max-width: 320px;
.preview-popover-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: $es-spacing-sm $es-spacing-md;
background: $es-bg-header;
border-bottom: 1px solid $es-border-color;
.preview-popover-title {
font-weight: $es-font-weight-semibold;
color: $es-text-primary;
font-size: $es-font-size-sm;
}
.preview-popover-count {
font-size: $es-font-size-xs;
color: $es-text-muted;
}
}
.preview-popover-body {
padding: $es-spacing-xs 0;
}
.total-summary-list {
list-style: none;
margin: 0;
padding: 0;
}
.total-summary-item {
display: flex;
align-items: center;
gap: $es-spacing-sm;
padding: $es-spacing-sm $es-spacing-md;
cursor: pointer;
transition: background-color 0.15s ease;
&:hover {
background: $es-slate-50;
}
i {
width: 18px;
text-align: center;
color: $es-text-muted;
font-size: 14px;
}
.summary-item-label {
flex: 1;
font-size: $es-font-size-sm;
color: $es-text-primary;
}
.summary-item-count {
font-size: $es-font-size-sm;
font-weight: $es-font-weight-semibold;
color: $es-primary;
background: rgba($es-primary, 0.1);
padding: 2px 8px;
border-radius: $es-radius-sm;
}
}
}
// Make trait-total-count clickable
.trait-total-count {
cursor: pointer;
transition: all 0.15s ease;
&:hover {
opacity: 0.8;
}
&.popover-open {
opacity: 0.9;
}
}

21
sources/scss/components/_method-dropdown.scss
View File

@@ -82,14 +82,25 @@
// Hidden select (for form submission)
.method-select-hidden {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
position: absolute !important;
opacity: 0 !important;
pointer-events: none !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
}
// Global fallback for hidden method selects
.method-select-hidden {
position: absolute !important;
opacity: 0 !important;
pointer-events: none !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
// =============================================================================
// Method Dropdown Menu (appended to body, outside trait wrappers)
// =============================================================================

38
sources/scss/components/_tooltip.scss
View File

@@ -109,44 +109,6 @@
}
}
// =============================================================================
// MPR Icon (SVG mask icons)
// =============================================================================
.mpr-icon {
display: inline-block;
width: 16px;
height: 16px;
background-color: $es-slate-600;
vertical-align: middle;
cursor: pointer;
transition: background-color 0.2s;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
&:hover {
background-color: #5bc0de;
}
&.link {
background-color: #5bc0de;
&:hover {
background-color: #337ab7;
}
}
}
// Info icon
.mpr-icon.icon-info {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2.5H5A2.5 2.5 0 0 0 2.5 5v6A2.5 2.5 0 0 0 5 13.5h6a2.5 2.5 0 0 0 2.5-2.5V5A2.5 2.5 0 0 0 11 2.5ZM5 1a4 4 0 0 0-4 4v6a4 4 0 0 0 4 4h6a4 4 0 0 0 4-4V5a4 4 0 0 0-4-4H5Z' fill='%23414552'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.25 8A.75.75 0 0 1 7 7.25h1.25A.75.75 0 0 1 9 8v3.5a.75.75 0 0 1-1.5 0V8.75H7A.75.75 0 0 1 6.25 8Z' fill='%23414552'/%3E%3Cpath d='M6.75 5a1.25 1.25 0 1 1 2.5 0 1.25 1.25 0 0 1-2.5 0Z' fill='%23414552'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2.5H5A2.5 2.5 0 0 0 2.5 5v6A2.5 2.5 0 0 0 5 13.5h6a2.5 2.5 0 0 0 2.5-2.5V5A2.5 2.5 0 0 0 11 2.5ZM5 1a4 4 0 0 0-4 4v6a4 4 0 0 0 4 4h6a4 4 0 0 0 4-4V5a4 4 0 0 0-4-4H5Z' fill='%23414552'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.25 8A.75.75 0 0 1 7 7.25h1.25A.75.75 0 0 1 9 8v3.5a.75.75 0 0 1-1.5 0V8.75H7A.75.75 0 0 1 6.25 8Z' fill='%23414552'/%3E%3Cpath d='M6.75 5a1.25 1.25 0 1 1 2.5 0 1.25 1.25 0 0 1-2.5 0Z' fill='%23414552'/%3E%3C/svg%3E");
}
// =============================================================================
// Tooltip Content Styling
// =============================================================================

342
sources/scss/components/_tree.scss Normal file
View File

@@ -0,0 +1,342 @@
/**
* Category Tree Component
* Hierarchical tree view for category selection inside dropdown
*/
@use '../variables' as *;
@use '../mixins' as *;
// Category tree container (inside dropdown)
.category-tree {
display: flex;
flex-direction: column;
}
// Tree toolbar inside dropdown
.category-tree .tree-toolbar {
display: flex;
align-items: center;
gap: $es-spacing-sm;
padding: $es-spacing-xs $es-spacing-sm;
background: $es-slate-50;
border-bottom: 1px solid $es-border-light;
flex-shrink: 0;
.btn-expand-all,
.btn-collapse-all {
@include button-reset;
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: $es-spacing-xs $es-spacing-sm;
font-size: $es-font-size-xs;
font-weight: $es-font-weight-medium;
color: $es-text-secondary;
background: $es-white;
border: 1px solid $es-border-color;
border-radius: $es-radius-sm;
transition: all $es-transition-fast;
&:hover {
background: $es-slate-100;
border-color: $es-slate-300;
}
i {
font-size: 12px;
}
}
}
// Tree items container
.category-tree .tree-items {
padding: 0;
}
// Tree item
.tree-item {
display: flex;
align-items: center;
gap: $es-spacing-xs;
padding: $es-spacing-xs $es-spacing-sm;
cursor: pointer;
transition: background $es-transition-fast;
border-radius: 0;
&:hover {
background: $es-slate-100;
}
&.selected {
background: $es-primary-light;
.tree-name {
font-weight: $es-font-weight-semibold;
color: $es-primary;
}
.tree-checkbox {
color: $es-primary;
i {
opacity: 1;
}
}
}
&.inactive {
opacity: 0.6;
.tree-name {
font-style: italic;
}
}
&.filtered-out {
display: none;
}
&.filter-match {
background: $es-warning-light;
&.selected {
background: $es-primary-light;
}
}
}
// All tree element styles nested under .category-tree for specificity
.category-tree {
// Tree indentation
.tree-indent {
flex-shrink: 0;
}
// Tree toggle (expand/collapse)
.tree-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 12px;
height: 12px;
box-sizing: border-box;
color: $es-text-secondary;
flex-shrink: 0;
border-radius: $es-radius-sm;
transition: all $es-transition-fast;
cursor: pointer;
&:hover {
background: $es-slate-200;
color: $es-text-primary;
}
&.tree-leaf {
cursor: default;
visibility: hidden;
&:hover {
background: transparent;
}
}
i {
font-size: 10px;
transition: transform $es-transition-fast;
}
}
.tree-item.collapsed > .tree-toggle i {
transform: rotate(-90deg);
}
// Tree checkbox indicator - 12x12 to match PrestaShop admin standards
.tree-checkbox {
display: flex;
align-items: center;
justify-content: center;
width: 12px;
height: 12px;
box-sizing: border-box;
flex-shrink: 0;
border: 1px solid $es-border-color;
border-radius: 2px;
background: $es-white;
i {
font-size: 8px;
opacity: 0;
color: $es-white;
transition: opacity $es-transition-fast;
}
}
.tree-item.selected .tree-checkbox {
background: $es-primary;
border-color: $es-primary;
i {
opacity: 1;
}
}
// Tree icon
.tree-icon {
display: flex;
align-items: center;
justify-content: center;
width: 12px;
height: 12px;
box-sizing: border-box;
color: $es-text-muted;
flex-shrink: 0;
i {
font-size: 12px; // match visual weight of other icons
}
}
.tree-item.selected .tree-icon {
color: $es-primary;
}
// Tree name
.tree-name {
flex: 1;
font-size: $es-font-size-sm;
color: $es-text-primary;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// Tree product/page count with preview
.tree-count {
@include count-badge($es-primary);
height: 18px;
min-width: 18px;
padding: 0 $es-spacing-sm;
i {
font-size: 10px;
}
&.clickable {
&.loading {
pointer-events: none;
i {
animation: spin 1s linear infinite;
}
}
&.popover-open {
background: darken($es-primary, 10%);
}
}
}
// Select children button - positioned on the left next to toggle
.btn-select-children {
@include button-reset;
display: inline-flex;
align-items: center;
justify-content: center;
width: 12px;
height: 12px;
box-sizing: border-box;
color: $es-text-muted;
border-radius: $es-radius-sm;
opacity: 0.3;
transition: all $es-transition-fast;
flex-shrink: 0;
i {
font-size: 14px; // larger to visually match other icons
}
&:hover {
color: $es-primary;
opacity: 1;
}
}
.tree-item:hover .btn-select-children {
opacity: 0.6;
}
// Tree badge (inactive, etc.)
.tree-badge {
display: inline-flex;
align-items: center;
padding: 0.125rem $es-spacing-xs;
font-size: 9px;
font-weight: $es-font-weight-semibold;
text-transform: uppercase;
letter-spacing: 0.025em;
border-radius: $es-radius-sm;
flex-shrink: 0;
&.inactive {
color: $es-warning;
background: $es-warning-light;
}
}
// Tree children container
.tree-children {
display: block;
&.filter-expanded {
display: block !important;
}
}
.tree-item.collapsed + .tree-children {
display: none;
}
// Filtering - must be inside .category-tree for specificity
.tree-item.filtered-out {
display: none !important;
}
} // end .category-tree
// Loading/empty/error states
.category-tree .tree-loading,
.category-tree .dropdown-empty,
.category-tree .dropdown-error {
display: flex;
align-items: center;
justify-content: center;
padding: $es-spacing-xl;
color: $es-text-muted;
font-size: $es-font-size-sm;
i {
margin-right: $es-spacing-sm;
}
}
.category-tree .dropdown-error {
color: $es-danger;
}
// Tree view mode in dropdown
.target-search-dropdown.view-tree {
.dropdown-results {
padding: 0;
}
.category-tree {
max-height: 100%;
overflow-y: auto;
@include custom-scrollbar;
}
.tree-items {
max-height: calc(100% - 40px);
overflow-y: auto;
@include custom-scrollbar;
}
}

31
sources/scss/components/_value-picker.scss
View File

@@ -42,10 +42,16 @@
}
}
// Separation between chips and search box
.chips-wrapper + .entity-search-box {
margin-top: $es-spacing-md;
}
.entity-search-icon {
color: $es-text-muted;
font-size: 14px;
flex-shrink: 0;
margin-left: $es-spacing-xs;
}
// Override parent form's max-width on search input
@@ -85,6 +91,31 @@
}
}
// Browse tree button (for categories)
.btn-browse-tree {
@include button-reset;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin-left: auto;
color: $es-primary;
background: $es-primary-light;
border-radius: $es-radius-sm;
flex-shrink: 0;
transition: all $es-transition-fast;
&:hover {
background: $es-primary;
color: $es-white;
}
i {
font-size: 14px;
}
}
// Numeric range box
.numeric-range-box,
.multi-range-input-row {