mirror of
https://github.com/nocodb/nocodb.git
synced 2026-05-02 17:37:00 +00:00
refactor(gui): linting
Signed-off-by: Pranav C <61551451+pranavxc@users.noreply.github.com>
This commit is contained in:
Pranav C
@@ -1,30 +1,34 @@
|
||||
<template>
|
||||
|
||||
<div>
|
||||
|
||||
<h3 class="text-center mb-5 grey--text text--darken-2">Appearance</h3>
|
||||
<h3 class="text-center mb-5 grey--text text--darken-2">
|
||||
Appearance
|
||||
</h3>
|
||||
|
||||
<v-simple-table dense style="">
|
||||
<template v-slot:default>
|
||||
<template #default>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Dark Mode</td>
|
||||
<td>
|
||||
<v-tooltip bottom>
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-icon @click="toggleDarkTheme" v-on="on" x-large
|
||||
:color="$vuetify.theme.dark ? 'primary':'primary'">
|
||||
mdi-bat
|
||||
</v-icon>
|
||||
</template>
|
||||
<h3 class="pa-3">
|
||||
{{ $vuetify.theme.dark ? 'It does come in Black' : 'Does it come in Black ?' }}
|
||||
<i></i>
|
||||
</h3>
|
||||
</v-tooltip>
|
||||
</td>
|
||||
</tr>
|
||||
<!--<tr>
|
||||
<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>Show metatables</td>
|
||||
<td>
|
||||
<v-tooltip bottom>
|
||||
@@ -38,122 +42,133 @@
|
||||
</v-tooltip>
|
||||
</td>
|
||||
</tr>-->
|
||||
<tr>
|
||||
<td>Show Screensaver</td>
|
||||
<td>
|
||||
<v-tooltip bottom>
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-checkbox v-model="showScreensaver" v-on="on" x-large
|
||||
color="primary">
|
||||
mdi-bat
|
||||
</v-checkbox>
|
||||
</template>
|
||||
Show/hide metatables
|
||||
</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>
|
||||
</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 color="primary" v-model="item">
|
||||
<v-list-item
|
||||
class="mb-n1"
|
||||
v-for="(t,i) in themes"
|
||||
:key="i"
|
||||
: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 class="mx-2" style="height: 20px" v-for="(col,key) in t"
|
||||
:style="{backgroundColor: col}"
|
||||
:key="key">
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<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>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>
|
||||
</div>
|
||||
</v-list-item-content>
|
||||
</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>-->
|
||||
|
||||
</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
|
||||
small
|
||||
btn.class="ma-1 caption"
|
||||
v-for="(col,key) in customTheme"
|
||||
:color="col"
|
||||
:key="key"
|
||||
@click="customKey = key, colorPickerModel= true"
|
||||
tooltip="Click to change the color"
|
||||
> {{ key }}
|
||||
</x-btn>
|
||||
<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>
|
||||
</div>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list-item-group>
|
||||
</v-list>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list-item-group>
|
||||
</v-list>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</template>
|
||||
</v-simple-table>
|
||||
|
||||
|
||||
<v-dialog
|
||||
v-model="colorPickerModel"
|
||||
width="350"
|
||||
>
|
||||
<v-color-picker class="mx-auto my-2" @input="changeTheme(customTheme)" v-if="customTheme[customKey]"
|
||||
v-model="customTheme[customKey]"></v-color-picker>
|
||||
<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 XIcon from "../../global/xIcon";
|
||||
import themes from "../../../helpers/themes";
|
||||
import DlgLabelSubmitCancel from "@/components/utils/dlgLabelSubmitCancel";
|
||||
import themes from '../../../helpers/themes'
|
||||
|
||||
export default {
|
||||
components: {DlgLabelSubmitCancel, XIcon},
|
||||
components: { },
|
||||
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
rightClickCount: 0,
|
||||
tab: null,
|
||||
languages: [
|
||||
{label: 'English', value: 'en'},
|
||||
{ label: 'English', value: 'en' }
|
||||
// {label: 'Japanese', value: 'ja'},
|
||||
// {label: 'Chinese', value: 'zh'}
|
||||
],
|
||||
@@ -168,88 +183,85 @@ export default {
|
||||
customKey: null,
|
||||
colorPickerModel: false,
|
||||
customTheme: {
|
||||
"primary": "#6f5dcc",
|
||||
"secondary": "#BFDBF7",
|
||||
"accent": "#ED254E",
|
||||
"info": "#00CED1",
|
||||
"success": "#4CAF50",
|
||||
"warning": "#FB8C00",
|
||||
error: '#ff0100',
|
||||
primary: '#6f5dcc',
|
||||
secondary: '#BFDBF7',
|
||||
accent: '#ED254E',
|
||||
info: '#00CED1',
|
||||
success: '#4CAF50',
|
||||
warning: '#FB8C00',
|
||||
error: '#ff0100'
|
||||
},
|
||||
themes: themes
|
||||
themes
|
||||
}
|
||||
},
|
||||
fetch ({ store, params }) {
|
||||
},
|
||||
computed: {
|
||||
language: {
|
||||
get() {
|
||||
return this.$store.state.windows.language;
|
||||
}, set(val) {
|
||||
this.$store.commit('windows/MutLanguage', val);
|
||||
get () {
|
||||
return this.$store.state.windows.language
|
||||
},
|
||||
set (val) {
|
||||
this.$store.commit('windows/MutLanguage', val)
|
||||
}
|
||||
},
|
||||
showMetatable: {
|
||||
get() {
|
||||
return this.$store.state.windows.metatables;
|
||||
get () {
|
||||
return this.$store.state.windows.metatables
|
||||
},
|
||||
set(show) {
|
||||
set (show) {
|
||||
this.$store.commit('windows/MutMetatables', show)
|
||||
}
|
||||
},
|
||||
showScreensaver: {
|
||||
get() {
|
||||
return this.$store.state.windows.screensaver;
|
||||
get () {
|
||||
return this.$store.state.windows.screensaver
|
||||
},
|
||||
set(show) {
|
||||
set (show) {
|
||||
this.$store.commit('windows/MutScreensaver', show)
|
||||
}
|
||||
}
|
||||
},
|
||||
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('windows/ActSetTheme', {theme: {...t}, custom: true});
|
||||
await this.$store.dispatch('windows/ActSetTheme', {theme: {...t}, themeName: theme});
|
||||
|
||||
|
||||
},
|
||||
toggleDarkTheme() {
|
||||
this.$store.commit('windows/MutToggleDarkMode');
|
||||
}
|
||||
},
|
||||
fetch({store, params}) {
|
||||
},
|
||||
beforeCreated() {
|
||||
},
|
||||
created() {
|
||||
this.customTheme = {...this.customTheme, ...this.$store.state.windows.customTheme}
|
||||
this.item = this.$store.state.windows.themeName;
|
||||
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};
|
||||
(theme) => {
|
||||
this.customTheme = { ...this.customTheme, ...theme }
|
||||
})
|
||||
|
||||
this.$store.watch(state => state.windows.themeName,
|
||||
theme => {
|
||||
(theme) => {
|
||||
this.$nextTick(() => {
|
||||
if (this.item !== theme) this.item = theme
|
||||
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('windows/ActSetTheme', { theme: { ...t }, custom: true }) }
|
||||
await this.$store.dispatch('windows/ActSetTheme', { theme: { ...t }, themeName: theme })
|
||||
},
|
||||
toggleDarkTheme () {
|
||||
this.$store.commit('windows/MutToggleDarkMode')
|
||||
}
|
||||
},
|
||||
beforeCreated () {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
||||
</style>
|
||||
<!--
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user