[💄] Added window resizing

This commit is contained in:
ThinLiquid 2023-12-08 11:38:01 +00:00 committed by GitHub
parent 1e948e2a62
commit f18923ff14
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 2 deletions

View file

@ -104,6 +104,11 @@ window-area {
margin: 10px; margin: 10px;
window { window {
resize: both;
max-width: 100%;
max-height: 100%;
min-height: 35px;
min-width: calc(35px * 6);
background: var(--base); background: var(--base);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -112,7 +117,7 @@ window-area {
overflow: hidden; overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.2);
background: var(--crust); background: var(--crust);
transition: 0.2s opacity, 0.2s width, 0.2s height; transition: 0.2s opacity, 0.2s transform;
window-header { window-header {
height: 35px; height: 35px;
@ -120,6 +125,7 @@ window-area {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 7.5px; gap: 7.5px;
user-select: none;
img { img {
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;

View file

@ -174,9 +174,11 @@ class FlowWindow {
if (this.isMinimized) { if (this.isMinimized) {
this.element.style.pointerEvents = 'all' this.element.style.pointerEvents = 'all'
this.element.style.opacity = '1' this.element.style.opacity = '1'
this.element.style.transform = 'translateY(0)'
} else { } else {
this.element.style.pointerEvents = 'none' this.element.style.pointerEvents = 'none'
this.element.style.opacity = '0' this.element.style.opacity = '0'
this.element.style.transform = 'translateY(10px)'
} }
this.isMinimized = !this.isMinimized this.isMinimized = !this.isMinimized
@ -228,9 +230,14 @@ class FlowWindow {
* Closes the window. * Closes the window.
*/ */
close (): void { 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 } }) const event = new CustomEvent('app_closed', { detail: { win: this } })
window.dispatchEvent(event) window.dispatchEvent(event)
setTimeout(() => {
this.element.remove()
}, 200)
} }
/** /**