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

feat: new settings tab header, update keybinds and widget order ui 

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
This commit is contained in:
David Ralph 2021-09-26 18:03:32 +01:00
parent bc9f68e0c1
commit e7dc9f04d1
18 changed files with 138 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/modals/main/scss/index.scss
View File

@ -118,7 +118,8 @@ span.modalLink {
}
h2 {
font-size: 1.5rem;
font-size: 2rem;
margin-bottom: 0;
}
h3 {

1
src/components/modals/main/scss/modules/_tab-content.scss
View File

@ -31,7 +31,6 @@
(min-width: 1400px) {
.tab-content {
left: 350px;
top: 75px;
}
}

4
src/components/modals/main/scss/settings/_main.scss
View File

@ -83,3 +83,7 @@ input {
h4 {
cursor: pointer;
}
.keybind-table {
text-align: left;
}

3
src/components/modals/main/scss/settings/modules/tabs/_order.scss
View File

@ -15,8 +15,7 @@
}
&:hover {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.15);
transition: 0.3s;
background: var(--tab-active) !important;
}
}

22
src/components/modals/main/settings/Header.jsx Normal file
View File

@ -0,0 +1,22 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import Slider from './Slider';
import Switch from './Switch';
export default class Header extends PureComponent {
render() {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
return (
<>
<h2>{this.props.title}</h2>
<Switch name={this.props.setting} text={getMessage('modals.main.settings.enabled')} category={this.props.category} element={this.props.element || null} />
{this.props.zoomSetting ?
<><Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name={this.props.zoomSetting} min='10' max='400' default='100' display='%' category={this.props.category} /><br/><br/></>
: null}
</>
);
}
}

5
src/components/modals/main/settings/KeybindInput.jsx
View File

