sovonegr/TorrServerJellyfin
1
0
Fork 0
mirror of https://github.com/Ernous/TorrServerJellyfin.git synced 2025-12-19 13:36:09 +05:00
Code Issues Packages Projects Releases Wiki Activity

unify snake across themes and close button

Browse Source
This commit is contained in:
nikk gitanes
2021-08-18 02:16:35 +03:00
parent 862ad66e3b
commit a0d257e070
4 changed files with 22 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
web/src/components/DialogTorrentDetailsContent/DialogHeader.jsx
View File

@@ -1,34 +1,31 @@
import Button from '@material-ui/core/Button'
import { AppBar, IconButton, makeStyles, Toolbar, Typography } from '@material-ui/core' import { AppBar, IconButton, makeStyles, Toolbar, Typography } from '@material-ui/core'
import CloseIcon from '@material-ui/icons/Close' import CloseIcon from '@material-ui/icons/Close'
import { ArrowBack } from '@material-ui/icons' import { ArrowBack } from '@material-ui/icons'
import { useTranslation } from 'react-i18next'
const useStyles = makeStyles({ const useStyles = makeStyles({
appBar: { position: 'relative' }, appBar: { position: 'relative' },
title: { marginLeft: '6px', flex: 1 }, title: { marginLeft: '5px', flex: 1 },
}) })
export default function DialogHeader({ title, onClose, onBack }) { export default function DialogHeader({ title, onClose, onBack }) {
const { t } = useTranslation()
const classes = useStyles() const classes = useStyles()
return ( return (
<AppBar className={classes.appBar}> <AppBar className={classes.appBar}>
<Toolbar> <Toolbar>
<IconButton edge='start' color='inherit' onClick={onBack || onClose} aria-label='close'> {onBack && (
{onBack ? <ArrowBack /> : <CloseIcon />} <IconButton edge='start' color='inherit' onClick={onBack} aria-label='back'>
</IconButton> <ArrowBack />
</IconButton>
)}
<Typography variant='h6' className={classes.title}> <Typography variant='h6' className={classes.title}>
{title} {title}
</Typography> </Typography>
{onBack && ( <IconButton autoFocus color='inherit' onClick={onClose} aria-label='close' style={{ marginRight: '-10px' }}>
<Button autoFocus color='inherit' onClick={onClose}> <CloseIcon />
{t('Close')} </IconButton>
</Button>
)}
</Toolbar> </Toolbar>
</AppBar> </AppBar>
) )

20
web/src/components/DialogTorrentDetailsContent/TorrentCache/snakeSettings.js
View File

@@ -4,14 +4,14 @@ import { mainColors } from 'style/colors'
export const snakeSettings = { export const snakeSettings = {
dark: { dark: {
default: { default: {
borderWidth: 2, borderWidth: 1,
pieceSize: 14, pieceSize: 14,
gapBetweenPieces: 3, gapBetweenPieces: 3,
borderColor: mainColors.dark.secondary, borderColor: rgba('#949ca0', 0.25),
completeColor: rgba(mainColors.dark.primary, 0.65), completeColor: rgba(mainColors.dark.primary, 0.5),
backgroundColor: '#f1eff3', backgroundColor: '#f1eff3',
progressColor: mainColors.dark.secondary, progressColor: mainColors.dark.secondary,
readerColor: '#000', readerColor: '#8f0405',
rangeColor: '#cda184', rangeColor: '#cda184',
}, },
mini: { mini: {
@@ -19,11 +19,11 @@ export const snakeSettings = {
borderWidth: 2, borderWidth: 2,
pieceSize: 23, pieceSize: 23,
gapBetweenPieces: 6, gapBetweenPieces: 6,
borderColor: '#545a5e', borderColor: '#5c6469',
completeColor: '#545a5e', completeColor: '#5c6469',
backgroundColor: '#dee3e5', backgroundColor: '#949ca0',
progressColor: '#dee3e5', progressColor: '#949ca0',
readerColor: '#000', readerColor: '#00a572',
rangeColor: '#cda184', rangeColor: '#cda184',
}, },
}, },
@@ -48,7 +48,7 @@ export const snakeSettings = {
completeColor: '#4db380', completeColor: '#4db380',
backgroundColor: '#dbf2e8', backgroundColor: '#dbf2e8',
progressColor: '#dbf2e8', progressColor: '#dbf2e8',
readerColor: '#2d714f', readerColor: '#303030',
rangeColor: '#afa6e3', rangeColor: '#afa6e3',
}, },
}, },

1
web/src/components/DialogTorrentDetailsContent/index.jsx
View File

@@ -204,6 +204,7 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
{bufferSize <= 33554432 && <SectionSubName>{t('BufferNote')}</SectionSubName>} {bufferSize <= 33554432 && <SectionSubName>{t('BufferNote')}</SectionSubName>}
<LoadingProgress <LoadingProgress
value={Filled} value={Filled}
style={{ marginTop: '5px' }}
fullAmount={bufferSize} fullAmount={bufferSize}
label={`${humanizeSize(bufferSize)} / ${humanizeSize(Filled) || `0 ${t('B')}`}`} label={`${humanizeSize(bufferSize)} / ${humanizeSize(Filled) || `0 ${t('B')}`}`}
/> />

4
web/src/components/DialogTorrentDetailsContent/style.js
View File

@@ -281,7 +281,7 @@ export const LoadingProgress = styled.div.attrs(
value, value,
fullAmount, fullAmount,
theme: { theme: {
dialogTorrentDetailsContent: { gradientEndColor }, dialogTorrentDetailsContent: { gradientStartColor, gradientEndColor },
}, },
}) => { }) => {
const percentage = Math.min(100, (value * 100) / fullAmount) const percentage = Math.min(100, (value * 100) / fullAmount)
@@ -289,7 +289,7 @@ export const LoadingProgress = styled.div.attrs(
return { return {
// this block is here according to styled-components recomendation about fast changable components // this block is here according to styled-components recomendation about fast changable components
style: { style: {
background: `linear-gradient(to right, ${gradientEndColor} 0%, ${gradientEndColor} ${percentage}%, #fff ${percentage}%, #fff 100%)`, background: `linear-gradient(to right, ${gradientStartColor} 0%, ${gradientEndColor} ${percentage}%, #fff ${percentage}%, #fff 100%)`,
}, },
} }
}, },