From 3aeacad28cf3d85ed5bb6671461d001e684a20a8 Mon Sep 17 00:00:00 2001 From: SpikeHD Date: Sat, 2 Jul 2022 20:03:05 -0700 Subject: [PATCH 01/31] fix theme backgrounds --- src/ui/App.tsx | 4 +++- src/utils/themes.ts | 22 ++++++++++++++++++---- 2 files changed, 21 insertions(+), 5 deletions(-) diff --git a/src/ui/App.tsx b/src/ui/App.tsx index 02d143e..507c780 100644 --- a/src/ui/App.tsx +++ b/src/ui/App.tsx @@ -79,7 +79,6 @@ class App extends React.Component { async componentDidMount() { const cert_generated = await getConfigOption('cert_generated') const game_exe = await getConfigOption('game_install_path') - const custom_bg = await getConfigOption('customBackground') const game_path = game_exe?.substring(0, game_exe.replace(/\\/g, '/').lastIndexOf('/')) || '' const root_path = game_path?.substring(0, game_path.replace(/\\/g, '/').lastIndexOf('/')) || '' @@ -90,6 +89,9 @@ class App extends React.Component { await loadTheme(themeObj, document) } + // Get custom bg AFTER theme is loaded !! important !! + const custom_bg = await getConfigOption('customBackground') + if(!custom_bg || !/png|jpg|jpeg$/.test(custom_bg)) { if(game_path) { // Get the bg by invoking, then set the background to that bg. diff --git a/src/utils/themes.ts b/src/utils/themes.ts index e0c3309..6e78587 100644 --- a/src/utils/themes.ts +++ b/src/utils/themes.ts @@ -1,6 +1,7 @@ import { invoke } from '@tauri-apps/api' import { dataDir } from '@tauri-apps/api/path' import { convertFileSrc } from '@tauri-apps/api/tauri' +import { getConfig, setConfigOption } from './configuration' interface Theme { name: string @@ -77,6 +78,9 @@ export async function getTheme(name: string) { } export async function loadTheme(theme: ThemeList, document: Document) { + // Get config, since we will set the custom background in there + const config = await getConfig() + // We are going to dynamically load stylesheets into the document const head = document.head @@ -107,22 +111,32 @@ export async function loadTheme(theme: ThemeList, document: Document) { // Set custom background if (theme.customBackgroundURL) { - document.body.style.backgroundImage = `url('${theme.customBackgroundURL}')` + // If the custom bg is already set don't overwrite + if (config.customBackground === '') { + config.customBackground = theme.customBackgroundURL + } } // Set custom background if (theme.customBackgroundPath) { - const bgPath = await dataDir() + 'cultivation/grasscutter/theme.png' + const bgPath = (await dataDir()).replace(/\\/g, '/') + 'cultivation/bg/' + const imageName = theme.customBackgroundPath.split('/').pop() // Save the background to our data dir await invoke('copy_file', { path: theme.path + '/' + theme.customBackgroundPath, - new_path: bgPath + newPath: bgPath }) // Set the background - document.body.style.backgroundImage = `url('${bgPath}')` + // If the custom bg is already set don't overwrite + if (config.customBackground === '') { + config.customBackground = bgPath + imageName + } } + // Write config + await setConfigOption('customBackground', config.customBackground) + return } \ No newline at end of file From de81f9bcac1dc31b45ba6d4e466cf168abf29a06 Mon Sep 17 00:00:00 2001 From: SpikeHD Date: Sat, 2 Jul 2022 20:10:04 -0700 Subject: [PATCH 02/31] version bump --- package.json | 2 +- src-tauri/tauri.conf.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index f2c54d4..323e822 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cultivation", - "version": "1.0.0", + "version": "1.0.1", "private": true, "dependencies": { "@tauri-apps/api": "^1.0.0-rc.5", diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index 0fc9a1b..58af5c8 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -7,7 +7,7 @@ }, "package": { "productName": "Cultivation", - "version": "1.0.0" + "version": "1.0.1" }, "tauri": { "allowlist": { From a42718f6c50dc7325eca092a2b6e6c9e4e300365 Mon Sep 17 00:00:00 2001 From: Kimi <34180607+Kimi898246@users.noreply.github.com> Date: Sun, 3 Jul 2022 11:29:29 +0800 Subject: [PATCH 03/31] Traditional Chinese | Translation Patches --- src-tauri/lang/cht.json | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src-tauri/lang/cht.json b/src-tauri/lang/cht.json index 2624e02..cfd2d0b 100644 --- a/src-tauri/lang/cht.json +++ b/src-tauri/lang/cht.json @@ -11,13 +11,16 @@ "files_extracting": "檔案解壓縮中：" }, "options": { + "enabled": "已啟用", + "disabled": "未啟用", "game_exec": "選擇遊戲執行檔", "grasscutter_jar": "選擇伺服器JAR檔案", - "java_path": "設置自定義Java路徑", + "toggle_encryption": "設置加密", + "java_path": "設定自定義Java路徑", "grasscutter_with_game": "伴隨遊戲一起啟動Grasscutter", "language": "語言", - "background": "設置自定義背景（網址或檔案）", - "theme": "設置主題" + "background": "設定自定義背景（網址或檔案）", + "theme": "設定主題" }, "downloads": { "grasscutter_stable_data": "下載Grasscutter穩定版數據（Data）", From 20130061ab8d5ea77a3e0526580bb0a7ec499c79 Mon Sep 17 00:00:00 2001 From: Kimi <34180607+Kimi898246@users.noreply.github.com> Date: Sun, 3 Jul 2022 11:40:56 +0800 Subject: [PATCH 04/31] minor edits cause i fucked up again oops --- src-tauri/lang/cht.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-tauri/lang/cht.json b/src-tauri/lang/cht.json index cfd2d0b..6ab2303 100644 --- a/src-tauri/lang/cht.json +++ b/src-tauri/lang/cht.json @@ -15,7 +15,7 @@ "disabled": "未啟用", "game_exec": "選擇遊戲執行檔", "grasscutter_jar": "選擇伺服器JAR檔案", - "toggle_encryption": "設置加密", + "toggle_encryption": "設定加密", "java_path": "設定自定義Java路徑", "grasscutter_with_game": "伴隨遊戲一起啟動Grasscutter", "language": "語言", From 84c3645ae2be7b2de7f4787ab08c17069aa01f2d Mon Sep 17 00:00:00 2001 From: SpikeHD Date: Sat, 2 Jul 2022 21:06:14 -0700 Subject: [PATCH 05/31] theming documentation --- README.md | 5 +++ THEMES.md | 103 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 108 insertions(+) create mode 100644 THEMES.md diff --git a/README.md b/README.md index eb4c551..b3bab3d 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,7 @@ A game launcher designed to easily proxy traffic from anime game to private serv * [Setup](#setup) * [Building](#building) * [Troubleshooting](#troubleshooting) +* [Theming](#theming) # Download [Find release builds here!](https://github.com/Grasscutters/Cultivation/releases) @@ -48,6 +49,10 @@ Add `--release` or `--debug` depending on what release you are creating. This de # Troubleshooting TODO. Collect common issues before updating. +# Theming + +A full theming reference can be found [here!](/THEMES.md) + # Screenshots ![image](https://user-images.githubusercontent.com/25207995/173211603-e5e85df7-7fd3-430b-9246-749ebbc1e483.png) ![image](https://user-images.githubusercontent.com/25207995/173211543-b7e88943-cfd2-418b-ac48-7f856868129b.png) diff --git a/THEMES.md b/THEMES.md new file mode 100644 index 0000000..28329fa --- /dev/null +++ b/THEMES.md @@ -0,0 +1,103 @@ +# Downloading/Installing Themes + +1. Download your favorite theme! (You can find some in the `#themes` channel on Discord) +2. Place the unzipped theme folder inside of `%appdata%/cultivation/themes` + 2a. The path should look something like this: `cultivation/themes/theme_name/index.json` +3. Enable within Cultivation! + +# Creating your own theme + +Themes support entirely custom JS and CSS, enabling you to potentially change every single thing about Cultivation with relative ease. + +You can refer to the example theme [found here.](https://cdn.discordapp.com/attachments/992943872479084614/992993575652565002/Example.zip) + +You will need CSS and JS experience if you want to do anything cool. + +## Creating index.json + +`index.json` is where you tell Cultivation which files and images to include. It supports the following properties: + +| Property | Description | +| :--- | :--- | +| `name` | The name of the theme. | +| `version` | Not shown anywhere, the version of the theme. | +| `description` | Not shown anywhere, the description of the theme. | +| `includes` | The files and folders to include. | +| `includes.css` | Array of CSS files to include. Example: `css: ["index.css"]` | +| `includes.js` | Array of JS files to includes. Example `js: ["index.js"]` | +| `customBackgroundURL` | A custom image URL to set as the background. Backgrounds that users set in their config supercede this. Example: `"https://website.com/image.png"` | +| `customBackgroundFile` | Path to a custom background image file. Backgrounds that users set in their config supercede this. Example: `"/image.png"` | + +A full, complete `index.json` will look something like this: + +```json +{ + "name": "Example", + "version": "1.0.0", + "description": "This is an example theme. Made by SpikeHD.", + "includes": { + "css": ["/index.css"], + "js": ["/index.js"] + }, + "customBackgroundURL": "https://website.com/image.png", +} +``` + +**Important Note:** +All paths are relative to the theme folder. This means you only need to do `"/index.css"` to include `index.css` from the same folder `index.json` is located. + +## Writing your CSS + +You will want to use the DevTools to find what classes and IDs you are able to work with. + +Below are some small examples of what you can do: + +```css +/* Change the font */ +body { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; +} +``` +```css +/* Remove the news section */ +.NewsSection { + display: none; +} +``` +```css +/* Change the right bar width */ +.RightBar { + width: 300px; +} +``` + +## 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. + +Below are some examples of what you can do: + +```js +/* Change the version number every 500ms */ +setInterval(() => { + document.getElementById("version").innerHTML = "v" + Math.floor(Math.random() * 100); +}, 500); +``` +```js +/* Load a custom font */ +const head = document.head +const link = document.createElement("link") + +link.href = "https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" +link.rel = "stylesheet" +link.type = "text/css" + +head.appendChild(link) +``` +```js +/* Create a new button that does nothing */ +const newButton = document.createElement("button"); +newButton.innerHTML = "New Button"; + +document.body.appendChild(newButton); +``` \ No newline at end of file From 3931fa25d698ebe5593705d7094dc514b39726fd Mon Sep 17 00:00:00 2001 From: SpikeHD Date: Sat, 2 Jul 2022 21:12:54 -0700 Subject: [PATCH 06/31] Update THEMES.md --- THEMES.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/THEMES.md b/THEMES.md index 28329fa..ecceadc 100644 --- a/THEMES.md +++ b/THEMES.md @@ -1,9 +1,8 @@ # Downloading/Installing Themes 1. Download your favorite theme! (You can find some in the `#themes` channel on Discord) -2. Place the unzipped theme folder inside of `%appdata%/cultivation/themes` - 2a. The path should look something like this: `cultivation/themes/theme_name/index.json` -3. Enable within Cultivation! +2. Place the unzipped theme folder inside of `%appdata%/cultivation/themes` (The path should look something like this: `cultivation/themes/theme_name/index.json`) +4. Enable within Cultivation! # Creating your own theme @@ -100,4 +99,4 @@ const newButton = document.createElement("button"); newButton.innerHTML = "New Button"; document.body.appendChild(newButton); -``` \ No newline at end of file +``` From 73a7d08b8e7972003911020db54e5f94637ded67 Mon Sep 17 00:00:00 2001 From: DasIschBims <46683337+DasIschBims@users.noreply.github.com> Date: Sun, 3 Jul 2022 17:01:25 +0200 Subject: [PATCH 07/31] Added german language file --- src-tauri/lang/de.json | 61 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 src-tauri/lang/de.json diff --git a/src-tauri/lang/de.json b/src-tauri/lang/de.json new file mode 100644 index 0000000..4a288e7 --- /dev/null +++ b/src-tauri/lang/de.json @@ -0,0 +1,61 @@ +{ + "lang_name": "Deutsch", + "main": { + "title": "Cultivation", + "launch_button": "Starten", + "gc_enable": "Über Grasscutter verbinden", + "https_enable": "HTTPS nutzen", + "ip_placeholder": "Server Adresse...", + "port_placeholder": "Port...", + "files_downloading": "Herunterladen von Dateien: ", + "files_extracting": "Extrahieren von Dateien: " + }, + "options": { + "enabled": "Aktiviert", + "disabled": "Deaktiviert", + "game_exec": "Spiel Datei auswählen", + "grasscutter_jar": "Grasscuter JAR auswählen", + "toggle_encryption": "Verschlüsselung umschalten", + "java_path": "Benutzerdefinierten Java Pfad setzen", + "grasscutter_with_game": "Grasscutter automatisch mit dem Spiel starten", + "language": "Sprache auswählen", + "background": "Benutzerdefinierten Hintergrund festlegen (link oder bild)", + "theme": "Theme auswählen" + }, + "downloads": { + "grasscutter_stable_data": "Stabile Grasscutter Daten herunterladen", + "grasscutter_latest_data": "Aktuellste Grasscutter Daten herunterladen", + "grasscutter_stable_data_update": "Stabile Grasscutter Daten aktualisieren", + "grasscutter_latest_data_update": "Aktuellste Grasscutter Daten aktualisieren", + "grasscutter_stable": "Stabile Grasscutter Version herunterladen", + "grasscutter_latest": "Aktuellste Grasscutter Version herunterladen", + "grasscutter_stable_update": "Stabile Grasscutter Version aktualisieren", + "grasscutter_latest_update": "Aktuellste Grasscutter Version aktualisieren", + "resources": "Grasscutter Ressourcen herunterladen" + }, + "download_status": { + "downloading": "Lädt herunter", + "extracting": "Extrahiert", + "error": "Fehler", + "finished": "Fertig", + "stopped": "Gestoppt" + }, + "components": { + "select_file": "Datei oder Ordner auswählen...", + "select_folder": "Ordner auswählen...", + "download": "Herunterladen" + }, + "news": { + "latest_commits": "Letzte Commits", + "latest_version": "Letzte Version" + }, + "help": { + "port_help_text": "Vergewissern Sie sich, dass es sich um den Port des Dispatch-Servers handelt, nicht um den Port des Spiel-Servers. Dieser ist fast immer '443'.", + "game_help_text": "Sie müssen keine separate Kopie verwenden, um mit Grasscutter zu spielen. Dies ist entweder für ein Downgrade auf die Version 2.6 oder wenn Sie das Spiel nicht installiert haben.", + "gc_stable_jar": "Laden Sie den aktuellen stabilen Grasscutter-Build herunter, der eine Jar-Datei und Datendateien enthält.", + "gc_dev_jar": "Laden Sie die neueste Grasscutter-Entwicklungsversion herunter, welche eine Jar-Datei und Datendateien enthält.", + "gc_stable_data": "Laden Sie die stabilen Grasscutter Daten herunter, welche keine Jar-Datei enthalten. Dies ist nützlich zum Aktualisieren.", + "gc_dev_data": "Laden Sie die neuesten Grasscutter-Entwicklungsdateien herunter, welche keine Jar-Datei enthält. Dies ist nützlich zum Aktualisieren.", + "resources": "Diese werden auch benötigt, um einen Grasscutter-Server auszuführen. Diese Schaltfläche ist grau, wenn Sie einen bestehenden Ressourcenordner mit Inhalten haben" + } + } \ No newline at end of file From 98f530eb0cb16a1b17aaccc7f988ac77150eec5f Mon Sep 17 00:00:00 2001 From: TukanDev Date: Sun, 3 Jul 2022 23:46:02 +0200 Subject: [PATCH 08/31] 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 ( -
+
-