Merge pull request #77 from tsynik/master

use dark bar with light dialogs
This commit is contained in:
nikk
2021-06-17 20:33:36 +03:00
committed by GitHub
6 changed files with 287 additions and 273 deletions

View File

@@ -11,6 +11,8 @@ import ListItemIcon from '@material-ui/core/ListItemIcon'
import ListItemText from '@material-ui/core/ListItemText' import ListItemText from '@material-ui/core/ListItemText'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { echoHost } from 'utils/Hosts' import { echoHost } from 'utils/Hosts'
import { ThemeProvider } from '@material-ui/core/styles'
import { lightTheme } from 'components/App'
export default function AboutDialog() { export default function AboutDialog() {
const { t } = useTranslation() const { t } = useTranslation()
@@ -29,59 +31,55 @@ export default function AboutDialog() {
<ListItemText primary={t('About')} /> <ListItemText primary={t('About')} />
</ListItem> </ListItem>
<Dialog <ThemeProvider theme={lightTheme}>
open={open} <Dialog open={open} onClose={() => setOpen(false)} aria-labelledby='form-dialog-title' fullWidth maxWidth='sm'>
onClose={() => setOpen(false)} <DialogTitle id='form-dialog-title'>{t('About')}</DialogTitle>
aria-labelledby='form-dialog-title'
fullWidth
maxWidth='sm'
>
<DialogTitle id='form-dialog-title'>{t('About')}</DialogTitle>
<DialogContent>
<center>
<h2>TorrServer {torrServerVersion}</h2>
<a style={{ color: '#00a572' }} href='https://github.com/YouROK/TorrServer'>
https://github.com/YouROK/TorrServer
</a>
</center>
<DialogContent> <DialogContent>
<center> <center>
<h2>{t('ThanksToEveryone')}</h2> <h2>TorrServer {torrServerVersion}</h2>
<a style={{ color: '#00a572' }} href='https://github.com/YouROK/TorrServer'>
https://github.com/YouROK/TorrServer
</a>
</center> </center>
<br /> <DialogContent>
<h2>{t('SpecialThanks')}</h2> <center>
<b>anacrolix Matt Joiner</b>&nbsp; <h2>{t('ThanksToEveryone')}</h2>
<a style={{ color: '#00a572' }} href='https://github.com/anacrolix/'> </center>
github.com/anacrolix <br />
</a> <h2>{t('SpecialThanks')}</h2>
<br /> <b>anacrolix Matt Joiner</b>&nbsp;
<b>nikk</b>&nbsp; <a style={{ color: '#00a572' }} href='https://github.com/anacrolix/'>
<a style={{ color: '#00a572' }} href='https://github.com/tsynik'> github.com/anacrolix
github.com/tsynik </a>
</a> <br />
<br /> <b>nikk</b>&nbsp;
<b>dancheskus</b>&nbsp; <a style={{ color: '#00a572' }} href='https://github.com/tsynik'>
<a style={{ color: '#00a572' }} href='https://github.com/dancheskus'> github.com/tsynik
github.com/dancheskus </a>
</a> <br />
<br /> <b>dancheskus</b>&nbsp;
<b>tw1cker Руслан Пахнев</b>&nbsp; <a style={{ color: '#00a572' }} href='https://github.com/dancheskus'>
<a style={{ color: '#00a572' }} href='https://github.com/Nemiroff'> github.com/dancheskus
github.com/Nemiroff </a>
</a> <br />
<br /> <b>tw1cker Руслан Пахнев</b>&nbsp;
<b>SpAwN_LMG</b> <a style={{ color: '#00a572' }} href='https://github.com/Nemiroff'>
<br /> github.com/Nemiroff
</a>
<br />
<b>SpAwN_LMG</b>
<br />
</DialogContent>
</DialogContent> </DialogContent>
</DialogContent>
<DialogActions> <DialogActions>
<Button onClick={() => setOpen(false)} color='primary' variant='outlined' autoFocus> <Button onClick={() => setOpen(false)} color='primary' variant='outlined' autoFocus>
{t('Close')} {t('Close')}
</Button> </Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
</ThemeProvider>
</div> </div>
) )
} }

