diff --git a/src/components/languageSwitcher/LanguageSwitcher.js b/src/components/languageSwitcher/LanguageSwitcher.js index 910a8d9..dbd97da 100644 --- a/src/components/languageSwitcher/LanguageSwitcher.js +++ b/src/components/languageSwitcher/LanguageSwitcher.js @@ -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 (
@@ -78,6 +116,29 @@ class LanguageSwitcher extends Component { > {(items) => (
+
+
this.emptyListStateInner = elem} + className={styles.emptyLanguagesList} + > + {emptyCaption.caption} +
+ +
+
+
+ {items.map(({key: locale, data: definition, style}) => (
  • + + diff --git a/src/components/languageSwitcher/images/i_took_an_arrow_in_my_knee.svg b/src/components/languageSwitcher/images/i_took_an_arrow_in_my_knee.svg new file mode 100644 index 0000000..bebd0cb --- /dev/null +++ b/src/components/languageSwitcher/images/i_took_an_arrow_in_my_knee.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/languageSwitcher/images/may_the_force_be_with_you.svg b/src/components/languageSwitcher/images/may_the_force_be_with_you.svg new file mode 100644 index 0000000..d277270 --- /dev/null +++ b/src/components/languageSwitcher/images/may_the_force_be_with_you.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/languageSwitcher/images/that_fucking_pumpkin.svg b/src/components/languageSwitcher/images/that_fucking_pumpkin.svg new file mode 100644 index 0000000..4e3ce23 --- /dev/null +++ b/src/components/languageSwitcher/images/that_fucking_pumpkin.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/languageSwitcher/languageSwitcher.intl.json b/src/components/languageSwitcher/languageSwitcher.intl.json index c85edf8..31ae235 100644 --- a/src/components/languageSwitcher/languageSwitcher.intl.json +++ b/src/components/languageSwitcher/languageSwitcher.intl.json @@ -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" diff --git a/src/components/languageSwitcher/languageSwitcher.scss b/src/components/languageSwitcher/languageSwitcher.scss index 20bb0b9..e8a68da 100644 --- a/src/components/languageSwitcher/languageSwitcher.scss +++ b/src/components/languageSwitcher/languageSwitcher.scss @@ -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;