ngn/safetwitch
1
0
Fork 0
Code Issues 1 Pull Requests 10 Actions Packages Activity

Format

Browse Source
This commit is contained in:
dragongoose
2023-11-04 19:52:55 -04:00
parent 961d3bfa67
commit 4dd94d4af1
20 changed files with 509 additions and 443 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/views/SettingsView.vue
View File

@ -18,7 +18,7 @@ export default {
settings = syncResp.settings
}
let selectedTheme = localStorage.getItem('theme') || "light"
let selectedTheme = localStorage.getItem('theme') || 'light'
return {
settings,
@ -35,7 +35,7 @@ export default {
this.setTheme()
// Reload needed
location.href = "/"
location.href = '/'
},
setTheme() {
localStorage.setItem('theme', this.selectedTheme)
@ -44,15 +44,15 @@ export default {
if (this.selectedTheme == theme) {
return 'border-purple'
}
return "border-none"
return 'border-none'
},
download() {
var hiddenElement = document.createElement('a');
var hiddenElement = document.createElement('a')
hiddenElement.href = 'data:attachment/text,' + encodeURI(JSON.stringify(this.settings));
hiddenElement.target = '_blank';
hiddenElement.download = 'safetwitch_prefs.json';
hiddenElement.click();
hiddenElement.href = 'data:attachment/text,' + encodeURI(JSON.stringify(this.settings))
hiddenElement.target = '_blank'
hiddenElement.download = 'safetwitch_prefs.json'
hiddenElement.click()
},
async handleImport(event: any) {
const file = await event.target.files[0].text()
@ -68,14 +68,14 @@ export default {
this.settings = settings
this.save()
},
}
}
}
</script>
<template>
<div class="mx-auto w-[35rem] max-w-[95vw] p-5 py-3 bg-secondary rounded-md text-contrast">
<h1 class="font-bold text-3xl">{{ $t("nav.settings") }}</h1>
<div class="mx-auto w-[35rem] max-w-[95vw] p-5 py-3 bg-secondary rounded-md text-contrast">
<h1 class="font-bold text-3xl">{{ $t('nav.settings') }}</h1>
<hr class="my-2" />
<ul class="w-full space-y-1">
<li v-for="setting in settings.settings" :key="setting.type">
@ -86,8 +86,12 @@ export default {
<div v-else-if="setting.type == 'option'" class="justify-between items-center flex">
<label :for="setting.name">{{ $t(`settings.${setting.name}`) }}</label>
<select :name="setting.name" type="checkbox" v-model="setting.selected"
class="text-black rounded-md h-8 p-0 pr-8 pl-2">
<select
:name="setting.name"
type="checkbox"
v-model="setting.selected"
class="text-black rounded-md h-8 p-0 pr-8 pl-2"
>
<option v-for="option of setting.options" :key="option" :value="option">
{{ option }}
</option>
@ -96,25 +100,40 @@ export default {
</li>
</ul>
<h1 class="font-bold text-3xl mt-2">{{ $t("main.themes") }}</h1>
<h1 class="font-bold text-3xl mt-2">{{ $t('main.themes') }}</h1>
<hr class="my-2" />
<ul class="flex space-x-2 ">
<ul class="flex space-x-2">
<!--
Use theme colors for preview
-->
<li v-for="theme in themeList" :key="theme.name" class="hover:scale-110 border-2 rounded-md transition-transform"
:class="highlight(theme.name)">
<button @click="selectedTheme = theme.name" class="p-5 py-1.5 border-4 rounded-md"
:style="`border-color: ${theme.extend.colors.primary}; background:${theme.extend.colors.crust}; color:${theme.extend.colors.contrast};`">
<li
v-for="theme in themeList"
:key="theme.name"
class="hover:scale-110 border-2 rounded-md transition-transform"
:class="highlight(theme.name)"
>
<button
@click="selectedTheme = theme.name"
class="p-5 py-1.5 border-4 rounded-md"
:style="`border-color: ${theme.extend.colors.primary}; background:${theme.extend.colors.crust}; color:${theme.extend.colors.contrast};`"
>
<p>{{ theme.name }}</p>
</button>
</li>
</ul>
<div class="space-x-2 mt-3">
<button @click="save" class="bg-surface0 p-4 py-2 rounded-md">{{ $t('settings.saveButton') }}</button>
<button @click="save" class="bg-surface0 p-4 py-2 rounded-md">
{{ $t('settings.saveButton') }}
</button>
<button @click="download" class="bg-surface0 p-4 py-2 rounded-md">Export</button>
<input type="file" @change="handleImport" name="fileinput" ref="fileinput" class="bg-surface0 p-4 py-2 rounded-md">
<input
type="file"
@change="handleImport"
name="fileinput"
ref="fileinput"
class="bg-surface0 p-4 py-2 rounded-md"
/>
</div>
</div>
</template>