backup

frontend/app/components/managers/ContentManager.vue

@@ -0,0 +1,18 @@
+<script setup>
+import Content from '../viewer/content/Content.vue';
+import StatusBar from '../viewer/statusbar/StatusBar.vue';
+import TopBar from '../viewer/TopBar.vue';
+
+import { ShowContent } from '../../services/Content.js';
+</script>
+
+<template>
+    <div v-show="ShowContent">
+        <TopBar></TopBar>
+        <Content></Content>
+        <StatusBar></StatusBar>
+    </div>
+</template>
+
+<style scoped>
+</style>

frontend/app/components/managers/ToastManager.vue

@@ -0,0 +1,120 @@
+<script setup>
+import { ref } from 'vue';
+
+import { emitter } from '@/services/Emitter';
+
+const text = ref("");
+const toast = ref(null);
+
+let toastQueue = [];
+let displayingToast = false;
+
+function DisplayToast(){
+    if(displayingToast) return;
+    if(toastQueue.length == 0) return;
+
+    displayingToast = true;
+    let data = toastQueue.pop();
+
+    text.value = data.text;
+
+    toast.value.classList.add(data.color);
+    toast.value.classList.add("show");
+    setTimeout(() => {
+        toast.value.classList.add("sliding");
+        setTimeout(() => {
+            toast.value.style = {};
+            toast.value.classList.remove("show");
+            toast.value.classList.remove("sliding");
+            toast.value.classList.remove(data.color);
+            displayingToast = false;
+            DisplayToast();
+        }, 400);
+    }, data.duration);
+}
+
+emitter.on('toast', data => {
+    toastQueue.push(data);
+    DisplayToast();
+});
+
+</script>
+
+
+<template>
+    <div class="toast" ref="toast">
+        <div class="toast-container">{{ text }}</div>
+    </div>
+</template>
+
+
+<style scoped lang="scss">
+.toast-container {
+    height: 100%;
+    background-color: var(--color-background-soft);
+    padding: 10px;
+    margin-left: 5px;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+    transform: translate(2px,0px)
+}
+
+.toast {
+    position: absolute;
+    display: none;
+
+    top: 10px;
+    left: 50%;
+    transform: translate(-50%, 0);
+
+    min-width: 400px;
+    min-height: 40px;
+    border-radius: 6px;
+    text-align: center;
+
+    z-index: 9999999;
+
+
+    animation: slide-in 0.4s ease-in-out;
+    @keyframes slide-in {
+        0% {
+            transform: translate(-50%,-50px);
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
+    &.sliding {
+        @keyframes slide-out {
+            0% {
+                opacity: 1;
+            }
+            100% {
+                transform: translate(-50%,-50px);
+                opacity: 0;
+            }
+        }
+        animation: slide-out .4s ease-in-out forwards;
+    }
+    
+    &.show {
+        display: block;
+    }
+
+    /* Colors!!!! */
+
+    &.red {
+        background-color: rgb(243, 68, 68);
+    }
+
+    &.green {
+        background-color: rgb(92, 199, 92);
+    }
+
+    &.aqua {
+        background-color: rgb(113, 250, 250);
+    }
+}
+</style>

frontend/app/components/managers/WindowManager.vue

@@ -29,7 +29,7 @@ const windows = Windows();
 }
 
 .window-wrapper {
-    background-color: var(--window-background);
+    background-color: var(--color-window-background);
 
     /* backdrop-filter: blur(10px); */
     position: fixed;
@@ -37,6 +37,15 @@ const windows = Windows();
 
     display: flex;
     flex-direction: column;
-}
+    align-items: center;
+
+    border: solid 1px var(--color-window-border);
+    
+    /* opacity: 0; */
+    user-select: none;
+    -webkit-box-shadow: 0px 0px 10px -2px var(--color-window-shadow);
+    -moz-box-shadow: 0px 0px 10px -2px var(--color-window-shadow);
+    box-shadow: 0px 0px 10px -2px var(--color-window-shadow);
+  }
 
 </style>