style: code cleanup

2026-06-13 03:58:49 +02:00 · 2021-03-19 15:56:48 +00:00
parent 77a0bbe7ee
commit 9ea6c18cd2
15 changed files with 140 additions and 114 deletions
--- a/src/components/modals/settings/sections/Advanced.jsx
+++ b/src/components/modals/settings/sections/Advanced.jsx
@@ -40,11 +40,13 @@ export default class AdvancedSettings extends React.PureComponent {
      <div>
        <h2>{advanced.title}</h2>
        <Checkbox name='offlineMode' text={advanced.offline_mode} />
+
        <h3>{advanced.data}</h3>
        <button className='reset' onClick={() => SettingsFunctions.setDefaultSettings('reset')}>{this.props.language.buttons.reset}</button>
        <button className='export' onClick={() => SettingsFunctions.exportSettings()}>{this.props.language.buttons.export}</button>
        <button className='import' onClick={() => document.getElementById('file-input').click()}>{this.props.language.buttons.import}</button>
        <FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => this.settingsImport(e)} />
+
        <h3>{advanced.customisation}</h3>
        <ul>
          <p>{advanced.custom_css} <span className='modalLink' onClick={() => this.resetItem('customcss')}>{this.props.language.buttons.reset}</span></p>
--- a/src/components/modals/settings/sections/Appearance.jsx
+++ b/src/components/modals/settings/sections/Appearance.jsx
@@ -10,7 +10,7 @@ export default class AppearanceSettings extends React.PureComponent {
    this.state = {
      zoom: localStorage.getItem('zoom'),
      toast_duration: localStorage.getItem('toastDisplayTime'),
-      font: localStorage.getItem('font')
+      font: localStorage.getItem('font') || ''
    };
  }