View File

@@ -270,7 +270,11 @@ export default function AddDialog({
onClick={handleSave} onClick={handleSave}
color='primary' color='primary'
> >
{isLoadingButton ? <CircularProgress style={{ color: 'white' }} size={20} /> : t(isEditMode ? 'Save' : 'Add')} {isLoadingButton ? (
<CircularProgress style={{ color: 'white' }} size={20} />
) : (
t(isEditMode ? 'Save' : 'Add' )
)}
</Button> </Button>
</ButtonWrapper> </ButtonWrapper>
</Dialog> </Dialog>

View File

@@ -30,7 +30,7 @@ export const lightTheme = createMuiTheme({
palette: { palette: {
type: 'light', type: 'light',
primary: { main: '#00a572' }, primary: { main: '#00a572' },
background: { paper: '#cbe8d9' }, background: { paper: '#f1f1f1' },
}, },
typography: { fontFamily: 'Open Sans, sans-serif' }, typography: { fontFamily: 'Open Sans, sans-serif' },
}) })
@@ -92,7 +92,7 @@ export default function App() {
<Sidebar isDrawerOpen={isDrawerOpen} setIsDonationDialogOpen={setIsDonationDialogOpen} /> <Sidebar isDrawerOpen={isDrawerOpen} setIsDonationDialogOpen={setIsDonationDialogOpen} />
</ThemeProvider> </ThemeProvider>
<TorrentList /> <TorrentList />
<ThemeProvider theme={darkTheme}> <ThemeProvider theme={lightTheme}>
{isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />} {isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
</ThemeProvider> </ThemeProvider>
{!JSON.parse(localStorage.getItem('snackbarIsClosed')) && <DonateSnackbar />} {!JSON.parse(localStorage.getItem('snackbarIsClosed')) && <DonateSnackbar />}

View File

@@ -3,6 +3,8 @@ import { Button, Dialog, DialogActions, DialogTitle, ListItem, ListItemIcon, Lis
import { PowerSettingsNew as PowerSettingsNewIcon } from '@material-ui/icons' import { PowerSettingsNew as PowerSettingsNewIcon } from '@material-ui/icons'
import { shutdownHost } from 'utils/Hosts' import { shutdownHost } from 'utils/Hosts'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { ThemeProvider } from '@material-ui/core/styles'
import { lightTheme } from 'components/App'
export default function CloseServer() { export default function CloseServer() {
const { t } = useTranslation() const { t } = useTranslation()
@@ -20,26 +22,28 @@ export default function CloseServer() {
<ListItemText primary={t('CloseServer')} /> <ListItemText primary={t('CloseServer')} />
</ListItem> </ListItem>
<Dialog open={open} onClose={closeDialog}> <ThemeProvider theme={lightTheme}>
<DialogTitle>{t('CloseServer?')}</DialogTitle> <Dialog open={open} onClose={closeDialog}>
<DialogActions> <DialogTitle>{t('CloseServer?')}</DialogTitle>
<Button variant='outlined' onClick={closeDialog} color='primary'> <DialogActions>
{t('Cancel')} <Button variant='outlined' onClick={closeDialog} color='primary'>
</Button> {t('Cancel')}
</Button>
<Button <Button
variant='contained' variant='contained'
onClick={() => { onClick={() => {
fetch(shutdownHost()) fetch(shutdownHost())
closeDialog() closeDialog()
}} }}
color='primary' color='primary'
autoFocus autoFocus
> >
{t('TurnOff')} {t('TurnOff')}
</Button> </Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
</ThemeProvider>
</> </>
) )
} }

View File

@@ -6,6 +6,8 @@ import DeleteIcon from '@material-ui/icons/Delete'
import { useState } from 'react' import { useState } from 'react'
import { torrentsHost } from 'utils/Hosts' import { torrentsHost } from 'utils/Hosts'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { ThemeProvider } from '@material-ui/core/styles'
import { lightTheme } from 'components/App'
const fnRemoveAll = () => { const fnRemoveAll = () => {
fetch(torrentsHost(), { fetch(torrentsHost(), {
@@ -46,26 +48,28 @@ export default function RemoveAll() {
<ListItemText primary={t('RemoveAll')} /> <ListItemText primary={t('RemoveAll')} />
</ListItem> </ListItem>
<Dialog open={open} onClose={closeDialog}> <ThemeProvider theme={lightTheme}>
<DialogTitle>{t('DeleteTorrents?')}</DialogTitle> <Dialog open={open} onClose={closeDialog}>
<DialogActions> <DialogTitle>{t('DeleteTorrents?')}</DialogTitle>
<Button variant='outlined' onClick={closeDialog} color='primary'> <DialogActions>
{t('Cancel')} <Button variant='outlined' onClick={closeDialog} color='primary'>
</Button> {t('Cancel')}
</Button>
<Button <Button
variant='contained' variant='contained'
onClick={() => { onClick={() => {
fnRemoveAll() fnRemoveAll()
closeDialog() closeDialog()
}} }}
color='primary' color='primary'
autoFocus autoFocus
> >
{t('OK')} {t('OK')}
</Button> </Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
</ThemeProvider>
</> </>
) )
} }

View File

@@ -13,6 +13,8 @@ import Button from '@material-ui/core/Button'
import { FormControlLabel, InputLabel, Select, Switch } from '@material-ui/core' import { FormControlLabel, InputLabel, Select, Switch } from '@material-ui/core'
import { settingsHost, setTorrServerHost, getTorrServerHost } from 'utils/Hosts' import { settingsHost, setTorrServerHost, getTorrServerHost } from 'utils/Hosts'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { ThemeProvider } from '@material-ui/core/styles'
import { lightTheme } from 'components/App'
export default function SettingsDialog() { export default function SettingsDialog() {
const { t } = useTranslation() const { t } = useTranslation()
@@ -100,193 +102,195 @@ export default function SettingsDialog() {
<ListItemText primary={t('Settings')} /> <ListItemText primary={t('Settings')} />
</ListItem> </ListItem>
<Dialog open={open} onClose={handleClose} aria-labelledby='form-dialog-title' fullWidth> <ThemeProvider theme={lightTheme}>
<DialogTitle id='form-dialog-title'>{t('Settings')}</DialogTitle> <Dialog open={open} onClose={handleClose} aria-labelledby='form-dialog-title' fullWidth>
<DialogContent> <DialogTitle id='form-dialog-title'>{t('Settings')}</DialogTitle>
<TextField <DialogContent>
onChange={onInputHost} <TextField
margin='dense' onChange={onInputHost}
id='TorrServerHost' margin='dense'
label={t('Host')} id='TorrServerHost'
value={tsHost} label={t('Host')}
type='url' value={tsHost}
fullWidth type='url'
/> fullWidth
{show && ( />
<> {show && (
<TextField <>
onChange={inputForm} <TextField
margin='dense' onChange={inputForm}
id='CacheSize' margin='dense'
label={t('CacheSize')} id='CacheSize'
value={CacheSize} label={t('CacheSize')}
type='number' value={CacheSize}
fullWidth type='number'
/> fullWidth
<br /> />
<TextField <br />
onChange={inputForm} <TextField
margin='dense' onChange={inputForm}
id='ReaderReadAHead' margin='dense'
label={t('ReaderReadAHead')} id='ReaderReadAHead'
value={ReaderReadAHead} label={t('ReaderReadAHead')}
type='number' value={ReaderReadAHead}
fullWidth type='number'
/> fullWidth
<br /> />
<FormControlLabel <br />
control={<Switch checked={PreloadBuffer} onChange={inputForm} id='PreloadBuffer' color='primary' />} <FormControlLabel
label={t('PreloadBuffer')} control={<Switch checked={PreloadBuffer} onChange={inputForm} id='PreloadBuffer' color='primary' />}
/> label={t('PreloadBuffer')}
<br /> />
<FormControlLabel <br />
control={<Switch checked={UseDisk} onChange={inputForm} id='UseDisk' color='primary' />} <FormControlLabel
label={t('UseDisk')} control={<Switch checked={UseDisk} onChange={inputForm} id='UseDisk' color='primary' />}
/> label={t('UseDisk')}
<br /> />
<small>{t('UseDiskDesc')}</small> <br />
<br /> <small>{t('UseDiskDesc')}</small>
<FormControlLabel <br />
control={ <FormControlLabel
<Switch checked={RemoveCacheOnDrop} onChange={inputForm} id='RemoveCacheOnDrop' color='primary' /> control={
} <Switch checked={RemoveCacheOnDrop} onChange={inputForm} id='RemoveCacheOnDrop' color='primary' />
label={t('RemoveCacheOnDrop')} }
/> label={t('RemoveCacheOnDrop')}
<br /> />
<small>{t('RemoveCacheOnDropDesc')}</small> <br />
<br /> <small>{t('RemoveCacheOnDropDesc')}</small>
<TextField <br />
onChange={inputForm} <TextField
margin='dense' onChange={inputForm}
id='TorrentsSavePath' margin='dense'
label={t('TorrentsSavePath')} id='TorrentsSavePath'
value={TorrentsSavePath} label={t('TorrentsSavePath')}
type='url' value={TorrentsSavePath}
fullWidth type='url'
/> fullWidth
<br /> />
<FormControlLabel <br />
control={<Switch checked={EnableIPv6} onChange={inputForm} id='EnableIPv6' color='primary' />} <FormControlLabel
label={t('EnableIPv6')} control={<Switch checked={EnableIPv6} onChange={inputForm} id='EnableIPv6' color='primary' />}
/> label={t('EnableIPv6')}
<br /> />
<FormControlLabel <br />
control={<Switch checked={!DisableTCP} onChange={inputForm} id='DisableTCP' color='primary' />} <FormControlLabel
label={t('TCP')} control={<Switch checked={!DisableTCP} onChange={inputForm} id='DisableTCP' color='primary' />}
/> label={t('TCP')}
<br /> />
<FormControlLabel <br />
control={<Switch checked={!DisableUTP} onChange={inputForm} id='DisableUTP' color='primary' />} <FormControlLabel
label={t('UTP')} control={<Switch checked={!DisableUTP} onChange={inputForm} id='DisableUTP' color='primary' />}
/> label={t('UTP')}
<br /> />
<FormControlLabel <br />
control={<Switch checked={!DisablePEX} onChange={inputForm} id='DisablePEX' color='primary' />} <FormControlLabel
label={t('PEX')} control={<Switch checked={!DisablePEX} onChange={inputForm} id='DisablePEX' color='primary' />}
/> label={t('PEX')}
<br /> />
<FormControlLabel <br />
control={<Switch checked={ForceEncrypt} onChange={inputForm} id='ForceEncrypt' color='primary' />} <FormControlLabel
label={t('ForceEncrypt')} control={<Switch checked={ForceEncrypt} onChange={inputForm} id='ForceEncrypt' color='primary' />}
/> label={t('ForceEncrypt')}
<br /> />
<TextField <br />
onChange={inputForm} <TextField
margin='dense' onChange={inputForm}
id='TorrentDisconnectTimeout' margin='dense'
label={t('TorrentDisconnectTimeout')} id='TorrentDisconnectTimeout'
value={TorrentDisconnectTimeout} label={t('TorrentDisconnectTimeout')}
type='number' value={TorrentDisconnectTimeout}
fullWidth type='number'
/> fullWidth
<br /> />
<TextField <br />
onChange={inputForm} <TextField
margin='dense' onChange={inputForm}
id='ConnectionsLimit' margin='dense'
label={t('ConnectionsLimit')} id='ConnectionsLimit'
value={ConnectionsLimit} label={t('ConnectionsLimit')}
type='number' value={ConnectionsLimit}
fullWidth type='number'
/> fullWidth
<br /> />
<FormControlLabel <br />
control={<Switch checked={!DisableDHT} onChange={inputForm} id='DisableDHT' color='primary' />} <FormControlLabel
label={t('DHT')} control={<Switch checked={!DisableDHT} onChange={inputForm} id='DisableDHT' color='primary' />}
/> label={t('DHT')}
<br /> />
<TextField <br />
onChange={inputForm} <TextField
margin='dense' onChange={inputForm}
id='DhtConnectionLimit' margin='dense'
label={t('DhtConnectionLimit')} id='DhtConnectionLimit'
value={DhtConnectionLimit} label={t('DhtConnectionLimit')}
type='number' value={DhtConnectionLimit}
fullWidth type='number'
/> fullWidth
<br /> />
<TextField <br />
onChange={inputForm} <TextField
margin='dense' onChange={inputForm}
id='DownloadRateLimit' margin='dense'
label={t('DownloadRateLimit')} id='DownloadRateLimit'
value={DownloadRateLimit} label={t('DownloadRateLimit')}
type='number' value={DownloadRateLimit}
fullWidth type='number'
/> fullWidth
<br /> />
<FormControlLabel <br />
control={<Switch checked={!DisableUpload} onChange={inputForm} id='DisableUpload' color='primary' />} <FormControlLabel
label={t('Upload')} control={<Switch checked={!DisableUpload} onChange={inputForm} id='DisableUpload' color='primary' />}
/> label={t('Upload')}
<br /> />
<TextField <br />
onChange={inputForm} <TextField
margin='dense' onChange={inputForm}
id='UploadRateLimit' margin='dense'
label={t('UploadRateLimit')} id='UploadRateLimit'
value={UploadRateLimit} label={t('UploadRateLimit')}
type='number' value={UploadRateLimit}
fullWidth type='number'
/> fullWidth
<br /> />
<TextField <br />
onChange={inputForm} <TextField
margin='dense' onChange={inputForm}
id='PeersListenPort' margin='dense'
label={t('PeersListenPort')} id='PeersListenPort'
value={PeersListenPort} label={t('PeersListenPort')}
type='number' value={PeersListenPort}
fullWidth type='number'
/> fullWidth
<br /> />
<FormControlLabel <br />
control={<Switch checked={!DisableUPNP} onChange={inputForm} id='DisableUPNP' color='primary' />} <FormControlLabel
label={t('UPNP')} control={<Switch checked={!DisableUPNP} onChange={inputForm} id='DisableUPNP' color='primary' />}
/> label={t('UPNP')}
<br /> />
<InputLabel htmlFor='RetrackersMode'>{t('RetrackersMode')}</InputLabel> <br />
<Select onChange={inputForm} type='number' native id='RetrackersMode' value={RetrackersMode}> <InputLabel htmlFor='RetrackersMode'>{t('RetrackersMode')}</InputLabel>
<option value={0}>{t('DontAddRetrackers')}</option> <Select onChange={inputForm} type='number' native id='RetrackersMode' value={RetrackersMode}>
<option value={1}>{t('AddRetrackers')}</option> <option value={0}>{t('DontAddRetrackers')}</option>
<option value={2}>{t('RemoveRetrackers')}</option> <option value={1}>{t('AddRetrackers')}</option>
<option value={3}>{t('ReplaceRetrackers')}</option> <option value={2}>{t('RemoveRetrackers')}</option>
</Select> <option value={3}>{t('ReplaceRetrackers')}</option>
<br /> </Select>
</> <br />
)} </>
</DialogContent> )}
</DialogContent>
<DialogActions> <DialogActions>
<Button onClick={handleClose} color='primary' variant='outlined'> <Button onClick={handleClose} color='primary' variant='outlined'>
{t('Cancel')} {t('Cancel')}
</Button> </Button>
<Button onClick={handleSave} color='primary' variant='outlined'> <Button onClick={handleSave} color='primary' variant='outlined'>
{t('Save')} {t('Save')}
</Button> </Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
</ThemeProvider>
</div> </div>
) )
} }