From 3d9ffbd6ffb8b59275a3ca2779d3c6cdd1ddae10 Mon Sep 17 00:00:00 2001 From: Kurt Junghanns Date: Fri, 13 Jul 2018 11:57:27 +0200 Subject: [PATCH 01/11] [SWIK-2363_improvements_translationsUI] Fixed sorting of languages in TranslationsModal and improved deck language dropdown --- .../Deck/ContentPanel/Translation/DeckTranslationsModal.js | 2 +- components/Deck/InfoPanel/InfoPanelInfoView.js | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/components/Deck/ContentPanel/Translation/DeckTranslationsModal.js b/components/Deck/ContentPanel/Translation/DeckTranslationsModal.js index 7d6c7bc18..15d8fda0d 100644 --- a/components/Deck/ContentPanel/Translation/DeckTranslationsModal.js +++ b/components/Deck/ContentPanel/Translation/DeckTranslationsModal.js @@ -122,7 +122,7 @@ class DeckTranslationsModal extends React.Component { && !compareLanguageCodes(current, this.props.TranslationStore.originLanguage)) arr.push({key: current, value: current, text: getLanguageNativeName(current)}); return arr; - }, []).sort((a, b) => a.text > b.text); + }, []).sort((a, b) => (a.text > b.text) ? 1 : -1); } let btnMessage = this.context.intl.formatMessage(messages.translate); diff --git a/components/Deck/InfoPanel/InfoPanelInfoView.js b/components/Deck/InfoPanel/InfoPanelInfoView.js index d862650a1..a3e65d091 100644 --- a/components/Deck/InfoPanel/InfoPanelInfoView.js +++ b/components/Deck/InfoPanel/InfoPanelInfoView.js @@ -254,12 +254,16 @@ class InfoPanelInfoView extends React.Component { }); translationOptions = translationOptions.filter((a) => a !== undefined); + let currentLanguageName = getLanguageName(this.props.TranslationStore.currentLang); + const specialIconStyle = {display: 'inline!important;', verticalAlign: 'baseline'}; + return (
{this.context.intl.formatMessage(this.messages.selectLanguage)}: ({getLanguageName(this.props.TranslationStore.currentLang)}) } icon={null} + trigger={
{this.context.intl.formatMessage(this.messages.selectLanguage)}: {currentLanguageName ? ('(' + currentLanguageName + ')') : ''}
} + icon={null} aria-label="Select language" data-tooltip="Select language" defaultValue={activeLanguage} options={languageOptions} onChange={this.changeCurrentLanguage.bind(this)} /> {/* From 6e00b72de294ac44c0c6df4ed984a24067ad2117 Mon Sep 17 00:00:00 2001 From: Kurt Junghanns Date: Mon, 16 Jul 2018 16:06:26 +0200 Subject: [PATCH 02/11] [SWIK-2363_improvements_translationsUI] Added line break in translation dropdown --- components/Deck/InfoPanel/InfoPanelInfoView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Deck/InfoPanel/InfoPanelInfoView.js b/components/Deck/InfoPanel/InfoPanelInfoView.js index a3e65d091..e07928030 100644 --- a/components/Deck/InfoPanel/InfoPanelInfoView.js +++ b/components/Deck/InfoPanel/InfoPanelInfoView.js @@ -262,7 +262,7 @@ class InfoPanelInfoView extends React.Component {
{this.context.intl.formatMessage(this.messages.selectLanguage)}: {currentLanguageName ? ('(' + currentLanguageName + ')') : ''} } + trigger={
{this.context.intl.formatMessage(this.messages.selectLanguage)}:
{currentLanguageName ? ('(' + currentLanguageName + ')') : ''}
} icon={null} aria-label="Select language" data-tooltip="Select language" defaultValue={activeLanguage} options={languageOptions} onChange={this.changeCurrentLanguage.bind(this)} /> From d109be7603f1b639f40079b33476e8f2dd295596 Mon Sep 17 00:00:00 2001 From: Kurt Junghanns Date: Tue, 17 Jul 2018 14:05:08 +0200 Subject: [PATCH 03/11] [SWIK-2363_improvements_translationsUI] Removed unneeded action includes and made sure language is used in presentation --- actions/loadDeck.js | 4 +--- components/Deck/TreePanel/TreePanel.js | 4 ++-- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/actions/loadDeck.js b/actions/loadDeck.js index 21e969ad9..2021f99f0 100644 --- a/actions/loadDeck.js +++ b/actions/loadDeck.js @@ -24,8 +24,6 @@ import loadLikes from './activityfeed/loadLikes'; import PermissionsStore from '../stores/PermissionsStore'; import loadContributors from './loadContributors'; import loadForks from './permissions/loadForks'; -import changeCurrentLanguage from './translation/changeCurrentLanguage'; -import loadDeckTranslations from './translation/loadDeckTranslations'; import validateUsedLanguage from './translation/validateUsedLanguage'; import loadNodeTranslations from './translation/loadNodeTranslations'; @@ -121,7 +119,7 @@ export default function loadDeck(context, payload, done) { // need to set this for some reason otherwise deck tree does not reload on language change if (languageWillChange) { if (payloadCustom.navigate) { - payloadCustom.navigate.runFetchTree = true; + payloadCustom.navigate.runFetchTree = true; } else { payloadCustom.navigate = { runFetchTree : true }; } diff --git a/components/Deck/TreePanel/TreePanel.js b/components/Deck/TreePanel/TreePanel.js index 58bec511d..24b68f11e 100644 --- a/components/Deck/TreePanel/TreePanel.js +++ b/components/Deck/TreePanel/TreePanel.js @@ -121,8 +121,8 @@ class TreePanel extends React.Component { //if it is a slide, also add ID of slide presLocation += this.props.DeckTreeStore.selector.toJS().sid;// + '/'; } - if (this.props.TranslationStore.inTranslationMode && this.props.TranslationStore.currentLang) { - presLocation += '?language=' + this.props.TranslationStore.currentLang; + if (this.props.TranslationStore.currentLang || this.props.TranslationStore.treeLanguage) { + presLocation += '?language=' + (this.props.TranslationStore.currentLang || this.props.TranslationStore.treeLanguage); } return presLocation; } From 0abb87bebdd58208ad61186dc051f659febcadb4 Mon Sep 17 00:00:00 2001 From: Kurt Junghanns Date: Tue, 17 Jul 2018 16:38:10 +0200 Subject: [PATCH 04/11] [SWIK-2363_improvements_translationsUI] Removed that en is default in multiple components/stores --- components/Deck/ContentPanel/AttachSubdeck/AttachDeckList.js | 2 +- .../Deck/ContentPanel/DeckModes/DeckViewPanel/DeckViewPanel.js | 2 +- stores/TranslationStore.js | 2 -- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/components/Deck/ContentPanel/AttachSubdeck/AttachDeckList.js b/components/Deck/ContentPanel/AttachSubdeck/AttachDeckList.js index 31afb874a..94cbaf7cd 100644 --- a/components/Deck/ContentPanel/AttachSubdeck/AttachDeckList.js +++ b/components/Deck/ContentPanel/AttachSubdeck/AttachDeckList.js @@ -126,7 +126,7 @@ class AttachDeckList extends React.Component { let deckCreatorid = deck.deckCreatorid === undefined ? this.props.user.userId : deck.deckCreatorid; let deckCreator = deck.deckCreator === undefined ? this.props.user.username:deck.deckCreator; let deckDate = CustomDate.format(deck.creationDate, 'Do MMMM YYYY'); - let deckLanguageCode = deck.language === undefined ? 'en' : deck.language; + let deckLanguageCode = deck.language; let deckLanguage = deckLanguageCode === undefined ? '' : getLanguageName(deckLanguageCode); // default English deckLanguage = (deckLanguage === '' ? 'English' : deckLanguage); diff --git a/components/Deck/ContentPanel/DeckModes/DeckViewPanel/DeckViewPanel.js b/components/Deck/ContentPanel/DeckModes/DeckViewPanel/DeckViewPanel.js index 723aa6306..00a5190e1 100644 --- a/components/Deck/ContentPanel/DeckModes/DeckViewPanel/DeckViewPanel.js +++ b/components/Deck/ContentPanel/DeckModes/DeckViewPanel/DeckViewPanel.js @@ -102,7 +102,7 @@ class DeckViewPanel extends React.Component { const originCreator = this.props.DeckViewStore.originCreatorData.username; if (deckData.language) deckData.language = deckData.language.substring(0, 2); - let deckLanguageCode = deckData.language === undefined ? 'en' : deckData.language; + let deckLanguageCode = deckData.language; let deckLanguage = deckLanguageCode === undefined ? '' : getLanguageName(deckLanguageCode); // default English deckLanguage = (deckLanguage === '' ? 'English' : deckLanguage); diff --git a/stores/TranslationStore.js b/stores/TranslationStore.js index 26d4df789..1e286a53c 100644 --- a/stores/TranslationStore.js +++ b/stores/TranslationStore.js @@ -129,8 +129,6 @@ class TranslationStore extends BaseStore { let primaryVariant = payload.translations.find((v) => !!v.original); if (primaryVariant) { this.originLanguage = primaryVariant.language.replace('_', '-'); - } else { - this.originLanguage = 'en'; } // update translations From 13fb29be9d88295435dce49cacf96017d39194e4 Mon Sep 17 00:00:00 2001 From: Kurt Junghanns Date: Fri, 20 Jul 2018 14:53:13 +0200 Subject: [PATCH 05/11] [SWIK-2363_improvements_translationsUI] Corrected Intl message names in InfoPanel and using new messages in default.json --- components/Deck/InfoPanel/InfoPanelInfoView.js | 12 ++++++------ intl/default.json | 18 ++++++++++++++++-- 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/components/Deck/InfoPanel/InfoPanelInfoView.js b/components/Deck/InfoPanel/InfoPanelInfoView.js index e07928030..8ef6414c4 100644 --- a/components/Deck/InfoPanel/InfoPanelInfoView.js +++ b/components/Deck/InfoPanel/InfoPanelInfoView.js @@ -27,27 +27,27 @@ class InfoPanelInfoView extends React.Component { super(props); this.messages = defineMessages({ language:{ - id: 'ContentActionsHeader.language', + id: 'InfoPanelInfoView.language', defaultMessage:'Language' }, selectLanguage:{ - id: 'ContentActionsHeader.selectLanguage', + id: 'InfoPanelInfoView.selectLanguage', defaultMessage:'Select language' }, viewLanguage:{ - id: 'ContentActionsHeader.viewLanguage', + id: 'InfoPanelInfoView.viewLanguage', defaultMessage:'You are viewing this in language' }, translation:{ - id: 'ContentActionsHeader.translation', + id: 'InfoPanelInfoView.translation', defaultMessage:'Translation' }, current:{ - id: 'ContentActionsHeader.current', + id: 'InfoPanelInfoView.current', defaultMessage:'Current' }, alsoAvailableIn:{ - id: 'ContentActionsHeader.alsoAvailableIn', + id: 'InfoPanelInfoView.alsoAvailableIn', defaultMessage:'Also available in' }, }); diff --git a/intl/default.json b/intl/default.json index c250c812a..d425b5491 100644 --- a/intl/default.json +++ b/intl/default.json @@ -1204,5 +1204,19 @@ "UserRegistrationSocial.email": "Email *", "UserRegistrationSocial.signup": "Sign Up", "UserRegistrationSocial.account": "I can not access my account", - "UserRegistrationSocial.cancel": "Cancel" -} \ No newline at end of file + "UserRegistrationSocial.cancel": "Cancel", + "DeckTranslationsModal.header": "Start new deck translations", + "DeckTranslationsModal.chooseLanguage": "Choose the target language...", + "DeckTranslationsModal.startTranslation": "Create a new translation:", + "DeckTranslationsModal.startTranslationSearchOptions": " (start typing to find your language in its native name)", + "DeckTranslationsModal.cancel": "Cancel", + "DeckTranslationsModal.translate": "Create translation", + "DeckTranslationsModal.originLanguage": "Original Language:", + "DeckTranslationsModal.switchSR": "Create a new deck translation", + "InfoPanelInfoView.language": "Language", + "InfoPanelInfoView.selectLanguage": "Select language", + "InfoPanelInfoView.viewLanguage": "You are viewing this in language", + "InfoPanelInfoView.translation": "Translation", + "InfoPanelInfoView.current": "Current", + "InfoPanelInfoView.alsoAvailableIn": "Also available in" +} From eaca3194e4cfec3fba3209523313ab4b23f241b8 Mon Sep 17 00:00:00 2001 From: Kurt Junghanns Date: Mon, 23 Jul 2018 16:08:43 +0200 Subject: [PATCH 06/11] [SWIK-2363_improvements_translationsUI] Reset the dropdown style --- components/Deck/InfoPanel/InfoPanelInfoView.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/Deck/InfoPanel/InfoPanelInfoView.js b/components/Deck/InfoPanel/InfoPanelInfoView.js index 8ef6414c4..3f50b6a28 100644 --- a/components/Deck/InfoPanel/InfoPanelInfoView.js +++ b/components/Deck/InfoPanel/InfoPanelInfoView.js @@ -255,14 +255,13 @@ class InfoPanelInfoView extends React.Component { translationOptions = translationOptions.filter((a) => a !== undefined); let currentLanguageName = getLanguageName(this.props.TranslationStore.currentLang); - const specialIconStyle = {display: 'inline!important;', verticalAlign: 'baseline'}; return (
{this.context.intl.formatMessage(this.messages.selectLanguage)}:
{currentLanguageName ? ('(' + currentLanguageName + ')') : ''} } + trigger={
{this.context.intl.formatMessage(this.messages.selectLanguage)}: {currentLanguageName ? ('(' + currentLanguageName + ')') : ''}
} icon={null} aria-label="Select language" data-tooltip="Select language" defaultValue={activeLanguage} options={languageOptions} onChange={this.changeCurrentLanguage.bind(this)} /> From 0f513aeef88018fb3d733d127535fa5fd55993a0 Mon Sep 17 00:00:00 2001 From: Kurt Junghanns Date: Mon, 23 Jul 2018 16:45:53 +0200 Subject: [PATCH 07/11] [SWIK-2363_improvements_translationsUI] made also available list a list of buttons OR just entries --- components/Deck/InfoPanel/TranslationItem.js | 47 +++++++++++++------- 1 file changed, 31 insertions(+), 16 deletions(-) diff --git a/components/Deck/InfoPanel/TranslationItem.js b/components/Deck/InfoPanel/TranslationItem.js index 727a62829..635a80764 100644 --- a/components/Deck/InfoPanel/TranslationItem.js +++ b/components/Deck/InfoPanel/TranslationItem.js @@ -1,11 +1,17 @@ import React from 'react'; -import {NavLink} from 'fluxible-router'; +import PropTypes from 'prop-types'; +import {Button, Icon, Flag} from 'semantic-ui-react'; +import {navigateAction} from 'fluxible-router'; import qs from 'querystring'; - import {getLanguageName} from '../../../common'; import {flagForLocale} from '../../../configs/locales'; class TranslationItem extends React.Component { + directToTranslation(href, e) { + e.preventDefault(); + this.context.executeAction(navigateAction, { url: href }); + } + render() { let href = ''; if (this.props.clickable) { @@ -20,24 +26,33 @@ class TranslationItem extends React.Component { let flagName = flagForLocale(this.props.language); let iconName = flagName ? flagName + ' flag': 'flag icon'; + let text = getLanguageName(this.props.language) + (this.props.primary ? ' (primary)' : ''); - return (this.props.clickable === true) ? - -
-
- {getLanguageName(this.props.language)} { this.props.primary ? '(primary)' : ''} -
-
- + let node = (this.props.clickable === true) ? + + : -
-
-
- {getLanguageName(this.props.language)} { this.props.primary ? '(primary)' : ''} -
+
+
+ {iconName === 'flag icon' ? : }{text}
-
; +
+ + return ( +
+ {node} +
+ ); } } +TranslationItem.contextTypes = { + executeAction: PropTypes.func.isRequired +}; + export default TranslationItem; From 2669fac35e6b30647c4a802b7104c9fa9fbf434f Mon Sep 17 00:00:00 2001 From: Kurt Junghanns Date: Mon, 23 Jul 2018 16:50:12 +0200 Subject: [PATCH 08/11] [SWIK-2363_improvements_translationsUI] removed selection attribute from there --- components/Deck/InfoPanel/InfoPanelInfoView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Deck/InfoPanel/InfoPanelInfoView.js b/components/Deck/InfoPanel/InfoPanelInfoView.js index 3f50b6a28..bec43bbcf 100644 --- a/components/Deck/InfoPanel/InfoPanelInfoView.js +++ b/components/Deck/InfoPanel/InfoPanelInfoView.js @@ -308,7 +308,7 @@ class InfoPanelInfoView extends React.Component { : null } {(language !== activeLanguage) ? -
+
{this.context.intl.formatMessage(this.messages.viewLanguage)}:
From 3fa1ef4aae2937c3b003888f9bc2d543a98a254a Mon Sep 17 00:00:00 2001 From: Kurt Junghanns Date: Mon, 23 Jul 2018 16:57:07 +0200 Subject: [PATCH 09/11] [SWIK-2363_improvements_translationsUI] Added missing semicolon --- components/Deck/InfoPanel/TranslationItem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Deck/InfoPanel/TranslationItem.js b/components/Deck/InfoPanel/TranslationItem.js index 635a80764..508e65392 100644 --- a/components/Deck/InfoPanel/TranslationItem.js +++ b/components/Deck/InfoPanel/TranslationItem.js @@ -41,7 +41,7 @@ class TranslationItem extends React.Component {
{iconName === 'flag icon' ? : }{text}
-
+
; return (
From 90e001a0789a615a739300d5bb86c13916ca5524 Mon Sep 17 00:00:00 2001 From: Kurt Junghanns Date: Mon, 23 Jul 2018 17:01:43 +0200 Subject: [PATCH 10/11] [SWIK-2363_improvements_translationsUI] Made sure no duplicated languages are used in language dropdown --- components/Deck/InfoPanel/InfoPanelInfoView.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/components/Deck/InfoPanel/InfoPanelInfoView.js b/components/Deck/InfoPanel/InfoPanelInfoView.js index bec43bbcf..f9b38ff73 100644 --- a/components/Deck/InfoPanel/InfoPanelInfoView.js +++ b/components/Deck/InfoPanel/InfoPanelInfoView.js @@ -215,6 +215,9 @@ class InfoPanelInfoView extends React.Component { // put the current (but unavailable) language first languages.unshift(this.props.TranslationStore.currentLang); } + languages = languages.filter((elem, pos) => { + return languages.indexOf(elem) === pos; + }); let languageOptions = languages.map((t) => ({ text: getLanguageName(t) + (t === primaryLanguage ? ' (primary)' : ''), value: t, From 539da49d73d69f3535f9ad592a0361db116b85d8 Mon Sep 17 00:00:00 2001 From: Kurt Junghanns Date: Mon, 23 Jul 2018 17:16:16 +0200 Subject: [PATCH 11/11] [SWIK-2363_improvements_translationsUI] Used same button style for translation missing button --- components/Deck/InfoPanel/InfoPanelInfoView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Deck/InfoPanel/InfoPanelInfoView.js b/components/Deck/InfoPanel/InfoPanelInfoView.js index f9b38ff73..af28fbf89 100644 --- a/components/Deck/InfoPanel/InfoPanelInfoView.js +++ b/components/Deck/InfoPanel/InfoPanelInfoView.js @@ -302,7 +302,7 @@ class InfoPanelInfoView extends React.Component {