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

centered loading circle, pastel theme

Browse Source
This commit is contained in:
andy 2021-07-05 23:31:13 +01:00
parent e51976dc1f
commit 79c841d9d8
14 changed files with 95 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.vscode/launch.json vendored
View File

@ -19,6 +19,18 @@
"--no-debugger"
],
"jinja": true
},
{
"command": "npm run devbuild",
"name": "Js: Build Dev",
"request": "launch",
"type": "node-terminal"
},
{
"command": "npm run build",
"name": "Js: Build Release",
"request": "launch",
"type": "node-terminal"
}
]
}

2
src/js/Admin/Functions.js
View File

@ -54,7 +54,7 @@ class Functions extends Component {
<Typography variant="h4" color="textPrimary">Admin Functions</Typography>
</CardContent>
<CardActions>
<ButtonGroup variant="contained" color="primary" className="full-width">
<ButtonGroup variant="contained" color="secondary" className="full-width">
{/* RUN ALL PLAYLISTS BUTTON */}
<Button className="full-width button" onClick={this.runAllUsers}>Run All Users</Button>

22
src/js/Maths/PieChart.js
View File

@ -3,13 +3,21 @@ import { Chart, ArcElement, DoughnutController, Legend, Title, Tooltip } from 'c
Chart.register(ArcElement, DoughnutController, Legend, Title, Tooltip);
var pieColours = ['rgb(55, 61, 255)', //blue
'rgb(255, 55, 61)', //red
'rgb(7, 211, 4)', //green
'rgb(228, 242, 31)', //yellow
'rgb(31, 242, 221)', //light blue
'rgb(242, 31, 235)', //pink
'rgb(242, 164, 31)'];
// var pieColours = ['rgb(55, 61, 255)', //blue
// 'rgb(255, 55, 61)', //red
// 'rgb(7, 211, 4)', //green
// 'rgb(228, 242, 31)', //yellow
// 'rgb(31, 242, 221)', //light blue
// 'rgb(242, 31, 235)', //pink
// 'rgb(242, 164, 31)'];
var pieColours = ['rgb(144, 127, 164)',
'rgb(166, 214, 214)',
'rgb(237, 237, 208)',
'rgb(252, 209, 209)',
'rgb(222, 137, 113)',
'rgb(59, 83, 96)'
];
/**
* Pie chart component using Chart.js

17
src/js/MusicTools.js
View File

@ -2,21 +2,20 @@ import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import NotFound from "./Error/NotFound.js";
import showMessage from "./Toast.js"
import Progress from "./Util/circularProgress.js";
import showMessage from "./Toast.js";
import GlobalTheme from './Theme.js';
import { Typography, CircularProgress } from '@material-ui/core';
import { ThemeProvider } from '@material-ui/core/styles';
import {AppBar, Toolbar, IconButton, Drawer, List, Divider, ListItem, ListItemIcon, ListItemText} from '@material-ui/core';
import {AppBar, Toolbar, IconButton, Drawer, List, Divider, ListItem, ListItemIcon, ListItemText, Typography} from '@material-ui/core';
import MenuIcon from '@material-ui/icons/Menu';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import HomeIcon from '@material-ui/icons/Home';
import { Build, PieChart, QueueMusic, ExitToApp, AccountCircle, KeyboardBackspace, GroupWork } from '@material-ui/icons'
import { Build, QueueMusic, ExitToApp, AccountCircle, KeyboardBackspace, GroupWork } from '@material-ui/icons'
const axios = require('axios');
@ -177,7 +176,7 @@ class MusicTools extends Component {
<div className="full-width">
<Switch>
<React.Suspense fallback={<LoadingMessage/>}>
<React.Suspense fallback={<Progress/>}>
<Route path="/app" exact component={LazyIndex} />
<Route path="/app/playlists" component={LazyPlaylists} />
<Route path="/app/tags" component={LazyTags} />
@ -196,8 +195,4 @@ class MusicTools extends Component {
}
function LoadingMessage(props) {
return <CircularProgress/>;
}
export default MusicTools;

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

@ -155,7 +155,7 @@ class NewPlaylist extends Component {
{/* SUBMIT BUTTON */}
<CardActions>
<Button variant="contained" color="primary" className="full-width" onClick={this.handleSubmit}>Create</Button>
<Button variant="contained" color="secondary" className="full-width" onClick={this.handleSubmit}>Create</Button>
</CardActions>
</Card>
</div>

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

