perf: marketplace cleanup and improvements

2026-07-16 05:23:49 +02:00 · 2021-04-14 15:49:07 +01:00
parent 6ca99789c7
commit 6137139586
11 changed files with 63 additions and 109 deletions
--- a/src/components/modals/main/marketplace/Item.jsx
+++ b/src/components/modals/main/marketplace/Item.jsx
@@ -31,32 +31,29 @@ export default function Item(props) {
  return (
    <div id='item' style={{ 'display': props.display }}>
      <br/>
-      <span>
-        <ArrowBackIcon className='backArrow' onClick={props.toggleFunction}/>
-      </span>
+      <span><ArrowBackIcon className='backArrow' onClick={props.toggleFunction}/></span>
      <br/>
      <h1>{props.data.display_name}</h1>
      {props.button}
      <br/>
      <img alt='product' draggable='false' src={iconsrc}/>
      <div className='informationContainer'>
-      <h1>{language.overview}</h1>
-      <p className='description' dangerouslySetInnerHTML={{__html: props.data.description}}></p>
-        <div className='productInformation'>
-          <ul>
-            {/* <li className='header'>{language.last_updated}</li>
-            <li>{props.data.updated}</li>
-            <br/>*/}
-            <li className='header'>{language.version}</li>
-            <li>{props.data.version}</li>
-            <br/>
-            <li className='header'>{language.author}</li>
-           <li>{props.data.author}</li>
-         </ul>
-        </div>
-        {warningHTML} 
+        <h1>{language.overview}</h1>
+        <p className='description' dangerouslySetInnerHTML={{__html: props.data.description}}></p>
+          <div className='productInformation'>
+            <ul>
+              {/* <li className='header'>{language.last_updated}</li>
+              <li>{props.data.updated}</li>
+              <br/>*/}
+              <li className='header'>{language.version}</li>
+              <li>{props.data.version}</li>
+              <br/>
+              <li className='header'>{language.author}</li>
+             <li>{props.data.author}</li>
+           </ul>
+          </div>
+          {warningHTML} 
      </div>
-      <br/>
    </div>
  );
 }
