feat: improve time settings, fix search button etc

src/components/modals/settings/Slider.jsx

@@ -1,31 +0,0 @@
-import React from 'react';
-
-import SettingsFunctions from '../../../modules/helpers/settings';
-
-export default class Slider extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      checked: (localStorage.getItem(this.props.name) === 'true')
-    };
-  }
-
-  handleChange() {
-    let setText = (this.props.override) ? this.props.override : this.props.name;
-
-    SettingsFunctions.setItem(setText);
-
-    this.setState({
-      checked: (this.state.checked === true) ? false : true
-    });
-  }
-
-  render() {
-    return (
-      <label className='switch'>
-        <input type='checkbox' checked={this.state.checked} onChange={() => this.handleChange()} />
-        <span className='slider'></span>
-      </label>
-    );
-  }
-}

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

@@ -25,7 +25,7 @@ export default class About extends React.PureComponent {
       updateMsg = 'Update available: ' + version;
     }
 
-    // TODO: REMOVE BOTS AND MAKE IT ACTUALLY WORK,
+    // TODO: REMOVE BOTS AND MAKE IT ACTUALLY WORK
     this.setState({
       contributors: contributors,
       update: updateMsg

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

@@ -8,13 +8,14 @@ import SettingsFunctions from '../../../../modules/helpers/settings';
 import { toast } from 'react-toastify';
 
 export default class AdvancedSettings extends React.PureComponent {
-  resetItem() {
-    document.getElementById('customcss').value = '';
+  resetItem(type) {
+    document.getElementById(type).value = '';
     toast(this.props.toastLanguage.reset);
   }
 
   componentDidMount() {
     document.getElementById('customcss').value = localStorage.getItem('customcss');
+    document.getElementById('customjs').value = localStorage.getItem('customjs');
   }
 
   settingsImport(e) {
@@ -29,6 +30,7 @@ export default class AdvancedSettings extends React.PureComponent {
 
   componentWillUnmount() {
     localStorage.setItem('customcss', document.getElementById('customcss').value);
+    localStorage.setItem('customjs', document.getElementById('customjs').value);
   }
 
   render() {
@@ -43,11 +45,11 @@ export default class AdvancedSettings extends React.PureComponent {
         <FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => this.settingsImport(e)} />
         <h3>Customisation</h3>
         <ul>
-          <p>Custom CSS <span className='modalLink' onClick={() => this.resetItem()}>Reset</span></p>
+          <p>Custom CSS <span className='modalLink' onClick={() => this.resetItem('customcss')}>Reset</span></p>
           <textarea id='customcss'></textarea>
         </ul>
         <ul>
-          <p>Custom JS <span className='modalLink' onClick={() => this.resetItem()}>Reset</span></p>
+          <p>Custom JS <span className='modalLink' onClick={() => this.resetItem('customjs')}>Reset</span></p>
           <textarea id='customjs'></textarea>
         </ul>
         <h3>Experimental</h3>

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

@@ -51,7 +51,7 @@ export default class GreetingSettings extends React.PureComponent {
           <input type='text' value={this.state.greetingName} onChange={(e) => this.setState({ greetingName: e.target.value })}></input>
         </ul>
         <h3>Birthday</h3>
-        <Checkbox name='birthdayenabled' text={this.props.language.birthday_enabled} />
+        <Checkbox name='birthdayenabled' text={'Enabled'} />
         <ul>
           <p>{this.props.language.birthday_date}</p>
           <DatePicker onChange={(data) => this.changeDate(data)} value={this.state.birthday}/>

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

@@ -58,6 +58,7 @@ export default class SearchSettings extends React.PureComponent {
     return (
       <div className='section'>
         <h2>Search</h2>
+        <Checkbox name='searchBar' text='Enabled' />
         <Checkbox name='voiceSearch' text={this.props.language.voice_search} />
         <ul>
           <Dropdown label={this.props.language.search_engine}

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

@@ -3,25 +3,56 @@ import React from 'react';
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
 
-export default function TimeSettings (props) {
+export default class TimeSettings extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      timeType: localStorage.getItem('timeType') || 'digital'
+    };
+  }
+
+  changeType() {
+    const value = document.getElementById('timeType').value;
+    localStorage.setItem('timeType', value);
+    this.setState({
+      timeType: value
+    });
+  }
+
+  render() {
+    let digitalSettings = (
+      <React.Fragment>
+        <h3>Digital</h3>
+        <Checkbox name='seconds' text={this.props.language.seconds} />
+        <Checkbox name='24hour' text={this.props.language.twentyfourhour} />
+        <Checkbox name='ampm' text={this.props.language.ampm} />
+        <Checkbox name='zero' text={this.props.language.zero} />
+      </React.Fragment>
+    )
+
+    if (this.state.timeType !== 'digital') {
+      digitalSettings = null;
+    }
+
     return (
       <div>
-      <h2>{props.language.title}</h2>
+        <h2>{this.props.language.title}</h2>
         <Checkbox name='time' text='Enabled' />
-      <Checkbox name='seconds' text={props.language.seconds} />
-      <Checkbox name='24hour' text={props.language.twentyfourhour} />
-      <Checkbox name='ampm' text={props.language.ampm} />
-      <Checkbox name='zero' text={props.language.zero} />
-      <Checkbox name='analog' text={props.language.analog} />
-      <Checkbox name='percentageComplete' text={props.language.percentageComplete} />
-      <h3>{props.language.date.title}</h3>
+        <Dropdown label='Type' name='timeType' id='timeType' onChange={() => this.changeType()}>
+          <option className='choices' value='digital'>Digital</option>
+          <option className='choices' value='analogue'>Analog</option>
+          <option className='choices' value='percentageComplete'>Percentage of Day</option>
+        </Dropdown>
+        {digitalSettings}
+        <h3>{this.props.language.date.title}</h3>
         <Checkbox name='date' text='Enabled' />
-      <Checkbox name='short' text={props.language.date.short_date} betaFeature={true} />
-      <Dropdown label={props.language.date.short_format} name='dateFormat' id='dateformat' onChange={() => localStorage.setItem('dateFormat', document.getElementById('dateformat').value)}>
+        <Checkbox name='short' text={this.props.language.date.short_date} betaFeature={true} />
+        <Dropdown label={this.props.language.date.short_format} name='dateFormat' id='dateformat' onChange={() => localStorage.setItem('dateFormat', document.getElementById('dateformat').value)}>
           <option className='choices' value='DMY'>DMY</option>
           <option className='choices' value='MDY'>MDY</option>
           <option className='choices' value='YMD'>YMD</option>
         </Dropdown>
       </div>
     );
+  }
 }

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

@@ -22,26 +22,21 @@ import Colors from '@material-ui/icons/ColorLens';
 import Plugins from '@material-ui/icons/Widgets';
 import Added from '@material-ui/icons/AddCircle';
 
-export default class Tab extends React.PureComponent {
-  onClick = () => {
-    this.props.onClick(this.props.label);
-  };
-
-  render() {
+export default function Tab(props) {
   let className = 'tab-list-item';
-    if (this.props.currentTab === this.props.label) {
+  if (props.currentTab === props.label) {
     className += ' tab-list-active';
   }
 
-    if (this.props.navbar === true) {
+  if (props.navbar === true) {
     className = 'navbar-item';
-      if (this.props.currentTab === this.props.label) {
+    if (props.currentTab === props.label) {
       className += ' navbar-item-active';
     }
   }
 
   let icon, divider;
-    switch (this.props.label) {
+  switch (props.label) {
      // Navbar
     case 'Settings': icon = <Settings/>; break;
     case 'My Add-ons': icon = <Addons/>; break;
@@ -81,11 +76,10 @@ export default class Tab extends React.PureComponent {
 
   return (
     <React.Fragment>
-        <li className={className} onClick={this.onClick}>
-        {icon} <span>{this.props.label}</span>
+      <li className={className} onClick={() => props.onClick(props.label)}>
+      {icon} <span>{props.label}</span>
       </li>
       {divider}
     </React.Fragment>
   )
-  }
 }

src/components/modals/tabs/backend/Tabs.jsx

@@ -13,7 +13,9 @@ export default class Tabs extends React.PureComponent {
   }
 
   onClick = (tab) => {
-    this.setState({ currentTab: tab });
+    this.setState({ 
+      currentTab: tab 
+    });
   };
 
   render() {

src/components/widgets/search/Search.jsx

@@ -34,6 +34,10 @@ export default class Search extends React.PureComponent {
     }
   }
 
+  searchButton() {
+    const value = document.getElementById('searchtext').value || 'mue fast';
+    window.location.href = this.state.url + `?${this.state.query}=` + value;
+  }
 
   componentDidMount() {
     let url;
@@ -68,7 +72,7 @@ export default class Search extends React.PureComponent {
       <div id='searchBar'>
         <form action={this.state.url}>
           {this.state.microphone}
-          <SearchIcon onClick={() => searchButton()} id='searchButton'/>
+          <SearchIcon onClick={() => this.searchButton()} id='searchButton'/>
           <input type='text' placeholder={this.props.language} name={this.state.query} id='searchtext'/>
         </form>
       </div>

src/components/widgets/time/Clock.jsx

@@ -15,19 +15,21 @@ export default class Clock extends React.PureComponent {
     };
   }
 
-  startTime(time = localStorage.getItem('seconds') === 'true' || localStorage.getItem('analog') === 'true' ? (1000 - Date.now() % 1000) : (60000 - Date.now() % 60000)) {
+  startTime(time = localStorage.getItem('seconds') === 'true' || localStorage.getItem('timeType') === 'analogue' ? (1000 - Date.now() % 1000) : (60000 - Date.now() % 60000)) {
     this.timer = setTimeout(() => {
       const now = new Date();
 
+      const timeType = localStorage.getItem('timeType');
+
       // Percentage
-      if (localStorage.getItem('percentageComplete') === 'true') {
+      if (timeType === 'percentageComplete') {
         return this.setState({
           time: (now.getHours() / 24).toFixed(2).replace('0.', '') + '%'
         });
       }
 
       // Analog clock
-      if (localStorage.getItem('analog') === 'true') {
+      if (timeType === 'analogue') {
         // load analog clock css
         require('react-clock/dist/Clock.css');
 
@@ -95,7 +97,7 @@ export default class Clock extends React.PureComponent {
   render() {
     let clockHTML = <h1 className='clock'>{this.state.time}<span className='ampm'>{this.state.ampm}</span></h1>;
 
-    if (localStorage.getItem('analog') === 'true') {
+    if (localStorage.getItem('timeType') === 'analogue') {
       clockHTML = <Analog className='analogclock' value={this.state.time} renderHourMarks={false} renderMinuteMarks={false} />;
     }
 

src/scss/modules/_settings.scss

@@ -15,30 +15,6 @@
   display: none;
 }
 
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  border-radius: 34px;
-
-  &:before {
-    position: absolute;
-    content: '';
-    height: 26px;
-    width: 26px;
-    left: 4px;
-    bottom: 4px;
-    background-color: #fff;
-    -webkit-transition: 0.4s;
-    transition: 0.4s;
-    border-radius: 50%;
-  }
-}
-
 input {
   &[type=text] {
     width: 200px;

src/translations/en-GB.json

@@ -67,7 +67,6 @@
             "events": "Events",
             "default": "Default Greeting Message",
             "name": "Name for greeting",
-            "birthday_enabled": "Birthday Enabled",
             "birthday_date": "Birthday Date"
           },
           "background": {