mirror
/
wakapi
mirror of https://github.com/muety/wakapi.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

chore: minor changes to vibrant colors toggling

This commit is contained in:
Ferdinand Mütsch 2022-04-24 09:26:04 +02:00
parent 9048a8eb7a
commit 30a65b4de9
4 changed files with 28 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config.default.yml
View File

@ -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

10
static/assets/js/components/settings.js
View File

@ -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()

26
static/assets/js/summary.js
View File

@ -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)`
}),
}],

19
views/settings.tpl.html
View File

@ -369,7 +369,10 @@
<div class="w-full md:w-2/3 inline-block">
<div class="flex-col items-center w-full text-gray-500 text-sm">
<input class="flex cursor-pointer h-4 w-4" type="checkbox" id="vibrant-color-toggle" @click="toggleVibrantColor" v-model="vibrantColorEnabled">
<select autocomplete="off" id="vibrant-color-toggle" class="select-default" style="max-width: 6rem" v-model="vibrantColorsEnabled" @change="onToggleVibrantColors">
<option value="false" class="cursor-pointer">Disabled</option>
<option value="true" class="cursor-pointer">Enabled</option>
</select>
</div>
</div>
</div>
@ -395,7 +398,7 @@
<label class="font-semibold text-gray-300" for="max_days">Time Range</label>
<span class="block text-sm text-gray-600">(in days; 0 = not public, -1 = unlimited)</span>
</div>
<div >
<div>
<input class="input-default"
style="max-width: 80px" type="number" id="max_days" name="max_days" min="-1" required
value="{{ .User.ShareDataMaxDays }}">
@ -406,7 +409,7 @@
<div class="flex-grow">
<label class="font-semibold text-gray-300" for="share_projects">Share Projects</label>
</div>
<div >
<div>
<select autocomplete="off" id="share_projects" name="share_projects" class="select-default flex-grow">
<option value="false" class="cursor-pointer" {{ if not .User.ShareProjects }} selected {{ end }}>No
</option>
@ -420,7 +423,7 @@
<div class="flex-grow">
<label class="font-semibold text-gray-300" for="share_languages">Share Languages</label>
</div>
<div >
<div>
<select autocomplete="off" id="share_languages" name="share_languages" class="select-default flex-grow">
<option value="false" class="cursor-pointer" {{ if not .User.ShareLanguages }} selected {{ end }}>No
</option>
@ -434,7 +437,7 @@
<div class="flex-grow">
<label class="font-semibold text-gray-300" for="share_editors">Share Editors</label>
</div>
<div >
<div>
<select autocomplete="off" id="share_editors" name="share_editors" class="select-default flex-grow">
<option value="false" class="cursor-pointer" {{ if not .User.ShareEditors }} selected {{ end }}>No
</option>
@ -448,7 +451,7 @@
<div class="flex-grow">
<label class="font-semibold text-gray-300" for="share_oss">Share OS'</label>
</div>
<div >
<div>
<select autocomplete="off" id="share_oss" name="share_oss" class="select-default flex-grow">
<option value="false" class="cursor-pointer" {{ if not .User.ShareOSs }} selected {{ end }}>No
</option>
@ -462,7 +465,7 @@
<div class="flex-grow">
<label class="font-semibold text-gray-300" for="share_machines">Share Machines</label>
</div>
<div >
<div>
<select autocomplete="off" id="share_machines" name="share_machines" class="select-default flex-grow">
<option value="false" class="cursor-pointer" {{ if not .User.ShareMachines }} selected {{ end }}>No
</option>
@ -476,7 +479,7 @@
<div class="flex-grow">
<label class="font-semibold text-gray-300" for="share_labels">Share Project Labels</label>
</div>
<div >
<div>
<select autocomplete="off" id="share_labels" name="share_labels" class="select-default flex-grow">
<option value="false" class="cursor-pointer" {{ if not .User.ShareLabels }} selected {{ end }}>No
</option>