Merge pull request #31 from CodeDead/feature/theme-switch

Feature/theme switch

Author: CodeDead

.eslintignore

@@ -4,3 +4,4 @@ node_modules
 build
 src/serviceWorker.js
 README.md
+.eslintcache

.gitignore

@@ -33,3 +33,5 @@ dist/*
 !.yarn/sdks
 !.yarn/versions
 .pnp.*
+
+.eslintcache

public/electron.js

@@ -15,6 +15,7 @@ const createWindow = () => {
   mainWindow = new BrowserWindow({
     webPreferences: {
       nodeIntegration: true,
+      contextIsolation: false,
     },
     frame: false,
     title: 'DeadHash',
@@ -26,13 +27,13 @@ const createWindow = () => {
   fileWorkerWindow = new BrowserWindow({
     show: isDev,
     icon: path.join(__dirname, '../build/logo512.png'),
-    webPreferences: { nodeIntegration: true },
+    webPreferences: { nodeIntegration: true, contextIsolation: false },
   });
 
   textWorkerWindow = new BrowserWindow({
     show: isDev,
     icon: path.join(__dirname, '../build/logo512.png'),
-    webPreferences: { nodeIntegration: true },
+    webPreferences: { nodeIntegration: true, contextIsolation: false },
   });
 
   if (isDev) {

src/components/App/index.jsx

@@ -26,20 +26,14 @@ const App = () => {
   const [, dispatch] = useContext(CryptoContext);
 
   const enabled = state.canDragDrop;
-  let { themeIndex } = state;
-
-  let themeType = 'light';
-  if (themeIndex === 8) {
-    themeType = 'dark';
-    themeIndex = 2;
-  }
+  const { themeIndex, themeStyle } = state;
 
   const color = ThemeSelector(themeIndex);
 
   const theme = createMuiTheme({
     palette: {
       primary: color,
-      type: themeType,
+      type: themeStyle,
     },
   });
 

src/components/CopyPasteMenu/index.jsx

@@ -1,28 +1,52 @@
 import React from 'react';
-import { Item, Menu, MenuProvider } from 'react-contexify';
+import { Item, Menu, useContextMenu } from 'react-contexify';
 import CopyIcon from '@material-ui/icons/FileCopy';
 import PasteIcon from '@material-ui/icons/Assignment';
 
 const CopyPasteMenu = ({
   id, children, copyData, pasteData, copy, paste,
-}) => (
-  <>
-    <MenuProvider id={`copyPasteMenu${id}`} style={{ width: '100%' }}>
-      {children}
-    </MenuProvider>
-    <Menu id={`copyPasteMenu${id}`}>
-      <Item onClick={() => copyData()}>
-        <CopyIcon />
-        {' '}
-        {copy}
-      </Item>
-      <Item onClick={() => pasteData()}>
-        <PasteIcon />
-        {' '}
-        {paste}
-      </Item>
-    </Menu>
-  </>
-);
+}) => {
+  const MENU_ID = `copyPasteMenu${id}`;
+
+  const { show } = useContextMenu({
+    id: MENU_ID,
+  });
+
+  /**
+   * Handle the context menu event
+   * @param event The event argument
+   */
+  const handleContextMenu = (event) => {
+    event.preventDefault();
+    show(event, {
+      props: {
+        key: 'value',
+      },
+    });
+  };
+
+  return (
+    <>
+      <div
+        style={{ width: '100%' }}
+        onContextMenu={handleContextMenu}
+      >
+        {children}
+      </div>
+      <Menu id={MENU_ID}>
+        <Item onClick={() => copyData()}>
+          <CopyIcon />
+          {' '}
+          {copy}
+        </Item>
+        <Item onClick={() => pasteData()}>
+          <PasteIcon />
+          {' '}
+          {paste}
+        </Item>
+      </Menu>
+    </>
+  );
+};
 
 export default CopyPasteMenu;

src/components/Hash/index.jsx

@@ -3,7 +3,7 @@ import Paper from '@material-ui/core/Paper';
 import { makeStyles } from '@material-ui/core';
 import Typography from '@material-ui/core/Typography';
 import CheckIcon from '@material-ui/icons/Check';
-import { Menu, Item, MenuProvider } from 'react-contexify';
+import { Menu, Item, useContextMenu } from 'react-contexify';
 import 'react-contexify/dist/ReactContexify.min.css';
 import CopyIcon from '@material-ui/icons/FileCopy';
 
