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" />
|
|
|
|
{{ $t('word.settings') }}
|
|
|
|
</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
|
|
|
|
class="tab-item"
|
|
|
|
:class="{'active': selectedTab === 'general'}"
|
|
|
|
@click="selectTab('general')"
|
|
|
|
>
|
|
|
|
<a class="c-hand">{{ $t('word.general') }}</a>
|
|
|
|
</li>
|
|
|
|
<li
|
|
|
|
class="tab-item"
|
|
|
|
:class="{'active': selectedTab === 'themes'}"
|
|
|
|
@click="selectTab('themes')"
|
|
|
|
>
|
|
|
|
<a class="c-hand">{{ $t('word.themes') }}</a>
|
|
|
|
</li>
|
|
|
|
<li
|
|
|
|
class="tab-item"
|
|
|
|
:class="{'active': selectedTab === 'update'}"
|
|
|
|
@click="selectTab('update')"
|
|
|
|
>
|
|
|
|
<a class="c-hand" :class="{'badge': isUpdate}">{{ $t('word.update') }}</a>
|
|
|
|
</li>
|
|
|
|
<li
|
|
|
|
class="tab-item"
|
|
|
|
:class="{'active': selectedTab === 'about'}"
|
|
|
|
@click="selectTab('about')"
|
|
|
|
>
|
|
|
|
<a class="c-hand">{{ $t('word.about') }}</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
2020-06-02 19:13:57 +02:00
|
|
|
|
2020-05-30 12:54:05 +02:00
|
|
|
<div v-if="selectedTab === 'general'" class="panel-body py-4">
|
|
|
|
<form class="form-horizontal">
|
2020-07-30 19:12:29 +02:00
|
|
|
<div class="col-8 col-sm-12">
|
|
|
|
<div class="form-group mb-4">
|
2020-05-30 12:54:05 +02:00
|
|
|
<div class="col-6 col-sm-12">
|
2020-05-31 17:56:33 +02:00
|
|
|
<label class="form-label">
|
2020-08-12 10:48:18 +02:00
|
|
|
<i class="mdi mdi-18px mdi-translate mr-1" />
|
2020-05-31 17:56:33 +02:00
|
|
|
{{ $t('word.language') }}:
|
|
|
|
</label>
|
2020-05-30 12:54:05 +02:00
|
|
|
</div>
|
|
|
|
<div class="col-6 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 }}
|
2020-05-30 12:54:05 +02:00
|
|
|
</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-07-30 19:12:29 +02:00
|
|
|
<div class="form-group">
|
|
|
|
<div class="col-6 col-sm-12">
|
|
|
|
<label class="form-label">
|
|
|
|
{{ $t('message.notificationsTimeout') }}:
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
<div class="col-6 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>
|
2020-05-30 12:54:05 +02:00
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</div>
|
2020-06-02 19:13:57 +02:00
|
|
|
|
2020-05-30 12:54:05 +02:00
|
|
|
<div v-if="selectedTab === 'themes'" class="panel-body py-4">
|
2020-06-28 15:31:16 +02:00
|
|
|
<div class="text-center">
|
|
|
|
<p>In future releases</p>
|
|
|
|
</div>
|
2020-05-30 12:54:05 +02:00
|
|
|
</div>
|
2020-06-02 19:13:57 +02:00
|
|
|
|
2020-05-30 12:54:05 +02:00
|
|
|
<div v-if="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>
|
2020-06-02 19:13:57 +02:00
|
|
|
|
2020-05-30 12:54:05 +02:00
|
|
|
<div v-if="selectedTab === 'about'" class="panel-body py-4">
|
|
|
|
<div class="text-center">
|
2020-05-31 17:56:33 +02:00
|
|
|
<img :src="require('@/images/logo.svg').default" width="128">
|
2020-05-30 12:54:05 +02:00
|
|
|
<h4>{{ appName }}</h4>
|
|
|
|
<p>
|
2020-05-30 19:07:34 +02:00
|
|
|
{{ $t('word.version') }}: {{ appVersion }}<br>
|
2020-06-27 15:14:08 +02:00
|
|
|
<a class="c-hand" @click="openOutside('https://github.com/EStarium/antares')">GitHub</a><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';
|
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: {
|
|
|
|
ModalSettingsUpdate
|
|
|
|
},
|
2020-05-30 12:54:05 +02:00
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
isUpdate: false,
|
|
|
|
localLocale: null,
|
2020-07-30 19:12:29 +02:00
|
|
|
localTimeout: null,
|
2020-05-30 12:54:05 +02:00
|
|
|
selectedTab: 'general'
|
|
|
|
};
|
|
|
|
},
|
|
|
|
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',
|
2020-07-30 19:12:29 +02:00
|
|
|
selectedLocale: 'settings/getLocale',
|
|
|
|
notificationsTimeout: 'settings/getNotificationsTimeout'
|
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;
|
2020-05-30 12:54:05 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
created () {
|
|
|
|
this.localLocale = this.selectedLocale;
|
2020-07-30 19:12:29 +02:00
|
|
|
this.localTimeout = this.notificationsTimeout;
|
2020-05-31 17:56:33 +02:00
|
|
|
this.selectedTab = this.selectedSettingTab;
|
2020-05-30 12:54:05 +02:00
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
...mapActions({
|
|
|
|
closeModal: 'application/hideSettingModal',
|
2020-07-30 19:12:29 +02:00
|
|
|
changeLocale: 'settings/changeLocale',
|
|
|
|
updateNotificationsTimeout: 'settings/updateNotificationsTimeout'
|
2020-05-30 12:54:05 +02:00
|
|
|
}),
|
|
|
|
selectTab (tab) {
|
|
|
|
this.selectedTab = tab;
|
|
|
|
},
|
|
|
|
openOutside (link) {
|
|
|
|
shell.openExternal(link);
|
2020-07-30 19:12:29 +02:00
|
|
|
},
|
|
|
|
checkNotificationsTimeout () {
|
|
|
|
if (!this.localTimeout)
|
2020-07-31 15:45:32 +02:00
|
|
|
this.localTimeout = 10;
|
2020-07-30 19:12:29 +02:00
|
|
|
|
|
|
|
this.updateNotificationsTimeout(+this.localTimeout);
|
2020-05-30 12:54:05 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
2020-07-31 18:16:28 +02:00
|
|
|
#settings {
|
|
|
|
.modal-body {
|
|
|
|
overflow: hidden;
|
2020-05-30 12:54:05 +02:00
|
|
|
|
2020-07-31 18:16:28 +02:00
|
|
|
.panel-body {
|
|
|
|
height: calc(70vh - 70px);
|
|
|
|
overflow: auto;
|
|
|
|
}
|
2020-05-31 17:56:33 +02:00
|
|
|
|
2020-07-31 18:16:28 +02:00
|
|
|
.badge::after {
|
|
|
|
background: #32b643;
|
|
|
|
}
|
2020-05-30 12:54:05 +02:00
|
|
|
|
2020-07-31 18:16:28 +02:00
|
|
|
.form-label {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
}
|
2020-05-30 12:54:05 +02:00
|
|
|
}
|
|
|
|
</style>
|