Add element id's and their documentation

This commit is contained in:
TukanDev
2022-07-03 23:46:02 +02:00
parent 3931fa25d6
commit 98f530eb0c
21 changed files with 6520 additions and 6298 deletions

View File

@@ -5,8 +5,8 @@ import './Divider.css'
export default class Divider extends React.Component {
render() {
return (
<div className="Divider">
<div className="DividerLine"></div>
<div className="Divider" id={'dividerContainer'}>
<div className="DividerLine" id={'dividerLine'}></div>
</div>
)
}

View File

@@ -190,8 +190,8 @@ export default class Downloads extends React.Component<IProps, IState> {
render() {
return (
<Menu closeFn={this.props.closeFn} className="Downloads" heading="Downloads">
<div className='DownloadMenuSection'>
<div className='DownloadLabel'>
<div className='DownloadMenuSection' id={'downloadMenuContainerGCStable'}>
<div className='DownloadLabel' id={'downloadMenuLabelGCStable'}>
<Tr text={
this.state.grasscutter_set ? 'downloads.grasscutter_stable' : 'downloads.grasscutter_stable_update'
} />
@@ -199,14 +199,14 @@ export default class Downloads extends React.Component<IProps, IState> {
<Tr text="help.gc_stable_jar" />
</HelpButton>
</div>
<div className='DownloadValue'>
<div className='DownloadValue' id={'downloadMenuButtonGCStable'}>
<BigButton disabled={this.state.grasscutter_downloading} onClick={this.downloadGrasscutterStable} id="grasscutterStableBtn" >
<Tr text="components.download" />
</BigButton>
</div>
</div>
<div className='DownloadMenuSection'>
<div className='DownloadLabel'>
<div className='DownloadMenuSection' id={'downloadMenuContainerGCDev'}>
<div className='DownloadLabel' id={'downloadMenuLabelGCDev'}>
<Tr text={
this.state.grasscutter_set ? 'downloads.grasscutter_latest' : 'downloads.grasscutter_latest_update'
} />
@@ -214,7 +214,7 @@ export default class Downloads extends React.Component<IProps, IState> {
<Tr text="help.gc_dev_jar" />
</HelpButton>
</div>
<div className='DownloadValue'>
<div className='DownloadValue' id={'downloadMenuButtonGCDev'}>
<BigButton disabled={this.state.grasscutter_downloading} onClick={this.downloadGrasscutterLatest} id="grasscutterLatestBtn" >
<Tr text="components.download" />
</BigButton>
@@ -223,8 +223,8 @@ export default class Downloads extends React.Component<IProps, IState> {
<Divider />
<div className='DownloadMenuSection'>
<div className='DownloadLabel'>
<div className='DownloadMenuSection' id={'downloadMenuContainerGCStableData'}>
<div className='DownloadLabel' id={'downloadMenuLabelGCStableData'}>
<Tr text={
this.state.grasscutter_set ? 'downloads.grasscutter_stable_data' : 'downloads.grasscutter_stable_data_update'
} />
@@ -232,14 +232,14 @@ export default class Downloads extends React.Component<IProps, IState> {
<Tr text="help.gc_stable_data" />
</HelpButton>
</div>
<div className='DownloadValue'>
<div className='DownloadValue' id={'downloadMenuButtonGCStableData'}>
<BigButton disabled={this.state.repo_downloading} onClick={this.downloadGrasscutterStableRepo} id="grasscutterStableRepo" >
<Tr text="components.download" />
</BigButton>
</div>
</div>
<div className='DownloadMenuSection'>
<div className='DownloadLabel'>
<div className='DownloadMenuSection' id={'downloadMenuContainerGCDevData'}>
<div className='DownloadLabel' id={'downloadMenuLabelGCDevData'}>
<Tr text={
this.state.grasscutter_set ? 'downloads.grasscutter_latest_data' : 'downloads.grasscutter_latest_data_update'
} />
@@ -247,7 +247,7 @@ export default class Downloads extends React.Component<IProps, IState> {
<Tr text="help.gc_dev_data" />
</HelpButton>
</div>
<div className='DownloadValue'>
<div className='DownloadValue' id={'downloadMenuButtonGCDevData'}>
<BigButton disabled={this.state.repo_downloading} onClick={this.downloadGrasscutterStableRepo} id="grasscutterDevRepo" >
<Tr text="components.download" />
</BigButton>
@@ -256,14 +256,14 @@ export default class Downloads extends React.Component<IProps, IState> {
<Divider />
<div className='DownloadMenuSection'>
<div className='DownloadLabel'>
<div className='DownloadMenuSection' id={'downloadMenuContainerResources'}>
<div className='DownloadLabel' id={'downloadMenuLabelResources'}>
<Tr text="downloads.resources" />
<HelpButton>
<Tr text="help.resources" />
</HelpButton>
</div>
<div className='DownloadValue'>
<div className='DownloadValue' id={'downloadMenuButtonResources'}>
<BigButton disabled={this.state.resources_downloading || !this.state.grasscutter_set || this.state.resources_exist} onClick={this.downloadResources} id="resourcesBtn" >
<Tr text="components.download" />
</BigButton>

View File

@@ -17,14 +17,14 @@ export default class Menu extends React.Component<IProps, never> {
render() {
return (
<div className={'Menu ' + this.props.className}>
<div className='MenuTop'>
<div className="MenuHeading">{this.props.heading}</div>
<div className="MenuExit" onClick={this.props.closeFn}>
<img src={Close} className="MenuClose" />
<div className={'Menu ' + this.props.className} id={'menuContainer'}>
<div className='MenuTop' id={'menuContainerTop'}>
<div className="MenuHeading" id={'menuHeading'}>{this.props.heading}</div>
<div className="MenuExit" id={'menuButtonCloseContainer'} onClick={this.props.closeFn}>
<img src={Close} className="MenuClose" id={'menuButtonCloseIcon'} />
</div>
</div>
<div className='MenuInner'>
<div className='MenuInner' id={'menuContent'}>
{this.props.children}
</div>
</div>

View File

@@ -170,27 +170,27 @@ export default class Options extends React.Component<IProps, IState> {
render() {
return (
<Menu closeFn={this.props.closeFn} className="Options" heading="Options">
<div className='OptionSection'>
<div className='OptionLabel'>
<div className='OptionSection' id={'menuOptionsContainerGameExec'}>
<div className='OptionLabel' id={'menuOptionsLabelGameExec'}>
<Tr text="options.game_exec" />
</div>
<div className='OptionValue'>
<div className='OptionValue' id={'menuOptionsDirGameExec'}>
<DirInput onChange={this.setGameExec} value={this.state?.game_install_path} extensions={['exe']} />
</div>
</div>
<div className='OptionSection'>
<div className='OptionLabel'>
<div className='OptionSection' id={'menuOptionsContainerGCJar'}>
<div className='OptionLabel' id={'menuOptionsLabelGCJar'}>
<Tr text="options.grasscutter_jar" />
</div>
<div className='OptionValue'>
<div className='OptionValue' id={'menuOptionsDirGCJar'}>
<DirInput onChange={this.setGrasscutterJar} value={this.state?.grasscutter_path} extensions={['jar']} />
</div>
</div>
<div className='OptionSection'>
<div className='OptionLabel'>
<div className='OptionSection' id={'menuOptionsContainerToggleEnc'}>
<div className='OptionLabel' id={'menuOptionsLabelToggleEnc'}>
<Tr text="options.toggle_encryption" />
</div>
<div className='OptionValue'>
<div className='OptionValue' id={'menuOptionsButtonToggleEnc'}>
<BigButton onClick={this.toggleEncryption} id="toggleEnc">
{
this.state.encryption
@@ -201,23 +201,23 @@ export default class Options extends React.Component<IProps, IState> {
<Divider />
<div className='OptionSection'>
<div className='OptionLabel'>
<div className='OptionSection' id={'menuOptionsContainerGCWGame'}>
<div className='OptionLabel' id={'menuOptionsLabelGCWDame'}>
<Tr text="options.grasscutter_with_game" />
</div>
<div className='OptionValue'>
<div className='OptionValue' id={'menuOptionsCheckboxGCWGame'}>
<Checkbox onChange={this.toggleGrasscutterWithGame} checked={this.state?.grasscutter_with_game} id="gcWithGame" />
</div>
</div>
<Divider />
<div className='OptionSection'>
<div className='OptionLabel'>
<div className='OptionSection' id={'menuOptionsContainerThemes'}>
<div className='OptionLabel' id={'menuOptionsLabelThemes'}>
<Tr text="options.theme" />
</div>
<div className='OptionValue'>
<select value={this.state.theme} onChange={(event) => {
<div className='OptionValue' id={'menuOptionsSelectThemes'}>
<select value={this.state.theme} id={'menuOptionsSelectMenuThemes'} onChange={(event) => {
this.setTheme(event.target.value)
}}>
{this.state.themes.map(t => (
@@ -234,20 +234,20 @@ export default class Options extends React.Component<IProps, IState> {
<Divider />
<div className='OptionSection'>
<div className='OptionLabel'>
<div className='OptionSection' id={'menuOptionsContainerJavaPath'}>
<div className='OptionLabel' id={'menuOptionsLabelJavaPath'}>
<Tr text="options.java_path" />
</div>
<div className='OptionValue'>
<div className='OptionValue' id={'menuOptionsDirJavaPath'}>
<DirInput onChange={this.setJavaPath} value={this.state?.java_path} extensions={['exe']} />
</div>
</div>
<div className='OptionSection'>
<div className='OptionLabel'>
<div className='OptionSection' id={'menuOptionsContainerBG'}>
<div className='OptionLabel' id={'menuOptionsLabelBG'}>
<Tr text="options.background" />
</div>
<div className='OptionValue'>
<div className='OptionValue' id={'menuOptionsDirBG'}>
<DirInput
onChange={this.setCustomBackground}
value={this.state?.bg_url_or_path}
@@ -262,12 +262,12 @@ export default class Options extends React.Component<IProps, IState> {
</div>
</div>
<div className='OptionSection'>
<div className='OptionLabel'>
<div className='OptionSection' id={'menuOptionsContainerLang'}>
<div className='OptionLabel' id={'menuOptionsLabelLang'}>
<Tr text="options.language" />
</div>
<div className='OptionValue'>
<select value={this.state.current_language} onChange={(event) => {
<div className='OptionValue' id={'menuOptionsSelectLang'}>
<select value={this.state.current_language} id={'menuOptionsSelectMenuLang'} onChange={(event) => {
this.setLanguage(event.target.value)
}}>
{this.state.language_options.map(lang => (