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

Reposition granular sync buttons to the left of the values in Dimensions view

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-03-29 17:54:22 +02:00
parent c67fcadb48
commit 7a86a8e64b
1 changed files with 36 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DimensionsView.tsx
+15 -9
View File
@@ -278,46 +278,52 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
{row[COLUMNS.INNER_L] || '-'} × {row[COLUMNS.INNER_W] || '-'} × {row[COLUMNS.INNER_H] || '-'} {row[COLUMNS.INNER_L] || '-'} × {row[COLUMNS.INNER_W] || '-'} × {row[COLUMNS.INNER_H] || '-'}
</td> </td>
<td className={cn( <td className={cn(
"px-4 py-3 font-mono relative", "px-4 py-3 font-mono",
group.discrepancies.outer ? "text-amber-300" : "text-slate-400" group.discrepancies.outer ? "text-amber-300" : "text-slate-400"
)}> )}>
<span>{row[COLUMNS.OUTER_L] || '-'} × {row[COLUMNS.OUTER_W] || '-'} × {row[COLUMNS.OUTER_H] || '-'}</span> <div className="flex items-center gap-2 group/cell">
<button <button
onClick={() => handleSyncField(group, row, 'outer')} onClick={() => handleSyncField(group, row, 'outer')}
disabled={syncing?.key === group.key} disabled={syncing?.key === group.key}
title="Apply these Outer Dims to all in group" title="Apply these Outer Dims to all in group"
className="absolute right-1 top-1/2 -translate-y-1/2 p-1 hover:bg-emerald-600/20 text-slate-600 hover:text-emerald-400 rounded opacity-0 group-hover:opacity-100 transition-opacity" className="p-1 hover:bg-emerald-600/20 text-slate-600 hover:text-emerald-400 rounded opacity-0 group-hover:opacity-100 transition-opacity"
> >
{syncing?.key === group.key && syncing?.field === 'outer' ? <Loader2 className="w-3 h-3 animate-spin" /> : <Layers className="w-3 h-3" />} {syncing?.key === group.key && syncing?.field === 'outer' ? <Loader2 className="w-3 h-3 animate-spin" /> : <Layers className="w-3 h-3" />}
</button> </button>
<span>{row[COLUMNS.OUTER_L] || '-'} × {row[COLUMNS.OUTER_W] || '-'} × {row[COLUMNS.OUTER_H] || '-'}</span>
</div>
</td> </td>
<td className={cn( <td className={cn(
"px-4 py-3 relative", "px-4 py-3",
group.discrepancies.units ? "text-amber-300 font-bold" : "text-slate-400" group.discrepancies.units ? "text-amber-300 font-bold" : "text-slate-400"
)}> )}>
<span>{row[COLUMNS.UNITS_OUTER] || '-'}</span> <div className="flex items-center gap-2 group/cell">
<button <button
onClick={() => handleSyncField(group, row, 'units')} onClick={() => handleSyncField(group, row, 'units')}
disabled={syncing?.key === group.key} disabled={syncing?.key === group.key}
title="Apply this Units/Outer to all in group" title="Apply this Units/Outer to all in group"
className="absolute right-1 top-1/2 -translate-y-1/2 p-1 hover:bg-emerald-600/20 text-slate-600 hover:text-emerald-400 rounded opacity-0 group-hover:opacity-100 transition-opacity" className="p-1 hover:bg-emerald-600/20 text-slate-600 hover:text-emerald-400 rounded opacity-0 group-hover:opacity-100 transition-opacity"
> >
{syncing?.key === group.key && syncing?.field === 'units' ? <Loader2 className="w-3 h-3 animate-spin" /> : <Layers className="w-3 h-3" />} {syncing?.key === group.key && syncing?.field === 'units' ? <Loader2 className="w-3 h-3 animate-spin" /> : <Layers className="w-3 h-3" />}
</button> </button>
<span>{row[COLUMNS.UNITS_OUTER] || '-'}</span>
</div>
</td> </td>
<td className={cn( <td className={cn(
"px-4 py-3 relative", "px-4 py-3",
group.discrepancies.moq ? "text-amber-300 font-bold" : "text-slate-400" group.discrepancies.moq ? "text-amber-300 font-bold" : "text-slate-400"
)}> )}>
<span>{row[COLUMNS.MOQ] || '-'}</span> <div className="flex items-center gap-2 group/cell">
<button <button
onClick={() => handleSyncField(group, row, 'moq')} onClick={() => handleSyncField(group, row, 'moq')}
disabled={syncing?.key === group.key} disabled={syncing?.key === group.key}
title="Apply this MOQ to all in group" title="Apply this MOQ to all in group"
className="absolute right-1 top-1/2 -translate-y-1/2 p-1 hover:bg-emerald-600/20 text-slate-600 hover:text-emerald-400 rounded opacity-0 group-hover:opacity-100 transition-opacity" className="p-1 hover:bg-emerald-600/20 text-slate-600 hover:text-emerald-400 rounded opacity-0 group-hover:opacity-100 transition-opacity"
> >
{syncing?.key === group.key && syncing?.field === 'moq' ? <Loader2 className="w-3 h-3 animate-spin" /> : <Layers className="w-3 h-3" />} {syncing?.key === group.key && syncing?.field === 'moq' ? <Loader2 className="w-3 h-3 animate-spin" /> : <Layers className="w-3 h-3" />}
</button> </button>
<span>{row[COLUMNS.MOQ] || '-'}</span>
</div>
</td> </td>
<td className="px-4 py-3 text-right"> <td className="px-4 py-3 text-right">
<div className="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity"> <div className="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">