Piloter la frise au clavier, à la vim
Les flèches décalaient déjà une phase, mais rien ne permettait de la choisir :
`selection` n'était posée qu'au clic, si bien qu'il fallait la souris pour
commencer. Elle devient `curseur`, désigne une ligne — celle d'un projet en est
une, d'où l'on plie, renomme et ajoute — et survit à Échap, sans quoi elle ne
pourrait servir de point de départ au déplacement suivant. `dessiner` le
normalise, la ligne du projet servant de refuge quand la sienne disparaît.
Deux couches qui ne se recouvrent pas : les flèches modifient, les lettres
déplacent et commandent. Aucun raccourci documenté ne change de sens. Les
touches se taisent dès que le clavier est à quelqu'un d'autre — une saisie, un
dialogue, le menu, un glisser —, faute de quoi `a` dans un nom créerait une
phase. AltGr est toléré : sur un clavier français `{` et `}` n'existent qu'avec
lui, et Windows le présente comme Ctrl+Alt.
Les phases étant triées par date, `o` et `O` insèrent dans le temps et non dans
un rang. `P` reste hors de cette famille : un projet naît sans position.
Le curseur se peint dans la colonne des libellés, seul endroit qui porte une
ligne pour chaque position atteignable — projet plié, projet masqué, ligne de
projet. Et `?` ouvre la table des raccourcis, qui ne se devinent pas.
Décision 26.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
114
index.html
114
index.html
@@ -35,6 +35,20 @@
|
||||
<button type="button" id="nouveau-projet" class="bouton--principal">
|
||||
Nouveau projet
|
||||
</button>
|
||||
<!--
|
||||
Des raccourcis d'une lettre ne se devinent pas. Ce bouton est le seul
|
||||
endroit de l'écran qui dit qu'ils existent : sans lui, la moitié de ce
|
||||
que l'outil sait faire au clavier resterait dans le README.
|
||||
-->
|
||||
<button
|
||||
type="button"
|
||||
id="ouvrir-aide"
|
||||
class="outils__aide"
|
||||
title="Raccourcis clavier (?)"
|
||||
aria-label="Raccourcis clavier"
|
||||
>
|
||||
?
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="outils__etat" id="etat-sauvegarde" role="status" aria-live="polite"></p>
|
||||
@@ -253,6 +267,106 @@
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<!--
|
||||
Aide des raccourcis, ouverte par `?`.
|
||||
|
||||
Un `<dialog>` modal, contrairement aux deux panneaux : celui-ci ne sert
|
||||
qu'à lire, et le clavier doit y être *rendu* — laisser `j` déplacer le
|
||||
curseur derrière la table qui explique `j` serait absurde. La modalité
|
||||
apporte aussi le voile, le piège à focus et la fermeture par Échap.
|
||||
|
||||
La table est écrite à la main plutôt que bâtie depuis la table des
|
||||
séquences de clavier.js : celle-ci associe une touche à un nom d'action, ce
|
||||
qui ne dit ni ce que l'action fait, ni dans quel ordre la présenter, ni
|
||||
quelles touches vont par paires. Une génération automatique produirait une
|
||||
liste exacte et illisible.
|
||||
-->
|
||||
<dialog class="dialogue dialogue--aide" id="dialogue-aide" aria-labelledby="aide-titre">
|
||||
<form method="dialog">
|
||||
<h2 id="aide-titre">Raccourcis clavier</h2>
|
||||
|
||||
<div class="aide__colonnes">
|
||||
<section>
|
||||
<h3>Déplacer le curseur</h3>
|
||||
<dl class="aide">
|
||||
<dt><kbd>j</kbd> <kbd>k</kbd></dt>
|
||||
<dd>Ligne suivante, précédente</dd>
|
||||
<dt><kbd>h</kbd> <kbd>l</kbd></dt>
|
||||
<dd>Phase précédente, suivante du même projet</dd>
|
||||
<dt><kbd>{</kbd> <kbd>}</kbd></dt>
|
||||
<dd>Projet précédent, suivant</dd>
|
||||
<dt><kbd>gg</kbd> <kbd>G</kbd></dt>
|
||||
<dd>Première, dernière ligne</dd>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Modifier la phase du curseur</h3>
|
||||
<dl class="aide">
|
||||
<dt><kbd>←</kbd> <kbd>→</kbd></dt>
|
||||
<dd>Décale d'un jour</dd>
|
||||
<dt><kbd>Maj</kbd>+<kbd>←</kbd> <kbd>→</kbd></dt>
|
||||
<dd>Allonge, raccourcit d'un jour</dd>
|
||||
<dt><kbd>Espace</kbd></dt>
|
||||
<dd>Statut suivant : à venir, en cours, terminé, bloqué</dd>
|
||||
<dt><kbd>Entrée</kbd> <kbd>e</kbd></dt>
|
||||
<dd>Ouvre le volet et saisit le nom</dd>
|
||||
<dt><kbd>dd</kbd></dt>
|
||||
<dd>Supprime la phase, ou le projet depuis sa ligne</dd>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Ajouter</h3>
|
||||
<dl class="aide">
|
||||
<dt><kbd>A</kbd></dt>
|
||||
<dd>Une phase à la fin du projet</dd>
|
||||
<dt><kbd>a</kbd></dt>
|
||||
<dd>Une phase au début du projet</dd>
|
||||
<dt><kbd>o</kbd></dt>
|
||||
<dd>Une phase juste après celle du curseur</dd>
|
||||
<dt><kbd>O</kbd></dt>
|
||||
<dd>Une phase juste avant elle</dd>
|
||||
<dt><kbd>P</kbd></dt>
|
||||
<dd>Un projet</dd>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Plier, cadrer, naviguer</h3>
|
||||
<dl class="aide">
|
||||
<dt><kbd>za</kbd></dt>
|
||||
<dd>Plie ou déplie le projet</dd>
|
||||
<dt><kbd>zR</kbd> <kbd>zM</kbd></dt>
|
||||
<dd>Déplie tout, plie tout</dd>
|
||||
<dt><kbd>zz</kbd></dt>
|
||||
<dd>Recentre la frise sur le curseur</dd>
|
||||
<dt><kbd>w</kbd> <kbd>b</kbd></dt>
|
||||
<dd>Un mois plus tard, plus tôt</dd>
|
||||
<dt><kbd>W</kbd> <kbd>B</kbd></dt>
|
||||
<dd>Un an plus tard, plus tôt</dd>
|
||||
<dt><kbd>ga</kbd></dt>
|
||||
<dd>Revient à aujourd'hui</dd>
|
||||
<dt><kbd>gm</kbd></dt>
|
||||
<dd>Bascule frise et vue par mois</dd>
|
||||
<dt><kbd>Maj</kbd>+molette</dt>
|
||||
<dd>Fait défiler la frise horizontalement</dd>
|
||||
</dl>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<p class="aide__note">
|
||||
Toutes ces touches se taisent pendant une saisie : dans un champ, une
|
||||
note ou un dialogue, elles écrivent la lettre qu'elles portent.
|
||||
<kbd>Échap</kbd> referme le volet ouvert sans déplacer le curseur.
|
||||
</p>
|
||||
|
||||
<menu class="dialogue__actions">
|
||||
<button type="submit" value="ok" class="bouton--principal">Fermer</button>
|
||||
</menu>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<!-- Bandeau d'erreur bloquante : fichier corrompu, serveur injoignable. -->
|
||||
<div class="alerte" id="alerte" hidden role="alert">
|
||||
<p id="alerte-message"></p>
|
||||
|
||||
Reference in New Issue
Block a user