people could choose custom colors

components/admin/Plugin.vue

@@ -28,7 +28,7 @@ v-container
           :disable='!valid || loading') {{ $t('common.save') }}
 
   v-card-text
-    v-card(v-for='plugin in plugins' :key='plugin.name' max-width="400" elevation='10' color='secondary' dark)
+    v-card(v-for='plugin in plugins' :key='plugin.name' max-width="400" elevation='10')
       v-card-title {{ plugin.name }}
       v-card-text
         p {{ plugin.description }}

components/admin/Theme.vue

@@ -53,21 +53,38 @@ v-container
 
 
   v-card-title {{$t('admin.colors')}}
-  v-card-text
   //- choose theme colors
-    v-row
-      v-col(v-for='(color, i) in colors' :key='i')
-        v-menu(v-model='menu[i]'
+  v-card-text
+    v-theme-provider(dark)
+      v-card(max-width='450')
+        v-card-text
+          span.mr-2(v-for='(color, i) in settings.dark_colors' :key='i')
+            v-menu(v-model='dark_menu[i]'
                 :close-on-content-click="false"
-            transition="slide-x-transition"
+                transition="slide-y-transition"
                 offset-y
-            absolute
-            bottom
+                top right
                 max-width="290px"
                 min-width="290px")
               template(v-slot:activator='{ on }')
-            v-btn(:color='i' small v-on='on') {{i}}
-          v-color-picker(light :value='color' @update:color='c => updateColor(i, c)')
+                v-btn(:color='color' dark small v-on='on') {{i}}
+              v-color-picker(mode='hexa' :value='color' @update:color='c => updateColor("dark", i, c)')
+
+    v-theme-provider(light)
+      v-card.mt-4(max-width='450')
+        v-card-text
+          span.mr-2(v-for='(color, i) in settings.light_colors' :key='i')
+            v-menu(v-model='light_menu[i]'
+                :close-on-content-click="false"
+                transition="slide-y-transition"
+                offset-y
+                top right
+                max-width="290px"
+                min-width="290px")
+              template(v-slot:activator='{ on }')
+                v-btn(:color='color' small v-on='on') {{i}}
+              v-color-picker(mode='hexa' :value='color' @update:color='c => updateColor("light", i, c)')
+
 
   v-dialog(v-model='linkModal' width='500' :fullscreen='$vuetify.breakpoint.xsOnly')
     v-card
@@ -120,14 +137,8 @@ export default {
       headerImageKey: t,
       link: { href: '', label: '' },
       linkModal: false,
-      menu: [false, false, false, false],
-      colors: { 
-        primary: $store.state.settings['theme.primary'],
-        secondary: $store.state.settings['theme.secondary'],
-        error: $store.state.settings['theme.error'],
-        warning: $store.state.settings['theme.warning'],
-        success: $store.state.settings['theme.success'],
-      }
+      dark_menu: [false, false, false, false],
+      light_menu: [false, false, false, false],
     }
   },
   computed: {
@@ -137,6 +148,7 @@ export default {
       set (value) {
         this.$vuetify.theme.dark = value
         this.setSetting({ key: 'theme.is_dark', value })
+        this.setLocalSetting({ key: 'theme.is_dark', value })
       }
     },
     hide_thumbs: {
@@ -149,7 +161,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['setSetting']),
+    ...mapActions(['setSetting', 'setLocalSetting']),
     reset () {
       this.setSetting({
         key: 'footerLinks',
@@ -183,13 +195,15 @@ export default {
         .then(this.forceHeaderImageReload)
       e.stopPropagation()
     },
-    updateSettingColor: debounce( async function (i, value) { this.setSetting({ key: `theme.${i}`, value: value.hex }) }, 200),
-    updateColor (i, value) {
-      this.$vuetify.theme.themes.dark[i] = this.$vuetify.theme.themes.light[i] = value.hex
-      this.updateSettingColor(i, value)
+    updateSettingColor: debounce( async function (theme, color, value) {
+      const key = `${theme}_colors`
+      this.setSetting({ key, value: { ...this.settings[key], [color]: value.hex } })
+    }, 200),
+    updateColor (theme, color, value) {
+      this.$vuetify.theme.themes[theme][color] = value.hex
+      this.updateSettingColor(theme, color, value)
     },
     openLinkModal () {
-      // this.link = { href: '', label: '' }
       this.linkModal = true
       this.$nextTick(() => this.$refs.linkModalForm.reset())
     },

locales/en.json

@@ -294,7 +294,8 @@
     "tilelayer_test_button": "Test tilelayer",
     "tilelayer_test_success": "The tilelayer service at {service_name} is working",
     "tilelayer_test_error": "The tilelayer service is not reachable at {service_name}",
-    "geolocation": "Geolocation"
+    "geolocation": "Geolocation",
+    "colors": "Colors"
   },
   "auth": {
     "not_confirmed": "Not confirmed yet…",

locales/it.json

@@ -286,7 +286,8 @@
     "tilelayer_test_button": "Test tilelayer",
     "tilelayer_test_success": "Il servizio di tilelayer all'indirizzo {service_name} sta funzionando",
     "tilelayer_test_error": "Il servizio non è raggiungibile all'indirizzo: {service_name}",
-    "geolocation": "Geo e mappe"
+    "geolocation": "Geo e mappe",
+    "colors": "Colori"
   },
   "auth": {
     "not_confirmed": "Non ancora confermato…",

server/api/controller/settings.js

@@ -6,7 +6,6 @@ const sharp = require('sharp')
 const config = require('../../config')
 const generateKeyPair = promisify(crypto.generateKeyPair)
 const log = require('../../log')
-// const locales = require('../../../locales/index')
 const escape = require('lodash/escape')
 const DB = require('../models/models')
 
@@ -41,7 +40,8 @@ const defaultSettings = {
   enable_trusted_instances: true,
   trusted_instances: [],
   'theme.is_dark': true,
-  'theme.primary': '#FF4500',
+  dark_colors: { primary: '#FF6E40', error: '#FF5252', info: '#2196F3', success: '#4CAF50', warning: '#FB8C00' },
+  light_colors: { primary: '#FF4500', error: '#FF5252', info: '#2196F3', success: '#4CAF50', warning: '#FB8C00' },
   trusted_instances_label: '',
   hide_thumbs: false,
   hide_calendar: false,
@@ -102,19 +102,6 @@ const settingsController = {
       await settingsController.set('privateKey', privateKey, true)
     }
 
-    // initialize user_locale
-    // if (config.user_locale && fs.existsSync(path.resolve(config.user_locale))) {
-    //   const user_locales_files = fs.readdirSync(path.resolve(config.user_locale))
-    //     user_locales_files.forEach( f => {
-    //     const locale = path.basename(f ,'.json')
-    //     if (locales[locale]) {
-    //       log.info(`Adding custom locale ${locale}`)
-    //       settingsController.user_locale[locale] = require(path.resolve(config.user_locale, f)).default
-    //     } else {
-    //       log.warning(`Unknown custom user locale: ${locale} [valid locales are ${locales}]`)
-    //     }
-    //   })
-    // }
     const pluginController = require('./plugins')
     pluginController._load()
   },

server/helpers.js

@@ -87,7 +87,8 @@ module.exports = {
       trusted_instances: settings.trusted_instances,
       trusted_instances_label: settings.trusted_instances_label,
       'theme.is_dark': settings['theme.is_dark'],
-      'theme.primary': settings['theme.primary'],
+      dark_colors: settings.dark_colors,
+      light_colors: settings.light_colors,
       hide_thumbs: settings.hide_thumbs,
       hide_calendar: settings.hide_calendar,
       allow_geolocation: settings.allow_geolocation,

vuetify.options.js

@@ -1,25 +1,3 @@
-// import { ca, de, en, es, eu, fr, gl, it, nb, nl, pl, pt, sk, ru, zhHans  } from 'vuetify/lib/locale'
-//     lang: { locales: { ca, de, en, es, eu, fr, gl, it, nb, nl, pl, pt, sk, ru, zhHans } },
-//     treeShake: true,
-//     theme: {
-//       options: {
-//         customProperties: false,
-//         variations: false,
-//         minifyTheme,
-//       },
-//       dark: true,
-//       themes: {
-//         dark: {
-//           primary: '#FF6E40'
-//         },
-//         light: {
-//           primary: '#FF4500'
-//         }
-//       }
-//     },
-//     defaultAssets: false
-//   },
-
 const minifyTheme = require('minify-css-string').default
 import { ca, de, en, es, eu, fr, gl, it, nb, nl, pl, pt, sk, ru, zhHans  } from 'vuetify/es5/locale'
 
@@ -38,12 +16,8 @@ export default ({ res, nuxtState }) => {
       },
       dark: settings['theme.is_dark'],
       themes: {
-        dark: {
-          primary: settings['theme.primary'] || '#FF6E40'
-        },
-        light: {
-          primary: settings['theme.primary'] || '#FF4500'
-        }
+        dark: settings.dark_colors,
+        light: settings.light_colors
       }
     },
     defaultAssets: false