diff --git a/client/public/icons/other/License b/client/public/icons/ui/License similarity index 100% rename from client/public/icons/other/License rename to client/public/icons/ui/License diff --git a/client/public/icons/other/noun-shield.svg b/client/public/icons/ui/noun-shield.svg similarity index 100% rename from client/public/icons/other/noun-shield.svg rename to client/public/icons/ui/noun-shield.svg diff --git a/client/public/icons/ui/resize-handle.svg b/client/public/icons/ui/resize-handle.svg new file mode 100644 index 00000000..93a1666f --- /dev/null +++ b/client/public/icons/ui/resize-handle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/services/Windows.js b/client/src/services/Windows.js index 4a354b1a..b4a60d59 100644 --- a/client/src/services/Windows.js +++ b/client/src/services/Windows.js @@ -3,6 +3,7 @@ import { Disconnect } from './Dragonroll'; const windows = ref([]) +// Presets const defValues = { 'test': { id: "example", @@ -19,7 +20,8 @@ const defValues = { }, 'main_menu': { id: 'main_menu', - title: "DragonRoll" + title: "DragonRoll", + resizable: true, }, 'edit_profile': { id: 'edit_profile', @@ -132,15 +134,19 @@ function SetupHandle(id, handle){ let currentWindowId = "window-wrapper-" + id; let currentWindowHandleId = "window-handle-" + id; + let currentWindowResizerId = "window-resize-handle-" + id; let mouseDown = false; let currentWindow = document.getElementById(currentWindowId); let handler = document.getElementById(currentWindowHandleId); + let resizer = document.getElementById(currentWindowResizerId); let offsetX = 0; let offsetY = 0; + // Programar un resizer mitjanament competent + currentWindow.addEventListener("mousedown", (event) => { SetOnTop(id); }); @@ -177,9 +183,22 @@ function SetupHandle(id, handle){ function SetSize(id, size){ let currentWindowId = "window-wrapper-" + id; let currentWindow = document.getElementById(currentWindowId); + let win = GetWindowWithId(id); currentWindow.style.width = size.x + "px"; currentWindow.style.height = size.y + "px"; + + win.size = size; +} + +function SetMaxSize(id, maxSize){ + let win = GetWindowWithId(id); + win.maxSize = maxSize; +} + +function SetMinSize(id, minSize){ + let win = GetWindowWithId(id); + win.minSize = minSize; } function SetPosition(id, pos){ @@ -293,6 +312,8 @@ function SetOnTop(id){ export { SetupHandle, SetSize, + SetMaxSize, + SetMinSize, SetPosition, ResetPosition, Windows, diff --git a/client/src/views/partials/WindowHandle.vue b/client/src/views/partials/WindowHandle.vue index 1fb0e0d8..70633704 100644 --- a/client/src/views/partials/WindowHandle.vue +++ b/client/src/views/partials/WindowHandle.vue @@ -15,6 +15,7 @@ const backButton = ref(null); const title = ref(""); const close = ref(false); const hasBack = ref(false); +const resizable = ref(false); const def = ref(true); let backFunction; @@ -29,6 +30,10 @@ function setupHandle() { backFunction = win.back; } + if(win.resizable){ + resizable.value = true; + } + if(handleHeight) { let handle = document.getElementById('window-handle-' + id); handle.style.height = handleHeight; @@ -68,20 +73,39 @@ defineExpose({