From 98f530eb0cb16a1b17aaccc7f988ac77150eec5f Mon Sep 17 00:00:00 2001 From: TukanDev Date: Sun, 3 Jul 2022 23:46:02 +0200 Subject: [PATCH] Add element id's and their documentation --- THEMES.md | 5 +- docs/elementIds.md | 129 + src/ui/App.tsx | 4 +- src/ui/components/MiniDialog.tsx | 8 +- src/ui/components/RightBar.tsx | 8 +- src/ui/components/ServerLaunchSection.tsx | 6 +- src/ui/components/TopBar.tsx | 4 +- src/ui/components/common/BigButton.tsx | 2 +- src/ui/components/common/Checkbox.tsx | 6 +- src/ui/components/common/DirInput.tsx | 7 +- src/ui/components/common/DownloadSection.tsx | 10 +- src/ui/components/common/HelpButton.tsx | 8 +- src/ui/components/common/MainProgressBar.tsx | 8 +- src/ui/components/common/ProgressBar.tsx | 14 +- src/ui/components/common/TextInput.tsx | 6 +- src/ui/components/menu/Divider.tsx | 4 +- src/ui/components/menu/Downloads.tsx | 30 +- src/ui/components/menu/Menu.tsx | 12 +- src/ui/components/menu/Options.tsx | 52 +- src/ui/components/news/NewsSection.tsx | 12 +- yarn.lock | 12483 +++++++++-------- 21 files changed, 6520 insertions(+), 6298 deletions(-) create mode 100644 docs/elementIds.md diff --git a/THEMES.md b/THEMES.md index ecceadc..839e426 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" } ``` @@ -100,3 +100,6 @@ newButton.innerHTML = "New Button"; document.body.appendChild(newButton); ``` + +## How can i access "x" element to customize? +Please take a look at documentation of all element id's by clicking [here](/docs/elementIds.md). 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..f83d912 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..7966e17 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..92af46f 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..cbeec49 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..aa84145 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..42b7487 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 ( -
+
-