diff --git a/lang/en.json b/lang/en.json index 78d6146..c962262 100644 --- a/lang/en.json +++ b/lang/en.json @@ -12,7 +12,13 @@ "grasscutter_jar": "Set Grasscutter Jar", "grasscutter_with_game": "Automatically launch Grasscutter with game" }, + "downloads": { + "grasscutter_stable": "Download Grasscutter Stable", + "grasscutter_latest": "Download Grasscutter Latest", + "resources": "Download Grasscutter Resources" + }, "components": { - "select_file": "Select file or folder..." + "select_file": "Select file or folder...", + "download": "Download" } } \ No newline at end of file diff --git a/src/ui/App.css b/src/ui/App.css index bb79ca5..fc57d7d 100644 --- a/src/ui/App.css +++ b/src/ui/App.css @@ -58,4 +58,4 @@ body { top: 73%; left: 15%; -} \ No newline at end of file +} diff --git a/src/ui/App.tsx b/src/ui/App.tsx index 43c471d..2c97593 100644 --- a/src/ui/App.tsx +++ b/src/ui/App.tsx @@ -12,6 +12,7 @@ import MainProgressBar from './components/common/MainProgressBar' import Options from './components/menu/Options' import MiniDialog from './components/MiniDialog' import DownloadList from './components/common/DownloadList' +import Downloads from './components/menu/Downloads' interface IProps { [key: string]: never; @@ -21,6 +22,7 @@ interface IState { isDownloading: boolean; optionsOpen: boolean; miniDownloadsOpen: boolean; + downloadsOpen: boolean; } const downloadHandler = new DownloadHandler() @@ -45,6 +47,7 @@ class App extends React.Component { isDownloading: false, optionsOpen: false, miniDownloadsOpen: false, + downloadsOpen: false } listen('lang_error', (payload) => { @@ -59,9 +62,11 @@ class App extends React.Component { optFunc={() => { this.setState({ optionsOpen: !this.state.optionsOpen }) }} - downFunc={() => { console.log('Shit is changing dw') }} + downFunc={() => this.setState({ downloadsOpen: !this.state.downloadsOpen })} /> + + { // Mini downloads section this.state.miniDownloadsOpen ? @@ -76,6 +81,12 @@ class App extends React.Component { } { + // Download menu + this.state.downloadsOpen ? this.setState({ downloadsOpen: false }) } /> : null + } + + { + // Options menu this.state.optionsOpen ? this.setState({ optionsOpen: !this.state.optionsOpen })}/> : null } diff --git a/src/ui/components/menu/Downloads.css b/src/ui/components/menu/Downloads.css new file mode 100644 index 0000000..e02a814 --- /dev/null +++ b/src/ui/components/menu/Downloads.css @@ -0,0 +1,27 @@ +.Downloads { + width: 30%; +} + +.DownloadSection { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + + margin-bottom: 12px; + width: 90%; + min-height: 30px; +} + +.DownloadValue { + height: 100%; +} + +.DownloadValue .BigButton { + height: 100%; + min-height: 30px; +} + +.DownloadValue .BigButtonText { + font-size: 12px; +} \ No newline at end of file diff --git a/src/ui/components/menu/Downloads.tsx b/src/ui/components/menu/Downloads.tsx new file mode 100644 index 0000000..ee48f75 --- /dev/null +++ b/src/ui/components/menu/Downloads.tsx @@ -0,0 +1,69 @@ +import React from 'react' +import Menu from './Menu' +import Tr from '../../../utils/language' +import DownloadHandler from '../../../utils/download' +import BigButton from '../common/BigButton' + +import './Downloads.css' +import Divider from './Divider' + +interface IProps { + closeFn: () => void; + downloadManager: DownloadHandler; +} + +interface IState { + grasscutter_downloading: boolean + resources_downloading: boolean +} + +export default class Downloads extends React.Component { + constructor(props: IProps) { + super(props) + + this.state = { + grasscutter_downloading: false, + resources_downloading: false + } + } + + render() { + return ( + +
+
+ +
+
+ console.log('download')} id="grasscutterStableBtn" > + + +
+
+
+
+ +
+
+ console.log('download')} id="grasscutterLatestBtn" > + + +
+
+ + + +
+
+ +
+
+ console.log('download')} id="resourcesBtn" > + + +
+
+
+ ) + } +} \ No newline at end of file diff --git a/src/ui/components/menu/Options.tsx b/src/ui/components/menu/Options.tsx index e03a2d7..5b37703 100644 --- a/src/ui/components/menu/Options.tsx +++ b/src/ui/components/menu/Options.tsx @@ -5,6 +5,7 @@ import Tr from '../../../utils/language' import './Options.css' import { setConfigOption, getConfig, getConfigOption } from '../../../utils/configuration' import Checkbox from '../common/Checkbox' +import Divider from './Divider' interface IProps { closeFn: () => void; @@ -70,6 +71,9 @@ export default class Options extends React.Component { + + +