diff options
Diffstat (limited to 'client/index.html')
| -rw-r--r-- | client/index.html | 140 |
1 files changed, 129 insertions, 11 deletions
diff --git a/client/index.html b/client/index.html index 0e59212..d95083f 100644 --- a/client/index.html +++ b/client/index.html @@ -3,8 +3,8 @@ <head> <meta charset="UTF-8"> <title>Chatroom Workspace</title> - <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> - <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> + <link href="./bs.css" rel="stylesheet"> + <script src="./bs.js"></script> <style> * { -webkit-user-drag: none; @@ -63,6 +63,10 @@ filter: invert(1) hue-rotate(180deg); } + #changelog { + filter: invert(1) hue-rotate(180deg); + } + .nav-link.active { background-color: #ddd !important; border-bottom: none !important; @@ -71,16 +75,51 @@ img:not([src$=".svg"]) { filter: invert(1) hue-rotate(180deg); } + + #windows, body { + background-color: #111111; + } + + webview { + background-color: #111; + } + } + + .small-1 .tab-text { + width: 100px !important; + } + + .small-2 .tab-text { + width: 50px !important; + } + + .small-3 .tab-text { + opacity: 0 !important; + width: 7px !important; + } + + .small-4 .tab-text, .small-4 .tab-close { + display: none !important; + } + + .small-5 .nav-link { + padding: 0.5rem !important; + } + + .small-6 .nav-link img { + width: 16px !important; + height: 24px !important; + padding: 4px 0 !important; } </style> </head> -<body style="overflow-y: hidden;"> +<body style="overflow: hidden;"> <ul id="tabs" class="nav nav-tabs" style="background-color: #eee; -webkit-app-region: drag;"></ul> <script> if (process.platform === "darwin") { document.getElementById("tabs").style.paddingLeft = "86px"; } else { - document.getElementById("tabs").style.paddingRight = "96px"; + document.getElementById("tabs").style.paddingRight = "140px"; } </script> <div id="windows" style="display: flex;"></div> @@ -122,7 +161,7 @@ document.getElementById("tabs").innerHTML = `<div style="display: grid; grid-template-columns: 1fr max-content; width: 100%;"><span>` + window.tabs.map((i, j) => ` <li class="nav-item ${i.chat ? 'pinned' : ''}" style="width: max-content; display: inline-block;"> - <a class="nav-link ${j === window.activeTab ? 'active' : ''}" aria-current="page" href="#" onclick="if (event.target.classList.contains('nav-link')) switchToTab(${j});"><img style="width: 24px; height: 24px; pointer-events: none;" alt="" src="${i.icon}"><span class="tab-text" onclick="switchToTab(${j});" style="vertical-align: middle; margin-left: 5px; width: 171px; display: inline-block; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis">${i.name}</span><span class="tab-close" style="display: inline-block;" onclick="event.preventDefault(); closeTab(${j});"><img alt="" src="./icons/dismiss.svg"></span></a> + <a class="nav-link ${j === window.activeTab ? 'active' : ''}" aria-current="page" href="#" onclick="if (event.target.classList.contains('nav-link')) switchToTab(${j});"><img onerror="event.target.src = './icons/placeholder.svg';" style="width: 24px; height: 24px; pointer-events: none;" alt="" src="${i.icon}"><span class="tab-text" onclick="switchToTab(${j});" style="vertical-align: middle; margin-left: 5px; width: 171px; display: inline-block; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis">${i.name}</span><span class="tab-close" style="display: inline-block;" onclick="event.preventDefault(); closeTab(${j});"><img alt="" src="./icons/dismiss.svg"></span></a> </li> `).join("") + `<li class="nav-item" style="width: max-content; display: inline-block;"> <a class="nav-link" aria-current="page" href="#" onclick="openHome();"><img alt="" src="./icons/new.svg"></a> @@ -130,6 +169,68 @@ <a class="nav-link" aria-current="page" href="#" onclick="toggleProtection();"><img id="ad-protection-img" alt="" src="./icons/${window.protectionEnabled ? 'shield-on' : 'shield-off'}.svg"></a> </li></span></div>`; if (tabs[window.activeTab]) document.title = tabs[window.activeTab].name + " ยท Chatroom Workspace"; + + secureTabHeight(); + } + + let lastTabHeightUpdateCount = tabs.length; + + function secureTabHeight(force) { + let first = false; + let i = 0; + + while ((!first || document.getElementById("tabs").clientHeight > 43) && i < 10) { + if (document.getElementById("tabs").clientHeight > 43 && !document.getElementById("tabs").classList.contains("small-1")) { + document.getElementById("tabs").classList.add("small-1"); + } else if (document.getElementById("tabs").clientHeight > 43 && !document.getElementById("tabs").classList.contains("small-2")) { + document.getElementById("tabs").classList.add("small-1"); + document.getElementById("tabs").classList.add("small-2"); + } else if (document.getElementById("tabs").clientHeight > 43 && !document.getElementById("tabs").classList.contains("small-3")) { + document.getElementById("tabs").classList.add("small-1"); + document.getElementById("tabs").classList.add("small-2"); + document.getElementById("tabs").classList.add("small-3"); + } else if (document.getElementById("tabs").clientHeight > 43 && !document.getElementById("tabs").classList.contains("small-4")) { + document.getElementById("tabs").classList.add("small-1"); + document.getElementById("tabs").classList.add("small-2"); + document.getElementById("tabs").classList.add("small-3"); + document.getElementById("tabs").classList.add("small-4"); + } else if (document.getElementById("tabs").clientHeight > 43 && !document.getElementById("tabs").classList.contains("small-5")) { + document.getElementById("tabs").classList.add("small-1"); + document.getElementById("tabs").classList.add("small-2"); + document.getElementById("tabs").classList.add("small-3"); + document.getElementById("tabs").classList.add("small-4"); + document.getElementById("tabs").classList.add("small-5"); + } else if (document.getElementById("tabs").clientHeight > 43 && !document.getElementById("tabs").classList.contains("small-6")) { + document.getElementById("tabs").classList.add("small-1"); + document.getElementById("tabs").classList.add("small-2"); + document.getElementById("tabs").classList.add("small-3"); + document.getElementById("tabs").classList.add("small-4"); + document.getElementById("tabs").classList.add("small-5"); + document.getElementById("tabs").classList.add("small-6"); + } else { + if (force || tabs.length < lastTabHeightUpdateCount) { + document.getElementById("tabs").classList.remove("small-1"); + document.getElementById("tabs").classList.remove("small-2"); + document.getElementById("tabs").classList.remove("small-3"); + document.getElementById("tabs").classList.remove("small-4"); + document.getElementById("tabs").classList.remove("small-5"); + document.getElementById("tabs").classList.remove("small-6"); + } + } + + first = true; + i++; + } + + if (i >= 10) { + closeTab(tabs.length - 1); + } + + lastTabHeightUpdateCount = tabs.length; + } + + window.onresize = () => { + secureTabHeight(true); } function reloadWebview(force) { @@ -152,19 +253,20 @@ } function resetURL(id) { - if (document.getElementById("wv-item-" + id + "-inner").getURL() === "https://start.duckduckgo.com/") { + if (document.getElementById("wv-item-" + id + "-inner").getURL().startsWith("file://") && document.getElementById("wv-item-" + id + "-inner").getURL().endsWith("/home.html")) { document.getElementById("wv-item-" + id + "-bar-address").value = ""; } else { document.getElementById("wv-item-" + id + "-bar-address").value = document.getElementById("wv-item-" + id + "-inner").getURL(); } } - function openTab(url) { + function openTab(url, focusSearchBar) { let container = document.createElement("div"); let webview = document.createElement("webview"); + let tab = { icon: "./icons/placeholder.svg", - name: "Unnamed tab", + name: "New Tab", url, webview: container, id: crypto.randomUUID(), @@ -200,6 +302,12 @@ webview.id = "wv-item-" + tab.id + "-inner"; container.id = "wv-item-" + tab.id; container.classList.add("wv-container"); + webview.addEventListener('devtools-open-url', (e) => { + openTab(e.url); + }); + webview.addEventListener('close', () => { + closeTab(tabs.map((i, j) => [i, j]).filter(i => i[0].id === tab.id)[0][1]); + }); webview.addEventListener('page-title-updated', (e) => { if (webview.getURL().startsWith("https://school.equestria.dev/")) { tab.name = "Chat"; @@ -209,6 +317,9 @@ refreshTabBar(); }); + webview.addEventListener('context-menu', (e) => { + ipcRenderer.send('menu', e.params); + }); webview.addEventListener('page-favicon-updated', (e) => { if (webview.getURL().startsWith("https://school.equestria.dev/")) { tab.icon = "./icons/chat.svg"; @@ -242,6 +353,7 @@ document.getElementById('wv-item-' + tab.id + '-bar-address').onkeydown = (e) => { if (e.code === "Return" || e.code === "Enter") { loadURL(tab.id); + document.getElementById('wv-item-' + tab.id + '-bar-address').blur(); } } @@ -249,6 +361,10 @@ refreshTabBar(); switchToTab(tabs.length - 1); + + if (focusSearchBar) { + document.getElementById("wv-item-" + tab.id + "-bar-address").focus(); + } } function switchToTab(id) { @@ -274,7 +390,7 @@ } function openHome() { - openTab("https://start.duckduckgo.com"); + openTab("./home.html", true); } function closeTab(id) { @@ -335,8 +451,10 @@ } } - openTab("https://school.equestria.dev"); - openHome(); + window.onload = () => { + openTab("https://school.equestria.dev"); + openHome(); + } </script> </body> </html>
\ No newline at end of file |