diff --git a/src/assets/style.less b/src/assets/style.less index a0956c6..3418b8c 100644 --- a/src/assets/style.less +++ b/src/assets/style.less @@ -104,6 +104,11 @@ window-area { margin: 10px; window { + resize: both; + max-width: 100%; + max-height: 100%; + min-height: 35px; + min-width: calc(35px * 6); background: var(--base); display: flex; flex-direction: column; @@ -112,7 +117,7 @@ window-area { overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.2); background: var(--crust); - transition: 0.2s opacity, 0.2s width, 0.2s height; + transition: 0.2s opacity, 0.2s transform; window-header { height: 35px; @@ -120,6 +125,7 @@ window-area { display: flex; align-items: center; gap: 7.5px; + user-select: none; img { aspect-ratio: 1 / 1; diff --git a/src/structures/FlowWindow.ts b/src/structures/FlowWindow.ts index 97fb99d..7c4b13e 100644 --- a/src/structures/FlowWindow.ts +++ b/src/structures/FlowWindow.ts @@ -106,6 +106,8 @@ class FlowWindow { if (config.canResize === undefined || config.canResize === null) config.canResize = true + if (!config.canResize) this.element.style.resize = 'none' + this.element.style.width = `${config.width ?? 300}px` this.element.style.height = `${config.height ?? 200}px` @@ -174,9 +176,11 @@ class FlowWindow { if (this.isMinimized) { this.element.style.pointerEvents = 'all' this.element.style.opacity = '1' + this.element.style.transform = 'translateY(0)' } else { this.element.style.pointerEvents = 'none' this.element.style.opacity = '0' + this.element.style.transform = 'translateY(10px)' } this.isMinimized = !this.isMinimized @@ -228,9 +232,14 @@ class FlowWindow { * Closes the window. */ close (): void { - this.element.remove() + this.element.style.pointerEvents = 'none' + this.element.style.opacity = '0' + this.element.style.transform = 'translateY(10px)' const event = new CustomEvent('app_closed', { detail: { win: this } }) window.dispatchEvent(event) + setTimeout(() => { + this.element.remove() + }, 200) } /**