Merge branch 'master' into remove-logout-button

frontend/package.json

@@ -19,18 +19,18 @@
     "noty": "^3.2.0-beta",
     "qrcode.vue": "^1.7.0",
     "vue": "^2.6.10",
-    "vue-i18n": "^8.15.1",
+    "vue-i18n": "^8.15.3",
     "vue-router": "^3.1.3",
     "vuex": "^3.1.2",
     "vuex-router-sync": "^5.0.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.1.1",
+    "@vue/cli-plugin-babel": "^4.1.2",
     "@vue/cli-plugin-eslint": "^4.1.1",
-    "@vue/cli-service": "^4.0.5",
+    "@vue/cli-service": "^4.1.2",
     "babel-eslint": "^10.0.3",
     "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.0.1",
+    "eslint-plugin-vue": "^6.1.2",
     "vue-template-compiler": "^2.6.10"
   },
   "eslintConfig": {

frontend/public/index.html

@@ -14,7 +14,7 @@
   <link rel="icon" type="image/png" sizes="32x32" href="/[{[ .StaticURL ]}]/img/icons/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="/[{[ .StaticURL ]}]/img/icons/favicon-16x16.png">
   <!-- Add to home screen for Android and modern mobile browsers -->
-  <link rel="manifest" id="manifestPlaceholder">
+  <link rel="manifest" id="manifestPlaceholder" crossorigin="use-credentials">
   <meta name="theme-color" content="#2979ff">
 
   <!-- Add to home screen for Safari on iOS -->
@@ -133,6 +133,9 @@
     </div>
   </div>
 
+  [{[ if .Theme -]}]
+    <link rel="stylesheet" href="/[{[ .StaticURL ]}]/themes/[{[ .Theme ]}].css" />
+  [{[ end ]}]
   [{[ if .CSS -]}]
     <link rel="stylesheet" href="/[{[ .StaticURL ]}]/custom.css" />
   [{[ end ]}]

frontend/public/themes/dark.css

@@ -0,0 +1,140 @@
+:root {
+  --background: #121212;
+  --surfacePrimary: #171819;
+  --surfaceSecondary: #212528;
+  --divider: rgba(255, 255, 255, 0.12);
+  --icon: #ffffff;
+  --textPrimary: rgba(255, 255, 255, 0.87);
+  --textSecondary: rgba(255, 255, 255, 0.6);
+}
+
+body {
+  background: var(--background);
+  color: var(--textPrimary);
+}
+
+#loading {
+  background: var(--background);
+}
+#loading .spinner div {
+  background: var(--icon);
+}
+
+#login {
+  background: var(--background);
+}
+
+header {
+  background: var(--surfacePrimary);
+}
+
+#search #input {
+  background: var(--surfaceSecondary);
+}
+#search.active #input,
+#search.active .boxes {
+  background: var(--surfacePrimary);
+}
+#search.active input {
+  color: var(--textPrimary);
+}
+#search.active #result {
+  background: var(--background);
+  color: var(--textPrimary);
+}
+#search.active .boxes h3 {
+  color: var(--textPrimary);
+}
+
+.action {
+  color: var(--textPrimary) !important;
+}
+.action i {
+  color: var(--icon) !important;
+}
+.action .counter {
+  border-color: var(--surfacePrimary);
+}
+
+nav > div {
+  border-color: var(--divider);
+}
+
+#breadcrumbs {
+  border-color: var(--divider);
+  color: var(--textPrimary) !important;
+}
+#breadcrumbs span {
+  color: var(--textPrimary) !important;
+}
+
+#listing .item {
+  background: var(--surfacePrimary);
+  color: var(--textPrimary);
+  border-color: var(--divider) !important;
+}
+#listing .item i {
+  color: var(--icon);
+}
+#listing .item .modified {
+  color: var(--textSecondary);
+}
+#listing h2,
+#listing.list .header span {
+  color: var(--textPrimary) !important;
+}
+#listing.list .header span {
+  color: var(--textPrimary);
+}
+#listing.list .header i {
+  color: var(--icon);
+}
+#listing.list .item.header {
+  background: var(--background);
+}
+
+.card {
+  background: var(--surfacePrimary);
+  color: var(--textPrimary);
+}
+.button--flat:hover {
+  background: var(--surfaceSecondary);
+}
+
+.card h3,
+.dashboard #nav,
+.dashboard p label {
+  color: var(--textPrimary);
+}
+.input {
+  background: var(--surfaceSecondary);
+  color: var(--textPrimary);
+}
+
+.dashboard #nav li,
+.collapsible {
+  border-color: var(--divider);
+}
+.collapsible > label * {
+  color: var(--textPrimary);
+}
+
+.shell {
+  background: var(--surfacePrimary);
+  color: var(--textPrimary);
+}
+
+@media (max-width: 736px) {
+  #file-selection {
+    background: var(--surfaceSecondary) !important;
+  }
+  #file-selection span {
+    color: var(--textPrimary) !important;
+  }
+  nav {
+    background: var(--surfaceSecondary) !important;
+  }
+  #dropdown {
+    background: var(--surfaceSecondary) !important;
+  }
+}

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>

frontend/src/i18n/en.json

@@ -119,6 +119,11 @@
     "newArchetype": "Create a new post based on an archetype. Your file will be created on content folder."
   },
   "settings": {
+    "themes": {
+      "title": "Theme",
+      "light": "Light",
+      "dark": "Dark"
+    },
     "instanceName": "Instance name",
     "brandingDirectoryPath": "Branding directory path",
     "documentation": "documentation",

frontend/src/utils/constants.js

@@ -10,6 +10,7 @@ const logoURL = `/${staticURL}/img/logo.svg`
 const noAuth = window.FileBrowser.NoAuth
 const authMethod = window.FileBrowser.AuthMethod
 const loginPage = window.FileBrowser.LoginPage
+const theme = window.FileBrowser.Theme
 
 export {
   name,
@@ -22,5 +23,6 @@ export {
   version,
   noAuth,
   authMethod,
-  loginPage
+  loginPage,
+  theme
 }

frontend/src/views/Files.vue

@@ -32,7 +32,6 @@ import NotFound from './errors/404'
 import InternalError from './errors/500'
 import Preview from '@/components/files/Preview'
 import Listing from '@/components/files/Listing'
-import Editor from '@/components/files/Editor'
 import { files as api } from '@/api'
 import { mapGetters, mapState, mapMutations } from 'vuex'
 
@@ -48,7 +47,7 @@ export default {
     InternalError,
     Preview,
     Listing,
-    Editor
+    Editor: () => import('@/components/files/Editor')
   },
   computed: {
     ...mapGetters([

frontend/src/views/settings/Global.vue

@@ -29,6 +29,11 @@
           {{ $t('settings.disableExternalLinks') }}
         </p>
 
+        <p>
+          <label for="theme">{{ $t('settings.themes.title') }}</label>
+          <themes class="input input--block" :theme.sync="settings.branding.theme" id="theme"></themes>
+        </p>
+
         <p>
           <label for="branding-name">{{ $t('settings.instanceName') }}</label>
           <input class="input input--block" type="text" v-model="settings.branding.name" id="branding-name" />
@@ -98,10 +103,12 @@ import { mapState } from 'vuex'
 import { settings as api } from '@/api'
 import UserForm from '@/components/settings/UserForm'
 import Rules from '@/components/settings/Rules'
+import Themes from '@/components/settings/Themes'
 
 export default {
   name: 'settings',
   components: {
+    Themes,
     UserForm,
     Rules
   },