From a04e25a1ad79d6eea5a038d6a47ca5ad48d3465e Mon Sep 17 00:00:00 2001 From: DrMint Date: Mon, 7 Mar 2022 13:29:39 +0100 Subject: [PATCH] Added more localized texts --- src/components/AppLayout.tsx | 33 ++++++++--------- src/components/RecorderChip.tsx | 11 ++++-- src/graphql/operation.graphql | 26 ++++++++++++++ src/graphql/operations-types.ts | 26 ++++++++++++++ src/pages/contents/[slug]/index.tsx | 18 ++++++++-- src/pages/contents/[slug]/read.tsx | 56 +++++++++++++++++++++-------- src/pages/library/[slug].tsx | 10 +++--- 7 files changed, 138 insertions(+), 42 deletions(-) diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index 7fc8e42..2b2b97e 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -29,6 +29,7 @@ type AppLayoutProps = { }; export default function AppLayout(props: AppLayoutProps): JSX.Element { + const langui = props.langui; const router = useRouter(); const isMobile = useMediaMobile(); const isCoarse = useMediaCoarse(); @@ -91,7 +92,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { const metaDescription = props.description ? props.description - : props.langui.default_description; + : langui.default_description; useEffect(() => { document.getElementsByTagName("html")[0].style.fontSize = `${ @@ -166,9 +167,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {

❮

-

- {props.langui.select_option_sidebar} -

+

{langui.select_option_sidebar}

)} @@ -220,7 +219,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { className={`${mainPanelClass} border-r-[1px] mobile:bottom-20 border-black border-dotted top-0 bottom-0 left-0 right-12 overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 z-20 bg-light texture-paper-dots ${appLayout.mainPanelOpen ? "" : "mobile:-translate-x-full"}`} > - + {/* Main panel minimize button*/} @@ -270,7 +269,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { state={appLayout.languagePanelOpen} setState={appLayout.setLanguagePanelOpen} > -

{props.langui.select_language}

+

{langui.select_language}

{router.locales?.sort().map((locale) => (
-

Currency

+

{langui.currency}

appLayout.setPlayerName(e.target.value)} + onInput={(e) => + appLayout.setPlayerName((e.target as HTMLInputElement).value) + } />
diff --git a/src/components/RecorderChip.tsx b/src/components/RecorderChip.tsx index af0c644..404ca8e 100644 --- a/src/components/RecorderChip.tsx +++ b/src/components/RecorderChip.tsx @@ -1,15 +1,20 @@ import Chip from "components/Chip"; -import { GetContentTextQuery } from "graphql/operations-types"; +import { + GetContentTextQuery, + GetWebsiteInterfaceQuery, +} from "graphql/operations-types"; import Img, { ImageQuality } from "./Img"; import ReactDOMServer from "react-dom/server"; type RecorderChipProps = { className?: string; recorder: GetContentTextQuery["contents"]["data"][number]["attributes"]["text_set"][number]["transcribers"]["data"][number]; + langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"]; }; export default function RecorderChip(props: RecorderChipProps): JSX.Element { const recorder = props.recorder; + const langui = props.langui; return ( {recorder.attributes.languages.data.length > 0 && (
-

Languages:

+

{langui.languages}:

{recorder.attributes.languages.data.map((language) => ( {language.attributes.code.toUpperCase()} @@ -38,7 +43,7 @@ export default function RecorderChip(props: RecorderChipProps): JSX.Element { )} {recorder.attributes.pronouns && (
-

Pronouns:

+

{langui.pronouns}:

{recorder.attributes.pronouns}
)} diff --git a/src/graphql/operation.graphql b/src/graphql/operation.graphql index 42162e5..07d03cc 100644 --- a/src/graphql/operation.graphql +++ b/src/graphql/operation.graphql @@ -83,6 +83,32 @@ query getWebsiteInterface($language_code: String) { group_by select_option_sidebar group + settings + theme + light + auto + dark + font_size + player_name + currency + font + calculated + status_incomplete + status_draft + status_review + status_done + incomplete + draft + review + done + status + transcribers + translators + proofreaders + transcript_notice + translation_notice + source_language + pronouns } } } diff --git a/src/graphql/operations-types.ts b/src/graphql/operations-types.ts index f355568..65d7804 100644 --- a/src/graphql/operations-types.ts +++ b/src/graphql/operations-types.ts @@ -165,6 +165,32 @@ export type GetWebsiteInterfaceQuery = { group_by: string; select_option_sidebar: string; group: string; + settings: string; + theme: string; + light: string; + auto: string; + dark: string; + font_size: string; + player_name: string; + currency: string; + font: string; + calculated: string; + status_incomplete: string; + status_draft: string; + status_review: string; + status_done: string; + incomplete: string; + draft: string; + review: string; + done: string; + status: string; + transcribers: string; + translators: string; + proofreaders: string; + transcript_notice: string; + translation_notice: string; + source_language: string; + pronouns: string; }; }>; }; diff --git a/src/pages/contents/[slug]/index.tsx b/src/pages/contents/[slug]/index.tsx index f8b78cd..fcf141d 100644 --- a/src/pages/contents/[slug]/index.tsx +++ b/src/pages/contents/[slug]/index.tsx @@ -36,7 +36,6 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element { displayOn={ReturnButtonType.Desktop} horizontalLine /> - ); const contentPanel = ( @@ -96,9 +95,22 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element { langui={langui} contentPanel={contentPanel} subPanel={subPanel} - description={ - content.titles.length > 0 ? content.titles[0].description : undefined + description={`${langui.type}: ${ + content.type.data.attributes.titles.length > 0 + ? content.type.data.attributes.titles[0].title + : prettySlug(content.type.data.attributes.slug) } + ${langui.categories}: ${ + content.categories.data.length > 0 && + content.categories.data + .map((category) => { + return category.attributes.short; + }) + .join(" | ") + } + + ${content.titles.length > 0 ? content.titles[0].description : undefined} + `} /> ); } diff --git a/src/pages/contents/[slug]/read.tsx b/src/pages/contents/[slug]/read.tsx index 7f27b8f..6b30fc0 100644 --- a/src/pages/contents/[slug]/read.tsx +++ b/src/pages/contents/[slug]/read.tsx @@ -57,14 +57,14 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {

{content.text_set[0].source_language.data.attributes.code === router.locale - ? "This content is a transcript" - : "This content is a fan-translation"} + ? langui.transcript_notice + : langui.translation_notice}

{content.text_set[0].source_language.data.attributes.code !== router.locale && (
-

Source language:

+

{langui.source_language}:

@@ -283,7 +282,9 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element { "" )} - {item.metadata.length > 0 ? ( + {item.metadata.length > 0 && + item.metadata[0].__typename !== "ComponentMetadataGroup" && + item.metadata[0].__typename !== "ComponentMetadataOther" ? ( <>

{langui.type_information}

@@ -338,9 +339,6 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element { ) : item.metadata[0].__typename === "ComponentMetadataGame" ? ( <> - ) : item.metadata[0].__typename === - "ComponentMetadataGroup" ? ( - <> ) : ( "" )}