fix: error boundary bugs and some translation issues with modal

This commit is contained in:
David Ralph
2021-03-17 22:01:07 +00:00
parent 2454f1bbab
commit 04fb389d59
7 changed files with 65 additions and 50 deletions

View File

@@ -10,16 +10,18 @@ export default class ErrorBoundary extends React.PureComponent {
static getDerivedStateFromError(error) {
console.log(error);
return { error: true };
return {
error: true
};
}
render() {
if (this.state.error) {
return (
<div style={{'text-align': 'center'}}>
<div style={{'textAlign': 'center'}}>
<h1>Error</h1>
<p>Failed to load this component of Mue.</p>
<button class='refresh' onClick={() => window.location.reload()}>Refresh</button>
<button className='refresh' onClick={() => window.location.reload()}>Refresh</button>
</div>
)
}

View File

@@ -19,10 +19,10 @@ export default class About extends React.PureComponent {
const contributors = await (await fetch('https://api.github.com/repos/mue/mue/contributors')).json();
const versionData = await (await fetch('https://api.github.com/repos/mue/mue/releases')).json();
let updateMsg = 'No update available';
let updateMsg = this.props.language.version.no_update;
let version = versionData[0].tag_name;
if (version !== '5.0' && version !== '4.1') {
updateMsg = 'Update available: ' + version;
updateMsg = `${this.props.language.version.update_available}: ${version}`;
}
// TODO: REMOVE BOTS AND MAKE IT ACTUALLY WORK
@@ -39,14 +39,14 @@ export default class About extends React.PureComponent {
render() {
return (
<div>
<h2>About</h2>
<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>Copyright 2018-{new Date().getFullYear()} Mue Tab (BSD-3 License)</p>
<p>Version {Constants.VERSION} ({this.state.update})</p>
<h3>Resources Used</h3>
<p>Pexels (Background Images)</p>
<p>Google (Pin Icon)</p>
<h3>Contributors</h3>
<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>
<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>
<h3>{this.props.language.contributors}</h3>
{this.state.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>
@@ -58,7 +58,7 @@ 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>
)}
<h3>Supporters</h3>
<h3>{this.props.language.supporters}</h3>
<p>to be implemented</p>
</div>
);

View File

@@ -27,22 +27,22 @@ export default class TimeSettings extends React.PureComponent {
render() {
let digitalSettings = (
<React.Fragment>
<h3>Digital</h3>
<Checkbox name='seconds' text={this.props.language.seconds} />
<Checkbox name='24hour' text={this.props.language.twentyfourhour} />
<Checkbox name='ampm' text={this.props.language.ampm} />
<Checkbox name='zero' text={this.props.language.zero} />
<h3>{this.props.language.digital.title}</h3>
<Checkbox name='seconds' text={this.props.language.digital.seconds} />
<Checkbox name='24hour' text={this.props.language.digital.twentyfourhour} />
<Checkbox name='ampm' text={this.props.language.digital.ampm} />
<Checkbox name='zero' text={this.props.language.digital.zero} />
</React.Fragment>
);
let analogSettings = (
<React.Fragment>
<h3>Analog</h3>
<Checkbox name='secondHand' text='Seconds Hand' />
<Checkbox name='minuteHand' text='Minutes Hand' />
<Checkbox name='hourHand' text='Hours Hand' />
<Checkbox name='hourMarks' text='Hour Marks' />
<Checkbox name='minuteMarks' text='Minute Marks' />
<h3>{this.props.language.analogue.title}</h3>
<Checkbox name='secondHand' text={this.props.language.analogue.second_hand} />
<Checkbox name='minuteHand' text={this.props.language.analogue.minute_hand} />
<Checkbox name='hourHand' text={this.props.language.analogue.hour_hand} />
<Checkbox name='hourMarks' text={this.props.language.analogue.hour_marks} />
<Checkbox name='minuteMarks' text={this.props.language.analogue.minute_marks} />
</React.Fragment>
);
@@ -57,9 +57,9 @@ export default class TimeSettings extends React.PureComponent {
<h2>{this.props.language.title}</h2>
<Checkbox name='time' text='Enabled' />
<Dropdown label='Type' name='timeType' id='timeType' onChange={() => this.changeType()}>
<option className='choices' value='digital'>Digital</option>
<option className='choices' value='analogue'>Analog</option>
<option className='choices' value='percentageComplete'>Percentage of Day</option>
<option className='choices' value='digital'>{this.props.language.digital.title}</option>
<option className='choices' value='analogue'>{this.props.language.analogue.title}</option>
<option className='choices' value='percentageComplete'>{this.props.language.percentage_complete}</option>
</Dropdown>
{digitalSettings}
<h3>{this.props.language.date.title}</h3>

View File

@@ -47,7 +47,7 @@ export default function Settings (props) {
<About/>
</div>
<div label={props.language.sections.about.title}>
<About/>
<About language={props.language.sections.about}/>
</div>
</SettingsTabs>
</React.Fragment>