diff options
Diffstat (limited to 'client/index.html')
| -rw-r--r-- | client/index.html | 65 |
1 files changed, 51 insertions, 14 deletions
diff --git a/client/index.html b/client/index.html index 1ebd8e8..a0661a9 100644 --- a/client/index.html +++ b/client/index.html @@ -56,9 +56,25 @@ .nav-item:not(.active):hover .nav-link { border-color: transparent !important; } + + @media (prefers-color-scheme: dark) { + #tabs, .bar { + background-color: #ddd; + filter: invert(1) hue-rotate(180deg); + } + + .nav-link.active { + background-color: #ddd !important; + border-bottom: none !important; + } + + img:not([src$=".svg"]) { + filter: invert(1) hue-rotate(180deg); + } + } </style> </head> -<body> +<body style="overflow-y: hidden;"> <ul id="tabs" class="nav nav-tabs" style="background-color: #eee; -webkit-app-region: drag;"></ul> <script> if (process.platform === "darwin") { @@ -70,10 +86,29 @@ <div id="windows" style="display: flex;"></div> <script> + const ipcRenderer = require('electron').ipcRenderer; + window.tabs = []; window.activeTab = -1; + window.protectionEnabled = localStorage.getItem("protection-status") !== "false"; + + function toggleProtection() { + window.protectionEnabled = !window.protectionEnabled; + localStorage.setItem("protection-status", JSON.stringify(window.protectionEnabled)); + refreshInternalProtection(); + refreshTabBar(); + } + + function refreshInternalProtection() { + if (window.protectionEnabled) { + ipcRenderer.send("enable-protection"); + } else { + ipcRenderer.send("disable-protection"); + } + } function refreshTabBar() { + console.log(window.activeTab); let id = window.activeTab; if (id > -1) { @@ -84,13 +119,15 @@ tabs[id].webview.classList.add("open"); } - document.getElementById("tabs").innerHTML = window.tabs.map((i, j) => ` - <li class="nav-item ${i.chat ? 'pinned' : ''}"> - <a class="nav-link ${j === window.activeTab ? 'active' : ''}" aria-current="page" href="#"><img onclick="switchToTab(${j});" style="width: 24px; height: 24px;" 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> + 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> </li> - `).join("") + `<li class="nav-item"> + `).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> - </li>`; + </li></span><span><li class="nav-item" style="width: max-content; display: inline-block;"> + <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"; } @@ -165,8 +202,6 @@ webview.addEventListener('page-title-updated', (e) => { if (webview.getURL().startsWith("https://school.equestria.dev/")) { tab.name = "Chat"; - } else if (webview.getURL().startsWith("https://canvas.apps.chrome/")) { - tab.name = "Canvas"; } else { tab.name = e.title; } @@ -176,8 +211,6 @@ webview.addEventListener('page-favicon-updated', (e) => { if (webview.getURL().startsWith("https://school.equestria.dev/")) { tab.icon = "./icons/chat.svg"; - } else if (webview.getURL().startsWith("https://canvas.apps.chrome/")) { - tab.icon = "./icons/canvas.svg"; } else { tab.icon = e.favicons[0] ?? "./icons/placeholder.svg"; } @@ -218,6 +251,7 @@ } function switchToTab(id) { + console.log("<", id); window.activeTab = id; refreshTabBar(); } @@ -253,24 +287,27 @@ document.getElementById("wv-item-" + tabs[id].id).outerHTML = ""; window.tabs = tabs.filter((i, j) => j !== id); + console.log("C3"); refreshTabBar(); } function closeCurrentTab() { let oldActiveTab = window.activeTab; + let newActiveTab = window.activeTab; if (tabs.length === 1) { window.close(); return; - } else if (window.activeTab === tabs.length - 1) { - window.activeTab--; + } else if (newActiveTab === tabs.length - 1) { + newActiveTab--; } document.getElementById("wv-item-" + tabs[oldActiveTab].id).outerHTML = ""; window.tabs = tabs.filter((i, j) => j !== oldActiveTab); - console.log(window.activeTab); - switchToTab(window.activeTab); + console.log(">", newActiveTab, oldActiveTab); + console.log("C2"); + switchToTab(newActiveTab); } function switchRight() { |