Permalink
Browse files

Re-implement QRCode feature for shared links

(cherry picked from commit af47719)
  • Loading branch information...
1 parent 1418056 commit 9f0d59480635cabd680700d87c6ae3d6f68253d6 @cdujeu cdujeu committed Jul 6, 2016
@@ -79,6 +79,15 @@ div#react_share_form .additional-actions-links a {
display: inline-block;
margin-left: 10px;
}
+div#react_share_form .additional-actions-links a.qrcode-active {
+ color: #333333;
+}
+div#react_share_form .qrCode {
+ text-align: center;
+}
+div#react_share_form .qrCode canvas {
+ margin-top: 10px;
+}
div#react_share_form .form-legend {
color: #bbb;
margin-top: -5px !important;
@@ -98,6 +98,15 @@ div#react_share_form {
cursor: pointer;
display: inline-block;
margin-left: 10px;
+ &.qrcode-active{
+ color: #333333;
+ }
+ }
+ }
+ .qrCode{
+ text-align: center;
+ canvas{
+ margin-top: 10px;
}
}
.form-legend {
@@ -854,7 +854,7 @@
showMailer:React.PropTypes.func
},
getInitialState: function(){
- return {editLink: false, copyMessage:''};
+ return {editLink: false, copyMessage:'', showQRCode: false};
},
toggleEditMode: function(){
if(this.state.editLink && this.state.customLink){
@@ -917,6 +917,10 @@
this.props.showMailer(mailData.subject, mailData.message, []);
},
+ toggleQRCode: function(){
+ this.setState({showQRCode:!this.state.showQRCode});
+ },
+
render: function(){
var publicLink = this.props.linkData['public_link'];
var editAllowed = this.props.editAllowed && !this.props.linkData['hash_is_shorten'] && !this.context.isReadonly() && this.props.shareModel.currentIsOwner();
@@ -944,13 +948,19 @@
if(editAllowed){
actionLinks.push(<a key="customize" onClick={this.toggleEditMode}>{this.context.getMessage('193')}</a>);
}
+ if(ReactModel.Share.qrcodeEnabled()){
+ actionLinks.push(<a className={this.state.showQRCode?'qrcode-active':''} key="qrcode" onClick={this.toggleQRCode}>{this.context.getMessage('94')}</a>)
+ }
if(actionLinks.length){
actionLinks = (
<div className="additional-actions-links">{actionLinks}</div>
) ;
}else{
actionLinks = null;
}
+ if(this.state.showQRCode){
+ var qrCode = <div className="qrCode"><ReactQRCode size={128} value={publicLink} level="Q"/></div>;
+ }
return (
<div className="public-link-container">
<ReactMUI.TextField
@@ -963,6 +973,7 @@
/> {copyButton}
<div style={{textAlign:'center'}} className="section-legend" dangerouslySetInnerHTML={setHtml()}/>
{actionLinks}
+ {qrCode}
</div>
);
}
@@ -871,6 +871,10 @@
return publicLink + (publicLink.indexOf('?') !== -1 ? '&' : '?') + 'dl=true'+ ctString +'&file=/'+encodeURIComponent(node.getLabel());
}
+ static qrcodeEnabled(){
+ return global.pydio.getPluginConfigs("action.share").get("CREATE_QRCODE");
+ }
+
prepareEmail(shareType, linkId = null){
var MessageHash = global.pydio.MessageHash;
var ApplicationTitle = global.pydio.appTitle;
@@ -24,7 +24,8 @@
"lodash": "^3.10.1",
"classnames": "~2.1.3",
"react-autosuggest": "1.18.2",
- "clipboard":"^1.5.8"
+ "clipboard":"^1.5.8",
+ "qrcode.react":"0.6.1"
},
"devDependencies": {
"grunt": "~0.4.5",
@@ -14,4 +14,5 @@ window.ReactDND.flow = require('lodash/function/flow');
window.classNames = require('classnames');
window.ReactAutoSuggest = require('react-autosuggest');
window.Clipboard = require('clipboard');
+window.ReactQRCode = require('qrcode.react');
window.injectTapEventPlugin();

0 comments on commit 9f0d594

Please sign in to comment.