BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-06 03:34:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix color bugs

Browse Source
This commit is contained in:
SethBurkart123
2023-09-22 09:41:58 +10:00
parent 548bead17b
commit cbc84c8e79
10 changed files with 93 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bun.lockb
BIN
View File
Binary file not shown.
interface/src/components/ColorPicker.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
// @ts-expect-error There aren't any types for the below library
import ColorPicker from 'react-best-gradient-color-picker';
import { useState, useRef, useEffect } from 'react';
import type { ColorPickerProps } from '../types/ColorPicker';
import type { ColorPickerProps } from '../types/ColorPickerProps';
const Picker = ({ color, onChange }: ColorPickerProps) => {
const [showPicker, setShowPicker] = useState<boolean>(false);
interface/src/components/Slider.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import "./Slider.css";
import type { Slider } from '../types/Slider';
import type { Slider } from '../types/SliderProps';
const Slider: React.FC<Slider> = ({ onValueChange }) => {
const [sliderValue, setSliderValue] = useState(0);
interface/src/components/Switch.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { motion } from "framer-motion";
import "./Switch.css";
import type { SwitchProps } from "../types/Switch";
import type { SwitchProps } from "../types/SwitchProps";
export default function Switch(props: SwitchProps) {
const toggleSwitch = () => {
interface/src/components/TabbedContainer.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import React, { useState, useRef, useEffect } from 'react';
import { motion } from 'framer-motion';
import type { TabbedContainerProps } from '../types/TabbedContainer';
import type { TabbedContainerProps } from '../types/TabbedContainerProps';
const TabbedContainer: React.FC<TabbedContainerProps> = ({ tabs, themeColor }) => {
const [activeTab, setActiveTab] = useState(0);
interface/src/hooks/settingsState.ts
+1 -4
View File
@@ -57,17 +57,14 @@ const useSettingsState = ({ settingsState, setSettingsState }: SettingsProps) =>
});
const setStorage = (key: keyof MainConfig, value: any) => {
console.log(chrome.storage.local.set({ [key]: value }));
chrome.storage.local.set({ [key]: value });
}
useEffect(() => {
console.log("settingsState", settingsState)
console.log("previousSettingsState", previousSettingsState)
if (previousSettingsState) {
for (const [key, value] of Object.entries(settingsState)) {
const storageKey = Object.keys(keyToStateMap).find(k => keyToStateMap[k] === key);
if (storageKey && value !== previousSettingsState[key]) {
console.log("key", storageKey)
setStorage(storageKey as keyof MainConfig, value);
}
}
package.json
+4
View File
@@ -29,8 +29,12 @@
"webpack-cli": "^5.1.4"
},
"dependencies": {
"@types/color": "^3.0.4",
"@types/react": "^18.2.21",
"autoprefixer": "^10.4.15",
"color": "^4.2.3",
"install": "^0.13.0",
"npm": "^10.1.0",
"postcss": "^8.4.29",
"react": "^18.2.0",
"tailwindcss": "^3.3.3",
src/SEQTA.js
+63 -97
View File
@@ -1,4 +1,6 @@
/*global chrome*/
import Color from "color";
import ShortcutLinks from "./seqta/content/links.json";
import MenuitemSVGKey from "./seqta/content/MenuItemSVGKey.json";
import stringToHTML from "./seqta/utils/stringToHTML.js";
@@ -626,109 +628,81 @@ function AppendElementsToDisabledPage() {
document.head.append(settingsStyle);
}
function lightenAndPaleColor(
hexColor,
lightenFactor = 0.75,
paleFactor = 0.55,
) {
// Convert a RGB value to HSL
function rgbToHsl(r, g, b) {
(r /= 255), (g /= 255), (b /= 255);
let max = Math.max(r, g, b),
min = Math.min(r, g, b);
let h,
s,
l = (max + min) / 2;
function lightenAndPaleColor(inputColor, lightenFactor = 0.75, paleFactor = 0.55) {
// Step 1: Convert RGBA to separate R, G and B values
const [r, g, b] = inputColor.match(/\d+/g).map(Number);
// Step 2: Convert RGB to HSL
let r1 = r / 255, g1 = g / 255, b1 = b / 255;
const max = Math.max(r1, g1, b1), min = Math.min(r1, g1, b1);
let h, s, l = (max + min) / 2;
if (max === min) {
h = s = 0;
} else {
let d = max - min;
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
case r1: h = (g1 - b1) / d + (g1 < b1 ? 6 : 0); break;
case g1: h = (b1 - r1) / d + 2; break;
case b1: h = (r1 - g1) / d + 4; break;
}
h /= 6;
}
return [h, s, l];
}
// Convert an HSL value to RGB
function hslToRgb(h, s, l) {
function hue2rgb(p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
}
let r, g, b;
if (s === 0) {
r = g = b = l;
} else {
let q = l < 0.5 ? l * (1 + s) : l + s - l * s;
let p = 2 * l - q;
r = hue2rgb(p, q, h + 1 / 3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1 / 3);
}
return [r * 255, g * 255, b * 255];
}
// Extract the red, green, and blue components from hex
let r = parseInt(hexColor.substr(1, 2), 16);
let g = parseInt(hexColor.substr(3, 2), 16);
let b = parseInt(hexColor.substr(5, 2), 16);
// Convert RGB to HSL
let [h, s, l] = rgbToHsl(r, g, b);
// Adjust saturation and lightness
// Step 3: Adjust saturation and lightness
s -= s * paleFactor;
l += (1 - l) * lightenFactor;
// Convert HSL back to RGB
[r, g, b] = hslToRgb(h, s, l);
// Step 4: Convert HSL back to RGB
const hue2rgb = (p, q, t) => {
if(t < 0) t += 1;
if(t > 1) t -= 1;
if(t < 1/6) return p + (q - p) * 6 * t;
if(t < 1/2) return q;
if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
};
// Convert RGB to hex
r = Math.round(r).toString(16).padStart(2, "0");
g = Math.round(g).toString(16).padStart(2, "0");
b = Math.round(b).toString(16).padStart(2, "0");
let r2, g2, b2;
if (s === 0) {
r2 = g2 = b2 = l;
} else {
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
const p = 2 * l - q;
r2 = hue2rgb(p, q, h + 1/3);
g2 = hue2rgb(p, q, h);
b2 = hue2rgb(p, q, h - 1/3);
}
return "#" + r + g + b;
// Step 5: Format Output
const result = `rgb(${Math.round(r2 * 255)}, ${Math.round(g2 * 255)}, ${Math.round(b2 * 255)})`;
return `${result}`;
}
function ColorLuminance(hex, lum) {
// validate hex string
hex = String(hex).replace(/[^0-9a-f]/gi, "");
if (hex.length < 6) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
lum = lum || 0;
function ColorLuminance(color, lum = 0) {
// Convert the input color to HEX format
const hexColor = Color(color).hex();
// convert to decimal and change luminosity
var rgb = "#",
c,
i;
for (i = 0; i < 3; i++) {
c = parseInt(hex.substr(i * 2, 2), 16);
// Original luminance adjustment logic
let adjustedHex = String(hexColor).replace(/[^0-9a-f]/gi, "");
if (adjustedHex.length < 6) {
adjustedHex = adjustedHex[0] + adjustedHex[0] + adjustedHex[1] + adjustedHex[1] + adjustedHex[2] + adjustedHex[2];
}
let rgb = "#",
c;
for (let i = 0; i < 3; i++) {
c = parseInt(adjustedHex.substr(i * 2, 2), 16);
c = Math.round(Math.min(Math.max(0, c + c * lum), 255)).toString(16);
rgb += ("00" + c).substring(c.length);
}
return rgb;
// Convert the adjusted color back to the desired output mode
return Color(rgb).hex();
}
chrome.storage.onChanged.addListener(function (changes) {
@@ -736,6 +710,7 @@ chrome.storage.onChanged.addListener(function (changes) {
try {
chrome.storage.local.get(["DarkMode"], function (result) {
if (!result.DarkMode) {
console.log(changes.selectedColor.newValue);
document.documentElement.style.setProperty(
"--better-pale",
lightenAndPaleColor(changes.selectedColor.newValue),
@@ -747,6 +722,7 @@ chrome.storage.onChanged.addListener(function (changes) {
}
let rbg = GetThresholdofHex(changes.selectedColor.newValue);
if (rbg > 210) {
document.documentElement.style.setProperty("--text-color", "black");
document.documentElement.style.setProperty(
@@ -2001,10 +1977,12 @@ function AddBetterSEQTAElements(toggle) {
students[index]?.house_colour,
);
if (colorresult > 300) {
if (colorresult && colorresult > 300) {
houseelement.style.color = "black";
} else {
} else if (colorresult < 300) {
houseelement.style.color = "white";
} else {
houseelement.style.color = "black";
}
houseelement.innerText =
students[index].year + students[index].house;
@@ -2306,20 +2284,8 @@ function CheckCurrentLesson(lesson, num) {
}
}
function hexToRGB(hex) {
try {
var r = parseInt(hex.slice(1, 3), 16),
g = parseInt(hex.slice(3, 5), 16),
b = parseInt(hex.slice(5, 7), 16);
return { r: r, g: g, b: b };
} catch {
// do nothing becuase this functoin is a bit broken right now (feel free to fix it!)
}
}
function GetThresholdofHex(hex) {
var rgb = hexToRGB(hex);
function GetThresholdofHex(color) {
var rgb = Color.rgb(color).string();
return Math.sqrt(rgb.r ** 2 + rgb.g ** 2 + rgb.b ** 2);
}
src/inject/injected.css
+5 -5
View File
@@ -555,20 +555,19 @@ div > ol:has(.uiFileHandlerWrapper) {
top: 0;
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-position: center;
background-position: 10% 10%;
color: var(--text-primary) !important;
}
.Module__wrapper___2sbOo {
overflow: clip;
background: var(--background-primary) !important;
border-radius: 1rem !important;
color: var(--text-primary) !important;
box-shadow: none;
}
.course .composer {
background: var(--background-primary) !important;
background: transparent !important;
overflow: hidden;
}
@@ -577,7 +576,7 @@ div > ol:has(.uiFileHandlerWrapper) {
> .Container__container___33GlY
> .Document__document___1KJCG
> .Canvas__canvas___OBdCZ {
background-color: unset !important;
background-color: transparent !important;
background-image: unset !important;
color: white !important;
}
@@ -1275,6 +1274,7 @@ iframe.userHTML {
#main > .course > .content > h1 {
color: var(--text-primary);
border-bottom: none;
}
#main > .course > .content > .outline > h2,
src/seqta/utils/colorConversion.js
+9
View File
@@ -0,0 +1,9 @@
import { Color } from "color";
export function convertColor(inputColor, outputMode) {
console.log(`Converting to ${outputMode}`);
// Convert color to desired output mode
let convertedColor = Color[outputMode]().string();
return convertedColor;
}