diff options
author | RaindropsSys <contact@minteck.org> | 2023-06-22 23:06:37 +0200 |
---|---|---|
committer | RaindropsSys <contact@minteck.org> | 2023-06-22 23:06:37 +0200 |
commit | ac6e5bbf62db1d2a8a402b85b9c1fa7e4b167b53 (patch) | |
tree | bb013d69e1a6d770072bf97558cbc2bc921d4253 /core | |
parent | c67e72c95d5fb6afef6b0b72800ea3eae4310fa1 (diff) | |
download | kirinos-ac6e5bbf62db1d2a8a402b85b9c1fa7e4b167b53.tar.gz kirinos-ac6e5bbf62db1d2a8a402b85b9c1fa7e4b167b53.tar.bz2 kirinos-ac6e5bbf62db1d2a8a402b85b9c1fa7e4b167b53.zip |
Updated 3 files and added 6 files (automated)
Diffstat (limited to 'core')
-rw-r--r-- | core/desktop/index.html | 82 | ||||
-rw-r--r-- | core/launcher/icons/power.svg | 1 | ||||
-rw-r--r-- | core/launcher/icons/settings.svg | 1 | ||||
-rw-r--r-- | core/launcher/index.html | 98 | ||||
-rw-r--r-- | core/status/index.html | 47 |
5 files changed, 175 insertions, 54 deletions
diff --git a/core/desktop/index.html b/core/desktop/index.html index 9024117..928e65a 100644 --- a/core/desktop/index.html +++ b/core/desktop/index.html @@ -2,7 +2,7 @@ <html lang="en"> <head> <meta charset="UTF-8"> - <title>mangoos-desktop</title> + <title>mangoos-shell</title> <style> * { font-family: "Inter", sans-serif; @@ -21,43 +21,79 @@ background-position: center; } - html, body { + html { background-color: #ed9464; color: black; margin: 0; } - #status { + body { + margin: 0; + } + + #status-outer { height: 32px; + border-bottom: 1px solid rgba(0, 0, 0, .05); + backdrop-filter: blur(50px); + position: fixed; + inset: 0; + z-index: 999999; + } + + #launcher-outer { + margin-left: 18px; + margin-top: 32px; + height: 384px; + width: 542px; + border-radius: 7px; + border-left: 1px solid rgba(0, 0, 0, .05); + border-right: 1px solid rgba(0, 0, 0, .05); + border-bottom: 1px solid rgba(0, 0, 0, .05); + box-shadow: 0 0 20px 7px rgba(0, 0, 0, .3); + backdrop-filter: blur(50px); + } + + #launcher { + border-radius: 7px; + } + + #launcher-close-space { + position: fixed; + inset: 0; + z-index: 99999; + } + + iframe { + border: none; } </style> </head> <body> <div id="bg"></div> - <div id="status-outer"></div> + <div id="status-outer"> + <iframe style="display: flex; height: 100%; width: 100%;" id="status" src="../status/index.html"></iframe> + </div> + <div id="launcher-close-space" style="display: none;" onclick="closeMenu();"> + <div id="launcher-outer"> + <iframe style="display: flex; height: 100%; width: 100%;" id="launcher" src="../launcher/index.html"></iframe> + </div> + </div> <script> - document.getElementById("status-outer").innerHTML = ` - <webview id="status" src="../status/index.html#${btoa(JSON.stringify({ - width: document.getElementById("bg").clientWidth, - height: document.getElementById("bg").clientHeight - }))}" nodeintegration webpreferences="contextIsolation=no"></webview> - `; + function statusUpdate(payload) { + console.info("update =>", payload); - window.onresize = () => { - try { - document.getElementById("status").executeJavaScript(`resizeBackground(${document.getElementById("bg").clientWidth}, ${document.getElementById("bg").clientHeight});`); - } catch (e) {} + if (payload['action'] === "clickOn" && payload['item'] === "menu") { + document.getElementById("status").contentWindow.setMenuActive(true); + document.getElementById("launcher-close-space").style.display = ""; + document.getElementById("status-outer").style.pointerEvents = "none"; + } } - document.getElementById("status").addEventListener('console-message', (e) => { - console.log('[status]', e.message) - }); - - document.getElementById("status").addEventListener("ipc-message", (event) => { - if (event.channel === "status") { - console.info("update =>", event.args[0]); - } - }) + function closeMenu() { + document.getElementById("status").contentWindow.setMenuActive(false); + document.getElementById("launcher-close-space").style.display = "none"; + document.getElementById("status-outer").style.pointerEvents = ""; + } const fs = require("fs"); diff --git a/core/launcher/icons/power.svg b/core/launcher/icons/power.svg new file mode 100644 index 0000000..e12cf33 --- /dev/null +++ b/core/launcher/icons/power.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M450-438v-406h60v406h-60Zm30 320q-74 0-139.5-28.5T226-224q-49-49-77.5-114.5T120-478q0-80 34-149.5T250-751l42 42q-53 43-82.5 102.5T180-478.022Q180-353 267.5-265.5 355-178 480-178q125.357 0 212.679-87.5Q780-353 780-478.022 780-547 750.5-607.5 721-668 670-709l43-42q60 51 93.5 122T840-478q0 74-28.5 139.5t-77 114.5q-48.5 49-114 77.5T480-118Z"/></svg>
\ No newline at end of file diff --git a/core/launcher/icons/settings.svg b/core/launcher/icons/settings.svg new file mode 100644 index 0000000..a292720 --- /dev/null +++ b/core/launcher/icons/settings.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="m388-80-20-126q-19-7-40-19t-37-25l-118 54-93-164 108-79q-2-9-2.5-20.5T185-480q0-9 .5-20.5T188-521L80-600l93-164 118 54q16-13 37-25t40-18l20-127h184l20 126q19 7 40.5 18.5T669-710l118-54 93 164-108 77q2 10 2.5 21.5t.5 21.5q0 10-.5 21t-2.5 21l108 78-93 164-118-54q-16 13-36.5 25.5T592-206L572-80H388Zm92-270q54 0 92-38t38-92q0-54-38-92t-92-38q-54 0-92 38t-38 92q0 54 38 92t92 38Zm0-60q-29 0-49.5-20.5T410-480q0-29 20.5-49.5T480-550q29 0 49.5 20.5T550-480q0 29-20.5 49.5T480-410Zm0-70Zm-44 340h88l14-112q33-8 62.5-25t53.5-41l106 46 40-72-94-69q4-17 6.5-33.5T715-480q0-17-2-33.5t-7-33.5l94-69-40-72-106 46q-23-26-52-43.5T538-708l-14-112h-88l-14 112q-34 7-63.5 24T306-642l-106-46-40 72 94 69q-4 17-6.5 33.5T245-480q0 17 2.5 33.5T254-413l-94 69 40 72 106-46q24 24 53.5 41t62.5 25l14 112Z"/></svg>
\ No newline at end of file diff --git a/core/launcher/index.html b/core/launcher/index.html new file mode 100644 index 0000000..c1faacd --- /dev/null +++ b/core/launcher/index.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <script>window.require = window.parent.require;</script> + <meta charset="UTF-8"> + <title>mangoos-launcher</title> + <style> + * { + font-family: "Inter", sans-serif; + user-select: none; + user-focus: none; + outline: none; + } + + ::-webkit-scrollbar { + width: 7px; + } + + ::-webkit-scrollbar-track { + background: transparent; + } + + ::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, .25); + border-radius: 999px; + } + + ::-webkit-scrollbar-thumb:hover { + background: rgba(0, 0, 0, .35); + } + + ::-webkit-scrollbar-thumb:active { + background: rgba(0, 0, 0, .5); + } + + html, body { + background-color: transparent; + color: black; + margin: 0; + } + + #launcher { + background-color: rgba(255, 255, 255, .5); + position: fixed; + inset: 0; + } + + .icon:active, .icon.active, .app:active, .app.active { + background-color: rgba(0, 0, 0, .1); + border-radius: 5px; + } + </style> +</head> +<body> + <div id="launcher" style="display: grid; grid-template-columns: 65px 1fr;"> + <div style="border-right: 1px solid rgba(0, 0, 0, .05); display: grid; grid-template-rows: max-content 1fr max-content;"> + <div> + <img src="" alt="" id="avatar" style="width: 48px; height: 48px; border-radius: 999px; margin: 16px 8px;"> + <script> + document.getElementById("avatar").src = require('fs').existsSync("/mango/session/avatar") ? "file:///mango/session/avatar" : "../../defaultuser.svg"; + </script> + </div> + <div></div> + <div style="margin: 16px 8px;"> + <a id="icon-settings" style="display: flex; align-items: center; justify-content: center; margin-left: auto; margin-right: auto; height: 32px; width: 32px; vertical-align: middle;" class="icon"> + <img src="./icons/settings.svg" alt="" style="width: 24px; height: 24px; vertical-align: middle;"> + </a> + <a id="icon-power" style="display: flex; align-items: center; justify-content: center; margin-left: auto; margin-right: auto; height: 32px; width: 32px; vertical-align: middle;" class="icon"> + <img src="./icons/power.svg" alt="" style="width: 24px; height: 24px; vertical-align: middle;"> + </a> + </div> + </div> + <div style="overflow-y: scroll;"> + <div style="display: grid; grid-template-columns: repeat(4, 96px); grid-gap: 20px; margin: 16px;" id="list"></div> + <script> + const fs = require('fs'); + const path = require('path'); + + for (let app of [ + ...fs.readdirSync("/mango/coreapps").map(i => "/mango/coreapps/" + i), + ...fs.readdirSync("/mango/apps").map(i => "/mango/apps/" + i), + ...fs.readdirSync("/mango/session/apps").map(i => "/mango/session/apps/" + i) + ]) { + if (app.endsWith(".mpi") && fs.existsSync(app + "/icon.png")) { + let name = path.basename(app, ".mpi"); + document.getElementById("list").innerHTML += ` + <a class="app" style="padding: 8px 0;" onclick="parent.closeMenu(); parent.startApp(\`${app}\`);"> + <img class="app-icon" src="file://${app}/icon.png" style="width: 56px; height: 56px; border-radius: 999px; margin-left: auto; margin-right: auto; display: block;"> + <div class="app-name" style="font-size: 14px; margin-top: 10px; text-align: center; max-width: 80px; white-space: nowrap;overflow: hidden !important;text-overflow: ellipsis; margin-left: auto; margin-right: auto;">${name}</div> + </a> + `; + } + } + </script> + </div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/core/status/index.html b/core/status/index.html index dc9c165..e7a0cd0 100644 --- a/core/status/index.html +++ b/core/status/index.html @@ -1,6 +1,7 @@ <!DOCTYPE html> <html lang="en"> <head> + <script>window.require = window.parent.require;</script> <meta charset="UTF-8"> <title>mangoos-status</title> <style> @@ -11,18 +12,9 @@ outline: none; } - #bg { - position: fixed; - inset: 0; - z-index: -1; - background-color: #ed9464; - background-image: url("../../wallpaper.jpg"); - background-size: cover; - background-position: center; - } html, body { - background-color: #ed9464; + background-color: transparent; color: black; margin: 0; } @@ -30,11 +22,10 @@ #status-bar { position: fixed; inset: 0; - backdrop-filter: blur(50px); background-color: rgba(255, 255, 255, .5); } - .status-bar-clickable:active { + .status-bar-clickable:active, .status-bar-clickable.active { background-color: rgba(0, 0, 0, .1); border-radius: 5px; } @@ -48,26 +39,33 @@ <div id="bg"></div> <div id="status-bar" style="padding: 0 20px;"> <div id="bar-left" style="display: inline-block; height: 100%;"> - <a onclick="ipcRenderer.sendToHost('status', { action: 'clickOn', item: 'menu' });" id="mango-menu" class="status-bar-clickable" style="height: 31px; display: inline-flex; align-items: center; justify-content: center; width: 31px;"> + <a onclick="parent.statusUpdate({ action: 'clickOn', item: 'menu' });" id="mango-menu" class="status-bar-clickable" style="height: 31px; display: inline-flex; align-items: center; justify-content: center; width: 31px;"> <img src="../../logo-symbolic.svg" style="width: 24px; pointer-events: none;"> </a> </div> <div id="bar-right" style="margin-left: auto; display: inline-block; width: max-content; float: right; height: 100%;"> - <a onclick="ipcRenderer.sendToHost('status', { action: 'clickOn', item: 'volume' });" id="item-volume" class="status-bar-clickable" style="height: 31px; display: inline-flex; align-items: center; justify-content: center; width: 31px; vertical-align: middle;"> + <a onclick="parent.statusUpdate({ action: 'clickOn', item: 'volume' });" id="item-volume" class="status-bar-clickable" style="height: 31px; display: inline-flex; align-items: center; justify-content: center; width: 31px; vertical-align: middle;"> <img id="item-volume-icon" src="" style="width: 24px; pointer-events: none; vertical-align: middle;"> - </a><a onclick="ipcRenderer.sendToHost('status', { action: 'clickOn', item: 'network' });" id="item-network" class="status-bar-clickable" style="height: 31px; display: inline-flex; align-items: center; justify-content: center; width: 31px; vertical-align: middle;"> + </a><a onclick="parent.statusUpdate({ action: 'clickOn', item: 'network' });" id="item-network" class="status-bar-clickable" style="height: 31px; display: inline-flex; align-items: center; justify-content: center; width: 31px; vertical-align: middle;"> <img id="item-network-icon" src="" style="width: 24px; pointer-events: none; vertical-align: middle;"> - </a><a onclick="ipcRenderer.sendToHost('status', { action: 'clickOn', item: 'battery' });" id="item-battery" class="status-bar-clickable" style="height: 31px; display: inline-flex; align-items: center; justify-content: center; width: 31px; vertical-align: middle;"> + </a><a onclick="parent.statusUpdate({ action: 'clickOn', item: 'battery' });" id="item-battery" class="status-bar-clickable" style="height: 31px; display: inline-flex; align-items: center; justify-content: center; width: 31px; vertical-align: middle;"> <img id="item-battery-icon" src="" style="width: 24px; pointer-events: none; vertical-align: middle;"> - </a><a onclick="ipcRenderer.sendToHost('status', { action: 'clickOn', item: 'clock' });" id="item-clock" class="status-bar-clickable" style="height: 31px; display: inline-flex; align-items: center; justify-content: center; width: max-content; vertical-align: middle;"> <span id="item-clock-week"></span> <span id="item-clock-day" class="n"></span> <span id="item-clock-month"></span> <span id="item-clock-hour" class="n"></span>:<span id="item-clock-minute" class="n"></span></a> + </a><a onclick="parent.statusUpdate({ action: 'clickOn', item: 'clock' });" id="item-clock" class="status-bar-clickable" style="height: 31px; display: inline-flex; align-items: center; justify-content: center; width: max-content; vertical-align: middle;"> <span id="item-clock-week"></span> <span id="item-clock-day" class="n"></span> <span id="item-clock-month"></span> <span id="item-clock-hour" class="n"></span>:<span id="item-clock-minute" class="n"></span></a> </div> </div> <script> - const ipcRenderer = require('electron').ipcRenderer; const libmangoaudio = require('../../lib/libmangoaudio'); const si = require('systeminformation'); const wifi = require('node-wifi'); + function setMenuActive(active) { + if (active) { + document.getElementById("mango-menu").classList.add("active"); + } else { + document.getElementById("mango-menu").classList.remove("active"); + } + } + wifi.init({ iface: null }); @@ -171,19 +169,6 @@ } } }, 1000); - - function resizeBackground(width, height) { - document.getElementById("bg").style.width = width + "px"; - document.getElementById("bg").style.height = height + "px"; - } - - let info = JSON.parse(atob(location.hash.substring(1))); - resizeBackground(info.width, info.height); - const fs = require("fs"); - - if (fs.existsSync("/mango/session/config/wallpaper")) { - document.getElementById("bg").style.backgroundImage = 'url("file:///mango/session/config/wallpaper")'; - } </script> </body> </html>
\ No newline at end of file |