Add new modal (WIP)

Currently broken: marketplace, addons, resizing the modal, gradient settings
Not implemented: apply button, reset button, import/export buttons

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

src/components/modals/Main.jsx

@@ -4,61 +4,27 @@ import Settings from './tabs/Settings';
 import Addons from './tabs/Addons';
 import Marketplace from './tabs/Marketplace';
 
-import SettingsIcon from '@material-ui/icons/Settings';
-import AddonsIcon from '@material-ui/icons/Widgets';
-import MarketplaceIcon from '@material-ui/icons/ShoppingBasket';
+import Navigation from './tabs-backend/Tabs';
 
 export default class MainModal extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      tab: '',
-      currentTab: ''
-    }
-    this.tabs = {
-      settings: <Settings language={this.props.language.settings} toastLanguage={this.props.language.toasts} />,
-      addons: <Addons language={this.props.language.addons} marketplaceLanguage={this.props.language.marketplace} toastLanguage={this.props.language.toasts} openMarketplace={() => this.changeEnabled('marketplace')}/>,
-      marketplace: <Marketplace language={this.props.language.marketplace} toastLanguage={this.props.language.toasts} updateLanguage={this.props.language.update}/>
-    }
-  }
-
-  componentDidMount() {
-    document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
-    document.getElementById('center').classList.toggle('backgroundEffects');
-
-    this.setState({ 
-      tab: this.tabs.settings, 
-      currentTab: 'settings' 
-    });
-  }
-
-  componentWillUnmount() {
-    document.getElementById('backgroundImage').classList.toggle('backgroundEffects');
-    document.getElementById('center').classList.toggle('backgroundEffects');
-  }
-
-  changeEnabled(input) {
-    document.getElementById(this.state.currentTab + 'TabLink').classList.toggle('active');
-    document.getElementById(input + 'TabLink').classList.toggle('active');
-
-    this.setState({ 
-      tab: this.tabs[input], 
-      currentTab: input 
-    });
-  }
-
   render() {
     return (
-      <div className='content'>
+      <div className='modal'>
         <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
         <h1>{this.props.language.modals.title}</h1>
-        <div className='tab'>
-          <button className='tablinks' id='marketplaceTabLink' onClick={() => this.changeEnabled('marketplace')}><MarketplaceIcon/> {this.props.language.modals.marketplace}</button>
-          <button className='tablinks' id='addonsTabLink'onClick={() => this.changeEnabled('addons')}><AddonsIcon/> {this.props.language.modals.addons}</button>
-          <button className='tablinks active' id='settingsTabLink' onClick={() => this.changeEnabled('settings')}><SettingsIcon/> {this.props.language.modals.settings}</button>
+        <div>
+          <Navigation navbar={true}>
+            <div label='Settings'>
+              <Settings language={this.props.language.settings} toastLanguage={this.props.language.toasts} />
+            </div>
+            <div label='My Add-ons'>
+              <Addons/>
+            </div>
+            <div label='Marketplace'>
+              <Marketplace/>
+            </div>
+          </Navigation>
         </div>
-        <br/>
-        {this.state.tab}
       </div>
     );
   }

src/components/modals/settings/Section.jsx

