From 7d2a6617b4a325aeca850e37ef1b9fc35c6a2e7e Mon Sep 17 00:00:00 2001 From: BinarySandia04 Date: Fri, 2 Aug 2024 18:54:14 +0200 Subject: [PATCH] KJdksjlkj --- client/src/assets/base.css | 11 +- client/src/assets/main.css | 8 +- client/src/main.js | 10 +- client/src/services/Windows.js | 115 +++++++++++++++++- client/src/views/HomeView.vue | 9 +- client/src/views/RegisterView.vue | 1 - client/src/views/managers/WindowManager.vue | 71 +++-------- client/src/views/partials/EditUserPartial.vue | 12 +- client/src/views/partials/WindowHandle.vue | 81 ++++++++++++ .../views/windows/AccountSettingsWindow.vue | 64 ++++++++++ .../src/views/windows/EditProfileWindow.vue | 18 ++- client/src/views/windows/ExampleWindow.vue | 17 ++- client/src/views/windows/LoginWindow.vue | 28 +++-- client/src/views/windows/MainMenuWindow.vue | 19 +-- client/src/views/windows/RegisterWindow.vue | 24 ++-- 15 files changed, 361 insertions(+), 127 deletions(-) create mode 100644 client/src/views/partials/WindowHandle.vue create mode 100644 client/src/views/windows/AccountSettingsWindow.vue diff --git a/client/src/assets/base.css b/client/src/assets/base.css index f77a823f..e9a2b6d1 100644 --- a/client/src/assets/base.css +++ b/client/src/assets/base.css @@ -10,14 +10,19 @@ --c-white-mute: #e2e2e2; --c-white-muter: #c4c4c4; + --c-white-blurred: #f8f8f8cc; + --c-black: #181818; - --c-black-semisoft: #1d1d1d; + --c-black-semisoft:1 #1d1d1d; --c-black-soft: #222222; --c-black-softer: #282828; --c-black-softest: #3a3a3a; --c-black-mute: #383838; --c-black-muter: #585858; + + --c-black-blurred: #222222cc; + --c-indigo: #2c3e50; @@ -44,6 +49,8 @@ /* semantic color variables for this project */ :root { + --window-background: var(--c-white-blurred); + --color-background: var(--c-white); --color-background-semisoft: var(--c-white-semisoft); --color-background-soft: var(--c-white-soft); @@ -63,6 +70,8 @@ @media (prefers-color-scheme: dark) { :root { + --window-background: var(--c-black-blurred); + --color-handler: var(--c-black-semisoft); --color-background: var(--c-black); --color-background-semisoft: var(--c-black-semisoft); diff --git a/client/src/assets/main.css b/client/src/assets/main.css index 0ad717c6..0b7c340a 100644 --- a/client/src/assets/main.css +++ b/client/src/assets/main.css @@ -33,9 +33,11 @@ a { } } -._blog-title { - margin-top: 120px; - padding-bottom: 30px; +.icon { + @media (prefers-color-scheme: dark) { + filter: invert(0.7); + } + } label { diff --git a/client/src/main.js b/client/src/main.js index 2ca416aa..862dd74c 100644 --- a/client/src/main.js +++ b/client/src/main.js @@ -1,7 +1,7 @@ import './assets/main.css' import './assets/prism.css' -import { createApp } from 'vue' +import { createApp, reactive } from 'vue' import App from './App.vue' import router from './router' @@ -35,7 +35,13 @@ VueMarkdownEditor.use(createKatexPlugin()); const app = createApp(App).use(VueMarkdownEditor); -app.config.globalProperties.emitter = emitter; +app.config.globalProperties.rollWindows = { + login: reactive([]), + register: reactive([]), + test: reactive([]), + main_menu: reactive([]), + edit_profile: reactive([]), +}; app.use(router) diff --git a/client/src/services/Windows.js b/client/src/services/Windows.js index 91635ceb..f1980e2d 100644 --- a/client/src/services/Windows.js +++ b/client/src/services/Windows.js @@ -1,16 +1,42 @@ -function SetupHandle(id){ +import { reactive, ref } from 'vue' + +const windows = { + login: ref([]), + register: ref([]), + test: ref([]), + main_menu: ref([]), + edit_profile: ref([]), +}; + +const reload = ref(0); + +let ReloadRef = () => { return reload }; +let Windows = () => { return windows }; + +let currentIndex = 1; + +function SetupHandle(id, handle, handleData){ + + // Update window info with handle info + + let win = GetWindowWithId(id); + win.handle = handleData; + let currentWindowId = "window-wrapper-" + id; let currentWindowHandleId = "window-handle-" + id; let mouseDown = false; let currentWindow = document.getElementById(currentWindowId); - let handler = document.getElementById(currentWindowHandleId); let offsetX = 0; let offsetY = 0; + currentWindow.addEventListener("mousedown", (event) => { + SetOnTop(id); + }); + handler.addEventListener("mousedown", (event) => { mouseDown = true; @@ -33,7 +59,11 @@ function SetupHandle(id){ document.addEventListener("mouseup", (event) => { mouseDown = false; + // ummm suposo que no pots tancar mentres mous? + SaveWindowPos({id, x: parseInt(currentWindow.style.left, 10), y: parseInt(currentWindow.style.top, 10)}); }); + + handle.value.setupHandle(); } function SetSize(id, size){ @@ -60,11 +90,90 @@ function SetPosition(id, pos){ currentWindow.style.top = pos.y + "px"; currentWindow.style.left = pos.x + "px"; + + SaveWindowPos({id, x: pos.x, y: pos.y}) } +function ResetPosition(id, pos){ + let win = GetWindowWithId(id); + let data = {x: win.x, y: win.y}; + + if(data.x && data.y){ + SetPosition(id, data); + return; + } + SetPosition(id, pos); +} + + +function CreateWindow(data){ + if(windows[data.type] === undefined){ + console.error("Window type " + data.type + " is not defined!"); + return; + } + + let contains = false; + for (let i = 0; i < windows[data.type].length; i++) { + if(windows[data.type][i].id == data.id){ + contains = true; + break; + } + } + + if(!contains) { + windows[data.type].value.push(data); + // reload.value += 1; + + setTimeout(() => SetOnTop(data.id), 0); + } +} + +function ClearWindows(data){ + windows[data.type].value = []; + // reload.value += 1; +} + +function ClearWindow(id){ + let win = GetWindowWithId(id); + windows[win.type].value = windows[win.type].value.filter((e) => {return e.id !== id}); + // reload.value += 1; +} + +function GetWindowWithId(id){ + for(let key of Object.keys(windows)){ + for(let i = 0; i < windows[key].value.length; i++){ + if(windows[key].value[i].id == id){ + return windows[key].value[i]; + } + } + } +} + +function SaveWindowPos(data){ + let win = GetWindowWithId(data.id); + if(win === undefined) return; + win.x = data.x; + win.y = data.y; +} + +function SetOnTop(id){ + let currentWindowId = "window-wrapper-" + id; + let currentWindow = document.getElementById(currentWindowId); + + currentIndex += 1; + currentWindow.style.zIndex = currentIndex; +} export { SetupHandle, SetSize, - SetPosition + SetPosition, + ResetPosition, + Windows, + ReloadRef, + ClearWindows, + CreateWindow, + GetWindowWithId, + SaveWindowPos, + ClearWindow } \ No newline at end of file diff --git a/client/src/views/HomeView.vue b/client/src/views/HomeView.vue index 30af7694..14b996a9 100644 --- a/client/src/views/HomeView.vue +++ b/client/src/views/HomeView.vue @@ -5,17 +5,14 @@ import { RouterLink, RouterView } from 'vue-router' import WindowManager from '@/views/managers/WindowManager.vue' import { GetUser } from '@/services/User' -// Gestionem ventanas -import useEmitter from '@/services/Emitter'; -const emitter = useEmitter(); - +import { CreateWindow } from '@/services/Windows' onMounted(() => { if(GetUser()){ - emitter.emit("create-window", {type: "main_menu", id: "main_menu"}) + CreateWindow({type: "main_menu", id: "main_menu"}) return; } - emitter.emit("create-window", {type: "login", id: "login"}); + CreateWindow({type: "login", id: "login"}); } ); diff --git a/client/src/views/RegisterView.vue b/client/src/views/RegisterView.vue index 262986e4..4f54763f 100644 --- a/client/src/views/RegisterView.vue +++ b/client/src/views/RegisterView.vue @@ -31,7 +31,6 @@ function register(){ const data = response.data; if(data.error){ - console.log(data); errorMessage.value = data.msg; } else { errorMessage.value = ""; diff --git a/client/src/views/managers/WindowManager.vue b/client/src/views/managers/WindowManager.vue index 68ff1c12..da375840 100644 --- a/client/src/views/managers/WindowManager.vue +++ b/client/src/views/managers/WindowManager.vue @@ -7,58 +7,33 @@ import RegisterWindow from '@/views/windows/RegisterWindow.vue' import ExampleWindow from '@/views/windows/ExampleWindow.vue' import MainMenuWindow from '@/views/windows/MainMenuWindow.vue' import EditProfileWindow from '@/views/windows/EditProfileWindow.vue' +import AccountSettingsWindow from '../windows/AccountSettingsWindow.vue' + +import { Windows, ReloadRef } from '@/services/Windows'; // Gestionem ventanas import useEmitter from '@/services/Emitter'; -const emitter = useEmitter(); -const reload = ref(0); +const reload = ReloadRef(); +const windows = Windows(); -const windows = { - login: reactive([]), - register: reactive([]), - test: reactive([]), - main_menu: reactive([]), - edit_profile: reactive([]), -}; - -emitter.on("create-window", (data) => { - if(windows[data.type] === undefined){ - console.log("Window type " + data.type + " is not defined!"); - return; - } - - let contains = false; - for (var i = 0; i < windows[data.type].length; i++) { - if(windows[data.type][i].id == data.id){ - contains = true; - break; - } - } - - console.log(contains); - - if(!contains) { - windows[data.type].push(data); - // reload.value += 1; - } -}) - - -emitter.on("clear-windows", (data) => { - windows[data.type] = []; - reload.value += 1; -}) +// Win names +const login = windows.login; +const register = windows.register; +const test = windows.test; +const main_menu = windows.main_menu; +const edit_profile = windows.edit_profile; @@ -66,8 +41,9 @@ emitter.on("clear-windows", (data) => { diff --git a/client/src/views/partials/EditUserPartial.vue b/client/src/views/partials/EditUserPartial.vue index 10b498ef..8c2a437b 100644 --- a/client/src/views/partials/EditUserPartial.vue +++ b/client/src/views/partials/EditUserPartial.vue @@ -10,6 +10,7 @@ import Api from '@/services/Api' import url from '@/services/BackendURL' import useEmitter from '@/services/Emitter'; +import { ClearWindows, CreateWindow } from '../../services/Windows'; const emitter = useEmitter(); const username = ref(""); @@ -25,12 +26,12 @@ function retrieveAvatar(){ function LogOut(){ LogoutUser(); - emitter.emit("clear-windows", {type: "main_menu"}); - emitter.emit("create-window", {type: "login", id: "login"}) + ClearWindows({type: "main_menu"}); + CreateWindow({type: "login", id: "login"}); } function EditProfile(){ - emitter.emit("create-window", {type: "edit_profile", id: "edit_profile"}) + CreateWindow({type: "edit_profile", id: "edit_profile"}); } onMounted(() => { @@ -67,13 +68,14 @@ onMounted(() => {
- +
@@ -95,7 +97,7 @@ onMounted(() => { .main-user-container { background-color: var(--color-background-softer); width: 100%; - + user-select: none; } .main-user-container-inner { diff --git a/client/src/views/partials/WindowHandle.vue b/client/src/views/partials/WindowHandle.vue new file mode 100644 index 00000000..939c471f --- /dev/null +++ b/client/src/views/partials/WindowHandle.vue @@ -0,0 +1,81 @@ + + + + + + + diff --git a/client/src/views/windows/AccountSettingsWindow.vue b/client/src/views/windows/AccountSettingsWindow.vue new file mode 100644 index 00000000..39d6cfef --- /dev/null +++ b/client/src/views/windows/AccountSettingsWindow.vue @@ -0,0 +1,64 @@ + + + + + + + diff --git a/client/src/views/windows/EditProfileWindow.vue b/client/src/views/windows/EditProfileWindow.vue index 7a62f634..b31b29c5 100644 --- a/client/src/views/windows/EditProfileWindow.vue +++ b/client/src/views/windows/EditProfileWindow.vue @@ -1,7 +1,8 @@ diff --git a/client/src/views/windows/ExampleWindow.vue b/client/src/views/windows/ExampleWindow.vue index 2aa5ea83..39d6cfef 100644 --- a/client/src/views/windows/ExampleWindow.vue +++ b/client/src/views/windows/ExampleWindow.vue @@ -3,14 +3,13 @@ import VersionRender from '@/views/others/VersionRender.vue' import ErrorMessage from '@/views/others/ErrorMessage.vue' -import { onMounted, ref } from 'vue'; -import { SetupHandle, SetSize, SetPosition } from '@/services/Windows'; +import { onMounted, onUpdated, ref } from 'vue'; +import { SetupHandle, SetSize, SetPosition, ResetPosition } from '@/services/Windows'; + +const handle = ref(null); import Api from '@/services/Api.js' -import useEmitter from '@/services/Emitter'; -const emitter = useEmitter(); - const props = defineProps(['data']); const data = props.data; @@ -18,18 +17,16 @@ let id = data.id; let title = data.title; onMounted(() => { - SetupHandle(id); + SetupHandle(id, handle, {title: "Example window", close: true}); SetSize(id, {x: 500, y: 380}); - SetPosition(id, "center"); + ResetPosition(id, "center"); });