From 3060b7010ebdb269e7b99cd48193f2cb5ced9072 Mon Sep 17 00:00:00 2001
From: aj <andrewjpack@gmail.com>
Date: Thu, 6 Feb 2020 13:32:40 +0000
Subject: [PATCH] ui changes, consistent material selects, hid recommendations
 when disabled

---
 src/js/MusicTools.js             |  4 ++--
 src/js/Playlist/PlaylistsList.js |  2 +-
 src/js/Playlist/View/Edit.js     | 25 ++++++++++++-------------
 src/js/Tag/TagList.js            |  2 +-
 src/js/Tag/View.js               | 11 +++++------
 5 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/js/MusicTools.js b/src/js/MusicTools.js
index 32b320d..d667ad5 100644
--- a/src/js/MusicTools.js
+++ b/src/js/MusicTools.js
@@ -7,7 +7,7 @@ import showMessage from "./Toast.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 AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
@@ -171,7 +171,7 @@ class MusicTools extends Component {
 }
 
 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;
\ No newline at end of file
diff --git a/src/js/Playlist/PlaylistsList.js b/src/js/Playlist/PlaylistsList.js
index 4565160..b7186ab 100644
--- a/src/js/Playlist/PlaylistsList.js
+++ b/src/js/Playlist/PlaylistsList.js
@@ -110,7 +110,7 @@ function PlaylistGrid(props){
                 justify="flex-start"
                 alignItems="flex-start"
                 style={{padding: '24px'}}>
-            <Grid item xs>
+            <Grid item xs={12} sm={6} md={2}>
                 <ButtonGroup 
                     color="primary"
                     orientation="vertical" 
diff --git a/src/js/Playlist/View/Edit.js b/src/js/Playlist/View/Edit.js
index 54f2066..40e5fcc 100644
--- a/src/js/Playlist/View/Edit.js
+++ b/src/js/Playlist/View/Edit.js
@@ -2,7 +2,7 @@ import React, { Component } from "react";
 const axios = require('axios');
 
 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 { makeStyles } from '@material-ui/core/styles';
 
@@ -478,6 +478,7 @@ export class Edit extends Component{
                                 labelPlacement="bottom"
                                 label="Library Tracks"/>
                         </Grid>
+                        { this.state.include_recommendations == true &&
                         <Grid item xs={12}>
                             <TextField type="number" 
                                     name="recommendation_sample"
@@ -486,7 +487,7 @@ export class Edit extends Component{
                                     value={this.state.recommendation_sample}
                                     onChange={this.handleInputChange}></TextField>
                         </Grid>
-
+                        }
                         { this.state.type == 'fmchart' &&
                         <Grid item xs={12}>
                             <TextField type="number" 
@@ -502,7 +503,6 @@ export class Edit extends Component{
                             <FormControl variant="filled">
                                 <InputLabel htmlFor="chart_range">Chart Range</InputLabel>
                                 <Select
-                                native
                                 value={this.state.chart_range}
                                 onChange={this.handleInputChange}
                                 inputProps={{
@@ -510,12 +510,12 @@ export class Edit extends Component{
                                     id: "chart_range",
                                 }}
                                 >
-                                    <option value="WEEK">7 Day</option>
-                                    <option value="MONTH">30 Day</option>
-                                    <option value="QUARTER">90 Day</option>
-                                    <option value="HALFYEAR">180 Day</option>
-                                    <option value="YEAR">365 Day</option>
-                                    <option value="OVERALL">Overall</option>
+                                    <MenuItem value="WEEK">7 Day</MenuItem>
+                                    <MenuItem value="MONTH">30 Day</MenuItem>
+                                    <MenuItem value="QUARTER">90 Day</MenuItem>
+                                    <MenuItem value="HALFYEAR">180 Day</MenuItem>
+                                    <MenuItem value="YEAR">365 Day</MenuItem>
+                                    <MenuItem value="OVERALL">Overall</MenuItem>
                                     </Select>
                             </FormControl>
                         </Grid>
@@ -552,7 +552,6 @@ export class Edit extends Component{
                             <FormControl variant="filled">
                                 <InputLabel htmlFor="type-select">Type</InputLabel>
                                 <Select
-                                native
                                 value={this.state.type}
                                 onChange={this.handleInputChange}
                                 inputProps={{
@@ -560,9 +559,9 @@ export class Edit extends Component{
                                     id: 'type-select',
                                 }}
                                 >
-                                    <option value="default">Default</option>
-                                    <option value="recents">Recents</option>
-                                    <option value="fmchart">Last.fm Chart</option>
+                                    <MenuItem value="default">Default</MenuItem>
+                                    <MenuItem value="recents">Recents</MenuItem>
+                                    <MenuItem value="fmchart">Last.fm Chart</MenuItem>
                                 </Select>
                             </FormControl>
                         </Grid>
diff --git a/src/js/Tag/TagList.js b/src/js/Tag/TagList.js
index 9b334a3..ed60a9b 100644
--- a/src/js/Tag/TagList.js
+++ b/src/js/Tag/TagList.js
@@ -68,7 +68,7 @@ function TagGrid(props){
                 justify="flex-start"
                 alignItems="flex-start"
                 style={{padding: '24px'}}>
-            <Grid item xs>
+            <Grid item xs={12} sm={6} md={2}>
                 <ButtonGroup
                     color="primary"
                     orientation="vertical"
diff --git a/src/js/Tag/View.js b/src/js/Tag/View.js
index f73c023..4f33b95 100644
--- a/src/js/Tag/View.js
+++ b/src/js/Tag/View.js
@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 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 { makeStyles } from '@material-ui/core/styles';
 
@@ -282,10 +282,9 @@ class View extends Component{
                             </Grid>
                         }
                         <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>
                                 <Select
-                                    native
                                     value={this.state.addType}
                                     onChange={this.handleInputChange}
                                     inputProps={{
@@ -293,9 +292,9 @@ class View extends Component{
                                         id: "addType",
                                     }}
                                     >
-                                    <option value="artists">Artist</option>
-                                    <option value="albums">Album</option>
-                                    <option value="tracks">Track</option>
+                                    <MenuItem value="artists">Artist</MenuItem>
+                                    <MenuItem value="albums">Album</MenuItem>
+                                    <MenuItem value="tracks">Track</MenuItem>
                                     </Select>
                             </FormControl>
                         </Grid>