mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-17 22:14:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: new keybinds, language support etc

Browse Source
This commit is contained in:
David Ralph
2021-08-25 13:28:41 +01:00
parent 4a4e4604e8
commit 10f27d24b0
26 changed files with 348 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/modals/Modals.jsx
View File

@@ -1,5 +1,6 @@
import { PureComponent, Suspense, lazy } from 'react';
import Modal from 'react-modal';
import Hotkeys from 'react-hot-keys';
import Main from './main/Main';
import Feedback from './feedback/Feedback';
@@ -69,6 +70,7 @@ export default class Modals extends PureComponent {
<Feedback modalClose={() => this.toggleModal('feedbackModal', false)}/>
</Modal>
</Suspense>
{window.keybinds.toggleModal && window.keybinds.toggleModal !== '' ? <Hotkeys keyName={window.keybinds.toggleModal} onKeyDown={() => this.toggleModal('mainModal', (this.state.mainModal === true ? false : true))}/> : null}
</>
);
}

4
src/components/modals/main/settings/sections/Appearance.jsx
View File

@@ -55,8 +55,8 @@ export default function AppearanceSettings() {
</Dropdown>
<h3>{appearance.accessibility.title}</h3>
<Checkbox text='Widget Text Border' name='textBorder' category='other'/>
<Checkbox text='Animations' name='animations' category='other'/>
<Checkbox text={appearance.accessibility.text_shadow} name='textBorder' category='other'/>
<Checkbox text={appearance.accessibility.animations} name='animations' category='other'/>
<Slider title={appearance.accessibility.toast_duration} name='toastDisplayTime' default='2500' step='100' min='500' max='5000' toast={true} display={' ' + appearance.accessibility.milliseconds} />
</>
);

75
src/components/modals/main/settings/sections/Keybinds.jsx
View File

@@ -12,8 +12,8 @@ export default class KeybindSettings extends PureComponent {
}
listen(type) {
let currentKeybinds = this.state.keybinds;
currentKeybinds[type] = 'Recording...';
const currentKeybinds = this.state.keybinds;
currentKeybinds[type] = this.language.sections.keybinds.recording;
this.setState({
keybinds: currentKeybinds
});
@@ -30,7 +30,7 @@ export default class KeybindSettings extends PureComponent {
const keyup = document.addEventListener('keyup', () => {
document.removeEventListener('keydown', keydown);
let keybinds = this.state.keybinds;
const keybinds = this.state.keybinds;
keybinds[type] = keys;
localStorage.setItem('keybinds', JSON.stringify(keybinds));
this.setState({
@@ -57,24 +57,71 @@ export default class KeybindSettings extends PureComponent {
}
render() {
const { keybinds } = this.language.sections;
return (
<>
<h2>Keybinds</h2>
<Checkbox name='keybindsEnabled' text='Enabled' element='.other' />
<div className='keybind'>
<p>Favourite Background</p>
<h2>{keybinds.title}</h2>
<Checkbox name='keybindsEnabled' text={this.language.enabled} element='.other' />
<div>
<p>{keybinds.background.favourite}</p>
<input type='text' onClick={() => this.listen('favouriteBackground')} value={this.state.keybinds['favouriteBackground'] || ''} readOnly/>
<span className='modalLink' onClick={() => this.reset('favouriteBackground')}>Reset</span>
<span className='modalLink' onClick={() => this.reset('favouriteBackground')}>{this.language.buttons.reset}</span>
</div>
<div className='keybind'>
<p>Maximise Background</p>
<div>
<p>{keybinds.background.maximise}</p>
<input type='text' onClick={() => this.listen('maximiseBackground')} value={this.state.keybinds['maximiseBackground'] || ''} readOnly/>
<span className='modalLink' onClick={() => this.reset('maximiseBackground')}>Reset</span>
<span className='modalLink' onClick={() => this.reset('maximiseBackground')}>{this.language.buttons.reset}</span>
</div>
<div className='keybind'>
<p>Pin Notes</p>
<div>
<p>{keybinds.background.download}</p>
<input type='text' onClick={() => this.listen('downloadBackground')} value={this.state.keybinds['downloadBackground'] || ''} readOnly/>
<span className='modalLink' onClick={() => this.reset('downloadBackground')}>{this.language.buttons.reset}</span>
</div>
<div>
<p>{keybinds.background.show_info}</p>
<input type='text' onClick={() => this.listen('showBackgroundInformation')} value={this.state.keybinds['showBackgroundInformation'] || ''} readOnly/>
<span className='modalLink' onClick={() => this.reset('showBackgroundInformation')}>{this.language.buttons.reset}</span>
</div>
<div>
<p>{keybinds.quote.favourite}</p>
<input type='text' onClick={() => this.listen('favouriteQuote')} value={this.state.keybinds['favouriteQuote'] || ''} readOnly/>
<span className='modalLink' onClick={() => this.reset('favouriteQuote')}>{this.language.buttons.reset}</span>
</div>
<div>
<p>{keybinds.quote.copy}</p>
<input type='text' onClick={() => this.listen('copyQuote')} value={this.state.keybinds['copyQuote'] || ''} readOnly/>
<span className='modalLink' onClick={() => this.reset('copyQuote')}>{this.language.buttons.reset}</span>
</div>
<div>
<p>{keybinds.quote.tweet}</p>
<input type='text' onClick={() => this.listen('tweetQuote')} value={this.state.keybinds['tweetQuote'] || ''} readOnly/>
<span className='modalLink' onClick={() => this.reset('tweetQuote')}>{this.language.buttons.reset}</span>
</div>
<div>
<p>{keybinds.notes.pin}</p>
<input type='text' onClick={() => this.listen('pinNotes')} value={this.state.keybinds['pinNotes'] || ''} readOnly/>
<span className='modalLink' onClick={() => this.reset('pinNotes')}>Reset</span>
<span className='modalLink' onClick={() => this.reset('pinNotes')}>{this.language.buttons.reset}</span>
</div>
<div>
<p>{keybinds.notes.copy}</p>
<input type='text' onClick={() => this.listen('copyNotes')} value={this.state.keybinds['copyNotes'] || ''} readOnly/>
<span className='modalLink' onClick={() => this.reset('copyNotes')}>{this.language.buttons.reset}</span>
</div>
<div>
<p>{keybinds.search}</p>
<input type='text' onClick={() => this.listen('focusSearch')} value={this.state.keybinds['focusSearch'] || ''} readOnly/>
<span className='modalLink' onClick={() => this.reset('focusSearch')}>{this.language.buttons.reset}</span>
</div>
<div>
<p>{keybinds.quicklinks}</p>
<input type='text' onClick={() => this.listen('toggleQuicklinks')} value={this.state.keybinds['toggleQuicklinks'] || ''} readOnly/>
<span className='modalLink' onClick={() => this.reset('toggleQuicklinks')}>{this.language.buttons.reset}</span>
</div>
<div>
<p>{keybinds.modal}</p>
<input type='text' onClick={() => this.listen('toggleModal')} value={this.state.keybinds['toggleModal'] || ''} readOnly/>
<span className='modalLink' onClick={() => this.reset('toggleModal')}>{this.language.buttons.reset}</span>
</div>
</>
);