pro/im_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update Drafty for external attachmanes, update UI

Browse Source
This commit is contained in:
or-else
2018-06-06 16:11:50 +03:00
parent 2f307e2803
commit 9c507ba631
3 changed files with 87 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/base.css
+2 -2
View File
@@ -1225,7 +1225,7 @@ i.search {
display: flex;
}
.attachment:last-of-type {
margin-bottom: -1rem;
margin-bottom: -0.45rem;
}
/* END of talk bubbles */
@@ -1711,7 +1711,7 @@ ul.tabbar li.active > a:after {
position: relative;
height: 0.6rem;
padding: 0.15rem;
margin: 0.3rem;
margin: 0.35rem;
width: 6rem;
border-radius: 0.1rem;
background-color: silver;
drafty.js
+26 -16
View File
@@ -129,9 +129,10 @@ Sample JSON representation of the text above:
},
IM: {
open: function(data) {
var blobUrl = base64toObjectUrl(data.val, data.mime);
var res = (data.name ? '<a href="' + blobUrl + '" download="' + data.name + '">' : '') +
'<img src="' + blobUrl + '"' +
var previewUrl = data.val ? base64toObjectUrl(data.val, data.mime) : data.ref;
var downloadUrl = data.ref ? data.ref : previewUrl;
var res = (data.name ? '<a href="' + downloadUrl + '" download="' + data.name + '">' : '') +
'<img src="' + previewUrl + '"' +
(data.width ? ' width="' + data.width + '"' : '') +
(data.height ? ' height="' + data.height + '"' : '') + ' border="0" />';
console.log("open: " + res);
@@ -497,12 +498,14 @@ Sample JSON representation of the text above:
* @param {Drafty} content object to add image to.
* @param {integer} at index where the object is inserted. The length of the image is always 1.
* @param {string} mime mime-type of the image, e.g. "image/png"
* @param {string} base64bits base64-encoded image content
* @param {string} base64bits base64-encoded image content (or preview, if large image is attached)
* @param {integer} width width of the image
* @param {integer} height height of the image
* @param {string} fname file name suggestion for downloading the image.
* @param {string} refurl reference to the content. Could be null or undefined.
* @param {integer} size size of the external file. Treat is as an untrusted hint.
*/
insertImage: function(content, at, mime, base64bits, width, height, fname) {
insertImage: function(content, at, mime, base64bits, width, height, fname, refurl, size) {
content = content || {txt: " "};
content.ent = content.ent || [];
content.fmt = content.fmt || [];
@@ -519,7 +522,9 @@ Sample JSON representation of the text above:
val: base64bits,
width: width,
height: height,
name: fname
name: fname,
ref: refurl,
size: size | 0
}
});
@@ -527,14 +532,16 @@ Sample JSON representation of the text above:
},
/**
* Add file to Drafty content.
* Add file to Drafty content. Either as a blob or as a reference.
*
* @param {Drafty} content object to add image to.
* @param {string} mime mime-type of the image, e.g. "image/png"
* @param {string} base64bits base64-encoded image content
* @param {string} fname file name suggestion for downloading the image.
* @param {Drafty} content object to attach file to.
* @param {string} mime mime-type of the file, e.g. "image/png"
* @param {string} base64bits base64-encoded file content
* @param {string} fname file name suggestion for downloading.
* @param {string} refurl reference to the content. Could be null or undefined.
* @param {integer} size size of the external file. Treat is as an untrusted hint.
*/
attachFile: function(content, mime, base64bits, fname) {
attachFile: function(content, mime, base64bits, fname, refurl, size) {
content = content || {txt: ""};
content.ent = content.ent || [];
content.fmt = content.fmt || [];
@@ -550,7 +557,9 @@ Sample JSON representation of the text above:
data: {
mime: mime,
val: base64bits,
name: fname
name: fname,
ref: refurl,
size: size | 0
}
});
@@ -567,7 +576,7 @@ Sample JSON representation of the text above:
*
* @return HTML-representation of content.
*/
unsafeToHTML: function(content) {
UNSAFE_toHTML: function(content) {
var {txt, fmt, ent} = content;
var markup = [];
@@ -742,8 +751,9 @@ Sample JSON representation of the text above:
* @param {Object} entity to get the size for.
*/
getEntitySize: function(entity) {
// Value is base64 encoded. The actual object size is smaller than the encoded length.
return entity.val ? (entity.val.length * 0.75) | 0 : 0;
// Either size hint or length of value. The value is base64 encoded,
// the actual object size is smaller than the encoded length.
return entity.size ? entity.size : entity.val ? (entity.val.length * 0.75) | 0 : 0;
},
/**
index.html
+59 -7
View File
@@ -1561,7 +1561,6 @@
onError={this.props.onError} /> :
null}
<FileUploadProgress />
</div>
);
}
@@ -3178,7 +3177,7 @@
Drafty.attachments(content, function(att, i) {
attachments.push(<Message.Attachment
filename={att.name} blobUrl={Drafty.getBlobUrl(att)}
size={bytesToHumanSize(Drafty.getEntitySize(att))} key={i} />);
size={Drafty.getEntitySize(att)} key={i} />);
}, this);
content = React.createElement('span', null, Drafty.format(content, formatter, this));
}
@@ -3213,6 +3212,34 @@
}
});
var MessageUploader = React.createClass({
render: function() {
var sideClass = this.props.sequence + " right";
var bubbleClass = "bubble tip";
var attachments = [
<Message.Attachment
filename={this.props.filename} size={this.props.size}
uploader={true}
progress={this.props.progress}/>
];
return (
<li className={sideClass}>
<div>
<div className="bubble tip">
<p>{attachments}
<Message.ReceivedMarker response={this.props.response}
timestamp={this.props.timestamp} received={this.props.received} />
</p>
</div>
</div>
</li>
);
}
});
/* Received/read indicator */
Message.ReceivedMarker = React.createClass({
render: function() {
@@ -3245,14 +3272,21 @@
if (filename.length > 36) {
filename = filename.substr(0, 16) + "..." + filename.substr(-16);
}
var size = this.props.size > 0 ?
<span className="small gray">({bytesToHumanSize(this.props.size)})</span> :
null;
return (
<div className="attachment">
<div><i className="material-icons big gray">insert_drive_file</i></div>
<div className="flex-column">
<div>{filename} <span className="small gray">({this.props.size})</span></div>
<div><a href={this.props.blobUrl} download={this.props.filename}>
<i className="material-icons">file_download</i> save
</a></div>
<div>{filename} {size}</div>
{this.props.uploader ?
<FileUploadProgress progress={this.props.progress} />
:
<div><a href={this.props.blobUrl} download={this.props.filename}>
<i className="material-icons">file_download</i> save
</a></div>
}
</div>
</div>
);
@@ -3263,6 +3297,7 @@
getInitialState: function() {
return {
messages: [],
uploadFile: "test_upload_file.pdf",
onlineSubs: [],
topic: '',
title: '',
@@ -3550,7 +3585,12 @@
var previousFrom = null;
for (var i=0; i<this.state.messages.length; i++) {
var msg = this.state.messages[i];
var nextFrom = (i + 1 < this.state.messages.length) ? this.state.messages[i+1].from : null;
var nextFrom = null;
if (i + 1 < this.state.messages.length) {
nextFrom = this.state.messages[i+1].from
} else if (this.state.uploadFile) {
nextFrom = this.props.myUserId;
}
var sequence = "single";
if (msg.from === previousFrom) {
if (msg.from === nextFrom) {
@@ -3598,6 +3638,18 @@
);
}
// Upload in progress: display it as an unsent message.
if (this.state.uploadFile) {
var sequence = (this.state.messages.length > 0 &&
this.state.messages[this.state.messages.length-1].from === this.props.myUserId) ? "last" : "single";
messageNodes.push(
<MessageUploader filename={this.state.uploadFile}
size={123456} sequence={sequence} received={Received.SENDING}
viewportWidth={this.props.viewportWidth}
key="uploader" />
);
}
var lastSeen = null;
var cont = Tinode.getMeTopic().getContact(this.state.topic);
if (cont && Tinode.getTopicType(cont.topic) === "p2p") {