Aller au contenu

Transversal

Préférences utilisateur

Disponible

Page de préférences : carte profil avec avatar, réglages langue/fuseau/format via selects, canaux de notification par catégorie et fiches de configuration. Pour personnaliser compte et notifications.

Rendu multi-framework

Préférences utilisateur : Sophie Larochelle (données mock)

Sophie Larochelle

Gestionnaire de produit · Sent Tech

Actif

Localisation & affichage

Coordonnées

Notifications

Choisissez les canaux par catégorie d'événement.

Mentions et réponsesEmailPushIn-app
Tâches assignéesEmailPushIn-app
Mises à jour de projetEmailPushIn-app
Alertes de sécuritéEmailPushIn-app
Modifications non enregistrées
Voir le code (Svelte) 
<div class="up-shell">
  <Card class="up-profile-card">
    <div class="up-profile-row">
      <Avatar name="Sophie Larochelle" size="xl" tone="category3" />
      <div class="up-profile-info">
        <h2 class="up-profile-name">Sophie Larochelle</h2>
        <p class="up-profile-role">Gestionnaire de produit · Sent Tech</p>
        <Badge tone="success">Actif</Badge>
      </div>
      <Button variant="secondary" size="sm">Modifier le profil</Button>
    </div>
  </Card>
  <FieldCard label="Localisation & affichage" variant="bordered">
    <div class="up-selects">
      <Select
        label="Langue de l'interface"
        value="fr"
        options={[{"value":"fr","label":"Français"},{"value":"en","label":"English"},{"value":"es","label":"Español"},{"value":"de","label":"Deutsch"}]}
      />
      <Select
        label="Fuseau horaire"
        value="america-montreal"
        options={[{"value":"america-montreal","label":"America/Montreal (UTC−5)"},{"value":"america-new_york","label":"America/New_York (UTC−5)"},{"value":"europe-paris","label":"Europe/Paris (UTC+1)"},{"value":"utc","label":"UTC"}]}
      />
      <Select
        label="Format de date"
        value="iso"
        options={[{"value":"iso","label":"AAAA-MM-JJ"},{"value":"fr","label":"JJ/MM/AAAA"},{"value":"us","label":"MM/JJ/AAAA"}]}
      />
    </div>
  </FieldCard>
  <FieldCard label="Coordonnées" variant="bordered">
    <div class="up-selects">
      <Input label="Courriel" value="[email protected]" type="email" />
      <Input label="Téléphone" value="+1 514 555 0142" type="tel" />
    </div>
  </FieldCard>
  <FieldCard label="Notifications" variant="bordered">
    <p class="up-notif-desc">Choisissez les canaux par catégorie d'événement.</p>
    <div class="up-notif-row">
      <span class="up-notif-label">Mentions et réponses</span>
      <Badge tone="info">Email</Badge>
      <Badge tone="warning">Push</Badge>
      <Badge tone="success">In-app</Badge>
    </div>
    <div class="up-notif-row">
      <span class="up-notif-label">Tâches assignées</span>
      <Badge tone="info">Email</Badge>
      <Badge tone="neutral">Push</Badge>
      <Badge tone="success">In-app</Badge>
    </div>
    <div class="up-notif-row">
      <span class="up-notif-label">Mises à jour de projet</span>
      <Badge tone="neutral">Email</Badge>
      <Badge tone="neutral">Push</Badge>
      <Badge tone="success">In-app</Badge>
    </div>
    <div class="up-notif-row">
      <span class="up-notif-label">Alertes de sécurité</span>
      <Badge tone="info">Email</Badge>
      <Badge tone="warning">Push</Badge>
      <Badge tone="success">In-app</Badge>
    </div>
  </FieldCard>
  <div class="up-savebar">
    <span class="up-savebar-hint">Modifications non enregistrées</span>
    <Button variant="ghost" size="sm">Annuler</Button>
    <Button variant="primary" size="sm">Enregistrer</Button>
  </div>
</div>

Composants DS utilisés