From 107458ccd4ba91a1e207a9e1be86a0db1ae5e4a3 Mon Sep 17 00:00:00 2001 From: Matheus Bastos Date: Mon, 20 Nov 2023 14:04:13 -0300 Subject: [PATCH] experimental dev changes --- lib/components/desktop/desktop.js | 0 lib/components/taskbar/taskbar.js | 33 +++++++++++++------ lib/components/window/window.js | 28 ++++++++++++++++ lib/debugmode.js | 30 +++++++++++++++++ lib/systemboot.js | 8 ++++- lib/systemstate.js | 4 +++ theme.css | 53 +++++++++++++++++++++++++++++-- 7 files changed, 143 insertions(+), 13 deletions(-) create mode 100644 lib/components/desktop/desktop.js create mode 100644 lib/components/window/window.js create mode 100644 lib/debugmode.js create mode 100644 lib/systemstate.js diff --git a/lib/components/desktop/desktop.js b/lib/components/desktop/desktop.js new file mode 100644 index 0000000..e69de29 diff --git a/lib/components/taskbar/taskbar.js b/lib/components/taskbar/taskbar.js index c7fa9fa..15ef1dc 100644 --- a/lib/components/taskbar/taskbar.js +++ b/lib/components/taskbar/taskbar.js @@ -7,14 +7,14 @@ componentHTML.innerHTML = `
-
+

User: ${SW_userData.username}

-
-

User: ${SW_userData.username}

+
+

-
-

User: ${SW_userData.username}

+
+

Configurações

@@ -26,10 +26,10 @@
- aqui fica a taskbar +

aqui fica a taskbar

- aqui fica a bandeja do sistema +

aqui fica a bandeja do sistema

`; @@ -70,7 +70,18 @@ function taskbarUpdateAppMenu() { console.log(applist) const apps = [ { name: "Paint", app: "paint", icon: "" }, - { name: "Terminal", app: "terminal", icon: "" } + { name: "Terminal 1", app: "terminal", icon: "" }, + { name: "Terminal 2", app: "terminal", icon: "" }, + { name: "Terminal 3", app: "terminal", icon: "" }, + { name: "Terminal 4", app: "terminal", icon: "" }, + { name: "Terminal 5", app: "terminal", icon: "" }, + { name: "Terminal 6", app: "terminal", icon: "" }, + { name: "Terminal 7", app: "terminal", icon: "" }, + { name: "Terminal 8", app: "terminal", icon: "" }, + { name: "Terminal 9", app: "terminal", icon: "" }, + { name: "Terminal 10", app: "terminal", icon: "" }, + { name: "Terminal 11", app: "terminal", icon: "" }, + { name: "Terminal 12", app: "terminal", icon: "" } ]; apps.forEach((app) => { @@ -82,7 +93,11 @@ function taskbarUpdateAppMenu() {
${app.name}
` - + item.onclick = () => { + createWindow(app, "blablabla") + }; applist.appendChild(item); + + console.log(app); }) } \ No newline at end of file diff --git a/lib/components/window/window.js b/lib/components/window/window.js new file mode 100644 index 0000000..717a677 --- /dev/null +++ b/lib/components/window/window.js @@ -0,0 +1,28 @@ +function createWindow (appinfo, path) { + const swdewindow = document.createElement("div"); + swdewindow.className = "swde-window"; + swdewindow.innerHTML = ` +
+
+ Ícone +
+
+

O título do aplicativo aqui

+
+
+
+ + + +
+
+
+
+

Conteúdo do aplicativo aqui

+
+ `; + + document.body.querySelector("#system").appendChild(swdewindow); + +} + \ No newline at end of file diff --git a/lib/debugmode.js b/lib/debugmode.js new file mode 100644 index 0000000..1bfd289 --- /dev/null +++ b/lib/debugmode.js @@ -0,0 +1,30 @@ +(() => { + /* Variables */ + const apps = [ + { name: "Paint", app: "paint", icon: "" }, + { name: "Terminal 1", app: "terminal", icon: "" }, + { name: "Terminal 2", app: "terminal", icon: "" }, + { name: "Terminal 3", app: "terminal", icon: "" }, + { name: "Terminal 4", app: "terminal", icon: "" }, + { name: "Terminal 5", app: "terminal", icon: "" }, + { name: "Terminal 6", app: "terminal", icon: "" }, + { name: "Terminal 7", app: "terminal", icon: "" }, + { name: "Terminal 8", app: "terminal", icon: "" }, + { name: "Terminal 9", app: "terminal", icon: "" }, + { name: "Terminal 10", app: "terminal", icon: "" }, + { name: "Terminal 11", app: "terminal", icon: "" }, + { name: "Terminal 12", app: "terminal", icon: "" } + ]; + + const config = { + "reloadPage": false, + } + + createWindow(apps[1], "blablabla"); + + if (config.reloadPage) { + setTimeout(() => { + window.location.reload(); + }, 5 * 1000); + } +})(); \ No newline at end of file diff --git a/lib/systemboot.js b/lib/systemboot.js index c657c18..8429cd3 100644 --- a/lib/systemboot.js +++ b/lib/systemboot.js @@ -4,12 +4,18 @@ const components = [ `${libPath}/systemconfig.js`, `${libPath}/systemhandlescripts.js`, - `${libPath}/renderUI.js` + `${libPath}/systemstate.js`, + `${libPath}/renderUI.js`, + `${libPath}/components/window/window.js`, + `${libPath}/debugmode.js`, ] components.forEach((elem) => { const loadScript = document.createElement("script"); + loadScript.type = "text/javascript"; loadScript.src = elem; + loadScript.async = false; + loadScript.defer = true; document.head.appendChild(loadScript); }) })(); \ No newline at end of file diff --git a/lib/systemstate.js b/lib/systemstate.js new file mode 100644 index 0000000..930c61b --- /dev/null +++ b/lib/systemstate.js @@ -0,0 +1,4 @@ +const swde_systemstate = { + "activeApps": [], + "activeWindows": [] +} \ No newline at end of file diff --git a/theme.css b/theme.css index 233973e..82fb284 100644 --- a/theme.css +++ b/theme.css @@ -14,7 +14,7 @@ body { position: absolute; display: block; width: 100vw; - height: 5vh; + height: 50px; bottom: 0; } .taskbar-flex { @@ -22,10 +22,14 @@ body { background-color: #2A2E32; width: 100%; height: 100%; + justify-content: center; + align-items: center; } .taskbar-items { + position: relative; width: 100%; + overflow: hidden; } .btn-menusuper { @@ -43,12 +47,21 @@ body { width: 500px; height: 50vh; background-color: #2A2E32; - bottom: 5vh; + bottom: 50px; + overflow-block: hidden; + z-index: 99999999; +} + +.div-menusuper__applications { + overflow-y: scroll; + width: 100%; + height: 90%; + display: block; } .menusuper__applicationsItem { display: flex; - padding: 5px; + padding: 15px; background-color: #2f3133; border-bottom: 1px solid white; } @@ -58,12 +71,46 @@ body { width: 100%; height: 50px; padding: 10px; + align-items: center; } .menusuper__actionbar-item { width: 100%; } +menusuper__actionbar-item menusuper__actionbar-user .hidden { display: none; +} + +/* Window Default Styles */ +.swde-window { + position: absolute; + display: block; + width: 800px; + height: 600px; + min-width: 300px; + min-height: 200px; + background-color: #5c6064; +} + +.swde-window-titlebar { + display: flex; + background-color: #2A2E32; + width: 100%; + padding: 5px; +} +.swde-window-titlebar > * { + width: 100%; +} + +.swde-window-actions button { + width: 30px; + padding: 5px; + border-radius: 15px; + border: 1px solid transparent; +} + +.swde-window-actions__buttons { + text-align: right; } \ No newline at end of file