Add keyboard shortcuts for whiteboard tools

Offen
  • Stimmt etwas nicht?
#618 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
78/100
Issue-Typ
Feature
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
css, html, javascript
Bereich
accessibility, frontend

Rechercherichtung

Start with the existing whiteboard keyboard event listener and tool-selection functions in web/interview.js, then inspect the toolbar markup in web/interview.html and styles in web/styles.css. Add browser coverage in tests/browser/whiteboard-shortcuts.test.js for switching tools, cycling colors and sizes, returning from text mode, and ignoring typing, repeats, and shortcuts outside the whiteboard. Done when the visible labels and all listed shortcut behaviors work.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

Description

The whiteboard toolbar currently requires users to click the pen, eraser, or text controls to switch tools. Add keyboard shortcuts so users can switch tools and adjust pen colors or eraser sizes from the keyboard.

The toolbar should also display small, always visible key labels beside the relevant controls so users can discover the shortcuts.

Expected Behavior

  • Press P to switch to the pen. If the pen is already selected, pressing P cycles through black, red, blue, and green.
  • Press E to switch to the eraser. If the eraser is already selected, pressing E cycles through its available sizes.
  • Press T to switch to the text tool. Pressing T again returns to the previously used pen or eraser.
  • Display P, E, and T key labels beside the pen, eraser, and text controls.
  • Do not trigger shortcuts while the user is typing in a text input or text label.
  • Ignore held-key repeats so one press only changes the color or size once.
  • Only handle these shortcuts while the user is interacting with the whiteboard.

Proposed Solution

  • In web/interview.js, handle P, E, and T key presses in the whiteboard’s existing keyboard event listener. Reuse the current tool-selection functions to switch tools, cycle pen colors or eraser sizes, and return from the text tool to the previously selected pen or eraser. Ignore repeated key events and events from text inputs or editable elements, and only respond when the user is interacting with the whiteboard.
  • In web/interview.html, add always visible P, E, and T labels beside the pen, eraser, and text controls so users can discover the shortcuts.
  • In web/styles.css, style the labels as small keycaps that fit the existing toolbar.
  • In tests/browser/whiteboard-shortcuts.test.js, add browser tests for tool switching, color and size cycling, returning from text mode, and ignoring shortcuts while typing, holding a key, or outside the whiteboard.

Example

Image
Vorherrschende Sprache
Rust
Sterne
223
Forks
148
Ø Merge
1 T. 7 Std.
Gemergte PRs (30 T.)
225

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus sysprog21/codetrial

Alle Issues in sysprog21/codetrial

Ähnliche Issues

Weitere Issues zu Rust

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.