diff --git a/package.json b/package.json
index a6c99edc..3c27395d 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
"react-clock": "3.0.0",
"react-color-gradient-picker": "0.1.2",
"react-dom": "17.0.2",
+ "react-hot-keys": "^2.6.2",
"react-modal": "3.14.3",
"react-sortable-hoc": "2.0.0",
"react-toastify": "7.0.4",
diff --git a/src/components/modals/main/settings/sections/Keybinds.jsx b/src/components/modals/main/settings/sections/Keybinds.jsx
new file mode 100644
index 00000000..e47c02ec
--- /dev/null
+++ b/src/components/modals/main/settings/sections/Keybinds.jsx
@@ -0,0 +1,82 @@
+import { PureComponent } from 'react';
+
+import Checkbox from '../Checkbox';
+
+export default class KeybindSettings extends PureComponent {
+ constructor() {
+ super();
+ this.state = {
+ keybinds: JSON.parse(localStorage.getItem('keybinds')) || {}
+ };
+ this.language = window.language.modals.main.settings;
+ }
+
+ listen(type) {
+ let currentKeybinds = this.state.keybinds;
+ currentKeybinds[type] = 'Recording...';
+ this.setState({
+ keybinds: currentKeybinds
+ });
+ this.forceUpdate();
+
+ let keys = '';
+ const keydown = document.addEventListener('keydown', (event) => {
+ if (keys === '') {
+ keys = event.key;
+ } else {
+ keys = `${keys}+${event.key}`;
+ }
+ });
+
+ const keyup = document.addEventListener('keyup', () => {
+ document.removeEventListener('keydown', keydown);
+ let keybinds = this.state.keybinds;
+ keybinds[type] = keys;
+ localStorage.setItem('keybinds', JSON.stringify(keybinds));
+ this.setState({
+ keybinds: JSON.parse(localStorage.getItem('keybinds')) || {}
+ });
+ });
+
+ document.removeEventListener('keyup', keyup);
+
+ document.querySelector('.reminder-info').style.display = 'block';
+ return localStorage.setItem('showReminder', true);
+ }
+
+ reset(type) {
+ let keybinds = this.state.keybinds;
+ keybinds[type] = '';
+ localStorage.setItem('keybinds', JSON.stringify(keybinds));
+ this.setState({
+ keybinds: JSON.parse(localStorage.getItem('keybinds')) || {}
+ });
+
+ document.querySelector('.reminder-info').style.display = 'block';
+ return localStorage.setItem('showReminder', true);
+ }
+
+ render() {
+ return (
+ <>
+
Keybinds
+
+
+
Favourite Background
+
this.listen('favouriteBackground')} value={this.state.keybinds['favouriteBackground'] || ''} readOnly/>
+
this.reset('favouriteBackground')}>Reset
+
+
+
Maximise Background
+
this.listen('maximiseBackground')} value={this.state.keybinds['maximiseBackground'] || ''} readOnly/>
+
this.reset('maximiseBackground')}>Reset
+
+
+
Pin Notes
+
this.listen('pinNotes')} value={this.state.keybinds['pinNotes'] || ''} readOnly/>
+
this.reset('pinNotes')}>Reset
+
+ >
+ );
+ }
+}
diff --git a/src/components/modals/main/tabs/Settings.jsx b/src/components/modals/main/tabs/Settings.jsx
index 08be407b..967e7a9d 100644
--- a/src/components/modals/main/tabs/Settings.jsx
+++ b/src/components/modals/main/tabs/Settings.jsx
@@ -15,6 +15,7 @@ import Experimental from '../settings/sections/Experimental';
import QuickLinks from '../settings/sections/QuickLinks';
import Weather from '../settings/sections/Weather';
import Stats from '../settings/sections/Stats';
+import Keybinds from '../settings/sections/Keybinds';
export default function Settings() {
const { reminder, sections } = window.language.modals.main.settings;
@@ -34,6 +35,7 @@ export default function Settings() {
+
diff --git a/src/components/modals/main/tabs/backend/Tab.jsx b/src/components/modals/main/tabs/backend/Tab.jsx
index 88c3b8d5..46cd1342 100644
--- a/src/components/modals/main/tabs/backend/Tab.jsx
+++ b/src/components/modals/main/tabs/backend/Tab.jsx
@@ -20,7 +20,8 @@ import {
AssessmentOutlined as Stats,
Code as Sideload,
AddCircleOutline as Added,
- CreateNewFolderOutlined as Create
+ CreateNewFolderOutlined as Create,
+ KeyboardAltOutlined as Keybinds
} from '@material-ui/icons';
function Tab(props) {
@@ -58,6 +59,7 @@ function Tab(props) {
case settings.order.title: icon = ; break;
case settings.language.title: icon = ; divider = true; break;
case settings.advanced.title: icon = ; break;
+ case 'Keybinds': icon = ; break;
case settings.stats.title: icon = ; break;
case settings.experimental.title: icon = ; divider = true; break;
case settings.changelog: icon = ; break;
diff --git a/src/components/widgets/background/Favourite.jsx b/src/components/widgets/background/Favourite.jsx
index 2cf94895..f6c0751e 100644
--- a/src/components/widgets/background/Favourite.jsx
+++ b/src/components/widgets/background/Favourite.jsx
@@ -1,5 +1,6 @@
import { PureComponent } from 'react';
import { Star, StarBorder } from '@material-ui/icons';
+import Hotkeys from 'react-hot-keys';
import Tooltip from '../../helpers/tooltip/Tooltip';
@@ -55,6 +56,16 @@ export default class Favourite extends PureComponent {
return null;
}
- return {this.state.favourited};
+ const favourite = {this.state.favourited};
+
+ if (window.keybinds.favouriteBackground && window.keybinds.favouriteBackground !== '') {
+ return (
+ this.favourite()}>
+ {favourite}
+
+ );
+ } else {
+ return favourite;
+ }
}
}
diff --git a/src/components/widgets/background/Maximise.jsx b/src/components/widgets/background/Maximise.jsx
index 076d31e7..27abb85d 100644
--- a/src/components/widgets/background/Maximise.jsx
+++ b/src/components/widgets/background/Maximise.jsx
@@ -1,5 +1,6 @@
import { PureComponent } from 'react';
import { Fullscreen } from '@material-ui/icons';
+import Hotkeys from 'react-hot-keys';
import Tooltip from '../../helpers/tooltip/Tooltip';
@@ -54,10 +55,20 @@ export default class Maximise extends PureComponent {
}
render() {
- return (
+ const maximise = (
);
+
+ if (window.keybinds.maximiseBackground && window.keybinds.maximiseBackground !== '') {
+ return (
+ this.maximise()}>
+ {maximise}
+
+ );
+ } else {
+ return maximise;
+ }
}
}
diff --git a/src/components/widgets/navbar/Notes.jsx b/src/components/widgets/navbar/Notes.jsx
index d1a57c56..f5db45f4 100644
--- a/src/components/widgets/navbar/Notes.jsx
+++ b/src/components/widgets/navbar/Notes.jsx
@@ -2,6 +2,7 @@ import { PureComponent } from 'react';
import { FileCopyRounded, AssignmentRounded as NotesRounded, PushPin }from '@material-ui/icons';
import TextareaAutosize from '@material-ui/core/TextareaAutosize';
import { toast } from 'react-toastify';
+import Hotkeys from 'react-hot-keys';
export default class Notes extends PureComponent {
constructor() {
@@ -49,8 +50,8 @@ export default class Notes extends PureComponent {
}
render() {
- return (
-
+ const notes = (
+
{this.language.title}
@@ -60,5 +61,15 @@ export default class Notes extends PureComponent {
);
+
+ if (window.keybinds.pinNotes && window.keybinds.pinNotes !== '') {
+ return (
+
this.pin()}>
+ {notes}
+
+ );
+ } else {
+ return notes;
+ }
}
}
diff --git a/src/index.js b/src/index.js
index 7004542a..3610302c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -37,6 +37,12 @@ if (localStorage.getItem('stats') === 'true') {
};
}
+if (localStorage.getItem('keybindsEnabled') === 'true') {
+ window.keybinds = JSON.parse(localStorage.getItem('keybinds') || '{}');
+} else {
+ window.keybinds = {};
+}
+
render(
,
document.getElementById('root')