fabio286/antares
1
1
Fork 0
mirror of https://github.com/Fabio286/antares.git synced 2025-06-05 21:59:22 +02:00
Code Issues Releases Wiki Activity

Added setting modal

Browse Source
This commit is contained in:
Fabio
2020-05-30 12:54:05 +02:00
parent 5dc901a75c
commit d9dbf8e462
15 changed files with 270 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
src/renderer/components/ModalSettings.vue Normal file
View File

@ -0,0 +1,145 @@
<template>
<div id="settings" class="modal active">
<a class="modal-overlay c-hand" @click="closeModal" />
<div class="modal-container">
<div class="modal-header">
<div class="modal-title h5">
{{ $t('word.settings') }}
</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>
<div v-if="selectedTab === 'general'" class="panel-body py-4">
<form class="form-horizontal">
<div class="col-6 col-sm-12">
<div class="form-group">
<div class="col-6 col-sm-12">
<label class="form-label">{{ $t('word.language') }}:</label>
</div>
<div class="col-6 col-sm-12">
<select
v-model="localLocale"
class="form-select"
@change="changeLocale(localLocale)"
>
<option v-for="(locale, key) in locales" :key="key">
{{ locale }}
</option>
</select>
</div>
</div>
</div>
</form>
</div>
<div v-if="selectedTab === 'themes'" class="panel-body py-4">
<!-- -->
</div>
<div v-if="selectedTab === 'update'" class="panel-body py-4">
<!-- -->
</div>
<div v-if="selectedTab === 'about'" class="panel-body py-4">
<div class="text-center">
<img src="logo.svg" width="128">
<h4>{{ appName }}</h4>
<p>
{{ $t('word.version') }}: 0.0.0<br>
<a class="c-hand" @click="openOutside('https://github.com/Fabio286/antares')">GitHub</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
const { shell } = require('electron');
export default {
name: 'ModalSettings',
data () {
return {
isUpdate: false,
localLocale: null,
selectedTab: 'general'
};
},
computed: {
...mapGetters({
appName: 'application/appName',
selectedLocale: 'settings/getLocale'
}),
locales () {
return this.$i18n.availableLocales;
}
},
created () {
this.localLocale = this.selectedLocale;
},
methods: {
...mapActions({
closeModal: 'application/hideSettingModal',
changeLocale: 'settings/changeLocale'
}),
selectTab (tab) {
this.selectedTab = tab;
},
openOutside (link) {
shell.openExternal(link);
}
}
};
</script>
<style lang="scss">
#settings{
.modal-body{
overflow: hidden;
.panel-body{
height: calc(70vh - 70px);
overflow: auto;
}
.badge::after{
background: #32b643;
}
}
}
</style>