Accords-Library-Archive/accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

Added tooltips in more places

Browse Source
This commit is contained in:
DrMint 2022-03-13 03:00:38 +01:00
parent 4b30dac878
commit 3873ef44f9
7 changed files with 88 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/Chronology/ChronologyItemComponent.tsx
View File

@ -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(
<div className="place-items-start place-content-start grid grid-flow-col gap-2">
{translation.status !==
Enum_Componenttranslationschronologyitem_Status.Done && (
<Chip>{translation.status}</Chip>
<Chip
onMouseEnter={() => setStatusHovered(true)}
onMouseLeave={() => setStatusHovered(false)}
>
{translation.status}
<ToolTip
direction="top"
hovered={statusHovered}
offset={"1.5rem"}
maxWidth="max-w-[10rem]"
delayShow={100}
>
<p>
{getStatusDescription(translation.status, langui)}
</p>
</ToolTip>
</Chip>
)}
{translation.title ? <h3>{translation.title}</h3> : ""}
</div>

9
src/components/Chronology/ChronologyYearComponent.tsx
View File

@ -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 (
<div
className="target:bg-mid rounded-2xl target:py-4 target:my-4"
@ -19,6 +25,7 @@ export default function ChronologyYearComponent(
key={index}
item={item}
displayYear={index === 0}
langui={langui}
/>
))}
</div>

2
src/components/Panels/SubPanel.tsx
View File

@ -4,7 +4,7 @@ type SubPanelProps = {
export default function SubPanel(props: SubPanelProps): JSX.Element {
return (
<div className="grid pt-10 pb-20 px-6 desktop:py-8 desktop:px-10 gap-y-2 justify-items-center text-center">
<div className="grid pt-10 pb-20 px-6 desktop:py-8 desktop:px-10 gap-y-2 text-center">
{props.children}
</div>
);

12
src/components/ToolTip.tsx
View File

@ -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 (
<div
className={`fixed z-[100] drop-shadow-shade-xl transition-opacity max-w-sm ${
className={`fixed z-[100] drop-shadow-shade-xl transition-opacity ${maxWidth} ${
show
? "opacity-100 pointer-events-auto"
: "opacity-0 pointer-events-none"
@ -74,7 +76,7 @@ export default function ToolTip(props: ToolTipProps): JSX.Element {
className={`w-0 h-0 border-8 border-[transparent] place-self-center ${arrowCSS}`}
/>
</div>
<div className="p-2 px-4 bg-light rounded-md">{children}</div>
<div className="p-4 px-6 bg-light rounded-md">{children}</div>
</div>
);
}

23
src/pages/contents/[slug]/read.tsx
View File

@ -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 = (
<SubPanel>
<ReturnButton
@ -77,7 +82,23 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
<div className="grid grid-flow-col place-items-center place-content-center gap-2">
<p className="font-headers">{langui.status}:</p>
<Chip>{content.text_set[0].status}</Chip>
<Chip
onMouseEnter={() => setStatusHovered(true)}
onMouseLeave={() => setStatusHovered(false)}
>
{content.text_set[0].status}
<ToolTip
direction="top"
hovered={statusHovered}
offset={"1.5rem"}
maxWidth="max-w-[10rem]"
delayShow={100}
>
<p>
{getStatusDescription(content.text_set[0].status, langui)}
</p>
</ToolTip>
</Chip>
</div>
{content.text_set[0].transcribers.data.length > 0 && (

3
src/pages/wiki/chronology.tsx
View File

@ -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}
/>
))}
</>

23
src/queries/helpers.ts
View File

@ -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")