feat: debug timeout option, translation support for many things and improve sliders

src/components/modals/main/settings/Radio.jsx

@@ -29,9 +29,9 @@ export default class Radio extends React.PureComponent {
       <FormControl component='fieldset'>
         <FormLabel className='radio-title' component='legend'>{this.props.title}</FormLabel>
         <RadioGroup aria-label={this.props.name} name={this.props.name} onChange={this.handleChange} value={this.state.value}>
-          {this.props.options.map(option =>
+          {this.props.options.map(option => (
             <FormControlLabel value={option.value} control={<RadioUI/>} label={option.name} key={option.name} />
-          )}
+          ))}
         </RadioGroup>
       </FormControl>
     );

src/components/modals/main/settings/Slider.jsx

@@ -33,7 +33,7 @@ export default class Slider extends React.PureComponent {
     return (
       <>
         <p>{this.props.title} ({this.state.value}{this.props.display}) <span className='modalLink' onClick={this.resetItem}>{this.language.buttons.reset}</span></p>
-        <input className='range' type='range' min={this.props.min} max={this.props.max} value={this.state.value} onChange={this.handleChange} />
+        <input className='range' type='range' min={this.props.min} max={this.props.max} step={this.props.step || 1} value={this.state.value} onChange={this.handleChange} />
       </>
     );
   }

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

@@ -74,24 +74,24 @@ export default class About extends React.PureComponent {
         <p>Undraw ({this.language.resources_used.welcome_img})</p>
         <h3>{this.language.contributors}</h3>
         {this.state.loading}
-        {this.state.contributors.map((item) =>
+        {this.state.contributors.map((item) => (
           <Tooltip title={item.login} placement='top' key={item.login}>
             <a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=128'} alt={item.login}></img></a>
           </Tooltip>
-        )}
+        ))}
         { // for those who contributed without opening a pull request
-        this.state.other_contributors.map((item) =>
+        this.state.other_contributors.map((item) => (
           <Tooltip title={item.login} placement='top' key={item.login}>
             <a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=128'} alt={item.login}></img></a>
           </Tooltip>
-        )}
+        ))}
         <h3>{this.language.supporters}</h3>
         {this.state.loading}
-        {this.state.sponsors.map((item) =>
+        {this.state.sponsors.map((item) => (
           <Tooltip title={item.handle} placement='top' key={item.handle}>
             <a href={item.profile} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar + '&size=128'} alt={item.handle}></img></a>
           </Tooltip>
-        )}
+        ))}
         <h3>{this.language.photographers}</h3>
         {this.state.loading}
         <p>{this.state.photographers}</p>

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

@@ -41,16 +41,16 @@ export default class AdvancedSettings extends React.PureComponent {
         <button className='reset' onClick={() => this.setState({ resetModal: true })}>{this.language.buttons.reset}</button>
         <button className='export' onClick={() => SettingsFunctions.exportSettings()}>{this.language.buttons.export}</button>
         <button className='import' onClick={() => document.getElementById('file-input').click()}>{this.language.buttons.import}</button>
-        <FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => this.settingsImport(e)} />
+        <FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => this.settingsImport(e)}/>
 
         <h3>{advanced.customisation}</h3>
         <Text title={advanced.custom_js} name='customjs' textarea={true}/>
         <Text title={advanced.custom_css} name='customcss' textarea={true}/>
-        <Text title='Tab Name' name='tabName'/>
+        <Text title={advanced.tab_name} name='tabName'/>
 
         <h3>{this.language.sections.experimental.title}</h3>
         <p>{advanced.experimental_warning}</p>
-        <Checkbox name='experimental' text={this.language.enabled} />
+        <Checkbox name='experimental' text={this.language.enabled}/>
 
         <Modal onRequestClose={() => this.setState({ resetModal: false })} isOpen={this.state.resetModal} className={'Modal resetmodal'} overlayClassName={'Overlay resetoverlay'} ariaHideApp={false}>
           <ResetModal modalClose={() => this.setState({ resetModal: false })} />

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