@ -1,15 +1,16 @@
import variables from 'modules/variables';
import { Cancel } from '@mui/icons-material';
export default function KeybindInput(props) {
const value = props.state[props.setting];
const getButton = () => {
if (!value) {
return null;
return <button className='cleanButton' style={{ visibility: 'hidden' }} onClick={() => props.action('reset', props.setting)}><Cancel/></button>;;
} else if (value === variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.keybinds.recording')) {
return <span className='modalLink' onClick={() => props.action('cancel', props.setting)}>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.sections.advanced.reset_modal.cancel')}</span>
} else {
return <span className='modalLink' onClick={() => props.action('reset', props.setting)}>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.buttons.reset')}</span>;
return <button className='cleanButton' onClick={() => props.action('reset', props.setting)}><Cancel/></button>;
}
}

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

@ -1,10 +1,9 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import Header from '../Header';
import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown';
import Switch from '../Switch';
import Slider from '../Slider';
export default class DateSettings extends PureComponent {
constructor() {
@ -52,8 +51,7 @@ export default class DateSettings extends PureComponent {
return (
<>
<h2>{getMessage('modals.main.settings.sections.time.date.title')}</h2>
<Switch name='date' text={getMessage('modals.main.settings.enabled')} category='date' element='.date'/>
<Header title={getMessage('modals.main.settings.sections.time.date.title')} category='date' element='.date' zoomSetting='zoomDate' category='date'/>
<Dropdown label={getMessage('modals.main.settings.sections.time.type')} name='dateType' onChange={(value) => this.setState({ dateType: value })} category='date'>
<option value='long'>{getMessage('modals.main.settings.sections.time.date.type.long')}</option>
<option value='short'>{getMessage('modals.main.settings.sections.time.date.type.short')}</option>
@ -62,7 +60,6 @@ export default class DateSettings extends PureComponent {
<Checkbox name='datezero' text={getMessage('modals.main.settings.sections.time.digital.zero')} category='date'/>
<Checkbox name='weeknumber' text={getMessage('modals.main.settings.sections.time.date.week_number')} category='date'/>
{dateSettings}
<Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomDate' min='10' max='400' default='100' display='%' category='date'/>
</>
);
}

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

@ -1,10 +1,10 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import Header from '../Header';
import Checkbox from '../Checkbox';
import Switch from '../Switch';
import Text from '../Text';
import Slider from '../Slider';
export default class GreetingSettings extends PureComponent {
constructor() {
@ -23,22 +23,19 @@ export default class GreetingSettings extends PureComponent {
}
render() {
const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
const languagecode = variables.languagecode;
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
return (
<>
<h2>{getMessage(languagecode, 'modals.main.settings.sections.greeting.title')}</h2>
<Switch name='greeting' text={getMessage(languagecode, 'modals.main.settings.enabled')} category='greeting' element='.greeting'/>
<Checkbox name='events' text={getMessage(languagecode, 'modals.main.settings.sections.greeting.events')} category='greeting'/>
<Checkbox name='defaultGreetingMessage' text={getMessage(languagecode, 'modals.main.settings.sections.greeting.default')} category='greeting'/>
<Text title={getMessage(languagecode, 'modals.main.settings.sections.greeting.name')} name='greetingName' category='greeting'/>
<Slider title={getMessage(languagecode, 'modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomGreeting' min='10' max='400' default='100' display='%' category='greeting' />
<Header title={getMessage('modals.main.settings.sections.greeting.title')} category='greeting' element='.greeting' zoomSetting='zoomGreeting' category='greeting'/>
<Checkbox name='events' text={getMessage('modals.main.settings.sections.greeting.events')} category='greeting'/>
<Checkbox name='defaultGreetingMessage' text={getMessage('modals.main.settings.sections.greeting.default')} category='greeting'/>
<Text title={getMessage('modals.main.settings.sections.greeting.name')} name='greetingName' category='greeting'/>
<h3>{getMessage(languagecode, 'modals.main.settings.sections.greeting.birthday')}</h3>
<Switch name='birthdayenabled' text={getMessage(languagecode, 'modals.main.settings.enabled')} category='greeting'/>
<Checkbox name='birthdayage' text={getMessage(languagecode, 'modals.main.settings.sections.greeting.birthday_age')} category='greeting'/>
<p>{getMessage(languagecode, 'modals.main.settings.sections.greeting.birthday_date')}</p>
<h3>{getMessage('modals.main.settings.sections.greeting.birthday')}</h3>
<Switch name='birthdayenabled' text={getMessage('modals.main.settings.enabled')} category='greeting'/>
<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)}/>
</>
);

43
src/components/modals/main/settings/sections/Keybinds.jsx
View File

@ -29,18 +29,25 @@ export default class KeybindSettings extends PureComponent {
this.forceUpdate();
let keys = '';
let previouskey = '';
this.keydown = document.addEventListener('keydown', (event) => {
if (event.key === previouskey) {
return;
}
if (keys === '') {
keys = event.key;
} else {
keys = `${keys}+${event.key}`;
}
previouskey = event.key
});
this.keyup = document.addEventListener('keyup', () => {
document.removeEventListener('keydown', this.keydown);
const keybinds = this.state.keybinds;
keybinds[type] = keys;
keybinds[type] = keys.split('+').slice(0, 4).join('+');
localStorage.setItem('keybinds', JSON.stringify(keybinds));
this.setState({
keybinds: JSON.parse(localStorage.getItem('keybinds')) || {}
@ -97,18 +104,28 @@ export default class KeybindSettings extends PureComponent {
<>
<h2>{getMessage(languagecode, 'modals.main.settings.sections.keybinds.title')}</h2>
<Switch name='keybindsEnabled' text={getMessage(languagecode, 'modals.main.settings.enabled')} element='.other' />
<KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.background.favourite')} state={this.state.keybinds} setting='favouriteBackground' action={(type, e) => this.action(type, e)}/>
<KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.background.maximise')} state={this.state.keybinds} setting='maximiseBackground' action={(type, e) => this.action(type, e)}/>
<KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.background.download')} state={this.state.keybinds} setting='downloadBackground' action={(type, e) => this.action(type, e)}/>
<KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.background.show_info')} state={this.state.keybinds} setting='showBackgroundInformation' action={(type, e) => this.action(type, e)}/>
<KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.quote.favourite')} state={this.state.keybinds} setting='favouriteQuote' action={(type, e) => this.action(type, e)}/>
<KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.quote.copy')} state={this.state.keybinds} setting='copyQuote' action={(type, e) => this.action(type, e)}/>
<KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.quote.tweet')} state={this.state.keybinds} setting='tweetQuote' action={(type, e) => this.action(type, e)}/>
<KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.notes.pin')} state={this.state.keybinds} setting='pinNotes' action={(type, e) => this.action(type, e)}/>
<KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.notes.copy')} state={this.state.keybinds} setting='copyNotes' action={(type, e) => this.action(type, e)}/>
<KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.search')} state={this.state.keybinds} setting='focusSearch' action={(type, e) => this.action(type, e)}/>
<KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.quicklinks')} state={this.state.keybinds} setting='toggleQuicklinks' action={(type, e) => this.action(type, e)}/>
<KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.modal')} state={this.state.keybinds} setting='toggleModal' action={(type, e) => this.action(type, e)}/>
<table className='keybind-table'>
<tr>
<th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.background.favourite')} state={this.state.keybinds} setting='favouriteBackground' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.background.maximise')} state={this.state.keybinds} setting='maximiseBackground' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.background.download')} state={this.state.keybinds} setting='downloadBackground' action={(type, e) => this.action(type, e)}/></th>
</tr>
<tr>
<th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.background.show_info')} state={this.state.keybinds} setting='showBackgroundInformation' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.quote.favourite')} state={this.state.keybinds} setting='favouriteQuote' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.quote.copy')} state={this.state.keybinds} setting='copyQuote' action={(type, e) => this.action(type, e)}/></th>
</tr>
<tr>
<th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.quote.tweet')} state={this.state.keybinds} setting='tweetQuote' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.notes.pin')} state={this.state.keybinds} setting='pinNotes' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.notes.copy')} state={this.state.keybinds} setting='copyNotes' action={(type, e) => this.action(type, e)}/></th>
</tr>
<tr>
<th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.search')} state={this.state.keybinds} setting='focusSearch' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.quicklinks')} state={this.state.keybinds} setting='toggleQuicklinks' action={(type, e) => this.action(type, e)}/></th>
<th><KeybindInput name={getMessage(languagecode, 'modals.main.settings.sections.keybinds.modal')} state={this.state.keybinds} setting='toggleModal' action={(type, e) => this.action(type, e)}/></th>
</tr>
</table>
</>
);
}

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

@ -3,14 +3,13 @@ import { PureComponent, Fragment } from 'react';
import { Cancel } from '@mui/icons-material';
import { toast } from 'react-toastify';
import Switch from '../Switch';
import Header from '../Header';
import Slider from '../Slider';
import EventBus from 'modules/helpers/eventbus';
export default class Message extends PureComponent {
getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text);
languagecode = variables.languagecode;
getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
constructor() {
super();
@ -62,9 +61,8 @@ export default class Message extends PureComponent {
render() {
return (
<>
<h2>{this.getMessage(this.languagecode, 'modals.main.settings.sections.message.title')}</h2>
<Switch name='message' text={this.getMessage(this.languagecode, 'modals.main.settings.enabled')} category='message' element='.message'/>
<p>{this.getMessage(this.languagecode, 'modals.main.settings.sections.message.text')}</p>
<Header title={this.getMessage('modals.main.settings.sections.message.title')} category='message' element='.message' zoomSetting='zoomMessage' category='message'/>
<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>
@ -74,8 +72,8 @@ export default class Message extends PureComponent {
<br/><br/>
</Fragment>
))}
<button className='uploadbg' onClick={() => this.modifyMessage('add')}>{this.getMessage(this.languagecode, 'modals.main.settings.sections.message.add')}</button>
<Slider title={this.getMessage(this.languagecode, 'modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomMessage' min='10' max='400' default='100' display='%' category='message' />
<button className='uploadbg' onClick={() => this.modifyMessage('add')}>{this.getMessage('modals.main.settings.sections.message.add')}</button>
<Slider title={this.getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomMessage' min='10' max='400' default='100' display='%' category='message' />
</>
);
}

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

@ -1,28 +1,33 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import Header from '../Header';
import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown';
import Slider from '../Slider';
export default function NavbarSettings() {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
export default class Navbar extends PureComponent {
render() {
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
return (
<>
<h2>{getMessage('modals.main.settings.sections.appearance.navbar.title')}</h2>
<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' />
<Checkbox name='favouriteEnabled' text={getMessage('modals.main.settings.sections.background.buttons.favourite')} category='navbar' />
<Dropdown label={getMessage('modals.main.settings.sections.appearance.navbar.refresh')} name='refresh' category='navbar'>
<option value='false'>{getMessage('modals.main.settings.sections.appearance.navbar.refresh_options.none')}</option>
<option value='background'>{getMessage('modals.main.settings.sections.background.title')}</option>
<option value='quote'>{getMessage('modals.main.settings.sections.quote.title')}</option>
<option value='quotebackground'>{getMessage('modals.main.settings.sections.quote.title')} + {getMessage('modals.main.settings.sections.background.title')}</option>
{/* 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' />
</>
);
return (
<>
<Header title={getMessage('modals.main.settings.sections.appearance.navbar.title')} />
<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' />
<Checkbox name='favouriteEnabled' text={getMessage('modals.main.settings.sections.background.buttons.favourite')} category='navbar' />
<Dropdown label={getMessage('modals.main.settings.sections.appearance.navbar.refresh')} name='refresh' category='navbar'>
<option value='false'>{getMessage('modals.main.settings.sections.appearance.navbar.refresh_options.none')}</option>
<option value='background'>{getMessage('modals.main.settings.sections.background.title')}</option>
<option value='quote'>{getMessage('modals.main.settings.sections.quote.title')}</option>
<option value='quotebackground'>{getMessage('modals.main.settings.sections.quote.title')} + {getMessage('modals.main.settings.sections.background.title')}</option>
{/* 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' />
</>
);
}
}

18
src/components/modals/main/settings/sections/Order.jsx
View File

@ -35,22 +35,12 @@ export default class OrderSettings extends PureComponent {
};
}
// based on https://stackoverflow.com/a/48301905
arrayMove(array, oldIndex, newIndex) {
if (oldIndex === newIndex) {
return array;
}
const result = Array.from(array);
const [removed] = result.splice(oldIndex, 1);
result.splice(newIndex, 0, removed);
const newArray = [...array];
const target = newArray[oldIndex];
const inc = newIndex < oldIndex ? -1 : 1;
for (let i = oldIndex; i !== newIndex; i += inc) {
newArray[i] = newArray[i + inc];
}
newArray[newIndex] = target;
return newArray;
return result;
}
onSortEnd = ({ oldIndex, newIndex }) => {

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

@ -1,6 +1,6 @@
import variables from 'modules/variables';
import Switch from '../Switch';
import Header from '../Header';
import Checkbox from '../Checkbox';
import Slider from '../Slider';
@ -9,8 +9,7 @@ export default function QuickLinks() {
return (
<>
<h2>{getMessage('modals.main.settings.sections.quicklinks.title')}</h2>
<Switch name='quicklinksenabled' text={getMessage('modals.main.settings.enabled')} category='quicklinks' element='.quicklinks-container'/>
<Header title={getMessage('modals.main.settings.sections.quicklinks.title')} category='quicklinks' element='.quicklinks-container' zoomSetting='zoomQuicklinks' category='quicklinks'/>
<Checkbox name='quicklinksText' text={getMessage('modals.main.settings.sections.quicklinks.text_only')} category='quicklinks'/>
<Checkbox name='quicklinksddgProxy' text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')} category='quicklinks'/>
<Checkbox name='quicklinksnewtab' text={getMessage('modals.main.settings.sections.quicklinks.open_new')} category='quicklinks'/>

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

@ -2,9 +2,8 @@ import variables from 'modules/variables';
import { PureComponent, Fragment } from 'react';
import { Cancel } from '@mui/icons-material';
import Header from '../Header';
import Checkbox from '../Checkbox';
import Switch from '../Switch';
import Slider from '../Slider';
import Dropdown from '../Dropdown';
export default class QuoteSettings extends PureComponent {
@ -120,8 +119,7 @@ export default class QuoteSettings extends PureComponent {
return (
<>
<h2>{this.getMessage('modals.main.settings.sections.quote.title')}</h2>
<Switch name='quote' text={this.getMessage('modals.main.settings.enabled')} category='quote' element='.quotediv' />
<Header title={this.getMessage('modals.main.settings.sections.quote.title')} category='quote' element='.quotediv' zoomSetting='zoomQuote' category='quote'/>
<Checkbox name='authorLink' text={this.getMessage('modals.main.settings.sections.quote.author_link')} element='.other' />
<Dropdown label={this.getMessage('modals.main.settings.sections.background.type.title')} name='quoteType' onChange={(value) => this.setState({ quoteType: value })} category='quote'>
{this.marketplaceType()}
@ -129,7 +127,6 @@ export default class QuoteSettings extends PureComponent {
<option value='custom'>{this.getMessage('modals.main.settings.sections.quote.custom')}</option>
</Dropdown>
{customSettings}
<Slider title={this.getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomQuote' min='10' max='400' default='100' display='%' category='quote' />
<h3>{this.getMessage('modals.main.settings.sections.quote.buttons.title')}</h3>
<Checkbox name='copyButton' text={this.getMessage('modals.main.settings.sections.quote.buttons.copy')} category='quote'/>

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

@ -2,6 +2,7 @@ import variables from 'modules/variables';
import { PureComponent } from 'react';
import { toast } from 'react-toastify';
import Header from '../Header';
import Dropdown from '../Dropdown';
import Checkbox from '../Checkbox';
import Switch from '../Switch';
@ -72,6 +73,7 @@ export default class SearchSettings extends PureComponent {
render() {
return (
<>
<Header title={this.getMessage('modals.main.settings.sections.search.title')} category='widgets'/>
<h2>{this.getMessage('modals.main.settings.sections.search.title')}</h2>
<Switch name='searchBar' text={this.getMessage('modals.main.settings.enabled')} category='widgets' />
{/* not supported on firefox */}

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

@ -1,11 +1,10 @@
import variables from 'modules/variables';
import { PureComponent } from 'react';
import Header from '../Header';
import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown';
import Switch from '../Switch';
import Radio from '../Radio';
import Slider from '../Slider';
export default class TimeSettings extends PureComponent {
constructor() {
@ -60,17 +59,13 @@ export default class TimeSettings extends PureComponent {
return (
<>
<h2>{getMessage('modals.main.settings.sections.time.title')}</h2>
<Switch name='time' text={getMessage('modals.main.settings.enabled')} category='clock' element='.clock-container' />
<Header title={getMessage('modals.main.settings.sections.time.title')} category='clock' element='.clock-container' zoomSetting='zoomClock' category='clock'/>
<Dropdown label={getMessage('modals.main.settings.sections.time.type')} name='timeType' onChange={(value) => this.setState({ timeType: value })} category='clock'>
<option value='digital'>{getMessage('modals.main.settings.sections.time.digital.title')}</option>
<option value='analogue'>{getMessage('modals.main.settings.sections.time.analogue.title')}</option>
<option value='percentageComplete'>{getMessage('modals.main.settings.sections.time.percentage_complete')}</option>
</Dropdown>
{timeSettings}
{this.state.timeType !== 'analogue' ?
<Slider title={getMessage('modals.main.settings.sections.appearance.accessibility.widget_zoom')} name='zoomClock' min='10' max='400' default='100' display='%' category='clock'/>
: null}
</>
);
}

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

@ -3,11 +3,11 @@ import { PureComponent, Fragment } from 'react';
import { toast } from 'react-toastify';
import { Cancel } from '@mui/icons-material';
import Header from '../../Header';
import Checkbox from '../../Checkbox';
import Dropdown from '../../Dropdown';
import FileUpload from '../../FileUpload';
import Slider from '../../Slider';
import Switch from '../../Switch';
import Radio from '../../Radio';
import ColourSettings from './Colour';
@ -156,7 +156,7 @@ export default class BackgroundSettings extends PureComponent {
const interval = (
<>
<br/><br/>
<br/><br/>
<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>
@ -191,25 +191,23 @@ export default class BackgroundSettings extends PureComponent {
);
const customSettings = (
<>
<ul>
<p>{getMessage('modals.main.settings.sections.background.source.custom_background')} <span className='modalLink' onClick={this.resetCustom}>{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)}></input>
{this.state.customBackground.length > 1 ? <button className='cleanButton' onClick={() => this.modifyCustomBackground('remove', index)}>
<Cancel/>
</button> : null}
<span className='modalLink' onClick={() => this.uploadCustombackground(index)}>{getMessage('modals.main.settings.sections.background.source.upload')}</span>
{this.videoCustomSettings(index)}
<br/><br/>
</Fragment>
))}
<button className='uploadbg' onClick={() => this.modifyCustomBackground('add')}>{getMessage('modals.main.settings.sections.background.source.add_background')}</button>
<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)} />
{interval}
</ul>
</>
<ul>
<p>{getMessage('modals.main.settings.sections.background.source.custom_background')} <span className='modalLink' onClick={this.resetCustom}>{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)}></input>
{this.state.customBackground.length > 1 ? <button className='cleanButton' onClick={() => this.modifyCustomBackground('remove', index)}>
<Cancel/>
</button> : null}
<span className='modalLink' onClick={() => this.uploadCustombackground(index)}>{getMessage('modals.main.settings.sections.background.source.upload')}</span>
{this.videoCustomSettings(index)}
<br/><br/>
</Fragment>
))}
<button className='uploadbg' onClick={() => this.modifyCustomBackground('add')}>{getMessage('modals.main.settings.sections.background.source.add_background')}</button>
<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)} />
{interval}
</ul>
);
switch (this.state.backgroundType) {
@ -224,8 +222,7 @@ export default class BackgroundSettings extends PureComponent {
return (
<>
<h2>{getMessage('modals.main.settings.sections.background.title')}</h2>
<Switch name='background' text={getMessage('modals.main.settings.enabled')} category='background' element='#backgroundImage' />
<Header title={getMessage('modals.main.settings.sections.background.title')} category='background' element='#backgroundImage'/>
<Checkbox name='ddgProxy' text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')} element='.other' />
<Checkbox name='bgtransition' text={getMessage('modals.main.settings.sections.background.transition')} element='.other' />
<Checkbox name='photoInformation' text={getMessage('modals.main.settings.sections.background.photo_information')} element='.other' />

5
src/components/modals/main/tabs/backend/Tabs.jsx
View File

@ -26,12 +26,9 @@ export default class Tabs extends PureComponent {
};
render() {
const language = variables.language;
const languagecode = variables.languagecode;
let className = 'sidebar';
let tabClass = 'tab-content';
let optionsText = (<h1>{language.getMessage(languagecode, 'modals.main.title')}</h1>);
let optionsText = (<h1>{variables.language.getMessage(variables.languagecode, 'modals.main.title')}</h1>);
if (this.props.navbar) {
className = 'modalNavbar';