sarsoo/Mixonomer
1
0
Fork 0
Code Issues 15 Pull Requests Actions Packages Projects Releases Wiki Activity

ui changes, consistent material selects, hid recommendations when disabled

Browse Source
This commit is contained in:
aj 2020-02-06 13:32:40 +00:00
parent 4963fda6b0
commit 3060b7010e
5 changed files with 21 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/js/MusicTools.js
View File

@ -7,7 +7,7 @@ import showMessage from "./Toast.js"
import GlobalTheme from './Theme.js'; import GlobalTheme from './Theme.js';
import { Typography } from '@material-ui/core'; import { Typography, CircularProgress } from '@material-ui/core';
import { ThemeProvider } from '@material-ui/core/styles'; import { ThemeProvider } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar'; import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar'; import Toolbar from '@material-ui/core/Toolbar';
@ -171,7 +171,7 @@ class MusicTools extends Component {
} }
function LoadingMessage(props) { function LoadingMessage(props) {
return <ThemeProvider theme={GlobalTheme}><Typography variant="h5" component="h2" className="ui-text center-text">Loading...</Typography></ThemeProvider>; return <CircularProgress/>;
} }
export default MusicTools; export default MusicTools;

2
src/js/Playlist/PlaylistsList.js
View File

@ -110,7 +110,7 @@ function PlaylistGrid(props){
justify="flex-start" justify="flex-start"
alignItems="flex-start" alignItems="flex-start"
style={{padding: '24px'}}> style={{padding: '24px'}}>
<Grid item xs> <Grid item xs={12} sm={6} md={2}>
<ButtonGroup <ButtonGroup
color="primary" color="primary"
orientation="vertical" orientation="vertical"

25
src/js/Playlist/View/Edit.js
View File

@ -2,7 +2,7 @@ import React, { Component } from "react";
const axios = require('axios'); const axios = require('axios');
import { Card, Button, CircularProgress, FormControl, TextField, InputLabel, Select, Checkbox, FormControlLabel, import { Card, Button, CircularProgress, FormControl, TextField, InputLabel, Select, Checkbox, FormControlLabel,
CardActions, CardContent, Typography, Grid } from '@material-ui/core'; CardActions, CardContent, Typography, Grid, MenuItem } from '@material-ui/core';
import { Delete } from '@material-ui/icons'; import { Delete } from '@material-ui/icons';
import { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/core/styles';
@ -478,6 +478,7 @@ export class Edit extends Component{
labelPlacement="bottom" labelPlacement="bottom"
label="Library Tracks"/> label="Library Tracks"/>
</Grid> </Grid>
{ this.state.include_recommendations == true &&
<Grid item xs={12}> <Grid item xs={12}>
<TextField type="number" <TextField type="number"
name="recommendation_sample" name="recommendation_sample"
@ -486,7 +487,7 @@ export class Edit extends Component{
value={this.state.recommendation_sample} value={this.state.recommendation_sample}
onChange={this.handleInputChange}></TextField> onChange={this.handleInputChange}></TextField>
</Grid> </Grid>
}
{ this.state.type == 'fmchart' && { this.state.type == 'fmchart' &&
<Grid item xs={12}> <Grid item xs={12}>
<TextField type="number" <TextField type="number"
@ -502,7 +503,6 @@ export class Edit extends Component{
<FormControl variant="filled"> <FormControl variant="filled">
<InputLabel htmlFor="chart_range">Chart Range</InputLabel> <InputLabel htmlFor="chart_range">Chart Range</InputLabel>
<Select <Select
native
value={this.state.chart_range} value={this.state.chart_range}
onChange={this.handleInputChange} onChange={this.handleInputChange}
inputProps={{ inputProps={{
@ -510,12 +510,12 @@ export class Edit extends Component{
id: "chart_range", id: "chart_range",
}} }}
> >
<option value="WEEK">7 Day</option> <MenuItem value="WEEK">7 Day</MenuItem>
<option value="MONTH">30 Day</option> <MenuItem value="MONTH">30 Day</MenuItem>
<option value="QUARTER">90 Day</option> <MenuItem value="QUARTER">90 Day</MenuItem>
<option value="HALFYEAR">180 Day</option> <MenuItem value="HALFYEAR">180 Day</MenuItem>
<option value="YEAR">365 Day</option> <MenuItem value="YEAR">365 Day</MenuItem>
<option value="OVERALL">Overall</option> <MenuItem value="OVERALL">Overall</MenuItem>
</Select> </Select>
</FormControl> </FormControl>
</Grid> </Grid>
@ -552,7 +552,6 @@ export class Edit extends Component{
<FormControl variant="filled"> <FormControl variant="filled">
<InputLabel htmlFor="type-select">Type</InputLabel> <InputLabel htmlFor="type-select">Type</InputLabel>
<Select <Select
native
value={this.state.type} value={this.state.type}
onChange={this.handleInputChange} onChange={this.handleInputChange}
inputProps={{ inputProps={{
@ -560,9 +559,9 @@ export class Edit extends Component{
id: 'type-select', id: 'type-select',
}} }}
> >
<option value="default">Default</option> <MenuItem value="default">Default</MenuItem>
<option value="recents">Recents</option> <MenuItem value="recents">Recents</MenuItem>
<option value="fmchart">Last.fm Chart</option> <MenuItem value="fmchart">Last.fm Chart</MenuItem>
</Select> </Select>
</FormControl> </FormControl>
</Grid> </Grid>

2
src/js/Tag/TagList.js
View File

@ -68,7 +68,7 @@ function TagGrid(props){
justify="flex-start" justify="flex-start"
alignItems="flex-start" alignItems="flex-start"
style={{padding: '24px'}}> style={{padding: '24px'}}>
<Grid item xs> <Grid item xs={12} sm={6} md={2}>
<ButtonGroup <ButtonGroup
color="primary" color="primary"
orientation="vertical" orientation="vertical"

11
src/js/Tag/View.js
View File

@ -1,7 +1,7 @@
import React, { Component } from "react"; import React, { Component } from "react";
const axios = require('axios'); const axios = require('axios');
import { Card, Button, CircularProgress, CardActions, CardContent, FormControl, InputLabel, Select, Typography, Grid, TextField } from '@material-ui/core'; import { Card, Button, CircularProgress, CardActions, CardContent, FormControl, InputLabel, Select, Typography, Grid, TextField, MenuItem } from '@material-ui/core';
import { Delete } from '@material-ui/icons'; import { Delete } from '@material-ui/icons';
import { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/core/styles';
@ -282,10 +282,9 @@ class View extends Component{
</Grid> </Grid>
} }
<Grid item xs={12} sm={this.state.addType != 'artists' ? 2 : 4} md={this.state.addType != 'artists' ? 2 : 4}> <Grid item xs={12} sm={this.state.addType != 'artists' ? 2 : 4} md={this.state.addType != 'artists' ? 2 : 4}>
<FormControl> <FormControl variant="filled">
<InputLabel htmlFor="addType">Type</InputLabel> <InputLabel htmlFor="addType">Type</InputLabel>
<Select <Select
native
value={this.state.addType} value={this.state.addType}
onChange={this.handleInputChange} onChange={this.handleInputChange}
inputProps={{ inputProps={{
@ -293,9 +292,9 @@ class View extends Component{
id: "addType", id: "addType",
}} }}
> >
<option value="artists">Artist</option> <MenuItem value="artists">Artist</MenuItem>
<option value="albums">Album</option> <MenuItem value="albums">Album</MenuItem>
<option value="tracks">Track</option> <MenuItem value="tracks">Track</MenuItem>
</Select> </Select>
</FormControl> </FormControl>
</Grid> </Grid>