From 30a65b4de93836c6c4114590e0cc1778104ec0b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ferdinand=20M=C3=BCtsch?= Date: Sun, 24 Apr 2022 09:26:04 +0200 Subject: [PATCH] chore: minor changes to vibrant colors toggling --- config.default.yml | 2 +- static/assets/js/components/settings.js | 10 +++------- static/assets/js/summary.js | 26 ++++++++++++------------- views/settings.tpl.html | 19 ++++++++++-------- 4 files changed, 28 insertions(+), 29 deletions(-) diff --git a/config.default.yml b/config.default.yml index 7a003c2..261a1d5 100644 --- a/config.default.yml +++ b/config.default.yml @@ -73,4 +73,4 @@ mail: client_secret: quick_start: false # whether to skip initial tasks on application startup, like summary generation -skip_migrations: false # whether to intentionally not run database migrations, only use for dev purposes +skip_migrations: false # whether to intentionally not run database migrations, only use for dev purposes \ No newline at end of file diff --git a/static/assets/js/components/settings.js b/static/assets/js/components/settings.js index 4ad547c..36e356e 100644 --- a/static/assets/js/components/settings.js +++ b/static/assets/js/components/settings.js @@ -2,7 +2,7 @@ PetiteVue.createApp({ //$delimiters: ['${', '}'], // https://github.com/vuejs/petite-vue/pull/100 activeTab: defaultTab, selectedTimezone: userTimeZone, - vibrantColorEnabled: JSON.parse(localStorage.getItem('vibrant-color') || false), + vibrantColorsEnabled: JSON.parse(localStorage.getItem('wakapi_vibrant_colors') || false), get tzOptions() { return [defaultTzOption, ...tzs.sort().map(tz => ({ value: tz, text: tz }))] }, @@ -32,12 +32,8 @@ PetiteVue.createApp({ document.querySelector('#form-delete-user').submit() } }, - toggleVibrantColor() { - let key = 'vibrant-color'; - let value = !(JSON.parse(localStorage.getItem(key) || false)); - localStorage.setItem(key, value); - this.vibrantColorEnabled = value; - return value; + onToggleVibrantColors() { + localStorage.setItem('wakapi_vibrant_colors', this.vibrantColorsEnabled) }, mounted() { this.updateTab() diff --git a/static/assets/js/summary.js b/static/assets/js/summary.js index d222e97..0836a21 100644 --- a/static/assets/js/summary.js +++ b/static/assets/js/summary.js @@ -87,7 +87,7 @@ function draw(subselection) { .filter((c, i) => shouldUpdate(i)) .forEach(c => c.destroy()) - let vibrantColor = JSON.parse(window.localStorage.getItem('vibrant-color') || false); + const vibrantColors = JSON.parse(window.localStorage.getItem('wakapi_vibrant_colors') || false); let projectChart = projectsCanvas && !projectsCanvas.classList.contains('hidden') && shouldUpdate(0) ? new Chart(projectsCanvas.getContext('2d'), { @@ -99,11 +99,11 @@ function draw(subselection) { .slice(0, Math.min(showTopN[0], wakapiData.projects.length)) .map(p => parseInt(p.total)), backgroundColor: wakapiData.projects.map((p, i) => { - const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length)) + const c = hexToRgb(vibrantColors ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length)) return `rgba(${c.r}, ${c.g}, ${c.b}, 1)` }), hoverBackgroundColor: wakapiData.projects.map((p, i) => { - const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length)) + const c = hexToRgb(vibrantColors ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length)) return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)` }), }], @@ -154,11 +154,11 @@ function draw(subselection) { .slice(0, Math.min(showTopN[1], wakapiData.operatingSystems.length)) .map(p => parseInt(p.total)), backgroundColor: wakapiData.operatingSystems.map((p, i) => { - const c = hexToRgb(vibrantColor ? (osColors[p.key.toLowerCase()] || getRandomColor(p.key)) : getColor(p.key, i)) + const c = hexToRgb(vibrantColors ? (osColors[p.key.toLowerCase()] || getRandomColor(p.key)) : getColor(p.key, i)) return `rgba(${c.r}, ${c.g}, ${c.b}, 1)` }), hoverBackgroundColor: wakapiData.operatingSystems.map((p, i) => { - const c = hexToRgb(vibrantColor ? (osColors[p.key.toLowerCase()] || getRandomColor(p.key)) : getColor(p.key, i)) + const c = hexToRgb(vibrantColors ? (osColors[p.key.toLowerCase()] || getRandomColor(p.key)) : getColor(p.key, i)) return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)` }), borderWidth: 0 @@ -191,11 +191,11 @@ function draw(subselection) { .slice(0, Math.min(showTopN[2], wakapiData.editors.length)) .map(p => parseInt(p.total)), backgroundColor: wakapiData.editors.map((p, i) => { - const c = hexToRgb(vibrantColor ? (editorColors[p.key.toLowerCase()] || getRandomColor(p.key)) : getColor(p.key, i)) + const c = hexToRgb(vibrantColors ? (editorColors[p.key.toLowerCase()] || getRandomColor(p.key)) : getColor(p.key, i)) return `rgba(${c.r}, ${c.g}, ${c.b}, 1)` }), hoverBackgroundColor: wakapiData.editors.map((p, i) => { - const c = hexToRgb(vibrantColor ? (editorColors[p.key.toLowerCase()] || getRandomColor(p.key)) : getColor(p.key, i)) + const c = hexToRgb(vibrantColors ? (editorColors[p.key.toLowerCase()] || getRandomColor(p.key)) : getColor(p.key, i)) return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)` }), borderWidth: 0 @@ -268,11 +268,11 @@ function draw(subselection) { .slice(0, Math.min(showTopN[4], wakapiData.machines.length)) .map(p => parseInt(p.total)), backgroundColor: wakapiData.machines.map((p, i) => { - const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i)) + const c = hexToRgb(vibrantColors ? getRandomColor(p.key) : getColor(p.key, i)) return `rgba(${c.r}, ${c.g}, ${c.b}, 1)` }), hoverBackgroundColor: wakapiData.machines.map((p, i) => { - const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i)) + const c = hexToRgb(vibrantColors ? getRandomColor(p.key) : getColor(p.key, i)) return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)` }), borderWidth: 0 @@ -305,11 +305,11 @@ function draw(subselection) { .slice(0, Math.min(showTopN[5], wakapiData.labels.length)) .map(p => parseInt(p.total)), backgroundColor: wakapiData.labels.map((p, i) => { - const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i)) + const c = hexToRgb(vibrantColors ? getRandomColor(p.key) : getColor(p.key, i)) return `rgba(${c.r}, ${c.g}, ${c.b}, 1)` }), hoverBackgroundColor: wakapiData.labels.map((p, i) => { - const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i)) + const c = hexToRgb(vibrantColors ? getRandomColor(p.key) : getColor(p.key, i)) return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)` }), borderWidth: 0 @@ -342,11 +342,11 @@ function draw(subselection) { .slice(0, Math.min(showTopN[6], wakapiData.branches.length)) .map(p => parseInt(p.total)), backgroundColor: wakapiData.branches.map((p, i) => { - const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length)) + const c = hexToRgb(vibrantColors ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length)) return `rgba(${c.r}, ${c.g}, ${c.b}, 1)` }), hoverBackgroundColor: wakapiData.branches.map((p, i) => { - const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length)) + const c = hexToRgb(vibrantColors ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length)) return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)` }), }], diff --git a/views/settings.tpl.html b/views/settings.tpl.html index 559698a..9d459a7 100644 --- a/views/settings.tpl.html +++ b/views/settings.tpl.html @@ -369,7 +369,10 @@
- +
@@ -395,7 +398,7 @@ (in days; 0 = not public, -1 = unlimited) -
+
@@ -406,7 +409,7 @@
-
+
@@ -434,7 +437,7 @@
-
+
@@ -462,7 +465,7 @@
-
+