diff --git a/src/components/Chronology/ChronologyItemComponent.tsx b/src/components/Chronology/ChronologyItemComponent.tsx index 4bbc44c..4e1bcad 100644 --- a/src/components/Chronology/ChronologyItemComponent.tsx +++ b/src/components/Chronology/ChronologyItemComponent.tsx @@ -1,17 +1,25 @@ import Chip from "components/Chip"; +import ToolTip from "components/ToolTip"; import { Enum_Componenttranslationschronologyitem_Status, GetChronologyItemsQuery, + GetWebsiteInterfaceQuery, } from "graphql/operations-types"; +import { getStatusDescription } from "queries/helpers"; +import { useState } from "react"; export type ChronologyItemComponentProps = { item: GetChronologyItemsQuery["chronologyItems"]["data"][number]; displayYear: boolean; + langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"]; }; export default function ChronologyItemComponent( props: ChronologyItemComponentProps ): JSX.Element { + const { langui } = props; + const [statusHovered, setStatusHovered] = useState(false); + function generateAnchor(year: number, month: number, day: number): string { let result: string = ""; result += year; @@ -85,7 +93,23 @@ export default function ChronologyItemComponent(
{translation.status !== Enum_Componenttranslationschronologyitem_Status.Done && ( - {translation.status} + setStatusHovered(true)} + onMouseLeave={() => setStatusHovered(false)} + > + {translation.status} + +

+ {getStatusDescription(translation.status, langui)} +

+ + )} {translation.title ?

{translation.title}

: ""}
diff --git a/src/components/Chronology/ChronologyYearComponent.tsx b/src/components/Chronology/ChronologyYearComponent.tsx index 8136ac0..d4cfbd0 100644 --- a/src/components/Chronology/ChronologyYearComponent.tsx +++ b/src/components/Chronology/ChronologyYearComponent.tsx @@ -1,14 +1,20 @@ import ChronologyItemComponent from "components/Chronology/ChronologyItemComponent"; -import { GetChronologyItemsQuery } from "graphql/operations-types"; +import { + GetChronologyItemsQuery, + GetWebsiteInterfaceQuery, +} from "graphql/operations-types"; type ChronologyYearComponentProps = { year: number; items: GetChronologyItemsQuery["chronologyItems"]["data"][number][]; + langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"]; }; export default function ChronologyYearComponent( props: ChronologyYearComponentProps ): JSX.Element { + const { langui } = props; + return (
))}
diff --git a/src/components/Panels/SubPanel.tsx b/src/components/Panels/SubPanel.tsx index f1fcde4..be36a28 100644 --- a/src/components/Panels/SubPanel.tsx +++ b/src/components/Panels/SubPanel.tsx @@ -4,7 +4,7 @@ type SubPanelProps = { export default function SubPanel(props: SubPanelProps): JSX.Element { return ( -
+
{props.children}
); diff --git a/src/components/ToolTip.tsx b/src/components/ToolTip.tsx index db41220..eeadec6 100644 --- a/src/components/ToolTip.tsx +++ b/src/components/ToolTip.tsx @@ -3,15 +3,17 @@ import { useEffect, useState } from "react"; type ToolTipProps = { hovered: boolean; children: React.ReactNode; - delayShow?: number; direction: "right" | "bottom" | "top" | "left"; offset: string; + delayShow?: number; + maxWidth?: "max-w-[10rem]" | "max-w-xs" | "max-w-sm" | "max-w-md"; }; export default function ToolTip(props: ToolTipProps): JSX.Element { const { children, hovered, direction, offset } = props; - let { delayShow } = props; - if (delayShow === undefined) delayShow = 500; + let { delayShow, maxWidth } = props; + if (delayShow === undefined) delayShow = 300; + if (maxWidth === undefined) maxWidth = "max-w-sm"; const [show, setShow] = useState(false); @@ -62,7 +64,7 @@ export default function ToolTip(props: ToolTipProps): JSX.Element { return (
-
{children}
+
{children}
); } diff --git a/src/pages/contents/[slug]/read.tsx b/src/pages/contents/[slug]/read.tsx index d30be0d..b45f324 100644 --- a/src/pages/contents/[slug]/read.tsx +++ b/src/pages/contents/[slug]/read.tsx @@ -14,6 +14,7 @@ import ThumbnailHeader from "components/Content/ThumbnailHeader"; import AppLayout from "components/AppLayout"; import Markdawn from "components/Markdown/Markdawn"; import { + getStatusDescription, prettyinlineTitle, prettyLanguage, prettySlug, @@ -26,6 +27,8 @@ import Chip from "components/Chip"; import RecorderChip from "components/RecorderChip"; import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps"; import TOC from "components/Markdown/TOC"; +import ToolTip from "components/ToolTip"; +import { useState } from "react"; interface ContentReadProps extends AppStaticProps { content: GetContentTextQuery["contents"]["data"][number]["attributes"]; @@ -37,6 +40,8 @@ export default function ContentRead(props: ContentReadProps): JSX.Element { const { langui, content, languages } = props; const router = useRouter(); + const [statusHovered, setStatusHovered] = useState(false); + const subPanel = (

{langui.status}:

- {content.text_set[0].status} + setStatusHovered(true)} + onMouseLeave={() => setStatusHovered(false)} + > + {content.text_set[0].status} + +

+ {getStatusDescription(content.text_set[0].status, langui)} +

+ + {content.text_set[0].transcribers.data.length > 0 && ( diff --git a/src/pages/wiki/chronology.tsx b/src/pages/wiki/chronology.tsx index 600ffcf..f31f9e4 100644 --- a/src/pages/wiki/chronology.tsx +++ b/src/pages/wiki/chronology.tsx @@ -25,7 +25,7 @@ interface ChronologyProps extends AppStaticProps { export default function Chronology(props: ChronologyProps): JSX.Element { useTesting(props); - const { chronologyItems, chronologyEras } = props; + const { chronologyItems, chronologyEras, langui } = props; // Group by year the Chronology items let chronologyItemYearGroups: GetChronologyItemsQuery["chronologyItems"]["data"][number][][][] = @@ -102,6 +102,7 @@ export default function Chronology(props: ChronologyProps): JSX.Element { key={`${eraIndex}-${index}`} year={items[0].attributes.year} items={items} + langui={langui} /> ))} diff --git a/src/queries/helpers.ts b/src/queries/helpers.ts index a3e2800..9e7200c 100644 --- a/src/queries/helpers.ts +++ b/src/queries/helpers.ts @@ -4,6 +4,7 @@ import { ImageQuality, } from "components/Img"; import { + Enum_Componentsetstextset_Status, GetCurrenciesQuery, GetLanguagesQuery, GetLibraryItemQuery, @@ -251,6 +252,28 @@ export function sortContent( }); } +export function getStatusDescription( + status: string, + langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"] +): string { + switch (status) { + case Enum_Componentsetstextset_Status.Incomplete: + return langui.status_incomplete; + + case Enum_Componentsetstextset_Status.Draft: + return langui.status_draft; + + case Enum_Componentsetstextset_Status.Review: + return langui.status_review; + + case Enum_Componentsetstextset_Status.Done: + return langui.status_done; + + default: + return ""; + } +} + export function slugify(str: string): string { return str .replace(/[ÀÁÂÃÄÅàáâãäåæÆ]/g, "a")