多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

306 lines
9.1 KiB

<template>
<div>
<h3 class="text-center mb-5 grey--text text--darken-2">
Appearance
</h3>
<v-simple-table dense style="">
<template #default>
<tbody>
<tr>
<td>Dark Mode</td>
<td>
<v-tooltip bottom>
<template #activator="{ on }">
<v-icon
x-large
:color="$vuetify.theme.dark ? 'primary':'primary'"
@click="toggleDarkTheme($vuetify.theme.dark)"
v-on="on"
>
mdi-bat
</v-icon>
</template>
<h3 class="pa-3">
{{ $vuetify.theme.dark ? 'It does come in Black' : 'Does it come in Black ?' }}
<i />
</h3>
</v-tooltip>
</td>
</tr>
<!--<tr>
<td>Show metatables</td>
<td>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-checkbox v-model="showMetatable" v-on="on" x-large
color="primary">
mdi-bat
</v-checkbox>
</template>
Show/hide metatables
</v-tooltip>
</td>
</tr>-->
<!-- <tr>
<td>Show Screensaver</td>
<td>
<v-tooltip bottom>
<template #activator="{ on }">
<v-checkbox
v-model="showScreensaver"
x-large
color="primary"
v-on="on"
>
mdi-bat
</v-checkbox>
</template>
Show/hide metatables
</v-tooltip>
</td>
</tr>-->
<tr>
<td>Themes</td>
<td class="pa-1">
<v-list rounded>
<!-- <v-subheader>REPORTS</v-subheader>-->
<v-list-item-group v-model="item" color="primary">
<v-list-item
v-for="(t,i) in themes"
:key="i"
class="mb-n1"
:value="i"
@click.native.prevent.stop="changeTheme(t,i)"
>
<v-list-item-content class="py-0">
<div class="d-flex align-center" style="width:100%">
<div style="width: 100px">
{{ i }}
</div>
<div class="flex-grow-1">
<v-container fluid class="pa-0">
<v-row>
<v-col
v-for="(col,key) in t"
:key="key"
class="mx-2"
style="height: 20px"
:style="{backgroundColor: col}"
/>
</v-row>
</v-container>
</div>
</div>
</v-list-item-content>
</v-list-item>
<v-list-item
class="mb-n2"
value="Custom"
@click.native.prevent.stop="changeTheme(customTheme,'Custom')"
>
<v-list-item-content class="py-0">
<div class="d-flex align-center" style="width:100%">
<div style="min-width: 100px">
Custom
</div>
<div class="flex-grow-1">
<!-- <v-container fluid>-->
<x-btn
v-for="(col,key) in customTheme"
:key="key"
small
btn.class="ma-1 caption"
:color="col"
tooltip="Click to change the color"
@click="customKey = key, colorPickerModel= true"
>
{{ key }}
</x-btn>
</div>
</div>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</td>
</tr>
<tr>
<td>Show M2M Tables</td>
<td>
<v-tooltip bottom>
<template #activator="{ on }">
<v-checkbox
v-model="includeM2M"
v-t="[`c:themes:show-m2m-tables`]"
x-large
color="primary"
v-on="on"
>
mdi-table-network
</v-checkbox>
</template>
Include/Exclude M2M tables
</v-tooltip>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
<v-dialog
v-model="colorPickerModel"
width="350"
>
<v-color-picker
v-if="customTheme[customKey]"
v-model="customTheme[customKey]"
class="mx-auto my-2"
@input="changeTheme(customTheme)"
/>
</v-dialog>
</div>
</template>
<script>
import themes from '../../../helpers/themes'
export default {
components: { },
data() {
return {
rightClickCount: 0,
tab: null,
languages: [
{ label: 'English', value: 'en' }
// {label: 'Japanese', value: 'ja'},
// {label: 'Chinese', value: 'zh'}
],
item: 'default',
primary: '',
colors: [
'#ea4235',
'#4CAF50',
'#FF9800',
'#0288D1'
],
customKey: null,
colorPickerModel: false,
customTheme: {
primary: '#6f5dcc',
secondary: '#BFDBF7',
accent: '#ED254E',
info: '#00CED1',
success: '#4CAF50',
warning: '#FB8C00',
error: '#ff0100'
},
themes
}
},
fetch({ store, params }) {
},
computed: {
language: {
get() {
return this.$store.state.settings.language
},
set(val) {
this.$store.commit('settings/MutLanguage', val)
}
},
showMetatable: {
get() {
return this.$store.state.settings.metatables
},
set(show) {
this.$store.commit('settings/MutMetatables', show)
}
},
showScreensaver: {
get() {
return this.$store.state.settings.screensaver
},
set(show) {
this.$store.commit('settings/MutScreensaver', show)
}
},
includeM2M: {
get() {
return this.$store.state.settings.includeM2M
},
set(show) {
this.$store.commit('settings/MutIncludeM2M', show)
}
}
},
created() {
this.customTheme = { ...this.customTheme, ...this.$store.state.settings.customTheme }
this.item = this.$store.state.settings.themeName
this.$store.watch(
state => state.settings.customTheme,
(theme) => {
this.customTheme = { ...this.customTheme, ...theme }
})
this.$store.watch(state => state.settings.themeName,
(theme) => {
this.$nextTick(() => {
if (this.item !== theme) { this.item = theme }
})
})
},
methods: {
rightClick() {
this.rightClickCount++
if (this.rightClickCount > 5) {
// require('electron').remote.getCurrentWindow().toggleDevTools();
this.rightClickCount = 0
}
},
async changeTheme(t, theme = 'Custom') {
this.item = theme
if (theme === 'Custom') { await this.$store.dispatch('settings/ActSetTheme', { theme: { ...t }, custom: true }) }
await this.$store.dispatch('settings/ActSetTheme', { theme: { ...t }, themeName: theme })
this.$e('c:themes:change', { mode: theme })
},
toggleDarkTheme(mode) {
this.$store.commit('settings/MutToggleDarkMode')
this.$e('c:themes:dark-mode', { dark: mode })
}
},
beforeCreated() {
}
}
</script>
<style scoped>
</style>
<!--
/**
* @copyright Copyright (c) 2021, Xgene Cloud Ltd
*
* @author Naveen MR <oof1lab@gmail.com>
* @author Pranav C Balan <pranavxc@gmail.com>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
-->