Liste : jour de semaine dans l'en-tête + bouton dédié d'ajout par journée

Retour d'usage : avec plusieurs journées ouvertes, viser le bouton principal
d'ajout en traversant la liste faisait dériver la date ciblée (le survol pilote
la journée affichée sur la carte).

- En-tête de journée réorganisé : jour de la semaine avant la date (ex. « Lundi
  15/09/2026 »), nombre de trajets à la suite, puis un bouton dédié « + » à
  l'extrémité droite (infobulle « Ajouter un trajet sur cette journée »).
- Le bouton « + » ouvre la création avec la date de SA journée, indépendamment
  de la date affichée sur la carte (Output ajouterSurJournee -> conteneur fixe
  lun. 21 sept. 2026 12:54:31 CEST avant ouverture via ouvrirCreationSur). stopPropagation pour ne pas
  déclencher le repliage/dépliage au clic.
- Style : fond bleu IAD / texte blanc par défaut, survol orange (cohérent avec
  les autres boutons d'action).
- Locale française enregistrée (registerLocaleData(localeFr) + LOCALE_ID
  'fr-FR' dans app.config.ts) pour l'affichage du jour de la semaine.

Specs : requirements.md (exigence 12, critères 6 et 24) et design.md
(TrajetListComponent, locale) mis à jour.
This commit is contained in:
2026-09-21 12:54:31 +02:00
parent 91b59d4ce7
commit 058481c192
8 changed files with 110 additions and 19 deletions
@@ -10,30 +10,65 @@
.jour {
padding: 0.5rem 0;
// Conteneur de l'en-tête : le bouton de repliage (zone cliquable principale) et,
// à droite, le bouton dédié « + » (ajouter un trajet sur cette journée).
&__entete {
display: flex;
align-items: center;
align-items: stretch;
gap: 0.5rem;
width: 100%;
margin: 0 0 0.4rem;
padding: 0.4rem 0.5rem;
font-size: 0.85rem;
font-weight: 700;
color: #334155;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 6px;
text-align: left;
cursor: pointer;
position: sticky;
top: 0;
z-index: 1;
}
&__entete-bouton {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 1 1 auto;
min-width: 0;
padding: 0.4rem 0.5rem;
border: none;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
border-radius: 6px 0 0 6px;
&:hover {
background: #e9eef4;
}
}
// Bouton dédié : ajouter un trajet SUR CETTE JOURNÉE, indépendant de la date de
// la carte (pilotée par le survol). Toujours visible, à droite de l'en-tête.
&__ajouter {
flex: 0 0 auto;
width: 2rem;
margin: 0.25rem 0.25rem 0.25rem 0;
border: none;
border-radius: 4px;
background: var(--couleur-bleu, #1976d2);
color: #fff;
font-size: 1.1rem;
font-weight: 700;
line-height: 1;
cursor: pointer;
&:hover {
background: var(--couleur-orange, #f28c28);
}
}
// Journée affichée sur la carte : en-tête accentué (bleu) pour la repérer.
&--affiche &__entete {
background: #e3f0ff;
@@ -42,6 +77,7 @@
box-shadow: inset 3px 0 0 #1976d2;
}
&__chevron {
flex: 0 0 auto;
color: #64748b;