Grasscutters/Cultivation
1
0
Fork 0
mirror of https://github.com/Grasscutters/Cultivation.git synced 2025-03-04 10:29:57 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added documentation for react components under /common and fix for some leftover element id's on commonly used components that I missed.

Browse Source
This commit is contained in:
TukanDev 2022-07-05 20:23:20 +02:00
parent 8f6ae91a8a
commit 2af33ccc33
5 changed files with 47 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
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,43 @@
| `#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 |
| `.BigButton:hover` | Hover state of all buttons |
| `.BigButton.disabled` | Disabled state of all buttons |
| `.BigButton.disabled:hover` | Disabled state with hover |
| `.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>