From 230954964feab8fb366d6b6a728b8db1f1f51644 Mon Sep 17 00:00:00 2001 From: CodeDead Date: Tue, 30 Jan 2024 15:51:30 +0100 Subject: [PATCH 1/4] feat: added theme toggle button, dependency upgrades, added ability to export to html --- README.md | 2 +- src-tauri/Cargo.lock | 12 +++++----- src/components/TopBar/index.jsx | 24 +++++++++++++++++-- src/contexts/MainContextProvider/index.jsx | 2 ++ src/languages/en_us.json | 3 ++- src/languages/es_es.json | 3 ++- src/languages/fr_fr.json | 3 ++- src/languages/nl_nl.json | 3 ++- src/languages/zh_cn.json | 3 ++- src/main.css | 13 ++++++++++ src/main.jsx | 1 + .../MainReducer/Actions/actionTypes.js | 1 + src/reducers/MainReducer/Actions/index.js | 6 +++++ src/reducers/MainReducer/index.js | 8 +++++++ src/routes/Home/index.jsx | 13 ++++++++-- src/routes/Settings/index.jsx | 14 +++++++++-- yarn.lock | 6 ++--- 17 files changed, 96 insertions(+), 21 deletions(-) create mode 100644 src/main.css diff --git a/README.md b/README.md index 6117d9f..d65660b 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Advanced PortChecker -![Advanced PortChecker](https://i.imgur.com/yoWDImn.png) +![Advanced PortChecker](https://i.imgur.com/vdt1sXZ.png) ![GitHub](https://img.shields.io/badge/language-JavaScript+Rust-green) ![GitHub](https://img.shields.io/github/license/CodeDead/Advanced-PortChecker) diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock index 2c8cef4..5459d72 100644 --- a/src-tauri/Cargo.lock +++ b/src-tauri/Cargo.lock @@ -506,9 +506,9 @@ dependencies = [ [[package]] name = "darling" -version = "0.20.3" +version = "0.20.4" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "0209d94da627ab5605dcccf08bb18afa5009cfbef48d8a8b7d7bdbc79be25c5e" +checksum = "da01daa5f6d41c91358398e8db4dde38e292378da1f28300b59ef4732b879454" dependencies = [ "darling_core", "darling_macro", @@ -516,9 +516,9 @@ dependencies = [ [[package]] name = "darling_core" -version = "0.20.3" +version = "0.20.4" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "177e3443818124b357d8e76f53be906d60937f0d3a90773a664fa63fa253e621" +checksum = "f44f6238b948a3c6c3073cdf53bb0c2d5e024ee27e0f35bfe9d556a12395808a" dependencies = [ "fnv", "ident_case", @@ -530,9 +530,9 @@ dependencies = [ [[package]] name = "darling_macro" -version = "0.20.3" +version = "0.20.4" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "836a9bbc7ad63342d6d6e7b815ccab164bc77a2d95d84bc3117a8c0d5c98e2d5" +checksum = "0d2d88bd93979b1feb760a6b5c531ac5ba06bd63e74894c377af02faee07b9cd" dependencies = [ "darling_core", "quote", diff --git a/src/components/TopBar/index.jsx b/src/components/TopBar/index.jsx index 5bbeeb4..c35b70c 100644 --- a/src/components/TopBar/index.jsx +++ b/src/components/TopBar/index.jsx @@ -14,6 +14,8 @@ import ListItem from '@mui/material/ListItem'; import ListItemButton from '@mui/material/ListItemButton'; import ListItemIcon from '@mui/material/ListItemIcon'; import ListItemText from '@mui/material/ListItemText'; +import Brightness5Icon from '@mui/icons-material/Brightness5'; +import Brightness7Icon from '@mui/icons-material/Brightness7'; import TravelExploreIcon from '@mui/icons-material/TravelExplore'; import SettingsIcon from '@mui/icons-material/Settings'; import AttachMoneyIcon from '@mui/icons-material/AttachMoney'; @@ -21,7 +23,7 @@ import InfoIcon from '@mui/icons-material/Info'; import { useNavigate } from 'react-router-dom'; import DrawerHeader from '../DrawerHeader'; import { MainContext } from '../../contexts/MainContextProvider'; -import { openWebSite } from '../../reducers/MainReducer/Actions'; +import { openWebSite, setThemeType } from '../../reducers/MainReducer/Actions'; const drawerWidth = 240; @@ -82,7 +84,8 @@ const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' ); const TopBar = () => { - const [state] = useContext(MainContext); + const [state, d1] = useContext(MainContext); + const { themeType, themeToggle } = state; const [open, setOpen] = useState(false); @@ -132,6 +135,13 @@ const TopBar = () => { handleDrawerClose(); }; + /** + * Change the theme style + */ + const changeThemeStyle = () => { + d1(setThemeType(themeType === 'dark' ? 'light' : 'dark')); + }; + return ( <> { > {language.applicationName} +
+ {themeToggle ? ( + + {themeType === 'dark' ? : } + + ) : null} diff --git a/src/contexts/MainContextProvider/index.jsx b/src/contexts/MainContextProvider/index.jsx index 77305ab..deefb23 100644 --- a/src/contexts/MainContextProvider/index.jsx +++ b/src/contexts/MainContextProvider/index.jsx @@ -16,6 +16,7 @@ const threads = localStorage.threads ? parseFloat(localStorage.threads) : 1; const timeout = localStorage.timeout ? parseFloat(localStorage.timeout) : 250; const noClosed = localStorage.noClosed ? (localStorage.noClosed === 'true') : false; const sort = localStorage.sort ? (localStorage.sort === 'true') : true; +const themeToggle = localStorage.themeToggle ? (localStorage.themeToggle === 'true') : true; const initState = { autoUpdate, @@ -44,6 +45,7 @@ const initState = { noClosed, sort, scanResults: null, + themeToggle, }; export const MainContext = createContext(initState); diff --git a/src/languages/en_us.json b/src/languages/en_us.json index 8811729..fc0af78 100644 --- a/src/languages/en_us.json +++ b/src/languages/en_us.json @@ -80,5 +80,6 @@ "exportType": "Export type", "export": "Export", "exportSuccessful": "Export successful", - "runningLatestVersion": "You are running the latest version." + "runningLatestVersion": "You are running the latest version.", + "themeToggleInTopBar": "Toggle theme in top bar" } diff --git a/src/languages/es_es.json b/src/languages/es_es.json index 4275513..81fefc4 100644 --- a/src/languages/es_es.json +++ b/src/languages/es_es.json @@ -80,5 +80,6 @@ "exportType": "Tipo de exportación", "export": "Exportar", "exportSuccessful": "Exportación exitosa", - "runningLatestVersion": "Estás ejecutando la última versión." + "runningLatestVersion": "Estás ejecutando la última versión.", + "themeToggleInTopBar": "Alternar tema en la barra superior" } diff --git a/src/languages/fr_fr.json b/src/languages/fr_fr.json index b25e537..65f23d0 100644 --- a/src/languages/fr_fr.json +++ b/src/languages/fr_fr.json @@ -80,5 +80,6 @@ "exportType": "Type d'exportation", "export": "Exporter", "exportSuccessful": "Exportation réussie", - "runningLatestVersion": "Vous utilisez la dernière version." + "runningLatestVersion": "Vous utilisez la dernière version.", + "themeToggleInTopBar": "Basculer le thème dans la barre supérieure" } diff --git a/src/languages/nl_nl.json b/src/languages/nl_nl.json index 73d7353..18af0ad 100644 --- a/src/languages/nl_nl.json +++ b/src/languages/nl_nl.json @@ -80,5 +80,6 @@ "exportType": "Export type", "export": "Exporteren", "exportSuccessful": "Exporteren succesvol", - "runningLatestVersion": "U gebruikt de laatste versie." + "runningLatestVersion": "U gebruikt de laatste versie.", + "themeToggleInTopBar": "Thema toggle in de bovenste balk" } diff --git a/src/languages/zh_cn.json b/src/languages/zh_cn.json index d3ba72e..e13a5ed 100644 --- a/src/languages/zh_cn.json +++ b/src/languages/zh_cn.json @@ -80,5 +80,6 @@ "exportType": "导出类型", "export": "出口", "exportSuccessful": "导出成功", - "runningLatestVersion": "您正在运行最新版本。" + "runningLatestVersion": "您正在运行最新版本。", + "themeToggleInTopBar": "在顶部栏中切换主题" } diff --git a/src/main.css b/src/main.css new file mode 100644 index 0000000..da92873 --- /dev/null +++ b/src/main.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} diff --git a/src/main.jsx b/src/main.jsx index 2370da4..93e1782 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,5 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; +import './main.css'; import App from './components/App'; import '@fontsource/roboto/300.css'; import '@fontsource/roboto/400.css'; diff --git a/src/reducers/MainReducer/Actions/actionTypes.js b/src/reducers/MainReducer/Actions/actionTypes.js index 76bd1ca..8fb0f9c 100644 --- a/src/reducers/MainReducer/Actions/actionTypes.js +++ b/src/reducers/MainReducer/Actions/actionTypes.js @@ -18,3 +18,4 @@ export const SET_TIMEOUT = 'SET_TIMEOUT'; export const SET_NO_CLOSED = 'SET_NO_CLOSED'; export const SET_SORT = 'SET_SORT'; export const SET_SCAN_RESULTS = 'SET_SCAN_RESULTS'; +export const SET_THEME_TOGGLE = 'SET_THEME_TOGGLE'; diff --git a/src/reducers/MainReducer/Actions/index.js b/src/reducers/MainReducer/Actions/index.js index fb2d9fd..b996336 100644 --- a/src/reducers/MainReducer/Actions/index.js +++ b/src/reducers/MainReducer/Actions/index.js @@ -16,6 +16,7 @@ import { SET_SORT, SET_START_PORT, SET_THEME_INDEX, + SET_THEME_TOGGLE, SET_THEME_TYPE, SET_THREADS, SET_TIMEOUT, @@ -145,3 +146,8 @@ export const setScanResults = (value) => ({ export const cancelScan = () => invoke('cancel_scan'); export const getNumberOfThreads = () => invoke('get_number_of_threads'); + +export const setThemeToggle = (value) => ({ + type: SET_THEME_TOGGLE, + payload: value, +}); diff --git a/src/reducers/MainReducer/index.js b/src/reducers/MainReducer/index.js index f584d77..0647bf5 100644 --- a/src/reducers/MainReducer/index.js +++ b/src/reducers/MainReducer/index.js @@ -19,6 +19,7 @@ import { SET_THREADS, SET_TIMEOUT, SET_UPDATE, + SET_THEME_TOGGLE, } from './Actions/actionTypes'; const MainReducer = (state, action) => { @@ -62,6 +63,7 @@ const MainReducer = (state, action) => { timeout: 300, noClosed: false, sort: true, + themeToggle: true, }; case SET_AUTO_UPDATE: localStorage.autoUpdate = action.payload; @@ -152,6 +154,12 @@ const MainReducer = (state, action) => { ...state, scanResults: action.payload, }; + case SET_THEME_TOGGLE: + localStorage.themeToggle = action.payload; + return { + ...state, + themeToggle: action.payload, + }; default: return state; } diff --git a/src/routes/Home/index.jsx b/src/routes/Home/index.jsx index 137d8e4..3652cd8 100644 --- a/src/routes/Home/index.jsx +++ b/src/routes/Home/index.jsx @@ -162,6 +162,12 @@ const Home = () => { res.forEach((e) => { toExport += `"${e.address.replace('"', '""')}","${e.port}","${e.hostName.replace('"', '""')}","${e.portStatus.replace('"', '""')}","${e.scanDate.replace('"', '""')}",\n`; }); + } else if (type === 'text/html') { + toExport = 'Advanced PortChecker'; + res.forEach((e) => { + toExport += ``; + }); + toExport += '
AddressPortHost NamePort StatusScan Date
${e.address}${e.port}${e.hostName}${e.portStatus}${e.scanDate}
'; } return toExport; @@ -179,6 +185,9 @@ const Home = () => { case 'application/json': ext = 'json'; break; + case 'text/html': + ext = 'html'; + break; default: ext = 'csv'; break; @@ -335,8 +344,7 @@ const Home = () => { @@ -385,6 +393,7 @@ const Home = () => { JSON CSV TXT + HTML diff --git a/src/routes/Settings/index.jsx b/src/routes/Settings/index.jsx index 9b0add0..8a8f89a 100644 --- a/src/routes/Settings/index.jsx +++ b/src/routes/Settings/index.jsx @@ -47,7 +47,7 @@ import { setNoClosed, setPageIndex, setSort, - setThemeIndex, + setThemeIndex, setThemeToggle, setThemeType, setThreads, setTimeout, @@ -63,7 +63,7 @@ const Settings = () => { const { languageIndex, autoUpdate, colorOnDark, themeIndex, themeType, - threads, timeout, noClosed, sort, + threads, timeout, noClosed, sort, themeToggle, } = state; const language = state.languages[languageIndex]; @@ -188,6 +188,16 @@ const Settings = () => { )} label={language.colorOnDark} /> + d1(setThemeToggle(e.target.checked))} + value="themeToggleSelector" + /> + )} + label={language.themeToggleInTopBar} + /> {language.language}