From b28e0e87324dd6a24cac8770651be569d86dc1da Mon Sep 17 00:00:00 2001 From: SethBurkart123 Date: Fri, 20 Oct 2023 18:17:38 +1100 Subject: [PATCH] fix light-dark mode --- src/SEQTA.js | 148 ++++++++------------------------- src/inject/injected.css | 39 ++++++++- src/seqta/ui/colors/Manager.js | 33 +++++++- 3 files changed, 100 insertions(+), 120 deletions(-) diff --git a/src/SEQTA.js b/src/SEQTA.js index 4972b37d..32b83a6d 100644 --- a/src/SEQTA.js +++ b/src/SEQTA.js @@ -14,7 +14,6 @@ import StorageListener from "./seqta/utils/StorageListener.js"; import { updateBgDurations } from "./seqta/ui/Animation.js"; import { updateAllColors } from "./seqta/ui/colors/Manager.js"; import { appendBackgroundToUI } from "./seqta/ui/ImageBackgrounds.js"; -import { lightenAndPaleColor } from "./seqta/ui/colors/lightenAndPaleColor.js"; export let isChrome = window.chrome; let SettingsClicked = false; @@ -308,7 +307,7 @@ async function RunColourCheck(element) { } } -function GetiFrameCSSElement() { +export function GetiFrameCSSElement() { var cssFile = chrome.runtime.getURL("inject/iframe.css"); var fileref = document.createElement("link"); fileref.setAttribute("rel", "stylesheet"); @@ -403,8 +402,8 @@ function SortMessagePageItems(messagesParentElement) { }); } -function LoadPageElements() { - AddBetterSEQTAElements(true); +async function LoadPageElements() { + await AddBetterSEQTAElements(true); var sublink = window.location.href.split("/")[4]; switch (sublink) { case "news": @@ -1094,7 +1093,7 @@ function ReplaceMenuSVG(element, svg) { item.insertBefore(newsvg, item.firstChild); } -function AddBetterSEQTAElements(toggle) { +async function AddBetterSEQTAElements(toggle) { var code = document.getElementsByClassName("code")[0]; // Replaces students code with the version of BetterSEQTA if (code != null) { @@ -1275,114 +1274,38 @@ function AddBetterSEQTAElements(toggle) { var ContentDiv = document.getElementById("content"); ContentDiv.append(SettingsButton.firstChild); - chrome.storage.local.get(["DarkMode"], function (result) { - DarkMode = result.DarkMode; - - let tooltipstring = GetLightDarkModeString(DarkMode); - var LightDarkModeButton = stringToHTML( - String.raw``, - ); - ContentDiv.append(LightDarkModeButton.firstChild); - - let LightDarkModeElement = document.getElementById("LightDarkModeButton"); - - if (DarkMode) { - LightDarkModeElement.firstChild.innerHTML = ""; - document.documentElement.style.removeProperty("--better-pale"); - } else { - LightDarkModeElement.firstChild.innerHTML = ""; - try { - chrome.storage.local.get(null, function (result) { - document.documentElement.style.setProperty( - "--better-pale", - lightenAndPaleColor(result.selectedColor), - ); - }); - } catch (err) { - console.log(err); - } - } - let darklightText = document.getElementById("darklighttooliptext"); - LightDarkModeElement.addEventListener("click", function () { - chrome.storage.local.get(["DarkMode"], function (result) { - DarkMode = result.DarkMode; - let alliframes = document.getElementsByTagName("iframe"); - let fileref = GetiFrameCSSElement(); - - if (!DarkMode) { - document.documentElement.style.setProperty( - "--background-primary", - "#232323", - ); - document.documentElement.style.setProperty( - "--background-secondary", - "#1a1a1a", - ); - document.documentElement.style.setProperty( - "--text-primary", - "white", - ); - document.documentElement.style.removeProperty("--better-pale"); - LightDarkModeElement.firstChild.innerHTML = ""; - - for (let i = 0; i < alliframes.length; i++) { - const element = alliframes[i]; - - if (element.getAttribute("excludeDarkCheck") == "true") { - continue; - } - - console.log(element); - console.log(element.contentDocument.documentElement); - - element.contentDocument.documentElement.childNodes[1].style.color = - "white"; - element.contentDocument.documentElement.firstChild.appendChild( - fileref, - ); - } - } else { - document.documentElement.style.setProperty( - "--background-primary", - "#ffffff", - ); - document.documentElement.style.setProperty( - "--background-secondary", - "#e5e7eb", - ); - document.documentElement.style.setProperty( - "--text-primary", - "black", - ); - try { - chrome.storage.local.get(null, function (result) { - document.documentElement.style.setProperty( - "--better-pale", - lightenAndPaleColor(result.selectedColor), - ); - }); - } catch (err) { - console.log(err); - } - LightDarkModeElement.firstChild.innerHTML = ""; - - for (let i = 0; i < alliframes.length; i++) { - const element = alliframes[i]; - - if (element.getAttribute("excludeDarkCheck") == "true") { - continue; - } - - element.contentDocument.documentElement.childNodes[1].style.color = - "black"; - element.contentDocument.documentElement.firstChild.lastChild.remove(); - } - } - tooltipstring = GetLightDarkModeString(!result.DarkMode); - darklightText.innerText = tooltipstring; - chrome.storage.local.set({ DarkMode: !result.DarkMode }); - }); + const result = await new Promise(resolve => { + chrome.storage.local.get(null, resolve); + }); + + const DarkMode = result.DarkMode; + const tooltipString = GetLightDarkModeString(DarkMode); + const svgContent = DarkMode ? "" : + ""; + + const LightDarkModeButton = stringToHTML(` + + `); + + ContentDiv.append(LightDarkModeButton.firstChild); + + updateAllColors(DarkMode, result.selectedColor); + + document.getElementById("LightDarkModeButton").addEventListener("click", async () => { + const result = await new Promise(resolve => { + chrome.storage.local.get(null, resolve); }); + + const newDarkMode = !result.DarkMode; + chrome.storage.local.set({ DarkMode: newDarkMode }); + + updateAllColors(newDarkMode, result.selectedColor); + + const darklightText = document.getElementById("darklighttooliptext"); + darklightText.innerText = GetLightDarkModeString(newDarkMode); }); } else { // Creates settings and dashboard buttons next to alerts @@ -1395,6 +1318,7 @@ function AddBetterSEQTAElements(toggle) { var AddedSettings = document.getElementById("AddedSettings"); var extensionsettings = document.getElementById("ExtensionPopup"); + AddedSettings.addEventListener("click", function () { extensionsettings.classList.toggle("hide"); SettingsClicked = true; diff --git a/src/inject/injected.css b/src/inject/injected.css index 89c5b790..10d49bbf 100644 --- a/src/inject/injected.css +++ b/src/inject/injected.css @@ -35,6 +35,7 @@ html { #main { color: var(--text-primary); + padding-top: 5rem; } .forums { @@ -143,7 +144,6 @@ ul.magicDelete > li.deleting { color: var(--text-color); border-right: none; font-family: Rubik, sans-serif !important; - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; z-index: 11 !important; } @@ -474,12 +474,31 @@ div > ol:has(.uiFileHandlerWrapper) { min-height: 8rem !important; } -.student #menu > ul::before { +/* .student #menu::before { + background: var(--better-main); + top: 0; + position: sticky; + height: 16px; +} */ + +/* .student #menu > ul::before { background-image: var(--betterseqta-logo); - position: -webkit-sticky; /* Safari */ + position: -webkit-sticky; position: sticky; top: 0; - background-color: var(--better-main); + background-color: var(--background-primary); + height: 69.5px; + webkit-box-shadow: 0px 5px 16px 6px rgba(0, 0, 0, 0.2) !important; + box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2); +} */ + +.student #menu > ul::before { + background: none; + height: 0; +} + +.student #menu > ul { + margin-top: 70px; } .assessmentsWrapper .message { @@ -586,6 +605,14 @@ div > ol:has(.uiFileHandlerWrapper) { --colour: unset; } +/* #title span { + display: none; +} */ + +#editmenu { + display: none; +} + #title { background: var(--background-primary); color: var(--text-primary); @@ -595,6 +622,10 @@ div > ol:has(.uiFileHandlerWrapper) { border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-weight: 500 !important; z-index: 1; + position: fixed; + top: 0; + left: 0; + width: 100%; } .bg { diff --git a/src/seqta/ui/colors/Manager.js b/src/seqta/ui/colors/Manager.js index 959358f3..858036c1 100644 --- a/src/seqta/ui/colors/Manager.js +++ b/src/seqta/ui/colors/Manager.js @@ -1,5 +1,5 @@ /* global chrome */ -import { GetThresholdOfColor } from "../../../SEQTA.js"; +import { GetThresholdOfColor, GetiFrameCSSElement } from "../../../SEQTA.js"; import { lightenAndPaleColor } from "./lightenAndPaleColor.js"; import ColorLuminance from "./ColorLuminance.js"; @@ -33,13 +33,19 @@ export function updateAllColors(storedSetting, newColor = null) { modeProps = DarkMode ? { "--background-primary": "#232323", "--background-secondary": "#1a1a1a", - "--text-primary": "white" + "--text-primary": "white", + "--betterseqta-logo": `url(${getChromeURL("icons/betterseqta-light-full.png")})` } : { "--background-primary": "#ffffff", "--background-secondary": "#e5e7eb", "--text-primary": "black", - "--better-pale": lightenAndPaleColor(selectedColor) + "--better-pale": lightenAndPaleColor(selectedColor), + "--betterseqta-logo": `url(${getChromeURL("icons/betterseqta-dark-full.png")})` }; + + if (DarkMode) { + document.documentElement.style.removeProperty("--better-pale"); + } } // Dynamic properties, always applied @@ -47,7 +53,6 @@ export function updateAllColors(storedSetting, newColor = null) { const isBright = rgbThreshold > 210; const dynamicProps = { "--text-color": isBright ? "black" : "white", - "--betterseqta-logo": `url(${getChromeURL(`icons/betterseqta-${isBright ? "dark" : "light"}-full.png`)})`, "--better-light": selectedColor === "#ffffff" ? "#b7b7b7" : ColorLuminance(selectedColor, 0.95) }; @@ -58,6 +63,26 @@ export function updateAllColors(storedSetting, newColor = null) { if (DarkMode !== null) { document.querySelector("link[rel*='icon']").href = getChromeURL("icons/icon-48.png"); } + + let alliframes = document.getElementsByTagName("iframe"); + let fileref = GetiFrameCSSElement(); + + for (let i = 0; i < alliframes.length; i++) { + const element = alliframes[i]; + + if (element.getAttribute("excludeDarkCheck") == "true") { + continue; + } + + console.log(element); + console.log(element.contentDocument.documentElement); + + element.contentDocument.documentElement.childNodes[1].style.color = + DarkMode ? "black" : "white"; + element.contentDocument.documentElement.firstChild.appendChild( + fileref, + ); + } } export function getDarkMode() {