@@ -58,15 +58,18 @@ export default class AppearanceSettings extends React.PureComponent {
        <h2>{appearance.title}</h2>
        <Checkbox name='darkTheme' text={appearance.dark_theme} />
        <Checkbox name='brightnessTime' text={appearance.night_mode} />
+
        <h3>{appearance.navbar.title}</h3>
        <Checkbox name='notesEnabled' text={appearance.navbar.notes} />
        <Checkbox name='refresh' text={appearance.navbar.refresh} />
+  
        <h3>{appearance.font.title}</h3>
        <ul>
          <p>{appearance.font.custom} <span className='modalLink' onClick={() => this.resetItem('font')}>{this.props.language.buttons.reset}</span></p>
          <input type='text' value={this.state.font} onChange={(e) => this.setState({ font: e.target.value })}></input>
        </ul>
        <Checkbox name='fontGoogle' text={appearance.font.google} />
+
        <h3>{appearance.accessibility.title}</h3>
        <Checkbox name='animations' text={appearance.animations} betaFeature={true} />
        <ul>
--- a/src/components/modals/settings/sections/Background.jsx
+++ b/src/components/modals/settings/sections/Background.jsx
@@ -14,7 +14,7 @@ import 'react-color-gradient-picker/dist/index.css';
 import '../../../../scss/react-color-picker-gradient-picker-custom-styles.scss';

 export default class BackgroundSettings extends React.PureComponent {
-  DefaultGradientSettings = { 'angle': '180', 'gradient': [{ 'colour': this.props.language.sections.background.disabled, 'stop': 0 }], 'type': 'linear' };
+  DefaultGradientSettings = { 'angle': '180', 'gradient': [{ 'colour': this.props.language.sections.background.source.disabled, 'stop': 0 }], 'type': 'linear' };
  GradientPickerInitalState = undefined;

  constructor(...args) {
@@ -129,14 +129,14 @@ export default class BackgroundSettings extends React.PureComponent {
  }

  currentGradientSettings = () => {
-    if (typeof this.state.gradientSettings === 'object' && this.state.gradientSettings.gradient.every(g => g.colour !== this.props.language.sections.background.disabled)) {
+    if (typeof this.state.gradientSettings === 'object' && this.state.gradientSettings.gradient.every(g => g.colour !== this.props.language.sections.background.source.disabled)) {
      const clampNumber = (num, a, b) => Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
      return JSON.stringify({
        ...this.state.gradientSettings,
        gradient: [...this.state.gradientSettings.gradient.map(g => { return { ...g, stop: clampNumber(+g.stop, 0, 100) } })].sort((a, b) => (a.stop > b.stop) ? 1 : -1)
      });
    }
-    return this.props.language.sections.background.disabled;
+    return this.props.language.sections.background.source.disabled;
  }

  onColorPickerChange = (attrs, name) => {
@@ -169,7 +169,7 @@ export default class BackgroundSettings extends React.PureComponent {
    localStorage.setItem('brightness', this.state.brightness);
    localStorage.setItem('customBackground', this.state.customBackground);

-    if (document.getElementById('customBackgroundHex').value !== this.props.language.sections.background.disabled) {
+    if (document.getElementById('customBackgroundHex').value !== this.props.language.sections.background.source.disabled) {
      localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundHex').value);
    }
  }
@@ -209,8 +209,8 @@ export default class BackgroundSettings extends React.PureComponent {
      colourSettings = (
        <div>
          {gradientInputs}
-          {this.state.gradientSettings.gradient[0].colour !== background.disabled &&
-           !gradientHasMoreThanOneColour ? (<button type='button' className='add' onClick={this.addColour}>{background.add_colour}</button>) : null
+          {this.state.gradientSettings.gradient[0].colour !== background.source.disabled &&
+           !gradientHasMoreThanOneColour ? (<button type='button' className='add' onClick={this.addColour}>{background.source.add_colour}</button>) : null
          }
        </div>
      );
@@ -218,26 +218,26 @@ export default class BackgroundSettings extends React.PureComponent {

    return (
      <div>
-        <h2>Background</h2>
+        <h2>{background.title}</h2>
        <Checkbox name='background' text='Enabled' />
-        <h3>Buttons</h3>
+        <h3>{background.buttons.title}</h3>
        <ul>
-          <Checkbox name='view' text={background.view} />
-          <Checkbox name='favouriteEnabled' text={background.favourite} />
+          <Checkbox name='view' text={background.buttons.view} />
+          <Checkbox name='favouriteEnabled' text={background.buttons.favourite} />
        </ul>
-        <h3>Effects</h3>
+        <h3>{background.effects.title}</h3>
        <ul>
-          <p>{background.blur} ({this.state.blur}%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.buttons.reset}</span></p>
+          <p>{background.effects.blur} ({this.state.blur}%) <span className='modalLink' onClick={() => this.resetItem('blur')}>{this.props.language.buttons.reset}</span></p>
          <input className='range' type='range' min='0' max='100' value={this.state.blur} onChange={(event) => this.setState({ blur: event.target.value })} />
        </ul>
        <ul>
-          <p>{background.brightness} ({this.state.brightness}%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.props.language.buttons.reset}</span></p>
+          <p>{background.effects.brightness} ({this.state.brightness}%) <span className='modalLink' onClick={() => this.resetItem('brightness')}>{this.props.language.buttons.reset}</span></p>
          <input className='range' type='range' min='0' max='100' value={this.state.brightness} onChange={(event) => this.setState({ brightness: event.target.value })} />
        </ul>
-        <h3>Source</h3>
+        <h3>{background.source.title}</h3>
        <ul>
          <Dropdown
-            label={background.api}
+            label={background.source.api}
            name='backgroundapi'
            id='backgroundAPI'
            onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)} >
@@ -246,16 +246,16 @@ export default class BackgroundSettings extends React.PureComponent {
          </Dropdown>
        </ul>
        <ul>
-          <p>{background.custom_url} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.buttons.reset}</span></p>
+          <p>{background.source.custom_url} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.buttons.reset}</span></p>
          <input type='text' value={this.state.customBackground} onChange={(e) => this.setState({ customBackground: e.target.value })}></input>
        </ul>
        <ul>
-          <p>{background.custom_background} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.buttons.reset}</span></p>
-          <button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>{background.upload}</button>
+          <p>{background.source.custom_background} <span className='modalLink' onClick={() => this.resetItem('customBackground')}>{this.props.language.buttons.reset}</span></p>
+          <button className='uploadbg' onClick={() => document.getElementById('bg-input').click()}>{background.source.upload}</button>
          <FileUpload id='bg-input' accept='image/jpeg, image/png, image/webp, image/webm, image/gif' loadFunction={(e) => this.fileUpload(e)} />
        </ul>
        <ul>
-          <p>{background.custom_colour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>{this.props.language.buttons.reset}</span></p>
+          <p>{background.source.custom_colour} <span className='modalLink' onClick={() => this.resetItem('customBackgroundColour')}>{this.props.language.buttons.reset}</span></p>
          <input id='customBackgroundHex' type='hidden' value={this.currentGradientSettings()} />
          {colourSettings}
        </ul>
--- a/src/components/modals/settings/sections/Greeting.jsx
+++ b/src/components/modals/settings/sections/Greeting.jsx
@@ -52,6 +52,7 @@ export default class GreetingSettings extends React.PureComponent {
          <p>{greeting.name} <span className='modalLink' onClick={() => this.resetItem()}>{this.props.language.buttons.reset}</span></p>
          <input type='text' value={this.state.greetingName} onChange={(e) => this.setState({ greetingName: e.target.value })}></input>
        </ul>
+
        <h3>{greeting.birthday}</h3>
        <Checkbox name='birthdayenabled' text={this.props.language.enabled} />
        <ul>
--- a/src/components/modals/settings/sections/Quote.jsx
+++ b/src/components/modals/settings/sections/Quote.jsx
@@ -8,7 +8,7 @@ export default class QuoteSettings extends React.PureComponent {
  constructor(...args) {
    super(...args);
    this.state = {
-      customQuote: localStorage.getItem('customQuote'),
+      customQuote: localStorage.getItem('customQuote') || '',
      customQuoteAuthor: localStorage.getItem('customQuoteAuthor') || 'Unknown'
    };
  }
@@ -51,17 +51,17 @@ export default class QuoteSettings extends React.PureComponent {
        <Checkbox name='quote' text={this.props.language.enabled}/>
        <Checkbox name='authorLink' text={quote.author_link}/>
        <ul>
-            <p>{quote.custom} <span className='modalLink' onClick={() => this.resetItem('customQuote')}>{this.props.language.buttons.reset}</span></p>
-            <input type='text' value={this.state.customQuote} onChange={(e) => this.setState({ customQuote: e.target.value })}></input>
+          <p>{quote.custom} <span className='modalLink' onClick={() => this.resetItem('customQuote')}>{this.props.language.buttons.reset}</span></p>
+          <input type='text' value={this.state.customQuote} onChange={(e) => this.setState({ customQuote: e.target.value })}></input>
        </ul>
        <ul>
-            <p>{quote.custom_author} <span className='modalLink' onClick={() => this.resetItem('customQuoteAuthor')}>{this.props.language.buttons.reset}</span></p>
-            <input type='text' value={this.state.customQuoteAuthor} onChange={(e) => this.setState({ customQuoteAuthor: e.target.value })}></input>
+          <p>{quote.custom_author} <span className='modalLink' onClick={() => this.resetItem('customQuoteAuthor')}>{this.props.language.buttons.reset}</span></p>
+          <input type='text' value={this.state.customQuoteAuthor} onChange={(e) => this.setState({ customQuoteAuthor: e.target.value })}></input>
        </ul>
-        <h3>{quote.buttons}</h3>
-        <Checkbox name='copyButton' text={quote.copy}/>
-        <Checkbox name='tweetButton' text={quote.tweet}/>
-        <Checkbox name='favouriteQuoteEnabled' text={quote.favourite}/>
+        <h3>{quote.buttons.title}</h3>
+        <Checkbox name='copyButton' text={quote.buttons.copy}/>
+        <Checkbox name='tweetButton' text={quote.buttons.tweet}/>
+        <Checkbox name='favouriteQuoteEnabled' text={quote.buttons.favourite}/>
      </div>
    );
  }
--- a/src/components/modals/settings/sections/Time.jsx
+++ b/src/components/modals/settings/sections/Time.jsx
@@ -28,7 +28,9 @@ export default class TimeSettings extends React.PureComponent {
  render() {
    const { time } = this.props.language.sections;

-    let digitalSettings = (
+    let timeSettings;
+
+    const digitalSettings = (
      <React.Fragment>
        <h3>{time.digital.title}</h3>
        <Checkbox name='seconds' text={time.digital.seconds} />
@@ -38,7 +40,7 @@ export default class TimeSettings extends React.PureComponent {
      </React.Fragment>
    );

-    let analogSettings = (
+    const analogSettings = (
      <React.Fragment>
        <h3>{time.analogue.title}</h3>
        <Checkbox name='secondHand' text={time.analogue.second_hand} />
@@ -50,9 +52,9 @@ export default class TimeSettings extends React.PureComponent {
    );

    switch (this.state.timeType) {
-      case 'digital': break;
-      case 'analogue': digitalSettings = analogSettings; break;
-      default: digitalSettings = null; break;
+      case 'digital': timeSettings = digitalSettings; break;
+      case 'analogue': timeSettings = analogSettings; break;
+      default: timeSettings = null; break;
    }

    return (
@@ -64,7 +66,9 @@ export default class TimeSettings extends React.PureComponent {
          <option className='choices' value='analogue'>{time.analogue.title}</option>
          <option className='choices' value='percentageComplete'>{time.percentage_complete}</option>
        </Dropdown>
-        {digitalSettings}
+
+        {timeSettings}
+
        <h3>{time.date.title}</h3>
        <Checkbox name='date' text={this.props.language.enabled} />
        <Checkbox name='dayofweek' text={time.date.day_of_week} />
--- a/src/components/widgets/background/Background.jsx
+++ b/src/components/widgets/background/Background.jsx
@@ -194,6 +194,6 @@ export default class Background extends React.PureComponent {
  }

  render() {
-    return <div id='backgroundImage'></div>;
+    return <div id='backgroundImage'/>;
  }
 }
--- a/src/components/widgets/background/PhotoInformation.jsx
+++ b/src/components/widgets/background/PhotoInformation.jsx
@@ -15,13 +15,13 @@ export default function PhotoInformation(props) {
        <h1>{props.language.information}</h1>
        <hr/>
        <Location/>
-        <span id='location'></span>
+        <span id='location'/>
        <Camera/>
-        <span id='camera'></span>
+        <span id='camera'/>
        <Resolution/>
-        <span id='resolution'></span>
+        <span id='resolution'/>
        <Photographer/>
-        <span id='photographerCard'></span>
+        <span id='photographerCard'/>
      </div>
      <span id='credit' style={{ 'display': 'none' }}></span>
    </div>
--- a/src/components/widgets/greeting/Greeting.jsx
+++ b/src/components/widgets/greeting/Greeting.jsx
@@ -72,7 +72,7 @@ export default class Greeting extends React.PureComponent {
    // Birthday
    const birth = new Date(localStorage.getItem('birthday'));
    if (localStorage.getItem('birthdayenabled') === 'true' && birth.getDate() === now.getDate() && birth.getMonth() === now.getMonth()) {
-      message = 'Happy Birthday';
+      message = this.props.language.birthday;
    }

    // Set the state to the greeting string
--- a/src/components/widgets/navbar/Navbar.jsx
+++ b/src/components/widgets/navbar/Navbar.jsx
@@ -14,53 +14,33 @@ import './scss/index.scss';
 const Notes = React.lazy(() => import('./Notes'));
 const renderLoader = () => <div></div>;

-export default class Navbar extends React.PureComponent {
-  render() {
-    // toggle refresh button
-    let refreshHTML = (
-      <Tooltip title={this.props.language.widgets.navbar.tooltips.refresh}>
-        <RefreshIcon className='refreshicon topicons' onClick={() => window.location.reload()} />
-      </Tooltip>
-    );
+export default function Navbar(props) {
+  return (
+    <div className='navbar-container'>
+      {(localStorage.getItem('notesEnabled') === 'true') ?
+        <div className='notes'>
+          <NotesIcon className='topicons'/>
+          <React.Suspense fallback={renderLoader()}>
+            <Notes language={props.language.widgets.navbar.notes}/>
+          </React.Suspense>
+        </div>
+      :null}

-    if (localStorage.getItem('refresh') === 'false') {
-      refreshHTML = null;
-    }
-
-    // toggle feedback button
-    let feedbackHTML = (
-      <Tooltip title='Feedback' placement='top'>
-        <Report className='topicons' onClick={() => this.props.openModal('feedbackModal')} />
-      </Tooltip>
-    );
-
-    if (Constants.BETA_VERSION === false) {
-      feedbackHTML = null;
-    }
-
-    // toggle notes
-    let notesHTML = (
-      <div className='notes'>
-        <NotesIcon className='topicons'/>
-        <React.Suspense fallback={renderLoader()}>
-          <Notes language={this.props.language.widgets.navbar.notes} />
-        </React.Suspense>
-      </div>
-    );
-
-    if (localStorage.getItem('notesEnabled') === 'false') {
-      notesHTML = null;
-    }
-
-    return (
-      <div className='navbar-container'>
-        {notesHTML}
-        {feedbackHTML}
-        {refreshHTML}
-        <Tooltip title={this.props.language.modals.main.navbar.settings} placement='top'>
-          <Gear className='settings-icon topicons' onClick={() => this.props.openModal('mainModal')} />
+      {(Constants.BETA_VERSION === true) ? 
+        <Tooltip title='Feedback' placement='top'>
+          <Report className='topicons' onClick={() => props.openModal('feedbackModal')}/>
        </Tooltip>
-      </div>
-    );
-  }
+      :null}
+
+      {(localStorage.getItem('refresh') === 'true') ?
+        <Tooltip title={props.language.widgets.navbar.tooltips.refresh}>
+          <RefreshIcon className='refreshicon topicons' onClick={() => window.location.reload()}/>
+        </Tooltip>
+      :null}
+
+      <Tooltip title={props.language.modals.main.navbar.settings} placement='top'>
+        <Gear className='settings-icon topicons' onClick={() => props.openModal('mainModal')}/>
+      </Tooltip>
+    </div>
+  );
 }
--- a/src/components/widgets/quote/Quote.jsx
+++ b/src/components/widgets/quote/Quote.jsx
@@ -153,7 +153,8 @@ export default class Quote extends React.PureComponent {
      <div className='quotediv'>
        <h1 className='quote'>{`${this.state.quote}`}</h1>
        <h1 className='quoteauthor'>
-          <a href={this.state.authorlink} className='quoteauthorlink' target='_blank' rel='noopener noreferrer'>{this.state.author}</a> {this.state.copy} {this.state.tweet} {this.state.favourited}
+          <a href={this.state.authorlink} className='quoteauthorlink' target='_blank' rel='noopener noreferrer'>{this.state.author}</a> 
+          {this.state.copy} {this.state.tweet} {this.state.favourited}
        </h1>
      </div>
    );
--- a/src/modules/constants.js
+++ b/src/modules/constants.js
@@ -2,7 +2,7 @@ export const API_URL = 'https://api.muetab.com';
 export const UNSPLASH_URL = 'https://unsplash.muetab.com';
 export const MARKETPLACE_URL = 'https://marketplace.muetab.com';
 export const WEBSITE_URL = 'https://muetab.com';
-export const SPONSORS_URL = 'https://muesponsors.vercel.app'; // todo: make sponsors.muetab.com work
+export const SPONSORS_URL = 'https://sponsors.muetab.com';
 export const OFFLINE_IMAGES = 20;
 export const BETA_VERSION = false;
 export const VERSION = '5.0.0';
--- a/src/modules/helpers/settings.js
+++ b/src/modules/helpers/settings.js
@@ -110,5 +110,24 @@ export default class SettingsFunctions {
    if (zoom !== 100) {
      document.body.style.zoom = zoom + '%';
    }
+
+    // easter egg
+    console.log(`
+ █████████████████████████████████████████████████████████████                                                                        
+ ██                                                         ██
+ ██              ███    ███ ██    ██ ███████                ██  
+ ██              ████  ████ ██    ██ ██                     ██ 
+ ██              ██ ████ ██ ██    ██ █████                  ██ 
+ ██              ██  ██  ██ ██    ██ ██                     ██ 
+ ██              ██      ██  ██████  ███████                ██ 
+ ██                                                         ██ 
+ ██                                                         ██                                                                                                 
+ ██               Copyright 2018-2021 Mue                   ██
+ ██           GitHub: https://github.com/mue/mue            ██
+ ██                                                         ██
+ ██                 Thank you for using!                    ██
+ ██              Feedback: hello@muetab.com                 ██
+ █████████████████████████████████████████████████████████████
+`);
  }
 }
--- a/src/scss/modules/_dropdown.scss
+++ b/src/scss/modules/_dropdown.scss
@@ -26,11 +26,15 @@
  }
 }

-.react-date-picker__wrapper{
-  padding: 0.5rem 1rem  !important;
-    box-sizing: border-box  !important;
-    border-image-slice: 1  !important;
-    border-image-source: linear-gradient( 90deg, #ffb032 0%, #dd3b67 100%)  !important;
-    background: transparent  !important;
-    color: #fff  !important; 
+.react-date-picker__wrapper {
+  padding: 0.5rem 1rem !important;
+  box-sizing: border-box !important;
+  border-image-slice: 1 !important;
+  border-image-source: linear-gradient(90deg, #ffb032 0%, #dd3b67 100%) !important;
+  background: transparent !important;
+  color: #fff !important; 
 }
+
+.react-date-picker__clear-button, .react-calendar__navigation__prev2-button, .react-calendar__navigation__next2-button {
+  display: none !important;
+}
--- a/src/translations/en-GB.json
+++ b/src/translations/en-GB.json
@@ -6,7 +6,8 @@
      "evening": "Good Evening",
      "christmas": "Merry Christmas",
      "newyear": "Happy New Year",
-      "halloween": "Happy Halloween"
+      "halloween": "Happy Halloween",
+      "birthday": "Happy Birthday"
    },
    "background": {
      "credit": "Photo by",
@@ -71,13 +72,15 @@
          },
          "quote": {
            "title": "Quote",
-            "buttons": "Buttons",
-            "copy": "Copy",
-            "tweet": "Tweet",
-            "favourite": "Favourite",
            "author_link": "Authour Link",
            "custom": "Custom Quote",
-            "custom_author": "Custom Authour"
+            "custom_author": "Custom Authour",
+            "buttons": {
+              "title": "Buttons",
+              "copy": "Copy",
+              "tweet": "Tweet",
+              "favourite": "Favourite"
+            }
          },
          "greeting": {
            "title": "Greeting",
@@ -89,17 +92,26 @@
          },
          "background": {
            "title": "Background",
-            "api": "Background API",
-            "blur": "Adjust Blur",
-            "brightness": "Adjust Brightness",
-            "custom_url": "Custom Background URL",
-            "custom_background": "Custom Background",
-            "custom_colour": "Custom Background Colour",
-            "upload": "Upload",
-            "add_colour": "Add colour",
-            "favourite": "Favourite",
-            "view": "View",
-            "disabled": "Disabled"
+            "buttons": {
+              "title": "Buttons",
+              "view": "View",
+              "favourite": "Favourite"
+            },
+            "effects": {
+              "title": "Effects",
+              "blur": "Adjust Blur",
+              "brightness": "Adjust Brightness"
+            },
+            "source": {
+              "title": "Source",
+              "api": "Background API",
+              "custom_url": "Custom Background URL",
+              "custom_background": "Custom Background",
+              "custom_colour": "Custom Background Colour",
+              "upload": "Upload",
+              "add_colour": "Add colour",
+              "disabled": "Disabled"
+            }
          },
          "search": {
            "title": "Search",