perf: marketplace cleanup and improvements

2026-07-23 00:37:27 +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
@@ -0,0 +1,187 @@
+#item a {
+  color: map-get($button-colours, 'other');
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+.emptyitems {
+  width: 25vw;
+  display: flex;
+  justify-content: center;
+  margin-top: 90px;
+}
+
+.items {
+  display: inline-grid;
+  grid-template-columns: repeat(2, 1fr);
+  margin-top: 15px;
+
+  .item {
+    position: relative;
+    border-radius: 12px;
+    height: 80px;
+    width: 260px;
+    background: map-get($marketplace, 'item-background');
+    transition: 0.5s;
+    cursor: pointer;
+    margin-right: 20px;
+    margin-top: 20px;
+    box-shadow: 0 0 6px rgb(0 0 0 / 30%);
+
+    img {
+      height: 100%;
+      width: auto;
+      border-radius: 12px 0 0 12px;
+      background: white;
+    }
+
+    h4 {
+      font-size: 20px;
+      line-height: 20px;
+      font-weight: 600;
+    }
+
+    img,
+    .details {
+      display: inline;
+    }
+
+    .details {
+      position: absolute;
+      left: 85px;
+      top: -15px;
+
+      img {
+        margin-left: 10px;
+        height: 15px;
+      }
+    }
+
+    p {
+      margin-top: 5px;
+      line-height: 20px;
+    }
+
+    &:hover {
+      transform: scale(1.1);
+    }
+  }
+}
+
+.dark .items .item {
+  background: #2d3436;
+}
+
+p.author {
+  margin-top: -5px;
+}
+
+#item {
+  display: none;
+
+  h1 {
+    font-size: 40px;
+    line-height: 20px;
+  }
+}
+
+#item>h1,
+#item>.MuiSvgIcon-root {
+  display: inline;
+}
+
+p.description {
+  margin-top: 0px;
+  max-width: 400px;
+}
+
+.emptyMessage {
+  text-align: center;
+  background: var(--sidebar);
+  padding: 25px;
+  border-radius: 30px;
+  box-shadow: 0 0 10px rgb(0 0 0 / 30%);
+  position: absolute;
+  width: 300px;
+
+  svg {
+    font-size: 50px;
+    margin-bottom: -20px;
+  }
+}
+
+.backArrow {
+  cursor: pointer;
+  width: 2rem !important;
+  height: 2rem !important;
+
+  &:hover {
+    color: grey;
+  }
+}
+
+.informationContainer {
+  margin-top: 20px;
+}
+
+.productInformation {
+  padding: 10px;
+  background: map-get($marketplace, 'product-information-backgroud');
+  width: 350px;
+  border-radius: 12px;
+
+  h4 {
+    cursor: initial !important;
+  }
+
+  li {
+    margin-left: -4px;
+    list-style: none;
+    font-size: 16px;
+    cursor: initial !important;
+
+    &.header {
+      text-transform: uppercase;
+      color: #787878;
+      margin-left: -5px;
+    }
+  }
+}
+
+.dark .productInformation {
+  background: #2d3436;
+}
+
+#item>img {
+  border-radius: 24px;
+  height: 200px;
+  width: auto;
+}
+
+.featured {
+  margin-top: 40px;
+  border-radius: 15px;
+  padding: 50px;
+  color: #fff;
+  box-shadow: 0 0 10px rgb(0 0 0 / 30%);
+  width: 100%;
+
+  button {
+    float: left;
+    margin-top: -7px;
+    border: 2px solid map-get($theme-colours, 'main');
+    color: map-get($theme-colours, 'main');
+
+    &:hover {
+      background: map-get($theme-colours, 'main');
+      color: #2d3436;
+    }
+  }
+
+  h1 {
+    margin-top: -20px;
+  }
+}
--- 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();