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

perf: improve dropdowns

Browse Source
This commit is contained in:
David Ralph
2021-03-23 12:23:21 +00:00
parent f3eb2c4cdb
commit b4e1d00633
7 changed files with 45 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/modals/main/scss/settings/_dropdown.scss
View File

@@ -1,17 +1,11 @@
.dropdown {
select {
margin-left: 10px;
width: 120px;
color: var(--modal-text);
background: var(--sidebar);
border: none;
padding: 10px 10px;
border-radius: 5px;
}
select#language {
float: right;
}
select {
margin-left: 10px;
width: 120px;
color: var(--modal-text);
background: var(--sidebar);
border: none;
padding: 10px 10px;
border-radius: 5px;
}
// firefox dropdown

10
src/components/modals/main/settings/Dropdown.jsx
View File

@@ -9,7 +9,7 @@ export default class Dropdown extends React.PureComponent {
}
getLabel() {
return this.props.label ? <label htmlFor={this.props.name}>{this.props.label}</label> : null;
return this.props.label ? <label>{this.props.label}</label> : null;
}
onChange(value) {
@@ -28,11 +28,9 @@ export default class Dropdown extends React.PureComponent {
return (
<>
{this.getLabel()}
<div className='dropdown' style={{ display: 'inline' }}>
<select name={this.props.name} value={this.state.value} onChange={(e) => this.onChange(e.target.value)}>
{this.props.children}
</select>
</div>
<select value={this.state.value} onChange={(e) => this.onChange(e.target.value)}>
{this.props.children}
</select>
</>
);
}

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

@@ -39,20 +39,20 @@ export default function AppearanceSettings() {
<Checkbox name='fontGoogle' text={appearance.font.google} />
<Dropdown label='Font Weight' name='fontweight'>
{/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
<option className='choices' value='100'>Thin</option>
<option className='choices' value='200'>Extra-Light</option>
<option className='choices' value='300'>Light</option>
<option className='choices' value='400'>Normal</option>
<option className='choices' value='500'>Medium</option>
<option className='choices' value='600'>Semi-Bold</option>
<option className='choices' value='700'>Bold</option>
<option className='choices' value='800'>Extra-Bold</option>
<option value='100'>Thin</option>
<option value='200'>Extra-Light</option>
<option value='300'>Light</option>
<option value='400'>Normal</option>
<option value='500'>Medium</option>
<option value='600'>Semi-Bold</option>
<option value='700'>Bold</option>
<option value='800'>Extra-Bold</option>
</Dropdown>
<br/><br/>
<Dropdown label='Font Style' name='fontstyle'>
<option className='choices' value='normal'>Normal</option>
<option className='choices' value='italic'>Italic</option>
<option className='choices' value='oblique'>Oblique</option>
<option value='normal'>Normal</option>
<option value='italic'>Italic</option>
<option value='oblique'>Oblique</option>
</Dropdown>
<h3>{appearance.accessibility.title}</h3>

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

@@ -213,8 +213,8 @@ export default class BackgroundSettings extends React.PureComponent {
<h3>{background.source.title}</h3>
<Dropdown label={background.source.api} name='backgroundAPI'>
<option className='choices' value='mue'>Mue</option>
<option className='choices' value='unsplash'>Unsplash</option>
<option value='mue'>Mue</option>
<option value='unsplash'>Unsplash</option>
</Dropdown>
{/* <Text title={background.source.custom_url} name='customBackground' /> */ }
<ul>

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

@@ -14,8 +14,8 @@ export default function LanguageSettings() {
<Radio name='language' options={languages} />
<br/>
<Dropdown label={language.quote} name='quotelanguage'>
<option className='choices' value='English'>English</option>
<option className='choices' value='French'>Français</option>
<option value='English'>English</option>
<option value='French'>Français</option>
</Dropdown>
</>
);

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

@@ -62,14 +62,12 @@ export default class SearchSettings extends React.PureComponent {
<h2>{search.title}</h2>
<Switch name='searchBar' text={language.enabled} />
<Checkbox name='voiceSearch' text={search.voice_search} />
<ul>
<Dropdown label={search.search_engine} name='searchEngine' onChange={(value) => this.setSearchEngine(value)}>
{searchEngines.map((engine) =>
<option key={engine.name} className='choices' value={engine.settingsName}>{engine.name}</option>
)}
<option className='choices' value='custom'>{search.custom.split(' ')[0]}</option>
</Dropdown>
</ul>
<Dropdown label={search.search_engine} name='searchEngine' onChange={(value) => this.setSearchEngine(value)}>
{searchEngines.map((engine) =>
<option key={engine.name} value={engine.settingsName}>{engine.name}</option>
)}
<option value='custom'>{search.custom.split(' ')[0]}</option>
</Dropdown>
<ul id='searchEngineInput' style={{ display: 'none' }}>
<p style={{ 'marginTop': '0px' }}>{search.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{language.reset}</span></p>
<input type='text' id='customSearchEngine'></input>

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

@@ -71,16 +71,16 @@ export default class TimeSettings extends React.PureComponent {
<>
<br/>
<Dropdown label={time.date.short_format} name='dateFormat'>
<option className='choices' value='DMY'>DMY</option>
<option className='choices' value='MDY'>MDY</option>
<option className='choices' value='YMD'>YMD</option>
<option value='DMY'>DMY</option>
<option value='MDY'>MDY</option>
<option value='YMD'>YMD</option>
</Dropdown>
<br/><br/>
<Dropdown label={time.date.short_separator.title} name='shortFormat'>
<option className='choices' value='dots'>{time.date.short_separator.dots}</option>
<option className='choices' value='dash'>{time.date.short_separator.dash}</option>
<option className='choices' value='gaps'>{time.date.short_separator.gaps}</option>
<option className='choices' value='slashes'>{time.date.short_separator.slashes}</option>
<option value='dots'>{time.date.short_separator.dots}</option>
<option value='dash'>{time.date.short_separator.dash}</option>
<option value='gaps'>{time.date.short_separator.gaps}</option>
<option value='slashes'>{time.date.short_separator.slashes}</option>
</Dropdown>
</>
);
@@ -95,17 +95,17 @@ export default class TimeSettings extends React.PureComponent {
<h2>{time.title}</h2>
<Switch name='time' text={this.language.enabled} />
<Dropdown label='Type' name='timeType' onChange={(value) => this.setState({ timeType: value })}>
<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>
<option value='digital'>{time.digital.title}</option>
<option value='analogue'>{time.analogue.title}</option>
<option value='percentageComplete'>{time.percentage_complete}</option>
</Dropdown>
{timeSettings}
<h3>{time.date.title}</h3>
<Switch name='date' text={this.language.enabled} />
<Dropdown label='Type' name='dateType' onChange={(value) => this.setState({ dateType: value })}>
<option className='choices' value='long'>Long</option>
<option className='choices' value='short'>Short</option>
<option value='long'>Long</option>
<option value='short'>Short</option>
</Dropdown>
<br/>
{dateSettings}