Front : les indications d'usage passent en bulle d'aide (icône « ? »)
Les explications sur comment utiliser un écran (grille des besoins, vue
bénévoles, artistes, import, disponibilités, créneaux types, seuils,
notification par email…) étaient affichées en permanence dans la page,
prenant de la place pour un contenu qu'on ne lit qu'une fois. Elles passent
dans une bulle affichée au survol (ou au focus clavier/tactile) d'un petit
repère « ? » posé à côté du titre ou du champ concerné.
- `HelpTip` (frontend/src/components/ui.tsx) : nouveau composant partagé,
cohérent avec le design (bordures franches, pas d'arrondi) ; `side`
('top'/'bottom') pour éviter que la bulle ne sorte du cadre visible selon
que le repère est en haut ou en bas de son conteneur.
- Appliqué à GrillePage, VolunteerViewPage, ConfigArtists, ConfigVolunteers
(import, ajout manuel, disponibilités), ConfigGrid, ConfigRules, ConfigMail.
- Aucun texte déplacé n'a changé : mêmes clés i18n, seul l'endroit où elles
s'affichent change.
Laissé en l'état (pas des indications d'usage mais des messages d'état) :
bannières identifiants de démo, liens de connexion en dev, états vides, et
la description des rôles (contenu propre des cartes, pas un mode d'emploi).
Vérifié : typecheck, lint, build, smoke (7 routes) OK.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017uUsRg7XzopkCPWimwg9ZM
This commit is contained in:
AdamThomas
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
897a76ca6d
commit
fb6e26eddb
@@ -24,7 +24,7 @@ import type {
|
||||
PositionRead,
|
||||
VolunteerCreate,
|
||||
} from '@/api/schema';
|
||||
import { FieldLabel, TextInput } from '@/components/ui';
|
||||
import { FieldLabel, HelpTip, TextInput } from '@/components/ui';
|
||||
import { ErrorNote, Loading } from '@/components/state';
|
||||
import { t } from '@/i18n';
|
||||
import { shortDayLabel } from '@/lib/time';
|
||||
@@ -183,11 +183,9 @@ export function ConfigVolunteers() {
|
||||
<div className="mb-[14px] flex flex-wrap items-stretch gap-3">
|
||||
<div className="flex flex-1 flex-col justify-center gap-[10px] border-[3px] border-ink bg-paper p-[14px] shadow-brutal-lg">
|
||||
<div>
|
||||
<span className="block font-display text-[15px] font-black">
|
||||
<span className="flex items-center gap-[7px] font-display text-[15px] font-black">
|
||||
{t('config.vol.importTitle')}
|
||||
</span>
|
||||
<span className="block font-mono text-[10px] leading-relaxed opacity-70">
|
||||
{t('config.vol.importHint')}
|
||||
<HelpTip text={t('config.vol.importHint')} side="bottom" />
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-[10px]">
|
||||
@@ -292,7 +290,10 @@ export function ConfigVolunteers() {
|
||||
<aside className="max-h-[calc(100vh-118px)] w-[360px] flex-none overflow-auto border-l-[3px] border-ink bg-paper">
|
||||
<div className="bg-ink px-[13px] py-[11px] text-cream">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="font-mono text-[10px] text-yellow">{t('config.vol.ficheKicker')}</div>
|
||||
<div className="flex items-center gap-[6px] font-mono text-[10px] text-yellow">
|
||||
{t('config.vol.ficheKicker')}
|
||||
<HelpTip text={t('config.vol.note')} side="bottom" />
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelectedId(null)}
|
||||
@@ -372,9 +373,6 @@ export function ConfigVolunteers() {
|
||||
>
|
||||
{t('config.vol.delete')}
|
||||
</button>
|
||||
<div className="font-mono text-[10px] leading-relaxed opacity-65">
|
||||
{t('config.vol.note')}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
) : null}
|
||||
@@ -426,7 +424,10 @@ function AddVolunteerForm({ onClose }: { onClose: () => void }) {
|
||||
<div className="max-h-[calc(100vh-118px)] min-h-0 flex-1 overflow-auto p-4">
|
||||
<div className="mx-auto max-w-[560px] border-[3px] border-ink bg-paper shadow-brutal-lg">
|
||||
<div className="flex items-center justify-between bg-ink px-[14px] py-[11px] text-cream">
|
||||
<span className="font-display text-[14px] font-black">{t('config.vol.addTitle')}</span>
|
||||
<span className="flex items-center gap-[7px] font-display text-[14px] font-black">
|
||||
{t('config.vol.addTitle')}
|
||||
<HelpTip text={t('config.vol.addAvailabilityHint')} side="bottom" />
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
@@ -442,9 +443,6 @@ function AddVolunteerForm({ onClose }: { onClose: () => void }) {
|
||||
}}
|
||||
className="flex flex-col gap-3 p-[14px]"
|
||||
>
|
||||
<div className="font-mono text-[10px] leading-relaxed opacity-65">
|
||||
{t('config.vol.addHint')}
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<label className="block">
|
||||
<FieldLabel>{t('config.vol.field.firstName')} *</FieldLabel>
|
||||
@@ -456,7 +454,9 @@ function AddVolunteerForm({ onClose }: { onClose: () => void }) {
|
||||
</label>
|
||||
</div>
|
||||
<label className="block">
|
||||
<FieldLabel>{t('config.vol.field.email')}</FieldLabel>
|
||||
<FieldLabel>
|
||||
{t('config.vol.field.email')} <HelpTip text={t('config.vol.addHint')} />
|
||||
</FieldLabel>
|
||||
<TextInput mono value={form.email ?? ''} onChange={(v) => set('email', v)} />
|
||||
</label>
|
||||
<label className="block">
|
||||
@@ -490,10 +490,6 @@ function AddVolunteerForm({ onClose }: { onClose: () => void }) {
|
||||
addLabel={t('config.vol.pickPosition')}
|
||||
/>
|
||||
|
||||
<div className="font-mono text-[10px] leading-relaxed opacity-60">
|
||||
{t('config.vol.addAvailabilityHint')}
|
||||
</div>
|
||||
|
||||
{localError ? (
|
||||
<div className="border-2 border-ink bg-orange p-[9px] font-display text-[11px] font-bold">
|
||||
{localError}
|
||||
@@ -586,7 +582,10 @@ function ImportWizard({ onClose }: { onClose: () => void }) {
|
||||
<div className="max-h-[calc(100vh-118px)] min-h-0 flex-1 overflow-auto p-4">
|
||||
<div className="mx-auto max-w-[820px] border-[3px] border-ink bg-paper shadow-brutal-lg">
|
||||
<div className="flex items-center justify-between bg-ink px-[14px] py-[11px] text-cream">
|
||||
<span className="font-display text-[14px] font-black">{t('config.vol.wiz.title')}</span>
|
||||
<span className="flex items-center gap-[7px] font-display text-[14px] font-black">
|
||||
{t('config.vol.wiz.title')}
|
||||
{step === 1 ? <HelpTip text={t('config.vol.wiz.fileHint')} side="bottom" /> : null}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
@@ -638,9 +637,6 @@ function ImportWizard({ onClose }: { onClose: () => void }) {
|
||||
{file ? (
|
||||
<div className="font-mono text-[11px] opacity-70">{file.name}</div>
|
||||
) : null}
|
||||
<div className="font-mono text-[10px] leading-relaxed opacity-65">
|
||||
{t('config.vol.wiz.fileHint')}
|
||||
</div>
|
||||
{analyze.error ? <ErrorNote error={analyze.error} /> : null}
|
||||
</>
|
||||
) : null}
|
||||
@@ -656,10 +652,9 @@ function ImportWizard({ onClose }: { onClose: () => void }) {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<FieldLabel>{t('config.vol.wiz.mapTitle')}</FieldLabel>
|
||||
<div className="mb-1 font-mono text-[10px] leading-relaxed opacity-65">
|
||||
{t('config.vol.wiz.mapHint')}
|
||||
</div>
|
||||
<FieldLabel>
|
||||
{t('config.vol.wiz.mapTitle')} <HelpTip text={t('config.vol.wiz.mapHint')} />
|
||||
</FieldLabel>
|
||||
<div className="grid gap-2 sm:grid-cols-2">
|
||||
{MAP_FIELDS.map(({ key, required }) => (
|
||||
<label key={key} className="block">
|
||||
@@ -912,10 +907,9 @@ function AvailabilityEditor({ volunteerId }: { volunteerId: string }) {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FieldLabel>{t('config.vol.avail.title')}</FieldLabel>
|
||||
<div className="mb-2 font-mono text-[10px] leading-relaxed opacity-60">
|
||||
{t('config.vol.avail.hint')}
|
||||
</div>
|
||||
<FieldLabel>
|
||||
{t('config.vol.avail.title')} <HelpTip text={t('config.vol.avail.hint')} />
|
||||
</FieldLabel>
|
||||
<div className="flex flex-col gap-[6px]">
|
||||
{rows.map((row, i) => (
|
||||
<div key={i} className="flex flex-wrap items-center gap-1">
|
||||
|
||||
Reference in New Issue
Block a user