From 97e8fa1af8d788b73814eb83c92a3a080e03e903 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Wed, 12 Jun 2019 18:08:20 -0300
Subject: [PATCH] Style, update languageOptions to contain all

- languages we support for translations
---
 webapp/components/ContributionForm/index.vue | 46 ++++++++++++--------
 webapp/locales/de.json                       |  3 +-
 webapp/locales/en.json                       |  3 +-
 3 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/webapp/components/ContributionForm/index.vue b/webapp/components/ContributionForm/index.vue
index 6320eb368..d56cb11e3 100644
--- a/webapp/components/ContributionForm/index.vue
+++ b/webapp/components/ContributionForm/index.vue
@@ -6,12 +6,20 @@
         <no-ssr>
           <hc-editor :users="users" :value="form.content" @input="updateEditorContent" />
         </no-ssr>
-        <ds-select
-          model="language"
-          :options="form.languageOptions"
-          icon="globe"
-          :placeholder="locale"
-        />
+        <ds-space margin-bottom="xxx-large" />
+        <ds-flex class="contribution-form-footer">
+          <ds-flex-item :width="{ base: '0%', sm: '10%', md: '10%', lg: '15%' }" />
+          <ds-flex-item :width="{ base: '80%', sm: '30%', md: '30%', lg: '20%' }">
+            <ds-space margin-bottom="small" />
+            <ds-select
+              model="language"
+              :options="form.languageOptions"
+              icon="globe"
+              :placeholder="locale"
+              :label="$t('contribution.languageSelectLabel')"
+            />
+          </ds-flex-item>
+        </ds-flex>
         <div slot="footer" style="text-align: right">
           <ds-button
             :disabled="loading || disabled"
@@ -54,17 +62,7 @@ export default {
         title: '',
         content: '',
         language: null,
-        locales: orderBy(process.env.locales, 'name'),
-        languageOptions: [
-          {
-            label: 'Deutsch',
-            value: 'de',
-          },
-          {
-            label: 'English',
-            value: 'en',
-          },
-        ],
+        languageOptions: [],
       },
       formSchema: {
         title: { required: true, min: 3, max: 64 },
@@ -94,10 +92,13 @@ export default {
   computed: {
     locale() {
       let locale
-      locale = this.form.locales.find(this.returnLocaleName)
+      locale = process.env.locales.find(this.returnLocaleName)
       return locale.name
     },
   },
+  mounted() {
+    this.availableLocales()
+  },
   methods: {
     submit() {
       const postMutations = require('~/graphql/PostMutations.js').default(this)
@@ -139,6 +140,11 @@ export default {
         return locale
       }
     },
+    availableLocales() {
+      orderBy(process.env.locales, 'name').map(locale => {
+        this.form.languageOptions.push({ label: locale.name, value: locale.code })
+      })
+    },
   },
   apollo: {
     User: {
@@ -171,4 +177,8 @@ export default {
     padding-right: 0;
   }
 }
+
+.contribution-form-footer {
+  border-top: $border-size-base solid $border-color-softest;
+}
 </style>
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 0bd5f9424..4cee530f8 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -297,6 +297,7 @@
     }
   },
   "contribution": {
-    "success": "Gespeichert!"
+    "success": "Gespeichert!",
+    "languageSelectLabel": "Sprache"
   }
 }
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index da39e6ebe..0034ce1b3 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -296,6 +296,7 @@
     }
   },
   "contribution": {
-    "success": "Saved!"
+    "success": "Saved!",
+    "languageSelectLabel": "Language"
   }
 }