Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade to Material UI v6 #2474

Open
wants to merge 3 commits into
base: future3/develop
Choose a base branch
from
Open

Upgrade to Material UI v6 #2474

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1729bed
Upgrade to Material UI v6
aflatter Dec 30, 2024
9272c0f
Fix build
aflatter Dec 30, 2024
83dff99
chore: Updated quotes and a missing closing tag
pabera Dec 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
420 changes: 248 additions & 172 deletions src/webapp/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions src/webapp/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
"dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.16",
"@mui/material": "^5.14.17",
"@mui/styles": "^5.14.17",
"@mui/icons-material": "^6.3.0",
"@mui/material": "^6.3.0",
"@mui/styles": "^6.3.0",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^12.1.5",
"@testing-library/user-event": "^14.5.1",
Expand Down
7 changes: 4 additions & 3 deletions src/webapp/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,13 @@ function App() {
<PlayerProvider>
<AppSettingsProvider>
<Grid
alignItems="center"
container
direction="row"
id="routes"
justifyContent="center"
>
sx={{
alignItems: "center",
justifyContent: "center"
}}>
<Router />
</Grid>
</AppSettingsProvider>
Expand Down
11 changes: 9 additions & 2 deletions src/webapp/src/components/Cards/controls/actions/audio/slider-change-volume.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,19 @@ const SliderChangeVolume = ({
};

return (
<Grid container alignItems="center" sx={{ marginTop: '20px' }}>
<Grid
container
sx={{
alignItems: "center",
marginTop: '20px'
}}>
<Grid item xs={12}>
<Typography>
{t('cards.controls.actions.audio.volume.title')}
</Typography>
<Stack spacing={2} direction="row" alignItems="center">
<Stack spacing={2} direction="row" sx={{
alignItems: "center"
}}>
<Remove />
<Slider
aria-label={t('cards.controls.actions.audio.volume.title')}
Expand Down
7 changes: 6 additions & 1 deletion src/webapp/src/components/Cards/controls/actions/host/say-my-ip-options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,12 @@ const SayMyIpOptions = ({
};

return (
<Grid container alignItems="center" sx={{ marginTop: '20px' }}>
<Grid
container
sx={{
alignItems: "center",
marginTop: '20px'
}}>
<Grid item xs={12}>
<Typography>
{t('cards.controls.actions.host.description')}
Expand Down
7 changes: 6 additions & 1 deletion src/webapp/src/components/Cards/controls/actions/timers/slider-set-timer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,12 @@ const SliderSetTimer = ({
};

return (
<Grid container alignItems="center" sx={{ marginTop: '20px' }}>
<Grid
container
sx={{
alignItems: "center",
marginTop: "20px"
}}>
<Grid item xs={12}>
<Typography>
{t('cards.controls.actions.timers.description')}
Expand Down
4 changes: 3 additions & 1 deletion src/webapp/src/components/Cards/controls/command-selector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,9 @@ const CommandSelector = ({
}

return (
<Grid container direction="row" alignItems="center">
<Grid container direction="row" sx={{
alignItems: "center"
}}>
<Grid item xs={5}>
<Typography>
{t('cards.controls.command-selector.title')}
Expand Down
11 changes: 7 additions & 4 deletions src/webapp/src/components/Cards/controls/controls-selector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,9 @@ const ControlsSelector = ({

return (
<Grid container direction="column">
<Grid container direction="row" alignItems="center">
<Grid container direction="row" sx={{
alignItems: "center"
}}>
<Grid item xs={5}>
<Typography>
{t('cards.controls.controls-selector.label')}
Expand All @@ -51,9 +53,10 @@ const ControlsSelector = ({
<Grid
container
direction="row"
alignItems="center"
sx={{ marginTop: '20px' }}
>
sx={{
alignItems: "center",
marginTop: "20px"
}}>
{actionData.action === 'host' &&
<SelectHost
actionData={actionData}
Expand Down
7 changes: 6 additions & 1 deletion src/webapp/src/components/Cards/controls/options-selector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,12 @@ const OptionsSelector = ({
};

return (
<Grid container alignItems="center" sx={{ marginTop: '20px' }}>
<Grid
container
sx={{
alignItems: "center",
marginTop: "20px"
}}>
<Grid item xs={12}>
<Typography>
{t(optionLabel)}
Expand Down
74 changes: 37 additions & 37 deletions src/webapp/src/components/Cards/form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,47 +33,47 @@ const CardsForm = ({
}) => {
const { t } = useTranslation();

return (
<>
<Header title={title} backLink="/cards" />
<Grid container>
<Grid item xs={12}>
<Card elevation={0}>
<CardHeader
avatar={
<Avatar aria-label={t('cards.form.no-card-swiped')}>
<BookmarkIcon />
</Avatar>
}
title={
cardId
? cardId
: t('cards.form.no-card-id')
}
/>
<CardContent>
{cardId &&
<>
<Grid container direction="row" alignItems="center">
<ControlsSelector
actionData={actionData}
setActionData={setActionData}
cardId={cardId}
/>
</Grid>
<ActionsControls
return (<>
<Header title={title} backLink="/cards" />
<Grid container>
<Grid item xs={12}>
<Card elevation={0}>
<CardHeader
avatar={
<Avatar aria-label={t('cards.form.no-card-swiped')}>
<BookmarkIcon />
</Avatar>
}
title={
cardId
? cardId
: t('cards.form.no-card-id')
}
/>
<CardContent>
{cardId &&
<>
<Grid container direction="row" sx={{
alignItems: "center"
}}>
<ControlsSelector
actionData={actionData}
setActionData={setActionData}
cardId={cardId}
/>
</>
}
{!cardId && <InfoNoCardSwiped />}
</CardContent>
</Card>
</Grid>
</Grid>
<ActionsControls
actionData={actionData}
cardId={cardId}
/>
</>
}
{!cardId && <InfoNoCardSwiped />}
</CardContent>
</Card>
</Grid>
</>
);
</Grid>
</>);
};


Expand Down
17 changes: 4 additions & 13 deletions src/webapp/src/components/Cards/list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,7 @@ import { Link } from 'react-router-dom';
import { isNil, reject } from 'ramda';
import { useTranslation } from 'react-i18next';

import {
Avatar,
List,
ListItem,
ListItemAvatar,
ListItemText,
Typography
} from '@mui/material';
import { Avatar, List, ListItemAvatar, ListItemButton, ListItemText, Typography } from '@mui/material';

import BookmarkIcon from '@mui/icons-material/Bookmark';

Expand All @@ -36,12 +29,10 @@ const CardsList = ({ cardsList }) => {
: cardsList[cardId].func

return (
<ListItem
button
<ListItemButton
component={EditCardLink}
data={{ id: cardId, ...cardsList[cardId] }}
key={cardId}
>
key={cardId}>
<ListItemAvatar>
<Avatar>
<BookmarkIcon />
Expand All @@ -51,7 +42,7 @@ const CardsList = ({ cardsList }) => {
primary={cardId}
secondary={description}
/>
</ListItem>
</ListItemButton>
);
}

Expand Down
19 changes: 12 additions & 7 deletions src/webapp/src/components/Library/library-header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,13 +69,16 @@ const LibraryHeader = ({ handleMusicFilter, musicFilter }) => {
}
{!showSearchInput &&
<Stack
alignItems="center"
direction="row"
sx={{ marginRight: '5px' }}
>
sx={{
alignItems: "center",
marginRight: "5px"
}}>
<Typography
color={getCurrentView() === 'albums' && 'primary'}
sx={{ transition: 'color .25s' }}
sx={{
color: getCurrentView() === 'albums' && 'primary',
transition: 'color .25s'
}}
>
{t('library.header.albums')}
</Typography>
Expand All @@ -86,8 +89,10 @@ const LibraryHeader = ({ handleMusicFilter, musicFilter }) => {
color="default"
/>
<Typography
color={getCurrentView() === 'folders' && 'primary'}
sx={{ transition: 'color .25s' }}
sx={{
color: getCurrentView() === 'folders' && 'primary',
transition: 'color .25s'
}}
>
{t('library.header.folders')}
</Typography>
Expand Down
20 changes: 5 additions & 15 deletions src/webapp/src/components/Library/lists/albums/album-list/album-list-item.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,7 @@ import {
} from 'react-router-dom';
import { useTranslation } from 'react-i18next';

import {
Avatar,
ListItem,
ListItemAvatar,
ListItemButton,
ListItemText,
} from '@mui/material';
import { Avatar, ListItemAvatar, ListItemButton, ListItemText } from '@mui/material';

import noCover from '../../../../../assets/noCover.jpg';

Expand Down Expand Up @@ -47,7 +41,7 @@ const AlbumListItem = ({ albumartist, album, isButton = true }) => {
if (albumartist && album && show_covers) {
getCoverArt();
}
}, [albumartist, album]);
}, [albumartist, album, show_covers]);

const AlbumLink = forwardRef((props, ref) => {
const { data } = props;
Expand All @@ -62,14 +56,11 @@ const AlbumListItem = ({ albumartist, album, isButton = true }) => {
});

return (
<ListItem
button={isButton}
<ListItemButton
component={isButton ? AlbumLink : null}
data={{ albumartist, album }}
disablePadding
key={album}
>
<ListItemButton>
key={album}>
{show_covers &&
<ListItemAvatar>
<Avatar variant="rounded" alt="Cover" src={coverImage} />
Expand All @@ -79,8 +70,7 @@ const AlbumListItem = ({ albumartist, album, isButton = true }) => {
primary={album || t('library.albums.unknown-album')}
secondary={albumartist || null}
/>
</ListItemButton>
</ListItem>
</ListItemButton>
);
}

Expand Down
10 changes: 5 additions & 5 deletions src/webapp/src/components/Player/controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,12 +67,12 @@ const Controls = () => {
return (
<Grid
container
alignItems="center"
direction="row"
flexWrap="nowrap"
justifyContent="space-evenly"
>

sx={{
alignItems: "center",
flexWrap: "nowrap",
justifyContent: "space-evenly"
}}>
{/* Shuffle */}
<IconButton
aria-label={labelShuffle()}
Expand Down
17 changes: 11 additions & 6 deletions src/webapp/src/components/Player/cover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,13 @@ const Cover = ({ coverImage }) => {
const { t } = useTranslation();

return (
<Grid container direction="row" justifyContent="center" alignItems="center">
<Grid
container
direction="row"
sx={{
justifyContent: "center",
alignItems: "center"
}}>
<Paper
elevation={3}
sx={{
Expand All @@ -21,14 +27,13 @@ const Cover = ({ coverImage }) => {
<Grid
container
direction="row"
justifyContent="center"
alignItems="center"
sx={{
justifyContent: "center",
alignItems: "center",
position: 'absolute',
width: '100%',
height: '100%',
}}
>
height: '100%'
}}>
{coverImage &&
<img
alt={t('player.cover.title')}
Expand Down
Loading
Loading