summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorRaindropsSys <contact@minteck.org>2023-06-23 12:49:51 +0200
committerRaindropsSys <contact@minteck.org>2023-06-23 12:49:51 +0200
commit8619b6ef732ee1c2ee347fbd55416446f777a41c (patch)
tree08f448e22e7e95fa075593a7f72c98b04623723b
parentac6e5bbf62db1d2a8a402b85b9c1fa7e4b167b53 (diff)
downloadkirinos-8619b6ef732ee1c2ee347fbd55416446f777a41c.tar.gz
kirinos-8619b6ef732ee1c2ee347fbd55416446f777a41c.tar.bz2
kirinos-8619b6ef732ee1c2ee347fbd55416446f777a41c.zip
Updated 3 files and added 7 files (automated)
Diffstat
-rw-r--r--ROADMAP.md4
-rw-r--r--core/desktop/index.html58
-rw-r--r--core/launcher/index.html4
-rw-r--r--core/power/icons/logout.svg1
-rw-r--r--core/power/icons/no.svg1
-rw-r--r--core/power/icons/restart.svg1
-rw-r--r--core/power/icons/shutdown.svg1
-rw-r--r--core/power/icons/sleep.svg1
-rw-r--r--core/power/icons/yes.svg1
-rw-r--r--core/power/index.html181
10 files changed, 249 insertions, 4 deletions
diff --git a/ROADMAP.md b/ROADMAP.md
index c4213d5..a770f41 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -4,13 +4,13 @@
* [x] <s>Login screen **- Raindrops**</s>
* [ ] Desktop
* [ ] Window manager
- * [ ] Application menu **- Raindrops**
+ * [x] <s>Application menu **- Raindrops**</s>
* [ ] Task bar **- Raindrops**
* [ ] Media keys
* [ ] Application switcher
* [ ] Notifications
* [x] <s>Status bar **- Raindrops**</s>
- * [ ] Power options
+ * [x] <s>Power options **- Raindrops**</s>
* [ ] Web browser
* [ ] Basic browsing
* [ ] Multiple tabs
diff --git a/core/desktop/index.html b/core/desktop/index.html
index 928e65a..718d688 100644
--- a/core/desktop/index.html
+++ b/core/desktop/index.html
@@ -66,18 +66,39 @@
iframe {
border: none;
}
+
+ #power-outer {
+ position: fixed;
+ inset: 0;
+ z-index: 9999999;
+ background: rgba(0, 0, 0, .25);
+ backdrop-filter: blur(50px);
+ }
+
+ #power {
+ border: 1px solid rgba(0, 0, 0, .05);
+ border-radius: 7px;
+ box-shadow: 0 0 20px 7px rgba(0, 0, 0, .3);
+ }
</style>
</head>
<body>
<div id="bg"></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>
+
+ <div id="power-outer" style="display: none; align-items: center; justify-content: center;" onclick="closePowerOptions();">
+ <iframe style="width: 454px; height: 128px;" id="power" src="../power/index.html"></iframe>
+ </div>
+
<script>
function statusUpdate(payload) {
console.info("update =>", payload);
@@ -89,6 +110,15 @@
}
}
+ function powerOptions() {
+ document.getElementById("power-outer").style.display = "flex";
+ }
+
+ function closePowerOptions() {
+ document.getElementById("power-outer").style.display = "none";
+ document.getElementById("power").contentWindow.location.reload();
+ }
+
function closeMenu() {
document.getElementById("status").contentWindow.setMenuActive(false);
document.getElementById("launcher-close-space").style.display = "none";
@@ -100,6 +130,34 @@
if (fs.existsSync("/mango/session/config/wallpaper")) {
document.getElementById("bg").style.backgroundImage = 'url("file:///mango/session/config/wallpaper")';
}
+
+ function sleep() {
+ require('child_process').execSync("suspend");
+ }
+
+ function poweroff() {
+ document.body.style.opacity = "0";
+ document.body.style.pointerEvents = "none";
+ require('child_process').execSync("poweroff");
+ }
+
+ function reboot() {
+ document.body.style.opacity = "0";
+ document.body.style.pointerEvents = "none";
+ require('child_process').execSync("reboot");
+ }
+
+ function logout() {
+ try {
+ while (require('child_process').execSync("umount /mango/session")) {}
+ } catch (e) {}
+
+ try { require('child_process').execSync("rm -rf /mango/session"); } catch (e) {}
+
+ document.body.style.opacity = "0";
+ document.body.style.pointerEvents = "none";
+ location.href = "../login/index.html";
+ }
</script>
</body>
</html> \ No newline at end of file
diff --git a/core/launcher/index.html b/core/launcher/index.html
index c1faacd..6e1f29d 100644
--- a/core/launcher/index.html
+++ b/core/launcher/index.html
@@ -53,7 +53,7 @@
</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 style="border-right: 1px solid rgba(0, 0, 0, .05); display: grid; grid-template-rows: max-content 1fr max-content; background-color: rgba(0, 0, 0, .05);">
<div>
<img src="" alt="" id="avatar" style="width: 48px; height: 48px; border-radius: 999px; margin: 16px 8px;">
<script>
@@ -65,7 +65,7 @@
<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">
+ <a onclick="parent.closeMenu(); parent.powerOptions();" 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>
diff --git a/core/power/icons/logout.svg b/core/power/icons/logout.svg
new file mode 100644
index 0000000..1a8a6b3
--- /dev/null
+++ b/core/power/icons/logout.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h291v60H180v600h291v60H180Zm486-185-43-43 102-102H375v-60h348L621-612l43-43 176 176-174 174Z"/></svg> \ No newline at end of file
diff --git a/core/power/icons/no.svg b/core/power/icons/no.svg
new file mode 100644
index 0000000..ded3e2a
--- /dev/null
+++ b/core/power/icons/no.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"/></svg> \ No newline at end of file
diff --git a/core/power/icons/restart.svg b/core/power/icons/restart.svg
new file mode 100644
index 0000000..f82b97f
--- /dev/null
+++ b/core/power/icons/restart.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M451-122q-123-10-207-101t-84-216q0-77 35.5-145T295-695l43 43q-56 33-87 90.5T220-439q0 100 66 173t165 84v60Zm60 0v-60q100-12 165-84.5T741-439q0-109-75.5-184.5T481-699h-20l60 60-43 43-133-133 133-133 43 43-60 60h20q134 0 227 93.5T801-439q0 125-83.5 216T511-122Z"/></svg> \ No newline at end of file
diff --git a/core/power/icons/shutdown.svg b/core/power/icons/shutdown.svg
new file mode 100644
index 0000000..e12cf33
--- /dev/null
+++ b/core/power/icons/shutdown.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/power/icons/sleep.svg b/core/power/icons/sleep.svg
new file mode 100644
index 0000000..b8f052b
--- /dev/null
+++ b/core/power/icons/sleep.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M480.235-380Q522-380 551-409.235q29-29.236 29-71Q580-522 550.765-551q-29.236-29-71-29Q438-580 409-550.765q-29 29.236-29 71Q380-438 409.235-409q29.236 29 71 29Zm.031 300q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z"/></svg> \ No newline at end of file
diff --git a/core/power/icons/yes.svg b/core/power/icons/yes.svg
new file mode 100644
index 0000000..9b2aebf
--- /dev/null
+++ b/core/power/icons/yes.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M378-246 154-470l43-43 181 181 384-384 43 43-427 427Z"/></svg> \ No newline at end of file
diff --git a/core/power/index.html b/core/power/index.html
new file mode 100644
index 0000000..051bd7b
--- /dev/null
+++ b/core/power/index.html
@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <script>window.require = window.parent.require;</script>
+ <meta charset="UTF-8">
+ <title>mangoos-power</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;
+ }
+
+ #options {
+ background-color: rgba(255, 255, 255, .5);
+ position: fixed;
+ inset: 0;
+ }
+
+ #confirm {
+ background-color: rgba(255, 255, 255, .5);
+ position: fixed;
+ inset: 0;
+ }
+
+ .power-option:active img {
+ background-color: rgba(0, 0, 0, .1) !important;
+ }
+
+ .confirm-item:active, .confirm-item.active {
+ background-color: rgba(0, 0, 0, .1);
+ border-radius: 5px;
+ }
+ </style>
+</head>
+<body>
+ <div id="options" style="display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; padding: 8px 20px;">
+ <div onclick="askForConfirm('poweroff');" class="power-option" style="display: flex; width: 96px; align-items: center; justify-content: center;">
+ <div style="pointer-events: none;">
+ <div><img alt="" style="display: block; margin-left: auto; margin-right: auto; width: 24px; height: 24px; padding: 16px; border-radius: 999px; background-color: rgba(0, 0, 0, .05);" src="./icons/shutdown.svg"></div>
+ <div style="text-align: center; margin-top: 10px;">Power off</div>
+ </div>
+ </div>
+ <div onclick="askForConfirm('reboot');" class="power-option" style="display: flex; width: 96px; align-items: center; justify-content: center;">
+ <div style="pointer-events: none;">
+ <div><img alt="" style="display: block; margin-left: auto; margin-right: auto; width: 24px; height: 24px; padding: 16px; border-radius: 999px; background-color: rgba(0, 0, 0, .05);" src="./icons/restart.svg"></div>
+ <div style="text-align: center; margin-top: 10px;">Restart</div>
+ </div>
+ </div>
+ <div onclick="sendAction('sleep');" class="power-option" style="display: flex; width: 96px; align-items: center; justify-content: center;">
+ <div style="pointer-events: none;">
+ <div><img alt="" style="display: block; margin-left: auto; margin-right: auto; width: 24px; height: 24px; padding: 16px; border-radius: 999px; background-color: rgba(0, 0, 0, .05);" src="./icons/sleep.svg"></div>
+ <div style="text-align: center; margin-top: 10px;">Sleep</div>
+ </div>
+ </div>
+ <div onclick="askForConfirm('logout');" class="power-option" style="display: flex; width: 96px; align-items: center; justify-content: center;">
+ <div style="pointer-events: none;">
+ <div><img alt="" style="display: block; margin-left: auto; margin-right: auto; width: 24px; height: 24px; padding: 16px; border-radius: 999px; background-color: rgba(0, 0, 0, .05);" src="./icons/logout.svg"></div>
+ <div style="text-align: center; margin-top: 10px;">Log out</div>
+ </div>
+ </div>
+ </div>
+
+ <div id="confirm" style="display: none;">
+ <div id="confirm-restart" style="display: none; grid-template-columns: 96px 1fr 64px; padding: 8px 20px; height: 112px; width: 414px;">
+ <div style="display: flex; width: 96px; align-items: center; justify-content: center;">
+ <div style="pointer-events: none;">
+ <div><img alt="" style="display: block; margin-left: auto; margin-right: auto; width: 24px; height: 24px; padding: 16px; border-radius: 999px; background-color: rgba(0, 0, 0, .05);" src="./icons/restart.svg"></div>
+ <div style="text-align: center; margin-top: 10px;">Restart</div>
+ </div>
+ </div>
+ <div style="display: flex; align-items: center; justify-content: center;">
+ <div style="margin-left: 10px; margin-right: 10px;">
+ Are you sure you want to quit all applications and restart your computer now?
+ </div>
+ </div>
+ <div style="display: flex; align-items: center; justify-content: center;">
+ <div>
+ <a class="confirm-item" onclick="sendAction('reboot');" style="height: 31px; display: inline-flex; align-items: center; justify-content: center; width: 31px; vertical-align: middle;"><img src="./icons/yes.svg" style="width: 24px; pointer-events: none; vertical-align: middle;"></a><a class="confirm-item" onclick="parent.closePowerOptions();" style="height: 31px; display: inline-flex; align-items: center; justify-content: center; width: 31px; vertical-align: middle;"><img src="./icons/no.svg" style="width: 24px; pointer-events: none; vertical-align: middle;"></a>
+ </div>
+ </div>
+ </div>
+
+ <div id="confirm-shutdown" style="display: none; grid-template-columns: 96px 1fr 64px; padding: 8px 20px; height: 112px; width: 414px;">
+ <div style="display: flex; width: 96px; align-items: center; justify-content: center;">
+ <div style="pointer-events: none;">
+ <div><img alt="" style="display: block; margin-left: auto; margin-right: auto; width: 24px; height: 24px; padding: 16px; border-radius: 999px; background-color: rgba(0, 0, 0, .05);" src="./icons/shutdown.svg"></div>
+ <div style="text-align: center; margin-top: 10px;">Power off</div>
+ </div>
+ </div>
+ <div style="display: flex; align-items: center; justify-content: center;">
+ <div style="margin-left: 10px; margin-right: 10px;">
+ Are you sure you want to quit all applications and power off your computer now?
+ </div>
+ </div>
+ <div style="display: flex; align-items: center; justify-content: center;">
+ <div>
+ <a class="confirm-item" onclick="sendAction('poweroff');" style="height: 31px; display: inline-flex; align-items: center; justify-content: center; width: 31px; vertical-align: middle;"><img src="./icons/yes.svg" style="width: 24px; pointer-events: none; vertical-align: middle;"></a><a class="confirm-item" onclick="parent.closePowerOptions();" style="height: 31px; display: inline-flex; align-items: center; justify-content: center; width: 31px; vertical-align: middle;"><img src="./icons/no.svg" style="width: 24px; pointer-events: none; vertical-align: middle;"></a>
+ </div>
+ </div>
+ </div>
+
+ <div id="confirm-logout" style="display: none; grid-template-columns: 96px 1fr 64px; padding: 8px 20px; height: 112px; width: 414px;">
+ <div style="display: flex; width: 96px; align-items: center; justify-content: center;">
+ <div style="pointer-events: none;">
+ <div><img alt="" style="display: block; margin-left: auto; margin-right: auto; width: 24px; height: 24px; padding: 16px; border-radius: 999px; background-color: rgba(0, 0, 0, .05);" src="./icons/logout.svg"></div>
+ <div style="text-align: center; margin-top: 10px;">Log out</div>
+ </div>
+ </div>
+ <div style="display: flex; align-items: center; justify-content: center;">
+ <div style="margin-left: 10px; margin-right: 10px;">
+ Are you sure you want to quit all applications and log out now?
+ </div>
+ </div>
+ <div style="display: flex; align-items: center; justify-content: center;">
+ <div>
+ <a class="confirm-item" onclick="sendAction('logout');" style="height: 31px; display: inline-flex; align-items: center; justify-content: center; width: 31px; vertical-align: middle;"><img src="./icons/yes.svg" style="width: 24px; pointer-events: none; vertical-align: middle;"></a><a class="confirm-item" onclick="parent.closePowerOptions();" style="height: 31px; display: inline-flex; align-items: center; justify-content: center; width: 31px; vertical-align: middle;"><img src="./icons/no.svg" style="width: 24px; pointer-events: none; vertical-align: middle;"></a>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <script>
+ function askForConfirm(type) {
+ document.getElementById("options").style.display = "none";
+ document.getElementById("confirm").style.display = "";
+
+ document.getElementById("confirm-logout").style.display = "none";
+ document.getElementById("confirm-shutdown").style.display = "none";
+ document.getElementById("confirm-restart").style.display = "none";
+
+ if (type === "poweroff") {
+ document.getElementById("confirm-shutdown").style.display = "grid";
+ }
+
+ if (type === "reboot") {
+ document.getElementById("confirm-restart").style.display = "grid";
+ }
+
+ if (type === "logout") {
+ document.getElementById("confirm-logout").style.display = "grid";
+ }
+ }
+
+ function sendAction(action) {
+ if (action === "logout") parent.logout();
+ if (action === "reboot") parent.reboot();
+ if (action === "poweroff") parent.poweroff();
+ if (action === "sleep") parent.sleep();
+ }
+ </script>
+</body>
+</html> \ No newline at end of file
generated by cgit (git 2.34.1) at 2024-10-22 05:53:47 +0000