📝(docs) archive calendar-central-design change
Archive completed OpenSpec change with all artifacts: - proposal.md: Initial design requirements - design.md: Architecture decisions - specs/: calendar-theme and scheduler-toolbar specifications - tasks.md: 34/34 tasks completed Sync delta specs to main specs: - openspec/specs/calendar-theme/spec.md - openspec/specs/scheduler-toolbar/spec.md Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
113
openspec/specs/calendar-theme/spec.md
Normal file
113
openspec/specs/calendar-theme/spec.md
Normal file
@@ -0,0 +1,113 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Variables CSS Cunningham
|
||||
|
||||
Le thème DOIT remapper les variables CSS d'EventCalendar (`--ec-*`) vers les tokens Cunningham (`--c--globals--*`).
|
||||
|
||||
#### Scenario: Couleurs de base appliquées
|
||||
- **WHEN** le calendrier est rendu
|
||||
- **THEN** le fond utilise `--c--globals--colors--gray-000`
|
||||
- **AND** les bordures utilisent `--c--globals--colors--gray-100`
|
||||
- **AND** le texte utilise `--c--globals--colors--gray-800`
|
||||
|
||||
#### Scenario: Dark mode automatique
|
||||
- **WHEN** le système est en dark mode
|
||||
- **THEN** les couleurs s'adaptent automatiquement via les tokens Cunningham
|
||||
|
||||
---
|
||||
|
||||
### Requirement: Style du jour actuel
|
||||
|
||||
Le jour actuel DOIT être affiché avec un encadré fin autour du numéro, sans fond coloré.
|
||||
|
||||
#### Scenario: Header du jour actuel
|
||||
- **WHEN** un jour est le jour actuel
|
||||
- **THEN** le numéro du jour est entouré d'une bordure fine (1px)
|
||||
- **AND** la bordure a un border-radius de 4px
|
||||
- **AND** le fond de la colonne header reste transparent
|
||||
|
||||
---
|
||||
|
||||
### Requirement: Style des événements
|
||||
|
||||
Les événements DOIVENT avoir un style épuré avec coins arrondis.
|
||||
|
||||
#### Scenario: Apparence d'un événement
|
||||
- **WHEN** un événement est affiché dans la grille
|
||||
- **THEN** il a un border-radius de 6px
|
||||
- **AND** il n'a pas de box-shadow
|
||||
- **AND** le titre est en font-weight 600 (semi-bold)
|
||||
- **AND** l'horaire est en font-weight 400 avec légère opacité
|
||||
|
||||
#### Scenario: Couleur d'un événement
|
||||
- **WHEN** un événement appartient à un calendrier
|
||||
- **THEN** il prend la couleur de ce calendrier en fond
|
||||
- **AND** le texte est blanc
|
||||
|
||||
---
|
||||
|
||||
### Requirement: Style du now indicator
|
||||
|
||||
L'indicateur de l'heure actuelle DOIT utiliser la couleur brand.
|
||||
|
||||
#### Scenario: Apparence du now indicator
|
||||
- **WHEN** l'heure actuelle est visible dans la vue
|
||||
- **THEN** une ligne horizontale avec un point est affichée
|
||||
- **AND** la couleur est `--c--globals--colors--brand-500`
|
||||
|
||||
---
|
||||
|
||||
### Requirement: Style de la sidebar heures
|
||||
|
||||
La sidebar affichant les heures DOIT avoir un style discret.
|
||||
|
||||
#### Scenario: Apparence des labels d'heure
|
||||
- **WHEN** la sidebar des heures est affichée
|
||||
- **THEN** la font-size est réduite (0.75rem)
|
||||
- **AND** la couleur est `--c--globals--colors--gray-500`
|
||||
|
||||
---
|
||||
|
||||
### Requirement: Toolbar native masquée
|
||||
|
||||
La toolbar native d'EventCalendar DOIT être masquée.
|
||||
|
||||
#### Scenario: Toolbar native invisible
|
||||
- **WHEN** le calendrier est rendu
|
||||
- **THEN** l'élément `.ec-toolbar` a `display: none`
|
||||
|
||||
---
|
||||
|
||||
### Requirement: Lignes de grille simplifiées
|
||||
|
||||
Les lignes de grille DOIVENT afficher uniquement les heures pleines.
|
||||
|
||||
#### Scenario: Pas de lignes intermédiaires
|
||||
- **WHEN** la vue semaine ou jour est affichée
|
||||
- **THEN** seules les lignes horaires (chaque heure) sont visibles
|
||||
- **AND** les lignes intermédiaires (30 min) sont masquées
|
||||
|
||||
---
|
||||
|
||||
### Requirement: Header unifié
|
||||
|
||||
Le header (en-têtes de colonnes + section all-day) DOIT avoir un aspect unifié.
|
||||
|
||||
#### Scenario: Pas de bordures internes
|
||||
- **WHEN** le header est affiché
|
||||
- **THEN** les éléments `.ec-col-head` et `.ec-all-day` n'ont pas de bordures
|
||||
- **AND** les `.ec-day` dans `.ec-all-day` n'ont pas de bordure droite
|
||||
|
||||
#### Scenario: Sidebar header masquée
|
||||
- **WHEN** le header est affiché
|
||||
- **THEN** le texte du timezone dans `.ec-sidebar` du header est invisible
|
||||
|
||||
---
|
||||
|
||||
### Requirement: Bordure de grille
|
||||
|
||||
La grille du body DOIT avoir une bordure en bas et à droite.
|
||||
|
||||
#### Scenario: Bordures de la grille
|
||||
- **WHEN** la grille du calendrier est affichée
|
||||
- **THEN** `.ec-grid` dans `.ec-body` a une bordure bottom et right
|
||||
115
openspec/specs/scheduler-toolbar/spec.md
Normal file
115
openspec/specs/scheduler-toolbar/spec.md
Normal file
@@ -0,0 +1,115 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Layout de la toolbar
|
||||
|
||||
La toolbar DOIT afficher les éléments de navigation et de sélection de vue.
|
||||
|
||||
#### Scenario: Structure de la toolbar
|
||||
- **WHEN** la toolbar est affichée
|
||||
- **THEN** elle contient à gauche : bouton "Aujourd'hui", boutons de navigation (précédent/suivant)
|
||||
- **AND** elle contient au centre : le titre de la période (ex: "janv. – févr. 2026")
|
||||
- **AND** elle contient à droite : un dropdown pour sélectionner la vue
|
||||
|
||||
---
|
||||
|
||||
### Requirement: Bouton Aujourd'hui
|
||||
|
||||
Le bouton "Aujourd'hui" DOIT permettre de revenir à la date du jour.
|
||||
|
||||
#### Scenario: Clic sur Aujourd'hui
|
||||
- **WHEN** l'utilisateur clique sur "Aujourd'hui"
|
||||
- **THEN** le calendrier navigue vers la date actuelle
|
||||
- **AND** la vue reste inchangée
|
||||
|
||||
#### Scenario: Style du bouton
|
||||
- **WHEN** le bouton "Aujourd'hui" est affiché
|
||||
- **THEN** il a un style "pill" (bordure arrondie)
|
||||
- **AND** il utilise les styles Cunningham
|
||||
|
||||
---
|
||||
|
||||
### Requirement: Navigation précédent/suivant
|
||||
|
||||
Les boutons de navigation DOIVENT permettre de naviguer dans le temps.
|
||||
|
||||
#### Scenario: Clic sur précédent
|
||||
- **WHEN** l'utilisateur clique sur le bouton précédent (◀)
|
||||
- **THEN** le calendrier navigue vers la période précédente
|
||||
|
||||
#### Scenario: Clic sur suivant
|
||||
- **WHEN** l'utilisateur clique sur le bouton suivant (▶)
|
||||
- **THEN** le calendrier navigue vers la période suivante
|
||||
|
||||
#### Scenario: Style des boutons de navigation
|
||||
- **WHEN** les boutons de navigation sont affichés
|
||||
- **THEN** ils sont des IconButtons avec flèches
|
||||
- **AND** ils utilisent les styles Cunningham
|
||||
|
||||
---
|
||||
|
||||
### Requirement: Titre de la période
|
||||
|
||||
Le titre DOIT afficher la période actuellement visible.
|
||||
|
||||
#### Scenario: Affichage du titre
|
||||
- **WHEN** la vue est en mode semaine ou jour
|
||||
- **THEN** le titre affiche le mois et l'année (ex: "janv. – févr. 2026")
|
||||
|
||||
#### Scenario: Mise à jour du titre
|
||||
- **WHEN** l'utilisateur navigue vers une autre période
|
||||
- **THEN** le titre se met à jour pour refléter la nouvelle période
|
||||
|
||||
---
|
||||
|
||||
### Requirement: Sélecteur de vue
|
||||
|
||||
Le dropdown DOIT permettre de changer de vue via un menu déroulant custom.
|
||||
|
||||
#### Scenario: Options disponibles
|
||||
- **WHEN** l'utilisateur clique sur le bouton trigger
|
||||
- **THEN** un menu déroulant s'ouvre avec les options : Jour, Semaine, Mois, Liste
|
||||
- **AND** l'option sélectionnée est mise en évidence avec un checkmark
|
||||
|
||||
#### Scenario: Changement de vue
|
||||
- **WHEN** l'utilisateur sélectionne une vue différente
|
||||
- **THEN** le calendrier change pour afficher cette vue
|
||||
- **AND** le menu se ferme
|
||||
- **AND** le bouton trigger affiche la vue sélectionnée
|
||||
|
||||
#### Scenario: Vue par défaut
|
||||
- **WHEN** le calendrier est chargé
|
||||
- **THEN** la vue "Semaine" est sélectionnée par défaut
|
||||
|
||||
#### Scenario: Fermeture du menu
|
||||
- **WHEN** l'utilisateur clique en dehors du menu
|
||||
- **THEN** le menu se ferme
|
||||
|
||||
---
|
||||
|
||||
### Requirement: Accessibilité clavier
|
||||
|
||||
Le sélecteur de vue DOIT être accessible au clavier.
|
||||
|
||||
#### Scenario: Navigation clavier
|
||||
- **WHEN** le menu est ouvert
|
||||
- **THEN** les touches ArrowUp/ArrowDown permettent de naviguer entre les options
|
||||
- **AND** la touche Enter sélectionne l'option focalisée
|
||||
- **AND** la touche Escape ferme le menu
|
||||
|
||||
#### Scenario: Focus visible
|
||||
- **WHEN** une option est focalisée par le clavier
|
||||
- **THEN** elle a un style visuel distinct (outline)
|
||||
|
||||
---
|
||||
|
||||
### Requirement: Synchronisation avec le calendrier
|
||||
|
||||
La toolbar DOIT rester synchronisée avec l'état du calendrier.
|
||||
|
||||
#### Scenario: Sync après navigation
|
||||
- **WHEN** le calendrier change de période (via drag ou autre)
|
||||
- **THEN** le titre de la toolbar se met à jour
|
||||
|
||||
#### Scenario: Sync après changement de vue externe
|
||||
- **WHEN** la vue du calendrier change par un autre moyen
|
||||
- **THEN** le dropdown affiche la vue correcte
|
||||
Reference in New Issue
Block a user