Making language switcher a styled select list
This commit is contained in:
parent
12436fbd9e
commit
6b8a92df8b
@ -56,7 +56,7 @@
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
& svg {
|
||||
& a svg {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
|
@ -5,10 +5,14 @@ exports[`LocaleSwitcher rendering 1`] = `
|
||||
<Trans>
|
||||
Language
|
||||
</Trans>
|
||||
<select
|
||||
<div
|
||||
className="switcher"
|
||||
onChange={[Function]}
|
||||
value="en"
|
||||
/>
|
||||
>
|
||||
<select
|
||||
onChange={[Function]}
|
||||
value="en"
|
||||
/>
|
||||
<SvgMock />
|
||||
</div>
|
||||
</label>
|
||||
`;
|
||||
|
@ -3,6 +3,7 @@ import { translate, Trans } from 'react-i18next';
|
||||
import i18n from 'i18next';
|
||||
|
||||
import style from './style.css';
|
||||
import ExpandIcon from 'feather-icons/dist/icons/chevrons-down.svg';
|
||||
|
||||
import locales from 'locales';
|
||||
|
||||
@ -52,11 +53,14 @@ class LocaleSwitcher extends React.PureComponent {
|
||||
|
||||
return <label>
|
||||
<Trans>Language</Trans>
|
||||
<select className={ style.switcher } value={ current } ref={ this.localeSelector } onChange={ this.handleSelectChange }>
|
||||
{ Object.keys(locales).map(locale => (
|
||||
<option value={ locale } key={ locale }>{ i18n.getFixedT(locale)('/displayName') }</option>
|
||||
)) }
|
||||
</select>
|
||||
<div className={ style.switcher }>
|
||||
<select value={ current } ref={ this.localeSelector } onChange={ this.handleSelectChange }>
|
||||
{ Object.keys(locales).map(locale => (
|
||||
<option value={ locale } key={ locale }>{ i18n.getFixedT(locale)('/displayName') }</option>
|
||||
)) }
|
||||
</select>
|
||||
<ExpandIcon/>
|
||||
</div>
|
||||
</label>;
|
||||
}
|
||||
}
|
||||
|
@ -1,3 +1,11 @@
|
||||
.switcher {
|
||||
margin-left: 1ex;
|
||||
@import url('../../globals.css');
|
||||
|
||||
:root {
|
||||
--control-gradient: var(--color-tan) var(--gradient-tan);
|
||||
--select-height: 2.4rem;
|
||||
--select-width: 10rem;
|
||||
}
|
||||
|
||||
.switcher {
|
||||
@apply --fancy-select;
|
||||
}
|
||||
|
@ -11,6 +11,9 @@
|
||||
--gradient-green: linear-gradient(to bottom,
|
||||
var(--color-green) 0%,
|
||||
color(var(--color-green) shade(40%)) 100%);
|
||||
--gradient-tan: linear-gradient(to bottom,
|
||||
var(--color-tan) 0%,
|
||||
color(var(--color-tan) shade(40%)) 100%);
|
||||
|
||||
--header-height: 6rem;
|
||||
--content-margin: 2rem;
|
||||
|
Loading…
Reference in New Issue
Block a user