Michael/LogiFlow
1
0 Fork 0
mirror of https://github.com/R0m1k3/LogiFlow.git synced 2026-10-17 20:27:10 +02:00
Code Issues Packages Projects Releases Wiki Activity

Adjust layout to place quick create button to the left of advertisements

Browse Source 
Refactor CalendarGrid component to reposition the Quick Create Button next to advertisements, enhancing usability.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: fba33a9c-2c78-4001-992e-48eb46f716ef
Replit-Commit-Checkpoint-Type: full_checkpoint
This commit is contained in:
michaelschal committed 2025-09-04 14:07:46 +00:00
1 parent abb720d797
commit 4d52d3b2d2
3 files changed
+38 -20
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

attached_assets/image_1756994806477.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

attached_assets/targeted_element_1756994827180.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

client/src/components/CalendarGrid.tsx
+38 -20
View File
@@ -539,16 +539,32 @@ export default function CalendarGrid({
{/* Publicities et Quick Create Button ensemble */} {/* Publicities et Quick Create Button ensemble */}
{isCurrentMonth && ( {isCurrentMonth && (
<div className="absolute top-2 right-2 flex flex-col items-end gap-1"> <div className="absolute top-2 right-2 flex flex-col items-end gap-1">
{/* Publicities avec design épuré */} {/* Publicities avec Quick Create Button à gauche */}
{dayPublicities.length > 0 && ( {dayPublicities.length > 0 && (
<> <>
{dayPublicities.slice(0, 2).map((pub, idx) => ( {dayPublicities.slice(0, 2).map((pub, idx) => (
<div <div key={`${pub.id}-${idx}`} className="flex items-center gap-1">
key={`${pub.id}-${idx}`} {/* Quick Create Button à gauche de la première publicité */}
className="bg-purple-300 text-purple-800 text-xs px-2 py-1 font-bold shadow-md cursor-help transform hover:scale-105 transition-transform duration-150 border border-purple-400" {idx === 0 && (
title={`Pub ${pub.pubNumber}: ${pub.designation}${pub.participations ? ` - Magasins: ${pub.participations.map((pg: any) => pg.group?.name).join(', ')}` : ''}`} <div className="opacity-0 group-hover:opacity-100 transition-all duration-200">
> <Button
{pub.pubNumber} size="sm"
className="w-6 h-6 bg-orange-300 text-orange-800 p-0 hover:bg-orange-400 shadow-md transform hover:scale-110 transition-all duration-150 border border-orange-500"
onClick={(e) => {
e.stopPropagation();
onDateClick(date);
}}
>
<Plus className="w-3 h-3" />
</Button>
</div>
)}
<div
className="bg-purple-300 text-purple-800 text-xs px-2 py-1 font-bold shadow-md cursor-help transform hover:scale-105 transition-transform duration-150 border border-purple-400"
title={`Pub ${pub.pubNumber}: ${pub.designation}${pub.participations ? ` - Magasins: ${pub.participations.map((pg: any) => pg.group?.name).join(', ')}` : ''}`}
>
{pub.pubNumber}
</div>
</div> </div>
))} ))}
{dayPublicities.length > 2 && ( {dayPublicities.length > 2 && (
@@ -559,19 +575,21 @@ export default function CalendarGrid({
</> </>
)} )}
{/* Quick Create Button à côté des publicités */} {/* Quick Create Button quand pas de publicité */}
<div className="opacity-0 group-hover:opacity-100 transition-all duration-200"> {dayPublicities.length === 0 && (
<Button <div className="opacity-0 group-hover:opacity-100 transition-all duration-200">
size="sm" <Button
className="w-6 h-6 bg-orange-300 text-orange-800 p-0 hover:bg-orange-400 shadow-md transform hover:scale-110 transition-all duration-150 border border-orange-500" size="sm"
onClick={(e) => { className="w-6 h-6 bg-orange-300 text-orange-800 p-0 hover:bg-orange-400 shadow-md transform hover:scale-110 transition-all duration-150 border border-orange-500"
e.stopPropagation(); onClick={(e) => {
onDateClick(date); e.stopPropagation();
}} onDateClick(date);
> }}
<Plus className="w-3 h-3" /> >
</Button> <Plus className="w-3 h-3" />
</div> </Button>
</div>
)}
</div> </div>
)} )}
</div> </div>