From 7c5fb7d5e7cbbb56bdc3ad89a7fdb3a69221516d Mon Sep 17 00:00:00 2001 From: Eric Anderson Date: Thu, 12 Oct 2023 17:07:09 -0700 Subject: [PATCH] kiosk: use button control from react common --- kiosk/src/Components/AddingGame.tsx | 22 +++++++---- kiosk/src/Components/ErrorModal.tsx | 10 ++--- kiosk/src/Components/GameMenu.tsx | 5 +-- kiosk/src/Components/GameOver.tsx | 14 ++++--- kiosk/src/Components/GameSlide.tsx | 4 +- kiosk/src/Components/GenericButton.tsx | 54 +++++++++++++------------- kiosk/src/Components/MainMenu.tsx | 6 +-- kiosk/src/Components/Modal.tsx | 6 +-- kiosk/src/Components/ScanQR.tsx | 37 +++++++++--------- kiosk/src/Hooks/useMakeNavigable.ts | 5 +++ kiosk/src/Kiosk.css | 29 +++++++------- 11 files changed, 104 insertions(+), 88 deletions(-) diff --git a/kiosk/src/Components/AddingGame.tsx b/kiosk/src/Components/AddingGame.tsx index 54967faa6632..70d9fabc5857 100644 --- a/kiosk/src/Components/AddingGame.tsx +++ b/kiosk/src/Components/AddingGame.tsx @@ -73,14 +73,14 @@ const AddingGame: React.FC = ({}) => {

{kiosk.kioskCode}

- -
{kioskUrl}
- + tabIndex={-1} + />
); @@ -100,7 +100,9 @@ const AddingGame: React.FC = ({}) => {

{lf("How to upload your game")}

    -
  1. {lf("Use your mobile device to scan the QR code")}
    2. +
  2. + {lf("Use your mobile device to scan the QR code")} +
  3. {lf("Use the new page to scan or enter your game's share code")}
    4. @@ -112,8 +114,12 @@ const AddingGame: React.FC = ({}) => {
    {qrDivContent()}
    - - {lf("Return to menu")} +
); diff --git a/kiosk/src/Components/ErrorModal.tsx b/kiosk/src/Components/ErrorModal.tsx index a6c98ebe13a7..a8ceaa829fc3 100644 --- a/kiosk/src/Components/ErrorModal.tsx +++ b/kiosk/src/Components/ErrorModal.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { Button } from "../../../react-common/components/controls/Button"; interface IProps { errorType: string; @@ -26,12 +26,12 @@ const ErrorModal: React.FC = ({

{errorDescription}

- + />
diff --git a/kiosk/src/Components/GameMenu.tsx b/kiosk/src/Components/GameMenu.tsx index c924964ca4b8..eaf302f2177a 100644 --- a/kiosk/src/Components/GameMenu.tsx +++ b/kiosk/src/Components/GameMenu.tsx @@ -17,9 +17,7 @@ export const GameMenu: React.FC = () => { [kiosk.allGames, selectedGameId] ); - const handleDeleteClick = (ev?: React.MouseEvent) => { - ev?.preventDefault(); - ev?.stopPropagation(); + const handleDeleteClick = () => { if (game) { GamepadManager.lockControl(GamepadManager.GamepadControl.AButton); dispatch(showModal(makeDeleteGameModal(game.id))); @@ -30,6 +28,7 @@ export const GameMenu: React.FC = () => {
{game?.userAdded && !kiosk.locked && ( = ({}) => {

{lf("Would you like to retry?")}

- {lf("Retry")} - - - {lf("Main Menu")} - + /> +
); diff --git a/kiosk/src/Components/GameSlide.tsx b/kiosk/src/Components/GameSlide.tsx index dfc439e3412c..c18ea5fbd5f6 100644 --- a/kiosk/src/Components/GameSlide.tsx +++ b/kiosk/src/Components/GameSlide.tsx @@ -13,12 +13,10 @@ interface IProps { const GameSlide: React.FC = ({ game }) => { const { state: kiosk } = useContext(AppStateContext); - const handleSlideClick = (ev?: React.MouseEvent) => { + const handleSlideClick = () => { pxt.tickEvent("kiosk.gameLaunched", { game: game.id }); playSoundEffect("select"); launchGame(game.id); - ev?.preventDefault(); - ev?.stopPropagation(); }; return ( diff --git a/kiosk/src/Components/GenericButton.tsx b/kiosk/src/Components/GenericButton.tsx index 1784099ac289..460436990177 100644 --- a/kiosk/src/Components/GenericButton.tsx +++ b/kiosk/src/Components/GenericButton.tsx @@ -3,23 +3,34 @@ import { useMakeNavigable } from "../Hooks"; import { classList } from "../Utils"; import * as GamepadManager from "../Services/GamepadManager"; import * as NavGrid from "../Services/NavGrid"; +import { + Button, + ButtonProps, +} from "../../../react-common/components/controls/Button"; -interface IProps extends React.PropsWithChildren<{}> { - className?: string; +interface IProps extends ButtonProps { classNameReplace?: string; autofocus?: boolean; - onClick?: (ev?: React.MouseEvent) => void; exitDirections?: NavGrid.NavDirection[]; } -const GenericButton: React.FC = ({ - children, - className, - classNameReplace, - autofocus, - onClick, - exitDirections, -}) => { +const GenericButton: React.FC = (props: IProps) => { + const { + children, + className, + classNameReplace, + autofocus, + onClick, + exitDirections, + } = props; + + const tabIndex = props.tabIndex !== undefined ? props.tabIndex : 0; + + const classes = classList( + classNameReplace ? classNameReplace : "kioskButton", + className + ); + const [myRef, setMyRef] = useState(null); const handleKeyDown = useCallback( @@ -37,20 +48,11 @@ const GenericButton: React.FC = ({ [myRef] ); - const handleClick = (ev: React.MouseEvent) => { - onClick?.(ev); - }; - const handleRef = useCallback((node: HTMLElement | null) => { setMyRef(node); }, []); - useMakeNavigable(myRef, { autofocus, exitDirections }); - - const classes = classList( - classNameReplace ? classNameReplace : "kioskButton", - className - ); + useMakeNavigable(myRef, { autofocus, exitDirections, tabIndex }); useEffect(() => { GamepadManager.addKeydownListener(handleKeyDown); @@ -59,14 +61,14 @@ const GenericButton: React.FC = ({ return ( <> - + ); }; diff --git a/kiosk/src/Components/MainMenu.tsx b/kiosk/src/Components/MainMenu.tsx index 18a43e3f0ba6..6dfdada413c0 100644 --- a/kiosk/src/Components/MainMenu.tsx +++ b/kiosk/src/Components/MainMenu.tsx @@ -42,11 +42,11 @@ const MainMenu: React.FC = ({}) => { {!kiosk.locked && (
- {lf("Add your game")} - + />
)} diff --git a/kiosk/src/Components/Modal.tsx b/kiosk/src/Components/Modal.tsx index 332387a52b1e..d582126c90a6 100644 --- a/kiosk/src/Components/Modal.tsx +++ b/kiosk/src/Components/Modal.tsx @@ -56,12 +56,12 @@ export const Modal = (props: ModalProps) => {
{actions.map((action, index) => ( - {action.label} - + /> ))}
)} diff --git a/kiosk/src/Components/ScanQR.tsx b/kiosk/src/Components/ScanQR.tsx index a63cf9e89145..b2b0ea24d6a0 100644 --- a/kiosk/src/Components/ScanQR.tsx +++ b/kiosk/src/Components/ScanQR.tsx @@ -8,6 +8,7 @@ import { navigate } from "../Transforms/navigate"; import { useMakeNavigable } from "../Hooks"; import GenericButton from "./GenericButton"; import * as GamepadManager from "../Services/GamepadManager"; +import { Button } from "../../../react-common/components/controls/Button"; interface IProps {} @@ -120,10 +121,10 @@ const ScanQR: React.FC = ({}) => { }; useMakeNavigable(shareLinkRef); - const [helpLinkRef, setHelpLinkRef] = useState( + const [helpLinkRef, setHelpLinkRef] = useState( null ); - const handleHelpLinkRef = (input: HTMLAnchorElement) => { + const handleHelpLinkRef = (input: HTMLButtonElement) => { setHelpLinkRef(input); }; useMakeNavigable(helpLinkRef); @@ -139,21 +140,21 @@ const ScanQR: React.FC = ({}) => {
{!scannerVisible && ( - {lf("Scan QR code")} - + /> )}
{scannerVisible && (
- {lf("Cancel Scan")} - + />

{lf("Tip: Do not use the kiosk's QR code")}

@@ -186,16 +187,16 @@ const ScanQR: React.FC = ({}) => {

)}
- - {lf("How do I get a game's share link or QR code?")} - +
+ +
{!!addingError && ( { const unregister = NavGrid.registerNavigable(ref, opts); diff --git a/kiosk/src/Kiosk.css b/kiosk/src/Kiosk.css index 50df7a582f95..696ffb3dcefc 100644 --- a/kiosk/src/Kiosk.css +++ b/kiosk/src/Kiosk.css @@ -320,15 +320,16 @@ h2 { .QRCodeHolder { } -.kioskLink a { +.kioskLink button { overflow: auto; overflow-wrap: break-word; + text-decoration: underline; + line-height: 1.1rem; + max-width: 16rem; } .kioskLink { - margin: 2rem 0 0 0; - text-align: center; - line-height: 170%; + max-width: 16rem; } .innerQRCodeContent h3 { @@ -355,10 +356,6 @@ h2 { text-align: center; } -.kioskLinkContent { - max-width: 16rem; -} - /* -------- QR PAGES STYLING -------- */ /* ----------------------------------- */ @@ -368,6 +365,7 @@ h2 { align-items: center; width: 100%; height: 100vh; + padding: 0 1rem; } .scanInstructions { @@ -450,7 +448,7 @@ h2 { .linkOption { border-color: var(--button-border-color); border-style: solid; - border-radius: 1.5rem; + border-radius: 0.625rem; padding: 2rem; width: 350px; } @@ -493,12 +491,17 @@ h2 { color: var(--error-color); } -.shareHelp { +.shareHelp button { overflow: auto; overflow-wrap: break-word; - font-family: "Share"; - font-size: 1.25rem; - margin-top: 2rem; + text-decoration: underline; + border: none; + line-height: 1.1rem; + font-size: 0.75rem; +} + +.shareHelp { + margin: 2rem 0 0 0; } .scanTip {