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')