Merge pull request 'allow selecting languages for translation' (#143) from translation-language-selection into develop

Reviewed-on: https://akkoma.dev/AkkomaGang/pleroma-fe/pulls/143

src/components/extra_buttons/extra_buttons.js

@@ -57,7 +57,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,10 @@
 <template>
   <div>
-    <FAIcon icon="globe" /> {{ ' ' }}
+    <FAIcon
+      v-if="globeIcon"
+      icon="globe"
+    />
+    {{ ' ' }}
     <label for="interface-language-switcher">
       {{ promptText }}
     </label>
@@ -40,6 +44,10 @@ export default {
     setLanguage: {
       type: Function,
       required: true
+    },
+    globeIcon: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {

src/components/settings_modal/tabs/general_tab.js

@@ -50,6 +50,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: {
@@ -82,11 +83,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

@@ -156,6 +156,16 @@
             </li>
           </ul>
         </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

@@ -794,6 +794,7 @@
         "third_column_mode_postform": "Main post form and navigation",
         "token": "Token",
         "tooltipRadius": "Tooltips/alerts",
+        "translation_language": "Automatic Translation Language",
         "tree_advanced": "Allow more flexible navigation in tree view",
         "tree_fade_ancestors": "Display ancestors of the current post in faint text",
         "type_domains_to_mute": "Search domains to mute",

src/modules/config.js

@@ -114,7 +114,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