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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user