jmartin/petitspas
1
0
Fork 0
Code Issues 48 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(#173): carte congés maquette + mini-spec bulles pour alignement back

Browse Source 
Layout aqua (valise, période une ligne, pilules peintes, lien agenda),
encre pétrole, et docs/32 pour palette sémantique + demandes API couleur.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
jmartin
2026-10-01 17:10:41 +02:00
co-authored by Cursor
parent 8b1c4555ad
commit 32f6eeeeed
7 changed files with 407 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/assets/images/cartes/btn_coche_pilule.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 195 KiB

frontend/assets/images/cartes/btn_croix_pilule.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 231 KiB

frontend/assets/images/cartes/icon_calendrier_crayon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

frontend/assets/images/valise.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 365 KiB

frontend/lib/models/carte_bulle.dart
+1 -1
View File
@@ -108,7 +108,7 @@ class CarteBulle {
String? get iconAsset {
switch (typeCode) {
case 'conge_am':
return 'assets/images/cartes/icon_carte_conges2.png';
return 'assets/images/valise.png';
case 'arret_maladie_am':
return 'assets/images/cartes/icon_carte_maladie.png';
case 'absence_enfant':
frontend/lib/widgets/quotidien/cartes_feed.dart
+247 -16
View File
@@ -405,6 +405,13 @@ class _CartesFeedState extends State<CartesFeed> {
}
class _BulleTile extends StatelessWidget {
/// Encre aqua foncé — harmonisée fond aqua / valise (pas le violet).
static const Color _aquaInk = Color(0xFF315F63);
/// Date : même famille, ~12 % plus claire.
static const Color _aquaDate = Color(0xFF4A7276);
/// Lien agenda : légère dérive bleue.
static const Color _aquaLink = Color(0xFF2B5868);
final CarteBulle card;
final bool busy;
final VoidCallback onAccept;
@@ -419,26 +426,51 @@ class _BulleTile extends StatelessWidget {
required this.onRefuse,
});
static const _mois = [
'janvier',
'février',
'mars',
'avril',
'mai',
'juin',
'juillet',
'août',
'septembre',
'octobre',
'novembre',
'décembre',
];
String _fmtLong(String? iso) {
if (iso == null || iso.isEmpty) return '…';
final dt = DateTime.tryParse(iso);
if (dt == null) return iso;
const mois = [
'janvier',
'février',
'mars',
'avril',
'mai',
'juin',
'juillet',
'août',
'septembre',
'octobre',
'novembre',
'décembre',
];
final jj = dt.day.toString().padLeft(2, '0');
return '$jj ${mois[dt.month - 1]} ${dt.year}';
return '$jj ${_mois[dt.month - 1]} ${dt.year}';
}
/// Une ligne type maquette : « Du 04 au 06 novembre 2026 ».
String _fmtPeriodeUneLigne() {
final d1 = DateTime.tryParse(card.dateDebut ?? '');
final d2 = DateTime.tryParse(card.dateFin ?? '');
if (d1 == null && d2 == null) return '';
if (d1 != null && d2 == null) return 'Le ${_fmtLong(card.dateDebut)}';
if (d1 == null && d2 != null) return 'Au ${_fmtLong(card.dateFin)}';
final a = d1!;
final b = d2!;
final j1 = a.day.toString().padLeft(2, '0');
final j2 = b.day.toString().padLeft(2, '0');
if (a.year == b.year && a.month == b.month && a.day == b.day) {
return 'Le $j1 ${_mois[a.month - 1]} ${a.year}';
}
if (a.year == b.year && a.month == b.month) {
return 'Du $j1 au $j2 ${_mois[a.month - 1]} ${a.year}';
}
if (a.year == b.year) {
return 'Du $j1 ${_mois[a.month - 1]} au $j2 ${_mois[b.month - 1]} ${a.year}';
}
return 'Du $j1 ${_mois[a.month - 1]} ${a.year} '
'au $j2 ${_mois[b.month - 1]} ${b.year}';
}
/// Arrêt maladie : reste opaque tant que la période n’est pas finie.
@@ -449,6 +481,175 @@ class _BulleTile extends StatelessWidget {
@override
Widget build(BuildContext context) {
if (card.isCongeAm) return _buildConge(context);
return _buildGeneric(context);
}
Widget _buildConge(BuildContext context) {
final periode = _fmtPeriodeUneLigne();
return Opacity(
opacity: _attenuee ? 0.55 : 1,
child: Carte(
assetPath: card.backgroundAsset,
constraints: const BoxConstraints(minHeight: 140),
padding: const EdgeInsets.fromLTRB(22, 18, 18, 14),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
card.titreAffiche,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: GoogleFonts.merienda(
fontSize: 18,
fontWeight: FontWeight.w700,
color: _aquaInk,
),
),
if (periode.isNotEmpty) ...[
const SizedBox(height: 10),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Image.asset(
'assets/images/cartes/icon_calendrier_crayon.png',
width: 28,
height: 28,
fit: BoxFit.contain,
filterQuality: FilterQuality.high,
),
const SizedBox(width: 8),
Expanded(
child: Text(
periode,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: GoogleFonts.merienda(
fontSize: 15,
fontWeight: FontWeight.w600,
color: _aquaDate,
height: 1.25,
),
),
),
],
),
],
if (card.statut == CarteStatut.refusee) ...[
const SizedBox(height: 8),
Text(
card.lastRefuseComment != null &&
card.lastRefuseComment!.trim().isNotEmpty
? 'Refusé — ${card.lastRefuseComment}'
: 'Refusé',
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: GoogleFonts.merriweather(
fontSize: 12,
fontStyle: FontStyle.italic,
color: _aquaInk,
),
),
] else if (card.statut == CarteStatut.ouverte &&
card.isCreator) ...[
const SizedBox(height: 8),
Text(
'En attente de réponse',
style: GoogleFonts.merriweather(
fontSize: 12,
color: QuotidienTheme.muted,
),
),
],
],
),
),
if (card.iconAsset != null) ...[
const SizedBox(width: 8),
Image.asset(
card.iconAsset!,
width: 72,
height: 72,
fit: BoxFit.contain,
filterQuality: FilterQuality.high,
),
],
],
),
const SizedBox(height: 10),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
if (card.peutRepondre)
busy
? const SizedBox(
width: 28,
height: 28,
child: CircularProgressIndicator(strokeWidth: 2),
)
: Row(
mainAxisSize: MainAxisSize.min,
children: [
_PilulePeinteButton(
asset:
'assets/images/cartes/btn_coche_pilule.png',
tooltip: 'Accepter',
onTap: onAccept,
),
const SizedBox(width: 10),
_PilulePeinteButton(
asset:
'assets/images/cartes/btn_croix_pilule.png',
tooltip: 'Refuser',
onTap: onRefuse,
),
],
),
const Spacer(),
InkWell(
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Agenda — à venir.'),
duration: Duration(seconds: 2),
),
);
},
borderRadius: BorderRadius.circular(6),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 4,
vertical: 4,
),
child: Text(
'Ouvrir dans l’agenda ↗',
style: GoogleFonts.merienda(
fontSize: 13,
fontWeight: FontWeight.w600,
color: _aquaLink,
decoration: TextDecoration.underline,
decorationColor: _aquaLink,
),
),
),
),
],
),
],
),
),
);
}
Widget _buildGeneric(BuildContext context) {
final memeJour = card.dateDebut != null &&
card.dateFin != null &&
card.dateDebut == card.dateFin;
@@ -606,7 +807,37 @@ class _BulleTile extends StatelessWidget {
}
}
/// Bouton pilule dessiné pleine largeur (fond pastel + coche / croix).
/// Bouton pilule peinte (coche / croix intégrées) — carte congés.
class _PilulePeinteButton extends StatelessWidget {
final String asset;
final String tooltip;
final VoidCallback onTap;
const _PilulePeinteButton({
required this.asset,
required this.tooltip,
required this.onTap,
});
@override
Widget build(BuildContext context) {
return Tooltip(
message: tooltip,
child: InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(20),
child: Image.asset(
asset,
height: 36,
fit: BoxFit.contain,
filterQuality: FilterQuality.high,
),
),
);
}
}
/// Bouton pilule dessiné (fond pastel + coche / croix).
class _ActionPill extends StatelessWidget {
final String asset;
final String iconAsset;