christianV/Craze-Data-check
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/Craze-Data-check.git synced 2026-08-03 18:15:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

style: move Select All to bottom bar of ColumnFilterPopover

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-04-08 16:59:39 +02:00
parent 89aa222470
commit f3f9f1547f
1 changed files with 21 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ColumnFilterPopover.tsx
+21 -32
View File
@@ -52,31 +52,6 @@ export function ColumnFilterPopover({
/>
</div>
<div className="flex items-center justify-between px-1 border-b border-slate-700/50 pb-2">
<label className="flex items-center gap-2 py-1 px-1.5 hover:bg-slate-700/50 rounded cursor-pointer group">
<div className={cn(
"w-4 h-4 rounded border flex items-center justify-center shrink-0 transition-colors",
isAllSelected ? "bg-blue-600 border-blue-600" : "border-slate-600 bg-slate-900 group-hover:border-slate-500"
)}>
{isAllSelected && <Check className="w-3 h-3 text-white" />}
</div>
<input
type="checkbox"
className="hidden"
checked={isAllSelected}
onChange={() => {
if (isAllSelected) {
onSelectAll([]);
} else {
onSelectAll(uniqueValues);
}
}}
/>
<span className="text-[11px] font-bold text-slate-200">SELECT ALL</span>
</label>
<span className="text-[10px] text-slate-500 font-medium">{selectedValues.length} selected</span>
</div>
<div className="max-h-48 overflow-y-auto space-y-0.5 pr-1 custom-scrollbar">
{filteredValues.map(val => (
<label key={val} className="flex items-center gap-2 p-1.5 hover:bg-slate-700/50 rounded cursor-pointer group">
@@ -101,15 +76,29 @@ export function ColumnFilterPopover({
</div>
<div className="flex items-center justify-between pt-2 border-t border-slate-700 mt-1">
<button
onClick={onClear}
className="text-[10px] font-bold text-slate-400 hover:text-white transition-colors uppercase"
>
Clear
</button>
<div className="flex items-center gap-4">
<button
onClick={() => {
if (isAllSelected) {
onSelectAll([]);
} else {
onSelectAll(uniqueValues);
}
}}
className="text-[11px] font-bold text-slate-400 hover:text-white transition-colors"
>
{isAllSelected ? 'Deselect All' : 'Select All'}
</button>
<button
onClick={onClear}
className="text-[11px] font-bold text-slate-400 hover:text-white transition-colors"
>
Clear Current
</button>
</div>
<button
onClick={onClose}
className="px-4 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-[10px] font-black rounded transition-colors shadow-lg active:scale-95"
className="px-4 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-[10px] font-black rounded transition-colors shadow-lg active:scale-95 uppercase"
>
OK
</button>