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

Feature: enhanced chips toolbar with sorting and load select

Browse Source 
Chips toolbar improvements:
- Filter input now uses all available space (flex: 1)
- Added sort dropdown: Order added, Name A-Z, Name Z-A
- Changed "Show X more" button to select dropdown pattern
  - Load 20, 50, 100, or All
  - Shows remaining count
- Collapse button to return to default view

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
myprestarocks
2026-01-31 19:44:56 +00:00
parent b7054f11f9
commit acbcf55b1c
7 changed files with 230 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -34,11 +34,13 @@
}
}
// Filter input styled as a search chip
// Filter input styled as a search chip - takes available space
.chips-filter-group {
display: flex;
align-items: center;
gap: 0.25rem;
flex: 1; // Take available space
min-width: 0; // Allow shrinking
padding: 0.25rem 0.5rem;
background: $es-white;
border: 1px solid $es-border-color;
@@ -63,8 +65,8 @@
input.chips-search-input[type="text"] {
flex: 1 !important;
min-width: 60px !important;
max-width: 120px !important;
width: auto !important;
max-width: none !important; // No max - use available space
width: 100% !important;
height: auto !important;
padding: 0.125rem 0 !important;
border: none !important;
@@ -86,6 +88,34 @@
}
}
// Sort dropdown for chips
.chips-sort-select,
select.chips-sort-select {
appearance: none;
padding: 0.25rem 1.5rem 0.25rem 0.5rem !important;
border: 1px solid $es-border-color !important;
border-radius: $es-radius-full !important;
background: $es-white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23666' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 0.5rem center !important;
background-size: 8px !important;
font-size: 11px !important;
color: $es-text-secondary;
cursor: pointer;
transition: all $es-transition-fast;
height: auto !important;
min-height: 0 !important;
line-height: 1.2 !important;
&:hover {
border-color: $es-primary !important;
}
&:focus {
outline: none !important;
border-color: $es-primary !important;
box-shadow: 0 0 0 2px rgba($es-primary, 0.1) !important;
}
}
// Count badge - smaller, pill style
.chips-count {
display: inline-flex;
@@ -167,36 +197,54 @@
}
}
// Load more button
// Load more section with select dropdown
.chips-load-more {
display: flex;
align-items: center;
justify-content: center;
gap: $es-spacing-sm;
padding: $es-spacing-sm $es-spacing-md;
background: $es-white;
border-top: 1px solid $es-border-color;
background: transparent;
border-top: 1px dashed $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;
.load-more-label {
font-size: $es-font-size-xs;
color: $es-text-muted;
}
.load-more-select,
select.load-more-select {
appearance: none;
padding: 0.25rem 1.75rem 0.25rem 0.5rem !important;
border: 1px solid $es-border-color !important;
border-radius: $es-radius-sm !important;
background: $es-white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23666' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 0.5rem center !important;
background-size: 8px !important;
font-size: $es-font-size-xs !important;
font-weight: $es-font-weight-medium;
color: $es-primary;
cursor: pointer;
transition: all $es-transition-fast;
height: auto !important;
min-height: 0 !important;
line-height: 1.3 !important;
&:hover {
background: $es-primary-hover;
border-color: $es-primary !important;
background-color: $es-primary-light !important;
}
i {
font-size: 12px;
&:focus {
outline: none !important;
border-color: $es-primary !important;
box-shadow: 0 0 0 2px rgba($es-primary, 0.1) !important;
}
}
.load-more-remaining {
font-size: $es-font-size-xs;
color: $es-text-muted;
}
}
// Individual chip