Mirror/Cultivation
1
0
Fork 0
mirror of https://github.com/Grasscutters/Cultivation.git synced 2025-12-12 15:14:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #15 from TukanDev/main

Browse Source 
Documentation for classes used for react components under /common and some small fixes
This commit is contained in:
SpikeHD
2022-07-05 11:49:53 -07:00
committed by GitHub
parent 9558fb0eaf 0c1fb3e25e
commit 5bca75629c
6 changed files with 46 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
THEMES.md
View File

@@ -38,7 +38,8 @@ 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",
"customBackgroundFile": "/image.png"
}
```

43
docs/elementIds.md
View File

@@ -1,4 +1,7 @@
# Documentation of Element ID's for custom theming
# Documentation of Element ID's and Classes for custom theming
## IDs
This does not include commonly used components (buttons, divider lines, commit author and message, etc...) for accessing and modifying those elements, please check `Classes` section bellow.
| #ID | Description |
|----------------------------------------|-----------------------------------------------------------------|
@@ -91,4 +94,40 @@
| `#menuOptionsSelectMenuLang` | Language select menu |
| `#DownloadProgress` | Download progress container |
| `#bottomSectionContainer` | Bottom section container |
| `#miniDownloadContainer` | Container for mini download |
| `#miniDownloadContainer` | Container for mini download |
## Classes
This is not full list of all classes, rather its list of classes for commonly used components that can not be accessed using element id system.
| .Class | Description |
|-----------------------------|---------------------------------------------------------|
| `.BigButton` | Class for all buttons |
| `.BigButtonText` | Text inside a button | |
| `.Checkbox` | Checkbox container |
| `.CheckboxDisplay` | Content of checkbox |
| `.DirInput` | Container for DirInput |
| `.FileSelectIcon` | Icon of DirInput |
| `.DownloadList` | List of all downloads |
| `.DownloadSection` | Container for each download |
| `.DownloadTitle` | Contains file download path and current status |
| `.DownloadPath` | Path of a download |
| `.DownloadStatus` | Status of a download |
| `.DownloadSectionInner` | Contains progressbar of the download section |
| `.HelpSection` | Container for help "?" circle button |
| `.HelpButton` | HelpButton itself |
| `.HelpContents` | Content of help button once expanded |
| `.MainProgressBarWrapper` | Container for MainProgressBar |
| `.ProgressBar` | ProgressBar (creativity left the brain) |
| `.InnerProgress` | ProgressBar percentage |
| `.MainProgressText` | Text for MainProgressBar |
| `.ProgressBarWrapper` | Container for ProgressBar |
| `.DownloadControls` | DownloadControls of ProgressBar |
| `.downloadStop` | Container for download stop icon (SVG) |
| `.ProgressText` | Text of the ProgressBar display current download status |
| `.TextInputWrapper` | Container for TextInput |
| `.TextClear` | Container for clear input content button |
| `.TextInputClear` | TextInput clear button icon (SVG) |
| `.Divider` | Container for line dividers |
| `.DividerLine` | Divider line itself |
| `.CommitAuthor` | Author of a commit |
| `.CommitMessage` | Message of a commit |

2
src/ui/components/common/Checkbox.tsx
View File

@@ -42,7 +42,7 @@ export default class Checkbox extends React.Component<IProps, IState> {
return (
<div className="Checkbox">
<input type='checkbox' id={this.props.id} checked={this.state.checked} onChange={this.handleChange} />
<label id="commonCheckboxLabel" htmlFor={this.props.id}>
<label htmlFor={this.props.id}>
<div className="CheckboxDisplay">
{this.state.checked ? <img src={checkmark} alt='Checkmark' /> : null}
</div>

1
src/ui/components/common/DirInput.tsx
View File

@@ -88,7 +88,6 @@ export default class DirInput extends React.Component<IProps, IState> {
return (
<div className='DirInput'>
<TextInput
id='commonDirInputText'
value={this.state.value}
placeholder={this.state.placeholder}
clearable={this.props.clearable !== undefined ? this.props.clearable : true}

2
src/ui/components/common/HelpButton.tsx
View File

@@ -38,7 +38,7 @@ export default class HelpButton extends React.Component<IProps, IState> {
return (
<div className="HelpSection">
<div className="HelpButton" onMouseEnter={this.setOpen} onMouseLeave={this.setClosed}>
<img id="commonHelpButtonIcon" src={Help} />
<img src={Help} />
</div>
<div className="HelpContents" style={{

2
src/ui/components/common/ProgressBar.tsx
View File

@@ -75,7 +75,7 @@ export default class ProgressBar extends React.Component<IProps, IState> {
</div>
<div className="DownloadControls">
<div onClick={this.stopDownload} className="downloadStop">
<img id="commonProgressBarDownStopIcon" src={Stop}></img>
<img src={Stop}></img>
</div>
</div>
</div>