mirror of https://github.com/Fabio286/antares.git
535 lines
22 KiB
Vue
535 lines
22 KiB
Vue
<template>
|
|
<div id="settings" class="modal active">
|
|
<a class="modal-overlay c-hand" @click="closeModal" />
|
|
<div class="modal-container">
|
|
<div class="modal-header pl-2">
|
|
<div class="modal-title h6">
|
|
<div class="d-flex">
|
|
<i class="mdi mdi-24px mdi-cog mr-1" />
|
|
<span class="cut-text">{{ $t('word.settings') }}</span>
|
|
</div>
|
|
</div>
|
|
<a class="btn btn-clear c-hand" @click="closeModal" />
|
|
</div>
|
|
<div class="modal-body p-0">
|
|
<div class="panel">
|
|
<div class="panel-nav">
|
|
<ul class="tab tab-block">
|
|
<li
|
|
class="tab-item c-hand"
|
|
:class="{'active': selectedTab === 'general'}"
|
|
@click="selectTab('general')"
|
|
>
|
|
<a class="tab-link">{{ $t('word.general') }}</a>
|
|
</li>
|
|
<li
|
|
class="tab-item c-hand"
|
|
:class="{'active': selectedTab === 'themes'}"
|
|
@click="selectTab('themes')"
|
|
>
|
|
<a class="tab-link">{{ $t('word.themes') }}</a>
|
|
</li>
|
|
<li
|
|
v-if="updateStatus !== 'disabled'"
|
|
class="tab-item c-hand"
|
|
:class="{'active': selectedTab === 'update'}"
|
|
@click="selectTab('update')"
|
|
>
|
|
<a class="tab-link" :class="{'badge badge-update': hasUpdates}">{{ $t('word.update') }}</a>
|
|
</li>
|
|
<li
|
|
class="tab-item c-hand"
|
|
:class="{'active': selectedTab === 'changelog'}"
|
|
@click="selectTab('changelog')"
|
|
>
|
|
<a class="tab-link">{{ $t('word.changelog') }}</a>
|
|
</li>
|
|
<li
|
|
class="tab-item c-hand"
|
|
:class="{'active': selectedTab === 'about'}"
|
|
@click="selectTab('about')"
|
|
>
|
|
<a class="tab-link">{{ $t('word.about') }}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div v-show="selectedTab === 'general'" class="panel-body py-4">
|
|
<div class="container">
|
|
<form class="form-horizontal columns">
|
|
<div class="column col-12 h6 text-uppercase mb-1">
|
|
{{ $t('word.application') }}
|
|
</div>
|
|
<div class="column col-9 col-sm-12 mb-2">
|
|
<div class="form-group">
|
|
<div class="col-7 col-sm-12">
|
|
<label class="form-label">
|
|
<i class="mdi mdi-18px mdi-translate mr-1" />
|
|
{{ $t('word.language') }}
|
|
</label>
|
|
</div>
|
|
<div class="col-5 col-sm-12">
|
|
<select
|
|
v-model="localLocale"
|
|
class="form-select"
|
|
@change="changeLocale(localLocale)"
|
|
>
|
|
<option
|
|
v-for="(locale, key) in locales"
|
|
:key="key"
|
|
:value="locale.code"
|
|
>
|
|
{{ locale.name }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-7 col-sm-12">
|
|
<label class="form-label">
|
|
{{ $t('message.dataTabPageSize') }}
|
|
</label>
|
|
</div>
|
|
<div class="col-5 col-sm-12">
|
|
<select
|
|
v-model="localPageSize"
|
|
class="form-select"
|
|
@change="changePageSize(+localPageSize)"
|
|
>
|
|
<option
|
|
v-for="size in pageSizes"
|
|
:key="size"
|
|
>
|
|
{{ size }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group mb-0">
|
|
<div class="col-7 col-sm-12">
|
|
<label class="form-label">
|
|
{{ $t('message.restorePreviourSession') }}
|
|
</label>
|
|
</div>
|
|
<div class="col-5 col-sm-12">
|
|
<label class="form-switch d-inline-block" @click.prevent="toggleRestoreSession">
|
|
<input type="checkbox" :checked="restoreTabs">
|
|
<i class="form-icon" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-7 col-sm-12">
|
|
<label class="form-label">
|
|
{{ $t('message.notificationsTimeout') }}
|
|
</label>
|
|
</div>
|
|
<div class="col-5 col-sm-12">
|
|
<div class="input-group">
|
|
<input
|
|
v-model="localTimeout"
|
|
class="form-input"
|
|
type="number"
|
|
min="1"
|
|
@focusout="checkNotificationsTimeout"
|
|
>
|
|
<span class="input-group-addon">{{ $t('word.seconds') }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column col-12 h6 mt-4 text-uppercase mb-1">
|
|
{{ $t('word.editor') }}
|
|
</div>
|
|
<div class="column col-9 col-sm-12">
|
|
<div class="form-group mb-0">
|
|
<div class="col-7 col-sm-12">
|
|
<label class="form-label">
|
|
{{ $t('word.autoCompletion') }}
|
|
</label>
|
|
</div>
|
|
<div class="col-5 col-sm-12">
|
|
<label class="form-switch d-inline-block" @click.prevent="toggleAutoComplete">
|
|
<input type="checkbox" :checked="selectedAutoComplete">
|
|
<i class="form-icon" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group mb-0">
|
|
<div class="col-7 col-sm-12">
|
|
<label class="form-label">
|
|
{{ $t('message.wrapLongLines') }}
|
|
</label>
|
|
</div>
|
|
<div class="col-5 col-sm-12">
|
|
<label class="form-switch d-inline-block" @click.prevent="toggleLineWrap">
|
|
<input type="checkbox" :checked="selectedLineWrap">
|
|
<i class="form-icon" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-show="selectedTab === 'themes'" class="panel-body py-4">
|
|
<div class="container">
|
|
<div class="columns">
|
|
<div class="column col-12 h6 text-uppercase mb-2">
|
|
{{ $t('message.applicationTheme') }}
|
|
</div>
|
|
<div
|
|
class="column col-6 c-hand theme-block"
|
|
:class="{'selected': applicationTheme === 'dark'}"
|
|
@click="changeApplicationTheme('dark')"
|
|
>
|
|
<img src="../images/dark.png" class="img-responsive img-fit-cover s-rounded">
|
|
<div class="theme-name text-light">
|
|
<i class="mdi mdi-moon-waning-crescent mdi-48px" />
|
|
<div class="h6 mt-4">
|
|
{{ $t('word.dark') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="column col-6 c-hand theme-block"
|
|
:class="{'selected': applicationTheme === 'light'}"
|
|
@click="changeApplicationTheme('light')"
|
|
>
|
|
<img src="../images/light.png" class="img-responsive img-fit-cover s-rounded">
|
|
<div class="theme-name text-dark">
|
|
<i class="mdi mdi-white-balance-sunny mdi-48px" />
|
|
<div class="h6 mt-4">
|
|
{{ $t('word.light') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns mt-4">
|
|
<div class="column col-12 h6 text-uppercase mb-2 mt-4">
|
|
{{ $t('message.editorTheme') }}
|
|
</div>
|
|
<div class="column col-6 h5 mb-4">
|
|
<select
|
|
v-model="localEditorTheme"
|
|
class="form-select"
|
|
@change="changeEditorTheme(localEditorTheme)"
|
|
>
|
|
<optgroup
|
|
v-for="group in editorThemes"
|
|
:key="group.group"
|
|
:label="group.group"
|
|
>
|
|
<option
|
|
v-for="theme in group.themes"
|
|
:key="theme.name"
|
|
:value="theme.code"
|
|
:selected="editorTheme === theme.code"
|
|
>
|
|
{{ theme.name }}
|
|
</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
<div class="column col-6 mb-4">
|
|
<div class="btn-group btn-group-block">
|
|
<button
|
|
class="btn btn-dark cut-text"
|
|
:class="{'active': editorFontSize === 'small'}"
|
|
@click="changeEditorFontSize('small')"
|
|
>
|
|
{{ $t('word.small') }}
|
|
</button>
|
|
<button
|
|
class="btn btn-dark cut-text"
|
|
:class="{'active': editorFontSize === 'medium'}"
|
|
@click="changeEditorFontSize('medium')"
|
|
>
|
|
{{ $t('word.medium') }}
|
|
</button>
|
|
<button
|
|
class="btn btn-dark cut-text"
|
|
:class="{'active': editorFontSize === 'large'}"
|
|
@click="changeEditorFontSize('large')"
|
|
>
|
|
{{ $t('word.large') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="column col-12">
|
|
<BaseTextEditor
|
|
:value="exampleQuery"
|
|
mode="sql"
|
|
:workspace="workspace"
|
|
:read-only="true"
|
|
:height="270"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-show="selectedTab === 'update'" class="panel-body py-4">
|
|
<ModalSettingsUpdate />
|
|
</div>
|
|
<div v-show="selectedTab === 'changelog'" class="panel-body py-4">
|
|
<ModalSettingsChangelog />
|
|
</div>
|
|
|
|
<div v-show="selectedTab === 'about'" class="panel-body py-4">
|
|
<div class="text-center">
|
|
<img src="../images/logo.svg" width="128">
|
|
<h4>{{ appName }}</h4>
|
|
<p>
|
|
{{ $t('word.version') }} {{ appVersion }}<br>
|
|
<a class="c-hand" @click="openOutside('https://github.com/Fabio286/antares')"><i class="mdi mdi-github d-inline" /> GitHub</a> • <a class="c-hand" @click="openOutside('https://twitter.com/AntaresSQL')"><i class="mdi mdi-twitter d-inline" /> Twitter</a> • <a class="c-hand" @click="openOutside('https://antares-sql.app/')"><i class="mdi mdi-web d-inline" /> Website</a><br>
|
|
<small>{{ $t('word.author') }} <a class="c-hand" @click="openOutside('https://github.com/Fabio286')">Fabio Di Stasio</a></small><br>
|
|
<small>{{ $t('message.madeWithJS') }}</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions, mapGetters } from 'vuex';
|
|
import localesNames from '@/i18n/supported-locales';
|
|
import ModalSettingsUpdate from '@/components/ModalSettingsUpdate';
|
|
import ModalSettingsChangelog from '@/components/ModalSettingsChangelog';
|
|
import BaseTextEditor from '@/components/BaseTextEditor';
|
|
const { shell } = require('electron');
|
|
|
|
export default {
|
|
name: 'ModalSettings',
|
|
components: {
|
|
ModalSettingsUpdate,
|
|
ModalSettingsChangelog,
|
|
BaseTextEditor
|
|
},
|
|
data () {
|
|
return {
|
|
localLocale: null,
|
|
localPageSize: null,
|
|
localTimeout: null,
|
|
localEditorTheme: null,
|
|
selectedTab: 'general',
|
|
pageSizes: [30, 40, 100, 250, 500, 1000],
|
|
editorThemes: [
|
|
{
|
|
group: this.$t('word.light'),
|
|
themes: [
|
|
{ code: 'chrome', name: 'Chrome' },
|
|
{ code: 'clouds', name: 'Clouds' },
|
|
{ code: 'crimson_editor', name: 'Crimson Editor' },
|
|
{ code: 'dawn', name: 'Dawn' },
|
|
{ code: 'dreamweaver', name: 'Dreamweaver' },
|
|
{ code: 'eclupse', name: 'Eclipse' },
|
|
{ code: 'github', name: 'GitHub' },
|
|
{ code: 'iplastic', name: 'IPlastic' },
|
|
{ code: 'solarized_light', name: 'Solarized Light' },
|
|
{ code: 'textmate', name: 'TextMate' },
|
|
{ code: 'tomorrow', name: 'Tomorrow' },
|
|
{ code: 'xcode', name: 'Xcode' },
|
|
{ code: 'kuroir', name: 'Kuroir' },
|
|
{ code: 'katzenmilch', name: 'KatzenMilch' },
|
|
{ code: 'sqlserver', name: 'SQL Server' }
|
|
]
|
|
},
|
|
{
|
|
group: this.$t('word.dark'),
|
|
themes: [
|
|
{ code: 'ambiance', name: 'Ambiance' },
|
|
{ code: 'chaos', name: 'Chaos' },
|
|
{ code: 'clouds_midnight', name: 'Clouds Midnight' },
|
|
{ code: 'dracula', name: 'Dracula' },
|
|
{ code: 'cobalt', name: 'Cobalt' },
|
|
{ code: 'gruvbox', name: 'Gruvbox' },
|
|
{ code: 'gob', name: 'Green on Black' },
|
|
{ code: 'idle_fingers', name: 'Idle Fingers' },
|
|
{ code: 'kr_theme', name: 'krTheme' },
|
|
{ code: 'merbivore', name: 'Merbivore' },
|
|
{ code: 'mono_industrial', name: 'Mono Industrial' },
|
|
{ code: 'monokai', name: 'Monokai' },
|
|
{ code: 'nord_dark', name: 'Nord Dark' },
|
|
{ code: 'pastel_on_dark', name: 'Pastel on Dark' },
|
|
{ code: 'solarized_dark', name: 'Solarized Dark' },
|
|
{ code: 'terminal', name: 'Terminal' },
|
|
{ code: 'tomorrow_night', name: 'Tomorrow Night' },
|
|
{ code: 'tomorrow_night_blue', name: 'Tomorrow Night Blue' },
|
|
{ code: 'tomorrow_night_bright', name: 'Tomorrow Night Bright' },
|
|
{ code: 'tomorrow_night_eighties', name: 'Tomorrow Night 80s' },
|
|
{ code: 'twilight', name: 'Twilight' },
|
|
{ code: 'vibrant_ink', name: 'Vibrant Ink' }
|
|
]
|
|
}
|
|
]
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
appName: 'application/appName',
|
|
appVersion: 'application/appVersion',
|
|
selectedSettingTab: 'application/selectedSettingTab',
|
|
selectedLocale: 'settings/getLocale',
|
|
pageSize: 'settings/getDataTabLimit',
|
|
selectedAutoComplete: 'settings/getAutoComplete',
|
|
selectedLineWrap: 'settings/getLineWrap',
|
|
notificationsTimeout: 'settings/getNotificationsTimeout',
|
|
restoreTabs: 'settings/getRestoreTabs',
|
|
applicationTheme: 'settings/getApplicationTheme',
|
|
editorTheme: 'settings/getEditorTheme',
|
|
editorFontSize: 'settings/getEditorFontSize',
|
|
updateStatus: 'application/getUpdateStatus',
|
|
selectedWorkspace: 'workspaces/getSelected',
|
|
getWorkspace: 'workspaces/getWorkspace'
|
|
}),
|
|
locales () {
|
|
const locales = [];
|
|
for (const locale of this.$i18n.availableLocales)
|
|
locales.push({ code: locale, name: localesNames[locale] });
|
|
|
|
return locales;
|
|
},
|
|
hasUpdates () {
|
|
return ['available', 'downloading', 'downloaded'].includes(this.updateStatus);
|
|
},
|
|
workspace () {
|
|
return this.getWorkspace(this.selectedWorkspace);
|
|
},
|
|
exampleQuery () {
|
|
return `-- This is an example
|
|
SELECT
|
|
employee.id,
|
|
employee.first_name,
|
|
employee.last_name,
|
|
SUM(DATEDIFF("SECOND", call.start, call.end)) AS call_duration
|
|
FROM call
|
|
INNER JOIN employee ON call.employee_id = employee.id
|
|
GROUP BY
|
|
employee.id,
|
|
employee.first_name,
|
|
employee.last_name
|
|
ORDER BY
|
|
employee.id ASC;
|
|
`;
|
|
}
|
|
},
|
|
created () {
|
|
this.localLocale = this.selectedLocale;
|
|
this.localPageSize = this.pageSize;
|
|
this.localTimeout = this.notificationsTimeout;
|
|
this.localEditorTheme = this.editorTheme;
|
|
this.selectedTab = this.selectedSettingTab;
|
|
window.addEventListener('keydown', this.onKey);
|
|
},
|
|
beforeDestroy () {
|
|
window.removeEventListener('keydown', this.onKey);
|
|
},
|
|
methods: {
|
|
...mapActions({
|
|
closeModal: 'application/hideSettingModal',
|
|
changeLocale: 'settings/changeLocale',
|
|
changePageSize: 'settings/changePageSize',
|
|
changeRestoreTabs: 'settings/changeRestoreTabs',
|
|
changeAutoComplete: 'settings/changeAutoComplete',
|
|
changeLineWrap: 'settings/changeLineWrap',
|
|
changeApplicationTheme: 'settings/changeApplicationTheme',
|
|
changeEditorTheme: 'settings/changeEditorTheme',
|
|
changeEditorFontSize: 'settings/changeEditorFontSize',
|
|
updateNotificationsTimeout: 'settings/updateNotificationsTimeout'
|
|
}),
|
|
selectTab (tab) {
|
|
this.selectedTab = tab;
|
|
},
|
|
openOutside (link) {
|
|
shell.openExternal(link);
|
|
},
|
|
checkNotificationsTimeout () {
|
|
if (!this.localTimeout)
|
|
this.localTimeout = 10;
|
|
|
|
this.updateNotificationsTimeout(+this.localTimeout);
|
|
},
|
|
onKey (e) {
|
|
e.stopPropagation();
|
|
if (e.key === 'Escape')
|
|
this.closeModal();
|
|
},
|
|
toggleRestoreSession () {
|
|
this.changeRestoreTabs(!this.restoreTabs);
|
|
},
|
|
toggleAutoComplete () {
|
|
this.changeAutoComplete(!this.selectedAutoComplete);
|
|
},
|
|
toggleLineWrap () {
|
|
this.changeLineWrap(!this.selectedLineWrap);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
#settings {
|
|
.modal-container {
|
|
position: absolute;
|
|
top: 17.5vh;
|
|
|
|
.modal-body {
|
|
overflow: hidden;
|
|
|
|
.panel-body {
|
|
min-height: calc(25vh - 70px);
|
|
max-height: 65vh;
|
|
overflow: auto;
|
|
|
|
.theme-block {
|
|
position: relative;
|
|
text-align: center;
|
|
|
|
&.selected {
|
|
img {
|
|
box-shadow: 0 0 0 3px $primary-color;
|
|
}
|
|
}
|
|
|
|
&.disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.theme-name {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.badge::after {
|
|
background: #32b643;
|
|
}
|
|
|
|
.badge-update::after {
|
|
bottom: initial;
|
|
background: $primary-color;
|
|
}
|
|
|
|
.form-label {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|