@ -1,11 +1,10 @@
import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Button, ButtonGroup, Typography, Card, Grid, CircularProgress } from '@material-ui/core';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import { Button, ButtonGroup, Typography, Card, CardActions, CardContent, Grid } from '@material-ui/core';
const axios = require('axios');
import showMessage from "../Toast.js"
import Progress from "../Util/circularProgress.js";
/**
* Top-level object for hosting playlist card grid with new/run all buttons
@ -124,7 +123,7 @@ class PlaylistsView extends Component {
handleDeletePlaylist={this.handleDeletePlaylist}
handleRunAll={this.handleRunAll}/>;
return this.state.isLoading ? <CircularProgress /> : grid;
return this.state.isLoading ? <Progress /> : grid;
}
}
@ -140,7 +139,7 @@ function PlaylistGrid(props){
direction="row"
justify="flex-start"
alignItems="flex-start"
style={{padding: '24px'}}>
style={{padding: 24}}>
{/* BUTTON BLOCK (NEW/RUN ALL) */}
<Grid item xs={12} sm={6} md={2}>
@ -183,12 +182,19 @@ function PlaylistCard(props){
<Typography variant="h4" component="h2">
{ props.playlist.name }
</Typography>
{"lastfm_stat_percent" in props.playlist &&
props.playlist.lastfm_stat_percent != null &&
<Typography component="h6" style={{color: "#b3b3b3"}}>
{ Math.round(props.playlist.lastfm_stat_percent) }%
</Typography>
}
</CardContent>
{/* BUTTONS */}
<CardActions>
<ButtonGroup
color="primary"
color="secondary"
variant="contained">
{/* VIEW */}

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

@ -1,12 +1,13 @@
import React, { Component } from "react";
const axios = require('axios');
import { Card, Button, CircularProgress, FormControl, TextField, InputLabel, Select, FormControlLabel,
import { Card, Button, FormControl, TextField, InputLabel, Select, FormControlLabel,
CardActions, CardContent, Typography, Grid, MenuItem, Switch } from '@material-ui/core';
import { Delete } from '@material-ui/icons';
import { makeStyles } from '@material-ui/core/styles';
import showMessage from "../../Toast.js";
import Progress from "../../Util/circularProgress.js";
var thisMonth = [
'january',
@ -467,7 +468,7 @@ export class Edit extends Component{
{/* SHUFFLE */}
<FormControlLabel
control={
<Switch color="primary" name="shuffle" checked={this.state.shuffle} onChange={this.handleCheckChange} />
<Switch color="secondary" name="shuffle" checked={this.state.shuffle} onChange={this.handleCheckChange} />
}
labelPlacement="bottom"
label="Shuffle"/>
@ -475,7 +476,7 @@ export class Edit extends Component{
{/* RECOMMENDATIONS */}
<FormControlLabel
control={
<Switch color="primary" checked={this.state.include_recommendations} name="include_recommendations" onChange={this.handleCheckChange} />
<Switch color="secondary" checked={this.state.include_recommendations} name="include_recommendations" onChange={this.handleCheckChange} />
}
labelPlacement="bottom"
label="Recommendations"/>
@ -483,7 +484,7 @@ export class Edit extends Component{
{/* LIBRARY TRACKS */}
<FormControlLabel
control={
<Switch color="primary" checked={this.state.include_library_tracks} name="include_library_tracks" onChange={this.handleCheckChange} />
<Switch color="secondary" checked={this.state.include_library_tracks} name="include_library_tracks" onChange={this.handleCheckChange} />
}
labelPlacement="bottom"
label="Library Tracks"/>
@ -556,7 +557,7 @@ export class Edit extends Component{
{/* THIS MONTH */}
<FormControlLabel
control={
<Switch color="primary" checked={this.state.add_this_month} name="add_this_month" onChange={this.handleCheckChange} />
<Switch color="secondary" checked={this.state.add_this_month} name="add_this_month" onChange={this.handleCheckChange} />
}
label="This Month"
labelPlacement="bottom"
@ -565,7 +566,7 @@ export class Edit extends Component{
{/* LAST MONTH */}
<FormControlLabel
control={
<Switch color="primary" checked={this.state.add_last_month} name="add_last_month" onChange={this.handleCheckChange} />
<Switch color="secondary" checked={this.state.add_last_month} name="add_last_month" onChange={this.handleCheckChange} />
}
label="Last Month"
labelPlacement="bottom"
@ -608,7 +609,7 @@ export class Edit extends Component{
</div>
);
return this.state.isLoading ? <CircularProgress /> : table;
return this.state.isLoading ? <Progress /> : table;
}
}

2
src/js/Settings/ChangePassword.js
View File

@ -140,7 +140,7 @@ class ChangePassword extends Component {
{/* SUBMIT BUTTON */}
<CardActions>
<Button type="submit" variant="contained" className="full-width" onClick={this.runStats}>Change</Button>
<Button color="secondary" type="submit" variant="contained" className="full-width" onClick={this.runStats}>Change</Button>
</CardActions>
</form>
</Card>

2
src/js/Settings/LastFM.js
View File

@ -107,7 +107,7 @@ class LastFM extends Component {
{/* SUBMIT BUTTON */}
<CardActions>
<Button type="submit" variant="contained" className="full-width">Save</Button>
<Button color="secondary" type="submit" variant="contained" className="full-width">Save</Button>
</CardActions>
</form>
</Card>

4
src/js/Settings/SpotifyLink.js
View File

@ -65,7 +65,7 @@ class SpotifyLink extends Component {
* @returns Button component
*/
function AuthButton(props) {
return <Button component='a' variant="contained" className="full-width" href="/auth/spotify">Auth</Button>;
return <Button color="secondary" component='a' variant="contained" className="full-width" href="/auth/spotify">Auth</Button>;
}
/**
@ -74,7 +74,7 @@ function AuthButton(props) {
* @returns Button component
*/
function DeAuthButton(props) {
return <Button component='a' variant="contained" className="full-width" href="/auth/spotify/deauth">De-Auth</Button>;
return <Button color="secondary" component='a' variant="contained" className="full-width" href="/auth/spotify/deauth">De-Auth</Button>;
}
export default SpotifyLink;

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

@ -1,11 +1,11 @@
import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Button, ButtonGroup, Typography, Card, Grid, CircularProgress } from '@material-ui/core';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import { Button, ButtonGroup, Typography, Card, CardActions, CardContent, Grid } from '@material-ui/core';
const axios = require('axios');
import showMessage from "../Toast.js"
import Progress from "../Util/circularProgress.js"
/**
* Tag card list component
@ -67,7 +67,7 @@ class TagList extends Component {
const grid = <TagGrid tags={this.state.tags}
handleDeleteTag={this.handleDeleteTag}/>;
return this.state.isLoading ? <CircularProgress /> : grid;
return this.state.isLoading ? <Progress /> : grid;
}
}
@ -135,7 +135,7 @@ function TagCard(props){
</CardContent>
<CardActions>
<ButtonGroup
color="primary"
color="secondary"
variant="contained">
{/* VIEW BUTTON */}

5
src/js/Tag/View.js
View File

@ -1,11 +1,12 @@
import React, { Component } from "react";
const axios = require('axios');
import { Card, Button, CircularProgress, CardActions, CardContent, FormControl, InputLabel, Select, Typography, Grid, TextField, MenuItem, FormControlLabel, Switch } from '@material-ui/core';
import { Card, Button, CardActions, CardContent, FormControl, InputLabel, Select, Typography, Grid, TextField, MenuItem, FormControlLabel, Switch } from '@material-ui/core';
import { Delete } from '@material-ui/icons';
import { makeStyles } from '@material-ui/core/styles';
import showMessage from "../Toast.js";
import Progress from "../Util/circularProgress.js"
const BarChart = React.lazy(() => import("../Maths/BarChart"))
const PieChart = React.lazy(() => import("../Maths/PieChart"))
@ -438,7 +439,7 @@ class TagView extends Component{
</div>
);
return this.state.isLoading ? <CircularProgress /> : table;
return this.state.isLoading ? <Progress /> : table;
}
}

13
src/js/Theme.js
View File

@ -23,15 +23,20 @@ let GlobalTheme = createMuiTheme({
},
palette: {
type: 'dark',
// https://colorhunt.co/palette/907fa4a58faaa6d6d6ededd0
primary: {
main: '#1976d2',
main: '#907FA4',
},
secondary: {
main: '#dc004e',
main: '#A6D6D6',
},
// https://colorhunt.co/palette/de89717b6079a7d0cdffe9d6
error: {
main: '#f44336'
}
main: '#DE8971'
},
info: {
main: "#A7D0CD"
},
},
status: {
danger: 'orange',

19
src/js/Util/circularProgress.js Normal file
View File

@ -0,0 +1,19 @@
import React from "react";
import { Grid, CircularProgress } from '@material-ui/core';
function Progress (props) {
return (
<Grid container justify="flex-start" alignItems="flex-start" align="center" style={{ padding: props.padding }}>
<Grid item xs={ props.colWidth }>
<CircularProgress color="secondary" />
</Grid>
</Grid>
);
}
Progress.defaultProps = {
padding: 36,
colWidth: 12,
}
export default Progress;