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

Move filter icon next to header text in all views

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-04-10 10:05:59 +02:00
parent 19df2d04e4
commit 4e6563d38d
3 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ArticleDetails.tsx
+6 -6
View File
@@ -228,24 +228,24 @@ export function ArticleDetails({ data, onEdit, rowStatuses }: ArticleDetailsProp
className="px-3 py-3 font-medium transition-colors select-none group relative border-r border-slate-700/30" className="px-3 py-3 font-medium transition-colors select-none group relative border-r border-slate-700/30"
style={{ width: columnWidths[col] || 'auto', minWidth: columnWidths[col] || 'auto' }} style={{ width: columnWidths[col] || 'auto', minWidth: columnWidths[col] || 'auto' }}
> >
<div className="flex items-center gap-1 overflow-hidden"> <div className="flex items-center overflow-hidden">
<div className="flex items-center gap-1 cursor-pointer hover:text-white truncate" onClick={() => handleSort(col)}> <span className="flex items-center gap-1 cursor-pointer hover:text-white truncate" onClick={() => handleSort(col)}>
{label} {label}
{sortCol === col && ( {sortCol === col && (
sortDesc ? <ChevronDown className="w-3 h-3 shrink-0" /> : <ChevronUp className="w-3 h-3 shrink-0" /> sortDesc ? <ChevronDown className="w-3 h-3" /> : <ChevronUp className="w-3 h-3" />
)} )}
</div> </span>
<button <button
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setOpenFilterCol(openFilterCol === col ? null : col); setOpenFilterCol(openFilterCol === col ? null : col);
}} }}
className={cn( className={cn(
"p-1 rounded hover:bg-slate-700 transition-colors shrink-0", "p-0.5 rounded hover:bg-slate-700 transition-colors -my-1",
(columnFilters[col]?.length || 0) > 0 ? "text-indigo-400 bg-indigo-400/10" : "text-slate-500 opacity-0 group-hover:opacity-100" (columnFilters[col]?.length || 0) > 0 ? "text-indigo-400 bg-indigo-400/10" : "text-slate-500 opacity-0 group-hover:opacity-100"
)} )}
> >
<Filter className="w-3.5 h-3.5" /> <Filter className="w-3 h-3" />
</button> </button>
</div> </div>
src/components/MatrixView.tsx
+4 -4
View File
@@ -197,8 +197,8 @@ export function MatrixView({ data, headers, rowStatuses }: MatrixViewProps) {
key={index} key={index}
className="px-4 py-3 font-medium border-b border-slate-700 transition-colors select-none group relative" className="px-4 py-3 font-medium border-b border-slate-700 transition-colors select-none group relative"
> >
<div className="flex items-center justify-between gap-2"> <div className="flex items-center overflow-hidden">
<div <span
className="flex items-center gap-1 cursor-pointer hover:text-white" className="flex items-center gap-1 cursor-pointer hover:text-white"
onClick={() => handleSort(index)} onClick={() => handleSort(index)}
> >
@@ -206,14 +206,14 @@ export function MatrixView({ data, headers, rowStatuses }: MatrixViewProps) {
{sortCol === index && ( {sortCol === index && (
sortDesc ? <ChevronDown className="w-3 h-3" /> : <ChevronUp className="w-3 h-3" /> sortDesc ? <ChevronDown className="w-3 h-3" /> : <ChevronUp className="w-3 h-3" />
)} )}
</div> </span>
<button <button
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setOpenFilterCol(openFilterCol === index ? null : index); setOpenFilterCol(openFilterCol === index ? null : index);
}} }}
className={cn( className={cn(
"p-1 rounded hover:bg-slate-700 transition-colors", "p-0.5 rounded hover:bg-slate-700 transition-colors -my-1",
(columnFilters[index]?.length || 0) > 0 ? "text-blue-400 bg-blue-400/10 opacity-100" : "text-slate-500 opacity-0 group-hover:opacity-100" (columnFilters[index]?.length || 0) > 0 ? "text-blue-400 bg-blue-400/10 opacity-100" : "text-slate-500 opacity-0 group-hover:opacity-100"
)} )}
> >
src/components/ProductDescriptions.tsx
+5 -5
View File
@@ -301,20 +301,20 @@ export function ProductDescriptions({ data, headers, asinColumnIndex, onEdit, ro
className="px-4 py-3 font-medium transition-colors select-none group relative border-r border-slate-700/30" className="px-4 py-3 font-medium transition-colors select-none group relative border-r border-slate-700/30"
style={{ width: columnWidths[col] || 'auto', minWidth: columnWidths[col] || 'auto' }} style={{ width: columnWidths[col] || 'auto', minWidth: columnWidths[col] || 'auto' }}
> >
<div className="flex items-center justify-between gap-1 overflow-hidden"> <div className="flex items-center overflow-hidden">
<div className="flex items-center gap-1 cursor-pointer hover:text-white truncate" onClick={() => handleSort(col)}> <span className="flex items-center gap-1 cursor-pointer hover:text-white truncate" onClick={() => handleSort(col)}>
{label} {label}
{sortCol === col && ( {sortCol === col && (
sortDesc ? <ChevronDown className="w-4 h-4 shrink-0" /> : <ChevronUp className="w-4 h-4 shrink-0" /> sortDesc ? <ChevronDown className="w-4 h-4" /> : <ChevronUp className="w-4 h-4" />
)} )}
</div> </span>
<button <button
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setOpenFilterCol(openFilterCol === col ? null : col); setOpenFilterCol(openFilterCol === col ? null : col);
}} }}
className={cn( className={cn(
"p-1 rounded hover:bg-slate-700 transition-colors shrink-0", "p-0.5 rounded hover:bg-slate-700 transition-colors -my-1",
(columnFilters[col]?.length || 0) > 0 ? "text-blue-400 bg-blue-400/10" : "text-slate-500 opacity-0 group-hover:opacity-100" (columnFilters[col]?.length || 0) > 0 ? "text-blue-400 bg-blue-400/10" : "text-slate-500 opacity-0 group-hover:opacity-100"
)} )}
> >