mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-19 06:54:10 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: new sliders, dropdowns, text inputs, update settings ui, fix language bug

Browse Source 
Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
This commit is contained in:
David Ralph
2021-10-12 22:18:47 +01:00
parent 14121fb975
commit bc8ef0d9f2
43 changed files with 213 additions and 535 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/modals/main/settings/sections/Advanced.jsx
View File

@@ -1,6 +1,7 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import Modal from 'react-modal';
import { MenuItem } from '@mui/material';
import { exportSettings, importSettings } from 'modules/helpers/settings/modals';
@@ -28,14 +29,15 @@ export default class AdvancedSettings extends PureComponent {
<>
<h2>{getMessage('modals.main.settings.sections.advanced.title')}</h2>
<Checkbox name='offlineMode' text={getMessage('modals.main.settings.sections.advanced.offline_mode')} element='.other' />
<Dropdown name='timezone' label={getMessage('modals.main.settings.sections.advanced.timezone.title')} category='timezone'>
<option value='auto'>{getMessage('modals.main.settings.sections.advanced.timezone.automatic')}</option>
<Dropdown name='timezone' label={getMessage('modals.main.settings.sections.advanced.timezone.title')} category='timezone' manual={true}>
<MenuItem value='auto'>{getMessage('modals.main.settings.sections.advanced.timezone.automatic')}</MenuItem>
{time_zones.map((timezone) => (
<option value={timezone} key={timezone}>{timezone}</option>
<MenuItem value={timezone} key={timezone}>{timezone}</MenuItem>
))}
</Dropdown>
<h3>{getMessage('modals.main.settings.sections.advanced.data')}</h3>
<br/>
<button className='reset' onClick={() => this.setState({ resetModal: true })}>{getMessage('modals.main.settings.buttons.reset')}</button>
<button className='export' onClick={() => exportSettings()}>{getMessage('modals.main.settings.buttons.export')}</button>
<button className='import' onClick={() => document.getElementById('file-input').click()}>{getMessage('modals.main.settings.buttons.import')}</button>

4
src/components/modals/main/settings/sections/Appearance.jsx
View File

@@ -6,6 +6,8 @@ import Radio from '../Radio';
import Slider from '../Slider';
import Text from '../Text';
import { values } from 'modules/helpers/settings/modals';
export default function AppearanceSettings() {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
@@ -54,7 +56,7 @@ export default function AppearanceSettings() {
<h3>{getMessage('modals.main.settings.sections.appearance.accessibility.title')}</h3>
<Checkbox text={getMessage('modals.main.settings.sections.appearance.accessibility.text_shadow')} name='textBorder' category='other'/>
<Checkbox text={getMessage('modals.main.settings.sections.appearance.accessibility.animations')} name='animations' category='other'/>
<Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.toast_duration')} name='toastDisplayTime' default='2500' step='100' min='500' max='5000' toast={true}
<Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.toast_duration')} name='toastDisplayTime' default='2500' step='100' min='500' max='5000' marks={values('toast')} toast={true}
display={' ' + getMessage('modals.main.settings.sections.appearance.accessibility.milliseconds')} />
</>
);

6
src/components/modals/main/settings/sections/Date.jsx
View File

@@ -27,13 +27,13 @@ export default class DateSettings extends PureComponent {
const shortSettings = (
<>
<br/>
<Dropdown label={getMessage('modals.main.settings.sections.date.short_format')} name='dateFormat' category='date'>
<option value='DMY'>DMY</option>
<option value='MDY'>MDY</option>
<option value='YMD'>YMD</option>
</Dropdown>
<br/><br/>
<Dropdown label={getMessage('modals.main.settings.sections.date.short_separator.title')} name='shortFormat' category='date'>
<option value='dash'>{getMessage('modals.main.settings.sections.date.short_separator.dash')}</option>
<option value='dots'>{getMessage('modals.main.settings.sections.date.short_separator.dots')}</option>
@@ -56,7 +56,7 @@ export default class DateSettings extends PureComponent {
<option value='long'>{getMessage('modals.main.settings.sections.date.type.long')}</option>
<option value='short'>{getMessage('modals.main.settings.sections.date.type.short')}</option>
</Dropdown>
<br/>
<Checkbox name='datezero' text={getMessage('modals.main.settings.sections.time.digital.zero')} category='date'/>
<Checkbox name='weeknumber' text={getMessage('modals.main.settings.sections.date.week_number')} category='date'/>
{dateSettings}

1
src/components/modals/main/settings/sections/Greeting.jsx
View File

@@ -34,6 +34,7 @@ export default class GreetingSettings extends PureComponent {
<h3>{getMessage('modals.main.settings.sections.greeting.birthday')}</h3>
<Switch name='birthdayenabled' text={getMessage('modals.main.settings.enabled')} category='greeting'/>
<br/>
<Checkbox name='birthdayage' text={getMessage('modals.main.settings.sections.greeting.birthday_age')} category='greeting'/>
<p>{getMessage('modals.main.settings.sections.greeting.birthday_date')}</p>
<input type='date' onChange={this.changeDate} value={this.state.birthday.toISOString().substr(0, 10)}/>

5
src/components/modals/main/settings/sections/Message.jsx
View File

@@ -2,6 +2,7 @@ import variables from 'modules/variables';
import { PureComponent, Fragment } from 'react';
import { Cancel } from '@mui/icons-material';
import { toast } from 'react-toastify';
import { TextField } from '@mui/material';
import Header from '../Header';
@@ -64,13 +65,13 @@ export default class Message extends PureComponent {
<p>{this.getMessage('modals.main.settings.sections.message.text')}</p>
{this.state.messages.map((_url, index) => (
<Fragment key={index}>
<input type='text' value={this.state.messages[index]} onChange={(e) => this.message(e, true, index)}></input>
<TextField value={this.state.messages[index]} onChange={(e) => this.message(e, true, index)} varient='outlined' />
{this.state.messages.length > 1 ? <button className='cleanButton' onClick={() => this.modifyMessage('remove', index)}>
<Cancel/>
</button> : null}
<br/><br/>
</Fragment>
))}
<br/>
<button className='uploadbg' onClick={() => this.modifyMessage('add')}>{this.getMessage('modals.main.settings.sections.message.add')}</button>
</>
);

5
src/components/modals/main/settings/sections/Navbar.jsx
View File

@@ -6,6 +6,8 @@ import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown';
import Slider from '../Slider';
import { values } from 'modules/helpers/settings/modals';
export default class Navbar extends PureComponent {
render() {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
@@ -13,6 +15,7 @@ export default class Navbar extends PureComponent {
return (
<>
<h2>{getMessage('modals.main.settings.sections.appearance.navbar.title')}</h2>
<Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomNavbar' min='10' max='400' default='100' display='%' marks={values('zoom')} category='navbar' />
<Checkbox name='navbarHover' text={'Only display on hover'} category='navbar'/>
<Checkbox name='notesEnabled' text={getMessage('modals.main.settings.sections.appearance.navbar.notes')} category='navbar' />
<Checkbox name='view' text={getMessage('modals.main.settings.sections.background.buttons.view')} category='navbar' />
@@ -25,8 +28,6 @@ export default class Navbar extends PureComponent {
{/* before it was just a checkbox */}
<option value='true'>{getMessage('modals.main.settings.sections.appearance.navbar.refresh_options.page')}</option>
</Dropdown>
<br/>
<Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomNavbar' min='10' max='400' default='100' display='%' category='navbar' />
</>
);
}

7
src/components/modals/main/settings/sections/Quote.jsx
View File

@@ -1,6 +1,7 @@
import variables from 'modules/variables';
import { PureComponent, Fragment } from 'react';
import { Cancel } from '@mui/icons-material';
import { TextField } from '@mui/material';
import Header from '../Header';
import Checkbox from '../Checkbox';
@@ -88,12 +89,11 @@ export default class QuoteSettings extends PureComponent {
<p>{this.getMessage('modals.main.settings.sections.quote.custom')} <span className='modalLink' onClick={this.resetCustom}>{this.getMessage('modals.main.settings.buttons.reset')}</span></p>
{this.state.customQuote.map((_url, index) => (
<Fragment key={index}>
<input type='text' style={{ marginRight: '10px' }} value={this.state.customQuote[index].quote} placeholder='Quote' onChange={(e) => this.customQuote(e, true, index, 'quote')}></input>
<input type='text' value={this.state.customQuote[index].author} placeholder='Author' onChange={(e) => this.customQuote(e, true, index, 'author')}></input>
<TextField value={this.state.customQuote[index].quote} placeholder='Quote' onChange={(e) => this.customQuote(e, true, index, 'quote')} varient='outlined' />
<TextField value={this.state.customQuote[index].author} placeholder='Author' onChange={(e) => this.customQuote(e, true, index, 'author')} varient='outlined' />
{this.state.customQuote.length > 1 ? <button className='cleanButton' onClick={() => this.modifyCustomQuote('remove', index)}>
<Cancel/>
</button> : null}
<br/><br/>
</Fragment>
))}
<button className='uploadbg' onClick={() => this.modifyCustomQuote('add')}>{this.getMessage('modals.main.settings.sections.quote.add')}</button>
@@ -103,7 +103,6 @@ export default class QuoteSettings extends PureComponent {
// api
customSettings = (
<>
<br/><br/>
<Dropdown label={this.getMessage('modals.main.settings.sections.background.interval.title')} name='quotechange'>
<option value='refresh'>{this.getMessage('tabname')}</option>
<option value='60000'>{this.getMessage('modals.main.settings.sections.background.interval.minute')}</option>

13
src/components/modals/main/settings/sections/Search.jsx
View File

@@ -1,6 +1,7 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { toast } from 'react-toastify';
import { MenuItem, TextField } from '@mui/material';
import Header from '../Header';
import Dropdown from '../Dropdown';
@@ -78,18 +79,16 @@ export default class SearchSettings extends PureComponent {
<Checkbox name='voiceSearch' text={this.getMessage('modals.main.settings.sections.search.voice_search')} category='search'/>
: null}
<Checkbox name='searchDropdown' text={this.getMessage('modals.main.settings.sections.search.dropdown')} category='search' element='.other'/>
<Dropdown label={this.getMessage('modals.main.settings.sections.search.search_engine')} name='searchEngine' onChange={(value) => this.setSearchEngine(value)}>
<Dropdown label={this.getMessage('modals.main.settings.sections.search.search_engine')} name='searchEngine' onChange={(value) => this.setSearchEngine(value)} manual={true}>
{searchEngines.map((engine) => (
<option key={engine.name} value={engine.settingsName}>{engine.name}</option>
<MenuItem key={engine.name} value={engine.settingsName}>{engine.name}</MenuItem>
))}
<option value='custom'>{this.getMessage('modals.main.settings.sections.search.custom').split(' ')[0]}</option>
<MenuItem value='custom'>{this.getMessage('modals.main.settings.sections.search.custom').split(' ')[0]}</MenuItem>
</Dropdown>
<ul style={{ display: this.state.customDisplay }}>
<br/>
<p style={{ marginTop: '0px' }}>{this.getMessage('modals.main.settings.sections.search.custom')} <span className='modalLink' onClick={() => this.resetSearch()}>{this.getMessage('modals.main.settings.buttons.reset')}</span></p>
<input type='text' value={this.state.customValue} onInput={(e) => this.setState({ customValue: e.target.value })}></input>
<p style={{ marginTop: '0px' }}><span className='modalLink' onClick={() => this.resetSearch()}>{this.getMessage('modals.main.settings.buttons.reset')}</span></p>
<TextField label={this.getMessage('modals.main.settings.sections.search.custom')} value={this.state.customValue} onInput={(e) => this.setState({ customValue: e.target.value })} varient='outlined' />
</ul>
<br/>
<Checkbox name='autocomplete' text={this.getMessage('modals.main.settings.sections.search.autocomplete')} category='search' />
<Radio title={this.getMessage('modals.main.settings.sections.search.autocomplete_provider')} options={autocompleteProviders} name='autocompleteProvider' category='search'/>
</>

1
src/components/modals/main/settings/sections/Time.jsx
View File

@@ -34,7 +34,6 @@ export default class TimeSettings extends PureComponent {
<>
<h3>{getMessage('modals.main.settings.sections.time.digital.title')}</h3>
<Radio title={getMessage('modals.main.settings.sections.time.format')} name='timeformat' options={digitalOptions} smallTitle={true} category='clock' />
<br/>
<Checkbox name='seconds' text={getMessage('modals.main.settings.sections.time.digital.seconds')} category='clock' />
<Checkbox name='zero' text={getMessage('modals.main.settings.sections.time.digital.zero')} category='clock' />
</>

10
src/components/modals/main/settings/sections/Weather.jsx
View File

@@ -4,12 +4,13 @@ import { PureComponent } from 'react';
import Header from '../Header';
import Radio from '../Radio';
import Checkbox from '../Checkbox';
import { TextField } from '@mui/material';
export default class TimeSettings extends PureComponent {
constructor() {
super();
this.state = {
location: localStorage.getItem('location') || 'London'
location: localStorage.getItem('location') || ''
};
}
@@ -67,11 +68,8 @@ export default class TimeSettings extends PureComponent {
return (
<>
<Header title={getMessage('modals.main.settings.sections.weather.title')} setting='weatherEnabled' category='widgets' zoomSetting='zoomWeather' zoomCategory='weather'/>
<ul>
<p>{getMessage('modals.main.settings.sections.weather.location')} <span className='modalLink' onClick={() => this.getAuto()}>{getMessage('modals.main.settings.sections.weather.auto')}</span></p>
<input type='text' value={this.state.location} onChange={(e) => this.changeLocation(e)}></input>
</ul>
<br/>
<TextField label={getMessage('modals.main.settings.sections.weather.location')} value={this.state.location} onChange={(e) => this.changeLocation(e)} placeholder='London' varient='outlined' />
<span className='modalLink' onClick={() => this.getAuto()}>{getMessage('modals.main.settings.sections.weather.auto')}</span>
<Radio name='tempformat' title={getMessage('modals.main.settings.sections.weather.temp_format.title')} options={tempFormat} category='weather'/>
<h3>{getMessage('modals.main.settings.sections.weather.extra_info.title')}</h3>

48
src/components/modals/main/settings/sections/background/Background.jsx
View File

@@ -1,5 +1,6 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import { MenuItem } from '@mui/material';
import Header from '../../Header';
import Checkbox from '../../Checkbox';
@@ -10,6 +11,8 @@ import Radio from '../../Radio';
import ColourSettings from './Colour';
import CustomSettings from './Custom';
import { values } from 'modules/helpers/settings/modals';
export default class BackgroundSettings extends PureComponent {
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
@@ -17,6 +20,7 @@ export default class BackgroundSettings extends PureComponent {
super();
this.state = {
backgroundType: localStorage.getItem('backgroundType') || 'api',
backgroundFilter: localStorage.getItem('backgroundFilter') || 'none',
backgroundCategories: [this.getMessage('modals.main.loading')]
};
this.controller = new AbortController();
@@ -76,31 +80,25 @@ export default class BackgroundSettings extends PureComponent {
];
const interval = (
<>
<br/><br/>
<Dropdown label={getMessage('modals.main.settings.sections.background.interval.title')} name='backgroundchange'>
<Dropdown label={getMessage('modals.main.settings.sections.background.interval.title')} name='backgroundchange'>
<option value='refresh'>{getMessage('tabname')}</option>
<option value='60000'>{getMessage('modals.main.settings.sections.background.interval.minute')}</option>
<option value='1800000'>{getMessage('modals.main.settings.sections.background.interval.half_hour')}</option>
<option value='3600000'>{getMessage('modals.main.settings.sections.background.interval.hour')}</option>
<option value='86400000'>{getMessage('modals.main.settings.sections.background.interval.day')}</option>
<option value='604800000'>{getMessage('widgets.date.week')}</option>
<option value='2628000000'>{getMessage('modals.main.settings.sections.background.interval.month')}</option>
</Dropdown>
</>
<option value='60000'>{getMessage('modals.main.settings.sections.background.interval.minute')}</option>
<option value='1800000'>{getMessage('modals.main.settings.sections.background.interval.half_hour')}</option>
<option value='3600000'>{getMessage('modals.main.settings.sections.background.interval.hour')}</option>
<option value='86400000'>{getMessage('modals.main.settings.sections.background.interval.day')}</option>
<option value='604800000'>{getMessage('widgets.date.week')}</option>
<option value='2628000000'>{getMessage('modals.main.settings.sections.background.interval.month')}</option>
</Dropdown>
);
const APISettings = (
<>
<br/>
<Radio title={getMessage('modals.main.settings.sections.background.source.api')} options={apiOptions} name='backgroundAPI' category='background' element='#backgroundImage'/>
<br/>
<Dropdown label={getMessage('modals.main.settings.sections.background.category')} name='apiCategory'>
<Dropdown label={getMessage('modals.main.settings.sections.background.category')} name='apiCategory' manual={true}>
{this.state.backgroundCategories.map((category) => (
<option value={category} key={category}>{category.charAt(0).toUpperCase() + category.slice(1)}</option>
<MenuItem value={category} key={category}>{category.charAt(0).toUpperCase() + category.slice(1)}</MenuItem>
))}
</Dropdown>
<br/><br/>
<Dropdown label={getMessage('modals.main.settings.sections.background.source.quality.title')} name='apiQuality' element='.other'>
<option value='original'>{getMessage('modals.main.settings.sections.background.source.quality.original')}</option>
<option value='high'>{getMessage('modals.main.settings.sections.background.source.quality.high')}</option>
@@ -114,6 +112,8 @@ export default class BackgroundSettings extends PureComponent {
switch (this.state.backgroundType) {
case 'custom': backgroundSettings = <CustomSettings interval={interval}/>; break;
case 'colour': backgroundSettings = <ColourSettings/>; break;
case 'random_colour': backgroundSettings = <></>; break;
case 'random_gradient': backgroundSettings = <></>; break;
default: backgroundSettings = APISettings; break;
}
@@ -138,25 +138,27 @@ export default class BackgroundSettings extends PureComponent {
<option value='random_colour'>{getMessage('modals.main.settings.sections.background.type.random_colour')}</option>
<option value='random_gradient'>{getMessage('modals.main.settings.sections.background.type.random_gradient')}</option>
</Dropdown>
<br/>
{backgroundSettings}
<h3>{getMessage('modals.main.settings.sections.background.buttons.title')}</h3>
<Checkbox name='downloadbtn' text={getMessage('modals.main.settings.sections.background.buttons.download')} element='.other' />
<h3>{getMessage('modals.main.settings.sections.background.effects.title')}</h3>
<Slider title={getMessage('modals.main.settings.sections.background.effects.blur')} name='blur' min='0' max='100' default='0' display='%' category='background' element='#backgroundImage' />
<Slider title={getMessage('modals.main.settings.sections.background.effects.brightness')} name='brightness' min='0' max='100' default='90' display='%' category='background' element='#backgroundImage' />
<br/><br/>
<Dropdown label={getMessage('modals.main.settings.sections.background.effects.filters.title')} name='backgroundFilter' category='background' element='#backgroundImage'>
<Slider title={getMessage('modals.main.settings.sections.background.effects.blur')} name='blur' min='0' max='100' default='0' display='%' marks={values('background')} category='background' element='#backgroundImage' />
<Slider title={getMessage('modals.main.settings.sections.background.effects.brightness')} name='brightness' min='0' max='100' default='90' display='%' marks={values('background')} category='background' element='#backgroundImage' />
<br/>
<Dropdown label={getMessage('modals.main.settings.sections.background.effects.filters.title')} name='backgroundFilter' onChange={(value) => this.setState({ backgroundFilter: value })} category='background' element='#backgroundImage'>
<option value='none'>None</option>
<option value='grayscale'>{getMessage('modals.main.settings.sections.background.effects.filters.grayscale')}</option>
<option value='sepia'>{getMessage('modals.main.settings.sections.background.effects.filters.sepia')}</option>
<option value='invert'>{getMessage('modals.main.settings.sections.background.effects.filters.invert')}</option>
<option value='saturate'>{getMessage('modals.main.settings.sections.background.effects.filters.saturate')}</option>
<option value='contrast'>{getMessage('modals.main.settings.sections.background.effects.filters.contrast')}</option>
</Dropdown>
<Slider title={getMessage('modals.main.settings.sections.background.effects.filters.amount')} name='backgroundFilterAmount' min='0' max='100' default='0' display='%' category='background' element='#backgroundImage' />
{this.state.backgroundFilter !== 'none' ?
<Slider title={getMessage('modals.main.settings.sections.background.effects.filters.amount')} name='backgroundFilterAmount' min='0' max='100' default='0' display='%' marks={values('background')} category='background' element='#backgroundImage' />
: null}
</>
);
}

6
src/components/modals/main/settings/sections/background/Custom.jsx
View File

@@ -2,6 +2,7 @@ import variables from 'modules/variables';
import { PureComponent, Fragment } from 'react';
import { toast } from 'react-toastify';
import { Cancel } from '@mui/icons-material';
import { TextField } from '@mui/material';
import Checkbox from '../../Checkbox';
import FileUpload from '../../FileUpload';
@@ -96,16 +97,17 @@ export default class CustomSettings extends PureComponent {
<p>{this.getMessage('modals.main.settings.sections.background.source.custom_background')} <span className='modalLink' onClick={this.resetCustom}>{this.getMessage('modals.main.settings.buttons.reset')}</span></p>
{this.state.customBackground.map((_url, index) => (
<Fragment key={index}>
<input type='text' value={this.state.customBackground[index]} onChange={(e) => this.customBackground(e, true, index)} autoComplete='off' autoCorrect='off' autoCapitalize='off' spellCheck={false}/>
<TextField value={this.state.customBackground[index]} onChange={(e) => this.customBackground(e, true, index)} autoComplete='off' autoCorrect='off' autoCapitalize='off' spellCheck={false} varient='outlined' />
{this.state.customBackground.length > 1 ? <button className='cleanButton' onClick={() => this.modifyCustomBackground('remove', index)}>
<Cancel/>
</button> : null}
<span className='modalLink' onClick={() => this.uploadCustombackground(index)}>{this.getMessage('modals.main.settings.sections.background.source.upload')}</span>
{this.videoCustomSettings(index)}
<br/><br/>
</Fragment>
))}
<br/><br/>
<button className='uploadbg' onClick={() => this.modifyCustomBackground('add')}>{this.getMessage('modals.main.settings.sections.background.source.add_background')}</button>
<br/><br/>
<FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif, video/mp4, video/webm, video/ogg' loadFunction={(e) => this.customBackground(e, false, this.state.currentBackgroundIndex)} />
{this.props.interval}
</ul>