mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-11-30 02:32:58 +05:30
Добавлено уведомление в случае, если после фильтрации не осталось ни одного языка
This commit is contained in:
ErickSkrauch
parent
a523da215d
commit
ba6e997f65
@ -14,6 +14,11 @@ import icons from 'components/ui/icons.scss';
|
||||
import styles from './languageSwitcher.scss';
|
||||
import messages from './languageSwitcher.intl.json';
|
||||
|
||||
import thatFuckingPumpkin from './images/that_fucking_pumpkin.svg';
|
||||
import mayTheForceBeWithYou from './images/may_the_force_be_with_you.svg';
|
||||
import biteMyShinyMetalAss from './images/bite_my_shiny_metal_ass.svg';
|
||||
import iTookAnArrowInMyKnee from './images/i_took_an_arrow_in_my_knee.svg';
|
||||
|
||||
const improveTranslationUrl = 'http://ely.by/erickskrauch/posts/174943';
|
||||
const itemHeight = 51;
|
||||
|
||||
@ -24,7 +29,16 @@ class LanguageSwitcher extends Component {
|
||||
onClose: PropTypes.func,
|
||||
userLang: PropTypes.string,
|
||||
changeLang: PropTypes.func,
|
||||
langs: PropTypes.objectOf(PropTypes.object).isRequired,
|
||||
langs: PropTypes.objectOf(PropTypes.shape({
|
||||
name: PropTypes.string.isRequired,
|
||||
englishName: PropTypes.string.isRequired,
|
||||
progress: PropTypes.number.isRequired,
|
||||
isReleased: PropTypes.bool.isRequired,
|
||||
})).isRequired,
|
||||
emptyCaptions: PropTypes.arrayOf(PropTypes.shape({
|
||||
src: PropTypes.string.isRequired,
|
||||
caption: PropTypes.string.isRequired,
|
||||
})).isRequired,
|
||||
};
|
||||
|
||||
static contextTypes = {
|
||||
@ -39,11 +53,35 @@ class LanguageSwitcher extends Component {
|
||||
static defaultProps = {
|
||||
langs: LANGS,
|
||||
onClose() {},
|
||||
emptyCaptions: [
|
||||
{
|
||||
// Homestuck
|
||||
src: thatFuckingPumpkin,
|
||||
caption: 'That fucking pumpkin',
|
||||
},
|
||||
{
|
||||
// Star Wars
|
||||
src: mayTheForceBeWithYou,
|
||||
caption: 'May The Force Be With You',
|
||||
},
|
||||
{
|
||||
// Futurama
|
||||
src: biteMyShinyMetalAss,
|
||||
caption: 'Bite my shiny metal ass',
|
||||
},
|
||||
{
|
||||
// The Elder Scrolls V: Skyrim
|
||||
src: iTookAnArrowInMyKnee,
|
||||
caption: 'I took an arrow in my knee',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
render() {
|
||||
const {userLang, onClose} = this.props;
|
||||
const {userLang, onClose, emptyCaptions} = this.props;
|
||||
const isListEmpty = Object.keys(this.state.filteredLangs).length === 0;
|
||||
const firstLocale = Object.keys(this.state.filteredLangs)[0] || null;
|
||||
const emptyCaption = emptyCaptions[Math.floor(Math.random() * emptyCaptions.length)];
|
||||
|
||||
return (
|
||||
<div className={styles.languageSwitcher}>
|
||||
@ -78,6 +116,29 @@ class LanguageSwitcher extends Component {
|
||||
>
|
||||
{(items) => (
|
||||
<div className={styles.languagesList}>
|
||||
<div
|
||||
className={classNames(styles.emptyLanguagesListWrapper, {
|
||||
[styles.emptyLanguagesListVisible]: isListEmpty,
|
||||
})}
|
||||
style={{
|
||||
height: isListEmpty ? this.emptyListStateInner.clientHeight : 0,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
ref={(elem) => this.emptyListStateInner = elem}
|
||||
className={styles.emptyLanguagesList}
|
||||
>
|
||||
<img
|
||||
src={emptyCaption.src}
|
||||
alt={emptyCaption.caption}
|
||||
className={styles.emptyLanguagesListCaption}
|
||||
/>
|
||||
<div className={styles.emptyLanguagesListSubtitle}>
|
||||
<Message {...messages.weDoNotSupportThisLang} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{items.map(({key: locale, data: definition, style}) => (
|
||||
<li
|
||||
key={locale}
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 10 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 19 KiB |
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 237.77 14.18">
|
||||
<path d="M4.48,0.84L8.29,15H0.38V13H6.3L3.55,2.79H0.38v-2h4.1Zm5.27,6.1V0.84h1.17V5h5.29l2.32-4.15H20L16.6,6.94H9.76Zm6.85,2L20,15H18.55l-2.32-4.15H10.93V15H9.76V8.9H16.6Zm6.87-6.1,2.7,10,3.22-12h1.46L27,15H25.29L21.48,0.84h4.39l1.32,4.88H25.73L24.93,2.79H23.47ZM43.39,12.4L46,7.68h1.46L43.39,15H42.21l-4.1-7.34h1.46l2.64,4.73V0.84h1.17V12.4Zm6.74-5.46H56v2H50.12v-2Zm7,6.1v2H49V13h8.2ZM49,2.79v-2h8.2v2H49Zm16.45,0L62.87,15H61.4L58.62,0.84h1.32L62.14,12l2.2-11.18H68v2H66.82V15H65.65V2.79H65.4ZM77.6,8.9H76.43V13h2.93V8.72A8.47,8.47,0,0,1,77.6,8.9ZM75.26,15V6.94H77.6a7.07,7.07,0,0,0,1.76-.21V0.84h1.17V6.32a9.08,9.08,0,0,0,4.1-4.5V4.26a8.1,8.1,0,0,1-4.1,4.1V13h4.1v2H75.26Zm15-12.21L87.5,13h8.61L93.36,2.79H90.26ZM86.68,15L86.1,13,89.32,0.84h5L97.52,13l-0.59,2H86.68ZM99,2.78V0.84h8.2v2l-5,12.21h-1.46l5-12.21H99Zm13.18,2.94v4.39H111V5.72h1.17Zm-2.34-4.88v9.28h-1.17V0.84h1.17Zm4.69,4.88V15h-1.17V5.72h1.17Zm8.24-2.93L120.23,15h-1.46L116,0.84h1.32L119.49,12l2.2-11.18h3.66v2h-1.17V15H123V2.79h-0.25Zm18.35,4.15v2h-6.74v-2h6.74Zm-5.79-4.15L134.08,5h-1.46L135,0.84h5.57L142.87,5H141.4l-1.24-2.2h-4.84ZM135,15l-2.34-4.15h1.46l1.24,2.2h4.84l1.24-2.2h1.46L140.52,15H135ZM151.6,2.79L149.07,15H147.6L144.82,0.84h1.32L148.34,12l2.2-11.18h3.66v2H153V15h-1.17V2.79H151.6Zm11.91,0q-0.88,0-.88,2.93v4.39q0,2.93.88,2.93h6.74q0.88,0,.88-2.93V5.72q0-2.93-.88-2.93h-6.74ZM162.92,15q-1.46-.49-1.46-4.88V5.72q0-4.39,1.46-4.88h7.91q1.46,0.49,1.46,4.88v4.39q0,4.39-1.46,4.88h-7.91ZM175.81,0.84H177V15h-1.17V3.28l-1.46,2-0.59-1.46Zm7.91,11.56,2.64-4.73h1.46L183.72,15h-1.17l-4.1-7.34h1.46l2.64,4.73V0.84h1.17V12.4Zm6.74-5.46h5.86v2h-5.86v-2Zm7,6.1v2h-8.2V13h8.2Zm-8.2-10.25v-2h8.2v2h-8.2Zm17.46,0,2.7,10,3.22-12h1.46L210.32,15h-1.76L204.75,0.84h4.39l1.32,4.88H209l-0.79-2.93h-1.46Zm13,0L217,13h8.61L222.86,2.79h-3.11ZM216.18,15l-0.59-2,3.22-12.21h5L227,13l-0.59,2H216.18Zm22-14.16V12.56A2.57,2.57,0,0,1,235.22,15h-3.81a2.57,2.57,0,0,1-2.93-2.44V0.84h1.17V11.58q0,1.46,1.76,1.46h3.81Q237,13,237,11.58V2.79H234.7L233.46,5H232l2.34-4.15h3.81Z" transform="translate(-0.38 -0.84)" fill="#444"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.0 KiB |
@ -3,6 +3,7 @@
|
||||
"startTyping": "Start typing…",
|
||||
"translationProgress": "{progress} translated",
|
||||
"mayBeInaccurate": "May be inaccurate",
|
||||
"weDoNotSupportThisLang": "Sorry, we do not support this language",
|
||||
"improveTranslates": "Improve Ely.by translation",
|
||||
"improveTranslatesDescription": "Ely.by’s localization is a community effort. If you want to see Ely.by translated into another language, we'd love your help. To apply read {articleLink}.",
|
||||
"improveTranslatesArticleLink": "this article"
|
||||
|
||||
@ -163,6 +163,36 @@ $languageListBorderStyle: 1px solid $languageListBorderColor;
|
||||
}
|
||||
}
|
||||
|
||||
.emptyLanguagesListWrapper {
|
||||
$transitionTime: .5s;
|
||||
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
transition: height $transitionTime;
|
||||
|
||||
&.emptyLanguagesListVisible {
|
||||
opacity: 1;
|
||||
transition: $transitionTime;
|
||||
}
|
||||
}
|
||||
|
||||
.emptyLanguagesList {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.emptyLanguagesListCaption {
|
||||
height: 20px;
|
||||
max-width: 100%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.emptyLanguagesListSubtitle {
|
||||
font-family: $font-family-title;
|
||||
color: #ccc;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.improveTranslates {
|
||||
border: 1px solid #DEDEDE;
|
||||
background: #F3F1ED;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user