feat: new keybinds, language support etc

src/components/modals/Modals.jsx

@@ -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} 
       </>
     );
   }

src/components/modals/main/settings/sections/Appearance.jsx

@@ -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} />
     </>
   );

src/components/modals/main/settings/sections/Keybinds.jsx

@@ -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>
       </>
     );

src/components/widgets/background/Favourite.jsx

@@ -56,16 +56,11 @@ export default class Favourite extends PureComponent {
       return null;
     }
 
-    const favourite = <Tooltip title={window.language.modals.main.settings.sections.background.buttons.favourite}>{this.state.favourited}</Tooltip>;
-
-    if (window.keybinds.favouriteBackground && window.keybinds.favouriteBackground !== '') {
-      return (
-        <Hotkeys keyName={window.keybinds.favouriteBackground} onKeyDown={() => this.favourite()}>
-          {favourite}
-        </Hotkeys>
-      );
-    } else {
-      return favourite;
-    }
+    return (
+      <Tooltip title={window.language.modals.main.settings.sections.background.buttons.favourite}>
+        {this.state.favourited}
+        {window.keybinds.favouriteBackground && window.keybinds.favouriteBackground !== '' ? <Hotkeys keyName={window.keybinds.favouriteBackground} onKeyDown={() => this.favourite()} /> : null}
+      </Tooltip>
+    );
   }
 }

src/components/widgets/background/Maximise.jsx

@@ -55,20 +55,11 @@ export default class Maximise extends PureComponent {
   }
 
   render() {
-    const maximise = (
+    return (
       <Tooltip title={window.language.modals.main.settings.sections.background.buttons.view}>
         <Fullscreen onClick={this.maximise} className='topicons' />
+        {window.keybinds.maximiseBackground && window.keybinds.maximiseBackground !== '' ? <Hotkeys keyName={window.keybinds.maximiseBackground} onKeyDown={this.maximise} /> : null}
       </Tooltip>
     );
-
-    if (window.keybinds.maximiseBackground && window.keybinds.maximiseBackground !== '') {
-      return (
-        <Hotkeys keyName={window.keybinds.maximiseBackground} onKeyDown={() => this.maximise()}>
-          {maximise}
-        </Hotkeys>
-      );
-    } else {
-      return maximise;
-    }
   }
 }

src/components/widgets/background/PhotoInformation.jsx

@@ -1,5 +1,6 @@
 import { useState, Fragment } from 'react';
 import { Info, LocationOn, PhotoCamera, Crop as Resolution, Person as Photographer, GetApp as Download } from '@material-ui/icons';
+import Hotkeys from 'react-hot-keys';
 
 const toDataURL = async (url) => {
   const res = await fetch(url);
@@ -69,6 +70,24 @@ export default function PhotoInformation(props) {
     );
   }
 
+  const downloadEnabled = (localStorage.getItem('downloadbtn') === 'true') && !props.info.offline && !props.info.photographerURL;
+  const downloadBackground = () => { 
+    if (downloadEnabled) {
+      downloadImage(props.info);
+    }
+  };
+
+  const showBackgroundInformation = () => {
+    const element = document.querySelector('.infoCard');
+    if (element) {
+      if (element.style.display === 'none' || element.style.display === '') {
+        element.style.display = 'block';
+      } else {
+        element.style.display = 'none';
+      }
+    }
+  }
+
   return (
     <div className='photoInformation'>
       <h1>{photo} <span id='credit'>{credit}</span></h1>
@@ -90,13 +109,15 @@ export default function PhotoInformation(props) {
         <span id='infoResolution'>{width}x{height}</span>
         <Photographer/>
         <span>{photographer}</span>
-        {(localStorage.getItem('downloadbtn') === 'true') && !props.info.offline && !props.info.photographerURL ? 
+        {downloadEnabled ? 
           <>
             <Download/>
             <span className='download' onClick={() => downloadImage(props.info)}>{language.download}</span>
           </> 
         : null}
       </div>
+      {window.keybinds.downloadBackground && window.keybinds.downloadBackground !== '' ? <Hotkeys keyName={window.keybinds.downloadBackground} onKeyDown={() => downloadBackground()} /> : null}
+      {window.keybinds.showBackgroundInformation && window.keybinds.showBackgroundInformation !== '' ? <Hotkeys keyName={window.keybinds.showBackgroundInformation} onKeyDown={() => showBackgroundInformation()} /> : null}
     </div>
   );
 }

src/components/widgets/greeting/greeting.scss

@@ -3,5 +3,6 @@
   font-size: 1.6em;
   cursor: initial;
   user-select: none;
+
   --shadow-shift: 0.2rem;
 }

src/components/widgets/navbar/Notes.jsx

