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

Jump to bottom

Link improvements and fixes #4501

Merged
merged 3 commits into from
Feb 5, 2024
Merged

Link improvements and fixes #4501

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4f8c1f9
Refactor
DingDongSoLong4 Jan 25, 2024
c42a010
Add ExternalLink
DingDongSoLong4 Jan 25, 2024
c2cb0d2
Replace <a> with <Link>
DingDongSoLong4 Jan 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 3 additions & 2 deletions ui/v2.5/src/components/Dialogs/SubmitDraft.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { ModalComponent } from "src/components/Shared/Modal";
import { getStashboxBase } from "src/utils/stashbox";
import { FormattedMessage, useIntl } from "react-intl";
import { faPaperPlane } from "@fortawesome/free-solid-svg-icons";
import { ExternalLink } from "../Shared/ExternalLink";

interface IProps {
type: "scene" | "performer";
Expand Down Expand Up @@ -108,12 +109,12 @@ export const SubmitStashBoxDraft: React.FC<IProps> = ({
<FormattedMessage id="stashbox.submission_successful" />
</h6>
<div>
<a target="_blank" rel="noreferrer noopener" href={reviewUrl}>
<ExternalLink href={reviewUrl}>
<FormattedMessage
id="stashbox.go_review_draft"
values={{ endpoint_name: selectedBox?.name }}
/>
</a>
</ExternalLink>
</div>
</>
);
Expand Down
17 changes: 8 additions & 9 deletions ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import { DetailImage } from "src/components/Shared/DetailImage";
import { useRatingKeybinds } from "src/hooks/keybinds";
import { useLoadStickyHeader } from "src/hooks/detailsPanel";
import { useScrollToTopOnMount } from "src/hooks/scrollToTop";
import { ExternalLink } from "src/components/Shared/ExternalLink";

interface IProps {
movie: GQL.MovieDataFragment;
Expand Down Expand Up @@ -274,15 +275,13 @@ const MoviePage: React.FC<IProps> = ({ movie }) => {
const renderClickableIcons = () => (
<span className="name-icons">
{movie.url && (
<Button className="minimal icon-link" title={movie.url}>
<a
href={TextUtils.sanitiseURL(movie.url)}
className="link"
target="_blank"
rel="noopener noreferrer"
>
<Icon icon={faLink} />
</a>
<Button
as={ExternalLink}
href={TextUtils.sanitiseURL(movie.url)}
className="minimal link"
title={movie.url}
>
<Icon icon={faLink} />
</Button>
)}
</span>
Expand Down
5 changes: 3 additions & 2 deletions ui/v2.5/src/components/Movies/MovieDetails/MovieDetailsPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useIntl } from "react-intl";
import * as GQL from "src/core/generated-graphql";
import TextUtils from "src/utils/text";
import { DetailItem } from "src/components/Shared/DetailItem";
import { Link } from "react-router-dom";

interface IMovieDetailsPanel {
movie: GQL.MovieDataFragment;
Expand Down Expand Up @@ -34,9 +35,9 @@ export const MovieDetailsPanel: React.FC<IMovieDetailsPanel> = ({
id="studio"
value={
movie.studio?.id ? (
<a href={`/studios/${movie.studio?.id}`} target="_self">
<Link to={`/studios/${movie.studio?.id}`}>
{movie.studio?.name}
</a>
</Link>
) : (
""
)
Expand Down
78 changes: 36 additions & 42 deletions ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ import { useRatingKeybinds } from "src/hooks/keybinds";
import { DetailImage } from "src/components/Shared/DetailImage";
import { useLoadStickyHeader } from "src/hooks/detailsPanel";
import { useScrollToTopOnMount } from "src/hooks/scrollToTop";
import { ExternalLink } from "src/components/Shared/ExternalLink";

interface IProps {
performer: GQL.PerformerDataFragment;
Expand Down Expand Up @@ -489,57 +490,50 @@ const PerformerPage: React.FC<IProps> = ({ performer, tabKey }) => {
<Icon icon={faHeart} />
</Button>
{performer.url && (
<Button className="minimal icon-link" title={performer.url}>
<a
href={TextUtils.sanitiseURL(performer.url)}
className="link"
target="_blank"
rel="noopener noreferrer"
>
<Icon icon={faLink} />
</a>
<Button
as={ExternalLink}
href={TextUtils.sanitiseURL(performer.url)}
className="minimal link"
title={performer.url}
>
<Icon icon={faLink} />
</Button>
)}
{(urls ?? []).map((url, index) => (
<Button key={index} className="minimal icon-link" title={url}>
<a
href={TextUtils.sanitiseURL(url)}
className={`detail-link ${index}`}
target="_blank"
rel="noopener noreferrer"
>
<Icon icon={faLink} />
</a>
<Button
key={index}
as={ExternalLink}
href={TextUtils.sanitiseURL(url)}
className={`minimal link detail-link detail-link-${index}`}
title={url}
>
<Icon icon={faLink} />
</Button>
))}
{performer.twitter && (
<Button className="minimal icon-link" title={performer.twitter}>
<a
href={TextUtils.sanitiseURL(
performer.twitter,
TextUtils.twitterURL
)}
className="twitter"
target="_blank"
rel="noopener noreferrer"
>
<Icon icon={faTwitter} />
</a>
<Button
as={ExternalLink}
href={TextUtils.sanitiseURL(
performer.twitter,
TextUtils.twitterURL
)}
className="minimal link twitter"
title={performer.twitter}
>
<Icon icon={faTwitter} />
</Button>
)}
{performer.instagram && (
<Button className="minimal icon-link" title={performer.instagram}>
<a
href={TextUtils.sanitiseURL(
performer.instagram,
TextUtils.instagramURL
)}
className="instagram"
target="_blank"
rel="noopener noreferrer"
>
<Icon icon={faInstagram} />
</a>
<Button
as={ExternalLink}
href={TextUtils.sanitiseURL(
performer.instagram,
TextUtils.instagramURL
)}
className="minimal link instagram"
title={performer.instagram}
>
<Icon icon={faInstagram} />
</Button>
)}
</span>
Expand Down
8 changes: 4 additions & 4 deletions ui/v2.5/src/components/Performers/PerformerSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import {
Option as SelectOption,
} from "../Shared/FilterSelect";
import { useCompare } from "src/hooks/state";
import { Link } from "react-router-dom";

export type SelectObject = {
id: string;
Expand Down Expand Up @@ -86,18 +87,17 @@ export const PerformerSelect: React.FC<
...optionProps,
children: (
<span className="react-select-image-option">
<a
href={`/performers/${object.id}`}
<Link
to={`/performers/${object.id}`}
target="_blank"
rel="noreferrer"
className="performer-select-image-link"
>
<img
className="performer-select-image"
src={object.image_path ?? ""}
loading="lazy"
/>
</a>
</Link>
<span>{name}</span>
{object.disambiguation && (
<span className="performer-disambiguation">{` (${object.disambiguation})`}</span>
Expand Down
13 changes: 0 additions & 13 deletions ui/v2.5/src/components/Performers/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,22 +27,9 @@
color: #ff7373;
}

.link {
color: rgb(191, 204, 214);
}

.instagram {
color: pink;
}

.icon-link {
padding: 0;

a {
display: inline-block;
padding: $btn-padding-y $btn-padding-x;
}
}
}

.rating-number .form-control {
Expand Down
2 changes: 1 addition & 1 deletion ui/v2.5/src/components/Scenes/SceneDetails/SceneFileInfoPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ const FileInfoPanel: React.FC<IFileInfoPanelProps> = (
url={NavUtils.makeScenesPHashMatchUrl(phash?.value)}
target="_self"
truncate
trusted
internal
/>
<URLField
id="path"
Expand Down
33 changes: 9 additions & 24 deletions ui/v2.5/src/components/Settings/SettingsAboutPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from "react";
import { Button } from "react-bootstrap";
import { useIntl } from "react-intl";
import { useLatestVersion } from "src/core/StashService";
import { ExternalLink } from "../Shared/ExternalLink";
import { ConstantSetting, SettingGroup } from "./Inputs";
import { SettingSection } from "./SettingSection";

Expand Down Expand Up @@ -115,13 +116,9 @@ export const SettingsAboutPanel: React.FC = () => {
{ id: "config.about.stash_home" },
{
url: (
<a
href="https://github.com/stashapp/stash"
rel="noopener noreferrer"
target="_blank"
>
<ExternalLink href="https://github.com/stashapp/stash">
GitHub
</a>
</ExternalLink>
),
}
)}
Expand All @@ -131,13 +128,9 @@ export const SettingsAboutPanel: React.FC = () => {
{ id: "config.about.stash_wiki" },
{
url: (
<a
href="https://docs.stashapp.cc"
rel="noopener noreferrer"
target="_blank"
>
<ExternalLink href="https://docs.stashapp.cc">
Documentation
</a>
</ExternalLink>
),
}
)}
Expand All @@ -147,13 +140,9 @@ export const SettingsAboutPanel: React.FC = () => {
{ id: "config.about.stash_discord" },
{
url: (
<a
href="https://discord.gg/2TsNFKt"
rel="noopener noreferrer"
target="_blank"
>
<ExternalLink href="https://discord.gg/2TsNFKt">
Discord
</a>
</ExternalLink>
),
}
)}
Expand All @@ -163,13 +152,9 @@ export const SettingsAboutPanel: React.FC = () => {
{ id: "config.about.stash_open_collective" },
{
url: (
<a
href="https://opencollective.com/stashapp"
rel="noopener noreferrer"
target="_blank"
>
<ExternalLink href="https://opencollective.com/stashapp">
Open Collective
</a>
</ExternalLink>
),
}
)}
Expand Down
17 changes: 5 additions & 12 deletions ui/v2.5/src/components/Settings/SettingsLibraryPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { BooleanSetting, StringListSetting, StringSetting } from "./Inputs";
import { useSettings } from "./context";
import { useIntl } from "react-intl";
import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
import { ExternalLink } from "../Shared/ExternalLink";

export const SettingsLibraryPanel: React.FC = () => {
const intl = useIntl();
Expand Down Expand Up @@ -76,13 +77,9 @@ export const SettingsLibraryPanel: React.FC = () => {
{intl.formatMessage({
id: "config.general.excluded_video_patterns_desc",
})}
<a
href="https://docs.stashapp.cc/beginner-guides/exclude-file-configuration"
rel="noopener noreferrer"
target="_blank"
>
<ExternalLink href="https://docs.stashapp.cc/beginner-guides/exclude-file-configuration">
<Icon icon={faQuestionCircle} />
</a>
</ExternalLink>
</span>
}
value={general.excludes ?? undefined}
Expand All @@ -98,13 +95,9 @@ export const SettingsLibraryPanel: React.FC = () => {
{intl.formatMessage({
id: "config.general.excluded_image_gallery_patterns_desc",
})}
<a
href="https://docs.stashapp.cc/beginner-guides/exclude-file-configuration"
rel="noopener noreferrer"
target="_blank"
>
<ExternalLink href="https://docs.stashapp.cc/beginner-guides/exclude-file-configuration">
<Icon icon={faQuestionCircle} />
</a>
</ExternalLink>
</span>
}
value={general.imageExcludes ?? undefined}
Expand Down
16 changes: 7 additions & 9 deletions ui/v2.5/src/components/Settings/SettingsPluginsPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import {
AvailablePluginPackages,
InstalledPluginPackages,
} from "./PluginPackageManager";
import { ExternalLink } from "../Shared/ExternalLink";

interface IPluginSettingProps {
pluginID: string;
Expand Down Expand Up @@ -97,15 +98,12 @@ export const SettingsPluginsPanel: React.FC = () => {
function renderLink(url?: string) {
if (url) {
return (
<Button className="minimal">
<a
href={TextUtils.sanitiseURL(url)}
className="link"
target="_blank"
rel="noopener noreferrer"
>
<Icon icon={faLink} />
</a>
<Button
as={ExternalLink}
href={TextUtils.sanitiseURL(url)}
className="minimal link"
>
<Icon icon={faLink} />
</Button>
);
}
Expand Down