Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add TruncatedTextTooltip component #300

Merged
merged 2 commits into from
Jan 10, 2025
Merged

Add TruncatedTextTooltip component #300

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d816e21
Add TruncatedTextTooltip component
florence-wolfe Jan 10, 2025
07133cd
add remaining truncated text tooltip to replace text-truncated class
florence-wolfe Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 52 additions & 34 deletions app/[username]/wrapped/sections/wrapped-runs-and-pbs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
import styles from "~src/components/css/LiveRun.module.scss";
import { GameImage } from "~src/components/image/gameimage";
import { TrophyIcon } from "~src/icons/trophy-icon";
import { TruncatedTextTooltip } from "~src/components/tooltip";

interface WrappedRunsAndPbsProps {
wrapped: WrappedWithData;
Expand Down Expand Up @@ -252,28 +253,35 @@ const GameOverview: React.FC<
</Col>
<Col xs={9}>
<div
className="text-start h5 fw-bold text-truncate pe-3"
className="text-start h5 fw-bold pe-3"
style={{
textDecoration: "underline",
textDecorationColor:
"var(--bs-secondary)",
}}
>
{i < 3 && (
<TrophyIcon
size={24}
trophyColor={
i === 0
? "gold"
: i === 1
? "silver"
: "bronze"
}
/>
)}
<span className="me-2">
{key}
</span>
<TruncatedTextTooltip
text={
<>
{i < 3 && (
<TrophyIcon
size={24}
trophyColor={
i === 0
? "gold"
: i ===
1
? "silver"
: "bronze"
}
/>
)}
<span className="me-2">
{key}
</span>
</>
}
/>
</div>
<div className="d-flex justify-content-between me-3">
<div>
Expand Down Expand Up @@ -459,25 +467,35 @@ const ShowGame: React.FC<
setSelectedCategory(category);
}}
>
<div className="text-start px-3 h5 fw-bold text-truncate">
{category} -{" "}
<DurationToFormatted
duration={categoryData.pb}
/>{" "}
{categoryData.timeBefore &&
categoryData.pb &&
categoryData.timeBefore !==
categoryData.pb && (
<span className="h6">
(
<Difference
two={categoryData.timeBefore.toString()}
one={categoryData.pb.toString()}
inline={true}
<div className="text-start px-3 h5 fw-bold">
<TruncatedTextTooltip
text={
<>
{category} -{" "}
<DurationToFormatted
duration={
categoryData.pb
}
/>{" "}
this year)
</span>
)}
{categoryData.timeBefore &&
categoryData.pb &&
categoryData.timeBefore !==
categoryData.pb && (
<span className="h6">
(
<Difference
two={categoryData.timeBefore.toString()}
one={categoryData.pb.toString()}
inline={
true
}
/>{" "}
this year)
</span>
)}
</>
}
/>
</div>
<div className="d-flex justify-content-between px-3">
<div>
Expand Down
23 changes: 15 additions & 8 deletions app/[username]/wrapped/sections/wrapped-streak.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
} from "~src/components/util/datetime";
import { Col, Row, Table } from "react-bootstrap";
import styles from "../hearts.module.scss";
import { TruncatedTextTooltip } from "~src/components/tooltip";

export const WrappedStreak = ({ wrapped }: { wrapped: WrappedWithData }) => {
const streakInDays = wrapped.streak.length;
Expand Down Expand Up @@ -396,10 +397,14 @@ export const WrappedStreak = ({ wrapped }: { wrapped: WrappedWithData }) => {
return (
<tr key={run.endedAt}>
<td>
<div className="h5 text-truncate">
{getDateAsMonthDay(
new Date(run.endedAt),
)}
<div className="h5">
<TruncatedTextTooltip
text={getDateAsMonthDay(
new Date(
run.endedAt,
),
)}
/>
</div>
</td>
<td
Expand All @@ -408,12 +413,14 @@ export const WrappedStreak = ({ wrapped }: { wrapped: WrappedWithData }) => {
}}
>
<div
className="h5 mb-1 mt-0 text-truncate"
className="h5 mb-1 mt-0"
style={{
color: "var(--bs-link-color)",
}}
>
{run.game}
<TruncatedTextTooltip
text={run.game}
/>
</div>
<div className="fst-italic">
{run.category}
Expand Down Expand Up @@ -447,8 +454,8 @@ const StreakStatItem = ({
}) => {
return (
<tr>
<td className="h4 text-truncate">
<b>{stat}</b>
<td className="h4">
<TruncatedTextTooltip text={<b>{stat}</b>} />
</td>
<td className="align-bottom h6">{explanation}</td>
</tr>
Expand Down
7 changes: 5 additions & 2 deletions app/[username]/wrapped/sections/wrapped-top-games.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { SectionWrapper } from "./section-wrapper";
import { SectionBody } from "./section-body";
import { SectionTitle } from "./section-title";
import { TrophyIcon } from "~src/icons/trophy-icon";
import { TruncatedTextTooltip } from "~src/components/tooltip";

interface WrappedTopGamesProps {
wrapped: WrappedWithData;
Expand Down Expand Up @@ -127,8 +128,10 @@ export const WrappedTopGames = memo<WrappedTopGamesProps>(({ wrapped }) => {
autosize
/>
<div className="card-footer fw-bold">
<h3 className="text-truncate">
{display}
<h3>
<TruncatedTextTooltip
text={display ?? ""}
/>
</h3>
</div>
</div>
Expand Down
30 changes: 29 additions & 1 deletion src/components/tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { OverlayTrigger, Popover } from "react-bootstrap";
import { ReactNode, memo } from "react";
import { OverlayTrigger, Popover, Tooltip } from "react-bootstrap";
import { ReactElementLike } from "prop-types";

export const InfoTooltip = ({
Expand Down Expand Up @@ -70,3 +71,30 @@ export const QuestionMark = () => {
</svg>
);
};

interface TruncatedTextTooltipProps {
text: ReactNode;
maxWidth?: number;
}
export const TruncatedTextTooltip = memo<TruncatedTextTooltipProps>(
({ text, maxWidth }) => {
return (
<div
style={{
maxWidth: maxWidth,
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
}}
>
<OverlayTrigger
placement="top"
overlay={<Tooltip id="tooltip">{text}</Tooltip>}
>
<span>{text}</span>
</OverlayTrigger>
</div>
);
},
);
TruncatedTextTooltip.displayName = "TruncatedTextTooltip";
Loading