Fascinated/Vencord
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

UX: Make possibly copy-relevant text in settings copyable

Browse Source
This commit is contained in:
Vendicated 2023-04-08 23:28:12 +02:00
parent acc874c34f
commit 840da146b9
No known key found for this signature in database
GPG Key ID: A1DC0CFB5615D905
6 changed files with 31 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/PatchHelper.tsx
View File

@ -186,9 +186,10 @@ function ReplacementInput({ replacement, setReplacement, replacementError }) {
error={error ?? replacementError} error={error ?? replacementError}
/> />
{!isFunc && ( {!isFunc && (
<> <div className="vc-text-selectable">
<Forms.FormTitle>Cheat Sheet</Forms.FormTitle> <Forms.FormTitle>Cheat Sheet</Forms.FormTitle>
{Object.entries({ {Object.entries({
"\\i": "Special regex escape sequence that matches identifiers (varnames, classnames, etc.)",
"$$": "Insert a $", "$$": "Insert a $",
"$&": "Insert the entire match", "$&": "Insert the entire match",
"$`\u200b": "Insert the substring before the match", "$`\u200b": "Insert the substring before the match",
@ -200,7 +201,7 @@ function ReplacementInput({ replacement, setReplacement, replacementError }) {
{Parser.parse("`" + placeholder + "`")}: {desc} {Parser.parse("`" + placeholder + "`")}: {desc}
</Forms.FormText> </Forms.FormText>
))} ))}
</> </div>
)} )}
<Switch <Switch

7
src/components/PluginSettings/PluginModal.tsx
View File

@ -20,7 +20,8 @@ import { generateId } from "@api/Commands";
import { useSettings } from "@api/settings"; import { useSettings } from "@api/settings";
import ErrorBoundary from "@components/ErrorBoundary"; import ErrorBoundary from "@components/ErrorBoundary";
import { Flex } from "@components/Flex"; import { Flex } from "@components/Flex";
import { LazyComponent } from "@utils/misc"; import { Margins } from "@utils/margins";
import { classes, LazyComponent } from "@utils/misc";
import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize } from "@utils/modal"; import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize } from "@utils/modal";
import { proxyLazy } from "@utils/proxyLazy"; import { proxyLazy } from "@utils/proxyLazy";
import { OptionType, Plugin } from "@utils/types"; import { OptionType, Plugin } from "@utils/types";
@ -174,7 +175,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
} }
return ( return (
<ModalRoot transitionState={transitionState} size={ModalSize.MEDIUM}> <ModalRoot transitionState={transitionState} size={ModalSize.MEDIUM} className="vc-text-selectable">
<ModalHeader separator={false}> <ModalHeader separator={false}>
<Text variant="heading-lg/semibold" style={{ flexGrow: 1 }}>{plugin.name}</Text> <Text variant="heading-lg/semibold" style={{ flexGrow: 1 }}>{plugin.name}</Text>
<ModalCloseButton onClick={onClose} /> <ModalCloseButton onClick={onClose} />
@ -198,7 +199,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
</div> </div>
</Forms.FormSection> </Forms.FormSection>
{!!plugin.settingsAboutComponent && ( {!!plugin.settingsAboutComponent && (
<div style={{ marginBottom: 8 }}> <div className={classes(Margins.bottom8, "vc-text-selectable")}>
<Forms.FormSection> <Forms.FormSection>
<ErrorBoundary message="An error occurred while rendering this plugin's custom InfoComponent"> <ErrorBoundary message="An error occurred while rendering this plugin's custom InfoComponent">
<plugin.settingsAboutComponent tempSettings={tempSettings} /> <plugin.settingsAboutComponent tempSettings={tempSettings} />

1
src/components/VencordSettings/BackupRestoreTab.tsx
View File

@ -41,6 +41,7 @@ function BackupRestoreTab() {
Settings Export contains: Settings Export contains:
<ul> <ul>
<li>&mdash; Custom QuickCSS</li> <li>&mdash; Custom QuickCSS</li>
<li>&mdash; Theme Links</li>
<li>&mdash; Plugin Settings</li> <li>&mdash; Plugin Settings</li>
</ul> </ul>
</Text> </Text>

2
src/components/VencordSettings/ThemesTab.tsx
View File

@ -90,7 +90,7 @@ export default ErrorBoundary.wrap(function () {
return ( return (
<> <>
<Card className="vc-settings-card"> <Card className="vc-settings-card vc-text-selectable">
<Forms.FormTitle tag="h5">Paste links to .css / .theme.css files here</Forms.FormTitle> <Forms.FormTitle tag="h5">Paste links to .css / .theme.css files here</Forms.FormTitle>
<Forms.FormText>One link per line</Forms.FormText> <Forms.FormText>One link per line</Forms.FormText>
<Forms.FormText>Make sure to use the raw links or github.io links!</Forms.FormText> <Forms.FormText>Make sure to use the raw links or github.io links!</Forms.FormText>

18
src/components/VencordSettings/Updater.tsx
View File

@ -229,11 +229,19 @@ function Updater() {
<Forms.FormTitle tag="h5">Repo</Forms.FormTitle> <Forms.FormTitle tag="h5">Repo</Forms.FormTitle>
<Forms.FormText>{repoPending ? repo : err ? "Failed to retrieve - check console" : ( <Forms.FormText className="vc-text-selectable">
<Link href={repo}> {repoPending
{repo.split("/").slice(-2).join("/")} ? repo
</Link> : err
)} (<HashLink hash={gitHash} repo={repo} disabled={repoPending} />)</Forms.FormText> ? "Failed to retrieve - check console"
: (
<Link href={repo}>
{repo.split("/").slice(-2).join("/")}
</Link>
)
}
{" "}(<HashLink hash={gitHash} repo={repo} disabled={repoPending} />)
</Forms.FormText>
<Forms.FormDivider className={Margins.top8 + " " + Margins.bottom8} /> <Forms.FormDivider className={Margins.top8 + " " + Margins.bottom8} />

9
src/components/VencordSettings/settingsStyles.css
View File

@ -57,3 +57,12 @@
color: var(--white-500); color: var(--white-500);
background-color: var(--button-danger-background); background-color: var(--button-danger-background);
} }
.vc-text-selectable,
.vc-text-selectable :not(a, button) {
/* make text selectable, silly discord makes the entirety of settings not selectable */
user-select: text;
/* discord also sets cursor: default which prevents the cursor from showing as text */
cursor: initial;
}