aboutsummaryrefslogtreecommitdiff
path: root/src-vue/src/App.vue
diff options
context:
space:
mode:
authorRémy Raes <contact@remyraes.com>2023-10-16 16:17:37 +0200
committerGitHub <noreply@github.com>2023-10-16 16:17:37 +0200
commit07ca1acee9a5f4227d18766b49b3fe6c8690e9a1 (patch)
tree824f2e659536dc9a5eb10f6e99bfb16da3d65647 /src-vue/src/App.vue
parent4ddf57e0024dcd70a39473b15bbe1a0e1f69db88 (diff)
downloadFlightCore-07ca1acee9a5f4227d18766b49b3fe6c8690e9a1.tar.gz
FlightCore-07ca1acee9a5f4227d18766b49b3fe6c8690e9a1.zip
feat: Notification menu (#615)
Introduces a notification menu, which hosts notifications fired while the app was not focused. Notifications can be closed by the user.
Diffstat (limited to 'src-vue/src/App.vue')
-rw-r--r--src-vue/src/App.vue21
1 files changed, 17 insertions, 4 deletions
diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index 30e5e683..44e2c3e6 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -8,9 +8,11 @@ import { appWindow } from '@tauri-apps/api/window';
import { store } from './plugins/store';
import { Store } from 'tauri-plugin-store-api';
import { invoke } from "@tauri-apps/api";
+import NotificationButton from "./components/NotificationButton.vue";
export default {
components: {
+ NotificationButton,
ChangelogView,
DeveloperView,
PlayView,
@@ -73,6 +75,7 @@ export default {
<!-- 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>
@@ -119,7 +122,7 @@ export default {
height: 100%;
background-color: transparent;
float: left;
- width: calc(100% - 148px); /* window controls container width */
+ width: calc(100% - 168px); /* window controls container width */
}
#fc__menu_items .el-menu-item, #fc__menu_items .el-sub-menu__title {
@@ -167,7 +170,9 @@ export default {
height: 100%;
}
-#fc_window__controls > button {
+#fc_window__controls > button,
+#fc_window__controls > .el-dropdown > button,
+#fc_window__controls > .el-dropdown > .el-badge > button {
color: white;
font-size: 20px;
margin: auto 5px;
@@ -176,11 +181,14 @@ export default {
height: 100%;
}
-#fc_window__controls > button:hover {
+#fc_window__controls > button:hover,
+#fc_window__controls > .el-dropdown > button:hover,
+#fc_window__controls > .el-dropdown > .el-badge > button:hover {
color: #c6c9ce;
}
-#fc_window__controls > button:active {
+#fc_window__controls > button:active,
+#fc_window__controls > .el-dropdown > button:active {
color: #56585a;
}
@@ -188,4 +196,9 @@ export default {
margin-right: 15px;
}
+sup {
+ transform: translate(-10px, 5px) !important;
+ border: none !important;
+}
+
</style>