Update manage repositories button and use legacy grid
This commit is contained in:
@@ -361,7 +361,15 @@ export default tseslint.config(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
'@typescript-eslint/no-deprecated': 'warn',
|
'@typescript-eslint/no-deprecated': [
|
||||||
|
'warn',
|
||||||
|
{
|
||||||
|
allow: [
|
||||||
|
// Allow the deprecated Grid component from mui since JMP does not support CSS gap on some OSs
|
||||||
|
{ from: '@mui/material/Grid', name: 'Grid' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
'@typescript-eslint/no-floating-promises': 'error',
|
'@typescript-eslint/no-floating-promises': 'error',
|
||||||
'@typescript-eslint/prefer-string-starts-ends-with': 'error'
|
'@typescript-eslint/prefer-string-starts-ends-with': 'error'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,9 @@
|
|||||||
import Settings from '@mui/icons-material/Settings';
|
|
||||||
import Alert from '@mui/material/Alert';
|
import Alert from '@mui/material/Alert';
|
||||||
import Box from '@mui/material/Box';
|
import Box from '@mui/material/Box';
|
||||||
|
import Button from '@mui/material/Button';
|
||||||
import Chip from '@mui/material/Chip';
|
import Chip from '@mui/material/Chip';
|
||||||
import Divider from '@mui/material/Divider';
|
import Divider from '@mui/material/Divider';
|
||||||
import Grid from '@mui/material/Grid2';
|
import Grid from '@mui/material/Grid';
|
||||||
import IconButton from '@mui/material/IconButton/IconButton';
|
|
||||||
import Stack from '@mui/material/Stack';
|
import Stack from '@mui/material/Stack';
|
||||||
import Typography from '@mui/material/Typography';
|
import Typography from '@mui/material/Typography';
|
||||||
import React, { useCallback, useMemo, useState } from 'react';
|
import React, { useCallback, useMemo, useState } from 'react';
|
||||||
@@ -20,7 +19,6 @@ import { PluginStatusOption } from 'apps/dashboard/features/plugins/constants/pl
|
|||||||
import Loading from 'components/loading/LoadingComponent';
|
import Loading from 'components/loading/LoadingComponent';
|
||||||
import Page from 'components/Page';
|
import Page from 'components/Page';
|
||||||
import globalize from 'lib/globalize';
|
import globalize from 'lib/globalize';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The list of primary/main categories.
|
* The list of primary/main categories.
|
||||||
* Any category not in this list will be added to the "other" category.
|
* Any category not in this list will be added to the "other" category.
|
||||||
@@ -101,35 +99,53 @@ export const Component = () => {
|
|||||||
</Alert>
|
</Alert>
|
||||||
) : (
|
) : (
|
||||||
<Stack spacing={2}>
|
<Stack spacing={2}>
|
||||||
<Grid
|
<Stack
|
||||||
container
|
direction='row'
|
||||||
spacing={2}
|
sx={{
|
||||||
|
flexWrap: {
|
||||||
|
xs: 'wrap',
|
||||||
|
sm: 'nowrap'
|
||||||
|
}
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<Grid size={{ xs: 12, sm: 8 }}>
|
<Typography
|
||||||
<Typography
|
variant='h1'
|
||||||
variant='h1'
|
component='span'
|
||||||
component='span'
|
sx={{
|
||||||
sx={{
|
flexGrow: 1,
|
||||||
marginRight: 2,
|
verticalAlign: 'middle'
|
||||||
verticalAlign: 'middle'
|
}}
|
||||||
}}
|
>
|
||||||
>
|
{globalize.translate('TabPlugins')}
|
||||||
{globalize.translate('TabPlugins')}
|
</Typography>
|
||||||
</Typography>
|
|
||||||
|
|
||||||
<IconButton
|
<Button
|
||||||
component={Link}
|
component={Link}
|
||||||
to='/dashboard/plugins/repositories'
|
to='/dashboard/plugins/repositories'
|
||||||
>
|
variant='outlined'
|
||||||
<Settings />
|
sx={{
|
||||||
</IconButton>
|
marginLeft: 2
|
||||||
</Grid>
|
}}
|
||||||
|
>
|
||||||
|
{globalize.translate('ManageRepositories')}
|
||||||
|
</Button>
|
||||||
|
|
||||||
<Grid
|
<Box
|
||||||
size={{ xs: 12, sm: 4 }}
|
|
||||||
sx={{
|
sx={{
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
justifyContent: 'end'
|
justifyContent: 'end',
|
||||||
|
marginTop: {
|
||||||
|
xs: 2,
|
||||||
|
sm: 0
|
||||||
|
},
|
||||||
|
marginLeft: {
|
||||||
|
xs: 0,
|
||||||
|
sm: 2
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
xs: '100%',
|
||||||
|
sm: 'auto'
|
||||||
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<SearchInput
|
<SearchInput
|
||||||
@@ -137,8 +153,8 @@ export const Component = () => {
|
|||||||
value={searchQuery}
|
value={searchQuery}
|
||||||
onChange={onSearchChange}
|
onChange={onSearchChange}
|
||||||
/>
|
/>
|
||||||
</Grid>
|
</Box>
|
||||||
</Grid>
|
</Stack>
|
||||||
|
|
||||||
<Box>
|
<Box>
|
||||||
<Stack
|
<Stack
|
||||||
@@ -201,9 +217,17 @@ export const Component = () => {
|
|||||||
|
|
||||||
<Box>
|
<Box>
|
||||||
{filteredPlugins.length > 0 ? (
|
{filteredPlugins.length > 0 ? (
|
||||||
<Grid container spacing={2} columns={{ xs: 1, sm: 4, md: 9, lg: 8, xl: 10 }}>
|
<Grid container spacing={2}>
|
||||||
{filteredPlugins.map(plugin => (
|
{filteredPlugins.map(plugin => (
|
||||||
<Grid key={plugin.id} size={{ xs: 1, sm: 2, md: 3, lg: 2 }}>
|
<Grid
|
||||||
|
key={plugin.id}
|
||||||
|
item
|
||||||
|
xs={12}
|
||||||
|
sm={6}
|
||||||
|
md={4}
|
||||||
|
lg={3}
|
||||||
|
xl={2}
|
||||||
|
>
|
||||||
<PluginCard
|
<PluginCard
|
||||||
plugin={plugin}
|
plugin={plugin}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -1075,6 +1075,7 @@
|
|||||||
"LyricDownloadersHelp": "Enable and rank your preferred lyric downloaders in order of priority.",
|
"LyricDownloadersHelp": "Enable and rank your preferred lyric downloaders in order of priority.",
|
||||||
"ManageLibrary": "Manage library",
|
"ManageLibrary": "Manage library",
|
||||||
"ManageRecording": "Manage recording",
|
"ManageRecording": "Manage recording",
|
||||||
|
"ManageRepositories": "Manage Repositories",
|
||||||
"MapChannels": "Map Channels",
|
"MapChannels": "Map Channels",
|
||||||
"MarkPlayed": "Mark played",
|
"MarkPlayed": "Mark played",
|
||||||
"MarkUnplayed": "Mark unplayed",
|
"MarkUnplayed": "Mark unplayed",
|
||||||
|
|||||||
Reference in New Issue
Block a user