@@ -19,6 +19,7 @@ const useStyles = makeStyles((theme) => ({
 const Hash = ({
   hashType, content, compareString, id, copy,
 }) => {
+  const MENU_ID = `hashMenu${id}`;
   const classes = useStyles();
 
   let compareColor = null;
@@ -28,15 +29,32 @@ const Hash = ({
     compareColor = { color: 'green' };
   }
 
+  const { show } = useContextMenu({
+    id: MENU_ID,
+  });
+
+  /**
+   * Handle the context menu event
+   * @param event The event argument
+   */
+  const handleContextMenu = (event) => {
+    event.preventDefault();
+    show(event, {
+      props: {
+        key: 'value',
+      },
+    });
+  };
+
   return (
     <Paper className={classes.paper}>
       <Typography variant="subtitle1" color="primary" gutterBottom>
         {hashType}
         {compareIcon}
       </Typography>
-      <MenuProvider id={`hashMenu${id}`}>
+      <div onContextMenu={handleContextMenu}>
         <span style={compareColor}>{content}</span>
-      </MenuProvider>
+      </div>
       <Menu id={`hashMenu${id}`}>
         <Item onClick={() => navigator.clipboard.writeText(content)}>
           <CopyIcon />

src/contexts/MainContextProvider/index.jsx

@@ -22,6 +22,7 @@ import ru_RU from '../../languages/ru_RU';
 import tr_TR from '../../languages/tr_TR';
 
 const languageIndex = localStorage.languageIndex ? parseFloat(localStorage.languageIndex) : 1;
+const themeStyle = localStorage.themeStyle ? localStorage.themeStyle : 'light';
 const themeIndex = localStorage.themeIndex ? parseFloat(localStorage.themeIndex) : 0;
 const autoUpdate = localStorage.autoUpdate && localStorage.autoUpdate === 'true' ? true : !localStorage.autoUpdate;
 const minimizeEnabled = localStorage.minimizeEnabled && localStorage.minimizeEnabled === 'true' ? true : !localStorage.minimizeEnabled;
@@ -45,6 +46,7 @@ const initState = {
   ],
   drawerOpen: false,
   selectedListItem: 0,
+  themeStyle,
   themeIndex,
   autoUpdate,
   checkedForUpdates: false,

src/languages/de_DE/index.js

@@ -68,15 +68,18 @@ const de_DE = () => ({
   maximizeEnabled: 'Schaltfläche "Maximieren"',
   languageEnabled: 'Schaltfläche "Sprache"',
   exit: 'Schließen',
-  darkTheme: 'Dunkel',
-  darkThemeDescription: 'Schont die Augen.',
   export: 'Export',
   yourTextHere: 'Dein Text hier',
   filePath: 'Dateipfad',
   yes: 'Ja',
   no: 'Nein',
   confirmation: 'Bestätigung',
   confirmResetSettings: 'Möchten Sie wirklich alle Einstellungen zurücksetzen?',
+  themeStyle: 'Themenstil',
+  light: 'Licht',
+  dark: 'Dunkel',
+  orange: 'Orange',
+  orangeThemeDescription: 'Lass uns Niederländisch werden.',
 });
 
 // eslint-disable-next-line camelcase

src/languages/en_US/index.js

@@ -68,15 +68,18 @@ const en_US = () => ({
   maximizeEnabled: 'Maximize button',
   languageEnabled: 'Language button',
   exit: 'Exit',
-  darkTheme: 'Dark',
-  darkThemeDescription: 'Easy on the eyes.',
   export: 'Export',
   yourTextHere: 'Your text here',
   filePath: 'File path',
   yes: 'Yes',
   no: 'No',
   confirmation: 'Confirmation',
   confirmResetSettings: 'Are you sure you want to reset all settings?',
+  themeStyle: 'Theme style',
+  light: 'Light',
+  dark: 'Dark',
+  orange: 'Orange',
+  orangeThemeDescription: 'Let\'s get Dutch.',
 });
 
 // eslint-disable-next-line camelcase

src/languages/es_ES/index.js

@@ -68,15 +68,18 @@ const es_ES = () => ({
   maximizeEnabled: 'Botón Maximizar',
   languageEnabled: 'Botón de idioma',
   exit: 'Salida',
-  darkTheme: 'Oscuro',
-  darkThemeDescription: 'Fácil para los ojos.',
   export: 'Exportar',
   yourTextHere: 'Tu texto aqui',
   filePath: 'Ruta de archivo',
   yes: 'Sí',
   no: 'No',
   confirmation: 'Confirmación',
   confirmResetSettings: '¿Estás seguro de que quieres restablecer todos los ajustes?',
+  themeStyle: 'Estilo del tema',
+  light: 'Ligero',
+  dark: 'Oscuro',
+  orange: 'Naranja',
+  orangeThemeDescription: 'Vamos a holandeses.',
 });
 
 // eslint-disable-next-line camelcase