Refactor/download queue and cleanup visuals overall (#202)
* Move context providers and configuration providers to separate component, extract theme to separate file * Use custom palette color instead of direct colors * Replace different clicable things with CardActionArea to get transition and links * Refactor DownloadQueue, update layout, unify all the download progress indicators * Unify active filter indicator * Use divider instead of hr * Fix background color in extensions light theme * Fix thumbnail overlay in library screen list view * Don't show download button on downloaded updates
This commit is contained in:
Valter Martinek
@@ -5,16 +5,17 @@
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
|
||||
|
||||
import React from 'react';
|
||||
import { CardActionArea } from '@mui/material';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Button from '@mui/material/Button';
|
||||
import Card from '@mui/material/Card';
|
||||
import CardContent from '@mui/material/CardContent';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import Button from '@mui/material/Button';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import useLocalStorage from 'util/useLocalStorage';
|
||||
import { langCodeToName } from 'util/language';
|
||||
import { Box, styled } from '@mui/system';
|
||||
import React from 'react';
|
||||
import { Link, useHistory } from 'react-router-dom';
|
||||
import { langCodeToName } from 'util/language';
|
||||
import useLocalStorage from 'util/useLocalStorage';
|
||||
|
||||
const MobileWidthButtons = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
@@ -38,7 +39,7 @@ interface IProps {
|
||||
source: ISource
|
||||
}
|
||||
|
||||
export default function SourceCard(props: IProps) {
|
||||
const SourceCard: React.FC<IProps> = (props: IProps) => {
|
||||
const {
|
||||
source: {
|
||||
id, name, lang, iconUrl, supportsLatest, isNsfw,
|
||||
@@ -61,82 +62,83 @@ export default function SourceCard(props: IProps) {
|
||||
<Card
|
||||
sx={{
|
||||
margin: '10px',
|
||||
'&:hover': {
|
||||
backgroundColor: 'action.hover',
|
||||
transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
|
||||
},
|
||||
'&:active': {
|
||||
backgroundColor: 'action.selected',
|
||||
transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
|
||||
},
|
||||
}}
|
||||
onClick={(e) => redirectTo(e, `/sources/${id}/popular/`)}
|
||||
>
|
||||
<CardContent sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: 2,
|
||||
}}
|
||||
<CardActionArea
|
||||
component={Link}
|
||||
to={`/sources/${id}/popular/`}
|
||||
>
|
||||
<CardContent
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: 2,
|
||||
}}
|
||||
>
|
||||
|
||||
<Box sx={{ display: 'flex' }}>
|
||||
<Avatar
|
||||
variant="rounded"
|
||||
alt={name}
|
||||
sx={{
|
||||
width: 56,
|
||||
height: 56,
|
||||
flex: '0 0 auto',
|
||||
mr: 2,
|
||||
}}
|
||||
src={`${serverAddress}${iconUrl}?useCache=${useCache}`}
|
||||
/>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
|
||||
<Typography variant="h5" component="h2">
|
||||
{name}
|
||||
</Typography>
|
||||
{id !== '0' && (
|
||||
<Typography variant="caption" display="block" gutterBottom>
|
||||
{langCodeToName(lang)}
|
||||
{isNsfw && (
|
||||
<Typography variant="caption" display="inline" gutterBottom color="red">
|
||||
{' 18+'}
|
||||
</Typography>
|
||||
)}
|
||||
<Box sx={{ display: 'flex' }}>
|
||||
<Avatar
|
||||
variant="rounded"
|
||||
alt={name}
|
||||
sx={{
|
||||
width: 56,
|
||||
height: 56,
|
||||
flex: '0 0 auto',
|
||||
mr: 2,
|
||||
}}
|
||||
src={`${serverAddress}${iconUrl}?useCache=${useCache}`}
|
||||
/>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
|
||||
<Typography variant="h5" component="h2">
|
||||
{name}
|
||||
</Typography>
|
||||
)}
|
||||
{id !== '0' && (
|
||||
<Typography variant="caption" display="block" gutterBottom>
|
||||
{langCodeToName(lang)}
|
||||
{isNsfw && (
|
||||
<Typography variant="caption" display="inline" gutterBottom color="red">
|
||||
{' 18+'}
|
||||
</Typography>
|
||||
)}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<>
|
||||
<MobileWidthButtons>
|
||||
{supportsLatest && (
|
||||
<>
|
||||
<MobileWidthButtons>
|
||||
{supportsLatest && (
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={(e) => redirectTo(e, `/sources/${id}/latest/`)}
|
||||
>
|
||||
Latest
|
||||
</Button>
|
||||
)}
|
||||
</MobileWidthButtons>
|
||||
<WiderWidthButtons>
|
||||
{supportsLatest && (
|
||||
<Button
|
||||
component={Link}
|
||||
to={`/sources/${id}/latest/`}
|
||||
variant="outlined"
|
||||
>
|
||||
Latest
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
component={Link}
|
||||
to={`/sources/${id}/popular/`}
|
||||
variant="outlined"
|
||||
onClick={(e) => redirectTo(e, `/sources/${id}/latest/`)}
|
||||
>
|
||||
Latest
|
||||
Browse
|
||||
</Button>
|
||||
)}
|
||||
</MobileWidthButtons>
|
||||
<WiderWidthButtons>
|
||||
{supportsLatest && (
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={(e) => redirectTo(e, `/sources/${id}/latest/`)}
|
||||
>
|
||||
Latest
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={(e: any) => redirectTo(e, `/sources/${id}/popular/`)}
|
||||
>
|
||||
Browse
|
||||
</Button>
|
||||
</WiderWidthButtons>
|
||||
</>
|
||||
</CardContent>
|
||||
</WiderWidthButtons>
|
||||
</>
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default SourceCard;
|
||||
|
||||
Reference in New Issue
Block a user