antares/src/renderer/components/ModalSettings.vue

535 lines
22 KiB
Vue
Raw Normal View History

2020-05-30 12:54:05 +02:00
<template>
<div id="settings" class="modal active">
<a class="modal-overlay c-hand" @click="closeModal" />
<div class="modal-container">
2020-08-12 18:11:48 +02:00
<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>
2020-08-12 18:11:48 +02:00
</div>
2020-05-30 12:54:05 +02:00
</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
2021-06-28 18:34:39 +02:00
class="tab-item c-hand"
2020-05-30 12:54:05 +02:00
:class="{'active': selectedTab === 'general'}"
@click="selectTab('general')"
>
2021-06-28 18:34:39 +02:00
<a class="tab-link">{{ $t('word.general') }}</a>
2020-05-30 12:54:05 +02:00
</li>
<li
2021-06-28 18:34:39 +02:00
class="tab-item c-hand"
2020-05-30 12:54:05 +02:00
:class="{'active': selectedTab === 'themes'}"
@click="selectTab('themes')"
>
2021-06-28 18:34:39 +02:00
<a class="tab-link">{{ $t('word.themes') }}</a>
2020-05-30 12:54:05 +02:00
</li>
<li
v-if="updateStatus !== 'disabled'"
2021-06-28 18:34:39 +02:00
class="tab-item c-hand"
2020-05-30 12:54:05 +02:00
:class="{'active': selectedTab === 'update'}"
@click="selectTab('update')"
>
2021-06-28 18:34:39 +02:00
<a class="tab-link" :class="{'badge badge-update': hasUpdates}">{{ $t('word.update') }}</a>
2020-05-30 12:54:05 +02:00
</li>
2021-04-11 12:35:16 +02:00
<li
2021-06-28 18:34:39 +02:00
class="tab-item c-hand"
2021-04-11 12:35:16 +02:00
:class="{'active': selectedTab === 'changelog'}"
@click="selectTab('changelog')"
>
2021-06-28 18:34:39 +02:00
<a class="tab-link">{{ $t('word.changelog') }}</a>
2021-04-11 12:35:16 +02:00
</li>
2020-05-30 12:54:05 +02:00
<li
2021-06-28 18:34:39 +02:00
class="tab-item c-hand"
2020-05-30 12:54:05 +02:00
:class="{'active': selectedTab === 'about'}"
@click="selectTab('about')"
>
2021-06-28 18:34:39 +02:00
<a class="tab-link">{{ $t('word.about') }}</a>
2020-05-30 12:54:05 +02:00
</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>
2021-07-27 17:31:51 +02:00
<div class="column col-9 col-sm-12 mb-2">
2021-07-08 15:06:20 +02:00
<div class="form-group">
2021-07-27 17:31:51 +02:00
<div class="col-7 col-sm-12">
<label class="form-label">
<i class="mdi mdi-18px mdi-translate mr-1" />
2021-01-15 19:18:16 +01:00
{{ $t('word.language') }}
</label>
</div>
2021-07-27 17:31:51 +02:00
<div class="col-5 col-sm-12">
<select
v-model="localLocale"
class="form-select"
@change="changeLocale(localLocale)"
2020-05-31 17:56:33 +02:00
>
<option
v-for="(locale, key) in locales"
:key="key"
:value="locale.code"
>
{{ locale.name }}
</option>
</select>
</div>
2020-05-30 12:54:05 +02:00
</div>
2021-05-29 11:04:02 +02:00
<div class="form-group">
2021-07-27 17:31:51 +02:00
<div class="col-7 col-sm-12">
2021-05-29 11:04:02 +02:00
<label class="form-label">
{{ $t('message.dataTabPageSize') }}
</label>
</div>
2021-07-27 17:31:51 +02:00
<div class="col-5 col-sm-12">
2021-05-29 11:04:02 +02:00
<select
v-model="localPageSize"
class="form-select"
@change="changePageSize(+localPageSize)"
>
<option
v-for="size in pageSizes"
:key="size"
>
{{ size }}
</option>
</select>
</div>
</div>
2021-07-27 17:31:51 +02:00
<div class="form-group mb-0">
<div class="col-7 col-sm-12">
<label class="form-label">
{{ $t('message.restorePreviourSession') }}
</label>
</div>
2021-07-27 17:31:51 +02:00
<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">
2021-07-27 17:31:51 +02:00
<div class="col-7 col-sm-12">
<label class="form-label">
2021-01-15 19:18:16 +01:00
{{ $t('message.notificationsTimeout') }}
</label>
</div>
2021-07-27 17:31:51 +02:00
<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>
2021-07-27 17:31:51 +02:00
<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">
2021-01-15 19:18:16 +01:00
{{ $t('word.autoCompletion') }}
</label>
</div>
2021-07-27 17:31:51 +02:00
<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>
2021-07-27 17:31:51 +02:00
<div class="form-group mb-0">
<div class="col-7 col-sm-12">
2020-12-24 15:33:51 +01:00
<label class="form-label">
2021-01-15 19:18:16 +01:00
{{ $t('message.wrapLongLines') }}
2020-12-24 15:33:51 +01:00
</label>
</div>
2021-07-27 17:31:51 +02:00
<div class="col-5 col-sm-12">
2020-12-24 15:33:51 +01:00
<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>
2020-05-30 12:54:05 +02:00
</div>
2020-06-02 19:13:57 +02:00
<div v-show="selectedTab === 'themes'" class="panel-body py-4">
2020-12-23 18:07:50 +01:00
<div class="container">
<div class="columns">
<div class="column col-12 h6 text-uppercase mb-2">
2020-12-23 18:07:50 +01:00
{{ $t('message.applicationTheme') }}
</div>
2021-04-03 11:21:58 +02:00
<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">
2021-04-03 11:21:58 +02:00
<div class="theme-name text-light">
2020-12-23 18:07:50 +01:00
<i class="mdi mdi-moon-waning-crescent mdi-48px" />
<div class="h6 mt-4">
{{ $t('word.dark') }}
</div>
</div>
</div>
2021-04-03 11:21:58 +02:00
<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">
2021-04-03 11:21:58 +02:00
<div class="theme-name text-dark">
2020-12-23 18:07:50 +01:00
<i class="mdi mdi-white-balance-sunny mdi-48px" />
<div class="h6 mt-4">
2021-04-03 11:21:58 +02:00
{{ $t('word.light') }}
2020-12-23 18:07:50 +01:00
</div>
</div>
</div>
</div>
<div class="columns mt-4">
<div class="column col-12 h6 text-uppercase mb-2 mt-4">
2020-12-23 18:07:50 +01:00
{{ $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>
2020-12-23 18:07:50 +01:00
<div class="column col-12">
<BaseTextEditor
2020-12-23 18:07:50 +01:00
:value="exampleQuery"
mode="sql"
2020-12-23 18:07:50 +01:00
:workspace="workspace"
:read-only="true"
:height="270"
/>
</div>
</div>
2020-06-28 15:31:16 +02:00
</div>
2020-05-30 12:54:05 +02:00
</div>
2020-06-02 19:13:57 +02:00
<div v-show="selectedTab === 'update'" class="panel-body py-4">
2020-06-19 18:03:52 +02:00
<ModalSettingsUpdate />
2020-05-30 12:54:05 +02:00
</div>
<div v-show="selectedTab === 'changelog'" class="panel-body py-4">
2021-04-11 12:35:16 +02:00
<ModalSettingsChangelog />
</div>
2020-06-02 19:13:57 +02:00
<div v-show="selectedTab === 'about'" class="panel-body py-4">
2020-05-30 12:54:05 +02:00
<div class="text-center">
<img src="../images/logo.svg" width="128">
2020-05-30 12:54:05 +02:00
<h4>{{ appName }}</h4>
<p>
2021-01-15 19:18:16 +01:00
{{ $t('word.version') }} {{ appVersion }}<br>
2021-05-23 10:19:56 +02:00
<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>
2021-01-15 19:18:16 +01:00
<small>{{ $t('word.author') }} <a class="c-hand" @click="openOutside('https://github.com/Fabio286')">Fabio Di Stasio</a></small><br>
2020-06-02 19:13:57 +02:00
<small>{{ $t('message.madeWithJS') }}</small>
2020-05-30 12:54:05 +02:00
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
2020-05-31 17:56:33 +02:00
import localesNames from '@/i18n/supported-locales';
2020-06-19 18:03:52 +02:00
import ModalSettingsUpdate from '@/components/ModalSettingsUpdate';
2021-04-11 12:35:16 +02:00
import ModalSettingsChangelog from '@/components/ModalSettingsChangelog';
import BaseTextEditor from '@/components/BaseTextEditor';
2020-05-30 12:54:05 +02:00
const { shell } = require('electron');
export default {
name: 'ModalSettings',
2020-06-19 18:03:52 +02:00
components: {
2020-12-23 18:07:50 +01:00
ModalSettingsUpdate,
2021-04-11 12:35:16 +02:00
ModalSettingsChangelog,
BaseTextEditor
2020-06-19 18:03:52 +02:00
},
2020-05-30 12:54:05 +02:00
data () {
return {
localLocale: null,
2021-05-29 11:04:02 +02:00
localPageSize: null,
localTimeout: null,
2020-12-23 18:07:50 +01:00
localEditorTheme: null,
selectedTab: 'general',
pageSizes: [30, 40, 100, 250, 500, 1000],
2020-12-23 18:07:50 +01:00
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' }
]
}
]
2020-05-30 12:54:05 +02:00
};
},
computed: {
...mapGetters({
appName: 'application/appName',
2020-05-30 19:07:34 +02:00
appVersion: 'application/appVersion',
2020-05-31 17:56:33 +02:00
selectedSettingTab: 'application/selectedSettingTab',
selectedLocale: 'settings/getLocale',
2021-05-29 11:04:02 +02:00
pageSize: 'settings/getDataTabLimit',
selectedAutoComplete: 'settings/getAutoComplete',
2020-12-24 15:33:51 +01:00
selectedLineWrap: 'settings/getLineWrap',
notificationsTimeout: 'settings/getNotificationsTimeout',
restoreTabs: 'settings/getRestoreTabs',
2020-12-23 18:07:50 +01:00
applicationTheme: 'settings/getApplicationTheme',
editorTheme: 'settings/getEditorTheme',
editorFontSize: 'settings/getEditorFontSize',
2020-12-23 18:07:50 +01:00
updateStatus: 'application/getUpdateStatus',
selectedWorkspace: 'workspaces/getSelected',
getWorkspace: 'workspaces/getWorkspace'
2020-05-30 12:54:05 +02:00
}),
locales () {
2020-05-31 17:56:33 +02:00
const locales = [];
for (const locale of this.$i18n.availableLocales)
locales.push({ code: locale, name: localesNames[locale] });
return locales;
},
hasUpdates () {
return ['available', 'downloading', 'downloaded', 'link'].includes(this.updateStatus);
2020-12-23 18:07:50 +01:00
},
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;
`;
2020-05-30 12:54:05 +02:00
}
},
created () {
this.localLocale = this.selectedLocale;
2021-05-29 11:04:02 +02:00
this.localPageSize = this.pageSize;
this.localTimeout = this.notificationsTimeout;
2020-12-23 18:07:50 +01:00
this.localEditorTheme = this.editorTheme;
2020-05-31 17:56:33 +02:00
this.selectedTab = this.selectedSettingTab;
2020-10-04 17:21:21 +02:00
window.addEventListener('keydown', this.onKey);
},
beforeDestroy () {
window.removeEventListener('keydown', this.onKey);
2020-05-30 12:54:05 +02:00
},
methods: {
...mapActions({
closeModal: 'application/hideSettingModal',
changeLocale: 'settings/changeLocale',
2021-05-29 11:04:02 +02:00
changePageSize: 'settings/changePageSize',
changeRestoreTabs: 'settings/changeRestoreTabs',
changeAutoComplete: 'settings/changeAutoComplete',
2020-12-24 15:33:51 +01:00
changeLineWrap: 'settings/changeLineWrap',
2021-04-03 11:21:58 +02:00
changeApplicationTheme: 'settings/changeApplicationTheme',
2020-12-23 18:07:50 +01:00
changeEditorTheme: 'settings/changeEditorTheme',
changeEditorFontSize: 'settings/changeEditorFontSize',
updateNotificationsTimeout: 'settings/updateNotificationsTimeout'
2020-05-30 12:54:05 +02:00
}),
selectTab (tab) {
this.selectedTab = tab;
},
openOutside (link) {
shell.openExternal(link);
},
checkNotificationsTimeout () {
if (!this.localTimeout)
2020-07-31 15:45:32 +02:00
this.localTimeout = 10;
this.updateNotificationsTimeout(+this.localTimeout);
2020-10-04 17:21:21 +02:00
},
onKey (e) {
e.stopPropagation();
if (e.key === 'Escape')
this.closeModal();
},
toggleRestoreSession () {
this.changeRestoreTabs(!this.restoreTabs);
},
toggleAutoComplete () {
this.changeAutoComplete(!this.selectedAutoComplete);
2020-12-24 15:33:51 +01:00
},
toggleLineWrap () {
this.changeLineWrap(!this.selectedLineWrap);
2020-05-30 12:54:05 +02:00
}
}
};
</script>
<style lang="scss">
2020-07-31 18:16:28 +02:00
#settings {
2021-04-11 12:35:16 +02:00
.modal-container {
position: absolute;
top: 17.5vh;
.modal-body {
overflow: hidden;
2020-05-30 12:54:05 +02:00
2021-04-11 12:35:16 +02:00
.panel-body {
min-height: calc(25vh - 70px);
max-height: 65vh;
2021-04-11 12:35:16 +02:00
overflow: auto;
2020-12-23 18:07:50 +01:00
2021-04-11 12:35:16 +02:00
.theme-block {
position: relative;
text-align: center;
2020-12-23 18:07:50 +01:00
2021-04-11 12:35:16 +02:00
&.selected {
img {
box-shadow: 0 0 0 3px $primary-color;
}
2020-12-23 18:07:50 +01:00
}
2021-04-11 12:35:16 +02:00
&.disabled {
cursor: not-allowed;
opacity: 0.5;
}
2020-12-23 18:07:50 +01:00
2021-04-11 12:35:16 +02:00
.theme-name {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
top: 0;
height: 100%;
width: 100%;
}
2020-12-23 18:07:50 +01:00
}
}
2020-05-31 17:56:33 +02:00
2021-04-11 12:35:16 +02:00
.badge::after {
background: #32b643;
}
2020-05-30 12:54:05 +02:00
2021-04-11 12:35:16 +02:00
.badge-update::after {
bottom: initial;
background: $primary-color;
}
2021-04-11 12:35:16 +02:00
.form-label {
display: flex;
align-items: center;
}
2020-07-31 18:16:28 +02:00
}
}
2020-05-30 12:54:05 +02:00
}
</style>