Add hierarchical tree view for category selection
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:
342
sources/scss/components/_tree.scss
Normal file
342
sources/scss/components/_tree.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user