@@ -50,8 +50,8 @@ export default class Notes extends PureComponent {
   }
 
   render() {
-    const notes = (
-        <span id='noteContainer' className='notescontainer' style={{ visibility: this.state.visibility }}>
+    return (
+      <span id='noteContainer' className='notescontainer' style={{ visibility: this.state.visibility }}>
         <div className='topbarnotes'>
           <NotesRounded/>
           <h3>{this.language.title}</h3>
@@ -59,17 +59,9 @@ export default class Notes extends PureComponent {
         <TextareaAutosize rowsmax={50} placeholder={this.language.placeholder} value={this.state.notes} onChange={this.setNotes}/>
         <button onClick={() => this.pin()} className='pinNote'><PushPin/></button>
         <button onClick={() => this.copy()} className='copyNote'><FileCopyRounded/></button>
+        {window.keybinds.pinNotes && window.keybinds.pinNotes !== '' ? <Hotkeys keyName={window.keybinds.pinNotes} onKeyDown={() => this.pin()}/> : null}
+        {window.keybinds.copyNotes && window.keybinds.copyNotes !== '' ? <Hotkeys keyName={window.keybinds.copyNotes} onKeyDown={() => this.copy()}/> : null}
       </span>
     );
-    
-    if (window.keybinds.pinNotes && window.keybinds.pinNotes !== '') {
-      return (
-        <Hotkeys keyName={window.keybinds.pinNotes} onKeyDown={() => this.pin()}>
-          {notes}
-        </Hotkeys>
-      );
-    } else {
-      return notes;
-    }
   }
 }

src/components/widgets/quicklinks/QuickLinks.jsx

@@ -1,5 +1,6 @@
 import { PureComponent } from 'react';
 import { TextareaAutosize } from '@material-ui/core';
+import Hotkeys from 'react-hot-keys';
 
 import Tooltip from '../../helpers/tooltip/Tooltip';
 
@@ -178,6 +179,7 @@ export default class QuickLinks extends PureComponent {
             <button className='pinNote' onClick={this.addLink}>{this.language.add}</button>
           </div>
         </span>
+        {window.keybinds.toggleQuicklinks && window.keybinds.toggleQuicklinks !== '' ? <Hotkeys keyName={window.keybinds.toggleQuicklinks} onKeyDown={this.toggleAdd} /> : null}
       </div>
     );
   }

src/components/widgets/quote/Quote.jsx

@@ -1,6 +1,7 @@
 import { PureComponent } from 'react';
 import { FilterNone as FileCopy, Twitter, Star, StarBorder } from '@material-ui/icons';
 import { toast } from 'react-toastify';
+import Hotkeys from 'react-hot-keys';
 
 import Interval from '../../../modules/helpers/interval';
 import EventBus from '../../../modules/helpers/eventbus';
@@ -259,6 +260,9 @@ export default class Quote extends PureComponent {
           <br/>
           {this.state.copy} {this.state.tweet} {this.state.favourited}
         </h1>
+        {window.keybinds.favouriteQuote && window.keybinds.favouriteQuote !== '' ? <Hotkeys keyName={window.keybinds.favouriteQuote} onKeyDown={() => this.favourite()} /> : null}
+        {window.keybinds.tweetQuote && window.keybinds.tweetQuote !== '' ? <Hotkeys keyName={window.keybinds.tweetQuote} onKeyDown={() => this.tweetQuote()} /> : null}
+        {window.keybinds.copyQuote && window.keybinds.copyQuote !== '' ? <Hotkeys keyName={window.keybinds.copyQuote} onKeyDown={() => this.copyQuote()} /> : null}
       </div>
     );
   }

src/components/widgets/quote/quote.scss

@@ -5,6 +5,7 @@
   text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   cursor: initial;
   user-select: none;
+
 	--shadow-shift: 0.125rem;
 }
 
@@ -19,6 +20,7 @@
   font-size: 0.9em;
   letter-spacing: 0.5px;
   user-select: none;
+
 	--shadow-shift: 0.125rem;
 
   svg {

src/components/widgets/search/Search.jsx

@@ -1,5 +1,6 @@
 import { PureComponent } from 'react';
 import { Search as SearchIcon, Mic } from '@material-ui/icons';
+import Hotkeys from 'react-hot-keys';
 
 import AutocompleteInput from '../../helpers/autocomplete/Autocomplete';
 
@@ -135,6 +136,7 @@ export default class Search extends PureComponent {
         {this.state.microphone}
         <SearchIcon onClick={this.searchButton}/>
         <AutocompleteInput placeholder={this.language} id='searchtext' suggestions={this.state.suggestions} onChange={(e) => this.getSuggestions(e)} onClick={this.searchButton}/>
+        {window.keybinds.focusSearch && window.keybinds.focusSearch !== '' ? <Hotkeys keyName={window.keybinds.focusSearch} onKeyDown={() => document.getElementById('searchtext').focus()}/> : null}
       </form>
     );
   }

src/components/widgets/time/clock.scss

@@ -5,6 +5,7 @@
   margin: 0;
   cursor: initial;
   user-select: none;
+
   --shadow-shift: 0.4rem;
 }
 

src/components/widgets/time/date.scss

@@ -3,4 +3,6 @@
   user-select: none;
   text-transform: capitalize;
   font-weight: bold;
+
+  --shadow-shift: 0.125rem;
 }