phc/lean4game
6
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Modify logic for all preferences

Browse Source
This commit is contained in:
ran
2024-01-12 23:29:03 +08:00
parent cd1d212a3c
commit 8c93b3c5b3
10 changed files with 107 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/popup/preferences.tsx
+28 -23
View File
@@ -1,16 +1,20 @@
import * as React from 'react'
import { Input, Typography } from '@mui/material'
import Markdown from '../markdown'
import Switch from '@mui/material/Switch';
import { Switch, Button, ButtonGroup } from '@mui/material';
import FormControlLabel from '@mui/material/FormControlLabel';
import { IMobileContext } from "../infoview/context"
import { PreferencesState } from "../../state/preferences"
interface PreferencesPopupProps extends IMobileContext{
handleClose: () => void
}
interface PreferencesPopupProps extends PreferencesState{
handleClose: () => void,
setLayout: (layout: "mobile" | "auto" | "desktop") => void,
setIsSavePreferences: (isSave: boolean) => void
}
export function PreferencesPopup({ mobile, setMobile, lockMobile, setLockMobile, handleClose }: PreferencesPopupProps) {
export function PreferencesPopup({ layout, setLayout, isSavePreferences, setIsSavePreferences, handleClose }: PreferencesPopupProps) {
return <div className="modal-wrapper">
<div className="modal-backdrop" onClick={handleClose} />
<div className="modal">
@@ -18,34 +22,35 @@ export function PreferencesPopup({ mobile, setMobile, lockMobile, setLockMobile,
<Typography variant="body1" component="div" className="settings">
<div className='preferences-category'>
<div className='category-title'>
<h3>Mobile layout</h3>
<h3>Layout</h3>
</div>
<div className='preferences-item'>
<div className='preferences-item first leave-left-gap'>
<FormControlLabel
control={
<Switch
checked={mobile}
onChange={() => setMobile(!mobile)}
name="checked"
color="primary"
/>
<ButtonGroup aria-label="outlined primary button group">
<Button onClick={() => setLayout("mobile")} variant={layout === "mobile" ? "contained" : "outlined"}>Mobile</Button>
<Button onClick={() => setLayout("auto")} variant={layout === "auto" ? "contained" : "outlined"}>Auto</Button>
<Button onClick={() => setLayout("desktop")} variant={layout === "desktop" ? "contained" : "outlined"}>Desktop</Button>
</ButtonGroup>
}
label="Enable"
labelPlacement="start"
label=""
/>
</div>
</div>
<div className='preferences-category tail-category'>
<div className='preferences-item'>
<FormControlLabel
control={
<Switch
checked={!lockMobile}
onChange={() => setLockMobile(!lockMobile)}
name="checked"
color="primary"
/>
<Switch
checked={isSavePreferences}
onChange={() => setIsSavePreferences(!isSavePreferences)}
name="checked"
color="primary"
/>
}
label="Auto"
labelPlacement="start"
label="Save my settings (in the browser store)"
labelPlacement="end"
/>
</div>
</div>