From 0386fd4bb71037b9dd64b5d37900418d4efb9420 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 18 Dec 2018 11:11:56 +0100
Subject: [PATCH] added some optimized locale flags and created a
 LanguageSwitch component

---
 README.md                      |  4 +++
 components/LanguageSwitch.vue  | 47 ++++++++++++++++++++++++++++++++++
 layouts/default.vue            | 43 ++++++++++---------------------
 static/img/locale-flags/de.svg |  1 +
 static/img/locale-flags/en.svg |  1 +
 static/img/locale-flags/fr.svg |  1 +
 static/img/locale-flags/nl.svg |  1 +
 7 files changed, 69 insertions(+), 29 deletions(-)
 create mode 100644 components/LanguageSwitch.vue
 create mode 100644 static/img/locale-flags/de.svg
 create mode 100644 static/img/locale-flags/en.svg
 create mode 100644 static/img/locale-flags/fr.svg
 create mode 100644 static/img/locale-flags/nl.svg

diff --git a/README.md b/README.md
index c48e4da65..acbf93148 100644
--- a/README.md
+++ b/README.md
@@ -39,3 +39,7 @@ All reusable Components (for example avatar) should be done inside the styleguid
 ``` bash
 $ yarn styleguide
 ```
+
+## Attributions
+
+<div>Locale Icons made by <a href="http://www.freepik.com/" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" 		    title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" 		    title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
diff --git a/components/LanguageSwitch.vue b/components/LanguageSwitch.vue
new file mode 100644
index 000000000..9906c25d5
--- /dev/null
+++ b/components/LanguageSwitch.vue
@@ -0,0 +1,47 @@
+<template>
+  <!-- eslint-disable vue/html-self-closing -->
+  <div>
+    <!-- TODO: use custom dropdown menu, popover or modal for language selection -->
+    <a
+      v-if="$i18n.locale() === 'en'"
+      href="#"
+      @click.prevent="changeLanguage('de')"
+    >
+      <img
+        alt="English"
+        src="/img/locale-flags/en.svg"
+        height="26"
+      />
+    </a>
+    <a
+      v-else
+      href="#"
+      @click.prevent="changeLanguage('en')"
+    >
+      <img
+        alt="Deutsch"
+        src="/img/locale-flags/de.svg"
+        height="26"
+      />
+    </a>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    changeLanguage(locale) {
+      // TODO: move that logic to store!?
+      // check if the locale has already been loaded
+      if (this.$i18n.localeExists(locale)) {
+        this.$i18n.set(locale)
+        return
+      }
+      import(`~/locales/${locale}.json`).then(res => {
+        this.$i18n.add(locale, res.default)
+        this.$i18n.set(locale)
+      })
+    }
+  }
+}
+</script>
diff --git a/layouts/default.vue b/layouts/default.vue
index 8f2195552..752c4c3d9 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -8,22 +8,7 @@
         >
           <ds-logo />
         </a>
-        <!-- TODO: replace with better menu (maybe footer?) -->
-        <a
-          v-if="$i18n.locale() === 'en'"
-          href="#"
-          @click="changeLanguage('de')"
-        >
-          Deutsch
-        </a>
-        <a
-          v-else
-          href="#"
-          @click="changeLanguage('en')"
-        >
-          English
-        </a>
-        <!-- TODO: end of dummy locale menu -->
+        <language-switch class="topbar-language-switch" />
         <template v-if="isLoggedIn">
           <no-ssr>
             <v-popover
