Uniformiser le survol des boutons (orange) et le rendu des boutons Annuler
- Survol orange plein (texte blanc) étendu aux boutons d'action secondaires : « Utiliser mon domicile », « Export PDF » (résumés mensuel/annuel), « Recopier le dernier barème », « Modifier » et « Enregistrer/Ajouter » (carnet d'adresses) - Boutons « Annuler » uniformisés sur tout le site (fond blanc, bordure grise, survol gris clair), via classes dédiées .btn-annuler (barème) et .btn--annuler (carnet), alignés sur trajet-form et confirm-dialog - Suppression (rouge), boutons à icône et indicateurs d'état inchangés - Charte graphique de design.md mise à jour (convention d'interaction)
This commit is contained in:
@@ -55,7 +55,11 @@
|
|||||||
### Charte graphique
|
### Charte graphique
|
||||||
|
|
||||||
- **Palette officielle** (variables CSS globales dans `styles.scss`) : Orange `--couleur-orange: #F28C28`, Bleu IAD `--couleur-bleu: #0074B8` (couleur primaire), Gris anthracite `--couleur-anthracite: #343A40`, Gris clair `--couleur-gris-clair: #E7E9EA`, avec déclinaisons de survol `--couleur-bleu-fonce` et `--couleur-orange-fonce`.
|
- **Palette officielle** (variables CSS globales dans `styles.scss`) : Orange `--couleur-orange: #F28C28`, Bleu IAD `--couleur-bleu: #0074B8` (couleur primaire), Gris anthracite `--couleur-anthracite: #343A40`, Gris clair `--couleur-gris-clair: #E7E9EA`, avec déclinaisons de survol `--couleur-bleu-fonce` et `--couleur-orange-fonce`.
|
||||||
- **Convention d'interaction** : les boutons d'action à fond bleu (texte, ex. `.btn-principal`, `.btn-primaire`, `.btn-confirmer`) passent à l'orange au survol. Cette règle ne s'applique PAS aux boutons à fond différent (rouge pour la suppression, blanc pour les actions secondaires) ni aux boutons à icône. Les indicateurs d'état sélectionné/actif (lien de navigation actif, mois sélectionné, onglet actif) restent en bleu plein, sans changement de teinte au survol.
|
- **Convention d'interaction** : tous les boutons d'ACTION passent à l'orange plein au survol (texte blanc), qu'ils soient à fond bleu plein (ex. `.btn-principal`, `.btn-primaire`, bouton de soumission bleu) ou à fond blanc/clair avec texte bleu (actions secondaires, ex. « Utiliser mon domicile » `.btn-domicile`, « Export PDF » `.btn-secondaire` des résumés, « Recopier le dernier barème » `.btn-secondaire` du barème, « Modifier » et « Enregistrer/Ajouter » du carnet d'adresses). L'intention : harmoniser le feedback de survol de toutes les actions sur l'orange de la charte. Exceptions qui NE passent PAS à l'orange au survol :
|
||||||
|
- Les boutons « Annuler » : rendu neutre uniformisé sur tout le site (fond blanc, bordure grise `#c4c9d1`, texte `#33475b`, survol gris clair `#f3f5f8`), aligné sur l'écran d'ajout/modification d'un trajet et repris à l'identique sur le barème (`.btn-annuler`), le carnet d'adresses (`.btn--annuler`) et le composant partagé `confirm-dialog`.
|
||||||
|
- Les boutons de suppression (rouge) : restent rouges.
|
||||||
|
- Les boutons à icône seule.
|
||||||
|
- Les indicateurs d'état sélectionné/actif (lien de navigation actif, mois sélectionné, onglet actif) : restent en bleu plein, sans changement de teinte au survol.
|
||||||
- **Assets graphiques** (`frontend/src/assets/images/`) :
|
- **Assets graphiques** (`frontend/src/assets/images/`) :
|
||||||
- `logo-icon.png` : icône seule, affichée en tête de la barre de navigation (fond blanc localisé pour ressortir sur la barre anthracite).
|
- `logo-icon.png` : icône seule, affichée en tête de la barre de navigation (fond blanc localisé pour ressortir sur la barre anthracite).
|
||||||
- `logo-carre.png` : logo avec texte vertical, centré au-dessus du formulaire sur les 4 pages d'authentification (connexion, inscription, mot de passe oublié, réinitialisation).
|
- `logo-carre.png` : logo avec texte vertical, centré au-dessus du formulaire sur les 4 pages d'authentification (connexion, inscription, mot de passe oublié, réinitialisation).
|
||||||
|
|||||||
@@ -107,7 +107,7 @@
|
|||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="btn-secondaire"
|
class="btn-secondaire btn-annuler"
|
||||||
*ngIf="trancheEnEdition() !== null"
|
*ngIf="trancheEnEdition() !== null"
|
||||||
(click)="annulerEdition()"
|
(click)="annulerEdition()"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -83,6 +83,25 @@ h2 {
|
|||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
|
|
||||||
|
// "Recopier" : même rendu que le bouton "Export PDF" des résumés
|
||||||
|
// (fond blanc/bleu, survol orange plein + texte blanc).
|
||||||
|
&:hover:not(:disabled) {
|
||||||
|
background: var(--couleur-orange);
|
||||||
|
border-color: var(--couleur-orange);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bouton "Annuler" uniformisé : fond blanc, bordure grise, survol gris clair
|
||||||
|
// (même rendu que l'écran d'ajout/modification d'un trajet).
|
||||||
|
.btn-annuler {
|
||||||
|
color: #33475b;
|
||||||
|
border-color: #c4c9d1;
|
||||||
|
|
||||||
|
&:hover:not(:disabled) {
|
||||||
|
background: #f3f5f8;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-lien {
|
.btn-lien {
|
||||||
|
|||||||
@@ -66,7 +66,7 @@
|
|||||||
<button type="submit" [disabled]="form.invalid || enregistrement()">
|
<button type="submit" [disabled]="form.invalid || enregistrement()">
|
||||||
{{ enEdition ? 'Enregistrer' : 'Ajouter' }}
|
{{ enEdition ? 'Enregistrer' : 'Ajouter' }}
|
||||||
</button>
|
</button>
|
||||||
<button type="button" class="btn--secondary" (click)="annuler()">
|
<button type="button" class="btn--secondary btn--annuler" (click)="annuler()">
|
||||||
Annuler
|
Annuler
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -139,6 +139,10 @@ button {
|
|||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover:not(:disabled) {
|
||||||
|
background: var(--couleur-orange);
|
||||||
|
}
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
@@ -148,6 +152,26 @@ button {
|
|||||||
.btn--secondary {
|
.btn--secondary {
|
||||||
background: #e0e0e0;
|
background: #e0e0e0;
|
||||||
color: #333;
|
color: #333;
|
||||||
|
|
||||||
|
// "Modifier" (et autres actions secondaires) : passage à l'orange au survol,
|
||||||
|
// comme les boutons bleus.
|
||||||
|
&:hover:not(:disabled) {
|
||||||
|
background: var(--couleur-orange);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// "Annuler" : rendu uniformisé sur tout le site — fond blanc, bordure grise,
|
||||||
|
// survol gris clair (même rendu que l'écran d'ajout/modification d'un trajet).
|
||||||
|
.btn--annuler {
|
||||||
|
background: #fff;
|
||||||
|
color: #33475b;
|
||||||
|
border: 1px solid #c4c9d1;
|
||||||
|
|
||||||
|
&:hover:not(:disabled) {
|
||||||
|
background: #f3f5f8;
|
||||||
|
color: #33475b;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn--danger {
|
.btn--danger {
|
||||||
|
|||||||
@@ -70,6 +70,12 @@ h1 {
|
|||||||
background: #fff;
|
background: #fff;
|
||||||
color: #1565c0;
|
color: #1565c0;
|
||||||
border: 1px solid #1565c0;
|
border: 1px solid #1565c0;
|
||||||
|
|
||||||
|
&:hover:not(:disabled) {
|
||||||
|
background: var(--couleur-orange);
|
||||||
|
border-color: var(--couleur-orange);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-principal:disabled,
|
.btn-principal:disabled,
|
||||||
|
|||||||
@@ -46,6 +46,12 @@ h1 {
|
|||||||
background: #fff;
|
background: #fff;
|
||||||
color: #1565c0;
|
color: #1565c0;
|
||||||
border: 1px solid #1565c0;
|
border: 1px solid #1565c0;
|
||||||
|
|
||||||
|
&:hover:not(:disabled) {
|
||||||
|
background: var(--couleur-orange);
|
||||||
|
border-color: var(--couleur-orange);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-principal:disabled,
|
.btn-principal:disabled,
|
||||||
|
|||||||
@@ -59,7 +59,9 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover:not(:disabled) {
|
&:hover:not(:disabled) {
|
||||||
background: #ebf3fb;
|
background: var(--couleur-orange);
|
||||||
|
border-color: var(--couleur-orange);
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
|
|||||||
Reference in New Issue
Block a user