From 9dc2d3c172875f8d81baba6415ea345cadf409d8 Mon Sep 17 00:00:00 2001 From: glmdgrielson <32415403+glmdgrielson@users.noreply.github.com> Date: Tue, 5 Nov 2024 13:29:12 -0500 Subject: [PATCH] Revamp numeric text field (#550) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This SHOULD fix bug #414, in a way that doesn't look too bad. ## ✅ Changes - **refactor**: change the text display used for numeric text inputs. ## 🌄 Context Per bug #414, the prior version had a limit on how large the value in the field could be. ## 🔒Checklist - I tested my work on the feature environment --------- Co-authored-by: rpdeshaies --- cypress/e2e/route/Oracle.cy.ts | 2 +- lib/components/Page/NavLink.tsx | 1 - .../components/CircleTextField.tsx | 27 +- lib/routes/Home/HomeRoute.tsx | 759 +++++++++--------- 4 files changed, 379 insertions(+), 410 deletions(-) diff --git a/cypress/e2e/route/Oracle.cy.ts b/cypress/e2e/route/Oracle.cy.ts index e4a0d3bc..f7953f14 100644 --- a/cypress/e2e/route/Oracle.cy.ts +++ b/cypress/e2e/route/Oracle.cy.ts @@ -4,7 +4,7 @@ describe("/oracle", () => { describe("Given I want to ask a question to the oracle", () => { it("should ask questions to the oracle ", () => { Fari.start(); - Fari.getByText("Consult the Oracle").click(); + Fari.visit("/oracle"); askOracle(); diff --git a/lib/components/Page/NavLink.tsx b/lib/components/Page/NavLink.tsx index 28a81a3f..a57c3114 100644 --- a/lib/components/Page/NavLink.tsx +++ b/lib/components/Page/NavLink.tsx @@ -23,7 +23,6 @@ export function NavLink(props: { endIcon?: React.ReactNode; children: React.ReactNode; }) { - const theme = useTheme(); if (props.to) { return ( diff --git a/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx b/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx index 921b2877..02741ab9 100644 --- a/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx +++ b/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx @@ -6,12 +6,11 @@ import Fade from "@mui/material/Fade"; import IconButton from "@mui/material/IconButton"; import { useTheme } from "@mui/material/styles"; import TextField from "@mui/material/TextField"; -import React, { useContext, useState } from "react"; +import React, { useState } from "react"; import { ConditionalWrapper } from "../../../../../components/ConditionalWrapper/ConditionalWrapper"; import { Delays } from "../../../../../constants/Delays"; import { IDataCyProps } from "../../../../../domains/cypress/types/IDataCyProps"; import { useLazyState } from "../../../../../hooks/useLazyState/useLazyState"; -import { MiniThemeContext } from "../MiniThemeContext"; export function CircleTextField( props: { @@ -27,8 +26,6 @@ export function CircleTextField( onContextMenu?(event: React.MouseEvent): void; } & IDataCyProps ) { - const miniTheme = useContext(MiniThemeContext); - const theme = useTheme(); const [hover, setHover] = useState(false); const [focus, setFocus] = useState(false); @@ -100,24 +97,18 @@ export function CircleTextField( setValue(""); } else { const parsed = parseInt(e.target.value); - if (parsed > 999) { - setValue("999"); - } else { - setValue(parsed.toString()); - } + setValue(parsed.toString()); } }} InputProps={{ sx: { "cursor": cursor, - "width": "3rem", + "width": "5rem", "height": "3rem", - "borderRadius": "50%", - "border": `2px solid ${ - props.borderColor ?? miniTheme.textPrimary - }`, + "px": "0.5rem", + "font-family": "monospace", "outline": "none", - "background": props.highlight ? miniTheme.textPrimary : "inherit", + "background": (theme) => theme.palette.action.hover, "&&": { color: "inherit", }, @@ -164,7 +155,6 @@ export function CircleTextField( {!props.readonly && props.onDecrement && ( @@ -185,7 +175,6 @@ export function CircleTextField( {!props.readonly && props.onIncrement && ( diff --git a/lib/routes/Home/HomeRoute.tsx b/lib/routes/Home/HomeRoute.tsx index afcd68b4..0a7a5a86 100644 --- a/lib/routes/Home/HomeRoute.tsx +++ b/lib/routes/Home/HomeRoute.tsx @@ -1,41 +1,21 @@ -import GitHubIcon from "@mui/icons-material/GitHub"; import { Link } from "@mui/material"; import Box, { BoxProps } from "@mui/material/Box"; import Button from "@mui/material/Button"; import Container, { ContainerProps } from "@mui/material/Container"; -import Divider from "@mui/material/Divider"; import Grid from "@mui/material/Grid"; import Typography from "@mui/material/Typography"; import { ThemeProvider, useTheme } from "@mui/material/styles"; -import useMediaQuery from "@mui/material/useMediaQuery"; -import React, { useContext, useEffect } from "react"; +import React, { useEffect } from "react"; import { useNavigate } from "react-router"; -import discord from "../../../images/services/discord.png"; import lokalise from "../../../images/services/lokalise.png"; -import { AppButtonLink } from "../../components/AppLink/AppLink"; import { ConditionalWrapper } from "../../components/ConditionalWrapper/ConditionalWrapper"; -import { FateLabel } from "../../components/FateLabel/FateLabel"; -import { Kofi } from "../../components/Kofi/Kofi"; import { FariToolbarMaxWidth, Page } from "../../components/Page/Page"; import { PageMeta } from "../../components/PageMeta/PageMeta"; -import { Patreon } from "../../components/Patreon/Patreon"; import { useLogger } from "../../contexts/InjectionsContext/hooks/useLogger"; -import { MyBinderContext } from "../../contexts/MyBinderContext/MyBinderContext"; import { useHighlight } from "../../hooks/useHighlight/useHighlight"; import { useLightBackground } from "../../hooks/useLightBackground/useLightBackground"; import { useTranslate } from "../../hooks/useTranslate/useTranslate"; -const Patrons = [ - "James Micu", - "Randy Oest", - "Ryan Singer", - "Aeife O'Brien", - "David Haslem", - "Fluffydumplin", - "Lynn Jones", - "Krister Svanlund", -]; - const Sponsors: Array<{ image: string; name: string; link: string }> = [ { name: "Netlify", @@ -71,7 +51,7 @@ export const HomeRoute: React.FC<{}> = () => { const logger = useLogger(); const lightBackground = useLightBackground(); const theme = useTheme(); - const myBinderManager = useContext(MyBinderContext); + // const myBinderManager = useContext(MyBinderContext); useEffect(() => { logger.track("view_home"); @@ -176,68 +156,68 @@ export const HomeRoute: React.FC<{}> = () => { ); - function renderSupport() { - return ( - - - - {t("home-route.support-fari.description")} - - - - - - - - - - - - - - ); - } + // function renderSupport() { + // return ( + // + // + // + // {t("home-route.support-fari.description")} + // + // + // + // + // + // + // + // + // + // + // + // + // + // ); + // } - function renderPatrons() { - return ( - - - - {Patrons.map((patron, i) => { - const isLast = i === Patrons.length - 1; + // function renderPatrons() { + // return ( + // + // + // + // {Patrons.map((patron, i) => { + // const isLast = i === Patrons.length - 1; - return ( - - - {patron} - - {!isLast && ( - - {"•"} - - )} - - ); - })} - - - - - - - - - ); - } + // return ( + // + // + // {patron} + // + // {!isLast && ( + // + // {"•"} + // + // )} + // + // ); + // })} + // + // + // + // + // + // + // + // + // ); + // } function renderSponsors() { return ( @@ -273,230 +253,231 @@ export const HomeRoute: React.FC<{}> = () => { ); } - function renderFirstActionCards() { - const cards: Array = [ - { - label: t("home-route.cards.scenes.title"), - description: t("home-route.cards.scenes.description"), - ctaLabel: t("home-route.cards.scenes.cta"), - icon: (props: { className: string }) => ( - // https://icons8.com/icons/plasticine - - ), - onClick: () => { - myBinderManager.actions.open({ folder: "scenes" }); - }, - }, - { - label: t("home-route.cards.characters.title"), - description: t("home-route.cards.characters.description"), - icon: (props: { className: string }) => ( - // https://icons8.com/icons/plasticine - - ), - ctaLabel: t("home-route.cards.characters.cta"), - onClick: () => { - myBinderManager.actions.open({ folder: "characters" }); - }, - }, - { - label: t("home-route.cards.dice-roller.title"), - description: t("home-route.cards.dice-roller.description"), - ctaLabel: t("home-route.cards.dice-roller.cta"), - icon: (props: { className: string }) => ( - // https://icons8.com/icons/plasticine - - ), - to: "/dice", - }, - ]; - return ( - - - - ); - } - function renderSecondActionCards() { - const cards: Array = [ - { - label: t("home-route.cards.data.title"), - description: t("home-route.cards.data.description"), - ctaLabel: t("home-route.cards.data.cta"), - icon: (props: { className: string }) => ( - // https://icons8.com/icons/plasticine - - ), - to: "/data", - }, + // function renderFirstActionCards() { + // const cards: Array = [ + // { + // label: t("home-route.cards.scenes.title"), + // description: t("home-route.cards.scenes.description"), + // ctaLabel: t("home-route.cards.scenes.cta"), + // icon: (props: { className: string }) => ( + // // https://icons8.com/icons/plasticine + // + // ), + // onClick: () => { + // myBinderManager.actions.open({ folder: "scenes" }); + // }, + // }, + // { + // label: t("home-route.cards.characters.title"), + // description: t("home-route.cards.characters.description"), + // icon: (props: { className: string }) => ( + // // https://icons8.com/icons/plasticine + // + // ), + // ctaLabel: t("home-route.cards.characters.cta"), + // onClick: () => { + // myBinderManager.actions.open({ folder: "characters" }); + // }, + // }, + // { + // label: t("home-route.cards.dice-roller.title"), + // description: t("home-route.cards.dice-roller.description"), + // ctaLabel: t("home-route.cards.dice-roller.cta"), + // icon: (props: { className: string }) => ( + // // https://icons8.com/icons/plasticine + // + // ), + // to: "/dice", + // }, + // ]; + // return ( + // + // + // + // ); + // } - { - label: t("home-route.cards.play-solo.title"), - description: t("home-route.cards.play-solo.description"), - ctaLabel: t("home-route.cards.play-solo.cta"), + // function renderSecondActionCards() { + // const cards: Array = [ + // { + // label: t("home-route.cards.data.title"), + // description: t("home-route.cards.data.description"), + // ctaLabel: t("home-route.cards.data.cta"), + // icon: (props: { className: string }) => ( + // // https://icons8.com/icons/plasticine + // + // ), + // to: "/data", + // }, - icon: (props: { className: string }) => ( - // https://icons8.com/icons/plasticine - - ), - to: "/oracle", - }, - ]; - return ( - - - - ); - } + // { + // label: t("home-route.cards.play-solo.title"), + // description: t("home-route.cards.play-solo.description"), + // ctaLabel: t("home-route.cards.play-solo.cta"), - function renderThirdActionCards() { - const cards: Array = [ - { - label: t("home-route.cards.changelog.title"), - description: t("home-route.cards.changelog.description"), - ctaLabel: t("home-route.cards.changelog.cta"), - icon: (props: { className: string }) => ( - // https://icons8.com/icons/plasticine - - ), - to: "https://fari.canny.io/changelog", - }, - { - label: t("home-route.cards.wiki.title"), - description: t("home-route.cards.wiki.description"), - ctaLabel: t("home-route.cards.wiki.cta"), - icon: (props: { className: string }) => ( - // https://icons8.com/icons/plasticine - - ), - to: "https://fari.games/en/resources/fari-rpgs/fari-app-wiki", - }, - { - label: t("home-route.cards.fari-games.title"), - description: t("home-route.cards.fari-games.description"), - ctaLabel: t("home-route.cards.fari-games.cta"), - icon: (props: { className: string }) => ( - // https://icons8.com/icons/plasticine - - ), - to: "https://fari.games", - }, - ]; - return ( - - - - ); - } + // icon: (props: { className: string }) => ( + // // https://icons8.com/icons/plasticine + // + // ), + // to: "/oracle", + // }, + // ]; + // return ( + // + // + // + // ); + // } - function renderCommunity() { - return ( - - {/* - - - - - - - */} - - - - - - - - - - ); - } + // function renderThirdActionCards() { + // const cards: Array = [ + // { + // label: t("home-route.cards.changelog.title"), + // description: t("home-route.cards.changelog.description"), + // ctaLabel: t("home-route.cards.changelog.cta"), + // icon: (props: { className: string }) => ( + // // https://icons8.com/icons/plasticine + // + // ), + // to: "https://fari.canny.io/changelog", + // }, + // { + // label: t("home-route.cards.wiki.title"), + // description: t("home-route.cards.wiki.description"), + // ctaLabel: t("home-route.cards.wiki.cta"), + // icon: (props: { className: string }) => ( + // // https://icons8.com/icons/plasticine + // + // ), + // to: "https://fari.games/en/resources/fari-rpgs/fari-app-wiki", + // }, + // { + // label: t("home-route.cards.fari-games.title"), + // description: t("home-route.cards.fari-games.description"), + // ctaLabel: t("home-route.cards.fari-games.cta"), + // icon: (props: { className: string }) => ( + // // https://icons8.com/icons/plasticine + // + // ), + // to: "https://fari.games", + // }, + // ]; + // return ( + // + // + // + // ); + // } - function renderOpenSource() { - return ( - - - - {t("home-route.sections.open-source.description")} - - - - - - - - - - - - ); - } + // function renderCommunity() { + // return ( + // + // {/* + // + // + // + // + // + // + // */} + // + // + // + // + // + // + // + // + // + // ); + // } + + // function renderOpenSource() { + // return ( + // + // + // + // {t("home-route.sections.open-source.description")} + // + // + // + // + // + // + // + // + // + // + // + // ); + // } function renderHeading() { return ( @@ -759,92 +740,92 @@ function DarkBox(props: ILightBoxProps & { linear?: boolean }) { ); } -function HomeRouteCards(props: { cards: Array }) { - const theme = useTheme(); - const lightBackground = useLightBackground(); - const isSmall = useMediaQuery(theme.breakpoints.down("md")); +// function HomeRouteCards(props: { cards: Array }) { +// const theme = useTheme(); +// const lightBackground = useLightBackground(); +// const isSmall = useMediaQuery(theme.breakpoints.down("md")); - return ( - <> - - {props.cards.map((card, index) => { - return ( - - - - - - - - {card.label} - - - - - {card.description} - - - - - - - {card.onClick && ( - - )} - {card.to && ( - - )} - - - - ); - })} - - - ); -} +// return ( +// <> +// +// {props.cards.map((card, index) => { +// return ( +// +// +// +// +// +// +// +// {card.label} +// +// +// +// +// {card.description} +// +// +// +// +// +// +// {card.onClick && ( +// +// )} +// {card.to && ( +// +// )} +// +// +// +// ); +// })} +// +// +// ); +// }