feat: new keybinds, language support etc

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;
 }