Merge branch '7.0' of https://github.com/mue/mue into 7.0

2026-07-09 13:35:35 +02:00 · 2022-04-24 11:42:36 +01:00
parent 5385655b02 86cd8d55b2
commit 78c390b172
8 changed files with 67 additions and 109 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/src/components/helpers/sharemodal/ShareModal.jsx
+++ b/src/components/helpers/sharemodal/ShareModal.jsx
@@ -8,12 +8,12 @@ import { toast } from 'react-toastify';

 import './sharemodal.scss';

-export default function ShareModal({ modalClose, data }) {
+export default function ShareModal({ modalClose, data, type }) {
  const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
  const url = variables.constants.MARKETPLACE_URL + '/share/' + btoa(data.api_name);

  const copyLink = () => {
-    navigator.clipboard.writeText(url);
+    navigator.clipboard.writeText(data);
    toast('Link copied!');
  };

@@ -33,7 +33,7 @@ export default function ShareModal({ modalClose, data }) {
            onClick={() =>
              window
                .open(
-                  `https://twitter.com/intent/tweet?text=Check out ${data.data.name} on @getmue marketplace: ${url}`,
+                  `https://twitter.com/intent/tweet?text=Check out ${data.data.name} on @getmue marketplace: ${data}`,
                  '_blank',
                )
                .focus()
@@ -45,7 +45,7 @@ export default function ShareModal({ modalClose, data }) {
        <Tooltip title="Facebook">
          <button
            onClick={() =>
-              window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, '_blank').focus()
+              window.open(`https://www.facebook.com/sharer/sharer.php?u=${data}`, '_blank').focus()
            }
          >
            <FaFacebookF />
@@ -59,7 +59,7 @@ export default function ShareModal({ modalClose, data }) {
                  'mailto:email@example.com?subject=Check%20out%20this%20Mue%20addon!&body=' +
                    data.data.name +
                    'on Mue: ' +
-                    url,
+                    data,
                  '_blank',
                )
                .focus()
@@ -76,7 +76,7 @@ export default function ShareModal({ modalClose, data }) {
            onClick={() =>
              window
                .open(
-                  `https://api.qrserver.com/v1/create-qr-code/?size=154x154&data=${url}`,
+                  `https://api.qrserver.com/v1/create-qr-code/?size=154x154&data=${data}`,
                  '_blank',
                )
                .focus()
@@ -89,7 +89,7 @@ export default function ShareModal({ modalClose, data }) {
          <button
            onClick={() =>
              window
-                .open(`http://connect.qq.com/widget/shareqq/index.html?url=${url}`, '_blank')
+                .open(`http://connect.qq.com/widget/shareqq/index.html?url=${data}`, '_blank')
                .focus()
            }
          >
@@ -98,7 +98,7 @@ export default function ShareModal({ modalClose, data }) {
        </Tooltip>
      </div>
      <div className="copy">
-        <input type="text" value={url} className="left field" readOnly />
+        <input type="text" value={data} className="left field" readOnly />
        <Tooltip title="Copy link" placement="top">
          <button onClick={() => copyLink()}>
            <MdContentCopy />
--- a/src/components/modals/main/marketplace/Item.jsx
+++ b/src/components/modals/main/marketplace/Item.jsx
@@ -103,7 +103,7 @@ export default class Item extends PureComponent {
          onRequestClose={() => this.setState({ shareModal: false })}
        >
          <ShareModal
-            data={this.props.data}
+            data={variables.constants.MARKETPLACE_URL + '/share/' + btoa(this.props.data.api_name)}
            modalClose={() => this.setState({ shareModal: false })}
          />
        </Modal>
--- a/src/components/modals/main/scss/marketplace/_main.scss
+++ b/src/components/modals/main/scss/marketplace/_main.scss
@@ -6,17 +6,16 @@
@import 'scss/variables';

 .items {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 15px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-gap: 1rem;
  margin-top: 15px;

  .item {
    position: relative;
    border-radius: 12px;
    height: 70px;
-    width: 260px;
+    width: auto;
    padding: 10px;
    cursor: pointer;
    display: flex;
@@ -181,24 +180,6 @@
  }
 }

-@media (max-width: 1920px) {
-  .items {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-@media (max-width: 1680px) and (min-width: 1500px) {
-  .items {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 1440px) {
-  .items {
-    grid-template-columns: repeat(1, 1fr);
-  }
-}
-
 .emptyItems {
  width: 100%;
  height: 100%;
@@ -246,11 +227,6 @@ p.author {
  overflow-x: hidden;
 }

-@media (max-height: 1080px) {
-  .dropdownsortAddons {
-    margin-top: 40px !important;
-  }
-}

 .returnButton {
  display: grid;
--- a/src/components/modals/welcome/Welcome.jsx
+++ b/src/components/modals/welcome/Welcome.jsx
@@ -120,15 +120,6 @@ export default class WelcomeModal extends PureComponent {
            />
          </div>
          <div className="buttons">
-            {this.state.currentTab === 0 ? (
-              <button
-                className="close"
-                style={{ marginRight: '20px' }}
-                onClick={() => this.props.modalSkip()}
-              >
-                {this.getMessage('modals.welcome.buttons.preview')}
-              </button>
-            ) : null}
            {this.state.currentTab !== 0 ? (
              <button
                className="close"
@@ -137,7 +128,15 @@ export default class WelcomeModal extends PureComponent {
              >
                {this.getMessage('modals.welcome.buttons.previous')}
              </button>
-            ) : null}
+            ) : (
+              <button
+                className="close"
+                style={{ marginRight: '20px' }}
+                onClick={() => this.props.modalSkip()}
+              >
+                {this.getMessage('modals.welcome.buttons.preview')}
+              </button>
+            )}
            <button className="close" onClick={() => this.changeTab()}>
              {this.state.buttonText}
            </button>
--- a/src/components/modals/welcome/welcome.scss
+++ b/src/components/modals/welcome/welcome.scss
@@ -1,6 +1,10 @@
@import '../main/scss/index.scss';
@import 'scss/variables';

+.welcomeContent {
+  height: 100%;
+}
+
 .welcomemodal {
  position: absolute;
  margin: auto;
@@ -8,14 +12,15 @@
  right: 0;
  bottom: 0;
  left: 0;
-  height: 80%;
-  width: 60%;
+  height: 90vh;
+  width: clamp(60vw, 1400px, 90vw);
  padding: 0;
+  overflow-x: hidden !important;

  section {
    width: 50%;
    display: inline;
-    height: 80vh;
+    height: 100%;
  }

  section:nth-child(1) {
@@ -200,7 +205,7 @@ a.privacy {
  align-items: center;

  img {
-    width: 30rem !important;
+    width: clamp(20rem, 300px, 40rem);
    height: auto !important;
    display: block;
    margin: 30px;
@@ -208,58 +213,7 @@ a.privacy {
  }
 }

-@media (max-width: 1820px) and (min-width: 1200px) {
-  .welcomemodal {
-    width: 85%;
-    height: 90%;
-  }

-  section {
-    height: 90vh !important;
-  }
-}
-
-@media (max-width: 1300px) {
-  .welcomemodal {
-    overflow-x: hidden !important;
-  }
-
-  .examples img {
-    width: 20rem !important;
-  }
-
-  .buttons {
-    position: relative !important;
-    bottom: 1rem !important;
-    right: -1rem !important;
-  }
-
-  section {
-    height: 100vh !important;
-  }
-}
-
-@media (max-width: 1190px) {
-  .welcomemodal {
-    width: 90%;
-    height: 90%;
-  }
-}
-
-@media (max-width: 800px) {
-  .welcomemodal {
-    width: 100%;
-    height: 100%;
-  }
-
-  .examples img {
-    width: 15rem !important;
-  }
-
-  section {
-    height: 140vh !important;
-  }
-}

 .createButtons {
  display: flex;
--- a/src/components/widgets/background/PhotoInformation.jsx
+++ b/src/components/widgets/background/PhotoInformation.jsx
@@ -12,6 +12,7 @@ import {
  MdSource as Source,
 } from 'react-icons/md';
 import Tooltip from '../../helpers/tooltip/Tooltip';
+import Modal from 'react-modal';
 import ShareModal from '../../helpers/sharemodal/ShareModal';
 //import Hotkeys from 'react-hot-keys';
 import { toast } from 'react-toastify';
@@ -50,6 +51,7 @@ export default function PhotoInformation({ info, url, api }) {
  const [showExtraInfo, setshowExtraInfo] = useState(false);
  const [showOld, setShowOld] = useState(true);
  const [other, setOther] = useState(false);
+  const [shareModal, openShareModal] = useState(false);

  if (info.hidden === true || !info.credit) {
    return null;
@@ -199,6 +201,19 @@ export default function PhotoInformation({ info, url, api }) {
      onMouseEnter={() => setOther(true)}
      onMouseLeave={() => setOther(false)}
    >
+      <Modal
+        closeTimeoutMS={300}
+        isOpen={shareModal}
+        className="Modal mainModal"
+        overlayClassName="Overlay"
+        ariaHideApp={false}
+        onRequestClose={() => openShareModal(false)}
+      >
+        <ShareModal
+          data={info.url}
+          modalClose={() => openShareModal(false)}
+        />
+      </Modal>
      {localStorage.getItem('widgetStyle') === 'legacy' && (
        <div className="photoInformation-legacy">
          <MdInfo />
@@ -270,7 +285,7 @@ export default function PhotoInformation({ info, url, api }) {
            <>
              <div className="concept-buttons">
                <Tooltip title="Share" key="share">
-                  <Share onClick={() => copyImage(info)} />
+                  <Share onClick={() => openShareModal(true)} />
                </Tooltip>
                <Tooltip title="Favourite" key="favourite">
                  <Favourite />
@@ -308,10 +323,12 @@ export default function PhotoInformation({ info, url, api }) {
                    {width}x{height}
                  </span>
                </div>
-                {api ? <div className="concept-row">
-                  <Source />
-                  <span id="infoSource">{api.charAt(0).toUpperCase() + api.slice(1)}</span>
-                </div> : null}
+                {api ? (
+                  <div className="concept-row">
+                    <Source />
+                    <span id="infoSource">{api.charAt(0).toUpperCase() + api.slice(1)}</span>
+                  </div>
+                ) : null}
              </div>
            </>
          ) : null}
--- a/src/components/widgets/quote/Quote.jsx
+++ b/src/components/widgets/quote/Quote.jsx
@@ -13,6 +13,7 @@ import { toast } from 'react-toastify';
 //import Hotkeys from 'react-hot-keys';

 import Tooltip from '../../helpers/tooltip/Tooltip';
+import Modal from 'react-modal';
 import ShareModal from '../../helpers/sharemodal/ShareModal';

 import offline_quotes from './offline_quotes.json';
@@ -21,12 +22,13 @@ import Interval from 'modules/helpers/interval';
 import EventBus from 'modules/helpers/eventbus';

 import './quote.scss';
+import { getInitColorSchemeScript } from '@mui/material';

 export default class Quote extends PureComponent {
  buttons = {
    share: (
      <Tooltip title="Share">
-        <button onClick={() => this.shareQuote()}>
+        <button onClick={() => this.setState({ shareModal: true })}>
          <MdIosShare className="copyButton" />
        </button>
      </Tooltip>
@@ -90,7 +92,7 @@ export default class Quote extends PureComponent {
      quote: '"' + quote.quote + '"',
      author: quote.author,
      authorlink: this.getAuthorLink(quote.author),
-      authorimg: ''
+      authorimg: '',
    });
  }

@@ -405,6 +407,16 @@ export default class Quote extends PureComponent {
  render() {
    return (
      <div className="quotediv" ref={this.quotediv}>
+        <Modal
+          closeTimeoutMS={300}
+          isOpen={this.state.shareModal}
+          className="Modal mainModal"
+          overlayClassName="Overlay"
+          ariaHideApp={false}
+          onRequestClose={() => this.setState({ shareModal: false })}
+        >
+          <ShareModal data={`${this.state.quote} - ${this.state.author}`} modalClose={() => this.setState({ shareModal: false })} />
+        </Modal>
        <span className="quote" ref={this.quote}>
          {this.state.quote}
        </span>