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

Refactor React to use routing

Browse Source
This commit is contained in:
SethBurkart123
2023-11-26 13:25:27 +11:00
parent 7ff12c1513
commit 5cc3fee217
7 changed files with 24 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
interface/package.json
+2 -1
View File
@@ -14,7 +14,8 @@
"framer-motion": "^10.16.4", "framer-motion": "^10.16.4",
"react": "^18.2.0", "react": "^18.2.0",
"react-best-gradient-color-picker": "^2.2.24", "react-best-gradient-color-picker": "^2.2.24",
"react-dom": "^18.2.0" "react-dom": "^18.2.0",
"react-router-dom": "^6.20.0"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^18.2.15", "@types/react": "^18.2.15",
interface/src/App.tsx → interface/src/SettingsPage.tsx
+4 -14
View File
@@ -1,26 +1,16 @@
import React, { useEffect } from 'react';
import TabbedContainer from './components/TabbedContainer'; import TabbedContainer from './components/TabbedContainer';
import Settings from './pages/Settings'; import Settings from './pages/Settings';
import logo from './assets/betterseqta-dark-full.png'; import logo from './assets/betterseqta-dark-full.png';
import logoDark from './assets/betterseqta-light-full.png'; import logoDark from './assets/betterseqta-light-full.png';
import Shortcuts from './pages/Shortcuts'; import Shortcuts from './pages/Shortcuts';
import { useSettingsContext } from './SettingsContext';
import Picker from './components/Picker'; import Picker from './components/Picker';
import Themes from './pages/Themes'; import Themes from './pages/Themes';
//import About from './pages/About';
//import About from './pages/About';
const App: React.FC = () => { interface SettingsPage {
const { standalone, setStandalone } = useSettingsContext(); standalone: boolean;
useEffect(() => {
// if body has class standalone
if (document.body.classList.contains('standalone')) {
// set settingsContext standalone to true
setStandalone(true);
} }
})
const SettingsPage = ({ standalone }: SettingsPage) => {
const tabs = [ const tabs = [
{ {
title: 'Settings', title: 'Settings',
@@ -48,4 +38,4 @@ const App: React.FC = () => {
); );
}; };
export default App; export default SettingsPage;
interface/src/main.tsx
+14 -8
View File
@@ -1,11 +1,9 @@
import React from 'react' import React from 'react';
import ReactDOM from 'react-dom/client' import ReactDOM from 'react-dom/client';
import App from './App.js' import { HashRouter, Routes, Route } from 'react-router-dom';
import './index.css' import './index.css';
import { SettingsContextProvider } from './SettingsContext.js'; import { SettingsContextProvider } from './SettingsContext.js';
import SettingsPage from './SettingsPage.js';
const root = ReactDOM.createRoot(document.getElementById('ExtensionPopup')!);
const fontURL = chrome.runtime.getURL("fonts/IconFamily.woff"); const fontURL = chrome.runtime.getURL("fonts/IconFamily.woff");
const style = document.createElement("style"); const style = document.createElement("style");
@@ -19,10 +17,18 @@ style.innerHTML = `
}`; }`;
document.head.appendChild(style); document.head.appendChild(style);
const root = ReactDOM.createRoot(document.getElementById('ExtensionPopup')!);
root.render( root.render(
<React.StrictMode> <React.StrictMode>
<SettingsContextProvider> <SettingsContextProvider>
<App /> <HashRouter>
<Routes>
<Route path="/settings" element={<SettingsPage standalone={true} />} />
<Route path="/settings/embedded" element={<SettingsPage standalone={false} />} />
</Routes>
</HashRouter>
</SettingsContextProvider> </SettingsContextProvider>
</React.StrictMode>, </React.StrictMode>,
); );
public/popup/popup.css → public/interface/popup.css
View File
public/manifest.json
+1 -1
View File
@@ -10,7 +10,7 @@
}, },
"action": { "action": {
"browser_style": true, "browser_style": true,
"default_popup": "popup/info.html", "default_popup": "interface/index.html#settings",
"default_icon": { "default_icon": {
"32": "icons/icon-32.png", "32": "icons/icon-32.png",
"48": "icons/icon-48.png", "48": "icons/icon-48.png",
public/popup/info.html
-15
View File
@@ -1,15 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<script type="module" crossorigin src="/client/public/client.js"></script>
<link rel="stylesheet" href="/client/rsc/css/index.css">
</head>
<body class="standalone">
<div id="ExtensionPopup"></div>
</body>
</html>
src/SEQTA.js
+2 -2
View File
@@ -820,7 +820,7 @@ export function closeSettings() {
function addExtensionSettings() { function addExtensionSettings() {
const link = document.createElement('link'); const link = document.createElement('link');
link.href = chrome.runtime.getURL('popup/popup.css'); link.href = chrome.runtime.getURL('interface/popup.css');
link.type = 'text/css'; link.type = 'text/css';
link.rel = 'stylesheet'; link.rel = 'stylesheet';
document.querySelector('html').appendChild(link); document.querySelector('html').appendChild(link);
@@ -831,7 +831,7 @@ function addExtensionSettings() {
document.body.appendChild(extensionPopup); document.body.appendChild(extensionPopup);
const extensionIframe = document.createElement('iframe'); const extensionIframe = document.createElement('iframe');
extensionIframe.src = chrome.runtime.getURL('interface/index.html'); extensionIframe.src = `${chrome.runtime.getURL('interface/index.html')}#settings/embedded`;
extensionIframe.id = 'ExtensionIframe'; extensionIframe.id = 'ExtensionIframe';
extensionIframe.allowTransparency = true; extensionIframe.allowTransparency = true;
extensionIframe.style.width = '384px'; extensionIframe.style.width = '384px';