Merge pull request #7 from DaywisonSilva/master

feat: add translations

.vscode/extensions.json

@@ -1,9 +1,5 @@
 {
-  "recommendations": [
-    "dbaeumer.vscode-eslint",
-
-    "octref.vetur"
-  ],
+  "recommendations": ["dbaeumer.vscode-eslint", "octref.vetur"],
   "unwantedRecommendations": [
     "hookyqr.beautify",
     "dbaeumer.jshint",

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
   "vetur.validation.template": false,
-  "vetur.format.enable": false,
+  "vetur.format.enable": true,
   "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
-
-  "vetur.experimental.templateInterpolationService": true
+  "vetur.experimental.templateInterpolationService": true,
+  "editor.formatOnSave": false
 }

src/components/ToggleLanguage.vue

@@ -0,0 +1,38 @@
+<template>
+  <q-select
+    v-model="lang"
+    :options="langOptions"
+    :label="$t('language')"
+    dense
+    borderless
+    emit-value
+    map-options
+    options-dense
+    style="min-width: 150px"
+    color="purple"
+    label-color="white"
+  >
+   <template v-slot:prepend>
+      <q-icon name="translate" color="white"/>
+    </template>
+  </q-select>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      lang: this.$i18n.locale,
+      langOptions: [
+        { value: 'en-us', label: 'English' },
+        { value: 'pt-br', label: 'Português' }
+      ]
+    }
+  },
+  watch: {
+    lang (lang) {
+      this.$i18n.locale = lang
+    }
+  }
+}
+</script>

src/i18n/en-us/index.js

@@ -3,5 +3,17 @@
 
 export default {
   failed: 'Action failed',
-  success: 'Action was successful'
+  success: 'Action was successful',
+  language: 'language',
+  startAugmentedReality: 'start augmented reality',
+  usageInfoPartOne: 'For usage instructions, click on the button',
+  usageInfoPartTwo: 'from the navigation bar.',
+  // mainTitle: "Antônio Peticov's art in Augmented Reality",
+  name: "Antonio Peticov's",
+  art: 'art',
+  in: 'in',
+  augumented: 'Augmented',
+  reality: 'Reality',
+
+  subtitleInfo: 'Antonio Peticov (born July 2, 1946) is a Brazilian painter, designer, sculptor, and engraver.'
 }

src/i18n/index.js

@@ -1,5 +1,7 @@
 import enUS from './en-us'
+import ptBR from './pt-br'
 
 export default {
-  'en-us': enUS
+  'en-us': enUS,
+  'pt-br': ptBR
 }

src/i18n/pt-br/index.js

@@ -0,0 +1,18 @@
+// This is just an example,
+// so you can safely delete all default props below
+
+export default {
+  failed: 'Action failed',
+  success: 'Action was successful',
+  language: 'idioma',
+  startAugmentedReality: 'Iniciar realidade aumentada',
+  usageInfoPartOne: 'Para instruções de uso, clique no botão',
+  usageInfoPartTwo: 'da barra de navegação.',
+  mainTitle: 'A arte de Antônio Peticov em Realidade Aumentada',
+  name: 'Antonio Peticov',
+  art: 'arte',
+  in: 'de',
+  augumented: 'Aumentada',
+  reality: 'Realidade',
+  subtitleInfo: 'Antonio Peticov (nascido em 2 de julho de 1946) é um pintor, desenhista, escultor e gravador brasileiro.'
+}

src/layouts/MainLayout.vue

@@ -8,7 +8,7 @@
         </q-toolbar-title>
 
         <q-btn flat round dense icon="info" @click="dialog = true" />
-
+        <toggle-language class="q-ml-sm"/>
       </q-toolbar>
     </q-header>
 
@@ -57,6 +57,7 @@
 
 <script>
 import EssentialLink from 'components/EssentialLink.vue'
+import ToggleLanguage from 'components/ToggleLanguage.vue'
 import readme from '../../README.md'
 
 const linksData = [
@@ -70,7 +71,7 @@ const linksData = [
 
 export default {
   name: 'MainLayout',
-  components: { EssentialLink },
+  components: { EssentialLink, ToggleLanguage },
   data () {
     return {
       readme: readme,

src/pages/Index.vue

@@ -8,20 +8,24 @@
         </div>
         <div class="col q-pt-md">
           <p class="text-h4 text-bold text-black text-center">
-              <span class="bottom-dotted">Antônio Peticov's</span> art in Augmented Reality
+              <span class="bottom-dotted">{{$t('name')}}</span> {{$t('art')}} {{$t('in')}}
+
+              <span v-if="this.$i18n.locale === 'en-us'"> {{$t('augumented')}} {{$t('reality')}}</span>
+              <span v-else>{{$t('reality')}} {{$t('augumented')}}</span>
+
               <q-tooltip anchor="top left" self="center middle">
-                Antonio Peticov (born July 2, 1946) is a Brazilian painter, designer, sculptor, and engraver.
+                {{$t('subtitleInfo')}}
               </q-tooltip>
           </p>
         </div>
         <div class="col text-justify">
-          <p class="text-body1">For usage instructions, click on the button <span><q-icon size="sm" name="info" /></span> from the navigation bar.</p>
+          <p class="text-body1">{{$t('usageInfoPartOne')}} <span><q-icon size="sm" name="info" /></span> {{$t('usageInfoPartTwo')}}</p>
         </div>
         <div class="col q-pa-md">
           <q-btn color="purple" glossy
             class="q-mt-xs text-no-wrap"
             push
-            label="Iniciar realidade aumentada"
+            :label="$t('startAugmentedReality')"
             to="/ar"
           />
       </div>