Mathieu Benoit
c4130d3b5e
Long participant lists were hard to scan by organisation. The list now opens on counts and a legend of memberships, each with its headcount; the grid shows a membership as a pill of its tint, the expected title and the exclusion as icon pills, and row commands wrap without breaking their labels at 1024 px. The import preview and report class each message as refus, avis or information. Editing and shortcuts are as before. Checked: node 144, browser 117, 9 mutations caught. --- FR --- [IMP] participants, tables, import : comptes, pastilles, messages Une longue liste se parcourait mal par organisation. Elle s'ouvre sur des comptes et une légende des appartenances avec leur effectif ; la grille montre l'appartenance en pastille de sa teinte, le titre pressenti et l'exclusion en pastilles à icône, et les commandes de ligne passent à la ligne sans casser leur libellé à 1024 px. L'aperçu et le rapport d'import classent chaque message en refus, avis ou information. L'édition et les raccourcis ne changent pas. Vérifié : node 144, navigateur 117, 9 mutations prises. Assisted-by: Claude Opus 5.5
76 lines
2.3 KiB
Svelte
76 lines
2.3 KiB
Svelte
<!-- © 2026 TechnoLibre (http://www.technolibre.ca)
|
|
License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl) -->
|
|
|
|
<script>
|
|
// Un bloc de messages de l'aperçu ou du rapport d'import (§ 10.1), classé
|
|
// en refus, avis ou information par messageDuBloc (modele.js) : une
|
|
// pastille de la sorte — son libellé, son icône, le fond de sa teinte —,
|
|
// puis le titre du bloc, puis son contenu. Le cadre porte le filet de la
|
|
// sorte et un trait de gauche de sa marque ; le texte garde l'encre de la
|
|
// page. La sorte se lit au libellé de la pastille : la couleur la redit.
|
|
//
|
|
// bloc : le nom du bloc, que messageDuBloc classe ; titre : le titre déjà
|
|
// traduit, ou null quand le contenu se nomme lui-même (la légende d'un
|
|
// tableau) ; children : le contenu.
|
|
import { getContext } from 'svelte';
|
|
import Pastille from '../primitives/Pastille.svelte';
|
|
import { messageDuBloc } from './modele.js';
|
|
|
|
let { bloc, titre = null, children = null } = $props();
|
|
|
|
const t = getContext('t');
|
|
const message = $derived(messageDuBloc(bloc));
|
|
</script>
|
|
|
|
<section class="message {message.sorte}">
|
|
<div class="tete">
|
|
<Pastille sorte="statut" valeur={message.sorte} icone={message.icone} libelle={t(message.cle)} />
|
|
{#if titre !== null}
|
|
<h4>{titre}</h4>
|
|
{/if}
|
|
</div>
|
|
{@render children?.()}
|
|
</section>
|
|
|
|
<style>
|
|
.message {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--espace-2);
|
|
min-width: 0;
|
|
padding: var(--espace-3);
|
|
border: 1px solid var(--couleur-carte-filet);
|
|
border-left-width: 3px;
|
|
border-radius: var(--rayon-2);
|
|
background-color: var(--couleur-carte-fond);
|
|
color: var(--couleur-page-texte);
|
|
}
|
|
|
|
/* Le cadre de chaque sorte : son filet, le trait de gauche de sa marque. */
|
|
.refus {
|
|
border-color: var(--couleur-refus-filet);
|
|
border-left-color: var(--couleur-refus-marque);
|
|
}
|
|
|
|
.avis {
|
|
border-color: var(--couleur-avis-filet);
|
|
border-left-color: var(--couleur-avis-marque);
|
|
}
|
|
|
|
.information {
|
|
border-color: var(--couleur-information-filet);
|
|
border-left-color: var(--couleur-information-marque);
|
|
}
|
|
|
|
.tete {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--espace-2);
|
|
}
|
|
|
|
h4 {
|
|
margin: 0;
|
|
font-size: var(--taille-texte);
|
|
}
|
|
</style>
|