From b5e5b8618e6c7945a4d8be4a898c90233e123e72 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Thu, 17 Sep 2020 12:42:02 +0100 Subject: [PATCH] refactor settings --- src/components/modals/Settings.jsx | 176 +++--------------- src/components/modals/marketplace/Item.jsx | 10 + src/components/modals/settings/Section.jsx | 26 +++ .../settings/sections/BackgroundSettings.jsx | 61 ++++++ .../sections/ExperimentalSettings.jsx | 37 ++++ .../settings/sections/LanguageSettings.jsx | 18 ++ .../settings/sections/SearchSettings.jsx | 30 +++ src/components/widgets/Background.jsx | 2 +- 8 files changed, 212 insertions(+), 148 deletions(-) create mode 100644 src/components/modals/settings/Section.jsx create mode 100644 src/components/modals/settings/sections/BackgroundSettings.jsx create mode 100644 src/components/modals/settings/sections/ExperimentalSettings.jsx create mode 100644 src/components/modals/settings/sections/LanguageSettings.jsx create mode 100644 src/components/modals/settings/sections/SearchSettings.jsx diff --git a/src/components/modals/Settings.jsx b/src/components/modals/Settings.jsx index 4764c1a7..690fc85e 100644 --- a/src/components/modals/Settings.jsx +++ b/src/components/modals/Settings.jsx @@ -1,10 +1,15 @@ import React from 'react'; -import ExpandMore from '@material-ui/icons/ExpandMore'; import SettingsFunctions from '../../modules/settingsFunctions'; import Checkbox from './settings/Checkbox'; import Slider from './settings/Slider'; +import Section from './settings/Section'; import { toast } from 'react-toastify'; +import BackgroundSettings from './settings/sections/BackgroundSettings'; +import ExperimentalSettings from './settings/sections/ExperimentalSettings'; +import SearchSettings from './settings/sections/SearchSettings'; +import LanguageSettings from './settings/sections/LanguageSettings'; + export default class Settings extends React.PureComponent { resetItem(key) { switch (key) { @@ -85,22 +90,6 @@ export default class Settings extends React.PureComponent { }; }; - document.getElementById('bg-input').onchange = (e) => { - const reader = new FileReader(); - const file = e.target.files[0]; - - if (file.size > 2000000) return toast('File is over 2MB', '#ff0000', '#ffffff'); - - reader.addEventListener('load', (e) => { - localStorage.setItem('customBackground', e.target.result); - document.getElementById('customBackground').src = e.target.result; - document.getElementById('customBackground').value = e.target.result; - document.getElementById('backgroundImage').setAttribute('style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-image: url(${localStorage.getItem('customBackground')}`); - document.getElementById('backgroundImage').style.backgroundImage = `url(${localStorage.getItem('customBackground')})`; - }); - - reader.readAsDataURL(file); - }; /*const hex = localStorage.getItem('customBackgroundColour'); if (!hex === '') { document.getElementById('customBackgroundColour').value = hex; @@ -128,151 +117,44 @@ export default class Settings extends React.PureComponent { -
+
+
-
-

SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[0], document.getElementsByClassName('expandIcons')[0])}>{this.props.language.time.title}

- SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[0], document.getElementsByClassName('expandIcons')[0])} /> - -
  • +
    -
    • -
    -
    -

    SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[1], document.getElementsByClassName('expandIcons')[1])}>{this.props.language.greeting.title}

    - SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[1], document.getElementsByClassName('expandIcons')[1])} /> - -
  • + +
    -
      -

      {this.props.language.greeting.name} this.resetItem('greetingName')}>{this.props.language.reset}

      - -
    -
    • -
    -
    -

    SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[2], document.getElementsByClassName('expandIcons')[2])}>{this.props.language.quote.title}

    - SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[2], document.getElementsByClassName('expandIcons')[2])} /> - -
  • - -
    • -
    -
    -

    SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[3], document.getElementsByClassName('expandIcons')[3])}>{this.props.language.background.title}

    - SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[3], document.getElementsByClassName('expandIcons')[3])} /> - -
    • - - -
    -
      -

      {this.props.language.background.blur} (%) this.resetItem('blur')}>{this.props.language.reset}

      - document.getElementById('blurAmount').innerText = document.getElementById('blurRange').value} /> -
    -
      -

      {this.props.language.background.brightness} (%) this.resetItem('brightness')}>{this.props.language.reset}

      - document.getElementById('brightnessAmount').innerText = document.getElementById('brightnessRange').value} /> -
    -
      -

      {this.props.language.background.customURL} this.resetItem('customBackground')}>{this.props.language.reset}

      - -
    -
      -

      {this.props.language.background.custombackground} this.resetItem('customBackground')}>{this.props.language.reset}

      - - -
    - { /*
      -

      {this.props.language.background.customcolour} this.resetItem('customBackgroundColour')}>Reset

      - document.getElementById('customBackgroundHex').innerText = document.getElementById('customBackgroundColour').value}> - -
    */ } -
    • -
    -
    -

    SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[4], document.getElementsByClassName('expandIcons')[4])}>{this.props.language.searchbar.title}

    - SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[4], document.getElementsByClassName('expandIcons')[4])} /> - -
  • -
      - - -
    -
      -

      Custom Search URL this.resetItem('customSearchEngine')}>Reset

      - -
    -
    • -
    +

    {this.props.language.greeting.name} this.resetItem('greetingName')}>{this.props.language.reset}

    + + + +
    + +
    +
    + this.resetItem(item)}/> +
    +
    + this.resetItem(item)}/> +

    {this.props.language.offline}

    - +
    -

    {this.props.language.experimental.dark}

    - -
    -
    -

    {this.props.language.experimental.title}

    - SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[5], document.getElementsByClassName('expandIcons')[5])} /> -
  • -
    -

    {this.props.language.experimental.webp}

    - -
    -
    -

    {this.props.language.experimental.animations}

    - -
    -
    -

    View

    - -
    -
    -

    Favourite

    - -
    -
    -

    Refresh

    - -
    -
    • +

    {this.props.language.experimental.dark}

    +
    + + -
    -

    {this.props.language.language}

    - -
    diff --git a/src/components/modals/marketplace/Item.jsx b/src/components/modals/marketplace/Item.jsx index 5499bbfb..5cec02b9 100644 --- a/src/components/modals/marketplace/Item.jsx +++ b/src/components/modals/marketplace/Item.jsx @@ -4,6 +4,15 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack'; export default class Item extends React.PureComponent { render() { if (!this.props.data.icon) return null; + let warningHTML = ''; + if (this.props.data.quote_api) { + warningHTML =
    +
      +
    • Warning
      • +
    • This quote pack requests to external servers that may track you!
      • +
    +
    + } return (

    @@ -34,6 +43,7 @@ export default class Item extends React.PureComponent {
  • {this.props.language.notice.description}
    • + {warningHTML}

    {this.props.language.overview}

    diff --git a/src/components/modals/settings/Section.jsx b/src/components/modals/settings/Section.jsx new file mode 100644 index 00000000..98532e6a --- /dev/null +++ b/src/components/modals/settings/Section.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import SettingsFunctions from '../../../modules/settingsFunctions'; +import Slider from './Slider'; +import ExpandMore from '@material-ui/icons/ExpandMore'; + +export default class Section extends React.PureComponent { + render() { + let extraHTML, expandMore = ''; + if (this.props.children) { + extraHTML =
  • {this.props.children}
    • + expandMore = SettingsFunctions.toggleExtra(document.getElementsByClassName(this.props.title)[0], document.getElementsByClassName('expand' + this.props.title)[0])} + /> + } + return ( +
    +

    SettingsFunctions.toggleExtra(document.getElementsByClassName(this.props.title)[0], document.getElementsByClassName('expand' + this.props.title)[0])}>{this.props.title}

    + {expandMore} + + {extraHTML} +
    + ); + } +} \ No newline at end of file diff --git a/src/components/modals/settings/sections/BackgroundSettings.jsx b/src/components/modals/settings/sections/BackgroundSettings.jsx new file mode 100644 index 00000000..b50c68af --- /dev/null +++ b/src/components/modals/settings/sections/BackgroundSettings.jsx @@ -0,0 +1,61 @@ +import React from 'react'; +import { toast } from 'react-toastify'; + +export default class BackgroundSettings extends React.PureComponent { + componentDidMount() { + document.getElementById('bg-input').onchange = (e) => { + const reader = new FileReader(); + const file = e.target.files[0]; + + if (file.size > 2000000) return toast('File is over 2MB', '#ff0000', '#ffffff'); + + reader.addEventListener('load', (e) => { + localStorage.setItem('customBackground', e.target.result); + document.getElementById('customBackground').src = e.target.result; + document.getElementById('customBackground').value = e.target.result; + document.getElementById('backgroundImage').setAttribute('style', `-webkit-filter:blur(${localStorage.getItem('blur')}px); background-image: url(${localStorage.getItem('customBackground')}`); + document.getElementById('backgroundImage').style.backgroundImage = `url(${localStorage.getItem('customBackground')})`; + }); + + reader.readAsDataURL(file); + }; + } + + render() { + return ( +
    +
      + + +
    +
      +

      {this.props.language.background.blur} (%) this.props.resetItem('blur')}>{this.props.language.reset}

      + document.getElementById('blurAmount').innerText = document.getElementById('blurRange').value} /> +
    +
      +

      {this.props.language.background.brightness} (%) this.props.resetItem('brightness')}>{this.props.language.reset}

      + document.getElementById('brightnessAmount').innerText = document.getElementById('brightnessRange').value} /> +
    +
      +

      {this.props.language.background.customURL} this.props.resetItem('customBackground')}>{this.props.language.reset}

      + +
    +
      +

      {this.props.language.background.custombackground} this.props.resetItem('customBackground')}>{this.props.language.reset}

      + + +
    + { /*
      +

      {this.props.language.background.customcolour} this.resetItem('customBackgroundColour')}>Reset

      + document.getElementById('customBackgroundHex').innerText = document.getElementById('customBackgroundColour').value}> + +
    */ } +
    + ); + } +} \ No newline at end of file diff --git a/src/components/modals/settings/sections/ExperimentalSettings.jsx b/src/components/modals/settings/sections/ExperimentalSettings.jsx new file mode 100644 index 00000000..117158da --- /dev/null +++ b/src/components/modals/settings/sections/ExperimentalSettings.jsx @@ -0,0 +1,37 @@ +import React from 'react'; +import Slider from '../Slider'; +import ExpandMore from '@material-ui/icons/ExpandMore'; +import SettingsFunctions from '../../../../modules/settingsFunctions'; + +export default class ExperimentalSettings extends React.PureComponent { + render() { + return ( +
    +

    {this.props.language.experimental.title}

    + SettingsFunctions.toggleExtra(document.getElementsByClassName('extraSettings')[5], document.getElementsByClassName('expandIcons')[5])} /> +
  • +
    +

    {this.props.language.experimental.webp}

    + +
    +
    +

    {this.props.language.experimental.animations}

    + +
    +
    +

    View

    + +
    +
    +

    Favourite

    + +
    +
    +

    Refresh

    + +
    +
    • +
    + ); + } +} \ No newline at end of file diff --git a/src/components/modals/settings/sections/LanguageSettings.jsx b/src/components/modals/settings/sections/LanguageSettings.jsx new file mode 100644 index 00000000..896ebc3a --- /dev/null +++ b/src/components/modals/settings/sections/LanguageSettings.jsx @@ -0,0 +1,18 @@ +import React from 'react'; + +export default class LanguageSettings extends React.PureComponent { + render() { + return ( +
    +

    {this.props.language.language}

    + +
    + ); + } +} \ No newline at end of file diff --git a/src/components/modals/settings/sections/SearchSettings.jsx b/src/components/modals/settings/sections/SearchSettings.jsx new file mode 100644 index 00000000..cde6bfdb --- /dev/null +++ b/src/components/modals/settings/sections/SearchSettings.jsx @@ -0,0 +1,30 @@ +import React from 'react'; +import SettingsFunctions from '../../../../modules/settingsFunctions'; + +export default class SearchSettings extends React.PureComponent { + render() { + return ( +
    +
      + + +
    +
      +

      Custom Search URL this.props.resetItem('customSearchEngine')}>Reset

      + +
    +
    + ); + } +} \ No newline at end of file diff --git a/src/components/widgets/Background.jsx b/src/components/widgets/Background.jsx index fc7d997b..a06c3916 100644 --- a/src/components/widgets/Background.jsx +++ b/src/components/widgets/Background.jsx @@ -50,7 +50,7 @@ export default class Background extends React.PureComponent { this.setBackground(null, customBackgroundColour, 'false'); } else if (favourited) { this.setBackground(favourited.url, null, 'true'); - this.setCredit(favourited.credit) + this.setCredit(favourited.credit); document.getElementById('location').textContent = favourited.location; } else if (customBackground !== '') { // Local this.setBackground(customBackground, null, 'false');