feat: hot reload for background and quote language, css fixes etc

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>
2026-07-19 15:04:11 +02:00 · 2021-04-13 18:25:55 +01:00
parent 81787211b8
commit 18c6514666
14 changed files with 100 additions and 25 deletions
--- a/src/components/modals/main/marketplace/sections/Marketplace.jsx
+++ b/src/components/modals/main/marketplace/sections/Marketplace.jsx
@@ -124,8 +124,10 @@ export default class Marketplace extends React.PureComponent {
    const errorMessage = (msg) => {
      return (
        <div id='marketplace'>
-          <div className='emptyMessage' style={{ 'marginTop': '20px', 'transform': 'translateY(80%)' }}>
-            {msg}
+          <div className='emptyitems'>
+            <div class='emptyMessage'>
+              {msg}
+            </div>
          </div>
        </div>
      );
--- a/src/components/modals/main/scss/index.scss
+++ b/src/components/modals/main/scss/index.scss
@@ -118,7 +118,7 @@ ul.sidebar {
  border-radius: 12px 0 0 12px;
  text-align: left;
  font-size: 24px;
-  height: 100vh;
+  min-height: 100vh;

  h1 {
    text-align: center;
@@ -155,10 +155,20 @@ li {
  right: 0;
  bottom: 0;
  left: 0;
-  width: 60%;
  height: 80%;
 }

+@media only screen and (max-width: 1300px) {
+  #modal {
+    width: 90% !important;
+  }
+}
+@media only screen and (min-width: 1310px) {
+  #modal {
+    width: 60%;
+  }
+}
+
 .tab-list-active {
  background: var(--tab-active);
 }
--- a/src/components/modals/main/scss/settings/_buttons.scss
+++ b/src/components/modals/main/scss/settings/_buttons.scss
@@ -186,3 +186,7 @@ legend {
 li.stortableitem {
  width: 200px;
 }
+
+.MuiTouchRipple-root {
+  background: transparent;
+}
--- a/src/components/modals/main/settings/sections/Language.jsx
+++ b/src/components/modals/main/settings/sections/Language.jsx
@@ -13,7 +13,7 @@ export default function LanguageSettings() {
      <h2>{language.title}</h2>
      <Radio name='language' options={languages} />
      <h3>{language.quote}</h3>
-      <Radio name='quotelanguage' options={quote_languages} />
+      <Radio name='quotelanguage' options={quote_languages} category='quote' />
    </>
  );
 }
--- a/src/components/modals/main/settings/sections/Order.jsx
+++ b/src/components/modals/main/settings/sections/Order.jsx
@@ -8,7 +8,12 @@ import { sortableContainer, sortableElement } from 'react-sortable-hoc';
 import { toast } from 'react-toastify';

 const enabled = (setting) => {
-  return (localStorage.getItem(setting) === 'true');
+  switch (setting) {
+    case 'quicklinks':
+      return (localStorage.getItem('quicklinksenabled') === 'true');
+    default:
+      return (localStorage.getItem(setting) === 'true');
+  }
 };

 const settings = window.language.modals.main.settings.sections;
--- a/src/components/modals/main/settings/sections/background/Background.jsx
+++ b/src/components/modals/main/settings/sections/background/Background.jsx
@@ -95,7 +95,7 @@ export default class BackgroundSettings extends React.PureComponent {
    const APISettings = (
      <>
        <br/>
-        <Radio title={background.source.api} options={apiOptions} name='backgroundAPI'/>
+        <Radio title={background.source.api} options={apiOptions} name='backgroundAPI' category='background'/>
        <br/>
        <Dropdown label={background.category} name='apiCategory'>
          {this.state.backgroundCategories.map((category) => (
@@ -127,12 +127,12 @@ export default class BackgroundSettings extends React.PureComponent {
    return (
      <>
        <h2>{background.title}</h2>
-        <Switch name='background' text={this.language.enabled} />
+        <Switch name='background' text={this.language.enabled} category='background' />
        <Checkbox name='ddgProxy' text={background.ddg_proxy} />
        <Checkbox name='bgtransition' text={background.transition} />

        <h3>{background.source.title}</h3>
-        <Dropdown label={background.type.title} name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })}>
+        <Dropdown label={background.type.title} name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })} category='background'>
          {this.marketplaceType()}
          <option value='api'>{background.type.api}</option>
          <option value='custom'>{background.type.custom_image}</option>
@@ -148,8 +148,8 @@ export default class BackgroundSettings extends React.PureComponent {
        <Checkbox name='downloadbtn' text={background.buttons.download}/>

        <h3>{background.effects.title}</h3>
-        <Slider title={background.effects.blur} name='blur' min='0' max='100' default='0' display='%' />
-        <Slider title={background.effects.brightness} name='brightness' min='0' max='100' default='100' display='%' />
+        <Slider title={background.effects.blur} name='blur' min='0' max='100' default='0' display='%' category='background' />
+        <Slider title={background.effects.brightness} name='brightness' min='0' max='100' default='100' display='%' category='background' />
        <br/><br/>
      </>
    );
--- a/src/components/widgets/background/Background.jsx
+++ b/src/components/widgets/background/Background.jsx
@@ -1,5 +1,7 @@
 import React from 'react';

+import EventBus from '../../../modules/helpers/eventbus';
+
 import PhotoInformation from './PhotoInformation';

 import './scss/index.scss';
@@ -10,6 +12,7 @@ export default class Background extends React.PureComponent {
    this.state = {
      style: '',
      url: '',
+      currentAPI: '',
      video: false,
      photoInfo: {
        hidden: false,
@@ -32,6 +35,7 @@ export default class Background extends React.PureComponent {
    }

    this.setState({
+      type: 'colour',
      style: style
    });
  }
@@ -137,7 +141,8 @@ export default class Background extends React.PureComponent {
        let requestURL, data;
        switch (backgroundAPI) {
          case 'unsplash':
-            requestURL = `${window.constants.UNSPLASH_URL}/getImage?category=${apiCategory}`;
+            //requestURL = `${window.constants.UNSPLASH_URL}/getImage?category=${apiCategory}`;
+            requestURL = `${window.constants.UNSPLASH_URL}/getImage`;
            break;
          // Defaults to Mue
          default:
@@ -154,6 +159,8 @@ export default class Background extends React.PureComponent {

        this.setState({
          url: data.file,
+          type: 'api',
+          currentAPI: backgroundAPI,
          photoInfo: {
            credit: (backgroundAPI !== 'unsplash') ? data.photographer : data.photographer + ` ${this.language.unsplash}`,
            location: (data.location.replace(/[null]+/g, '') !== ' ') ? data.location : 'N/A',
@@ -196,6 +203,7 @@ export default class Background extends React.PureComponent {
        if (customBackground !== '' && customBackground !== 'undefined') {
          this.setState({
            url: customBackground,
+            type: 'custom',
            video: this.videoCheck(customBackground),
            photoInfo: {
              hidden: true
@@ -226,11 +234,43 @@ export default class Background extends React.PureComponent {
    }
  }

+  updateFilters() {
+    document.querySelector('#backgroundImage').style.webkitFilter = `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%)`;
+  }
+
  componentDidMount() {
    if (localStorage.getItem('background') === 'false') {
      return;
    }

+    EventBus.on('refresh', (data) => {
+      if (data === 'background') {
+        const element = document.querySelector('#backgroundImage');
+        const photoInfo = document.querySelector('.photoInformation');
+
+        if (localStorage.getItem('background') === 'false') {
+          photoInfo.style.display = 'none';
+          return element.style.display = 'none';
+        }
+
+        photoInfo.style.display = 'block';
+        element.style.display = 'block';
+
+        if (this.state.type !== localStorage.getItem('backgroundType') || (this.state.type === 'api' && this.state.currentAPI !== localStorage.getItem('backgroundAPI'))) {
+          element.classList.remove('fade-in');
+          this.setState({
+            url: '',
+            photoInfo: {
+              hidden: true
+            }
+          });
+          return this.getBackground();
+        }
+
+        this.updateFilters();
+      }
+    });
+
    this.getBackground();
  }

--- a/src/components/widgets/quicklinks/QuickLinks.jsx
+++ b/src/components/widgets/quicklinks/QuickLinks.jsx
@@ -19,11 +19,11 @@ export default class QuickLinks extends React.PureComponent {
    this.language = window.language.widgets.quicklinks;
  }

-  deleteLink(name, event) {
+  deleteLink(key, event) {
    event.preventDefault();

    let data = JSON.parse(localStorage.getItem('quicklinks'));
-    data = data.filter((i) => i.name !== name);
+    data = data.filter((i) => i.key !== key);

    localStorage.setItem('quicklinks', JSON.stringify(data));
    this.setState({
@@ -35,7 +35,8 @@ export default class QuickLinks extends React.PureComponent {
    let data = JSON.parse(localStorage.getItem('quicklinks'));
    data.push({
      name: this.state.name,
-      url: this.state.url
+      url: this.state.url,
+      key: Math.random().toString(36).substring(7) + 1
    });

    localStorage.setItem('quicklinks', JSON.stringify(data));
@@ -87,9 +88,9 @@ export default class QuickLinks extends React.PureComponent {

    const tooltipEnabled = localStorage.getItem('quicklinkstooltip');

-    const quickLink = (item, index) => {
+    const quickLink = (item) => {
      const link = (
-        <a key={index} onContextMenu={(e) => this.deleteLink(item.name, e)} href={item.url} target={target} rel={rel} draggable={false}>
+        <a key={item.key} onContextMenu={(e) => this.deleteLink(item.key, e)} href={item.url} target={target} rel={rel} draggable={false}>
          <img src={'https://icons.duckduckgo.com/ip2/' + item.url.replace('https://', '').replace('http://', '') + '.ico'} alt={item.name} draggable={false}/>
        </a>
      );
@@ -103,11 +104,11 @@ export default class QuickLinks extends React.PureComponent {

    return (
      <div className='quicklinks-container'>
-        {this.state.items.map((item, index) => (
-          quickLink(item, index)
+        {this.state.items.map((item) => (
+          quickLink(item)
        ))}
        <button className='quicklinks' onClick={this.toggleAdd}>+</button>
-        <span className='quicklinkscontainer' style={{'visibility': this.state.showAddLink}}>
+        <span className='quicklinkscontainer' style={{ 'visibility': this.state.showAddLink }}>
          <div className='topbarquicklinks'>
            <h4>{this.language.new}</h4>
            <TextareaAutosize rowsMax={1} placeholder={this.language.name} value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} />
--- a/src/components/widgets/quicklinks/quicklinks.scss
+++ b/src/components/widgets/quicklinks/quicklinks.scss
@@ -1,5 +1,6 @@
 .quicklinks {
  position: relative;
+  user-select: none;

  h3 {
    text-shadow: none;
@@ -49,6 +50,8 @@ textarea {

  h4 {
    margin: 0;
+    cursor: initial;
+    user-select: none;
  }
 }

--- a/src/components/widgets/quote/Quote.jsx
+++ b/src/components/widgets/quote/Quote.jsx
@@ -20,7 +20,8 @@ export default class Quote extends React.PureComponent {
      author: '',
      favourited: <StarIcon2 className='copyButton' onClick={this.favourite} />,
      tweet: '',
-      copy: ''
+      copy: '',
+      quoteLanguage: ''
    };

    this.buttons = {
@@ -98,7 +99,8 @@ export default class Quote extends React.PureComponent {

    // First we try and get a quote from the API...
    try {
-      const data = await (await fetch(window.constants.API_URL + '/quotes/random?language=' + localStorage.getItem('quotelanguage'))).json();
+      const quotelanguage = localStorage.getItem('quotelanguage');
+      const data = await (await fetch(window.constants.API_URL + '/quotes/random?language=' + quotelanguage)).json();

      // If we hit the ratelimit, we fallback to local quotes
      if (data.statusCode === 429) {
@@ -113,7 +115,8 @@ export default class Quote extends React.PureComponent {
      this.setState({
        quote: '"' + data.quote + '"',
        author: data.author,
-        authorlink: authorlink
+        authorlink: authorlink,
+        quoteLanguage: quotelanguage
      });
    } catch (e) {
      // ..and if that fails we load one locally
@@ -156,7 +159,7 @@ export default class Quote extends React.PureComponent {
      tweet: (localStorage.getItem('tweetButton') === 'false') ? null : this.buttons.tweet
    });

-    if (!this.state.quote) {
+    if (!this.state.quote || localStorage.getItem('quotelanguage') !== this.state.quoteLanguage) {
      this.getQuote();
    }
  }
--- a/src/components/widgets/quote/quote.scss
+++ b/src/components/widgets/quote/quote.scss
@@ -17,6 +17,7 @@
 .quoteauthor {
  font-size: 0.9em;
  letter-spacing: 0.5px;
+  user-select: none;

  svg {
    margin-left: 10px;
--- a/src/components/widgets/search/search.scss
+++ b/src/components/widgets/search/search.scss
@@ -18,10 +18,12 @@
    transition: width 0.5s ease-in-out;
    color: white;
    padding: 0.5rem 1rem;
+    user-select: none;

    &:focus {
      width: 400px;
      background-color: rgba(0, 0, 0, .3);
+      user-select: text;
    }
  }

--- a/src/components/widgets/time/clock.scss
+++ b/src/components/widgets/time/clock.scss
@@ -26,3 +26,7 @@
  background: map-get($theme-colours, 'main') !important;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
 }
+
+.clock-container {
+  margin-top: 13px;
+}
--- a/src/translations/en_GB.json
+++ b/src/translations/en_GB.json
@@ -291,13 +291,13 @@
        "quote_packs": "Quote Packs",
        "preset_settings": "Preset Settings",
        "themes": "Themes",
+        "no_items": "No items in this category",
        "product": {
          "overview": "Overview",
          "information": "Information",
          "last_updated": "Last Updated",
          "version": "Version",
          "author": "Authour",
-          "no_items": "No items in this category",
          "notice": {
            "title": "Notice",
            "description": "In order for the change to take place, the page must be refreshed."