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