diff options
| -rw-r--r-- | src-vue/src/App.vue | 34 | ||||
| -rw-r--r-- | src-vue/src/components/NotificationButton.vue | 81 |
2 files changed, 113 insertions, 2 deletions
diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue index 411dd10e..97b20562 100644 --- a/src-vue/src/App.vue +++ b/src-vue/src/App.vue @@ -7,6 +7,7 @@ import SettingsView from './views/SettingsView.vue'; import { ref } from "vue"; import { store } from './plugins/store'; import { invoke } from "@tauri-apps/api/core"; +import NotificationButton from "./components/NotificationButton.vue"; const greetMsg = ref(""); const name = ref(""); @@ -18,6 +19,11 @@ async function greet() { export default { components: { + ChangelogView, + DeveloperView, + PlayView, + SettingsView, + ModsView }, data() { return {} @@ -25,6 +31,8 @@ export default { mounted: async function() { // Initialize interface language + let lang = "en" + this.$root!.$i18n.locale = lang; }, methods: { close() { @@ -32,6 +40,11 @@ export default { } }, computed: { + bgStyle(): string { + // @ts-ignore + const shouldBlur = this.$route.path !== "/"; + return `filter: brightness(0.8) ${shouldBlur ? 'blur(5px)' : ''};`; + } } } </script> @@ -42,9 +55,26 @@ export default { <nav id="fc_menu-bar"><!-- Hide menu bar in repair view --> <!-- Navigation items --> + <el-menu + :default-active="$route.path" + router + mode="horizontal" + id="fc__menu_items" + data-tauri-drag-region + > + <el-menu-item index="/">{{ $t('menu.play') }}</el-menu-item> + <el-menu-item index="/mods">{{ $t('menu.mods') }}</el-menu-item> + <el-menu-item index="/changelog">{{ $t('menu.changelog') }}</el-menu-item> + <el-menu-item index="/settings">{{ $t('menu.settings') }}</el-menu-item> + </el-menu> + + <!-- Window controls --> + <div id="fc_window__controls"> + <NotificationButton /> + <el-button color="white" icon="SemiSelect" @click="minimize" circle /> + <el-button color="white" icon="CloseBold" @click="close" circle /> + </div> </nav> - <div class="row"> - </div> <p>Click on the Tauri, Vite, and Vue logos to learn more.</p> <form class="row" @submit.prevent="greet"> diff --git a/src-vue/src/components/NotificationButton.vue b/src-vue/src/components/NotificationButton.vue new file mode 100644 index 00000000..3835032d --- /dev/null +++ b/src-vue/src/components/NotificationButton.vue @@ -0,0 +1,81 @@ +<template> + <el-dropdown trigger="click" placement="bottom-end" max-height="280" popper-class="fc_popper"> + <el-badge v-if="notifications.length != 0" :value="notifications.length" :max="9" class="item" type="primary"> + <el-button color="white" icon="BellFilled" circle /> + </el-badge> + <el-button v-else color="white" icon="BellFilled" circle /> + <template #dropdown> + <el-dropdown-menu :key="counter"> + <el-alert + v-if="notifications.length != 0" + v-for="(notification, i) in notifications" + :key="i" + :title="notification.title" + :description="notification.text" + :type="notification.type" + show-icon + style="width: 300px" + @close.stop="removeNotification(i)" + /> + <el-result + v-else + icon="success" + :title="i18n.global.tc('notification.no_new.title')" + :sub-title="i18n.global.tc('notification.no_new.text')" + > + <template #icon> + </template> + </el-result> + </el-dropdown-menu> + </template> + </el-dropdown> +</template> + +<script lang="ts"> +import { defineComponent } from 'vue'; +import {Notification} from '../plugins/modules/notifications'; +import {i18n} from "../main"; + +export default defineComponent({ + name: 'NotificationButton', + data: () => ({ + // This variable is used as a key for the dropdown menu, so we can force it to refresh when a item is deleted. + counter: 0 + }), + computed: { + i18n() { + return i18n + }, + notifications(): Notification[] { + return this.$store.state.notifications.notifications; + } + }, + methods: { + removeNotification(index: number) { + this.$store.commit('removeNotification', index); + // By refreshing the notifications list, we ensure the first notification get the index 0, ensuring this list + // is synchronized with the store list. + this.counter += 1; + } + } +}) +</script> + +<style scoped> +.el-dropdown { + height: 100%; + max-height: 300px; +} + +.el-button { + margin: auto 25px auto 0 !important; +} + +.el-alert { + margin: 5px 10px 5px 5px; +} + +.el-badge:deep(sup) { + transform: translate(-10px, 5px) !important; +} +</style> |