Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add shortcuts for save and search focus #552

Merged
2 commits merged into from
Aug 5, 2022
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion frontend/src/components/QuickAdd.tsx
Original file line number Diff line number Diff line change
@@ -11,10 +11,12 @@ export const QuickAdd = ({
addIssueActivity,
toastList,
onToastListUpdate,
issueInputRef,
}: {
addIssueActivity: (pair: IssueActivityPair) => void;
toastList: ToastMsg[];
onToastListUpdate: (newToast: ToastMsg) => void;
issueInutRef: React.RefObject<HTMLInputElement>;
}) => {
const [activities, setActivities] = useState<IdName[]>([]);
const [issue, setIssue] = useState<Issue>(null);
@@ -204,7 +206,6 @@ export const QuickAdd = ({

const suggestionsRef = useRef(null);
useEscaper(suggestionsRef, handleHideAutocomplete);
const issueInputRef = useRef(null);

const handleInputToAutocompleteFocus = (event: any) => {
event.preventDefault();
@@ -254,6 +255,7 @@ export const QuickAdd = ({
<div className="row">
<input
id="input-issue"
aria-keyshortcuts="ctrl+a"
ref={issueInputRef}
autoComplete="off"
className={getSearchClasses()}
21 changes: 17 additions & 4 deletions frontend/src/pages/Help.tsx
Original file line number Diff line number Diff line change
@@ -86,10 +86,10 @@ export const Help = () => {
</p>
<p className="help-info">
Favourite rows can be given a custom name by editing the text area
next to the issue number. The custom name is only saved after clicking
on the <b>"Save Changes"</b> button. The original names of the rows
can be seen after hovering over the text area. When unfavouriting a
row, the custom name is reset to the original name.
next to the issue number. The custom name is saved after switching the
focus to another element on the page, or clicking away. The original
names of the rows can be seen after hovering over the text area. When
unfavouriting a row, the custom name is reset to the original name.
</p>
<Row
key={1}
@@ -228,6 +228,19 @@ export const Help = () => {
className="weektravel-img"
/>
</div>
<h2 className="help-subtitle">Keyboard shortcuts</h2>
<p className="help-info">
The following keyboard shortcuts are currently available when
navigating on the spreadsheet:
</p>
<ul className="help-info">
<li>
<b>Ctrl + S</b> - Save changes
</li>
<li>
<b>Ctrl + A</b> - Switch the focus to the issue search component
</li>
</ul>
<h2 className="help-subtitle">Known limitations</h2>
<h3 className="help-h3">Double time entries</h3>
<p className="help-info">
24 changes: 21 additions & 3 deletions frontend/src/pages/Report.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, { useEffect, useState, useRef } from "react";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import {
format as formatDate,
@@ -651,6 +651,8 @@ export const Report = () => {

if (context.user === null) return <></>;

const issueInputRef = useRef(null);

// Main content
return (
<>
@@ -680,7 +682,18 @@ export const Report = () => {
/>
<HeaderUser username={context.user ? context.user.login : ""} />
</header>
<main className="spreadsheet">
<main
className="spreadsheet"
onKeyDown={(e) => {
if (e.key.toLowerCase() === "s" && e.ctrlKey) {
e.preventDefault();
handleSave();
} else if (e.key.toLowerCase() === "a" && e.ctrlKey) {
e.preventDefault();
issueInputRef.current.focus();
}
}}
>
{favorites && favorites.length > 0 && (
<DragDropContext onDragEnd={onDragEnd}>
<section className="favorites-container">
@@ -858,6 +871,7 @@ export const Report = () => {
addIssueActivity={addIssueActivityHandler}
toastList={toastList}
onToastListUpdate={handleToastListUpdate}
issueInputRef={issueInputRef}
></QuickAdd>
</div>
{toastList.length > 0 && (
@@ -869,7 +883,11 @@ export const Report = () => {
<p role="status">⚠ You have unsaved changes</p>
)}
</div>
<button className="basic-button save-button" onClick={handleSave}>
<button
className="basic-button save-button"
aria-keyshortcuts="ctrl+s"
onClick={handleSave}
>
Save changes
</button>
</div>