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",
"react": "^18.2.0",
"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": {
"@types/react": "^18.2.15",
interface/src/App.tsx → interface/src/SettingsPage.tsx
+5 -15
View File
@@ -1,26 +1,16 @@
import React, { useEffect } from 'react';
import TabbedContainer from './components/TabbedContainer';
import Settings from './pages/Settings';
import logo from './assets/betterseqta-dark-full.png';
import logoDark from './assets/betterseqta-light-full.png';
import Shortcuts from './pages/Shortcuts';
import { useSettingsContext } from './SettingsContext';
import Picker from './components/Picker';
import Themes from './pages/Themes';
//import About from './pages/About';
//import About from './pages/About';
const App: React.FC = () => {
const { standalone, setStandalone } = useSettingsContext();
useEffect(() => {
// if body has class standalone
if (document.body.classList.contains('standalone')) {
// set settingsContext standalone to true
setStandalone(true);
}
})
interface SettingsPage {
standalone: boolean;
}
const SettingsPage = ({ standalone }: SettingsPage) => {
const tabs = [
{
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 ReactDOM from 'react-dom/client'
import App from './App.js'
import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';
import { HashRouter, Routes, Route } from 'react-router-dom';
import './index.css';
import { SettingsContextProvider } from './SettingsContext.js';
const root = ReactDOM.createRoot(document.getElementById('ExtensionPopup')!);
import SettingsPage from './SettingsPage.js';
const fontURL = chrome.runtime.getURL("fonts/IconFamily.woff");
const style = document.createElement("style");
@@ -19,10 +17,18 @@ style.innerHTML = `
}`;
document.head.appendChild(style);
const root = ReactDOM.createRoot(document.getElementById('ExtensionPopup')!);
root.render(
<React.StrictMode>
<SettingsContextProvider>
<App />
<HashRouter>
<Routes>
<Route path="/settings" element={<SettingsPage standalone={true} />} />
<Route path="/settings/embedded" element={<SettingsPage standalone={false} />} />
</Routes>
</HashRouter>
</SettingsContextProvider>
</React.StrictMode>,
);
public/popup/popup.css → public/interface/popup.css
View File
public/manifest.json
+1 -1
View File
@@ -10,7 +10,7 @@
},
"action": {
"browser_style": true,
"default_popup": "popup/info.html",
"default_popup": "interface/index.html#settings",
"default_icon": {
"32": "icons/icon-32.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() {
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.rel = 'stylesheet';
document.querySelector('html').appendChild(link);
@@ -831,7 +831,7 @@ function addExtensionSettings() {
document.body.appendChild(extensionPopup);
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.allowTransparency = true;
extensionIframe.style.width = '384px';