mirror of https://github.com/nocodb/nocodb
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.
574 lines
21 KiB
574 lines
21 KiB
<template> |
|
<v-dialog |
|
v-model="dialogShow" |
|
width="60%" |
|
> |
|
<v-container> |
|
<v-card class="pa-10"> |
|
<v-icon class="float-right " color="error" @click="dialogShow = false"> |
|
mdi-close-box-outline |
|
</v-icon> |
|
<p class="text-center" /><p class="display-1 text-center"> |
|
NocoDB: Settings |
|
</p> |
|
|
|
<v-tabs |
|
v-model="tab" |
|
color="pink" |
|
> |
|
<v-tabs-slider /> |
|
|
|
<v-tab |
|
href="#tab-theme" |
|
> |
|
Appearance |
|
</v-tab> |
|
|
|
<v-tab-item |
|
value="tab-theme" |
|
> |
|
<v-card |
|
flat |
|
tile |
|
> |
|
<v-simple-table dense style="border: 1px solid grey"> |
|
<template #default> |
|
<!-- <thead>--> |
|
<!-- <tr>--> |
|
<!-- <th class="text-left " width="25%">Name</th>--> |
|
<!-- <th class="text-left ">Value</th>--> |
|
<!-- </tr>--> |
|
<!-- </thead>--> |
|
<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" |
|
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>Language</td> |
|
<td> |
|
<v-radio-group v-model="language" row> |
|
<v-radio |
|
v-for="{label,value} in languages" |
|
:key="value" |
|
:label="label" |
|
:value="value" |
|
/> |
|
</v-radio-group> |
|
</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> |
|
</tbody> |
|
</template> |
|
</v-simple-table> |
|
</v-card> |
|
</v-tab-item> |
|
|
|
<!-- <v-tab--> |
|
<!-- href="#tab-telemetry"--> |
|
<!-- >--> |
|
<!-- Telemetry--> |
|
<!-- </v-tab>--> |
|
|
|
<!-- <v-tab-item--> |
|
<!-- value="tab-telemetry"--> |
|
<!-- >--> |
|
<!-- <v-card--> |
|
<!-- flat--> |
|
<!-- tile--> |
|
<!-- >--> |
|
<!-- <v-simple-table dense style="border: 1px solid grey">--> |
|
<!-- <template v-slot:default>--> |
|
<!-- <!– <thead>–>--> |
|
<!-- <!– <tr>–>--> |
|
<!-- <!– <th class="text-left" width="25%">Name</th>–>--> |
|
<!-- <!– <th class="text-left">Value</th>–>--> |
|
<!-- <!– </tr>–>--> |
|
<!-- <!– </thead>–>--> |
|
<!-- <tbody>--> |
|
<!-- <tr>--> |
|
<!-- <td class="py-2">Error Reporting--> |
|
<!-- <x-icon small tooltip="For crash reports we use sentry.io">mdi-information-outline</x-icon>--> |
|
<!-- </td>--> |
|
|
|
<!-- <td class="py-2">--> |
|
<!-- <v-switch--> |
|
<!-- flat--> |
|
<!-- v-model="isErrorReportingEnabled"--> |
|
<!-- color="grey "--> |
|
<!-- @click.prevent.stop="toggleLogReport"--> |
|
<!-- ></v-switch>--> |
|
<!-- </td>--> |
|
<!-- </tr>--> |
|
<!-- <tr>--> |
|
<!-- <td class="py-2">Google Analytics</td>--> |
|
<!-- <td class="py-2" style="position: relative">--> |
|
|
|
<!-- <v-switch--> |
|
<!-- v-if="$store.state.users.ui_ability.rules.disableGA"--> |
|
<!-- v-model="isGaEnabled"--> |
|
<!-- color="grey "--> |
|
<!-- flat--> |
|
<!-- @click.prevent.stop="toggleGa"--> |
|
<!-- ></v-switch>--> |
|
|
|
<!-- <v-tooltip--> |
|
<!-- right--> |
|
<!-- bottom--> |
|
<!-- v-else>--> |
|
<!-- <template v-slot:activator="{on}">--> |
|
<!-- <div--> |
|
<!-- v-on="on">--> |
|
<!-- <v-switch--> |
|
<!-- v-model="isGaEnabled"--> |
|
<!-- disabled--> |
|
<!-- color="grey "--> |
|
<!-- flat--> |
|
<!-- ></v-switch>--> |
|
<!-- </div>--> |
|
<!-- </template>--> |
|
<!-- Only Enterprise user can disable Google Analytics--> |
|
<!-- </v-tooltip>--> |
|
|
|
<!-- </td>--> |
|
<!-- </tr>--> |
|
<!-- <tr>--> |
|
<!-- <td class="py-2"> Telemetry--> |
|
<!-- <x-icon small--> |
|
<!-- tooltip="Only count of {Tables, APIs, Relations}, Time taken for api creation and tool-uuid"--> |
|
<!-- >--> |
|
<!-- mdi-information-outline--> |
|
<!-- </x-icon>--> |
|
<!-- </td>--> |
|
<!-- <td class="py-2">--> |
|
|
|
<!-- <v-switch--> |
|
<!-- v-if="$store.state.users.ui_ability.rules.disableTelemetry"--> |
|
<!-- flat--> |
|
<!-- disabled--> |
|
<!-- v-model="isTelemetryEnabled"--> |
|
<!-- color="grey "--> |
|
<!-- ></v-switch>--> |
|
<!-- <v-tooltip--> |
|
<!-- v-else--> |
|
<!-- right--> |
|
<!-- bottom>--> |
|
<!-- <template v-slot:activator="{on}">--> |
|
<!-- <div--> |
|
<!-- v-on="on">--> |
|
<!-- <v-switch--> |
|
<!-- flat--> |
|
<!-- disabled--> |
|
<!-- v-model="isTelemetryEnabled"--> |
|
<!-- color="grey "--> |
|
<!-- ></v-switch>--> |
|
<!-- </div>--> |
|
<!-- </template>--> |
|
<!-- Only Enterprise user can disable Telemetry--> |
|
<!-- </v-tooltip>--> |
|
<!-- </td>--> |
|
<!-- </tr>--> |
|
<!-- </tbody>--> |
|
<!-- </template>--> |
|
<!-- </v-simple-table>--> |
|
|
|
<!-- </v-card>--> |
|
<!-- </v-tab-item>--> |
|
|
|
<v-tab |
|
href="#tab-other" |
|
> |
|
Version & Updates |
|
</v-tab> |
|
|
|
<v-tab-item |
|
value="tab-other" |
|
> |
|
<v-card |
|
flat |
|
tile |
|
> |
|
<v-simple-table dense style="border: 1px solid grey"> |
|
<template #default> |
|
<!-- <thead>--> |
|
<!-- <tr>--> |
|
<!-- <th class="text-left " width="25%">Name</th>--> |
|
<!-- <th class="text-left ">Value</th>--> |
|
<!-- </tr>--> |
|
<!-- </thead>--> |
|
<tbody> |
|
<tr> |
|
<td> |
|
Version |
|
</td> |
|
<td> |
|
<span @contextmenu="rightClick">{{ $store.state.windows.version }}</span> |
|
</td> |
|
</tr> |
|
<!-- <tr>--> |
|
<!-- <td>--> |
|
<!-- Check for updates--> |
|
<!-- </td>--> |
|
<!-- <td>--> |
|
<!-- <v-switch--> |
|
<!-- flat--> |
|
<!-- v-model="checkForUpdate"--> |
|
<!-- color="grey "--> |
|
<!-- ></v-switch>--> |
|
<!-- </td>--> |
|
<!-- </tr>--> |
|
<tr @dblclick="enableAppRefresh = true"> |
|
<td> |
|
Auto update |
|
</td> |
|
<td> |
|
<v-switch |
|
v-model="autoUpdate" |
|
flat |
|
color="grey " |
|
/> |
|
</td> |
|
</tr> |
|
<tr v-if="enableAppRefresh"> |
|
<td> |
|
Application refresh |
|
</td> |
|
<td> |
|
<v-btn @click="applicationRefresh"> |
|
Refresh |
|
</v-btn> |
|
</td> |
|
</tr> |
|
</tbody> |
|
</template> |
|
</v-simple-table> |
|
</v-card> |
|
</v-tab-item> |
|
</v-tabs> |
|
</v-card> |
|
<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> |
|
|
|
<dlgLabelSubmitCancel |
|
v-if="dialogShow" |
|
:dialog-show="gaDialogShow" |
|
:actions-mtd="gaDialogFunction" |
|
heading="Click submit to disable Google Analytics." |
|
type="primary" |
|
/> |
|
|
|
<dlgLabelSubmitCancel |
|
v-if="dialogShow" |
|
:dialog-show="logReportDialogShow" |
|
:actions-mtd="logReportDialogFunction" |
|
heading="Error reporting helps us to build a better product. Press cancel to help us build a better product ?" |
|
type="primary" |
|
/> |
|
</v-container> |
|
</v-dialog> |
|
</template> |
|
<script> |
|
|
|
import themes from '../helpers/themes' |
|
import dlgLabelSubmitCancel from './utils/dlgLabelSubmitCancel' |
|
|
|
export default { |
|
components: { dlgLabelSubmitCancel }, |
|
directives: {}, |
|
validate({ params }) { |
|
return true |
|
}, |
|
props: { value: Boolean }, |
|
|
|
data() { |
|
return { |
|
rightClickCount: 0, |
|
enableAppRefresh: false, |
|
tab: null, |
|
gaDialogShow: false, |
|
logReportDialogShow: false, |
|
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: { |
|
checkForUpdate: { |
|
get() { |
|
return this.$store.state.windows.checkForUpdate |
|
}, |
|
set(value) { |
|
this.$store.commit('windows/MutCheckForUpdate', value) |
|
} |
|
}, |
|
autoUpdate: { |
|
get() { |
|
return this.$store.state.windows.downloadAndUpdateRelease |
|
}, |
|
set(value) { |
|
this.$store.commit('windows/MutDownloadAndUpdateRelease', value) |
|
} |
|
}, |
|
isGaEnabled: { |
|
get() { |
|
return this.$store.state.windows.isGaEnabled |
|
}, |
|
set(value) { |
|
this.$store.commit('windows/MutToggleGaEnabled', value) |
|
} |
|
}, |
|
isErrorReportingEnabled: { |
|
get() { |
|
return this.$store.state.windows.isErrorReportingEnabled |
|
}, |
|
set(value) { |
|
this.$store.commit('windows/MutToggleErrorReportingEnabled', value) |
|
} |
|
}, |
|
isTelemetryEnabled: { |
|
get() { |
|
return this.$store.state.windows.isErrorReportingEnabled |
|
}, |
|
set(value) { |
|
this.$store.commit('windows/MutToggleTelemetryEnabled', value) |
|
} |
|
}, |
|
dialogShow: { |
|
get() { |
|
return this.value |
|
}, |
|
set(val) { |
|
this.$emit('input', val) |
|
} |
|
}, |
|
language: { |
|
get() { |
|
return this.$store.state.windows.language |
|
}, |
|
set(val) { |
|
this.$store.commit('windows/MutSetLanguage', val) |
|
} |
|
} |
|
}, |
|
watch: {}, |
|
created() { |
|
this.customTheme = { ...this.customTheme, ...this.$store.state.windows.customTheme } |
|
this.item = this.$store.state.windows.themeName |
|
this.$store.watch( |
|
state => state.windows.customTheme, |
|
(theme) => { |
|
this.customTheme = { ...this.customTheme, ...theme } |
|
}) |
|
|
|
this.$store.watch(state => state.windows.themeName, |
|
(theme) => { |
|
this.$nextTick(() => { |
|
if (this.item !== theme) { this.item = theme } |
|
}) |
|
}) |
|
}, |
|
beforeMount() { |
|
}, |
|
async mounted() { |
|
|
|
}, |
|
beforeDestroy() { |
|
}, |
|
methods: { |
|
rightClick() { |
|
this.rightClickCount++ |
|
if (this.rightClickCount > 5) { |
|
// require('electron').remote.getCurrentWindow().toggleDevTools(); |
|
this.rightClickCount = 0 |
|
} |
|
}, |
|
async applicationRefresh() { |
|
localStorage.removeItem('vuex') |
|
location.reload() |
|
}, |
|
toggleGa(event) { |
|
if (this.isGaEnabled) { |
|
this.gaDialogShow = true |
|
} else { this.isGaEnabled = true } |
|
}, |
|
toggleLogReport(event) { |
|
if (this.isErrorReportingEnabled) { |
|
this.logReportDialogShow = true |
|
} else { this.isErrorReportingEnabled = true } |
|
}, |
|
logReportDialogFunction(action) { |
|
if (action !== 'hideDialog' && this.$store.state.users.user && this.$store.state.users.user.email) { |
|
this.isErrorReportingEnabled = false |
|
} else { |
|
this.$toast.error('Only a registered user can disable Error Reporting, Please Login then disable.').goAway(5000) |
|
} |
|
this.logReportDialogShow = false |
|
}, |
|
gaDialogFunction(action) { |
|
if (action !== 'hideDialog') { |
|
if (this.$store.state.users.user && this.$store.state.users.user.email) { |
|
this.isGaEnabled = false |
|
} else { |
|
this.$toast.error('Only a registered user can disable Google Analytics, Please Login then disable.').goAway(5000) |
|
} |
|
} |
|
this.gaDialogShow = false |
|
}, |
|
async changeTheme(t, theme = 'Custom') { |
|
this.item = theme |
|
if (theme === 'Custom') { await this.$store.dispatch('windows/ActSetTheme', { theme: { ...t }, custom: true }) } |
|
await this.$store.dispatch('windows/ActSetTheme', { theme: { ...t }, themeName: theme }) |
|
}, |
|
toggleDarkTheme() { |
|
this.$store.commit('windows/MutToggleDarkMode') |
|
} |
|
}, |
|
beforeCreated() { |
|
}, |
|
destroy() { |
|
} |
|
} |
|
</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/>. |
|
* |
|
*/ |
|
-->
|
|
|