kdsjdjks

2026-04-25 19:18:43 +02:00
parent 254a645c25
commit b8999ca7ee
1607 changed files with 9637 additions and 0 deletions
--- a/frontend/app/components/windows/partials/WindowHandle.vue
+++ b/frontend/app/components/windows/partials/WindowHandle.vue
@@ -0,0 +1,139 @@
+<script setup>
+import { onMounted, ref, watch } from 'vue';
+import { GetWindowWithId, ClearWindow, Windows } from '@/services/Windows';
+
+import ArrowLeftIcon from '/icons/iconoir/regular/arrow-left.svg';
+import XMarkIcon from '/icons/iconoir/regular/xmark.svg';
+import ResizeHandleIcon from '/icons/ui/resize-handle.svg';
+
+const props = defineProps(['window', 'handleHeight', 'custom', 'color']);
+const id = props.window;
+const handleHeight = props.handleHeight;
+
+const closeButton = ref(null);
+const backButton = ref(null);
+
+const title = ref("");
+const close = ref(false);
+const hasBack = ref(false);
+const def = ref(true);
+const resizable = ref(false);
+
+let closeAction;
+
+let backFunction;
+
+function setupHandle() {
+    let win = GetWindowWithId(id);
+    if(win.title) title.value = win.title;
+    if(win.close){
+        close.value = true;
+        closeAction = win.close;
+    }
+    if(win.back) {
+        hasBack.value = true;
+        backFunction = win.back;
+    }
+
+    if(handleHeight) {
+        let handle = document.getElementById('window-handle-' + id);
+        handle.style.height = handleHeight;
+    }
+
+    // Setup sounds
+    let currentWindowId = "window-wrapper-" + id;
+    let currentWindow = document.getElementById(currentWindowId);
+}
+
+function CloseButton(){
+    const audio = new Audio('/sounds/close.wav');
+    audio.type = "audio/wav"
+    audio.play();
+    if(typeof closeAction === 'function') closeAction();
+    // ClearWindow(id)
+}
+
+onMounted(() => {
+    if(props.custom) def.value = false;
+    let win = GetWindowWithId(id);
+    watch(GetWindowWithId(id), () => {
+        resizable.value = win.resizable;
+    })
+});
+
+defineExpose({
+    setupHandle
+});
+</script>
+
+
+<template>
+    <div class="window-handle" :id="'window-handle-' + id">
+
+        <div class="left" v-if="def">
+            <img class="icon icon-add-margin" :src="ArrowLeftIcon" draggable="false" ref="backButton" v-if="hasBack" v-on:click="backFunction">
+        </div>
+        <div class="center" v-if="def">
+            <span>{{ title }}</span>
+        </div>
+        <div class="right">
+            <img class="icon" :src="XMarkIcon" draggable="false" ref="closeButton" v-if="close" v-on:click="CloseButton">
+        </div>
+        <!-- span>{{ title }}</span>
+            
+        -->
+    </div>
+
+
+    <div v-show="resizable" class="window-resize-handle" :id="'window-resize-handle-' + id">
+        <img :src="ResizeHandleIcon" draggable="false">
+    </div>
+</template>
+
+<style scoped lang="scss">
+.window-resize-handle {
+    position: absolute;
+    filter: invert(0.8);
+    opacity: 0.6;
+    right: 0px;
+    bottom: 0px;
+    width: 18px;
+    height: 18px;
+
+    img {
+        width: 18px;
+        height: 18px;
+    }
+    z-index: 100;
+}
+
+.window-handle {
+
+    .left, .right {
+        flex: 1;
+        display: flex;
+    }
+
+    .left {
+        justify-content: left;
+    }
+
+    .right {
+        height: 24px;
+        justify-content: right;
+    }
+
+    span {
+        font-family: MrEavesRemake;
+    }
+
+    user-select: none;
+    justify-content: center;
+    width: 100%;
+
+    display: flex;
+    
+    background-color: var(--color-handler);
+}
+
+</style>