UX: Make possibly copy-relevant text in settings copyable
This commit is contained in:
parent
acc874c34f
commit
840da146b9
@ -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
|
||||||
|
@ -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} />
|
||||||
|
@ -41,6 +41,7 @@ function BackupRestoreTab() {
|
|||||||
Settings Export contains:
|
Settings Export contains:
|
||||||
<ul>
|
<ul>
|
||||||
<li>— Custom QuickCSS</li>
|
<li>— Custom QuickCSS</li>
|
||||||
|
<li>— Theme Links</li>
|
||||||
<li>— Plugin Settings</li>
|
<li>— Plugin Settings</li>
|
||||||
</ul>
|
</ul>
|
||||||
</Text>
|
</Text>
|
||||||
|
@ -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>
|
||||||
|
@ -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} />
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user