Style: integrated chips filter toolbar design

- Wrap filter input in pill-shaped container (.chips-filter-group)
- Remove hard border separation between toolbar and chips
- Make toolbar feel like part of the chips area with shared background
- Smaller, subtler count badge and clear button
- Clear button styled as danger pill that fills on hover
- Responsive: hide clear text on small screens

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-31 19:15:56 +00:00
parent 5ee4617cb1
commit b7054f11f9
7 changed files with 70 additions and 39 deletions

View File

@@ -3953,14 +3953,16 @@
var trans = this.config.trans || {};
var $picker = $chips.closest('.value-picker');
// Create wrapper structure - simple inline toolbar
// Create wrapper structure - integrated filter toolbar
var wrapperHtml = '<div class="chips-wrapper">' +
'<div class="chips-toolbar">' +
'<span class="chips-filter-group">' +
'<i class="icon-search"></i>' +
'<input type="text" class="chips-search-input" placeholder="' + (trans.filter || 'Filter') + '...">' +
'</span>' +
'<span class="chips-count"></span>' +
'<button type="button" class="btn-chips-clear" title="' + (trans.clear_all || 'Clear all') + '">' +
'<i class="icon-trash"></i> <span class="clear-text">' + (trans.clear_all || 'Clear all') + '</span>' +
'<i class="icon-trash"></i> <span class="clear-text">' + (trans.clear || 'Clear') + '</span>' +
'</button>' +
'</div>' +
'<div class="chips-load-more" style="display:none;"></div>' +