fix: changelog tab now works, about tab fixed and improved, removed update modal and improved download button ui

2026-06-13 03:58:49 +02:00 · 2021-04-07 22:19:46 +01:00
parent ee9e5d2a90
commit 3d945656d6
9 changed files with 34 additions and 106 deletions
--- a/src/components/modals/Modals.jsx
+++ b/src/components/modals/Modals.jsx
@@ -6,7 +6,6 @@ import Modal from 'react-modal';

 // Modals are lazy loaded as the user won't use them every time they open a tab
 const Main = React.lazy(() => import('./main/Main'));
-const Update = React.lazy(() => import('./update/Update'));
 const Welcome = React.lazy(() => import('./welcome/Welcome'));
 const Feedback = React.lazy(() => import('./feedback/Feedback'));
 const renderLoader = () => <></>;
@@ -45,9 +44,6 @@ export default class Modals extends React.PureComponent {
          <Modal closeTimeoutMS={300} id='modal' onRequestClose={() => this.setState({ mainModal: false })} isOpen={this.state.mainModal} className='Modal' overlayClassName='Overlay' ariaHideApp={false}>
            <Main modalClose={() => this.setState({ mainModal: false })}/>
          </Modal>
-          <Modal onRequestClose={() => this.setState({ updateModal: false })} isOpen={this.state.updateModal} className='Modal' overlayClassName='Overlay' ariaHideApp={false}>
-            <Update modalClose={() => this.setState({ updateModal: false })}/>
-          </Modal>
          <Modal onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className='Modal welcomemodal' overlayClassName='Overlay' ariaHideApp={false}>
            <Welcome modalClose={() => this.closeWelcome()}/>
          </Modal>
--- a/src/components/modals/main/scss/index.scss
+++ b/src/components/modals/main/scss/index.scss
@@ -339,4 +339,9 @@ li {

 .resetoverlay {
  background-color: rgba(0, 0, 0, 0.5);
-}
+}
+
+.welcomeLink {
+  color: var(--modal-text) !important;
+  padding-right: 10px;
+}
--- a/src/components/modals/main/settings/sections/About.jsx
+++ b/src/components/modals/main/settings/sections/About.jsx
@@ -1,6 +1,9 @@
 import React from 'react';

 import Tooltip from '@material-ui/core/Tooltip';
+import EmailIcon from '@material-ui/icons/Email';
+import TwitterIcon from '@material-ui/icons/Twitter';
+import ForumIcon from '@material-ui/icons/Forum';

 const other_contributors = require('../../../../../modules/other_contributors.json');

@@ -68,10 +71,17 @@ export default class About extends React.PureComponent {
        <img draggable='false' style={{'height': '100px', 'width': 'auto'}} src='./././icons/logo_horizontal.png' alt='Mue logo'></img>
        <p>{this.language.copyright} 2018-{new Date().getFullYear()} Mue Tab (BSD-3 License)</p>
        <p>{this.language.version.title} {window.constants.VERSION} ({this.state.update})</p>
+
+        <h3>{window.language.modals.welcome.support}</h3>
+        <a href='mailto:hello@muetab.com' className='welcomeLink' target='_blank' rel='noopener noreferrer'><EmailIcon/></a>
+        <a href='https://twitter.com/getmue' className='welcomeLink' target='_blank' rel='noopener noreferrer'><TwitterIcon/></a>
+        <a href='https://discord.gg/zv8C9F8' className='welcomeLink' target='_blank' rel='noopener noreferrer'><ForumIcon/></a>
+
        <h3>{this.language.resources_used.title}</h3>
        <p>Pexels ({this.language.resources_used.bg_images})</p>
        <p>Google ({this.language.resources_used.pin_icon})</p>
        <p>Undraw ({this.language.resources_used.welcome_img})</p>
+
        <h3>{this.language.contributors}</h3>
        {this.state.loading}
        {this.state.contributors.map((item) => (
@@ -85,6 +95,7 @@ export default class About extends React.PureComponent {
            <a href={'https://github.com/' + item.login} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar_url + '&size=128'} alt={item.login}/></a>
          </Tooltip>
        ))}
+
        <h3>{this.language.supporters}</h3>
        {this.state.loading}
        {this.state.sponsors.map((item) => (
@@ -92,6 +103,7 @@ export default class About extends React.PureComponent {
            <a href={item.profile} target='_blank' rel='noopener noreferrer'><img draggable='false' className='abouticon' src={item.avatar + '&size=128'} alt={item.handle}></img></a>
          </Tooltip>
        ))}
+
        <h3>{this.language.photographers}</h3>
        {this.state.loading}
        <p>{this.state.photographers}</p>
--- a/src/components/modals/main/settings/sections/Changelog.jsx
+++ b/src/components/modals/main/settings/sections/Changelog.jsx
@@ -4,22 +4,23 @@ export default class Changelog extends React.PureComponent {
  constructor() {
    super();
    this.state = {
-      title: this.props.language.title,
+      title: window.language.modals.update.title,
      date: null,
-      content: this.props.language.title,
-      html: this.props.language.loading,
+      content: window.language.modals.update.title,
+      html: window.language.modals.main.loading,
      image: null
    };
+    this.language = window.language.modals.update;
  }

  async getUpdate() {
    const data = await (await fetch(window.constants.API_URL + '/getUpdate')).json();
  
    if (data.statusCode === 500 || data.title === null) {
-      const supportText = `<br/><p>${this.props.language.contact_support}: <a target='_blank' class='modalLink' href='https://muetab.com/contact'>https://muetab.com/contact</a></p>`;
+      const supportText = `<br/><p>${this.language.contact_support}: <a target='_blank' class='modalLink' style='padding-left: 0px' href='https://muetab.com/contact'>https://muetab.com/contact</a></p>`;
      return this.setState({
-        title: this.props.language.error.title,
-        html: this.props.language.error.description + supportText
+        title: this.language.error.title,
+        html: this.language.error.description + supportText
      });
    }
  
@@ -35,8 +36,8 @@ export default class Changelog extends React.PureComponent {
   componentDidMount() {
    if (localStorage.getItem('offlineMode') === 'true') {
      return this.setState({
-        title: this.props.language.offline.title,
-        html: this.props.language.offline.description
+        title: this.language.offline.title,
+        html: this.language.offline.description
      });
    }
  
--- a/src/components/modals/update/Update.jsx
+++ b/src/components/modals/update/Update.jsx
@@ -1,57 +0,0 @@
-import React from 'react';
-
-import './update.scss';
-
-export default class Update extends React.PureComponent {
-  constructor() {
-    super();
-    this.state = {
-      title: this.props.language.title,
-      date: null,
-      content: this.props.language.title,
-      html: this.props.language.loading,
-      image: null
-    };
- }
-
- async getUpdate() {
-  const data = await (await fetch(window.constants.API_URL + '/getUpdate')).json();
-
-  if (data.statusCode === 500 || data.title === null) {
-    const supportText = `<br/><p>${this.props.language.contact_support}: <a target='_blank' class='modalLink' href='https://muetab.com/contact'>https://muetab.com/contact</a></p>`;
-    return this.setState({
-      title: this.props.language.error.title,
-      html: this.props.language.error.description + supportText
-    });
-  }
-
-  this.setState({
-    title: data.title,
-    date: data.published,
-    image: data.image || null,
-    author: data.author,
-    html: data.content
-  });
- }
-
- componentDidMount() {
-  if (localStorage.getItem('offlineMode') === 'true') {
-    return this.setState({
-      title: this.props.language.offline.title,
-      html: this.props.language.offline.description
-    });
-  }
-
-  this.getUpdate();
- }
-
-  render() {
-    return <div className='updateContent'>
-      <span className='closeModal' onClick={this.props.modalClose}>&times;</span>
-      <h1 style={{ 'marginBottom': '-10px' }}>{this.state.title}</h1>
-      <h5 style={{ 'lineHeight': '0px' }}>{this.state.date}</h5>
-      {this.state.image ? <img draggable='false' src={this.state.image} alt='Update'></img> : null}
-      <p dangerouslySetInnerHTML={{ __html: this.state.html }}></p>
-      </div>;
-  }
-}
--- a/src/components/modals/update/update.scss
+++ b/src/components/modals/update/update.scss
@@ -1,16 +0,0 @@
-@import '../main/scss/index.scss';
-
-.updateContent {
-  width: 400px;
-  padding: 5px;
-
-  .closeModal {
-    margin-top: 10px;
-    font-size: 45px;
-  }
-
-  img {
-    width: 100%;
-    height: auto;
-  }
-}
--- a/src/components/widgets/background/PhotoInformation.jsx
+++ b/src/components/widgets/background/PhotoInformation.jsx
@@ -5,6 +5,7 @@ import Location from '@material-ui/icons/LocationOn';
 import Camera from '@material-ui/icons/PhotoCamera';
 import Resolution from '@material-ui/icons/Crop';
 import Photographer from '@material-ui/icons/Person';
+import Download from '@material-ui/icons/GetApp';

 const toDataURL = async (url) => {
  const response = await fetch(url);
@@ -45,7 +46,8 @@ export default function PhotoInformation(props) {
        <span>{props.info.resolution}</span>
        <Photographer/>
        <span>{props.info.credit.split(` ${language.unsplash}`)[0]}</span>
-        <button className='download' onClick={() => downloadImage(props.info)}>{language.download}</button>
+        <Download/>
+        <span className='download' onClick={() => downloadImage(props.info)}>{language.download}</span>
      </div>
    </div>
  );
--- a/src/components/widgets/background/scss/_photoinformation.scss
+++ b/src/components/widgets/background/scss/_photoinformation.scss
@@ -74,26 +74,11 @@
  }

  .download {
-    transition: ease 0.33s;
-    color: var(--modal-text);
-    background-color: rgba(83, 82, 237, 1);
+    text-decoration: underline;
    cursor: pointer;
-    padding: 10px 30px;
-    font-size: 20px;
-    border-radius: 24px;
-    box-shadow: 0 5px 15px rgba(128, 161, 144, 0.4);
+  }

-    border: 2px solid rgba(83, 82, 237, 1);
-    color: var(--modal-text);
-  
-    &:hover {
-      color: rgba(83, 82, 237, 1);
-    }
-  
-    &:hover,
-    &:active {
-      outline: none;
-      background: none;
-    }
+  .MuiSvgIcon-root {
+    cursor: initial;
  }
 }