Klectr/KDesktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update header to contain close button

Browse Source
This commit is contained in:
Triston Armstrong 2024-06-20 14:26:47 -05:00
parent 06d1a5a41a
commit a56e1d253e
1 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/ui/window.ts
View File

@ -14,20 +14,39 @@ export default class Window {
this.element.style.height = `${this.initial_size.h}px`; this.element.style.height = `${this.initial_size.h}px`;
this.application = application; this.application = application;
this._add_header("Hello World"); this._add_header();
this._add_content("This is a test"); this._add_content("This is a test");
this._add_resize_handles(); this._add_resize_handles();
this._handle_drag() this._handle_drag()
} }
private _add_header(title: string): HTMLDivElement { private _add_header(): HTMLDivElement {
this.header = new Component() this.header = new Component()
this.header.element.id = "header"; this.header.element.id = "header";
this.header.element.classList.add( this.header.element.classList.add(
"bg-[#333]", "p-2", "text-sm", "text-[#eee]", "rounded-t", "text-center", "cursor-move" "bg-[#333]", "py-1","px-4", "text-sm", "text-[#eee]", "rounded-t", "text-center", "cursor-move", "flex", "justify-between",
"items-center"
); );
this.header.element.innerText = title;
this.element.appendChild(this.header.start()); this.element.appendChild(this.header.start());
const window_title = new Component('window-title')
window_title.element.classList.add("flex-1")
window_title.element.innerText = "Hello world"
const close_btn_container = new Component('close-btn-container')
close_btn_container.element.classList.add("flex-1", "justify-end", "flex")
const closeButton= document.createElement('button')
closeButton.textContent = "X"
closeButton.classList.add("hover:rounded-full", "hover:bg-[#f554]", "w-6", "h-6", "hover", "font-red")
const dummy = document.createElement('div')
dummy.classList.add("flex-1")
this.header.addChild(dummy)
this.header.addChild(window_title.element)
close_btn_container.addChild(closeButton)
this.header.addChild(close_btn_container.start())
} }
private _handle_drag(e: MouseEvent): void { private _handle_drag(e: MouseEvent): void {