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.

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>