diff --git a/THEMES.md b/THEMES.md index ecceadc..15b48fc 100644 --- a/THEMES.md +++ b/THEMES.md @@ -38,7 +38,7 @@ A full, complete `index.json` will look something like this: "css": ["/index.css"], "js": ["/index.js"] }, - "customBackgroundURL": "https://website.com/image.png", + "customBackgroundURL": "https://website.com/image.png" } ``` @@ -70,6 +70,9 @@ body { } ``` +## How can I change XYZ element? +Every element is documented and describe [here](/docs/elementIds.md). Every\* single DOM element is assigned an ID to allow for easy and hyper-specific editing. + ## Writing your JS There are no limitations to what you can do with JS. It is safe, as it is sandboxed within the webpage, so there is no possibility of it being able to do anything more than what any regular webpage can do. diff --git a/docs/elementIds.md b/docs/elementIds.md new file mode 100644 index 0000000..28bab2b --- /dev/null +++ b/docs/elementIds.md @@ -0,0 +1,129 @@ +# Documentation of Element ID's for custom theming + +| #ID | Description | +|----------------------------------------|-----------------------------------------------------------------| +| `#miniDialogContainer` | Main container of MiniDialog | +| `#miniDialogContainerTop` | Affects only top section of MiniDialog | +| `#miniDialogButtonClose` | Close button (SVG) of MiniDialog | +| `#miniDialogContent` | MiniDialog content | +| `#rightBarContainer` | Main container of RightBar | +| `#rightBarContent` | RightBar content | +| `#rightBarButtonDiscord` | Discord button on the RightBar | +| `#rightBarButtonGithub` | Github button on the RightBar | +| `#playButton` | Main container for whole launch buttons section | +| `#serverControls` | Container of "play on grasscutter" checkbox | +| `#enableGC` | "play on grasscutter" checkbox | +| `#ip` | Server ip input if play on grasscutter is enabled | +| `#port` | Server port input if play on grasscutter is enabled | +| `#httpsEnable` | "Enable https" checkbox if play on grasscutter is enabled | +| `#officialPlay` | Launch button | +| `#serverLaunch` | Launch server button | +| `#serverlaunchIcon` | Icon (SVG) of server launch button | +| `#serverConfigContainer` | Main container of server configuration section | +| `#serverLaunchContainer` | Main container of launch buttons (includes launch server) | +| `#topBarContainer` | Main container of launcher TopBar (minimize, exit, settings...) | +| `#title` | Title of the TopBar | +| `#version` | Version of the launcher in TopBar | +| `#topBarButtonContainer` | Container of launcher TopBar buttons only | +| `#closeBtn` | Exit launcher button | +| `#minBtn` | Minimize launcher button | +| `#settingsBtn` | Settings button | +| `#downloadsBtn` | Downloads button (grasscutter resources, grasscutter...) | +| `#newsContainer` | Main container of the news section | +| `#newsTabsContainer` | Container for news tabs | +| `#commits` | News tabs container commits button | +| `#latest_version` | News tabs for latest version button | +| `#newsContent` | Content section of news container | +| `#newsCommitsTable` | Commits table of news section | +| `#mewsCommitsAuthor` | Commit author of commit | +| `#newsCommitsCommitMessage` | Commit message of commit | +| `#dividerContainer` | Container for divider line | +| `#dividerLine` | Divider line | +| `#downloadMenuContainerGCStable` | Grasscutter stable update container | +| `#downloadMenuLabelGCStable` | Label for stable update button | +| `#downloadMenuButtonGCStable` | Button container for stable update button | +| `#grasscutterStableBtn` | "Update grasscutter stable" button | +| `#downloadMenuContainerGCDev` | Grasscutter development update container | +| `#downloadMenuLabelGCDev` | Label for latest update button | +| `#downloadMenuButtonGCDev` | Button container for latest update button | +| `grasscutterLatestBtn` | "Update grasscutter latest" button | +| `#downloadMenuContainerGCStableData` | Grasscutter stable data update container | +| `#downloadMenuLabelGCStableData` | Label for stable data update | +| `#downloadMenuButtonGCStableData` | Button container for stable data update button | +| `#grasscutterStableRepo` | "Update grasscutter stable data" button | +| `#downloadMenuContainerGCDevData` | Grasscutter latest data update container | +| `#downloadMenuLabelGCDevData` | Label for latest data update | +| `#downloadMenuButtonGCDevData` | Button container for latest data update button | +| `#grasscutterDevRepo` | "Update grasscutter latest data" button | +| `#downloadMenuContainerResources` | Container for grasscutter resources download | +| `#downloadMenuLabelResources` | label for resources download | +| `#downloadMenuButtonResources` | Button container for resources download button | +| `#resourcesBtn` | "Download grasscutter resources" button | +| `#menuContainer` | Generic Popup modal like menu container | +| `#menuContainerTop` | Top section of menu container | +| `#menuHeading` | Menu title | +| `#menuButtonCloseContainer` | Container for menu close button | +| `#menuButtonCloseIcon` | Menu close icon (SVG) | +| `#menuContent` | Content section of the menu | +| `#menuOptionsContainerGameExec` | Container for game executable option section | +| `#menuOptionsLabelGameExec` | Label for game executable option | +| `#menuOptionsDirGameExec` | Set game executable file browser | +| `#menuOptionsContainerGCJar` | Container for grasscutter jar option | +| `#menuOptionsLabelGCJar` | Label for grasscutter jar option | +| `#menuOptionsDirGCJar` | Set grasscutter jar file browser | +| `#menuOptionsContainerToggleEnc` | Container for toggle encryption option | +| `#menuOptionsLabelToggleEnc` | Label for toggle encryption option | +| `#menuOptionsButtonToggleEnc` | Toggle encryption button container | +| `#toggleEnc` | Toggle encryption button | +| `#menuOptionsContainerGCWGame` | Container for "grasscutter with game" option | +| `#menuOptionsLabelGCWDame` | Label for "grasscutter with game" option | +| `#menuOptionsCheckboxGCWGame` | Container for "grasscutter with game" option checkbox | +| `#gcWithGame` | Grasscutter with game checkbox | +| `#menuOptionsContainerThemes` | Container for themes section | +| `#menuOptionsLabelThemes` | Label for set themes option | +| `#menuOptionsSelectThemes` | Container for themes select menu | +| `#menuOptionsSelectMenuThemes` | Set theme select menu | +| `#menuOptionsContainerJavaPath` | Container for Java Path option | +| `#menuOptionsLabelJavaPath` | Label for Java path option | +| `#menuOptionsDirJavaPath` | Container for java path file browser | +| `#menuOptionsContainerBG` | Container for Background option | +| `#menuOptionsLabelBG` | Label for background option | +| `#menuOptionsDirBG` | Container for background url/local path option | +| `#menuOptionsContainerLang` | Container for language change option | +| `#menuOptionsLabelLang` | Label for language change option | +| `#menuOptionsSelectLang` | Container for language change select menu | +| `#menuOptionsSelectMenuLang` | Language select menu | +| `#DownloadProgress` | Download progress container | +| `#bottomSectionContainer` | Bottom section container | +| `#miniDownloadContainer` | Container for mini download | +| `#commonBigButtonContent` | Content of big button component | +| `#commonCheckboxContainer` | Container of common Checkbox component | +| `#commonCheckboxLabel` | Label of common checkbox | +| `#commonCheckboxDisplay` | is checked? section of common checkbox | +| `#commonDirInputContainer` | Container of DirInput component | +| `#commonDirInputText` | Text of DirInput component | +| `#commonDirInputFileSelContainer` | DirInput file selector container | +| `#commonDirInputFileSelIcon` | DirInput file selector icon | +| `#commonDownloadSectionContainer` | DownloadSection component container | +| `#commonDownloadSectionTitle` | Title of download section | +| `#commonDownloadSectionPath` | Path of the download section | +| `#commonDownloadSectionSize` | File size of download section's file | +| `#commonDownloadSectionProgress` | Progressbar of the download section | +| `#commonHelpButtonContainer` | Container for HelpButtons | +| `#commonHelpButtonClosed` | HelpButton closed content container | +| `#commonHelpButtonIcon` | HelpButton icon | +| `#commonHelpButtonContainerOpen` | Container of opened HelpButton | +| `#commonMainProgressContainer` | MainProgressBar container | +| `#commonMainProgress` | Container for inner content of MainProgressBar | +| `#commonMainProgressInner` | MainProgressBar inner | +| `#commonMainProgressText` | Text of MainProgressBar | +| `#commonProgressBarContainer` | ProgressBar container | +| `#commonProgressBar` | ProgressBar container before content | +| `#commonProgressBarContent` | ProgressBar content | +| `#commonProgressbarDownContrContainer` | Container for ProgressBar controls | +| `#commonProgressBarDownStopContainer` | Container for download stop | +| `#commonProgressBarDownStopIcon` | Download stop icon (SVG) | +| `#commonProgressBarText` | Text describing the progress bar's job | +| `#commonTextInputContainer` | Container of TextInput component | +| `#commonTextInputClearableContainer` | Container if TextInput is clearable | +| `#commonTextInputClearableIcon` | TextInput clearable icon (SVG) | \ No newline at end of file diff --git a/src/ui/App.tsx b/src/ui/App.tsx index 507c780..92277a4 100644 --- a/src/ui/App.tsx +++ b/src/ui/App.tsx @@ -166,7 +166,7 @@ class App extends React.Component { { // Mini downloads section this.state.miniDownloadsOpen ? ( -
+
{ @@ -209,7 +209,7 @@ class App extends React.Component { ) : null } -
+
{ render() { return ( -
+
{ this.props.closeable !== undefined && this.props.closeable ? -
+
{this.props?.title} - +
: null } -
+
{this.props.children}
diff --git a/src/ui/components/RightBar.tsx b/src/ui/components/RightBar.tsx index 1c95b03..f3f1ff7 100644 --- a/src/ui/components/RightBar.tsx +++ b/src/ui/components/RightBar.tsx @@ -16,12 +16,12 @@ export default class RightBar extends React.Component { render() { return ( -
-
-
this.openInBrowser(DISCORD)}> +
+
+
this.openInBrowser(DISCORD)}>
-
this.openInBrowser(GITHUB)}> +
this.openInBrowser(GITHUB)}>
diff --git a/src/ui/components/ServerLaunchSection.tsx b/src/ui/components/ServerLaunchSection.tsx index 97df6f1..3644310 100644 --- a/src/ui/components/ServerLaunchSection.tsx +++ b/src/ui/components/ServerLaunchSection.tsx @@ -196,7 +196,7 @@ export default class ServerLaunchSection extends React.Component { this.state.grasscutterEnabled && (
-
+
} -
+
{this.state.buttonLabel} - +
diff --git a/src/ui/components/TopBar.tsx b/src/ui/components/TopBar.tsx index 2815510..f1fac63 100644 --- a/src/ui/components/TopBar.tsx +++ b/src/ui/components/TopBar.tsx @@ -43,14 +43,14 @@ export default class TopBar extends React.Component { render() { return ( -
+
{this.state?.version}
-
+
close
diff --git a/src/ui/components/common/BigButton.tsx b/src/ui/components/common/BigButton.tsx index 997e773..fdc5690 100644 --- a/src/ui/components/common/BigButton.tsx +++ b/src/ui/components/common/BigButton.tsx @@ -38,7 +38,7 @@ export default class BigButton extends React.Component { render() { return (
-
{this.props.children}
+
{this.props.children}
) } diff --git a/src/ui/components/common/Checkbox.tsx b/src/ui/components/common/Checkbox.tsx index 3eefc2c..517f269 100644 --- a/src/ui/components/common/Checkbox.tsx +++ b/src/ui/components/common/Checkbox.tsx @@ -40,10 +40,10 @@ export default class Checkbox extends React.Component { render() { return ( -
+
-