mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-04 13:42:11 +02:00
Code Issues Packages Projects Releases Wiki Activity

Dropdowns are now standalone class

Browse Source
This commit is contained in:
Serhat
2020-10-27 17:59:45 +03:00
parent 4cb5d1eaae
commit cc5fa542e1
4 changed files with 65 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/modals/settings/Dropdown.jsx Normal file
View File

@@ -0,0 +1,20 @@
import React from 'react';
export default class Dropdown extends React.PureComponent {
getLabel() {
return this.props.label ? <label htmlFor={this.props.name}>{this.props.label} </label> : null;
}
render() {
return (
<>
{this.getLabel()}
<div className='dropdown' style={{ display: 'inline' }}>
<select name={this.props.name} id={this.props.id} onChange={this.props.onChange}>
{this.props.children}
</select>
</div>
</>
);
}
}

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

@@ -1,6 +1,7 @@
import React from 'react';
import { toast } from 'react-toastify';
import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown';
import Section from '../Section';
export default class BackgroundSettings extends React.PureComponent {
@@ -160,13 +161,15 @@ export default class BackgroundSettings extends React.PureComponent {
<Checkbox name='refresh' text={this.props.language.background.refresh} />
</ul>
<ul>
<label htmlFor='backgroundapi'>{this.props.language.background.API} </label>
<label className='dropdown'>
<select className='select-css' 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>
</select>
</label>
<Dropdown
label={this.props.language.background.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>
</ul>
<ul>
<p>{this.props.language.background.blur} ({this.state.blur}%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.reset}</span></p>

23
src/components/modals/settings/sections/LanguageSettings.jsx
View File

@@ -1,18 +1,23 @@
import React from 'react';
import Dropdown from '../Dropdown';
export default class LanguageSettings extends React.PureComponent {
render() {
return (
<div className='section'>
<div className='section'>
<h4 htmlFor='language' className='nodropdown'>{this.props.language.language}</h4>
<select className='select-css' name='language' id='language' onChange={() => localStorage.setItem('language', document.getElementById('language').value)}>
<option className='choices' value='en'>English</option>
<option className='choices' value='nl'>Nederlands</option>
<option className='choices' value='fr'>Français</option>
<option className='choices' value='no'>Norsk</option>
<option className='choices' value='ru'>Pусский</option>
</select>
</div>
<Dropdown
name='language'
id='language'
onChange={() => localStorage.setItem('language', document.getElementById('language').value)}
>
<option className='choices' value='en'>English</option>
<option className='choices' value='nl'>Nederlands</option>
<option className='choices' value='fr'>Français</option>
<option className='choices' value='no'>Norsk</option>
<option className='choices' value='ru'>Pусский</option>
</Dropdown>
</div>
);
}
}

38
src/components/modals/settings/sections/SearchSettings.jsx
View File

@@ -2,6 +2,7 @@ import React from 'react';
import SettingsFunctions from '../../../../modules/settingsFunctions';
import { toast } from 'react-toastify';
import Section from '../Section';
import Dropdown from '../Dropdown';
const searchEngines = require('../../../../modules/searchEngines.json');
@@ -25,23 +26,26 @@ export default class SearchSettings extends React.PureComponent {
render() {
return (
<React.Fragment>
<Section title={this.props.language.searchbar.title} name='searchBar'>
<ul>
<label htmlFor='searchEngine'>{this.props.language.searchbar.searchengine} </label>
<select className='select-css' name='searchEngine' id='searchEngine' onChange={() => SettingsFunctions.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'>Custom</option>
</select>
</ul>
<ul id='searchEngineInput' style={{ display: 'none' }}>
<p style={{"marginTop": "0px"}}>{this.props.language.searchbar.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{this.props.language.reset}</span></p>
<input type='text' id='customSearchEngine'></input>
</ul>
</Section>
</React.Fragment>
<React.Fragment>
<Section title={this.props.language.searchbar.title} name='searchBar'>
<ul>
<Dropdown label={this.props.language.searchbar.searchengine}
name='searchEngine'
id='searchEngine'
onChange={() => SettingsFunctions.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'>Custom</option>
</Dropdown>
</ul>
<ul id='searchEngineInput' style={{ display: 'none' }}>
<p style={{ "marginTop": "0px" }}>{this.props.language.searchbar.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{this.props.language.reset}</span></p>
<input type='text' id='customSearchEngine'></input>
</ul>
</Section>
</React.Fragment>
);
}
}