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

Small improvements to the RecorderChip and the Transcript lines

This commit is contained in:
DrMint 2022-03-13 18:22:50 +01:00
parent b172aa34a2
commit 0c8f330f5a
4 changed files with 90 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/Markdown/Markdawn.tsx
View File

@ -1,5 +1,6 @@
import HorizontalLine from "components/HorizontalLine"; import HorizontalLine from "components/HorizontalLine";
import InsetBox from "components/InsetBox"; import InsetBox from "components/InsetBox";
import ToolTip from "components/ToolTip";
import { useAppLayout } from "contexts/AppLayoutContext"; import { useAppLayout } from "contexts/AppLayoutContext";
import Markdown from "markdown-to-jsx"; import Markdown from "markdown-to-jsx";
import { slugify } from "queries/helpers"; import { slugify } from "queries/helpers";
@ -28,28 +29,60 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
children: React.ReactNode; children: React.ReactNode;
}) => { }) => {
return ( return (
<h2 <div className="flex flex-row place-items-center place-content-center gap-3">
id={props.id} <h2 id={props.id} style={props.style}>
className="flex flex-row place-items-center place-content-center gap-3 hover:[--anchor-opacity:100] [--anchor-opacity:0]" {props.children}
style={props.style} </h2>
> <ToolTip content={"Copy anchor link"} trigger="mouseenter">
{props.children} <ToolTip content={"Copied! 👍"} trigger="click">
<abbr title="Copy anchor link"> <span
<span className="material-icons transition-color hover:text-dark cursor-pointer"
className="material-icons opacity-[var(--anchor-opacity)] transition-all hover:text-dark cursor-pointer" onClick={() => {
onClick={() => { navigator.clipboard.writeText(
navigator.clipboard.writeText( process.env.NEXT_PUBLIC_URL_SELF +
process.env.NEXT_PUBLIC_URL_SELF + window.location.pathname +
window.location.pathname + "#" +
"#" + props.id
props.id );
); }}
}} >
> link
link </span>
</span> </ToolTip>
</abbr> </ToolTip>
</h2> </div>
);
},
},
h3: {
component: (props: {
id: string;
style: React.CSSProperties;
children: React.ReactNode;
}) => {
return (
<div className="flex flex-row place-items-center place-content-center gap-3">
<h3 id={props.id} style={props.style}>
{props.children}
</h3>
<ToolTip content={"Copy anchor link"} trigger="mouseenter">
<ToolTip content={"Copied! 👍"} trigger="click">
<span
className="material-icons transition-color hover:text-dark cursor-pointer"
onClick={() => {
navigator.clipboard.writeText(
process.env.NEXT_PUBLIC_URL_SELF +
window.location.pathname +
"#" +
props.id
);
}}
>
link
</span>
</ToolTip>
</ToolTip>
</div>
); );
}, },
}, },
@ -82,7 +115,7 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
Transcript: { Transcript: {
component: (props) => { component: (props) => {
return ( return (
<div className="grid grid-cols-[auto_1fr] gap-x-6 gap-y-2"> <div className="grid grid-cols-[auto_1fr] mobile:grid-cols-1 gap-x-6 gap-y-2">
{props.children} {props.children}
</div> </div>
); );
@ -92,7 +125,7 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
component: (props) => { component: (props) => {
return ( return (
<> <>
<strong className="text-dark opacity-60"> <strong className="text-dark opacity-60 mobile:!-mb-4">
{props.name} {props.name}
</strong> </strong>
<p className="whitespace-pre-line">{props.children}</p> <p className="whitespace-pre-line">{props.children}</p>

4
src/components/Markdown/TOC.tsx
View File

@ -15,8 +15,8 @@ export default function TOC(props: TOCProps): JSX.Element {
return ( return (
<div> <div>
<h3 className="text-xl">Table of content</h3> <h3 className="text-xl">Table of content</h3>
<ol className="text-left"> <ol className="text-left max-w-[14.5rem]">
<li className="my-2 overflow-x-hidden w-full text-ellipsis whitespace-nowrap"> <li className="my-2 overflow-x-hidden relative text-ellipsis whitespace-nowrap">
<a className="" onClick={() => router.replace(`#${toc.slug}`)}> <a className="" onClick={() => router.replace(`#${toc.slug}`)}>
{<abbr title={toc.title}>{toc.title}</abbr>} {<abbr title={toc.title}>{toc.title}</abbr>}
</a> </a>

52
src/components/RecorderChip.tsx
View File

@ -3,6 +3,7 @@ import {
GetContentTextQuery, GetContentTextQuery,
GetWebsiteInterfaceQuery, GetWebsiteInterfaceQuery,
} from "graphql/operations-types"; } from "graphql/operations-types";
import Button from "./Button";
import Img, { ImageQuality } from "./Img"; import Img, { ImageQuality } from "./Img";
import ToolTip from "./ToolTip"; import ToolTip from "./ToolTip";
@ -19,41 +20,46 @@ export default function RecorderChip(props: RecorderChipProps): JSX.Element {
return ( return (
<ToolTip <ToolTip
content={ content={
<div className="p-2 py-5 grid gap-2"> <div className="text-left p-2 py-5 grid gap-8">
<div className="grid grid-flow-col gap-2 place-items-center place-content-start"> <div className="grid grid-flow-col gap-6 place-items-center place-content-start">
{recorder.attributes.avatar.data && ( {recorder.attributes.avatar.data && (
<Img <Img
className="w-8 rounded-full" className="w-20 rounded-full border-4 border-mid"
image={recorder.attributes.avatar.data.attributes} image={recorder.attributes.avatar.data.attributes}
quality={ImageQuality.Small} quality={ImageQuality.Small}
rawImg rawImg
/> />
)} )}
<h3 className="text-xl">{recorder.attributes.username}</h3> <div className="grid gap-2">
<h3 className=" text-2xl">{recorder.attributes.username}</h3>
{recorder.attributes.languages.data.length > 0 && (
<div className="flex flex-row flex-wrap gap-1">
<p>{langui.languages}:</p>
{recorder.attributes.languages.data.map((language) => (
<Chip key={language.attributes.code}>
{language.attributes.code.toUpperCase()}
</Chip>
))}
</div>
)}
{recorder.attributes.pronouns && (
<div className="flex flex-row flex-wrap gap-1">
<p>{langui.pronouns}:</p>
<Chip>{recorder.attributes.pronouns}</Chip>
</div>
)}
</div>
</div> </div>
{recorder.attributes.languages.data.length > 0 && (
<div className="flex flex-row flex-wrap gap-1"> {recorder.attributes.bio.length > 0 && (
<p>{langui.languages}:</p> <p>{recorder.attributes.bio[0].bio}</p>
{recorder.attributes.languages.data.map((language) => (
<Chip key={language.attributes.code}>
{language.attributes.code.toUpperCase()}
</Chip>
))}
</div>
)} )}
{recorder.attributes.pronouns && (
<div className="flex flex-row flex-wrap gap-1"> <Button className="cursor-not-allowed">View profile</Button>
<p>{langui.pronouns}:</p>
<Chip>{recorder.attributes.pronouns}</Chip>
</div>
)}
<p>
{recorder.attributes.bio.length > 0 &&
recorder.attributes.bio[0].bio}
</p>
</div> </div>
} }
placement="top" placement="top"
trigger="click"
> >
<Chip key={recorder.id}> <Chip key={recorder.id}>
{recorder.attributes.anonymize {recorder.attributes.anonymize

3
src/components/ToolTip.tsx
View File

@ -11,8 +11,9 @@ export default function ToolTip(props: ToolTipProps): JSX.Element {
if (newProps.interactive === undefined) newProps.interactive = true; if (newProps.interactive === undefined) newProps.interactive = true;
if (newProps.animation === undefined) newProps.animation = "scale-subtle"; if (newProps.animation === undefined) newProps.animation = "scale-subtle";
return ( return (
<Tippy {...newProps}> <Tippy className={`text-[80%] ${newProps.className}`} {...newProps}>
<div>{props.children}</div> <div>{props.children}</div>
</Tippy> </Tippy>
); );