allow selecting languages for translation

src/components/extra_buttons/extra_buttons.js

@@ -69,7 +69,8 @@ const ExtraButtons = {
     },
 
     translateStatus () {
-      this.$store.dispatch('translateStatus', { id: this.status.id, language: this.$store.state.instance.interfaceLanguage })
+      const translateTo = this.$store.getters.mergedConfig.translationLanguage || this.$store.state.instance.interfaceLanguage
+      this.$store.dispatch('translateStatus', { id: this.status.id, language: translateTo })
         .then(() => this.$emit('onSuccess'))
         .catch(err => this.$emit('onError', err.error.error))
     },

src/components/interface_language_switcher/interface_language_switcher.vue

@@ -1,6 +1,11 @@
 <template>
-  <div class="interface-language-switcher">
-    <label>
+  <div>
+    <FAIcon
+      v-if="globeIcon"
+      icon="globe"
+    />
+    {{ ' ' }}
+    <label for="interface-language-switcher">
       {{ promptText }}
     </label>
     <ul class="setting-list">
@@ -65,6 +70,10 @@ export default {
     setLanguage: {
       type: Function,
       required: true
+    },
+    globeIcon: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {

src/components/settings_modal/tabs/general_tab.js

@@ -56,6 +56,7 @@ const GeneralTab = {
       Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'webkitAudioDecodedByteCount') ||
       // Future spec, still not supported in Nightly 63 as of 08/2018
       Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks')
+
     }
   },
   components: {
@@ -104,11 +105,20 @@ const GeneralTab = {
         this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
       }
     },
+    translationLanguage: {
+      get: function () { return this.$store.getters.mergedConfig.translationLanguage },
+      set: function (val) {
+        this.$store.dispatch('setOption', { name: 'translationLanguage', value: val })
+      }
+    },
     ...SharedComputedObject()
   },
   methods: {
     changeDefaultScope (value) {
       this.$store.dispatch('setServerSideOption', { name: 'defaultScope', value })
+    },
+    setTranslationLanguage (value) {
+      this.$store.dispatch('setOption', { name: 'translationLanguage', value })
     }
   }
 }

src/components/settings_modal/tabs/general_tab.vue

@@ -114,6 +114,16 @@
             {{ $t('settings.user_popover_avatar_overlay') }}
           </BooleanSetting>
         </li>
+        <li>
+          <p>
+            <interface-language-switcher
+              :globe-icon="false"
+              :prompt-text="$t('settings.translation_language')"
+              :language="translationLanguage"
+              :set-language="setTranslationLanguage"
+            />
+          </p>
+        </li>
         <li>
           <BooleanSetting
             path="alwaysShowNewPostButton"

src/i18n/en.json

@@ -658,6 +658,7 @@
     "theme_help_v2_1": "You can also override certain component's colors and opacity by toggling the checkbox, use \"Clear all\" button to clear all overrides.",
     "theme_help_v2_2": "Icons underneath some entries are background/text contrast indicators, hover over for detailed info. Please keep in mind that when using transparency contrast indicators show the worst possible case.",
     "tooltipRadius": "Tooltips/alerts",
+    "translation_language": "Automatic Translation Language",
     "type_domains_to_mute": "Search domains to mute",
     "upload_a_photo": "Upload a photo",
     "user_settings": "User Settings",

src/modules/config.js

@@ -123,7 +123,8 @@ export const defaultState = {
   conversationTreeAdvanced: undefined, // instance default
   conversationOtherRepliesButton: undefined, // instance default
   conversationTreeFadeAncestors: undefined, // instance default
-  maxDepthInThread: undefined // instance default
+  maxDepthInThread: undefined, // instance default
+  translationLanguage: undefined // instance default
 }
 
 // caching the instance default properties