sirmrak/touchkio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: dynamic status bar #94

Browse Source
This commit is contained in:
leukipp
2025-10-06 18:55:51 +02:00
parent 4bcb2c4e89
commit 3e4d96536f
6 changed files with 344 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/navigation.html
+7 -5
View File
@@ -32,8 +32,8 @@
align-items: center;
width: 100vw;
height: 100vh;
padding: 0 30px;
column-gap: 20px;
padding: 0 10px;
column-gap: 10px;
list-style-type: none;
border-top: 1px solid var(--border-color);
background: var(--background-color);
@@ -74,6 +74,7 @@
padding: 6px 10px;
border-radius: 4px;
font-size: 18px;
font-family: sans-serif;
outline: none;
border: none;
cursor: text;
@@ -186,7 +187,7 @@
ipcRenderer.send("button-click", { id: e.target.id });
});
});
document.querySelectorAll("input").forEach((input) => {
document.querySelectorAll("input").forEach((input) => {
input.addEventListener("blur", (e) => {
ipcRenderer.send("input-blur", { id: e.target.id });
});
@@ -207,7 +208,7 @@
});
ipcRenderer.on("button-hidden", (e, button) => {
document.getElementById(button.id).parentNode.classList.toggle("hidden", button.hidden);
});
});
ipcRenderer.on("input-readonly", (e, input) => {
document.getElementById(input.id).readOnly = input.readonly;
});
@@ -216,10 +217,11 @@
document.getElementById(input.id).placeholder = input.placeholder;
});
ipcRenderer.on("input-select", (e, input) => {
window.getSelection()?.removeAllRanges();
if (input.select) {
document.getElementById(input.id).select();
} else {
window.getSelection()?.removeAllRanges();
document.getElementById(input.id).blur();
}
});
ipcRenderer.on("data-theme", (e, data) => {
html/pager.html
-2
View File
@@ -3,8 +3,6 @@
<head>
<style>
[data-theme="hidden"] {
--primary-color: rgba(0, 0, 0, 0);
--border-color: rgba(0, 0, 0, 0);
--background-color: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar {
html/status.html
+153
View File
@@ -0,0 +1,153 @@
<!doctype html>
<html>
<head>
<style>
[data-theme="dark"] {
--primary-color: rgba(229, 229, 229, 1);
--background-color: rgba(66, 67, 68, 1);
--minimize-color: rgba(52, 199, 89, 1);
--fullscreen-color: rgba(255, 149, 0, 1);
--terminate-color: rgba(255, 59, 48, 1);
}
[data-theme="light"] {
--primary-color: rgba(26, 26, 26, 1);
--background-color: rgba(237, 236, 235, 1);
--minimize-color: rgba(52, 199, 89, 1);
--fullscreen-color: rgba(255, 149, 0, 1);
--terminate-color: rgba(255, 59, 48, 1);
}
::-webkit-scrollbar {
display: none;
}
* {
margin: 0;
padding: 0;
cursor: pointer;
}
body {
display: flex;
align-items: center;
width: 100vw;
height: 100vh;
background: var(--background-color);
}
header {
display: flex;
align-items: center;
flex: 1 1 0%;
height: 100vh;
-webkit-app-region: drag;
}
h1 {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 18px;
font-weight: 500;
font-family: sans-serif;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
user-select: none;
color: var(--primary-color);
}
menu {
display: flex;
flex-direction: row;
align-items: center;
flex: 0 0 auto;
height: 100vh;
min-width: 116px;
padding: 0px 10px;
column-gap: 10px;
list-style-type: none;
background: var(--background-color);
position: relative;
z-index: 1;
}
li {
display: flex;
align-items: center;
flex: 0 0 auto;
}
button {
width: 32px;
height: 32px;
border: none;
background-color: transparent;
}
svg {
pointer-events: none;
}
#minimize > svg {
fill: var(--minimize-color);
}
#fullscreen > svg {
fill: var(--fullscreen-color);
}
#terminate > svg {
fill: var(--terminate-color);
}
</style>
</head>
<body>
<header>
<h1 id="title"></h1>
</header>
<menu>
<li>
<button id="minimize">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>minus-circle</title>
<path d="M17,13H7V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
</svg>
</button>
</li>
<li>
<button id="fullscreen">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>chevron-up-circle</title>
<path
d="M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M7.4,15.4L12,10.8L16.6,15.4L18,14L12,8L6,14L7.4,15.4Z"
/>
</svg>
</button>
</li>
<li>
<button id="terminate">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>close-circle</title>
<path
d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"
/>
</svg>
</button>
</li>
</menu>
<script>
const { ipcRenderer } = require("electron");
const registerSendEvents = () => {
document.querySelectorAll("button").forEach((button) => {
button.addEventListener("click", (e) => {
ipcRenderer.send("button-click", { id: e.target.id });
});
});
};
const registerReceiveEvents = () => {
ipcRenderer.on("text-content", (e, text) => {
document.getElementById(text.id).textContent = text.content;
});
ipcRenderer.on("data-theme", (e, data) => {
document.documentElement.setAttribute("data-theme", data.theme);
});
};
registerSendEvents();
registerReceiveEvents();
</script>
</body>
</html>
html/widget.html
+3 -13
View File
@@ -68,16 +68,6 @@
</head>
<body>
<menu>
<li>
<button id="keyboard">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>keyboard-close-outline</title>
<path
d="M12 23L16 19H8M4 3C2.9 3 2 3.9 2 5V15C2 16.1 2.9 17 4 17H20C21.1 17 22 16.1 22 15V5C22 3.9 21.1 3 20 3H4M4 5H20V15H4V5M5 6V8H7V6H5M8 6V8H10V6H8M11 6V8H13V6H11M14 6V8H16V6H14M17 6V8H19V6H17M5 9V11H7V9H5M8 9V11H10V9H8M11 9V11H13V9H11M14 9V11H16V9H14M17 9V11H19V9H17M8 12V14H16V12H8Z"
/>
</svg>
</button>
</li>
<li>
<button id="fullscreen">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@@ -89,11 +79,11 @@
</button>
</li>
<li>
<button id="minimize">
<button id="keyboard">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>image-size-select-small</title>
<title>keyboard-close-outline</title>
<path
d="M23,15H21V17H23V15M23,11H21V13H23V11M23,19H21V21C22,21 23,20 23,19M15,3H13V5H15V3M23,7H21V9H23V7M21,3V5H23C23,4 22,3 21,3M3,21H11V15H1V19A2,2 0 0,0 3,21M3,7H1V9H3V7M15,19H13V21H15V19M19,3H17V5H19V3M19,19H17V21H19V19M3,3C2,3 1,4 1,5H3V3M3,11H1V13H3V11M11,3H9V5H11V3M7,3H5V5H7V3Z"
d="M12 23L16 19H8M4 3C2.9 3 2 3.9 2 5V15C2 16.1 2.9 17 4 17H20C21.1 17 22 16.1 22 15V5C22 3.9 21.1 3 20 3H4M4 5H20V15H4V5M5 6V8H7V6H5M8 6V8H10V6H8M11 6V8H13V6H11M14 6V8H16V6H14M17 6V8H19V6H17M5 9V11H7V9H5M8 9V11H10V9H8M11 9V11H13V9H11M14 9V11H16V9H14M17 9V11H19V9H17M8 12V14H16V12H8Z"
/>
</svg>
</button>