fix(ui): make the height of the AddToPlaylistDialog static.
Signed-off-by: Deluan <deluan@navidrome.org>
This commit is contained in:
@@ -12,6 +12,7 @@ import {
|
|||||||
DialogActions,
|
DialogActions,
|
||||||
DialogContent,
|
DialogContent,
|
||||||
DialogTitle,
|
DialogTitle,
|
||||||
|
makeStyles,
|
||||||
} from '@material-ui/core'
|
} from '@material-ui/core'
|
||||||
import {
|
import {
|
||||||
closeAddToPlaylist,
|
closeAddToPlaylist,
|
||||||
@@ -23,7 +24,21 @@ import DuplicateSongDialog from './DuplicateSongDialog'
|
|||||||
import { httpClient } from '../dataProvider'
|
import { httpClient } from '../dataProvider'
|
||||||
import { REST_URL } from '../consts'
|
import { REST_URL } from '../consts'
|
||||||
|
|
||||||
|
const useStyles = makeStyles({
|
||||||
|
dialogPaper: {
|
||||||
|
height: '26em',
|
||||||
|
maxHeight: '26em',
|
||||||
|
},
|
||||||
|
dialogContent: {
|
||||||
|
height: '17.5em',
|
||||||
|
overflowY: 'auto',
|
||||||
|
paddingTop: '0.5em',
|
||||||
|
paddingBottom: '0.5em',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
export const AddToPlaylistDialog = () => {
|
export const AddToPlaylistDialog = () => {
|
||||||
|
const classes = useStyles()
|
||||||
const { open, selectedIds, onSuccess, duplicateSong, duplicateIds } =
|
const { open, selectedIds, onSuccess, duplicateSong, duplicateIds } =
|
||||||
useSelector((state) => state.addToPlaylistDialog)
|
useSelector((state) => state.addToPlaylistDialog)
|
||||||
const dispatch = useDispatch()
|
const dispatch = useDispatch()
|
||||||
@@ -145,11 +160,14 @@ export const AddToPlaylistDialog = () => {
|
|||||||
aria-labelledby="form-dialog-new-playlist"
|
aria-labelledby="form-dialog-new-playlist"
|
||||||
fullWidth={true}
|
fullWidth={true}
|
||||||
maxWidth={'sm'}
|
maxWidth={'sm'}
|
||||||
|
classes={{
|
||||||
|
paper: classes.dialogPaper,
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<DialogTitle id="form-dialog-new-playlist">
|
<DialogTitle id="form-dialog-new-playlist">
|
||||||
{translate('resources.playlist.actions.selectPlaylist')}
|
{translate('resources.playlist.actions.selectPlaylist')}
|
||||||
</DialogTitle>
|
</DialogTitle>
|
||||||
<DialogContent>
|
<DialogContent className={classes.dialogContent}>
|
||||||
<SelectPlaylistInput onChange={handleChange} />
|
<SelectPlaylistInput onChange={handleChange} />
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
<DialogActions>
|
<DialogActions>
|
||||||
|
|||||||
@@ -36,6 +36,10 @@ const useStyles = makeStyles((theme) => ({
|
|||||||
paddingTop: 0,
|
paddingTop: 0,
|
||||||
paddingBottom: 0,
|
paddingBottom: 0,
|
||||||
},
|
},
|
||||||
|
createIcon: {
|
||||||
|
fontSize: '1.25rem',
|
||||||
|
margin: '9px',
|
||||||
|
},
|
||||||
selectedPlaylistsContainer: {
|
selectedPlaylistsContainer: {
|
||||||
marginTop: theme.spacing(2),
|
marginTop: theme.spacing(2),
|
||||||
},
|
},
|
||||||
@@ -151,7 +155,7 @@ const CreatePlaylistItem = ({ searchText, onCreateNew }) => {
|
|||||||
return (
|
return (
|
||||||
<ListItem className={classes.listItem} button onClick={onCreateNew} dense>
|
<ListItem className={classes.listItem} button onClick={onCreateNew} dense>
|
||||||
<ListItemIcon>
|
<ListItemIcon>
|
||||||
<AddIcon fontSize="small" />
|
<AddIcon className={classes.createIcon} />
|
||||||
</ListItemIcon>
|
</ListItemIcon>
|
||||||
<ListItemText
|
<ListItemText
|
||||||
primary={translate('resources.playlist.actions.addNewPlaylist', {
|
primary={translate('resources.playlist.actions.addNewPlaylist', {
|
||||||
|
|||||||
Reference in New Issue
Block a user