@@ -1,56 +0,0 @@
-import React from 'react';
-
-import Slider from './Slider';
-
-import ExpandMore from '@material-ui/icons/ExpandMore';
-
-export default class Section extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      display: 'none',
-      transform: 'rotate(0)'
-    };
-  }
-
-  toggleSection() {
-    const display = (this.state.display === 'none') ? 'block' : 'none';
-
-    this.setState({
-      display: display,
-      transform: (this.state.transform === 'rotate(0)') ? 'rotate(-180deg)' : 'rotate(0)'
-    });
-
-    if (this.props.onToggle) {
-      this.props.onToggle(display);
-    }
-  }
-
-  render() {
-    let extraHTML, expandMore;
-
-    if (this.props.children) {
-        extraHTML = (
-          <div style={{ display: this.state.display }}>
-            <li className='extraSettings'>{this.props.children}</li>
-          </div>
-        );
-
-        expandMore = (
-          <ExpandMore
-            style={{ 'transition': 'all 0.5s ease 0s', 'transform': this.state.transform }}
-            className={`expandIcons`}
-            onClick={() => this.toggleSection()} />
-        );
-    }
-
-    return (
-        <div className='section'>
-            <h4 className={(this.props.dropdown === false) ? 'nodropdown' : null} onClick={() => this.toggleSection()}>{this.props.title}</h4>
-            {expandMore}
-            {(this.props.slider !== false) ? <Slider name={this.props.name} /> : null}
-            {extraHTML}
-        </div>
-    );
-  }
-}

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

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import Tooltip from '@material-ui/core/Tooltip';
+
+export default class About extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+        contributors: []
+    }
+  }
+
+  async getContributors() {
+    const data = await (await fetch('https://api.github.com/repos/mue/mue/contributors')).json();
+
+    this.setState({ 
+        contributors: data // TODO: REMOVE BOTS AND MAKE IT ACTUALLY WORK
+    });
+  }
+
+  componentDidMount() {
+    this.getContributors();
+  }
+
+  render() {
+    return (
+      <div>
+          <h2>About</h2>
+          <img style={{'height': '100px', 'width': 'auto'}} src='https://raw.githubusercontent.com/mue/branding/master/logo/logo_horizontal.png' alt='Mue logo'></img>
+          <p>Copyright 2018-2021 Mue Tab (BSD-3 License)</p>
+          <p>Version 5.0.0</p>
+          <h3>Contributors</h3>
+          {this.state.contributors.map((item) =>
+            <Tooltip title={item.login} placement='top' key={item.login}>
+                <a href={'https://github.com/' + item.login}><img className='abouticon' src={item.avatar_url} alt={item.login}></img></a>
+            </Tooltip>
+          )}
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import Checkbox from '../Checkbox';
+
+export default function AppearanceSettings (props) {
+  return (
+    <div>
+        <h2>Appearance</h2>
+        <Checkbox name='animations' text={props.language.experimental.animations} betaFeature={true} />
+        <Checkbox name='darkTheme' text={props.language.dark} />
+        <Checkbox name='brightnessTime' text={props.language.experimental.night_mode} betaFeature={true} />
+        <ul>
+            <p>{props.language.custom_css} <span className='modalLink' onClick={() => this.resetItem()}>{props.language.reset}</span> <span className='newFeature'> NEW</span></p>
+            <textarea id='customcss'></textarea>
+        </ul>
+        <h3>Accessibility</h3>
+        <ul>
+            <p>Zoom (100%) <span className='modalLink'>{props.language.reset}</span></p>
+            <input className='range' type='range' min='50' max='200' value={100} />
+        </ul>
+        <ul>
+            <p>Toast Duration (2500 milliseconds) <span className='modalLink'>{props.language.reset}</span></p>
+            <input className='range' type='range' min='50' max='200' value={100} />
+        </ul>
+    </div>
+  );
+}

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

@@ -2,7 +2,6 @@ import React from 'react';
 
 import Checkbox from '../Checkbox';
 import Dropdown from '../Dropdown';
-import Section from '../Section';
 import FileUpload from '../FileUpload';
 
 import { ColorPicker } from 'react-color-gradient-picker';
@@ -227,8 +226,8 @@ export default class BackgroundSettings extends React.PureComponent {
     }
 
     return (
-      <React.Fragment>
-        <Section title={this.props.language.background.title} name='background' onToggle={this.onSectionToggle}>
+        <div>
+          <h2>Background</h2>
           <ul>
             <Checkbox name='view' text={this.props.language.background.view} />
             <Checkbox name='favouriteEnabled' text={this.props.language.background.favourite} />
@@ -266,8 +265,7 @@ export default class BackgroundSettings extends React.PureComponent {
             <input id='customBackgroundHex' type='hidden' value={this.currentGradientSettings()} />
             {this.state.shown && colourSettings}
           </ul>
-        </Section>
-      </React.Fragment>
+        </div>
     );
   }
 }

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

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import Section from '../Section';
 import Checkbox from '../Checkbox';
 
 import DatePicker from 'react-date-picker';
@@ -41,7 +40,8 @@ export default class GreetingSettings extends React.PureComponent {
 
   render() {
     return (
-      <Section title={this.props.language.greeting.title} name='greeting'>
+      <div>
+        <h2>Greeting</h2>
         <Checkbox name='events' text={this.props.language.greeting.events} />
         <Checkbox name='defaultGreetingMessage' text={this.props.language.greeting.default} />
         <Checkbox name='birthdayenabled' text={this.props.language.greeting.birthday_enabled} />
@@ -53,7 +53,7 @@ export default class GreetingSettings extends React.PureComponent {
           <p>{this.props.language.greeting.birthday_date}</p>
           <DatePicker onChange={(data) => this.changeDate(data)} value={this.state.birthday}/>
         </ul>
-      </Section>
+      </div>
     );
   }
 }

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

@@ -5,7 +5,8 @@ const languages = require('../../../../modules/languages.json');
 
 export default function LanguageSettings (props) {
   return (
-    <div className='section'>
+    <div>
+      <h2>Language</h2>
       <h4 htmlFor='language' className='nodropdown'>{props.language.language}</h4>
       <Dropdown
         name='language'

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

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import Checkbox from '../Checkbox';
+import Dropdown from '../Dropdown';
+
+export default function QuoteSettings (props) {
+  return (
+    <div>
+      <h2>Quote</h2>
+      <Checkbox name='copyButton' text={props.language.quote.copy} />
+            <Checkbox name='tweetButton' text={props.language.quote.tweet} />
+            <Checkbox name='favouriteQuoteEnabled' text={props.language.quote.favourite} />
+            <Dropdown label={props.language.language} name='quotelanguage' id='quotelanguage' onChange={() => localStorage.setItem('quotelanguage', document.getElementById('quotelanguage').value)}>
+              <option className='choices' value='English'>English</option>
+              <option className='choices' value='French'>Français</option>
+            </Dropdown>
+    </div>
+  );
+}

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

@@ -2,7 +2,6 @@ import React from 'react';
 
 import { toast } from 'react-toastify';
 
-import Section from '../Section';
 import Dropdown from '../Dropdown';
 import Checkbox from '../Checkbox';
 
@@ -57,7 +56,8 @@ export default class SearchSettings extends React.PureComponent {
 
   render() {
     return (
-        <Section title={this.props.language.searchbar.title} name='searchBar'>
+       <div className='section'>
+          <h2>Search</h2>
           <Checkbox name='voiceSearch' text={this.props.language.experimental.voice_search} />
           <ul>
             <Dropdown label={this.props.language.searchbar.search_engine}
@@ -74,7 +74,7 @@ export default class SearchSettings extends React.PureComponent {
             <p style={{ 'marginTop': '0px' }}>{this.props.language.searchbar.custom} <span className='modalLink' onClick={() => this.resetSearch()}>{this.props.language.reset}</span></p>
             <input type='text' id='customSearchEngine'></input>
           </ul>
-        </Section>
+        </div>
     );
   }
 }

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

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import Checkbox from '../Checkbox';
+import Dropdown from '../Dropdown';
+
+export default function TimeSettings (props) {
+  return (
+    <div>
+      <h2>Time</h2>
+      <Checkbox name='seconds' text={props.language.time.seconds} />
+      <Checkbox name='24hour' text={props.language.time.twentyfourhour} />
+      <Checkbox name='ampm' text={props.language.time.ampm} />
+      <Checkbox name='zero' text={props.language.time.zero} />
+      <Checkbox name='analog' text={props.language.time.analog} />
+      <Checkbox name='percentageComplete' text={props.language.time.percentageComplete} />
+      <h3>Date</h3>
+      <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)}>
+        <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

@@ -0,0 +1,81 @@
+import React from 'react';
+
+// navbar
+import Settings from '@material-ui/icons/Settings';
+import Addons from '@material-ui/icons/Widgets';
+import Marketplace from '@material-ui/icons/ShoppingBasket';
+
+// settings
+import Time from '@material-ui/icons/AccessAlarm';
+import Greeting from '@material-ui/icons/EmojiPeople';
+import Quote from '@material-ui/icons/FormatQuote';
+import Background from '@material-ui/icons/Photo';
+import Search from '@material-ui/icons/Search';
+import About from '@material-ui/icons/Info';
+import Plugins from '@material-ui/icons/Widgets';
+import Added from '@material-ui/icons/AddCircle';
+import Appearance from '@material-ui/icons/FormatPaint';
+import Language from '@material-ui/icons/Translate';
+import Changelog from '@material-ui/icons/NewReleasesRounded';
+
+export default class Tab extends React.PureComponent {
+      onClick = () => {
+        this.props.onClick(this.props.label);
+      };
+
+      render() {
+        let className = 'tab-list-item';
+        if (this.props.currentTab === this.props.label) {
+          className += ' tab-list-active';
+        }
+
+        if (this.props.navbar === true) {
+          className = 'navbar-item';
+          if (this.props.currentTab === this.props.label) {
+            className += ' navbar-item-active';
+          }
+        }
+
+        let icon;
+        let divider;
+
+        switch (this.props.label) {
+          // Navbar
+          case 'Settings': icon = <Settings/>; break;
+          case 'My Add-ons': icon = <Addons/>; break;
+          case 'Marketplace': icon = <Marketplace/>; break;
+          // Settings
+          case 'Time': icon = <Time/>; break;
+          case 'Greeting': icon = <Greeting/>; break;
+          case 'Quote': icon = <Quote/>; break;
+          case 'Background': icon = <Background/>; break;
+          case 'Search': icon = <Search/>; break;
+          case 'Appearance': icon = <Appearance/>; break;
+          case 'Language': 
+            icon = <Language/>; 
+            divider = <div><hr/></div>;
+          break;
+          case 'Change Log': icon = <Changelog/>; break;
+          case 'About': icon = <About/>; break; 
+          // Store
+          case 'Themes': icon = <Colors/>; break; 
+          case 'Photo Packs': icon = <Background/>; break; 
+          case 'Quotes Packs': icon = <Quote/>; break;
+          case 'Plugins':
+            icon = <Plugins />
+            divider = <div><hr/></div>;
+            break;
+          case 'Added': icon = <Added/>; break;
+          default: break;
+        }
+
+        return (
+          <React.Fragment>
+            <li className={className} onClick={this.onClick}>
+            {icon} <span>{this.props.label}</span>
+          </li>
+          {divider}
+          </React.Fragment>
+        )
+   }
+}                                    

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import Tab from './Tab';
+
+export default class Tabs extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      currentTab: this.props.children[0].props.label
+    };
+  }
+
+  onClick = (tab) => {
+    this.setState({ currentTab: tab });
+  };
+
+  render() {
+    let className = 'sidebar';
+    let tabClass = 'tab-content';
+    let optionsText = (<h1>Options</h1>);
+
+    if (this.props.navbar) {
+      className = 'modalNavbar';
+      tabClass = '';
+      optionsText = '';
+    }
+
+    return (
+      <span className='tabs'>
+        <ul className={className}>
+         {optionsText}
+          {this.props.children.map((tab) => {
+            return (
+              <Tab
+                currentTab={this.state.currentTab}
+                key={tab.props.label}
+                label={tab.props.label}
+                onClick={this.onClick}
+                navbar={this.props.navbar || false}
+              />
+            );
+          })}
+        </ul>
+        <div className={tabClass}>
+          {this.props.children.map((child) => {
+            if (child.props.label !== this.state.currentTab) return undefined;
+            return child.props.children;
+          })}
+        </div>
+      </span>
+    );
+  }
+}

src/components/modals/tabs/Settings.jsx

@@ -1,112 +1,50 @@
 import React from 'react';
 
-import SettingsFunctions from '../../../modules/helpers/settings';
-import Checkbox from '../settings/Checkbox';
-import Dropdown from '../settings/Dropdown';
-import Section from '../settings/Section';
-import FileUpload from '../settings/FileUpload';
+import About from '../settings/sections/About';
+import Language from '../settings/sections/Language';
+import Search from '../settings/sections/Search';
+import Greeting from '../settings/sections/Greeting';
+import Time from '../settings/sections/Time';
+import Quote from '../settings/sections/Quote';
+import Appearance from '../settings/sections/Appearance';
+import Background from '../settings/sections/Background';
 
-import { toast } from 'react-toastify';
-
-import BackgroundSettings from '../settings/sections/BackgroundSettings';
-import SearchSettings from '../settings/sections/SearchSettings';
-import LanguageSettings from '../settings/sections/LanguageSettings';
-import GreetingSettings from '../settings/sections/GreetingSettings';
+import SettingsTabs from '../tabs-backend/Tabs';
 
 export default class Settings extends React.PureComponent {
-  resetItem() {
-    document.getElementById('customcss').value = '';
-    toast(this.props.toastLanguage.reset);
-  }
-
-  componentDidMount() {
-    // Settings
-    document.getElementById('language').value = localStorage.getItem('language');
-    document.getElementById('customcss').value = localStorage.getItem('customcss');
-
-    if (document.getElementById('modal').classList.contains('dark')) { // Dark theme support for dropdowns
-      const choices = document.getElementsByClassName('choices');
-      for (let i = 0; i < choices.length; i++) {
-        choices[i].style.backgroundColor = '#2f3542';
-      }
-    }
-  }
-
-  settingsImport(e) {
-    const content = JSON.parse(e.target.result);
-
-    for (const key of Object.keys(content)) {
-      localStorage.setItem(key, content[key]);
-    }
-
-    toast(this.props.toastLanguage.imported);
-  }
-
-  componentWillUnmount() {
-    localStorage.setItem('customcss', document.getElementById('customcss').value);
-  }
-
   render() {
     return (
-        <div className='columns'>
-          <Section title={this.props.language.time.title} name='time'>
-            <Checkbox name='seconds' text={this.props.language.time.seconds} />
-            <Checkbox name='24hour' text={this.props.language.time.twentyfourhour} />
-            <Checkbox name='ampm' text={this.props.language.time.ampm} />
-            <Checkbox name='zero' text={this.props.language.time.zero} />
-            <Checkbox name='analog' text={this.props.language.time.analog} />
-            <Checkbox name='percentageComplete' text={this.props.language.time.percentageComplete} />
-          </Section>
-
-          <GreetingSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
-
-          <Section title={this.props.language.quote.title} name='quote'>
-            <Checkbox name='copyButton' text={this.props.language.quote.copy} />
-            <Checkbox name='tweetButton' text={this.props.language.quote.tweet} />
-            <Checkbox name='favouriteQuoteEnabled' text={this.props.language.quote.favourite} />
-            <Dropdown label={this.props.language.language} name='quotelanguage' id='quotelanguage' onChange={() => localStorage.setItem('quotelanguage', document.getElementById('quotelanguage').value)}>
-              <option className='choices' value='English'>English</option>
-              <option className='choices' value='French'>Français</option>
-            </Dropdown>
-          </Section>
-
-          <Section title={this.props.language.date.title} name='date'>
-            <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>
-            <br/><br/>
-            <Dropdown label={this.props.language.date.short_separator.title} name='shortFormat' id='shortformat' onChange={() => localStorage.setItem('shortFormat', document.getElementById('shortformat').value)}>
-              <option className='choices' value='default'>{this.props.language.date.short_separator.default}</option>
-              <option className='choices' value='dash'>{this.props.language.date.short_separator.dash}</option>
-              <option className='choices' value='gaps'>{this.props.language.date.short_separator.gaps}</option>
-            </Dropdown>
-          </Section>
-
-          <BackgroundSettings language={this.props.language} toastLanguage={this.props.toastLanguage} backgroundDisabled={this.props.language.background.disabled} />
-          <SearchSettings language={this.props.language} toastLanguage={this.props.toastLanguage} />
-          <Section title={this.props.language.offline} name='offlineMode' dropdown={false} />
-
-          <Section title='Appearance' name='appearance' slider={false}>
-            <Checkbox name='animations' text={this.props.language.experimental.animations} betaFeature={true} />
-            <Checkbox name='darkTheme' text={this.props.language.dark} />
-            <Checkbox name='brightnessTime' text={this.props.language.experimental.night_mode} betaFeature={true} />
-            <ul>
-              <p>{this.props.language.custom_css} <span className='modalLink' onClick={() => this.resetItem()}>{this.props.language.reset}</span> <span className='newFeature'> NEW</span></p>
-              <textarea id='customcss'></textarea>
-            </ul>
-          </Section>
-
-          <LanguageSettings language={this.props.language} />
-
-          <button className='apply' onClick={() => window.location.reload()}>{this.props.language.apply}</button>
-          <button className='reset' onClick={() => SettingsFunctions.setDefaultSettings('reset')}>{this.props.language.reset}</button>
-          <button className='export' onClick={() => SettingsFunctions.exportSettings()}>{this.props.language.export}</button>
-          <button className='import' onClick={() => document.getElementById('file-input').click()}>{this.props.language.import}</button>
-          <FileUpload id='file-input' accept='application/json' type='settings' loadFunction={(e) => this.settingsImport(e)} />
-        </div>
+      <React.Fragment>
+        <SettingsTabs>
+          <div label='Time'>
+            <Time language={this.props.language}/>
+          </div>
+          <div label='Quote'>
+            <Quote language={this.props.language}/>
+          </div>
+          <div label='Greeting'>
+            <Greeting language={this.props.language}/>
+          </div>
+          <div label='Background'>
+            <Background language={this.props.language}/>
+          </div>
+          <div label='Search'>
+            <Search language={this.props.language}/>
+          </div>
+          <div label='Appearance'>
+            <Appearance language={this.props.language}/>
+          </div>
+          <div label='Language'>
+            <Language language={this.props.language}/>
+          </div>
+          <div label='Change Log'>
+            <About/>
+          </div>
+          <div label='About'>
+            <About/>
+          </div>
+        </SettingsTabs>
+      </React.Fragment>
     );
   }
 }