@@ -77,11 +62,15 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import { setTimeout } from 'timers'
+import LanguageSwitch from '~/components/LanguageSwitch'
+
 let mouseEnterTimer = null
 let mouseLeaveTimer = null
 
 export default {
+  components: {
+    LanguageSwitch
+  },
   data() {
     return {
       isPopoverOpen: false
@@ -121,18 +110,6 @@ export default {
     clearTimeout(mouseLeaveTimer)
   },
   methods: {
-    changeLanguage(locale) {
-      // TODO: make it a component
-      // check if the locale has already been loaded
-      if (this.$i18n.localeExists(locale)) {
-        this.$i18n.set(locale)
-        return
-      }
-      import(`~/locales/${locale}.json`).then(res => {
-        this.$i18n.add(locale, res.default)
-        this.$i18n.set(locale)
-      })
-    },
     toggleMenu() {
       this.isPopoverOpen = !this.isPopoverOpen
     },
@@ -157,3 +134,11 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.topbar-language-switch {
+  display: inline-block;
+  top: -16px;
+  position: relative;
+}
+</style>
diff --git a/static/img/locale-flags/de.svg b/static/img/locale-flags/de.svg
new file mode 100644
index 000000000..4e508a4b3
--- /dev/null
+++ b/static/img/locale-flags/de.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M15.923 345.043C52.094 442.527 145.929 512 256 512s203.906-69.473 240.077-166.957L256 322.783l-240.077 22.26z" fill="#ffda44"/><path d="M256 0C145.929 0 52.094 69.472 15.923 166.957L256 189.217l240.077-22.261C459.906 69.472 366.071 0 256 0z"/><path d="M15.923 166.957C5.633 194.69 0 224.686 0 256s5.633 61.31 15.923 89.043h480.155C506.368 317.31 512 287.314 512 256s-5.632-61.31-15.923-89.043H15.923z" fill="#d80027"/></svg>
\ No newline at end of file
diff --git a/static/img/locale-flags/en.svg b/static/img/locale-flags/en.svg
new file mode 100644
index 000000000..89af58847
--- /dev/null
+++ b/static/img/locale-flags/en.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="iso-8859-1"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" width="512" height="512"><defs><path id="a" d="M0 512L512 0v512z"/></defs><g fill="none" fill-rule="evenodd"><circle cx="256" cy="256" r="256" fill="#F0F0F0"/><path fill="#D80027" d="M244.87 256H512c0-23.106-3.08-45.49-8.819-66.783H244.87V256zm0-133.565h229.556a257.35 257.35 0 0 0-59.07-66.783H244.87v66.783zM256 512c60.249 0 115.626-20.824 159.356-55.652H96.644C140.374 491.176 195.751 512 256 512zM37.574 389.565h436.852a254.474 254.474 0 0 0 28.755-66.783H8.819a254.474 254.474 0 0 0 28.755 66.783z"/><path fill="#0052B4" fill-rule="nonzero" d="M118.584 39.978h23.329l-21.7 15.765 8.289 25.509-21.699-15.765-21.699 15.765 7.16-22.037a257.407 257.407 0 0 0-49.652 55.337h7.475l-13.813 10.035a255.58 255.58 0 0 0-6.194 10.938l6.596 20.301-12.306-8.941a253.567 253.567 0 0 0-8.372 19.873l7.267 22.368h26.822l-21.7 15.765 8.289 25.509-21.699-15.765-12.998 9.444A258.468 258.468 0 0 0 0 256h256V0c-50.572 0-97.715 14.67-137.416 39.978zm9.918 190.422l-21.699-15.765L85.104 230.4l8.289-25.509-21.7-15.765h26.822l8.288-25.509 8.288 25.509h26.822l-21.7 15.765 8.289 25.509zm-8.289-100.083l8.289 25.509-21.699-15.765-21.699 15.765 8.289-25.509-21.7-15.765h26.822l8.288-25.509 8.288 25.509h26.822l-21.7 15.765zM220.328 230.4l-21.699-15.765L176.93 230.4l8.289-25.509-21.7-15.765h26.822l8.288-25.509 8.288 25.509h26.822l-21.7 15.765 8.289 25.509zm-8.289-100.083l8.289 25.509-21.699-15.765-21.699 15.765 8.289-25.509-21.7-15.765h26.822l8.288-25.509 8.288 25.509h26.822l-21.7 15.765zm0-74.574l8.289 25.509-21.699-15.765-21.699 15.765 8.289-25.509-21.7-15.765h26.822l8.288-25.509 8.288 25.509h26.822l-21.7 15.765z"/><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><g mask="url(#b)"><circle cx="256" cy="256" r="256" fill="#F0F0F0"/><path fill="#0052B4" d="M52.92 100.142c-20.109 26.163-35.272 56.318-44.101 89.077h133.178L52.92 100.142zm450.261 89.077c-8.829-32.758-23.993-62.913-44.101-89.076l-89.075 89.076h133.176zM8.819 322.784c8.83 32.758 23.993 62.913 44.101 89.075l89.074-89.075H8.819zM411.858 52.921c-26.163-20.109-56.317-35.272-89.076-44.102v133.177l89.076-89.075zM100.142 459.079c26.163 20.109 56.318 35.272 89.076 44.102V370.005l-89.076 89.074zm89.075-450.26c-32.758 8.83-62.913 23.993-89.075 44.101l89.075 89.075V8.819zm133.566 494.362c32.758-8.83 62.913-23.993 89.075-44.101l-89.075-89.075v133.176zm47.222-180.397l89.075 89.076c20.108-26.162 35.272-56.318 44.101-89.076H370.005z"/><g fill="#D80027"><path d="M509.833 222.609H289.392V2.167A258.556 258.556 0 0 0 256 0c-11.319 0-22.461.744-33.391 2.167v220.441H2.167A258.556 258.556 0 0 0 0 256c0 11.319.744 22.461 2.167 33.391h220.441v220.442a258.35 258.35 0 0 0 66.783 0V289.392h220.442A258.533 258.533 0 0 0 512 256c0-11.317-.744-22.461-2.167-33.391z"/><path d="M322.783 322.783L437.019 437.02a256.636 256.636 0 0 0 15.048-16.435l-97.802-97.802h-31.482zm-133.566.001h-.002L74.98 437.019a256.636 256.636 0 0 0 16.435 15.048l97.802-97.804v-31.479zm0-133.565v-.002L74.981 74.98a256.636 256.636 0 0 0-15.048 16.435l97.803 97.803 31.481.001zm133.566 0L437.02 74.981a256.328 256.328 0 0 0-16.435-15.047l-97.802 97.803v31.482z"/></g></g></g></svg>
\ No newline at end of file
diff --git a/static/img/locale-flags/fr.svg b/static/img/locale-flags/fr.svg
new file mode 100644
index 000000000..9547d75c7
--- /dev/null
+++ b/static/img/locale-flags/fr.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="#f0f0f0"/><path d="M512 256c0-110.071-69.472-203.906-166.957-240.077v480.155C442.528 459.906 512 366.071 512 256z" fill="#d80027"/><path d="M0 256c0 110.071 69.473 203.906 166.957 240.077V15.923C69.473 52.094 0 145.929 0 256z" fill="#0052b4"/></svg>
\ No newline at end of file
diff --git a/static/img/locale-flags/nl.svg b/static/img/locale-flags/nl.svg
new file mode 100644
index 000000000..29a6a0ce3
--- /dev/null
+++ b/static/img/locale-flags/nl.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="#f0f0f0"/><path d="M256 0C145.929 0 52.094 69.472 15.923 166.957h480.155C459.906 69.472 366.071 0 256 0z" fill="#a2001d"/><path d="M256 512c110.071 0 203.906-69.472 240.077-166.957H15.923C52.094 442.528 145.929 512 256 512z" fill="#0052b4"/></svg>
\ No newline at end of file