[share dialog] added QR code for share/upload links (#4798)

2025-04-28 03:10:45 +00:00 · 2021-01-22 18:18:13 +08:00 · 2021-01-22 18:18:13 +08:00 · 45afd8c323
commit 45afd8c323
parent 1ef0ca804a
13 changed files with 125 additions and 23 deletions
--- a/frontend/package.json
+++ b/frontend/package.json
@ -30,6 +30,7 @@
    "react-i18next": "^10.12.2",
    "react-mentions": "^3.0.2",
    "react-moment": "^0.7.9",
+    "react-qr-code": "^1.0.5",
    "react-responsive": "^6.1.2",
    "react-select": "^2.4.1",
    "reactstrap": "^6.4.0",
--- a/frontend/src/components/btn-qr-code.js
+++ b/frontend/src/components/btn-qr-code.js
@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import QRCode from 'react-qr-code';
+import { Button, Popover, PopoverBody } from 'reactstrap';
+import { gettext } from '../utils/constants';
+
+import '../css/btn-qr-code.css';
+
+const propTypes = {
+  link: PropTypes.string.isRequired
+};
+
+class ButtonQR extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isPopoverOpen: false
+    };
+
+    this.btnID = 'btn-' + Math.random().toString().substr(2,5);
+  }
+
+  togglePopover = () => {
+    this.setState({
+      isPopoverOpen: !this.state.isPopoverOpen
+    });
+  }
+
+  render() {
+    const { link } = this.props;
+    const { isPopoverOpen } = this.state;
+    return (
+      <div className="ml-2">
+        <Button outline color="primary" className="btn-icon btn-qr-code-icon sf3-font sf3-font-qr-code" id={this.btnID} onClick={this.togglePopover} type="button"></Button>
+        <Popover placement="bottom" isOpen={isPopoverOpen} target={this.btnID} toggle={this.togglePopover}>
+          <PopoverBody>
+            <QRCode value={link} size={128} />
+            <p className="m-0 mt-1 text-center" style={{'maxWidth': '128px'}}>{gettext('Scan the QR code to view the shared content directly')}</p>
+          </PopoverBody>
+        </Popover>
+      </div>
+    );
+  }
+}
+
+ButtonQR.propTypes = propTypes;
+export default ButtonQR;
--- a/frontend/src/components/dialog/generate-share-link.js
+++ b/frontend/src/components/dialog/generate-share-link.js
@ -12,6 +12,7 @@ import toaster from '../toast';
 import Loading from '../loading';
 import SendLink from '../send-link';
 import DateTimePicker from '../date-and-time-picker';
