From 696b1230a6ae985fb153514392d6b4cf763ff17e Mon Sep 17 00:00:00 2001 From: Michael Mayer Date: Sun, 17 Nov 2019 14:24:48 +0100 Subject: [PATCH] JSON config files for settings page Signed-off-by: Michael Mayer --- assets/config/settings.yml | 2 +- frontend/src/app.js | 41 ++++++++----------- frontend/src/pages/settings/general.vue | 12 +++--- frontend/src/resources/options.json | 18 ++++++++ frontend/src/resources/themes.json | 24 +++++++++++ .../src/{i18n => resources}/translations.json | 0 6 files changed, 65 insertions(+), 32 deletions(-) create mode 100644 frontend/src/resources/options.json create mode 100644 frontend/src/resources/themes.json rename frontend/src/{i18n => resources}/translations.json (100%) diff --git a/assets/config/settings.yml b/assets/config/settings.yml index df5fcf465..5fa9adc01 100644 --- a/assets/config/settings.yml +++ b/assets/config/settings.yml @@ -1,2 +1,2 @@ -theme: dark +theme: default language: en diff --git a/frontend/src/app.js b/frontend/src/app.js index f5d4c2d3d..d27f7b4b2 100644 --- a/frontend/src/app.js +++ b/frontend/src/app.js @@ -11,9 +11,8 @@ import PhotoPrism from "photoprism.vue"; import Router from "vue-router"; import Routes from "routes"; import Session from "session"; -import { Settings } from "luxon"; +import {Settings} from "luxon"; import Socket from "common/websocket"; -import Translations from "./i18n/translations.json"; import Viewer from "common/viewer"; import Vue from "vue"; import Vuetify from "vuetify"; @@ -22,6 +21,10 @@ import VueFilters from "vue2-filters"; import VueFullscreen from "vue-fullscreen"; import VueInfiniteScroll from "vue-infinite-scroll"; +// Resources +import themes from "./resources/themes.json"; +import translations from "./resources/translations.json"; + // Initialize helpers const config = new Config(window.localStorage, window.clientConfig); const viewer = new Viewer(); @@ -38,26 +41,18 @@ Vue.prototype.$socket = Socket; Vue.prototype.$config = config; Vue.prototype.$clipboard = clipboard; +// Theme config +const themeSetting = config.getValue("settings").theme; +const theme = themes[themeSetting] ? themes[themeSetting] : themes["default"]; + // Register Vuetify -Vue.use(Vuetify, { - theme: { - primary: "#FFD600", - secondary: "#b0bec5", - accent: "#00B8D4", - error: "#E57373", - info: "#00B8D4", - success: "#00BFA5", - warning: "#FFD600", - delete: "#E57373", - love: "#EF5350", - }, -}); +Vue.use(Vuetify, { theme }); Vue.config.language = "en"; Settings.defaultLocale = Vue.config.language; // Register other VueJS plugins -Vue.use(GetTextPlugin, {translations: Translations, silent: false, defaultLanguage: Vue.config.language}); +Vue.use(GetTextPlugin, {translations: translations, silent: false, defaultLanguage: Vue.config.language}); Vue.use(VueLuxon); Vue.use(VueInfiniteScroll); Vue.use(VueFullscreen); @@ -75,22 +70,22 @@ const router = new Router({ }); router.beforeEach((to, from, next) => { - if(to.matched.some(record => record.meta.admin)) { + if (to.matched.some(record => record.meta.admin)) { if (isPublic || Session.isAdmin()) { next(); } else { next({ name: "login", - params: { nextUrl: to.fullPath }, + params: {nextUrl: to.fullPath}, }); } - } else if(to.matched.some(record => record.meta.auth)) { + } else if (to.matched.some(record => record.meta.auth)) { if (isPublic || Session.isUser()) { next(); } else { next({ name: "login", - params: { nextUrl: to.fullPath }, + params: {nextUrl: to.fullPath}, }); } } else { @@ -99,9 +94,7 @@ router.beforeEach((to, from, next) => { }); // Run app -/* eslint-disable no-unused-vars */ -const app = new Vue({ - el: "#photoprism", +new Vue({ router, render: h => h(PhotoPrism), -}); +}).$mount("#photoprism"); diff --git a/frontend/src/pages/settings/general.vue b/frontend/src/pages/settings/general.vue index 9534aa4b4..e08c2f93f 100644 --- a/frontend/src/pages/settings/general.vue +++ b/frontend/src/pages/settings/general.vue @@ -5,7 +5,7 @@ import Settings from "model/settings"; + import options from "resources/options.json"; export default { name: 'p-tab-general', data() { return { readonly: this.$config.getValue("readonly"), - active: 0, settings: new Settings(this.$config.values.settings), - list: {}, - themes: [{text: "Dark", value: "dark"}, {text: "Light", value: "light"}], - languages: [{text: "English", value: "en"}], + options: options, }; }, methods: { load() { - this.settings.load().then((r) => { this.list = r.getValues(); }); + this.settings.load(); }, save() { this.settings.save().then(() => { diff --git a/frontend/src/resources/options.json b/frontend/src/resources/options.json new file mode 100644 index 000000000..aac70b6dc --- /dev/null +++ b/frontend/src/resources/options.json @@ -0,0 +1,18 @@ +{ + "languages": [ + { + "text": "English", + "value": "en" + } + ], + "themes": [ + { + "text": "Amber", + "value": "default" + }, + { + "text": "Pink", + "value": "pink" + } + ] +} diff --git a/frontend/src/resources/themes.json b/frontend/src/resources/themes.json new file mode 100644 index 000000000..37012f452 --- /dev/null +++ b/frontend/src/resources/themes.json @@ -0,0 +1,24 @@ +{ + "default": { + "primary": "#FFD600", + "secondary": "#b0bec5", + "accent": "#00B8D4", + "error": "#E57373", + "info": "#00B8D4", + "success": "#00BFA5", + "warning": "#FFD600", + "delete": "#E57373", + "love": "#EF5350" + }, + "pink": { + "primary": "#ff4081", + "secondary": "#b0bec5", + "accent": "#00B8D4", + "error": "#E57373", + "info": "#00B8D4", + "success": "#00BFA5", + "warning": "#FFD600", + "delete": "#E57373", + "love": "#EF5350" + } +} diff --git a/frontend/src/i18n/translations.json b/frontend/src/resources/translations.json similarity index 100% rename from frontend/src/i18n/translations.json rename to frontend/src/resources/translations.json