@@ -13,15 +13,15 @@ export default function AppearanceSettings() {
 
   const themeOptions = [
     {
-      'name': 'Auto',
+      'name': appearance.theme.auto,
       'value': 'auto'
     },
     {
-      'name': 'Light',
+      'name': appearance.theme.light,
       'value': 'light'
     }, 
     {
-      'name': 'Dark',
+      'name': appearance.theme.dark,
       'value': 'dark'
     }
   ];
@@ -29,7 +29,7 @@ export default function AppearanceSettings() {
   return (
     <>
       <h2>{appearance.title}</h2>
-      <Radio name='theme' title='Theme' options={themeOptions} />
+      <Radio name='theme' title={appearance.theme.title} options={themeOptions} />
 
       <h3>{appearance.navbar.title}</h3>
       <Checkbox name='notesEnabled' text={appearance.navbar.notes} />
@@ -39,29 +39,29 @@ export default function AppearanceSettings() {
       <Text title={appearance.font.custom} name='font' upperCaseFirst={true} />
       <br/>
       <Checkbox name='fontGoogle' text={appearance.font.google} />
-      <Dropdown label='Font Weight' name='fontweight'>
+      <Dropdown label={appearance.font.weight.title} name='fontweight'>
         {/* names are taken from https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */}
-        <option value='100'>Thin</option>
+        <option value='100'>{appearance.font.weight.thin}</option>
-        <option value='200'>Extra-Light</option>
+        <option value='200'>{appearance.font.weight.extra_light}</option>
-        <option value='300'>Light</option>
+        <option value='300'>{appearance.font.weight.light}</option>
-        <option value='400'>Normal</option>
+        <option value='400'>{appearance.font.weight.normal}</option>
-        <option value='500'>Medium</option>
+        <option value='500'>{appearance.font.weight.medium}</option>
-        <option value='600'>Semi-Bold</option>
+        <option value='600'>{appearance.font.weight.semi_bold}</option>
-        <option value='700'>Bold</option>
+        <option value='700'>{appearance.font.weight.bold}</option>
-        <option value='800'>Extra-Bold</option>
+        <option value='800'>{appearance.font.weight.extra_bold}</option>
       </Dropdown>
       <br/><br/>
-      <Dropdown label='Font Style' name='fontstyle'>
+      <Dropdown label={appearance.font.style.title} name='fontstyle'>
-        <option value='normal'>Normal</option>
+        <option value='normal'>{appearance.font.style.normal}</option>
-        <option value='italic'>Italic</option>
+        <option value='italic'>{appearance.font.style.italic}</option>
-        <option value='oblique'>Oblique</option>
+        <option value='oblique'>{appearance.font.style.oblique}</option>
       </Dropdown>
 
       <h3>{appearance.accessibility.title}</h3>
       {(engineName === 'Blink') ? 
         <Slider title={appearance.accessibility.widget_zoom} name='widgetzoom' default='100' min='50' max='200' display='%'/> 
       : null}
-      <Slider title={appearance.accessibility.toast_duration} name='toastDisplayTime' default='2500' min='500' max='5000' display={' ' + appearance.accessibility.milliseconds} />
+      <Slider title={appearance.accessibility.toast_duration} name='toastDisplayTime' default='2500' step='100' min='500' max='5000' display={' ' + appearance.accessibility.milliseconds} />
     </>
   );
 }

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

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import Checkbox from '../Checkbox';
+import Slider from '../Slider';
 //import Text from '../Text';
 
 export default function ExperimentalSettings() {
@@ -13,6 +14,7 @@ export default function ExperimentalSettings() {
       <Checkbox name='animations' text={window.language.modals.main.settings.sections.appearance.animations}/>
       <h3>{experimental.developer}</h3>
       <Checkbox name='debug' text='Debug hotkey (Ctrl + #)'/>
+      <Slider title='Debug timeout' name='debugtimeout' min='0' max='5000' default='0' step='100' display=' miliseconds' />
       {/* <Checkbox name='beta' text='Beta Mode Override'/>
       <Text name='api_override' title='Version Override (format example: 5.0)'/>
       <Text name='api_override' title='API URL Override'/>
@@ -22,6 +24,7 @@ export default function ExperimentalSettings() {
       <Text name='github_override' title='GitHub URL Override'/> 
       <br/><br/>
       */}
+      <br/><br/>
       <button className='reset' style={{'marginLeft': '0px'}} onClick={() => localStorage.clear()}>Clear LocalStorage</button>
     </>
   );

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

@@ -37,7 +37,7 @@ export default class GreetingSettings extends React.PureComponent {
 
         <h3>{greeting.birthday}</h3>
         <Switch name='birthdayenabled' text={this.language.enabled}/>
-        <Checkbox name='birthdayage' text='Birthday Age'/>
+        <Checkbox name='birthdayage' text={greeting.birthday_age}/>
         <p>{greeting.birthday_date}</p>
         <DayPickerInput onDayChange={this.changeDate} value={this.state.birthday}/>
       </>

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

@@ -49,8 +49,8 @@ export default class OrderSettings extends React.PureComponent {
   render() {
     return (
       <>
-        <h2>Order</h2>
+        <h2>{this.language.sections.order.title}</h2>
-        <span className='modalLink' onClick={this.reset}>Reset</span>
+        <span className='modalLink' onClick={this.reset}>{this.language.buttons.reset}</span>
         <SortableContainer onSortEnd={this.onSortEnd} lockAxis='y' lockToContainerEdges disableAutoscroll>
           {this.state.items.map((value, index) => (
             <SortableItem key={`item-${value}`} index={index} value={value} />

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

@@ -64,9 +64,9 @@ export default class SearchSettings extends React.PureComponent {
         <Switch name='searchBar' text={language.enabled} />
         {isChrome ? <Checkbox name='voiceSearch' text={search.voice_search} /> : null}
         <Dropdown label={search.search_engine} name='searchEngine' onChange={(value) => this.setSearchEngine(value)}>
-          {searchEngines.map((engine) =>
+          {searchEngines.map((engine) => (
             <option key={engine.name} value={engine.settingsName}>{engine.name}</option>
-          )}
+          ))}
           <option value='custom'>{search.custom.split(' ')[0]}</option>
         </Dropdown>
         <ul id='searchEngineInput' style={{ display: 'none' }}>

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

@@ -22,11 +22,11 @@ export default class TimeSettings extends React.PureComponent {
 
     const digitalOptions = [
       {
-        'name': '24 hour',
+        'name': time.digital.twentyfourhour,
         'value': 'twentyfourhour'
       },
       {
-        'name': '12 hour',
+        'name': time.digital.twelvehour,
         'value': 'twelvehour'
       }
     ];
@@ -104,8 +104,8 @@ export default class TimeSettings extends React.PureComponent {
         <h3>{time.date.title}</h3>
         <Switch name='date' text={this.language.enabled} />
         <Dropdown label='Type' name='dateType' onChange={(value) => this.setState({ dateType: value })}>
-          <option value='long'>Long</option>
+          <option value='long'>{time.date.type.long}</option>
-          <option value='short'>Short</option>
+          <option value='short'>{time.date.type.short}</option>
         </Dropdown>
         <br/>
         {dateSettings}

src/components/modals/main/settings/sections/background/Background.jsx

@@ -60,7 +60,6 @@ export default class BackgroundSettings extends React.PureComponent {
 
     const customSettings = (
       <>
-        <h3>{background.source.title}</h3>
         <ul>
           <p>{background.source.custom_url} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.language.buttons.reset}</span></p>
           <input type='text' value={this.state.customBackground} onChange={(e) => this.setState({ customBackground: e.target.value })}></input>
@@ -98,9 +97,9 @@ export default class BackgroundSettings extends React.PureComponent {
         <br/><br/>
   
         <Dropdown label='Type' name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })}>
-          <option value='api'>API</option>
+          <option value='api'>{background.type.api}</option>
-          <option value='custom'>Custom Image</option>
+          <option value='custom'>{background.type.custom_image}</option>
-          <option value='colour'>Custom Colour/Gradient</option>
+          <option value='colour'>{background.type.custom_colour}</option>
         </Dropdown>
         <br/>
 

src/components/modals/main/tabs/Settings.jsx

@@ -26,7 +26,7 @@ export default function Settings() {
         <div label={language.background.title}><Background/></div>
         <div label={language.search.title}><Search/></div>
         <div label={language.appearance.title}><Appearance/></div>
-        <div label={language.order}><Order/></div>
+        <div label={language.order.title}><Order/></div>
         <div label={language.language.title}><Language/></div>
         <div label={language.advanced.title}><Advanced/></div>
         <div label={language.experimental.title}><Experimental/></div>

src/components/modals/main/tabs/backend/Tab.jsx

@@ -51,7 +51,7 @@ export default function Tab(props) {
     case language.background.title: icon = <Background/>; break;
     case language.search.title: icon = <Search/>; break;
     case language.appearance.title: icon = <Appearance/>; break;
-    case language.order: icon = <Order/>; break;
+    case language.order.title: icon = <Order/>; break;
     case language.language.title: icon = <Language/>; divider = true; break;
     case language.advanced.title: icon = <Settings/>; break;
     case language.experimental.title: icon = <Experimental/>; divider = true; break;

src/modules/default_settings.json

@@ -142,5 +142,9 @@
   {
     "name": "experimental",
     "value": false
+  },
+  {
+    "name": "debugtimeout",
+    "value": 0
   }
 ]

src/modules/helpers/experimental.js

@@ -10,7 +10,15 @@ export default function ExperimentalInit() {
 
       switch (code) {
         case 222:
+          const timeout = localStorage.getItem('debugtimeout');
+
+          if (timeout !== '0') {
+            setTimeout(() => {
               debugger;
+            }, timeout);
+          } else {
+            debugger;
+          }
           break;
       }
     };

src/translations/en_GB.json

@@ -44,6 +44,7 @@
               "title": "Digital",
               "seconds": "Seconds",
               "twentyfourhour": "24 Hour",
+              "twelvehour": "12 hour",
               "ampm": "AM/PM (12 hour)",
               "zero": "Zero-padded"
             },
@@ -60,6 +61,10 @@
               "title": "Date",
               "day_of_week": "Day of week",
               "datenth": "Date nth",
+              "type": {
+                "short": "Short",
+                "long": "Long"
+              },
               "short_date": "Short Date",
               "short_format": "Short Format",
               "short_separator": {
@@ -89,6 +94,7 @@
             "default": "Default Greeting Message",
             "name": "Name for greeting",
             "birthday": "Birthday",
+            "birthday_age": "Birthday Age",
             "birthday_date": "Birthday Date"
           },
           "background": {
@@ -104,8 +110,12 @@
               "blur": "Adjust Blur",
               "brightness": "Adjust Brightness"
             },
+            "type": {
+              "api": "API",
+              "custom_image": "Custom Image",
+              "custom_colour": "Custom Colour/Gradient"
+            },
             "source": {
-              "title": "Source",
               "api": "Background API",
               "custom_url": "Custom Background URL",
               "custom_background": "Custom Background",
@@ -123,7 +133,12 @@
           },
           "appearance": {
             "title": "Appearance",
-            "dark_theme": "Dark Theme",
+            "theme": {
+              "title": "Theme",
+              "auto": "Auto",
+              "light": "Light",
+              "dark": "Dark"
+            },
             "night_mode": "Night Mode",
             "animations": "Animations",
             "navbar": {
@@ -134,7 +149,24 @@
             "font": {
               "title": "Font",
               "custom": "Custom Font",
-              "google": "Import from Google Fonts"
+              "google": "Import from Google Fonts",
+              "weight": {
+                "title": "Font Weight",
+                "thin": "Thin",
+                "extra_light": "Extra Light",
+                "light": "Light",
+                "normal": "Normal",
+                "medium": "Medium",
+                "semi_bold": "Semi-Bold",
+                "bold": "Bold",
+                "extra_bold": "Extra-Bold"
+              },
+              "style": {
+                "title": "Font Style",
+                "normal": "Normal",
+                "italic": "Italic",
+                "oblique": "Oblique"
+              }
             },
             "accessibility": {
               "title": "Accessibility",
@@ -143,7 +175,9 @@
               "milliseconds": "milliseconds"
             }
           },
-          "order": "Widget Order",
+          "order": {
+            "title": "Widget Order"
+          },
           "advanced": {
             "title": "Advanced",
             "offline_mode": "Offline Mode",
@@ -151,6 +185,7 @@
             "customisation": "Customisation",
             "custom_css": "Custom CSS",
             "custom_js": "Custom JS",
+            "tab_name": "Tab Name",
             "experimental_warning": "Please note that the Mue team cannot provide support if you have experimental mode on. Please disable it first and see if the issue continues to occur before contacting support." 
           },
           "experimental": {

src/translations/en_US.json

@@ -9,10 +9,16 @@
             "custom_author": "Custom Author"
           },
           "background": {
-            "custom_colour": "Custom Background Color",
+            "buttons": {
-            "add_colour": "Add color",
               "favourite": "Favorite"
             },
+            "type": {
+              "custom_colour": "Custom Color/Gradient"
+            },
+            "source": {
+              "add_colour": "Add color"
+            }
+          },
           "time": {
             "analogue": {
               "title": "Analog"