diff options
author | RaindropsSys <contact@minteck.org> | 2023-07-11 12:18:03 +0200 |
---|---|---|
committer | RaindropsSys <contact@minteck.org> | 2023-07-11 12:18:03 +0200 |
commit | c6958cd6137065b72c214197f5f18f879ff06c25 (patch) | |
tree | 9685f3dae3b06a7f8c4b9f5278e51da01d8ce6f0 /core | |
parent | 8a896f6bc2d094bac64a85a4813486e2b4f2cc29 (diff) | |
download | kirinos-c6958cd6137065b72c214197f5f18f879ff06c25.tar.gz kirinos-c6958cd6137065b72c214197f5f18f879ff06c25.tar.bz2 kirinos-c6958cd6137065b72c214197f5f18f879ff06c25.zip |
Updated 10 files and added 2 files (automated)
Diffstat (limited to 'core')
-rw-r--r-- | core/about/index.html | 25 | ||||
-rw-r--r-- | core/desktop/index.html | 31 | ||||
-rw-r--r-- | core/desktop/wm.js | 28 | ||||
-rw-r--r-- | core/status/index.html | 2 | ||||
-rw-r--r-- | core/switcher/icons/window.svg | 1 | ||||
-rw-r--r-- | core/switcher/index.html | 103 |
6 files changed, 185 insertions, 5 deletions
diff --git a/core/about/index.html b/core/about/index.html index f06390d..e44e9c9 100644 --- a/core/about/index.html +++ b/core/about/index.html @@ -67,7 +67,8 @@ <div> <div> <img alt="" src="../../logo.svg" style="width: 96px; display: block; margin-left: auto; margin-right: auto;"> - <span style="font-size: 24px; font-weight: bold; margin-top: 20px; margin-bottom: 20px; display: block; text-align: center;">kirinOS</span> + <span style="font-size: 24px; font-weight: bold; margin-top: 20px; margin-bottom: 0; display: block; text-align: center;">kirinOS</span> + <span id="architecture" style="font-size: 12px; font-weight: normal; opacity: .3; margin-top: 0; margin-bottom: 20px; display: block; text-align: center;">-</span> </div> <table style="font-size: 12px;"> <tr> @@ -135,6 +136,28 @@ function changeVersion() { document.getElementById("about-kirinos").innerHTML = release['shortVersion'] + " (<code>" + release['build'] + "</code>)"; } + + if (process.arch === "arm64") { + document.getElementById("architecture").innerText = "ARM processor"; + } else if (process.arch === "x64") { + document.getElementById("architecture").innerText = "x86 processor"; + } else if (process.arch === "ia32") { + document.getElementById("architecture").innerText = "32bit x86 processor (unsupported)"; + } else if (process.arch === "arm") { + document.getElementById("architecture").innerText = "32bit ARM processor (unsupported)"; + } else if (process.arch === "mips") { + document.getElementById("architecture").innerText = "MIPS processor (unsupported)"; + } else if (process.arch === "mipsel") { + document.getElementById("architecture").innerText = "MIPS LE processor (unsupported)"; + } else if (process.arch === "ppc") { + document.getElementById("architecture").innerText = "32bit POWER processor (unsupported)"; + } else if (process.arch === "ppc64") { + document.getElementById("architecture").innerText = "POWER processor (unsupported)"; + } else if (process.arch === "s390") { + document.getElementById("architecture").innerText = "S/390 processor (unsupported)"; + } else if (process.arch === "s390x") { + document.getElementById("architecture").innerText = "System Z processor (unsupported)"; + } </script> </div> </body> diff --git a/core/desktop/index.html b/core/desktop/index.html index ef9269e..eb8213c 100644 --- a/core/desktop/index.html +++ b/core/desktop/index.html @@ -40,6 +40,19 @@ z-index: 999999; } + #switcher-outer { + left: calc(50vw - 192px); + top: calc(50vh - 80px); + height: 160px; + width: 384px; + border: 1px solid rgba(0, 0, 0, .05); + box-shadow: 0 0 20px 7px rgba(0, 0, 0, .3); + backdrop-filter: blur(50px); + border-radius: 7px; + position: fixed; + z-index: 999999; + } + #launcher-outer { margin-left: 18px; margin-top: 32px; @@ -150,7 +163,7 @@ .window-anchors { width: 100%; - height: calc(100% - 32px); + height: 0; box-sizing: border-box; } @@ -255,6 +268,14 @@ ipcRenderer.on('switch', (event) => { console.log("switch"); + + if (document.getElementById("switcher-outer").style.display === "none") { + document.getElementById("switcher").contentWindow.refreshItems(); + document.getElementById("switcher-outer").style.display = ""; + document.getElementById("switcher").focus(); + } else { + document.getElementById("switcher").contentWindow.tabPress(); + } }); ipcRenderer.on('emergency', (event) => { @@ -344,6 +365,10 @@ <iframe style="display: flex; height: 100%; width: 100%;" id="status" src="../status/index.html"></iframe> </div> + <div id="switcher-outer" style="display: none;"> + <iframe style="display: flex; height: 100%; width: 100%;" id="switcher" src="../switcher/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> @@ -368,14 +393,14 @@ <script src="./wm.js"></script> <script> const wm = window.wm = new WindowManager(); - /*wm.createWindow({ + wm.createWindow({ title: "Test Window", sandbox: true, frameless: false, debuggable: true, isolatedPath: "/kirin/demo", url: "file:///kirin/demo/test.html" - });*/ + }); </script> <script> diff --git a/core/desktop/wm.js b/core/desktop/wm.js index 8d29ea5..7d04e9e 100644 --- a/core/desktop/wm.js +++ b/core/desktop/wm.js @@ -4,17 +4,20 @@ const crypto = require("crypto"); class WindowManager { #stack; + #switcherStack; #list; #properties; constructor() { this.#stack = []; + this.#switcherStack = []; this.#list = []; this.#properties = {}; } #updateFocus() { this.#stack = [...new Set(this.#stack)].filter(i => i); + this.#switcherStack = [...new Set(this.#switcherStack)].filter(i => i); let index = 0; for (let window of this.#stack) { @@ -576,6 +579,7 @@ class WindowManager { } i.#stack.unshift(id); + i.#switcherStack.unshift(id); i.#list.push(id); i.#updateFocus(); @@ -639,6 +643,7 @@ class WindowManager { closeWindow(id) { document.getElementById("window-" + id).outerHTML = ""; delete this.#stack[this.#stack.indexOf(id)]; + delete this.#switcherStack[this.#switcherStack.indexOf(id)]; delete this.#list[this.#list.indexOf(id)]; delete this.#properties[id]; this.#updateFocus(); @@ -672,6 +677,9 @@ class WindowManager { if (document.getElementById("window-" + id).classList.contains("window-minimised")) return; document.getElementById("window-" + id).classList.add("window-minimised"); delete this.#stack[this.#stack.indexOf(id)]; + delete this.#switcherStack[this.#switcherStack.indexOf(id)]; + this.#switcherStack.splice(2, 0, id); + this.#updateFocus(); this.#properties[id].minimised = true; @@ -690,7 +698,9 @@ class WindowManager { if (document.getElementById("window-" + id).classList.contains("window-minimised")) wm.unminimiseWindow(id); if (!document.getElementById("window-" + id).classList.contains("window-inactive")) return; delete this.#stack[this.#stack.indexOf(id)]; + delete this.#switcherStack[this.#switcherStack.indexOf(id)]; this.#stack.unshift(id); + this.#switcherStack.unshift(id); this.#updateFocus(); // TODO: Broadcast a focus event to the client @@ -736,6 +746,24 @@ class WindowManager { }); } + getSwitcherItems() { + let list = []; + + for (let id of this.#switcherStack) { + let win = this.#properties[id]; + + list.push({ + id, + title: win.title, + minimised: win.minimised, + focused: !document.getElementById("window-" + id).classList.contains("window-inactive") && !document.getElementById("window-" + id).classList.contains("window-minimised"), + application: win.isolatedPath ?? null + }); + } + + return list; + } + taskbarAction(id) { if (document.getElementById("window-" + id).classList.contains("window-minimised")) { this.unminimiseWindow(id); diff --git a/core/status/index.html b/core/status/index.html index 4a813b2..45daf24 100644 --- a/core/status/index.html +++ b/core/status/index.html @@ -198,7 +198,7 @@ console.log(parent.wm.getTaskbarItems()); document.getElementById("tasks-bar").innerHTML = parent.wm.getTaskbarItems().map(i => ` <a onclick="parent.wm.taskbarAction('${i.id}');" id="item-${i.id}" class="status-bar-clickable" style="height: 30px; display: inline-flex; align-items: center; justify-content: center; width: 31px; vertical-align: middle;${i.focused ? 'border-bottom: 1px solid rgba(0, 0, 0, .25);' : 'padding-bottom: 1px;'}"> - <img alt="" id="item-${i.id}-icon" src="${fs.existsSync(i.application + "/icon-symbolic.svg") ? i.application + "/icon-symbolicsvng" : (fs.existsSync(i.application + "/icon.png") ? i.application + "/icon.png" : "./icons/window.svg")}" style="${i.minimised ? 'opacity: .5;' : ''}${fs.existsSync(i.application + "/icon-symbolic.svg") ? '' : 'border-radius: 999px;'} height: 24px; width: 24px; pointer-events: none; vertical-align: middle;"> + <img alt="" id="item-${i.id}-icon" src="${fs.existsSync(i.application + "/icon-symbolic.svg") ? i.application + "/icon-symbolic.svg" : (fs.existsSync(i.application + "/icon.png") ? i.application + "/icon.png" : "./icons/window.svg")}" style="${i.minimised ? 'opacity: .5;' : ''}${fs.existsSync(i.application + "/icon-symbolic.svg") ? '' : 'border-radius: 999px;'} height: 24px; width: 24px; pointer-events: none; vertical-align: middle;"> </a> `.trim()).join(""); } diff --git a/core/switcher/icons/window.svg b/core/switcher/icons/window.svg new file mode 100644 index 0000000..e9c619c --- /dev/null +++ b/core/switcher/icons/window.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.75 0-42.375-17.625T120-180v-600q0-24.75 17.625-42.375T180-840h600q24.75 0 42.375 17.625T840-780v600q0 24.75-17.625 42.375T780-120H180Zm0-60h600v-520H180v520Zm100-310v-60h390v60H280Zm0 160v-60h230v60H280Z"/></svg>
\ No newline at end of file diff --git a/core/switcher/index.html b/core/switcher/index.html new file mode 100644 index 0000000..b6b7f58 --- /dev/null +++ b/core/switcher/index.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <script>window.require = window.parent.require;</script> + <meta charset="UTF-8"> + <title>kirinos-switcher</title> + <style> + * { + font-family: "Inter", sans-serif; + user-select: none; + user-focus: none; + outline: none; + overflow: hidden; + } + + html, body { + background-color: transparent; + color: black; + margin: 0; + } + </style> +</head> +<body> + <script> + window.addEventListener('error', (event, source, lineno, colno, error) => { + parent.transferError([ + event, source, lineno, colno, error + ]); + + return false; + }); + + window.addEventListener('keyup', (event) => { + console.log(event); + + if (event.key === "Alt" || !event.altKey) { + window.parent.document.getElementById("switcher-outer").style.display = "none"; + window.parent.document.getElementById("switcher").blur(); + + window.parent.wm.focusWindow(window.items[window.focusedItem]['id']); + } else if (event.key === "Tab" && event.altKey) { + tabPress(); + } else if (event.altKey) { + window.parent.document.getElementById("switcher-outer").style.display = "none"; + window.parent.document.getElementById("switcher").blur(); + } + }); + + function tabPress() { + window.focusedItem++; + if (window.focusedItem >= window.items.length) window.focusedItem = 0; + refreshItems(window.focusedItem); + } + + window.focusedItem = 1; + window.items = []; + const fs = require('fs'); + + function refreshItems(index) { + if (typeof index !== "number") window.focusedItem = 1; + window.items = window.parent.wm.getSwitcherItems(); + if (window.items.length < 2) window.focusedItem = 0; + + let width = (items.length * 144) + 16; + + if (width > screen.width - 176) { + document.getElementById("switcher").style.display = ""; + document.getElementById("switcher").innerHTML = items.map((item, i) => ` + <div class="switcher-item" id="switcher-item-${item.id}" style="${i === window.focusedItem ? 'background-color: rgba(0, 0, 0, .05);' : ''} ${item['minimised'] ? 'opacity: .5;' : ''} border-radius: 7px; padding: 5px;"> + <img alt="" src="${fs.existsSync(i.application + "/icon-symbolic.svg") ? item.application + "/icon-symbolic.svg" : (fs.existsSync(item.application + "/icon.png") ? item.application + "/icon.png" : "./icons/window.svg")}" style="${i.minimised ? 'opacity: .5;' : ''}${fs.existsSync(item.application + "/icon-symbolic.svg") ? '' : 'border-radius: 999px;'} height: 24px; width: 24px; pointer-events: none; vertical-align: middle;"> + <span style="vertical-align: middle;">${item['title']}</span> + </div> + `).join(""); + + window.parent.document.getElementById("switcher-outer").style.width = "256px"; + window.parent.document.getElementById("switcher-outer").style.left = "calc(50vw - 128px)"; + window.parent.document.getElementById("switcher-outer").style.top = "calc(50vh - " + (((items.length * 34) + 10) / 2) + "px)"; + window.parent.document.getElementById("switcher-outer").style.height = (items.length * 34) + 10 + "px"; + document.getElementById("switcher").style.padding = "5px"; + } else { + document.getElementById("switcher").style.display = "flex"; + document.getElementById("switcher").innerHTML = items.map((item, i) => ` + <div class="switcher-item" id="switcher-item-${item.id}" style="${i === window.focusedItem ? 'background-color: rgba(0, 0, 0, .05);' : ''} ${item['minimised'] ? 'opacity: .5;' : ''} border-radius: 7px; padding: 8px; display: grid; grid-template-rows: 96px 32px; width: 128px;"> + <div style="display: flex; align-items: center; justify-content: center;"> + <img alt="" src="${fs.existsSync(item.application + "/icon.png") ? item.application + "/icon.png" : "./icons/window.svg"}" style="${i.minimised ? 'opacity: .5;' : ''} height: 96px; width: 96px; pointer-events: none; vertical-align: middle; border-radius: 999px;"> + </div> + <span style="max-width: 140px; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; display: inline-block; text-align: center; opacity: .75; font-size: 16px; padding: 8px;">${item['title']}</span> + </div> + `).join(""); + } + + window.parent.document.getElementById("switcher-outer").style.width = width + "px"; + window.parent.document.getElementById("switcher-outer").style.left = "calc(50vw - " + (width / 2) + "px)"; + window.parent.document.getElementById("switcher-outer").style.top = "calc(50vh - 80px)"; + window.parent.document.getElementById("switcher-outer").style.height = "160px"; + document.getElementById("switcher").style.padding = "8px"; + } + </script> + + <div id="bg"></div> + <div id="switcher" style="padding: 8px; display: flex;"></div> +</body> +</html>
\ No newline at end of file |