Making language switcher a styled select list

This commit is contained in:
Jeff Avallone 2018-06-01 17:19:52 -04:00
parent 12436fbd9e
commit 6b8a92df8b
5 changed files with 31 additions and 12 deletions

View File

@ -56,7 +56,7 @@
text-decoration: underline;
}
& svg {
& a svg {
display: inline-block;
width: 1em;
height: 1em;

View File

@ -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>
`;

View File

@ -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>;
}
}

View File

@ -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;
}

View File

@ -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;