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

fix: translation cleanup

This commit is contained in:
David Ralph 2021-03-18 15:22:41 +00:00
parent b76cbc3bc6
commit 51eaf3a90e
13 changed files with 127 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,27 +34,29 @@ export default class AdvancedSettings extends React.PureComponent {
}
render() {
const { advanced } = this.props.language.sections;
return (
<div>
<h2>Advanced</h2>
<Checkbox name='offlineMode' text='Offline Mode' />
<h3>Data</h3>
<button className='reset' onClick={() => SettingsFunctions.setDefaultSettings('reset')}>Reset</button>
<button className='export' onClick={() => SettingsFunctions.exportSettings()}>Export</button>
<button className='import' onClick={() => document.getElementById('file-input').click()}>Import</button>
<h2>{advanced.title}</h2>
<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='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)} />
<h3>Customisation</h3>
<h3>{advanced.customisation}</h3>
<ul>
<p>Custom CSS <span className='modalLink' onClick={() => this.resetItem('customcss')}>Reset</span></p>
<p>{advanced.custom_css} <span className='modalLink' onClick={() => this.resetItem('customcss')}>{this.props.language.buttons.reset}</span></p>
<textarea id='customcss'></textarea>
</ul>
<ul>
<p>Custom JS <span className='modalLink' onClick={() => this.resetItem('customjs')}>Reset</span></p>
<p>{advanced.custom_js} <span className='modalLink' onClick={() => this.resetItem('customjs')}>{this.props.language.buttons.reset}</span></p>
<textarea id='customjs'></textarea>
</ul>
<h3>Experimental</h3>
<p>Please note that the Mue team cannot provide support if you have experimental mode on. Please disable it first and see if the issues continue to occur before contacting support.</p>
<Checkbox name='experimental' text='Enabled' />
<h3>{this.props.language.sections.experimental.title}</h3>
<p>{advanced.experimental_warning}</p>
<Checkbox name='experimental' text={this.props.language.enabled} />
</div>
);
}

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

