fantasia-archive/src/components/dialogs/AboutApp.vue
2021-05-08 16:05:13 +02:00

146 lines
3.5 KiB
Vue

<template>
<q-dialog
v-model="dialogModel"
@before-hide="triggerDialogClose"
>
<q-card
class="aboutDialog"
dark
>
<q-card-section>
<h6 class="text-center q-mt-lg q-mb-sm">About Fantasia Archive</h6>
</q-card-section>
<q-card-section>
<div>
Currently running Fantasia Archive version: <span class="text-bold text-primary">{{appVersion}}</span>
</div>
</q-card-section>
<q-separator color="primary" horizonatal dark class="q-my-lg q-mx-auto" style="opacity: 0.5; width: 400px;" />
<q-card-section>
<div class="col-12 q-mx-sm q-my-md">
<div class="patreonButton shadow-1" @click="openPatreonLink">
Support Fantasia Archive on Patreon!
</div>
</div>
<div class="col-12 q-mb-lg">
<div class="row justify-center">
<div class="q-mx-sm q-my-md">
<div class="discordButton shadow-1" @click="openDiscordInviteLink">
Discord
</div>
</div>
<div class="q-mx-sm q-my-md">
<div class="redditButton shadow-1" @click="openRedditLink"></div>
</div>
<div class="q-mx-sm q-my-md">
<div class="websiteButton shadow-1" @click="openWebsiteLink">
Website
</div>
</div>
<div class="q-mx-sm q-my-md">
<div class="githubButton shadow-1" @click="openGithubLink">
GitHub
</div>
</div>
</div>
</div>
</q-card-section>
<q-card-actions align="around" class="q-mb-lg q-mt-md">
<q-btn flat label="Close" color="accent" v-close-popup />
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script lang="ts">
import { Component, Watch } from "vue-property-decorator"
import { shell, remote } from "electron"
import DialogBase from "src/components/dialogs/_DialogBase"
@Component({
components: { }
})
export default class AboutApp extends DialogBase {
/**
* React to dialog opening request
*/
@Watch("dialogTrigger")
openDialog (val: string|false) {
if (val) {
if (this.SGET_getDialogsState) {
return
}
this.SSET_setDialogState(true)
this.dialogModel = true
}
}
/**
* Current app version
* NOTE: Show Electon version in DEV mode instead of NPM package version
*/
appVersion = remote.app.getVersion()
/**
* Open Discord invite link in thw default browser window
*/
openDiscordInviteLink () {
shell.openExternal("https://discord.gg/JQDBvsN9Te").catch(e => console.log(e))
}
/**
* Open Patreon link in thw default browser window
*/
openPatreonLink () {
shell.openExternal("https://www.patreon.com/elvanos").catch(e => console.log(e))
}
/**
* Open Reddit link in thw default browser window
*/
openRedditLink () {
shell.openExternal("https://www.reddit.com/r/FantasiaArchive/").catch(e => console.log(e))
}
/**
* Open Website link in thw default browser window
*/
openWebsiteLink () {
shell.openExternal("http://fantasiaarchive.com/").catch(e => console.log(e))
}
/**
* Open GitHub link in thw default browser window
*/
openGithubLink () {
shell.openExternal("https://github.com/Elvanos/fantasia-archive").catch(e => console.log(e))
}
}
</script>
<style lang="scss">
.aboutDialog {
text-align: center;
width: 650px;
max-width: 650px !important;
h6 {
display: block;
}
}
</style>