Merge branch 'master' into remove-logout-button

frontend/src/components/files/Editor.vue

@@ -10,6 +10,7 @@ import buttons from '@/utils/buttons'
 import ace from 'ace-builds/src-min-noconflict/ace.js'
 import modelist from 'ace-builds/src-min-noconflict/ext-modelist.js'
 import 'ace-builds/webpack-resolver'
+import { theme } from '@/utils/constants'
 
 export default {
   name: 'editor',
@@ -17,10 +18,7 @@ export default {
     ...mapState(['req'])
   },
   data: function () {
-    return {
-      content: null,
-      editor: null
-    }
+    return {}
   },
   created () {
     window.addEventListener('keydown', this.keyEvent)
@@ -29,22 +27,25 @@ export default {
   beforeDestroy () {
     window.removeEventListener('keydown', this.keyEvent)
     document.getElementById('save-button').removeEventListener('click', this.save)
+    this.editor.destroy();
   },
   mounted: function () {
-    if (this.req.content === undefined || this.req.content === null) {
-      this.req.content = ''
-    }
+    const fileContent = this.req.content || '';
 
     this.editor = ace.edit('editor', {
       maxLines: Infinity,
       minLines: 20,
-      value: this.req.content,
+      value: fileContent,
       showPrintMargin: false,
       readOnly: this.req.type === 'textImmutable',
       theme: 'ace/theme/chrome',
       mode: modelist.getModeForPath(this.req.name).mode,
       wrap: true
     })
+
+    if (theme == 'dark') {
+      this.editor.setTheme("ace/theme/twilight");
+    }
   },
   methods: {
     keyEvent (event) {

frontend/src/components/files/ListingItem.vue

@@ -129,7 +129,7 @@ export default {
         return
       }
 
-      if (event.shiftKey && this.selected.length === 1) {
+      if (event.shiftKey) {
         let fi = 0
         let la = 0
 

frontend/src/components/settings/Languages.vue

@@ -1,30 +1,42 @@
 <template>
   <select v-on:change="change" :value="locale">
-    <option value="ar">{{ $t('languages.ar') }}</option>
-    <option value="de">{{ $t('languages.de') }}</option>
-    <option value="en">{{ $t('languages.en') }}</option>
-    <option value="es">{{ $t('languages.es') }}</option>
-    <option value="fr">{{ $t('languages.fr') }}</option>
-    <option value="is">{{ $t('languages.is') }}</option>
-    <option value="it">{{ $t('languages.it') }}</option>
-    <option value="ja">{{ $t('languages.ja') }}</option>
-    <option value="ko">{{ $t('languages.ko') }}</option>
-    <option value="nl-be">{{ $t('languages.nlBE') }}</option>
-    <option value="pl">{{ $t('languages.pl') }}</option>
-    <option value="pt-br">{{ $t('languages.ptBR') }}</option>
-    <option value="pt">{{ $t('languages.pt') }}</option>
-    <option value="ro">{{ $t('languages.ro') }}</option>
-    <option value="ru">{{ $t('languages.ru') }}</option>
-    <option value="sv-se">{{ $t('languages.svSE') }}</option>
-    <option value="zh-cn">{{ $t('languages.zhCN') }}</option>
-    <option value="zh-tw">{{ $t('languages.zhTW') }}</option>
+    <option v-for="(language, value) in locales" :key="value" :value="value">{{ $t('languages.' + language) }}</option>
   </select>
 </template>
 
 <script>
+
 export default {
   name: 'languages',
   props: [ 'locale' ],
+  data() {
+    let dataObj = {
+      locales: {
+        ar: 'ar',
+        de: 'de',
+        en: 'en',
+        es: 'es',
+        fr: 'fr',
+        is: 'is',
+        it: 'it',
+        ja: 'ja',
+        ko: 'ko',
+        'nl-be': 'nlBE',
+        pl: 'pl',
+        'pt-br': 'ptBR',
+        pt: 'pt',
+        ro: 'ro',
+        ru: 'ru',
+        'sv-se': 'svSE',
+        'zh-cn': 'zhCN',
+        'zh-tw': 'zhTW'
+      }
+    };
+
+    Object.defineProperty(dataObj, "locales", { configurable: false, writable: false });
+
+    return dataObj;
+  },
   methods: {
     change (event) {
       this.$emit('update:locale', event.target.value)

frontend/src/components/settings/Themes.vue

@@ -0,0 +1,18 @@
+<template>
+  <select v-on:change="change" :value="theme">
+    <option value="">{{ $t('settings.themes.light') }}</option>
+    <option value="dark">{{ $t('settings.themes.dark') }}</option>
+  </select>
+</template>
+
+<script>
+export default {
+  name: 'themes',
+  props: [ 'theme' ],
+  methods: {
+    change (event) {
+      this.$emit('update:theme', event.target.value)
+    }
+  }
+}
+</script>