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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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>' +

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long