update some desktop stuff

This commit is contained in:
Triston Armstrong 2024-06-20 01:03:47 -05:00
parent c30e83249c
commit 8427aaf24d
No known key found for this signature in database
GPG Key ID: FADE6AC6F956FC52
7 changed files with 86 additions and 17 deletions

BIN
assets/chrome.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 798 B

BIN
assets/file-image.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 439 B

BIN
assets/home.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 405 B

View File

@ -1,6 +1,11 @@
import Component from "./component";
import DesktopShortcut from "./desktop_shortcut";
import Window from "./window";
export default class Desktop extends Component {
shortcuts: DesktopShortcut[] = [];
windows: Window[] = [];
constructor() {
super();
this.element.id = "desktop";
@ -8,28 +13,43 @@ export default class Desktop extends Component {
this.element.style.width = "100%";
this.element.style.display = "grid";
this.element.style.gap = "10px";
this.element.style.padding = "10px";
this.element.style.display = "grid";
this.element.style.gridAutoFlow = "column";
this.element.style.gridTemplateColumns =
"repeat(auto-fill, minmax(80px, 1fr))";
"repeat(auto-fill, minmax(60px, 1fr))";
this.element.style.gridTemplateRows =
"repeat(auto-fill, minmax(80px, 1fr))";
for (let i = 0; i < 50; i++) {
const component = new Component();
component.element.innerText = String(i);
component.element.style.border = "1px solid white";
}
"repeat(auto-fill, minmax(60px, 1fr))";
}
addApplicationIcon() {
// reaches into the OS and adds an icon to the desktop
// this is a placeholder for now
updateDesktop() {
this.element.replaceChildren(...this.shortcuts.map((e) => e.element));
}
addApplicationShortcut(shortcut: DesktopShortcut) {
this.shortcuts.push(shortcut);
this.updateDesktop();
}
addOpenedWindow(w: Window) {
this.windows.push(w);
this.element.appendChild(w.start());
}
initDesktopShortcuts() {
this.addApplicationShortcut(
new DesktopShortcut("../../assets/home.png", "Home"),
);
this.addApplicationShortcut(
new DesktopShortcut("../../assets/file-image.png", "img_12131995.png"),
);
this.addOpenedWindow(new Window());
}
start() {
this.initDesktopShortcuts();
return this.element;
}
}

View File

@ -0,0 +1,44 @@
import Component from "./component";
export default class DesktopShortcut extends Component {
icon: string;
title: string;
constructor(icon: string, title: string) {
super();
this.icon = icon;
this.title = title;
this.element.style.borderRadius = "10px";
this.element.style.cursor = "pointer";
this.element.style.color = "white";
this.element.style.justifyContent = "center";
this.element.style.display = "flex";
this.element.style.flexDirection = "column";
this.element.style.alignItems = "center";
this.element.style.padding = "6px";
this.element.addEventListener("mouseover", () => {
this.element.style.border = "1px solid #0000005f";
});
this.element.addEventListener("mouseout", () => {
this.element.style.border = "1px solid #00000000";
});
const _icon = document.createElement("img");
const _title = document.createElement("p");
_icon.src = this.icon;
_icon.style.width = "30px";
_title.textContent = this.title;
_title.style.margin = "0";
_title.style.fontSize = "12px";
_title.style.marginTop = "4px";
_title.style.wordWrap = "anywhere";
this.addChild(_icon);
this.addChild(_title);
}
}

View File

@ -36,10 +36,10 @@ export default class UI extends Component {
desktop_container.id = "desktop_container";
desktop_container.style.display = "flex";
desktop_container.style.height = `calc(100vh - ${this.topbar.element.clientHeight}px)`;
this.addChild(desktop_container);
desktop_container.appendChild(this.navbar.start());
desktop_container.appendChild(this.desktop.start());
this.addChild(desktop_container);
return this.element;
}

View File

@ -1,14 +1,19 @@
export default class Window {
element: HTMLDialogElement = document.createElement("dialog");
element: HTMLDivElement = document.createElement("div");
initial_size = { w: 500, h: 500 } as const;
constructor() {
this.element.style.backgroundColor = "black";
this.element.style.width = `${this.initial_size.w}`;
this.element.style.height = `${this.initial_size.h}`;
this.element.style.backgroundColor = "#ccc";
this.element.style.width = `${this.initial_size.w}px`;
this.element.style.height = `${this.initial_size.h}px`;
this.element.style.position = "absolute";
this.element.style.zIndex = "10";
this.element.style.borderRadius = "10px";
this.element.style.boxShadow =
"0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)";
}
start(): HTMLDialogElement {
start(): HTMLDivElement {
return this.element;
}
}