visuals for enabling/disableing

src/ui/components/mods/ModTile.tsx

@@ -7,6 +7,7 @@ import Eye from '../../../resources/icons/eye.svg'
 import Download from '../../../resources/icons/download.svg'
 import Folder from '../../../resources/icons/folder.svg'
 import { shell } from '@tauri-apps/api'
+import Checkbox from '../common/Checkbox'
 
 interface IProps {
   mod: ModData | PartialModData
@@ -16,6 +17,7 @@ interface IProps {
 
 interface IState {
   hover: boolean
+  modEnabled: boolean
 }
 
 export class ModTile extends React.Component<IProps, IState> {
@@ -23,14 +25,25 @@ export class ModTile extends React.Component<IProps, IState> {
     super(props)
 
     this.state = {
-      hover: false,
+      hover: true,
+      modEnabled: false,
     }
+
+    this.openInExplorer = this.openInExplorer.bind(this)
+    this.toggleMod = this.toggleMod.bind(this)
   }
 
   async openInExplorer() {
     if (this.props.path) shell.open(this.props.path)
   }
 
+  toggleMod() {
+    console.log('Mod toggled')
+    this.setState({
+      modEnabled: !this.state.modEnabled,
+    })
+  }
+
   render() {
     const { mod } = this.props
 
@@ -38,14 +51,14 @@ export class ModTile extends React.Component<IProps, IState> {
       <div
         className="ModListItem"
         onMouseEnter={() => this.setState({ hover: true })}
-        onMouseLeave={() => this.setState({ hover: false })}
-        onClick={() => {
-          // Disable downloading installed mods
-          if (this.props.path) return this.openInExplorer()
-          if (!('id' in mod)) return
+        onMouseLeave={() => this.setState({ hover: true })}
+        {...(!this.props.path && {
+          onClick: () => {
+            if (!('id' in mod)) return
 
-          this.props.onClick(mod)
-        }}
+            this.props.onClick(mod)
+          },
+        })}
       >
         <span className="ModName">{mod.name}</span>
         <span className="ModAuthor">{mod.submitter.name}</span>
@@ -54,11 +67,18 @@ export class ModTile extends React.Component<IProps, IState> {
             (!this.props.path ? (
               <img src={Download} className="ModTileDownload" alt="Download" />
             ) : (
-              <img src={Folder} className="ModTileOpen" alt="Open" />
+              <div className="ModTileOpen">
+                <img src={Folder} className="ModTileFolder" alt="Open" onClick={this.openInExplorer} />
+                <Checkbox
+                  checked={/* TODO GET INSTALL STATUS */ this.state.modEnabled}
+                  id={this.props.mod.name}
+                  onChange={this.toggleMod}
+                />
+              </div>
             ))}
           <img
             src={mod.images[0]}
-            className={`${'id' in mod && mod.nsfw ? 'nsfw' : ''} ${this.state.hover ? 'blur' : ''}`}
+            className={`ModImageInner ${'id' in mod && mod.nsfw ? 'nsfw' : ''} ${this.state.hover ? 'blur' : ''}`}
           />
         </div>
         <div className="ModInner">