Skip to content

Commit d657b84

Browse files
NovaAppsIncNovaAppsInc
committed
Some UI and UX changes
- Added arrow key support to do - Changed settings UI a tiny
1 parent 3e20266 commit d657b84

4 files changed

Lines changed: 211 additions & 18 deletions

File tree

‎TODO.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# TODO
2+
### window manager
3+
- make windows positonable/resize depending on side it is dragged to
4+
5+
### apps screen
6+
- make the "Seatch App" also able to open links :moyai:

‎static/js/windows.js‎

Lines changed: 193 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ function windows(link, icn, title, browser = Boolean, os = Boolean, fullscreen =
7373
newwin.setAttribute("data-browser", browser);
7474
newwin.setAttribute("data-fullscreen", fullscreen);
7575
newwin.setAttribute("data-appName", appName);
76+
newwin.setAttribute("data-textAppText", textAppText);
7677

7778
appsShellName.onclick = (e) => {
7879
if(appsShellName.innerHTML == "") {
@@ -224,13 +225,48 @@ function windows(link, icn, title, browser = Boolean, os = Boolean, fullscreen =
224225
default:
225226
break;
226227
}
228+
229+
const appItem = document.querySelectorAll(".appItem");
230+
let appCount = 1;
231+
let win = document.querySelectorAll(".win");
232+
for (let i = 0; i < win.length; i++) {
233+
if (win[i].getAttribute("data-appName") === appName) {
234+
appCount++;
235+
}
236+
console.log(appCount);
237+
}
238+
if(appCount > 1) {
239+
let dockItem = document.querySelectorAll(".dockbtn");
240+
for (let i = 0; i < dockItem.length; i++) {
241+
if(dockItem[i].getAttribute("app") === appName) {
242+
dockItem[i].classList.add("group");
243+
dockItem[i].setAttribute("data-group", appCount);
244+
dockItem[i].setAttribute("data-groupId", newwin.id);
245+
break;
246+
}
247+
const appsGroupsContainer = document.createElement("div");
248+
appsGroupsContainer.classList.add("appsGroupsContainer");
249+
appsGroupsContainer.classList.add("hidden");
250+
appsGroupsContainer.setAttribute("appGroup", "");
251+
appsGroupsContainer.setAttribute("data-groupId", newwin.id);
252+
appsGroupsContainer.setAttribute("data-group", appCount);
253+
appsGroupsContainer.setAttribute("data-appName", appName);
254+
document.body.appendChild(appsGroupsContainer);
255+
// const newAppGroupItem = document.createElement("div");
256+
// newAppGroupItem.classList.add("appGroupItem");
257+
258+
// appsGroupsContainer.innerHTML = `
259+
260+
// `;
261+
}
262+
}
227263
let newdock = document.createElement("div");
228264
newdock.setAttribute("data-appId", newwin.id);
229265
newdock.classList.add("appItem");
230266
newdock.classList.add("active");
231267
newdock.setAttribute("title", title);
268+
newdock.setAttribute("app", appName);
232269
newdock.classList.add("dockbtn");
233-
const appItem = document.querySelectorAll(".appItem");
234270
newdock.classList.add("alert");
235271
setTimeout(() => {
236272
newdock.classList.remove("alert");
@@ -551,6 +587,80 @@ function windows(link, icn, title, browser = Boolean, os = Boolean, fullscreen =
551587
<span class="activeSpan"></span>
552588
`;
553589
break;
590+
case "store":
591+
faviconHTML = `
592+
<svg class="favicon" id="favicon" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
593+
<g filter="url(#filter0_i_1361_2)">
594+
<path class="fill" fill-rule="evenodd" clip-rule="evenodd" d="M14 21C11.7909 21 10 22.7909 10 25V66C10 68.2091 11.7909 70 14 70H66C68.2091 70 70 68.2091 70 66V25C70 22.7909 68.2091 21 66 21H14ZM39.4477 38.697C39.4477 39.2493 38.9999 39.697 38.4477 39.697H34.2212C33.6689 39.697 33.2212 40.1448 33.2212 40.697V56.76C33.2212 57.3123 32.7734 57.76 32.2212 57.76H28.2265C27.6742 57.76 27.2265 57.3123 27.2265 56.76V40.697C27.2265 40.1448 26.7788 39.697 26.2265 39.697H22C21.4477 39.697 21 39.2493 21 38.697V35C21 34.4477 21.4477 34 22 34H38.4477C38.9999 34 39.4477 34.4477 39.4477 35V38.697ZM51.1707 34.0335C55.6419 34.0335 58.9207 36.748 58.7883 41.2721C58.7609 42.1554 58.2843 43.6071 57.1731 44.5785C56.8666 44.8464 56.8717 45.3927 57.2056 45.6256C59.6519 47.3319 59.9524 49.9882 59.6824 51.6273C59.0863 55.4477 56.5361 57.76 51.3363 57.76H42.7647C42.2124 57.76 41.7647 57.3123 41.7647 56.76V35.0335C41.7647 34.4812 42.2124 34.0335 42.7647 34.0335H51.1707ZM47.7262 42.3163C47.7262 42.8686 48.174 43.3163 48.7262 43.3163H51.1707C54.0521 43.3163 54.1515 39.0938 51.1707 39.0938H48.7262C48.174 39.0938 47.7262 39.5415 47.7262 40.0938V42.3163ZM47.7262 51.4986C47.7262 52.0509 48.174 52.4986 48.7262 52.4986H51.1707C54.7476 52.4986 54.6814 47.6394 51.1707 47.6394H48.7262C48.174 47.6394 47.7262 48.0871 47.7262 48.6394V51.4986Z" />
595+
</g>
596+
<g filter="url(#filter1_i_1361_2)">
597+
<path class="fill2" d="M22 14C22 11.7909 23.7909 10 26 10H54.6154C56.4847 10 58 11.5153 58 13.3846V13.3846V21H52V17.3846C52 16.28 51.1046 15.3846 50 15.3846H30C28.8954 15.3846 28 16.28 28 17.3846V21H22V14Z" />
598+
</g>
599+
<defs>
600+
<filter id="filter0_i_1361_2" x="8" y="19" width="62" height="51" filterUnits="userSpaceOnUse"
601+
color-interpolation-filters="sRGB">
602+
<feFlood flood-opacity="0" result="BackgroundImageFix" />
603+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
604+
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
605+
result="hardAlpha" />
606+
<feOffset dx="-2" dy="-2" />
607+
<feGaussianBlur stdDeviation="2" />
608+
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
609+
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
610+
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1361_2" />
611+
</filter>
612+
<filter id="filter1_i_1361_2" x="20" y="8" width="38" height="13" filterUnits="userSpaceOnUse"
613+
color-interpolation-filters="sRGB">
614+
<feFlood flood-opacity="0" result="BackgroundImageFix" />
615+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
616+
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
617+
result="hardAlpha" />
618+
<feOffset dx="-2" dy="-2" />
619+
<feGaussianBlur stdDeviation="1.5" />
620+
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
621+
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
622+
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1361_2" />
623+
</filter>
624+
</defs>
625+
</svg>
626+
`;
627+
newdock.innerHTML = `
628+
<svg class="dockicon" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
629+
<g filter="url(#filter0_i_1361_2)">
630+
<path class="fill" fill-rule="evenodd" clip-rule="evenodd" d="M14 21C11.7909 21 10 22.7909 10 25V66C10 68.2091 11.7909 70 14 70H66C68.2091 70 70 68.2091 70 66V25C70 22.7909 68.2091 21 66 21H14ZM39.4477 38.697C39.4477 39.2493 38.9999 39.697 38.4477 39.697H34.2212C33.6689 39.697 33.2212 40.1448 33.2212 40.697V56.76C33.2212 57.3123 32.7734 57.76 32.2212 57.76H28.2265C27.6742 57.76 27.2265 57.3123 27.2265 56.76V40.697C27.2265 40.1448 26.7788 39.697 26.2265 39.697H22C21.4477 39.697 21 39.2493 21 38.697V35C21 34.4477 21.4477 34 22 34H38.4477C38.9999 34 39.4477 34.4477 39.4477 35V38.697ZM51.1707 34.0335C55.6419 34.0335 58.9207 36.748 58.7883 41.2721C58.7609 42.1554 58.2843 43.6071 57.1731 44.5785C56.8666 44.8464 56.8717 45.3927 57.2056 45.6256C59.6519 47.3319 59.9524 49.9882 59.6824 51.6273C59.0863 55.4477 56.5361 57.76 51.3363 57.76H42.7647C42.2124 57.76 41.7647 57.3123 41.7647 56.76V35.0335C41.7647 34.4812 42.2124 34.0335 42.7647 34.0335H51.1707ZM47.7262 42.3163C47.7262 42.8686 48.174 43.3163 48.7262 43.3163H51.1707C54.0521 43.3163 54.1515 39.0938 51.1707 39.0938H48.7262C48.174 39.0938 47.7262 39.5415 47.7262 40.0938V42.3163ZM47.7262 51.4986C47.7262 52.0509 48.174 52.4986 48.7262 52.4986H51.1707C54.7476 52.4986 54.6814 47.6394 51.1707 47.6394H48.7262C48.174 47.6394 47.7262 48.0871 47.7262 48.6394V51.4986Z" />
631+
</g>
632+
<g filter="url(#filter1_i_1361_2)">
633+
<path class="fill2" d="M22 14C22 11.7909 23.7909 10 26 10H54.6154C56.4847 10 58 11.5153 58 13.3846V13.3846V21H52V17.3846C52 16.28 51.1046 15.3846 50 15.3846H30C28.8954 15.3846 28 16.28 28 17.3846V21H22V14Z" />
634+
</g>
635+
<defs>
636+
<filter id="filter0_i_1361_2" x="8" y="19" width="62" height="51" filterUnits="userSpaceOnUse"
637+
color-interpolation-filters="sRGB">
638+
<feFlood flood-opacity="0" result="BackgroundImageFix" />
639+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
640+
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
641+
result="hardAlpha" />
642+
<feOffset dx="-2" dy="-2" />
643+
<feGaussianBlur stdDeviation="2" />
644+
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
645+
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
646+
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1361_2" />
647+
</filter>
648+
<filter id="filter1_i_1361_2" x="20" y="8" width="38" height="13" filterUnits="userSpaceOnUse"
649+
color-interpolation-filters="sRGB">
650+
<feFlood flood-opacity="0" result="BackgroundImageFix" />
651+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
652+
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
653+
result="hardAlpha" />
654+
<feOffset dx="-2" dy="-2" />
655+
<feGaussianBlur stdDeviation="1.5" />
656+
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
657+
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
658+
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1361_2" />
659+
</filter>
660+
</defs>
661+
</svg>
662+
<span class="activeSpan"></span>
663+
`;
554664
default:
555665
break;
556666
}
@@ -916,6 +1026,68 @@ function windows(link, icn, title, browser = Boolean, os = Boolean, fullscreen =
9161026
let max;
9171027
let dragger = newwin.querySelector("#drag");
9181028
let a = 0;
1029+
1030+
document.onkeydown = (e) => {
1031+
let focused = document.querySelector(".winFocus");
1032+
if(e.shiftKey && e.key === "ArrowLeft") {
1033+
lastWidth = focused.getClientRects()[0].width;
1034+
if(focused.classList.contains("maxiY")) {
1035+
focused.style.height = "calc(100% - 37px)";
1036+
focused.style.width = "calc(50%)";
1037+
focused.style.left = "0";
1038+
focused.style.top = "37px";
1039+
focused.classList.remove("maxiY");
1040+
} else {
1041+
focused.style.left = "0";
1042+
focused.style.top = "37px";
1043+
focused.style.width = "calc(50%)";
1044+
focused.style.height = "calc(100% - 37px)";
1045+
if(!focused.classList.contains("maxiN")) {
1046+
focused.classList.add("maxiN");
1047+
}
1048+
}
1049+
} if(e.shiftKey && e.key === "ArrowRight") {
1050+
lastWidth = focused.getClientRects()[0].width;
1051+
if(focused.classList.contains("maxiY")) {
1052+
focused.style.height = "calc(100% - 37px)";
1053+
focused.style.width = "calc(50%)";
1054+
focused.style.right = "0";
1055+
focused.style.left = "0";
1056+
focused.style.top = "37px";
1057+
focused.classList.remove("maxiY");
1058+
} else {
1059+
focused.style.left = "";
1060+
focused.style.right = "0";
1061+
focused.style.top = "37px";
1062+
focused.style.width = "calc(50%)";
1063+
focused.style.height = "calc(100% - 37px)";
1064+
if(!focused.classList.contains("maxiN")) {
1065+
focused.classList.add("maxiN");
1066+
}
1067+
}
1068+
} if(e.shiftKey && e.key === "ArrowUp") {
1069+
if(focused.classList.contains("maxiN")) {
1070+
focused.style.width = "calc(100%)";
1071+
focused.style.height = "calc(50%)";
1072+
focused.style.left = "0";
1073+
focused.style.top = "37px";
1074+
focused.classList.remove("maxiN");
1075+
focused.classList.add("maxiY");
1076+
} else {
1077+
focused.style.left = "0";
1078+
focused.style.top = "37px";
1079+
focused.style.width = "calc(100%)";
1080+
focused.style.height = "calc(50%)";
1081+
if(!focused.classList.contains("maxiY")) {
1082+
focused.classList.add("maxiY");
1083+
} if(focused.classList.contains("maxiN")) {
1084+
focused.classList.remove("maxiN");
1085+
}
1086+
}
1087+
} if(e.shiftKey && e.key === "ArrowDown") {
1088+
focused.querySelector(".mini").click();
1089+
}
1090+
}
9191091
localStorage.setItem(appName, a++);
9201092
newwin.querySelector('.mini').onclick = () => {
9211093
newwin.classList.add("winmini");
@@ -931,13 +1103,20 @@ function windows(link, icn, title, browser = Boolean, os = Boolean, fullscreen =
9311103
if(!appOptions.classList.contains("h")) {
9321104
appOptions.classList.toggle("h");
9331105
}
934-
newwin.remove();
9351106
appsShellName.innerText = "";
9361107
appsShellName.setAttribute("data-id", "");
9371108
newdock.remove();
9381109
if(document.querySelectorAll(".win").length === 0) {
9391110
appsShellName.classList.add("noHoverApps");
9401111
}
1112+
// decrementing appCount
1113+
appCount--;
1114+
// getting the first app having the same data-appName to the app being closed and decrement its appCount
1115+
// let firstApp = document.querySelector(`[app="${newwin.getAttribute("data-appName")}"]`);
1116+
// console.log(firstApp);
1117+
// firstApp.setAttribute("data-group", appCount);
1118+
newwin.remove();
1119+
console.log(appCount);
9411120
});
9421121
newwin.querySelector('.maxi').onclick = () => {
9431122
var winFocus = document.querySelectorAll(".winFocus");
@@ -1224,7 +1403,8 @@ function hideStart() {
12241403
var availableApps = ["browser", "hypertabs", "code", "youtube", "apple music", "spotify", "tidal", "youtube music", "settings", "help", "color picker", "terminal", "video"];
12251404

12261405
window.addEventListener("keydown", (e) => {
1227-
if(e.altKey && e.key === "w") {
1406+
let keyNameLower = e.key.toLowerCase();
1407+
if(e.altKey && keyNameLower === "w") {
12281408
if(document.querySelector("#main").classList.contains("closedA")) {
12291409
document.querySelector(".appsDesk").classList.toggle("openA");
12301410
main.classList.toggle("open");
@@ -1254,51 +1434,51 @@ window.addEventListener("keydown", (e) => {
12541434
}
12551435
}
12561436
}
1257-
if(e.ctrlKey && e.altKey && e.key == "q") {
1437+
if(e.ctrlKey && e.altKey && keyNameLower == "q") {
12581438
e.preventDefault();
12591439
document.querySelector(".winFocus").querySelector(".frame").contentWindow.location.reload();
12601440
}
1261-
if(e.key == "d" && e.ctrlKey) {
1441+
if(e.ctrlKey && keyNameLower == "d") {
12621442
e.preventDefault();
12631443
document.querySelector(".apps").classList.toggle("hidden");
12641444
document.querySelector("#appsL").classList.toggle("appsIF");
12651445
document.querySelector(".apps").classList.toggle("op");
12661446
}
1267-
if(e.key == "b" && e.altKey && e.ctrlKey) {
1447+
if(e.altKey && e.ctrlKey && keyNameLower == "b") {
12681448
e.preventDefault();
12691449
windows("../hypertabs/index.html","../resources/terbium.svg", "Terbium Browser", false, true, false, 'hypertabs');
12701450
}
1271-
if(e.key == "s" && e.ctrlKey && e.altKey) {
1451+
if(keyNameLower == "s" && e.ctrlKey && e.altKey) {
12721452
e.preventDefault();
12731453
windows("../settings.html", "../resources/terbium.svg", "Terbium Settings", false, true, false, "settings");
12741454
}
1275-
if(e.key == "h" && e.ctrlKey && e.altKey) {
1455+
if(keyNameLower == "h" && e.ctrlKey && e.altKey) {
12761456
e.preventDefault();
12771457
windows("../help.html", "../resources/terbium.svg", "Terbium Help", false, true, false, 'help')
12781458
}
1279-
if(e.key == "p" && e.ctrlKey && e.altKey) {
1459+
if(keyNameLower == "p" && e.ctrlKey && e.altKey) {
12801460
e.preventDefault();
12811461
windows("../color.html", "../resources/terbium.svg", "Terbium Picker", false, true, false, 'color')
12821462
}
1283-
if(e.key == "t" && e.ctrlKey && e.altKey) {
1463+
if(keyNameLower == "t" && e.ctrlKey && e.altKey) {
12841464
e.preventDefault();
12851465
windows("../terminal/terminal.html", "../resources/terbium.svg", "Terbium Terminal", false, true, false, 'terminal')
12861466
}
1287-
if(e.key == "x" && e.ctrlKey && e.altKey) {
1467+
if(keyNameLower == "x" && e.ctrlKey && e.altKey) {
12881468
e.preventDefault();
12891469
if(document.querySelector(".winFocus")) {
12901470
document.querySelector(".winFocus").querySelector(".close").click();
12911471
}
12921472
}
1293-
if(e.key == "n" && e.ctrlKey && e.altKey) {
1473+
if(keyNameLower == "n" && e.ctrlKey && e.altKey) {
12941474
e.preventDefault();
12951475
const win = document.querySelectorAll(".win");
12961476
for (let i = 0; i < win.length; i++) {
12971477
const element = win[i];
12981478
element.querySelector(".mini").click();
12991479
}
13001480
}
1301-
if(e.key == "c" && e.ctrlKey && e.altKey) {
1481+
if(keyNameLower == "c" && e.ctrlKey && e.altKey) {
13021482
const win = document.querySelectorAll(".win");
13031483
e.preventDefault();
13041484
for (let i = 0; i < win.length; i++) {

‎static/settings.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
</head>
1111
<body>
1212
<div class="taskbar">
13+
<span titleSpan></span>
1314
<h2 class="title">Settings</h2>
1415
</div>
1516
<div class="settings">

‎static/styles/settings.css‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -164,20 +164,19 @@ body {
164164

165165
.taskbar {
166166
display: flex;
167-
width: 100%;
167+
width: calc(100% - 10px);
168168
height: min-content;
169169
align-items: center;
170170
margin-top: 10px;
171171
margin-bottom: 10px;
172+
padding-left: 10px;
173+
gap: 10px;
172174
}
173175

174176
.title {
175177
color: var(--color);
176-
border-left: 3px solid var(--color);
177-
padding-left: 10px;
178-
margin-left: 7px;
179178
font-family: Poppins;
180-
font-size: 25px
179+
font-size: 25px;
181180
}
182181

183182
.settings {
@@ -494,4 +493,11 @@ input[type=number] {
494493
visibility: visible;
495494
opacity: 1;
496495
height: 81px;
496+
}
497+
498+
[titleSpan] {
499+
height: 30px;
500+
background-color: var(--color);
501+
width: 5px;
502+
border-radius: 6px;
497503
}

0 commit comments

Comments
 (0)