Merge branch '41-add-translation-library-and-translations' into 'master'

Add translation library and translations

Closes spacedeck#41

See merge request alfatraining/spacedeck!20

package.json

@@ -58,6 +58,7 @@
     "underscore": "1.8.3",
     "uuid": "^3.2.1",
     "validator": "7.0.0",
+    "vue-i18n": "^4.10.0",
     "ws": "3.3.1"
   },
   "main": "app.js",

views/alfaview/BoardError.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="avw-board-error">
-    <div class="avw-board-error__info">
-      This board has been deleted or your access has expired. <br />
-      Please try relaunching from the alfaview client.
-    </div>
+    <!-- eslint-disable-next-line vue/no-parsing-error -->
+    <div class="avw-board-error__info">{{{ $t("errors.notFound") }}}</div>
   </div>
 </template>

views/alfaview/BoardExpiration.vue

@@ -1,18 +1,24 @@
 <template>
   <div class="avw-board-expiration">
-    Board will be automatically deleted on: {{ remainingTime }}
+    {{ $t("boardMetadata.deletionMessage", { date: expirationDate }) }}
   </div>
 </template>
 
 <script>
 import dayjs from "dayjs";
+import { getBrowserLocale } from "./utils";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import "dayjs/locale/de";
 
 export default {
   computed: {
-    remainingTime() {
+    expirationDate() {
+      dayjs.extend(localizedFormat);
+      dayjs.locale(getBrowserLocale());
+
       return dayjs(this.$root.active_space.updatedAt)
         .add(7, "days")
-        .format("ddd DD.MM, HH:mm")
+        .format("llll")
         .toString();
     },
   },

views/alfaview/Color.vue

@@ -117,7 +117,7 @@
     >
       <div class="input-row">
         <div class="form-group no-m">
-          <label class="label label-sm">Stroke</label>
+          <label class="label label-sm">{{ $t("toolbar.stroke") }}</label>
           <input
             v-model="activeStyle.stroke"
             class="input no-b no-p text-center text-large"
@@ -139,7 +139,9 @@
         </div>
 
         <div class="form-group no-m">
-          <label class="label label-sm">Border Radius</label>
+          <label class="label label-sm">
+            {{ $t("toolbar.borderRadius") }}
+          </label>
           <input
             v-model="activeStyle.border_radius"
             class="input no-b no-p text-center text-large"
@@ -168,7 +170,9 @@
     >
       <div class="input-row">
         <div class="form-group no-m">
-          <label class="label label-sm text-center">Font size</label>
+          <label class="label label-sm text-center">
+            {{ $t("toolbar.fontSize") }}
+          </label>
           <input
             v-model="activeStyle.font_size"
             class="input no-b no-p text-center text-large"
@@ -184,7 +188,7 @@
             class="input-drag btn btn-transparent btn-icon"
             style="cursor: ns-resize"
             sd-fader-var-y="active_style.font_size"
-            sd-fader-min-y="30"
+            sd-fader-min-y="12"
             sd-fader-max-y="200"
             sd-fader-sens="5"
           >
@@ -194,32 +198,28 @@
         </div>
         <div class="btn-group">
           <button
-            class="btn btn-transparent btn-icon-labeled"
+            class="btn btn-transparent"
             @click="applyFormatting($event, 'bold')"
           >
             <i class="material-icons">format_bold</i>
-            <span class="icon-label">Bold</span>
           </button>
           <button
-            class="btn btn-transparent btn-icon-labeled"
+            class="btn btn-transparent"
             @click="applyFormatting($event, 'italic')"
           >
             <i class="material-icons">format_italic</i>
-            <span class="icon-label">Italic</span>
           </button>
           <button
-            class="btn btn-transparent btn-icon-labeled"
+            class="btn btn-transparent"
             @click="applyFormatting($event, 'underline')"
           >
             <i class="material-icons">format_underlined</i>
-            <span class="icon-label">Underl.</span>
           </button>
           <button
-            class="btn btn-transparent btn-icon-labeled"
+            class="btn btn-transparent"
             @click="applyFormatting($event, 'strikeThrough')"
           >
             <i class="material-icons">strikethrough_s</i>
-            <span class="icon-label">Strike</span>
           </button>
         </div>
       </div>

views/alfaview/Toolbar.vue

@@ -6,15 +6,15 @@
       @click="enableSelectMode"
     >
       <i class="material-icons">crop_free</i>
-      <span class="icon-label">Select</span>
+      <span class="icon-label">{{ $t("toolbar.select") }}</span>
     </button>
     <button
       class="btn btn-icon-labeled avw-button"
       :class="{ active: activeTool == 'scribble' }"
       @click="startDrawingScribble"
     >
       <i class="material-icons">gesture</i>
-      <span class="icon-label">Draw</span>
+      <span class="icon-label">{{ $t("toolbar.draw") }}</span>
     </button>
     <div class="avw-submenu-wrapper">
       <button
@@ -23,7 +23,7 @@
         @click="openDialog('shapes')"
       >
         <i class="material-icons">category</i>
-        <span class="icon-label">Shape</span>
+        <span class="icon-label">{{ $t("toolbar.shape") }}</span>
       </button>
       <Shapes v-if="openedDialog == 'shapes'" class="avw-submenu"></Shapes>
     </div>
@@ -33,7 +33,7 @@
       @click="startDrawingArrow"
     >
       <i class="material-icons">sync_alt</i>
-      <span class="icon-label">Arrow</span>
+      <span class="icon-label">{{ $t("toolbar.arrow") }}</span>
     </button>
     <!-- Disable file uploads for MVP -->
     <!-- <button class="btn btn-icon-labeled avw-button" @click="showFileUploadDialog()">Media</button>
@@ -51,7 +51,7 @@
       @click="activateTool('note')"
     >
       <i class="material-icons">text_fields</i>
-      <span class="icon-label">Text</span>
+      <span class="icon-label">{{ $t("toolbar.text") }}</span>
     </button>
     <div class="avw-submenu-wrapper">
       <button
@@ -60,7 +60,7 @@
         @click="openDialog('background')"
       >
         <i class="material-icons">wallpaper</i>
-        <span class="icon-label">Background</span>
+        <span class="icon-label">{{ $t("toolbar.background") }}</span>
       </button>
       <Background
         v-if="openedDialog == 'background'"
@@ -69,7 +69,7 @@
     </div>
     <button class="btn btn-icon-labeled avw-button" @click="downloadSpace()">
       <i class="material-icons">file_download</i>
-      <span class="icon-label">Download</span>
+      <span class="icon-label">{{ $t("toolbar.download") }}</span>
     </button>
     <button class="btn btn-icon-labeled avw-button" @click="clearSpace()">
       <!-- <span class="icon icon-page-horizontal-remove"></span> -->

views/alfaview/ToolbarObject.vue

@@ -73,7 +73,7 @@
             @click="openDialog('type-align')"
           >
             <i class="material-icons">format_align_center</i>
-            <span class="icon-label">Align</span>
+            <span class="icon-label">{{ $t("toolbar.align") }}</span>
           </button>
         </div>
 
@@ -92,7 +92,7 @@
             @click="openDialog('layout')"
           >
             <i class="material-icons">flip</i>
-            <span class="icon-label">Layout</span>
+            <span class="icon-label">{{ $t("toolbar.layout") }}</span>
           </button>
         </div>
 
@@ -104,7 +104,7 @@
         @click="duplicateSelectedArtifacts()"
       >
         <i class="material-icons">content_copy</i>
-        <span class="icon-label">Duplicate</span>
+        <span class="icon-label">{{ $t("toolbar.duplicate") }}</span>
       </button>
 
       <button
@@ -113,7 +113,7 @@
         @click="deleteSelectedArtifacts()"
       >
         <i class="material-icons">delete</i>
-        <span class="icon-label">Delete</span>
+        <span class="icon-label">{{ $t("toolbar.delete") }}</span>
       </button>
     </div>
   </div>

views/alfaview/locales/de.js

@@ -0,0 +1,26 @@
+export default {
+  toolbar: {
+    select: "Select",
+    draw: "Zeichnen",
+    shape: "Grafik",
+    arrow: "Pfeil",
+    text: "Text",
+    background: "Hintergrund",
+    download: "Herunterladen",
+    clear: "Alle löschen",
+    align: "Ausrichtung",
+    layout: "Layout",
+    duplicate: "Duplizieren",
+    delete: "Löschen",
+    stroke: "Strich",
+    fontSize: "Schriftgröße",
+    borderRadius: "Border radius",
+  },
+  boardMetadata: {
+    deletionMessage: "Board wird automatisch gelöscht am: {date}",
+  },
+  errors: {
+    notFound:
+      "Dieses Board wurde gelöscht oder Ihr Zugang ist abgelaufen.<br />Bitte versuchen Sie, das Board über den alfaview-client neu zu starten.",
+  },
+};

views/alfaview/locales/en.js

@@ -0,0 +1,26 @@
+export default {
+  toolbar: {
+    select: "Select",
+    draw: "Draw",
+    shape: "Shape",
+    arrow: "Arrow",
+    text: "Text",
+    background: "Background",
+    download: "Download",
+    clear: "Clear",
+    align: "Align",
+    layout: "Layout",
+    duplicate: "Duplicate",
+    delete: "Delete",
+    stroke: "Stroke",
+    fontSize: "Font size",
+    borderRadius: "Border radius",
+  },
+  boardMetadata: {
+    deletionMessage: "Board will be automatically deleted on: {date}",
+  },
+  errors: {
+    notFound:
+      "This board has been deleted or your access has expired.<br />Please try relaunching from the alfaview client.",
+  },
+};

views/alfaview/main.js

@@ -15,6 +15,24 @@ import BoardMeta from "./BoardMeta.vue";
 import Space from "./Space.vue";
 import BoardError from "./BoardError.vue";
 
+import VueI18n from "vue-i18n";
+import en from "./locales/en";
+import de from "./locales/de";
+import { getBrowserLocale } from "./utils";
+
+Vue.use(VueI18n);
+const locales = {
+  en: en,
+  de: de,
+};
+
+Vue.config.lang = getBrowserLocale();
+Vue.config.fallbackLang = "en";
+
+Object.keys(locales).forEach(function (lang) {
+  Vue.locale(lang, locales[lang]);
+});
+
 Vue.component("Toolbar", Toolbar);
 Vue.component("Shapes", Shapes);
 Vue.component("Zones", Zones);

views/alfaview/styles/_shapes.scss

@@ -3,6 +3,10 @@
   padding-top: 12px;
   padding-left: 8px;
   padding-right: 8px;
+
+  .btn {
+    min-width: 60px;
+  }
 }
 .avw-icon {
   font-size: 32px;

views/alfaview/styles/_toolbar.scss

@@ -19,6 +19,11 @@
   margin-left: 8px;
   padding: 10px;
   z-index: 3500;
+  width: 100px;
+
+  .btn {
+    min-width: 80px;
+  }
 }
 .avw-submenu-wrapper {
   display: flex;
@@ -29,7 +34,7 @@
   background-color: $avw-background-color-white;
   position: absolute;
   color: $avw-background-color;
-  left: 100px;
+  left: 105px;
   z-index: 3500;
 }
 .avw-object-toolbar {
@@ -39,7 +44,20 @@
   .avw-button-group {
     padding-top: 8px;
     padding-bottom: 8px;
+    padding-left: 8px;
+
     background-color: $avw-background-color !important;
+
+    .btn,
+    .btn-collapse {
+      border-radius: $avw-border-radius-small;
+    }
+    .btn-collapse {
+      width: 70px;
+    }
+  }
+  .dialog {
+    right: 80px !important;
   }
 }
 

views/alfaview/utils.js

@@ -0,0 +1,14 @@
+const browserDetectedLang = () => {
+  return navigator.languages && navigator.languages.length
+    ? navigator.languages[0]
+    : navigator.language;
+};
+
+// initialize to German locale if it's any of the variations, otherwise fall back to English
+export const getBrowserLocale = () => {
+  return ["de", "de-DE", "de-CH", "de-AT", "de-LU", "de-LI"].indexOf(
+    browserDetectedLang()
+  ) > -1
+    ? "de"
+    : "en";
+};