@ -14,7 +14,7 @@ import 'react-color-gradient-picker/dist/index.css';
import '../../../../scss/react-color-picker-gradient-picker-custom-styles.scss';
export default class BackgroundSettings extends React.PureComponent {
DefaultGradientSettings = { 'angle': '180', 'gradient': [{ 'colour': this.props.language.disabled, 'stop': 0 }], 'type': 'linear' };
DefaultGradientSettings = { 'angle': '180', 'gradient': [{ 'colour': this.props.language.sections.background.disabled, 'stop': 0 }], 'type': 'linear' };
GradientPickerInitalState = undefined;
constructor(...args) {
@ -131,14 +131,14 @@ export default class BackgroundSettings extends React.PureComponent {
}
currentGradientSettings = () => {
if (typeof this.state.gradientSettings === 'object' && this.state.gradientSettings.gradient.every(g => g.colour !== this.props.language.disabled)) {
if (typeof this.state.gradientSettings === 'object' && this.state.gradientSettings.gradient.every(g => g.colour !== this.props.language.sections.background.disabled)) {
const clampNumber = (num, a, b) => Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
return JSON.stringify({
...this.state.gradientSettings,
gradient: [...this.state.gradientSettings.gradient.map(g => { return { ...g, stop: clampNumber(+g.stop, 0, 100) } })].sort((a, b) => (a.stop > b.stop) ? 1 : -1)
});
}
return this.props.language.disabled;
return this.props.language.sections.background.disabled;
}
onColorPickerChange = (attrs, name) => {
@ -171,12 +171,14 @@ export default class BackgroundSettings extends React.PureComponent {
localStorage.setItem('brightness', this.state.brightness);
localStorage.setItem('customBackground', this.state.customBackground);
if (document.getElementById('customBackgroundHex').value !== this.props.backgroundDisabled) {
if (document.getElementById('customBackgroundHex').value !== this.props.language.sections.background.disabled) {
localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundHex').value);
}
}
render() {
const { background } = this.props.language.sections;
let colourSettings = null;
if (typeof this.state.gradientSettings === 'object') {
const gradientHasMoreThanOneColour = this.state.gradientSettings.gradient.length > 1;
@ -209,8 +211,8 @@ export default class BackgroundSettings extends React.PureComponent {
colourSettings = (
<div>
{gradientInputs}
{this.state.gradientSettings.gradient[0].colour !== this.props.language.disabled &&
!gradientHasMoreThanOneColour ? (<button type='button' className='add' onClick={this.addColour}>{this.props.language.add_colour}</button>) : null
{this.state.gradientSettings.gradient[0].colour !== background.disabled &&
!gradientHasMoreThanOneColour ? (<button type='button' className='add' onClick={this.addColour}>{background.add_colour}</button>) : null
}
</div>
);
@ -222,23 +224,23 @@ export default class BackgroundSettings extends React.PureComponent {
<Checkbox name='background' text='Enabled' />
<h3>Buttons</h3>
<ul>
<Checkbox name='view' text={this.props.language.view} />
<Checkbox name='favouriteEnabled' text={this.props.language.favourite} />
<Checkbox name='refresh' text={this.props.language.refresh} />
<Checkbox name='view' text={background.view} />
<Checkbox name='favouriteEnabled' text={background.favourite} />
<Checkbox name='refresh' text={background.refresh} />
</ul>
<h3>Effects</h3>
<ul>
<p>{this.props.language.blur} ({this.state.blur}%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.reset}</span></p>
<p>{background.blur} ({this.state.blur}%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.buttons.reset}</span></p>
<input className='range' type='range' min='0' max='100' value={this.state.blur} onChange={(event) => this.setState({ blur: event.target.value })} />
</ul>
<ul>
<p>{this.props.language.brightness} ({this.state.brightness}%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.props.language.reset}</span></p>
<p>{background.brightness} ({this.state.brightness}%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.props.language.buttons.reset}</span></p>
<input className='range' type='range' min='0' max='100' value={this.state.brightness} onChange={(event) => this.setState({ brightness: event.target.value })} />
</ul>
<h3>Source</h3>
<ul>
<Dropdown
label={this.props.language.api}
label={background.api}
name='backgroundapi'
id='backgroundAPI'
onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)} >
@ -247,16 +249,16 @@ export default class BackgroundSettings extends React.PureComponent {
</Dropdown>
</ul>
<ul>
<p>{this.props.language.custom_url} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
<p>{background.custom_url} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.buttons.reset}</span></p>
<input type='text' value={this.state.customBackground} onChange={(e) => this.setState({ customBackground: e.target.value })}></input>
</ul>
<ul>
<p>{this.props.language.custom_background} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.reset}</span></p>
<button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>{this.props.language.upload}</button>
<p>{background.custom_background} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.buttons.reset}</span></p>
<button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>{background.upload}</button>
<FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif' loadFunction={(e) => this.fileUpload(e)} />
</ul>
<ul>
<p>{this.props.language.custom_colour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>{this.props.language.reset}</span></p>
<p>{background.custom_colour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>{this.props.language.buttons.reset}</span></p>
<input id='customBackgroundHex' type='hidden' value={this.currentGradientSettings()} />
{colourSettings}
</ul>

20
src/components/modals/settings/sections/Greeting.jsx
View File

@ -19,7 +19,7 @@ export default class GreetingSettings extends React.PureComponent {
greetingName: ''
});
toast(this.props.toastLanguage.reset);
toast(this.props.language.toasts.reset);
}
changeDate(data) {
@ -40,20 +40,22 @@ export default class GreetingSettings extends React.PureComponent {
}
render() {
const { greeting } = this.props.language.sections;
return (
<div>
<h2>{this.props.language.title}</h2>
<Checkbox name='greeting' text={this.props.enabledLanguage} />
<Checkbox name='events' text={this.props.language.events} />
<Checkbox name='defaultGreetingMessage' text={this.props.language.default} />
<h2>{greeting.title}</h2>
<Checkbox name='greeting' text={this.props.language.enabled} />
<Checkbox name='events' text={greeting.events} />
<Checkbox name='defaultGreetingMessage' text={greeting.default} />
<ul>
<p>{this.props.language.name} <span className='modalLink' onClick={() => this.resetItem()}>Reset</span></p>
<p>{greeting.name} <span className='modalLink' onClick={() => this.resetItem()}>{this.props.language.buttons.reset}</span></p>
<input type='text' value={this.state.greetingName} onChange={(e) => this.setState({ greetingName: e.target.value })}></input>
</ul>
<h3>Birthday</h3>
<Checkbox name='birthdayenabled' text={this.props.enabledLanguage} />
<h3>{greeting.birthday}</h3>
<Checkbox name='birthdayenabled' text={this.props.language.enabled} />
<ul>
<p>{this.props.language.birthday_date}</p>
<p>{greeting.birthday_date}</p>
<DatePicker onChange={(data) => this.changeDate(data)} value={this.state.birthday}/>
</ul>
</div>

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

@ -6,18 +6,14 @@ const languages = require('../../../../modules/languages.json');
export default function LanguageSettings (props) {
return (
<div>
<h2>Language</h2>
<h4 htmlFor='language' className='nodropdown'>{props.language.language}</h4>
<Dropdown
name='language'
id='language'
onChange={() => localStorage.setItem('language', document.getElementById('language').value)}>
<h2>{props.language.title}</h2>
<Dropdown label={props.language.title} name='language' id='language' onChange={() => localStorage.setItem('language', document.getElementById('language').value)}>
{languages.map(language =>
<option className='choices' value={language.code} key={language.code}>{language.text}</option>
)}
</Dropdown>
<h4 htmlFor='quotelanguage' className='nodropdown'>Quote {props.language.language}</h4>
<Dropdown label={props.language.language} name='quotelanguage' id='quotelanguage' onChange={() => localStorage.setItem('quotelanguage', document.getElementById('quotelanguage').value)}>
<br/>
<Dropdown label={props.language.quote} name='quotelanguage' id='quotelanguage' onChange={() => localStorage.setItem('quotelanguage', document.getElementById('quotelanguage').value)}>
<option className='choices' value='English'>English</option>
<option className='choices' value='French'>Français</option>
</Dropdown>

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

@ -3,15 +3,17 @@ import React from 'react';
import Checkbox from '../Checkbox';
export default function QuoteSettings (props) {
const { quote } = props.language.sections;
return (
<div>
<h2>{props.language.title}</h2>
<Checkbox name='greeting' text={'Enabled'}></Checkbox>
<Checkbox name='authorLink' text={props.language.author_link}></Checkbox>
<h3>{props.language.buttons}</h3>
<Checkbox name='copyButton' text={props.language.copy} />
<Checkbox name='tweetButton' text={props.language.tweet} />
<Checkbox name='favouriteQuoteEnabled' text={props.language.favourite} />
<h2>{quote.title}</h2>
<Checkbox name='quote' text={props.language.enabled}></Checkbox>
<Checkbox name='authorLink' text={quote.author_link}></Checkbox>
<h3>{quote.buttons}</h3>
<Checkbox name='copyButton' text={quote.copy} />
<Checkbox name='tweetButton' text={quote.tweet} />
<Checkbox name='favouriteQuoteEnabled' text={quote.favourite} />
</div>
);
}

14
src/components/modals/settings/sections/Search.jsx
View File

@ -55,24 +55,26 @@ export default class SearchSettings extends React.PureComponent {
}
render() {
const { search } = this.props.language.sections;
return (
<div className='section'>
<h2>{this.props.language.title}</h2>
<Checkbox name='searchBar' text={this.props.enabledLanguage} />
<Checkbox name='voiceSearch' text={this.props.language.voice_search} />
<h2>{search.title}</h2>
<Checkbox name='searchBar' text={this.props.language.enabled} />
<Checkbox name='voiceSearch' text={search.voice_search} />
<ul>
<Dropdown label={this.props.language.search_engine}
<Dropdown label={search.search_engine}
name='searchEngine'
id='searchEngine'
onChange={() => this.setSearchEngine(document.getElementById('searchEngine').value)} >
{searchEngines.map((engine) =>
<option key={engine.name} className='choices' value={engine.settingsName}>{engine.name}</option>
)}
<option className='choices' value='custom'>{this.props.language.custom.split(' ')[0]}</option>
<option className='choices' value='custom'>{search.custom.split(' ')[0]}</option>
</Dropdown>
</ul>
<ul id='searchEngineInput' style={{ display: 'none' }}>
<p style={{ 'marginTop': '0px' }}>{this.props.language.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{this.props.language.reset}</span></p>
<p style={{ 'marginTop': '0px' }}>{search.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{this.props.language.reset}</span></p>
<input type='text' id='customSearchEngine'></input>
</ul>
</div>

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

@ -26,24 +26,26 @@ export default class TimeSettings extends React.PureComponent {
}
render() {
const { time } = this.props.language.sections;
let digitalSettings = (
<React.Fragment>
<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} />
<h3>{time.digital.title}</h3>
<Checkbox name='seconds' text={time.digital.seconds} />
<Checkbox name='24hour' text={time.digital.twentyfourhour} />
<Checkbox name='ampm' text={time.digital.ampm} />
<Checkbox name='zero' text={time.digital.zero} />
</React.Fragment>
);
let analogSettings = (
<React.Fragment>
<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} />
<h3>{time.analogue.title}</h3>
<Checkbox name='secondHand' text={time.analogue.second_hand} />
<Checkbox name='minuteHand' text={time.analogue.minute_hand} />
<Checkbox name='hourHand' text={time.analogue.hour_hand} />
<Checkbox name='hourMarks' text={time.analogue.hour_marks} />
<Checkbox name='minuteMarks' text={time.analogue.minute_marks} />
</React.Fragment>
);
@ -55,27 +57,27 @@ export default class TimeSettings extends React.PureComponent {
return (
<div>
<h2>{this.props.language.title}</h2>
<Checkbox name='time' text={this.props.enabledLanguage} />
<h2>{time.title}</h2>
<Checkbox name='time' text={this.props.language.enabled} />
<Dropdown label='Type' name='timeType' id='timeType' onChange={() => this.changeType()}>
<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>
<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>
</Dropdown>
{digitalSettings}
<h3>{this.props.language.date.title}</h3>
<Checkbox name='date' text={this.props.enabledLanguage} />
<Checkbox name='dayofweek' text={this.props.language.date.day_of_week} />
<Checkbox name='short' text={this.props.language.date.short_date} betaFeature={true} />
<Dropdown label={this.props.language.date.short_format} name='dateFormat' id='dateformat' onChange={() => localStorage.setItem('dateFormat', document.getElementById('dateformat').value)}>
<h3>{time.date.title}</h3>
<Checkbox name='date' text={this.props.language.enabled} />
<Checkbox name='dayofweek' text={time.date.day_of_week} />
<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)}>
<option className='choices' value='DMY'>DMY</option>
<option className='choices' value='MDY'>MDY</option>
<option className='choices' value='YMD'>YMD</option>
</Dropdown>
<Dropdown label={this.props.language.date.short_separator.title} name='shortFormat' id='shortformat' onChange={() => localStorage.setItem('shortFormat', document.getElementById('shortformat').value)}>
<option className='choices' value='default'>{this.props.language.date.short_separator.default}</option>
<option className='choices' value='dash'>{this.props.language.date.short_separator.dash}</option>
<option className='choices' value='gaps'>{this.props.language.date.short_separator.gaps}</option>
<Dropdown label={time.date.short_separator.title} name='shortFormat' id='shortformat' onChange={() => localStorage.setItem('shortFormat', document.getElementById('shortformat').value)}>
<option className='choices' value='default'>{time.date.short_separator.default}</option>
<option className='choices' value='dash'>{time.date.short_separator.dash}</option>
<option className='choices' value='gaps'>{time.date.short_separator.gaps}</option>
</Dropdown>
</div>
);

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

@ -17,28 +17,28 @@ export default function Settings (props) {
<React.Fragment>
<SettingsTabs>
<div label={props.language.sections.time.title}>
<Time language={props.language.sections.time} enabledLanguage={props.language.enabled} />
<Time language={props.language}/>
</div>
<div label={props.language.sections.quote.title}>
<Quote language={props.language.sections.quote} enabledLanguage={props.language.enabled}/>
<Quote language={props.language}/>
</div>
<div label={props.language.sections.greeting.title}>
<Greeting language={props.language.sections.greeting} enabledLanguage={props.language.enabled} toastLanguage={props.toastLanguage} />
<Greeting language={props.language}/>
</div>
<div label={props.language.sections.background.title}>
<Background language={props.language.sections.background} enabledLanguage={props.language.enabled} toastLanguage={props.toastLanguage}/>
<Background language={props.language}/>
</div>
<div label={props.language.sections.search.title}>
<Search language={props.language.sections.search} enabledLanguage={props.language.enabled}/>
<Search language={props.language}/>
</div>
<div label={props.language.sections.appearance.title}>
<Appearance language={props.language.sections.appearance} toastLanguage={props.toastLanguage}/>
<Appearance language={props.language.sections.appearance} resetLanguage={props.language.buttons.reset} toastLanguage={props.toastLanguage}/>
</div>
<div label={props.language.sections.language}>
<Language language={props.language}/>
<div label={props.language.sections.language.title}>
<Language language={props.language.sections.language}/>
</div>
<div label='Advanced'>
<Advanced/>
<div label={props.language.sections.advanced.title}>
<Advanced language={props.language}/>
</div>
<div label='Experimental'>

2
src/components/widgets/background/Background.jsx
View File

@ -111,7 +111,7 @@ export default class Background extends React.PureComponent {
this.setBackground(randomPhoto.url.default, null, randomPhoto.photographer);
this.setCredit(randomPhoto.photographer);
document.getElementById('location').textContent = randomPhoto.location;
} else if (customBackgroundColour) {
} else if (customBackgroundColour !== 'Disabled' && customBackgroundColour !== '') {
this.setBackground(null, customBackgroundColour, 'false');
} else if (customBackground !== '') {
if (customBackground.includes('.mp4') || customBackground.includes('.webm') || customBackground.includes('.ogg')) {

4
src/components/widgets/quote/Quote.jsx
View File

@ -91,7 +91,9 @@ export default class Quote extends React.PureComponent {
}
let authorlink = `https://${this.props.languagecode.split('-')[0]}.wikipedia.org/wiki/${data.author.split(' ').join('_')}`;
if (localStorage.getItem('authorLink') === 'false') authorLink = null;
if (localStorage.getItem('authorLink') === 'false') {
authorLink = null;
}
this.setState({
quote: '"' + data.quote + '"',

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

@ -1,16 +1,3 @@
.switch {
position: relative;
width: 60px;
height: 34px;
float: right;
input {
opacity: 0;
width: 0;
height: 0;
}
}
.hidden {
display: none;
}

22
src/translations/en-GB.json
View File

@ -80,6 +80,7 @@
"events": "Events",
"default": "Default Greeting Message",
"name": "Name for greeting",
"birthday": "Birthday",
"birthday_date": "Birthday Date"
},
"background": {
@ -103,7 +104,7 @@
"custom": "Custom Search URL",
"voice_search": "Voice Search"
},
"appearance":{
"appearance": {
"title": "Appearance",
"dark_theme": "Dark Theme",
"night_mode": "Night Mode",
@ -115,7 +116,22 @@
"milliseconds": "milliseconds"
}
},
"language": "Language",
"advanced": {
"title": "Advanced",
"offline_mode": "Offline Mode",
"data": "Data",
"customisation": "Customisation",
"custom_css": "Custom CSS",
"custom_js": "Custom JS",
"experimental_warning": "Please note that the Mue team cannot provide support if you have experimental mode on. Please disable it first and see if the issue continues to occur before contacting support."
},
"experimental": {
"title": "Experimental"
},
"language": {
"title": "Language",
"quote": "Quote Language"
},
"changelog": "Change Log",
"about": {
"title": "About",
@ -206,7 +222,7 @@
"title": "Give us feedback",
"question_one": "How would you rate your experience of this Mue build?",
"question_two": "What bugs did you encounter in your use of Mue?",
"question_three": "How likely would you be to recommend this version of Mue to a friend of colleague?",
"question_three": "How likely would you be to recommend this version of Mue to a friend or colleague?",
"submit": "Submit"
}
},

3
src/translations/en-US.json
View File

@ -15,6 +15,9 @@
"analogue": {
"title": "Analog"
}
},
"advanced": {
"customisation": "Customization"
}
}
}