diff --git a/app/static/app/js/components/SharePopup.jsx b/app/static/app/js/components/SharePopup.jsx index 075910e4..a9233244 100644 --- a/app/static/app/js/components/SharePopup.jsx +++ b/app/static/app/js/components/SharePopup.jsx @@ -4,6 +4,7 @@ import PropTypes from 'prop-types'; import ErrorMessage from './ErrorMessage'; import Utils from '../classes/Utils'; import ClipboardInput from './ClipboardInput'; +import QRCode from 'qrcode.react'; import $ from 'jquery'; class SharePopup extends React.Component{ @@ -24,7 +25,8 @@ class SharePopup extends React.Component{ this.state = { task: props.task, togglingShare: false, - error: "" + error: "", + showQR: false }; this.handleEnableSharing = this.handleEnableSharing.bind(this); @@ -60,6 +62,10 @@ class SharePopup extends React.Component{ }); } + toggleQRCode = () => { + this.setState({showQR: !this.state.showQR}); + } + render(){ const shareLink = Utils.absoluteUrl(`/public/task/${this.state.task.id}/${this.props.linksTarget}/`); const iframeUrl = Utils.absoluteUrl(`public/task/${this.state.task.id}/iframe/${this.props.linksTarget}/`); @@ -72,6 +78,14 @@ class SharePopup extends React.Component{
+ +
-
+
-
+
+
+ +
); diff --git a/app/static/app/js/css/SharePopup.scss b/app/static/app/js/css/SharePopup.scss index 7a576f22..5b154eac 100644 --- a/app/static/app/js/css/SharePopup.scss +++ b/app/static/app/js/css/SharePopup.scss @@ -30,6 +30,12 @@ margin-right: 5px; } + .btn-qrcode{ + position: absolute; + right: 0px; + top: -6px; + } + .share-links{ & > div{ margin-top: 8px; diff --git a/package.json b/package.json index caca9a03..996ac511 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "node-sass": "^3.10.1", "object.values": "^1.0.3", "proj4": "^2.4.3", + "qrcode.react": "^0.7.2", "raw-loader": "^0.5.1", "react": "^16.2.0", "react-dom": "^16.2.0",