From 8427aaf24ddf08348a78096025d4cdb5f4b31d52 Mon Sep 17 00:00:00 2001 From: Triston Date: Thu, 20 Jun 2024 01:03:47 -0500 Subject: [PATCH] update some desktop stuff --- assets/chrome.png | Bin 0 -> 798 bytes assets/file-image.png | Bin 0 -> 439 bytes assets/home.png | Bin 0 -> 405 bytes src/ui/desktop.ts | 42 +++++++++++++++++++++++++---------- src/ui/desktop_shortcut.ts | 44 +++++++++++++++++++++++++++++++++++++ src/ui/index.ts | 2 +- src/ui/window.ts | 15 ++++++++----- 7 files changed, 86 insertions(+), 17 deletions(-) create mode 100644 assets/chrome.png create mode 100644 assets/file-image.png create mode 100644 assets/home.png create mode 100644 src/ui/desktop_shortcut.ts diff --git a/assets/chrome.png b/assets/chrome.png new file mode 100644 index 0000000000000000000000000000000000000000..193aa20280a79ad74c44b82bd4cb0c0046b3895f GIT binary patch literal 798 zcmV+(1L6FMP)^gU_J>+=B^lJIleD!@lAGbb!k+ z1irf{6`&5+gq=&NH&*cQxU3zGJ5U{d?~ekSF!&H^h1IXA^Wk&okESkw?vTsqZutpq zp(F~JO=kya$SR;7H^CBE{12~D$XqCl0#48w36nwnUk8mm4fcYbp`bJ2MS6=DXbMB& zTo|{S0(;;XjEMrC(rFI8K`+`3Q$cS~eUo5+a)`}|un$hcsANtTRuhk)O%(8jj>a*- zN(zv_EDDXh{DJJcAa=oO`{P_NyHQdohU#L$_MRW6kCjo_fQiGL8GN*E1mgZbQ{&NsIKGi0NO_ZN9c?NBX>ixcoppe zcn5R9l%bdDw&ourS>ta`_QZHP$k_NOU?!bi;7iP!+9Vcl=>Z;`S;}si3~I;wkPp+L zC<@THB@nZy`cF$oItyR~xJQq(?g~b4EV}L@@WlpNX__ixKz(DPCuGY*N10PaMd6n5 zaI>$O*O&V0?M|cus?k3W1HfR@_irY*vpEPZf_dNEV@k2~0F#~Sx&Q{>AIZ*zX}b0$ zD?$C6uDzK8JA-Q20@28;X`7=Au3lh#l$G*6IL5+hh#wMFWwh1`iJO0$##QWe-(eb cd4=YF0rBXW8TG16y8r+H07*qoM6N<$f^!XZ^8f$< literal 0 HcmV?d00001 diff --git a/assets/file-image.png b/assets/file-image.png new file mode 100644 index 0000000000000000000000000000000000000000..8b20c8d1aa2770f7cf4f1257552c67dce486b93d GIT binary patch literal 439 zcmV;o0Z9IdP)h zn|}SqflGJKRNdQMpPp9VKR+$UKgN0wtb@@6?Hg=1z+24L3mjs&nLun!9#|~LM7+Qk zhJ#=QTy_xp3E%D+r-4R^e0U!(P&oSc-mkDzNUy;ZcmxYxq*np?D_2pGT!BwWhfFBP znO}r(-7?M>N6ruzew(Q?Lu(BNbLElDZRAh2jYEt)>KQ zUuZMuK<}!;BF(N(V5_Acg0rRtszRi9+aW|c)l8V*<($A)%QplkA<4QD2EZ}UwW3FT zP|TC7D3Z%|lU{`8H h`=qjpIuT@j`vq4fU>Riet#<$b002ovPDHLkV1j?(yT||l literal 0 HcmV?d00001 diff --git a/assets/home.png b/assets/home.png new file mode 100644 index 0000000000000000000000000000000000000000..6d4e49c7a16961a861ed1fd865883262134d6293 GIT binary patch literal 405 zcmV;G0c!q1^9SWDIgg-$kkvKsp6%rpMSE{eNy9ipH5~Ytsp(K$I39UbY=!62Dir*u% zvOAfN-3{Gs^2@tBGw<`v`)0CJt^D&-EucTd+9UXa6?n>%o7Z3#v18~rqHn|{xQLm= z3^cz9EhDsV;+l!u#Ez-T=@l~QBjXgN;S<(j&!{wryU+udumJBa2cN+xi_buPSFh*c z-V(^Ors6Wly*ms;RsQTJZJ=@wKqo{eWeYY!{WTRyL+jc`?~u3(YHP;ej_)z}fJHcW z^)xUx$J`0@!Yz#32HLfr5qK;po-7~c#Ec64Lj8J)D4&)^Ehx<~bz@kwj0 zutAdG+qqqFX@j6p%Drpw+YH~K=(ebQi(W__fC;$q9lOZ*6!W?tUZH0Hi*zOGC-)bR zw3cmyK?ZhUCUGy}^h}QK=_csidEu1M^{0FTjs{#AtxcG@00000NkvXXu0mjf7mvIM literal 0 HcmV?d00001 diff --git a/src/ui/desktop.ts b/src/ui/desktop.ts index 1c3d41d..aad5cb7 100644 --- a/src/ui/desktop.ts +++ b/src/ui/desktop.ts @@ -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; } } diff --git a/src/ui/desktop_shortcut.ts b/src/ui/desktop_shortcut.ts new file mode 100644 index 0000000..91b165a --- /dev/null +++ b/src/ui/desktop_shortcut.ts @@ -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); + } +} diff --git a/src/ui/index.ts b/src/ui/index.ts index 0682e17..634963a 100644 --- a/src/ui/index.ts +++ b/src/ui/index.ts @@ -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; } diff --git a/src/ui/window.ts b/src/ui/window.ts index b1010ea..ba64988 100644 --- a/src/ui/window.ts +++ b/src/ui/window.ts @@ -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; } }