+import SharedLink from '../shared-link';

 const propTypes = {
  itemPath: PropTypes.string.isRequired,
@ -370,23 +371,23 @@ class GenerateShareLink extends React.Component {
          <Form className="mb-4">
            <FormGroup className="mb-0">
              <dt className="text-secondary font-weight-normal">{gettext('Link:')}</dt>
-              <dd className="d-flex">
-                <span>{sharedLinkInfo.link}</span>{' '}
-                {sharedLinkInfo.is_expired ?
-                  <span className="err-message">({gettext('Expired')})</span> :
-                  <span className="far fa-copy action-icon" onClick={this.onCopySharedLink}></span>
-                }
+              <dd>
+                <SharedLink
+                  link={sharedLinkInfo.link}
+                  linkExpired={sharedLinkInfo.is_expired}
+                  copyLink={this.onCopySharedLink}
+                />
              </dd>
            </FormGroup>
            {!sharedLinkInfo.is_dir && sharedLinkInfo.permissions.can_download &&(  //just for file
              <FormGroup className="mb-0">
                <dt className="text-secondary font-weight-normal">{gettext('Direct Download Link:')}</dt>
-                <dd className="d-flex">
-                  <span>{sharedLinkInfo.link}?dl=1</span>{' '}
-                  {sharedLinkInfo.is_expired ?
-                    <span className="err-message">({gettext('Expired')})</span> :
-                    <span className="far fa-copy action-icon" onClick={this.onCopyDownloadLink}></span>
-                  }
+                <dd>
+                  <SharedLink
+                    link={`${sharedLinkInfo.link}?dl=1`}
+                    linkExpired={sharedLinkInfo.is_expired}
+                    copyLink={this.onCopyDownloadLink}
+                  />
                </dd>
              </FormGroup>
            )}
--- a/frontend/src/components/dialog/generate-upload-link.js
+++ b/frontend/src/components/dialog/generate-upload-link.js
@ -10,6 +10,7 @@ import UploadLink from '../../models/upload-link';
 import toaster from '../toast';
 import SendLink from '../send-link';
 import DateTimePicker from '../date-and-time-picker';
+import SharedLink from '../shared-link';

 const propTypes = {
  itemPath: PropTypes.string.isRequired,
@ -264,9 +265,12 @@ class GenerateUploadLink extends React.Component {
          <Form className="mb-4">
            <FormGroup>
              <dt className="text-secondary font-weight-normal">{gettext('Upload Link:')}</dt>
-              <dd className="d-flex">
-                <span>{sharedUploadInfo.link}</span>
-                <span className="far fa-copy action-icon" onClick={this.onCopyUploadLink}></span>
+              <dd>
+                <SharedLink
+                  link={sharedUploadInfo.link}
+                  linkExpired={sharedUploadInfo.is_expired}
+                  copyLink={this.onCopyUploadLink}
+                />
              </dd>
            </FormGroup>
            {sharedUploadInfo.expire_date && (
--- a/frontend/src/components/shared-link.js
+++ b/frontend/src/components/shared-link.js
@ -0,0 +1,36 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Input, InputGroup, InputGroupAddon } from 'reactstrap';
+import { gettext } from '../utils/constants';
+import ButtonQR from './btn-qr-code';
+
+const propTypes = {
+  link: PropTypes.string.isRequired,
+  linkExpired: PropTypes.bool.isRequired,
+  copyLink: PropTypes.func.isRequired
+};
+
+// for 'share link' & 'upload link'
+class SharedLink extends React.Component {
+
+  render() {
+    const { link, linkExpired, copyLink } = this.props;
+    return (
+      <Fragment>
+        <div className="d-flex">
+          <InputGroup>
+            <Input type="text" readOnly={true} value={link} />
+            <InputGroupAddon addonType="append">
+              <Button color="primary" onClick={copyLink} className="border-0">{gettext('Copy')}</Button>
+            </InputGroupAddon>
+          </InputGroup>
+          <ButtonQR link={link} />
+        </div>
+        {linkExpired && <p className="err-message mt-1">({gettext('Expired')})</p>}
+      </Fragment>
+    );
+  }
+}
+
+SharedLink.propTypes = propTypes;
+export default SharedLink;
--- a/frontend/src/css/btn-qr-code.css
+++ b/frontend/src/css/btn-qr-code.css
@ -0,0 +1,6 @@
+.btn-qr-code-icon {
+  font-size: 1.5rem;
+  line-height: 1;
+  font-weight: normal;
+  padding: 0.375rem;
+}
--- a/media/css/sf_font3/iconfont.css
+++ b/media/css/sf_font3/iconfont.css
@ -1,10 +1,10 @@
@font-face {font-family: "sf3-font";
-  src: url('iconfont.eot?t=1608001670426'); /* IE9 */
-  src: url('iconfont.eot?t=1608001670426#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
-  url('iconfont.woff?t=1608001670426') format('woff'),
-  url('iconfont.ttf?t=1608001670426') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
-  url('iconfont.svg?t=1608001670426#sf3-font') format('svg'); /* iOS 4.1- */
+  src: url('iconfont.eot?t=1611200069054'); /* IE9 */
+  src: url('iconfont.eot?t=1611200069054#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+  url('iconfont.woff?t=1611200069054') format('woff'),
+  url('iconfont.ttf?t=1611200069054') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1611200069054#sf3-font') format('svg'); /* iOS 4.1- */
 }

 .sf3-font {
@ -15,6 +15,10 @@
  -moz-osx-font-smoothing: grayscale;
 }

+.sf3-font-qr-code:before {
+  content: "\e716";
+}
+
 .sf3-font-share-from-other-servers:before {
  content: "\e70f";
 }
--- a/media/css/sf_font3/iconfont.eot
+++ b/media/css/sf_font3/iconfont.eot
--- a/media/css/sf_font3/iconfont.js
+++ b/media/css/sf_font3/iconfont.js
--- a/media/css/sf_font3/iconfont.svg
+++ b/media/css/sf_font3/iconfont.svg
@ -20,7 +20,10 @@ Created by iconfont
  />
    <missing-glyph />
    
-    <glyph glyph-name="share-from-other-servers" unicode="&#59151;" d="M849.28 770.496c0 33.12-29.12 60.928-62.464 60.928H94.56c-33.376 0-60.928-27.52-60.928-60.928v-186.432h815.68V770.496zM352.512 671.456H148.576V744.032h203.904v-72.576z m179.552 17.472a36.192 36.192 0 0 0-1.6 36.576c5.856 11.648 19.104 19.04 32.32 19.04 19.072 0 34.976-15.872 36.544-34.944 1.088-20.672-13.76-37.088-33.888-38.144-13.248 0-25.92 5.824-33.376 17.472z m149.92-17.472a37.664 37.664 0 0 0-37.632 34.976c0 20.128 15.904 36.544 34.976 37.6 20.128 0 36.544-15.904 37.6-34.976 0-20.128-15.904-37.6-34.944-37.6zM352.48 78.78399999999999v-33.92H148.576v73.12h185.376a340.928 340.928 0 0 0-21.728 87.36H32.064v-203.904c0-24.896 19.04-43.424 43.424-43.424h390.336a339.84 339.84 0 0 0-113.344 120.768z m-203.904 271.68v73.12h203.904v-19.072a342.944 342.944 0 0 0 92.16 106.464H32.064v-247.872h279.104c2.144 30.72 7.968 59.84 17.504 87.36H148.576zM668.16 552.3199999999999c-170.56 0-309.312-138.784-309.312-309.344s138.784-309.312 309.312-309.312c170.56 0 309.312 138.752 309.312 309.312s-138.24 309.312-309.312 309.312z m64.768-101.056c33.92 0 60.064-27.104 60.064-60.704 0-33.568-27.424-60.672-61.344-60.672s-60.064 28.416-60.064 60.672c0 33.6 27.424 60.704 61.344 60.704z m-170.72-155.328l113.696 72.064c4.512-11.104 10.336-18.944 20.8-27.136l-114.88-75.2a57.408 57.408 0 0 1-19.616 30.272z m-99.84-46.912c0 33.6 27.104 60.672 60.672 60.672s60.672-27.104 60.672-60.672c0-33.6-27.104-60.704-60.672-60.704a60.608 60.608 0 0 0-60.704 60.704z m108.096-38.528c6.976 9.12 11.264 17.6 13.216 30.176l136.576-72.48c-6.976-9.088-12.544-16.704-15.168-30.848l-134.624 73.152z m195.328-22.176c33.6 0 60.704-27.104 60.704-60.672 0-33.6-28.416-60.704-61.984-60.704-33.6 0-59.424 27.136-59.424 60.704s27.136 60.672 60.704 60.672z"  horiz-adv-x="1024" />
+    <glyph glyph-name="qr-code" unicode="&#59158;" d="M432 345.6c22.4 0 38.4-16 38.4-38.4v-329.6c0-22.4-16-38.4-38.4-38.4H102.4c-22.4 0-38.4 16-38.4 38.4V307.2c0 22.4 16 38.4 38.4 38.4h329.6z m524.8-326.4v-41.6c0-22.4-16-38.4-38.4-38.4h-41.6v80h80z m-160 0v-80h-80v80h80z m0 326.4v-163.2h80v163.2h41.6c22.4 0 38.4-16 38.4-38.4v-204.8h-243.2v80h-80v-243.2h-41.6c-22.4 0-38.4 16-38.4 38.4V307.2c0 22.4 16 38.4 38.4 38.4h204.8z m-406.4-83.2H144v-243.2h243.2v243.2z m-147.2-76.8c16 9.6 35.2 9.6 51.2 0s25.6-25.6 25.6-44.8-9.6-35.2-25.6-44.8-35.2-9.6-51.2 0-25.6 25.6-25.6 44.8 9.6 35.2 25.6 44.8zM432 832c22.4 0 38.4-16 38.4-38.4v-329.6c0-22.4-16-38.4-38.4-38.4H102.4c-22.4 0-38.4 16-38.4 38.4V793.6C64 816 80 832 102.4 832h329.6z m486.4 0c22.4 0 38.4-16 38.4-38.4v-329.6c0-22.4-16-38.4-38.4-38.4H588.8c-22.4 0-38.4 16-38.4 38.4V793.6c0 22.4 16 38.4 38.4 38.4h329.6zM390.4 752H144v-243.2h243.2V752z m486.4 0h-243.2v-243.2h243.2V752zM243.2 672c16 9.6 35.2 9.6 51.2 0s25.6-25.6 25.6-44.8-12.8-32-28.8-41.6c-12.8-9.6-32-9.6-48 0s-25.6 25.6-25.6 41.6 9.6 35.2 25.6 44.8z m512 6.4c28.8 0 51.2-22.4 51.2-51.2s-22.4-51.2-51.2-51.2c-28.8 0-51.2 22.4-51.2 51.2s22.4 51.2 51.2 51.2z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="share-from-other-servers" unicode="&#59151;" d="M825.6 742.4c0 32-25.6 57.6-57.6 57.6H121.6C92.8 800 64 774.4 64 742.4v-172.8h761.6V742.4zM361.6 649.6H172.8V716.8h188.8v-67.2z m169.6 16c-6.4 9.6-6.4 22.4 0 35.2 6.4 9.6 19.2 19.2 28.8 19.2 19.2 0 32-16 35.2-32 0-19.2-12.8-35.2-32-35.2-12.8-3.2-25.6 3.2-32 12.8z m140.8-16c-19.2 0-35.2 16-35.2 32 0 19.2 16 35.2 32 35.2 19.2 0 35.2-16 35.2-32 0-19.2-16-35.2-32-35.2zM361.6 96v-32H172.8v67.2h172.8c-9.6 25.6-16 54.4-19.2 80H64v-188.8c0-22.4 19.2-41.6 41.6-41.6h364.8c-44.8 32-80 70.4-108.8 115.2z m-188.8 256v67.2h188.8v-19.2c22.4 38.4 51.2 73.6 86.4 99.2H64v-230.4h259.2c3.2 28.8 6.4 54.4 16 80H172.8zM659.2 537.6c-160 0-288-128-288-288s128-288 288-288 288 128 288 288-131.2 288-288 288z m57.6-92.8c32 0 57.6-25.6 57.6-57.6s-25.6-57.6-57.6-57.6-57.6 25.6-57.6 57.6c3.2 32 28.8 57.6 57.6 57.6z m-156.8-144l105.6 67.2c3.2-9.6 9.6-19.2 19.2-25.6L576 272c-3.2 12.8-9.6 19.2-16 28.8zM467.2 256c0 32 25.6 57.6 57.6 57.6s57.6-25.6 57.6-57.6-25.6-57.6-57.6-57.6-57.6 25.6-57.6 57.6z m99.2-35.2c6.4 9.6 9.6 16 12.8 28.8l128-67.2c-6.4-9.6-12.8-16-12.8-28.8l-128 67.2z m182.4-22.4c32 0 57.6-25.6 57.6-57.6s-25.6-57.6-57.6-57.6-54.4 25.6-54.4 57.6c-3.2 32 22.4 57.6 54.4 57.6z"  horiz-adv-x="1024" />

    
    <glyph glyph-name="tips" unicode="&#59092;" d="M512-96C249.6-96 32 118.4 32 384S249.6 864 512 864s480-214.4 480-480-214.4-480-480-480zM480 659.2c-19.2 0-35.2-16-35.2-35.2v-275.2c0-19.2 16-35.2 35.2-35.2h67.2c19.2 0 35.2 16 35.2 35.2V624c0 19.2-16 35.2-35.2 35.2H480z m0-412.8c-19.2 0-35.2-16-35.2-35.2v-67.2c0-19.2 16-35.2 35.2-35.2h67.2c19.2 0 35.2 16 35.2 35.2v67.2c0 19.2-16 35.2-35.2 35.2H480z"  horiz-adv-x="1024" />
--- a/media/css/sf_font3/iconfont.ttf
+++ b/media/css/sf_font3/iconfont.ttf
--- a/media/css/sf_font3/iconfont.woff
+++ b/media/css/sf_font3/iconfont.woff
--- a/media/css/sf_font3/iconfont.woff2
+++ b/media/css/sf_font3/iconfont.woff2