--- a/src/components/modals/main/marketplace/sections/Added.jsx
+++ b/src/components/modals/main/marketplace/sections/Added.jsx
@@ -13,11 +13,6 @@ export default class Added extends React.PureComponent {
    super();
    this.state = {
      installed: JSON.parse(localStorage.getItem('installed')),
-      current_data: {
-        type: '',
-        name: '',
-        content: {}
-      },
      item: {
        name: 'Name',
        author: 'Author',
@@ -53,10 +48,7 @@ export default class Added extends React.PureComponent {
          //updated: info.updated,
          version: info.version,
          icon: info.screenshot_url
-        }
-      });
-
-      this.setState({
+        },
        button: this.buttons.uninstall,
        display: {
          marketplace: 'none',
@@ -85,16 +77,8 @@ export default class Added extends React.PureComponent {
  }

  render() {
-    let content = (
-      <Items 
-        items={this.state.installed} 
-        toggleFunction={(input) => this.toggle('item', input)} 
-        reloadItemsList={() => this.setState({ installed: JSON.parse(localStorage.getItem('installed')) })} 
-      />
-    );
-
    if (this.state.installed.length === 0) {
-      content = (
+      return (
        <div className='emptyitems'>
          <div className='emptyMessage'>
            <LocalMallIcon/>
@@ -107,8 +91,8 @@ export default class Added extends React.PureComponent {

    return (
      <>
-        <div id='marketplace' style={{ 'display': this.state.display.marketplace }}>
-          {content}
+        <div style={{ 'display': this.state.display.marketplace }}>
+          <Items items={this.state.installed} toggleFunction={(input) => this.toggle('item', input)} />        
        </div>
        <Item data={this.state.item} button={this.state.button} toggleFunction={() => this.toggle()} display={this.state.display.item} />
      </>
--- a/src/components/modals/main/marketplace/sections/Marketplace.jsx
+++ b/src/components/modals/main/marketplace/sections/Marketplace.jsx
@@ -119,24 +119,20 @@ export default class Marketplace extends React.PureComponent {
  render() {
    const errorMessage = (msg) => {
      return (
-        <div id='marketplace'>
-          <div className='emptyitems'>
-            <div className='emptyMessage'>
-              {msg}
-            </div>
+        <div className='emptyitems'>
+          <div className='emptyMessage'>
+            {msg}
          </div>
        </div>
      );
    }

    if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
-      return errorMessage(
-        <>
-          <WifiOffIcon/>
-          <h1>{this.language.offline.title}</h1>
-          <p className='description'>{this.language.offline.description}</p>
-        </>
-      );
+      return errorMessage(<>
+        <WifiOffIcon/>
+        <h1>{this.language.offline.title}</h1>
+        <p className='description'>{this.language.offline.description}</p>
+      </>);
    }

    if (this.state.done === false) {
@@ -148,20 +144,18 @@ export default class Marketplace extends React.PureComponent {
        <LocalMallIcon/>
        <h1>{window.language.modals.main.addons.empty.title}</h1>
        <p className='description'>{this.language.no_items}</p>
-      </>)
+      </>);
    }

    return (
      <>
-        <div id='marketplace' style={{ 'display': this.state.display.marketplace }}>
+        <div style={{ 'display': this.state.display.marketplace }}>
          <div className='featured' style={{ 'backgroundColor': this.state.featured.colour }}>
            <p>{this.state.featured.title}</p>
            <h1>{this.state.featured.name}</h1>
-            <button className='addToMue' onClick={() => window.location.href = this.state.featured.buttonLink}>{this.state.featured.buttonText}</button>
+            <button className='addToMue' onClick={() => window.open(this.state.featured.buttonLink)}>{this.state.featured.buttonText}</button>
          </div>
-          <Items
-            items={this.state.items}
-            toggleFunction={(input) => this.toggle('item', input)} />
+          <Items items={this.state.items} toggleFunction={(input) => this.toggle('item', input)} />
        </div>
        <Item data={this.state.item} button={this.state.button} toggleFunction={() => this.toggle()} display={this.state.display.item} />
      </>
--- a/src/components/modals/main/marketplace/sections/Sideload.jsx
+++ b/src/components/modals/main/marketplace/sections/Sideload.jsx
@@ -14,10 +14,8 @@ export default function Sideload() {

  return (
    <>
-      <div id='marketplace'>
-        <FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => install(JSON.parse(e.target.result))} />
-        <button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>{window.language.modals.main.addons.sideload}</button>
-      </div>
+      <FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => install(JSON.parse(e.target.result))} />
+      <button className='addToMue sideload' onClick={() => document.getElementById('file-input').click()}>{window.language.modals.main.addons.sideload}</button>
    </>
  );
 }
--- a/src/components/modals/main/scss/index.scss
+++ b/src/components/modals/main/scss/index.scss
@@ -6,7 +6,9 @@
@import 'settings/dropdown';
@import 'settings/daypicker';

-@import './settings/react-color-picker-gradient-picker-custom-styles.scss';
+@import 'settings/react-color-picker-gradient-picker-custom-styles.scss';
+
+@import 'marketplace/main';

 .Modal {
  color: var(--modal-text);
--- a/src/components/modals/main/scss/marketplace/_main.scss
+++ b/src/components/modals/main/scss/marketplace/_main.scss
@@ -106,6 +106,7 @@ p.description {
  box-shadow: 0 0 10px rgb(0 0 0 / 30%);
  position: absolute;
  width: 300px;
+
  svg {
    font-size: 50px;
    margin-bottom: -20px;
@@ -114,6 +115,8 @@ p.description {

 .backArrow {
  cursor: pointer;
+  width: 2rem !important;
+  height: 2rem !important;

  &:hover {
    color: grey;
@@ -158,22 +161,6 @@ p.description {
  width: auto;
 }

-.marketplaceanimation {
-  @include animation('content 0.5s');
-}
-
-@include keyframes(content) {
-  from {
-    opacity: 0;
-    transform: translateY(5%);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0%);
-  }
-}
-
 .featured {
  margin-top: 40px;
  border-radius: 15px;
@@ -197,18 +184,4 @@ p.description {
  h1 {
    margin-top: -20px;
  }
-}
-
-.dark .featured {
-  background: black;
-  color: white;
-}
-
-#seemore {
-  display: none;
-
-  svg {
-    font-size: 35px !important;
-    margin-bottom: -30px;
-  }
-}
+}
--- a/src/components/modals/main/scss/settings/_buttons.scss
+++ b/src/components/modals/main/scss/settings/_buttons.scss
@@ -134,8 +134,7 @@
  @extend %storebutton;
 }

-.sideload,
-.seemore {
+.sideload {
  margin-top: 12px;
 }

--- a/src/components/widgets/background/Background.jsx
+++ b/src/components/widgets/background/Background.jsx
@@ -225,6 +225,18 @@ export default class Background extends React.PureComponent {
  componentDidMount() {
    const element = document.querySelector('#backgroundImage');

+    const refresh = () => {
+      element.classList.remove('fade-in');
+      this.setState({
+        url: '',
+        video: false,
+        photoInfo: {
+          hidden: true
+        }
+      });
+      this.getBackground();
+    }
+
    EventBus.on('refresh', (data) => {
      if (data === 'background') {
        const backgroundType = localStorage.getItem('backgroundType');
@@ -234,15 +246,7 @@ export default class Background extends React.PureComponent {
          || (localStorage.getItem('backgroundAPI') !== this.state.currentAPI && backgroundType === 'api') 
          || (backgroundType === 'custom' && localStorage.getItem('customBackground') !== this.state.url)
        ) {
-          element.classList.remove('fade-in');
-          this.setState({
-            url: '',
-            video: false,
-            photoInfo: {
-              hidden: true
-            }
-          });
-          return this.getBackground();
+          return refresh();
        }

        if (this.state.video === true) {
@@ -251,6 +255,10 @@ export default class Background extends React.PureComponent {
          element.style.webkitFilter = `blur(${localStorage.getItem('blur')}px) brightness(${localStorage.getItem('brightness')}%)`;
        }
      }
+
+      if (data === 'marketplacebackgrounduninstall') {
+        refresh();
+      }
    });

    this.getBackground();
--- a/src/modules/helpers/marketplace.js
+++ b/src/modules/helpers/marketplace.js
@@ -25,7 +25,7 @@ export default class MarketplaceFunctions {
        localStorage.removeItem('photo_packs');
        localStorage.setItem('backgroundType', localStorage.getItem('oldBackgroundType'));
        localStorage.removeItem('oldBackgroundType');
-        EventBus.dispatch('refresh', 'background');
+        EventBus.dispatch('refresh', 'marketplacebackgrounduninstall');
        break;
      default:
        try {
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -26,15 +26,15 @@ $modal: (

 $marketplace: (
  'item-background': rgba(242, 243, 244, 1),
-  'product-information-backgroud': rgba(242, 243, 244, 1),
+  'product-information-backgroud': rgba(242, 243, 244, 1)
 );

 $button-colours: (
  'confirm': rgba(46, 213, 115, 1),
  'reset': rgba(255, 71, 87, 1),
-  'other': rgba(83, 82, 237, 1),
+  'other': rgba(83, 82, 237, 1)
 );

 $main-parts: (
-    'shadow':  0 0 1rem 0 rgba(0, 0, 0, .2),
+  'shadow':  0 0 1rem 0 rgba(0, 0, 0, .2)
 );
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -3,7 +3,6 @@
@import 'themes';

@import 'modules/toast';
-@import 'modules/marketplace';
@import 'modules/buttons';

 body {