feat(#173): carte congés maquette + mini-spec bulles pour alignement back
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:
Cursor
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user