visuals for enabling/disableing

src/ui/Mods.tsx

@@ -10,6 +10,7 @@ import { ModList } from './components/mods/ModList'
 import TopBar from './components/TopBar'
 
 import './Mods.css'
+import Back from '../resources/icons/back.svg'
 
 interface IProps {
   downloadHandler: DownloadHandler
@@ -85,7 +86,19 @@ export class Mods extends React.Component<IProps, IState> {
   render() {
     return (
       <div className="Mods">
-        <TopBar />
+        <TopBar>
+          <div
+            id="backbtn"
+            className="TopButton"
+            onClick={() => {
+              // Create and dispatch a custom "openMods" event
+              const event = new CustomEvent('changePage', { detail: 'main' })
+              window.dispatchEvent(event)
+            }}
+          >
+            <img src={Back} alt="back" />
+          </div>
+        </TopBar>
 
         <div className="TopDownloads">
           <ProgressBar downloadManager={this.props.downloadHandler} />

src/ui/components/TopBar.tsx

@@ -9,7 +9,7 @@ import closeIcon from '../../resources/icons/close.svg'
 import minIcon from '../../resources/icons/min.svg'
 
 interface IProps {
-  children?: React.ReactNode[]
+  children?: React.ReactNode | React.ReactNode[]
 }
 
 interface IState {

src/ui/components/common/Checkbox.css

@@ -16,7 +16,7 @@
 }
 
 .CheckboxDisplay img {
-  height: 100%;
+  height: 100% !important;
   filter: invert(99%) sepia(0%) saturate(1188%) hue-rotate(186deg) brightness(97%) contrast(67%);
 }
 

src/ui/components/common/Checkbox.tsx

@@ -7,7 +7,7 @@ interface IProps {
   label?: string
   checked: boolean
   onChange: () => void
-  id: string
+  id?: string
 }
 
 interface IState {
@@ -35,6 +35,7 @@ export default class Checkbox extends React.Component<IProps, IState> {
 
   handleChange = () => {
     this.setState({ checked: !this.state.checked })
+    console.log(this.props.onChange)
     this.props.onChange()
   }
 

src/ui/components/mods/ModTile.css

@@ -36,13 +36,30 @@
   padding: 0 0 0 10px;
 }
 
+.ModTileOpen {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.Checkbox {
+  filter: invert(100%) sepia(2%) saturate(201%) hue-rotate(47deg) brightness(117%) contrast(100%);
+}
+
+.ModTileOpen .ModTileFolder {
+  width: 40px !important;
+  height: 40px !important;
+  margin: 20px;
+}
+
 .ModTileOpen,
 .ModTileDownload {
   position: absolute;
   object-fit: contain;
 
   left: 37.5%;
-  top: 40%;
+  top: 45%;
 
   z-index: 999;
 
@@ -61,7 +78,7 @@
   justify-content: center;
 }
 
-.ModImage img {
+.ModImage .ModImageInner {
   object-fit: cover;
   width: 100%;
   height: 150px;

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">