heartwood every commit a ring

Improve keyboard shortcuts design

04f15f7e by Isaac Bythewood · 6 years ago

modified components/HotKeysMapping.js
@@ -1,6 +1,8 @@import React, { useState, useContext } from "react";import React, { useContext } from "react";import { useRouter } from "next/router";import { HotKeys, configure } from "react-hotkeys";import PropTypes from "prop-types";import { Context } from "../components/context";configure({
@@ -10,7 +12,7 @@ configure({const keyMap = {  RESET: "alt+r",  ADD_LOG: "alt+a",  TIMER_PAGE: "alt+m",  TIMER_PAGE: "alt+t",  LOG_PAGE: "alt+l",  ABOUT_PAGE: "alt+o",  CLEAR_LOG: "alt+c"
@@ -21,12 +23,15 @@ const HotKeysMapping = props => {  const router = useRouter();  const handlers = {    RESET: event => dispatch({ type: "NEW_TIMER" }),    ADD_LOG: event => dispatch({ type: "ADD_LOG", note: state.note }),    TIMER_PAGE: event => router.push("/"),    LOG_PAGE: event => router.push("/log"),    ABOUT_PAGE: event => router.push("/about"),    CLEAR_LOG: event => dispatch({ type: "CLEAR_LOG" })    RESET: () => dispatch({ type: "NEW_TIMER" }),    ADD_LOG: () => dispatch({ type: "ADD_LOG", note: state.note }),    TIMER_PAGE: event => {      event.preventDefault();      router.push("/");    },    LOG_PAGE: () => router.push("/log"),    ABOUT_PAGE: () => router.push("/about"),    CLEAR_LOG: () => dispatch({ type: "CLEAR_LOG" })  };  return (
@@ -36,4 +41,11 @@ const HotKeysMapping = props => {  );};HotKeysMapping.propTypes = {  children: PropTypes.oneOfType([    PropTypes.element,    PropTypes.arrayOf(PropTypes.element)  ])};export default HotKeysMapping;
modified l10n/about.js
@@ -9,16 +9,16 @@ const strings = new LocalizedStrings({    sectionTimer: "Timer",    sectionNavigation: "Navigation",    sectionLog: "Log",    keyReset: "alt+r - reset timer",    keyAddLog: "alt+a - add log entry",    keyTimerPage: "alt+t - move to timer page",    keyLogPage: "alt+l - move to log page",    keyAboutPage: "alt+o - move to about page",    keyNextLogEntry: "ArrowDown - move to next log entry",    keyPreviousLogEntry: "ArrowUp - move to previous log entry",    keyEditEntry: "alt+e - edit log entry",    keyDeleteSingleEntry: "alt+d - delete single log entry",    keyClearLog: "alt+c - clear all log entries",    keyReset: "Reset timer",    keyAddLog: "Add log entry",    keyTimerPage: "Move to timer page",    keyLogPage: "Move to log page",    keyAboutPage: "Move to about page",    keyNextLogEntry: "Move to next log entry",    keyPreviousLogEntry: "Move to previous log entry",    keyEditEntry: "Edit log entry",    keyDeleteSingleEntry: "Delete single log entry",    keyClearLog: "Clear all log entries"  },  // None of this is accurate past this line, someone please help me translate...  jp: {
@@ -35,16 +35,16 @@ const strings = new LocalizedStrings({    sectionTimer: "Zegar",    sectionNavigation: "Nawigacja",    sectionLog: "Dziennik",    keyReset: "alt+r - zerowanie zagara",    keyAddLog: "alt+a - dodaj wpis do dziennika",    keyTimerPage: "alt+t - przejdź na stronę zegara",    keyLogPage: "alt+l - przejdź na stronę dziennika",    keyAboutPage: "alt+o - przejdź na stronę o timelite",    keyNextLogEntry: "ArrowDown - przejdź do następnego wpisu",    keyPreviousLogEntry: "ArrowUp - przejdź do poprzedniego wpisu",    keyEditEntry: "alt+e - edytuj wpis dziennika",    keyDeleteSingleEntry: "alt+d - skasuj pojedynczy wpis dziennika",    keyClearLog: "alt+c - wyczyść wszystkie wpisy dziennika",    keyReset: "Zerowanie zagara",    keyAddLog: "Dodaj wpis do dziennika",    keyTimerPage: "Przejdź na stronę zegara",    keyLogPage: "Przejdź na stronę dziennika",    keyAboutPage: "Przejdź na stronę o timelite",    keyNextLogEntry: "Przejdź do następnego wpisu",    keyPreviousLogEntry: "Przejdź do poprzedniego wpisu",    keyEditEntry: "Edytuj wpis dziennika",    keyDeleteSingleEntry: "Skasuj pojedynczy wpis dziennika",    keyClearLog: "Wyczyść wszystkie wpisy dziennika"  }});
modified pages/about.js
@@ -32,20 +32,40 @@ const About = () => {          <DescriptionContainer>            <KeysColumn>              <SectionTitle>Timer</SectionTitle>              <KeysDescription>{strings.keyReset}</KeysDescription>              <KeysDescription>{strings.keyAddLog}</KeysDescription>              <KeysDescription>                <span>⎇+r</span> {strings.keyReset}              </KeysDescription>              <KeysDescription>                <span>⎇+a</span> {strings.keyAddLog}              </KeysDescription>              <SectionTitle>Navigation</SectionTitle>              <KeysDescription>{strings.keyTimerPage}</KeysDescription>              <KeysDescription>{strings.keyLogPage}</KeysDescription>              <KeysDescription>{strings.keyAboutPage}</KeysDescription>              <KeysDescription>                <span>⎇+t</span> {strings.keyTimerPage}              </KeysDescription>              <KeysDescription>                <span>⎇+l</span> {strings.keyLogPage}              </KeysDescription>              <KeysDescription>                <span>⎇+o</span> {strings.keyAboutPage}              </KeysDescription>            </KeysColumn>            <KeysColumn>              <SectionTitle>Log</SectionTitle>              <KeysDescription>{strings.keyNextLogEntry}</KeysDescription>              <KeysDescription>{strings.keyPreviousLogEntry}</KeysDescription>              <KeysDescription>{strings.keyEditEntry}</KeysDescription>              <KeysDescription>{strings.keyDeleteSingleEntry}</KeysDescription>              <KeysDescription>{strings.keyClearLog}</KeysDescription>              <KeysDescription>                <span>↓</span> {strings.keyNextLogEntry}              </KeysDescription>              <KeysDescription>                <span>↑</span> {strings.keyPreviousLogEntry}              </KeysDescription>              <KeysDescription>                <span>⎇+e</span> {strings.keyEditEntry}              </KeysDescription>              <KeysDescription>                <span>⎇+d</span> {strings.keyDeleteSingleEntry}              </KeysDescription>              <KeysDescription>                <span>⎇+c</span> {strings.keyClearLog}              </KeysDescription>            </KeysColumn>          </DescriptionContainer>        </Main>
@@ -164,7 +184,7 @@ const Blockquote = styled.blockquote``;const Creator = styled.a`  font-size: 1em;  font-size: 1.5em;  display: block;  margin-left: auto;  opacity: 0.7;
@@ -245,7 +265,6 @@ const SectionTitle = styled.h2`const KeysDescription = styled.div`  font-size: 1em;  position: relative;  margin-left: 1em;  opacity: 0;  animation-name: ${FadeRight};  animation-fill-mode: forwards;
@@ -254,6 +273,15 @@ const KeysDescription = styled.div`  animation-timing-function: ease-out;  margin-bottom: 0;  span {    width: 45px;    display: inline-block;    background: rgba(255, 255, 255, 0.3);    font-family: monospace;    text-align: center;    font-size: 1.1em;  }  @media (${props => props.theme.breakpoint}) {    font-size: 1.2em;  }