extras
/
mue
mirror of https://github.com/mue/mue.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: better dropdowns, about section etc 

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
This commit is contained in:
David Ralph 2021-03-19 20:18:57 +00:00
parent 8f74095a85
commit 025303a01a
13 changed files with 100 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/modals/settings/Dropdown.jsx
View File

@ -5,12 +5,23 @@ export default class Dropdown extends React.PureComponent {
return this.props.label ? <label htmlFor={this.props.name}>{this.props.label}</label> : null;
}
componentDidMount() {
document.getElementById(this.props.name).value = localStorage.getItem(this.props.name);
}
onChange = () => {
localStorage.setItem(this.props.name, document.getElementById(this.props.name).value);
if (this.props.onChange) {
this.props.onChange();
}
}
render() {
return (
<React.Fragment>
{this.getLabel()}
<div className='dropdown' style={{ display: 'inline' }}>
<select name={this.props.name} id={this.props.id} onChange={this.props.onChange}>
<select name={this.props.name} id={this.props.name} onChange={this.onChange}>
{this.props.children}
</select>
</div>

14
src/components/modals/settings/ResetModal.jsx Normal file
View File

@ -0,0 +1,14 @@
import React from 'react';
export default function ResetModal(props) {
return (
<div className='welcomeContent'>
<span className='closeModal' onClick={props.modalClose}>&times;</span>
<div className='welcomeModalText'>
reset text
<button className='close' onClick={props.modalClose}>yes</button>
<button className='close' onClick={props.modalClose}>no</button>
</div>
</div>
);
}

17
src/components/modals/settings/sections/About.jsx
View File

@ -5,6 +5,7 @@ import Tooltip from '@material-ui/core/Tooltip';
import * as Constants from '../../../../modules/constants';
const other_contributors = require('../../../../modules/other_contributors.json');
const { version } = require('../../../../../package.json');
export default class About extends React.PureComponent {
constructor(...args) {
@ -12,6 +13,7 @@ export default class About extends React.PureComponent {
this.state = {
contributors: [],
sponsors: [],
other_contributors: [],
update: this.props.language.version.checking_update
}
}
@ -21,17 +23,18 @@ export default class About extends React.PureComponent {
const { sponsors } = await (await fetch(Constants.SPONSORS_URL + '/list')).json();
const versionData = await (await fetch('https://api.github.com/repos/mue/mue/releases')).json();
const version = versionData[0].tag_name;
const newVersion = versionData[0].tag_name;
let updateMsg = this.props.language.version.no_update;
if (version !== '5.0' && version !== '4.1') {
updateMsg = `${this.props.language.version.update_available}: ${version}`;
if (version < newVersion) {
updateMsg = `${this.props.language.version.update_available}: ${newVersion}`;
}
this.setState({
contributors: contributors.filter((contributor) => !contributor.login.includes('bot')),
sponsors: sponsors,
update: updateMsg
update: updateMsg,
other_contributors: other_contributors
});
}
@ -52,7 +55,7 @@ export default class About extends React.PureComponent {
<h2>{this.props.language.title}</h2>
<img draggable='false' style={{'height': '100px', 'width': 'auto'}} src='https://raw.githubusercontent.com/mue/branding/master/logo/logo_horizontal.png' alt='Mue logo'></img>
<p>{this.props.language.copyright} 2018-{new Date().getFullYear()} Mue Tab (BSD-3 License)</p>
<p>{this.props.language.version.title} {Constants.VERSION} ({this.state.update})</p>
<p>{this.props.language.version.title} {version} ({this.state.update})</p>
<h3>{this.props.language.resources_used.title}</h3>
<p>Pexels ({this.props.language.resources_used.bg_images})</p>
<p>Google ({this.props.language.resources_used.pin_icon})</p>
@ -63,8 +66,8 @@ export default class About extends React.PureComponent {
<a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=256'} alt={item.login}></img></a>
</Tooltip>
)}
{// for those who contributed without opening a pull request
other_contributors.map((item) =>
{ // for those who contributed without opening a pull request
this.state.other_contributors.map((item) =>
<Tooltip title={item.login} placement='top' key={item.login}>
<a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=256'} alt={item.login}></img></a>
</Tooltip>

16
src/components/modals/settings/sections/Advanced.jsx
View File

@ -2,12 +2,21 @@ import React from 'react';
import Checkbox from '../Checkbox';
import FileUpload from '../FileUpload';
import ResetModal from '../ResetModal';
import SettingsFunctions from '../../../../modules/helpers/settings';
import { toast } from 'react-toastify';
import Modal from 'react-modal';
export default class AdvancedSettings extends React.PureComponent {
constructor(...args) {
super(...args);
this.state = {
resetModal: false
};
}
resetItem(type) {
document.getElementById(type).value = '';
toast(this.props.language.toasts.reset);
@ -42,7 +51,7 @@ export default class AdvancedSettings extends React.PureComponent {
<Checkbox name='offlineMode' text={advanced.offline_mode} />
<h3>{advanced.data}</h3>
<button className='reset' onClick={() => SettingsFunctions.setDefaultSettings('reset')}>{this.props.language.buttons.reset}</button>
<button className='reset' onClick={() => this.setState({ resetModal: true })}>{this.props.language.buttons.reset}</button>
<button className='export' onClick={() => SettingsFunctions.exportSettings()}>{this.props.language.buttons.export}</button>
<button className='import' onClick={() => document.getElementById('file-input').click()}>{this.props.language.buttons.import}</button>
<FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => this.settingsImport(e)} />
@ -56,9 +65,14 @@ export default class AdvancedSettings extends React.PureComponent {
<p>{advanced.custom_js} <span className='modalLink' onClick={() => this.resetItem('customjs')}>{this.props.language.buttons.reset}</span></p>
<textarea id='customjs'></textarea>
</ul>
<h3>{this.props.language.sections.experimental.title}</h3>
<p>{advanced.experimental_warning}</p>
<Checkbox name='experimental' text={this.props.language.enabled} />
<Modal onRequestClose={() => this.setState({ resetModal: false })} isOpen={this.state.resetModal} className={'modal'} overlayClassName={'Overlay'} ariaHideApp={false}>
<ResetModal modalClose={() => this.setState({ resetModal: false })} />
</Modal>
</div>
);
}

13
src/components/modals/settings/sections/Appearance.jsx
View File

@ -51,10 +51,6 @@ export default class AppearanceSettings extends React.PureComponent {
localStorage.setItem('font', this.state.font.charAt(0).toUpperCase() + this.state.font.slice(1));
}
componentDidMount() {
document.getElementById('fontWeight').value = localStorage.getItem('fontWeight') || 400;
}
render() {
const { appearance } = this.props.language.sections;
@ -88,6 +84,15 @@ export default class AppearanceSettings extends React.PureComponent {
<option className='choices' value='700'>Bold</option>
<option className='choices' value='800'>Extra-Bold</option>
</Dropdown>
<Dropdown
label='Font Style'
name='fontstyle'
id='fontStyle'
onChange={() => localStorage.setItem('fontStyle', document.getElementById('fontStyle').value)}>
<option className='choices' value='normal'>Normal</option>
<option className='choices' value='italic'>Italic</option>
<option className='choices' value='oblique'>Oblique</option>
</Dropdown>
<Checkbox name='fontGoogle' text={appearance.font.google} />
<h3>{appearance.accessibility.title}</h3>

12
src/components/modals/settings/sections/Background.jsx
View File

@ -100,8 +100,6 @@ export default class BackgroundSettings extends React.PureComponent {
this.setState({
gradientSettings
});
document.getElementById('backgroundAPI').value = localStorage.getItem('backgroundAPI');
}
onGradientChange = (event, index) => {
@ -241,13 +239,9 @@ export default class BackgroundSettings extends React.PureComponent {
<h3>{background.source.title}</h3>
<ul>
<Dropdown
label={background.source.api}
name='backgroundapi'
id='backgroundAPI'
onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)}>
<option className='choices' value='mue'>Mue</option>
<option className='choices' value='unsplash'>Unsplash</option>
<Dropdown label={background.source.api} name='backgroundAPI'>
<option className='choices' value='mue'>Mue</option>
<option className='choices' value='unsplash'>Unsplash</option>
</Dropdown>
</ul>
<ul>

12
src/components/modals/settings/sections/Time.jsx
View File

@ -19,12 +19,6 @@ export default class TimeSettings extends React.PureComponent {
});
}
componentDidMount() {
document.getElementById('dateformat').value = localStorage.getItem('dateFormat');
document.getElementById('shortformat').value = localStorage.getItem('shortFormat');
document.getElementById('timeType').value = localStorage.getItem('timeType');
}
render() {
const { time } = this.props.language.sections;
@ -61,7 +55,7 @@ export default class TimeSettings extends React.PureComponent {
<div>
<h2>{time.title}</h2>
<Checkbox name='time' text={this.props.language.enabled} />
<Dropdown label='Type' name='timeType' id='timeType' onChange={() => this.changeType()}>
<Dropdown label='Type' name='timeType' onChange={() => this.changeType()}>
<option className='choices' value='digital'>{time.digital.title}</option>
<option className='choices' value='analogue'>{time.analogue.title}</option>
<option className='choices' value='percentageComplete'>{time.percentage_complete}</option>
@ -75,14 +69,14 @@ export default class TimeSettings extends React.PureComponent {
<Checkbox name='weeknumber' text={time.date.week_number} />
<Checkbox name='datenth' text={time.date.datenth} />
<Checkbox name='short' text={time.date.short_date} betaFeature={true} />
<Dropdown label={time.date.short_format} name='dateFormat' id='dateformat' onChange={() => localStorage.setItem('dateFormat', document.getElementById('dateformat').value)}>
<Dropdown label={time.date.short_format} name='dateFormat'>
<option className='choices' value='DMY'>DMY</option>
<option className='choices' value='MDY'>MDY</option>
<option className='choices' value='YMD'>YMD</option>
</Dropdown>
<br/>
<br/>
<Dropdown label={time.date.short_separator.title} name='shortFormat' id='shortformat' onChange={() => localStorage.setItem('shortFormat', document.getElementById('shortformat').value)}>
<Dropdown label={time.date.short_separator.title} name='shortFormat'>
<option className='choices' value='dots'>{time.date.short_separator.dots}</option>
<option className='choices' value='dash'>{time.date.short_separator.dash}</option>
<option className='choices' value='gaps'>{time.date.short_separator.gaps}</option>

4
src/components/modals/tabs/Settings.jsx
View File

@ -51,6 +51,10 @@ export default function Settings (props) {
<About language={props.language.sections.about}/>
</div>
</SettingsTabs>
<div className='reminder-info'>
<h1>IMPORTANT INFO</h1>
<p>In order for changes to take place, the page must be refreshed.</p>
</div>
</React.Fragment>
);
}

1
src/modules/constants.js
View File

@ -5,4 +5,3 @@ export const WEBSITE_URL = 'https://muetab.com';
export const SPONSORS_URL = 'https://sponsors.muetab.com';
export const OFFLINE_IMAGES = 20;
export const BETA_VERSION = false;
export const VERSION = '5.0.0';

8
src/modules/default_settings.json
View File

@ -118,5 +118,13 @@
{
"name": "toastDisplayTime",
"value": 2500
},
{
"name": "fontStyle",
"value": "normal"
},
{
"name": "fontWeight",
"value": "normal"
}
]

12
src/scss/modules/_dropdown.scss
View File

@ -1,15 +1,13 @@
.dropdown {
select {
margin-left: 10px;
background: linear-gradient(180deg, #ffb032 0%, #dd3b67 100%);
height: 34px;
width: 120px;
color: map-get($modal, 'text');
border-image-source: linear-gradient(180deg, #ffb032 0%, #dd3b67 100%);
border-image-slice: 1;
border-width: 3px 4px;
background: #f0f0f0;
border:none;
padding: 10px 10px;
border-radius: 5px;
}
select#language {

16
src/scss/modules/_settings.scss
View File

@ -172,3 +172,19 @@ input[type=color]::-moz-color-swatch {
.MuiCheckbox-colorPrimary.Mui-checked {
color: map-get($button-colours, 'reset') !important;
}
.reminder-info {
position: absolute;
bottom: 20px;
right: 20px;
padding: 20px;
color: #000;
background: #f0f0f0;
max-width: 300px;
border-radius: 0.7em;
display: none;
h1 {
font-size: 1em;
}
}

2
src/scss/modules/modals/_main.scss
View File

@ -209,7 +209,7 @@ li {
.tab-content {
position: absolute;
left: 25%;
top: 10%;
top: 7%;
h3 {
text-transform: uppercase;