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

done

Browse Source
This commit is contained in:
or-else
2020-01-18 13:42:19 +03:00
parent ed6518df9c
commit 065115d2bf
10 changed files with 70 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/base.css
+12
View File
@@ -395,6 +395,10 @@ div.alert .content {
inset 0 -0.25rem 0.25rem -0.25rem rgba(0,0,0,0.15); inset 0 -0.25rem 0.25rem -0.25rem rgba(0,0,0,0.15);
} }
.hr.thin {
height: 0.015rem;
}
/* Element which can take focus but shows no outline */ /* Element which can take focus but shows no outline */
.group-focus { .group-focus {
outline: none; outline: none;
@@ -780,6 +784,10 @@ i.search {
overflow: hidden; overflow: hidden;
} }
.flex-column.narrow {
height: auto;
}
.scrollable-panel { .scrollable-panel {
overflow-y: auto; overflow-y: auto;
margin-top: 0.25rem; margin-top: 0.25rem;
@@ -1317,6 +1325,10 @@ i.search {
box-shadow: 0px -2px 3px -1px rgba(0,0,0,0.1); /* Faint shadow above panel */ box-shadow: 0px -2px 3px -1px rgba(0,0,0,0.1); /* Faint shadow above panel */
} }
#image-preview-container .material-icons {
font-size: 6rem;
}
/* Talk bubbles */ /* Talk bubbles */
.chat-box { .chat-box {
list-style: none; list-style: none;
css/base.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
src/views/messages-view.jsx
-2
View File
@@ -783,8 +783,6 @@ class MessagesView extends React.Component {
<Invitation onAction={this.handleNewChatAcceptance} /> <Invitation onAction={this.handleNewChatAcceptance} />
: :
<SendMessage <SendMessage
tinode={this.props.tinode}
topic={this.props.topic}
disabled={!this.state.isWriter} disabled={!this.state.isWriter}
onSendMessage={this.props.sendMessage} onSendMessage={this.props.sendMessage}
onKeyPress={this.sendKeyPress} onKeyPress={this.sendKeyPress}
src/widgets/doc-preview.jsx
+7 -18
View File
@@ -21,15 +21,13 @@ export default class DocPreview extends React.PureComponent {
handleSendDoc(caption) { handleSendDoc(caption) {
this.props.onClose(); this.props.onClose();
this.props.onSendMessage(caption, this.props.content.type, this.props.content.bits, this.props.onSendMessage(this.props.content.file);
this.props.content.width, this.props.content.height, this.props.content.filename);
} }
render() { render() {
if (!this.props.content) { if (!this.props.content) {
return null; return null;
} }
const doc = iconFromMime(this.props.content.type);
return ( return (
<div id="image-preview"> <div id="image-preview">
<div id="image-preview-caption-panel"> <div id="image-preview-caption-panel">
@@ -37,24 +35,15 @@ export default class DocPreview extends React.PureComponent {
<a href="#" onClick={(e) => {e.preventDefault(); this.props.onClose();}}><i className="material-icons gray">close</i></a> <a href="#" onClick={(e) => {e.preventDefault(); this.props.onClose();}}><i className="material-icons gray">close</i></a>
</div> </div>
<div id="image-preview-container"> <div id="image-preview-container">
<i className="material-icons gray">{doc}</i> <div className="flex-column narrow">
</div> <i className="material-icons gray">{iconFromMime(this.props.content.type)}</i>
<div id="image-preview-footer"> <div><b><FormattedMessage id="label_content_type" /></b> {this.props.content.type || 'application/octet-stream'}</div>
<div> <div><b><FormattedMessage id="label_size" /></b> {bytesToHumanSize(this.props.content.size)}</div>
<div><b><FormattedMessage id="label_content_type" /></b></div>
<div>{this.props.content.type}</div>
</div>
<div>
<div><b><FormattedMessage id="label_size" /></b></div>
<div>{bytesToHumanSize(this.props.content.size)}</div>
</div> </div>
</div> </div>
<SendMessage <SendMessage
tinode={this.props.tinode} noInput={true}
topic={this.props.topic} onSendMessage={this.handleSendDoc}
messagePrompt="add_image_caption"
acceptBlank={true}
onSendMessage={this.handleSendImage}
onError={this.props.onError} /> onError={this.props.onError} />
</div> </div>
); );
src/widgets/image-preview.jsx
-2
View File
@@ -72,8 +72,6 @@ export default class ImagePreview extends React.PureComponent {
</div> </div>
{this.props.onSendMessage ? {this.props.onSendMessage ?
<SendMessage <SendMessage
tinode={this.props.tinode}
topic={this.props.topic}
messagePrompt="add_image_caption" messagePrompt="add_image_caption"
acceptBlank={true} acceptBlank={true}
onSendMessage={this.handleSendImage} onSendMessage={this.handleSendImage}
src/widgets/send-message.jsx
+26 -18
View File
@@ -53,15 +53,21 @@ class SendMessage extends React.PureComponent {
} }
componentDidMount() { componentDidMount() {
this.messageEditArea.addEventListener('paste', this.handlePasteEvent, false); if (this.messageEditArea) {
this.messageEditArea.addEventListener('paste', this.handlePasteEvent, false);
}
} }
componentWillUnmount() { componentWillUnmount() {
this.messageEditArea.removeEventListener('paste', this.handlePasteEvent, false); if (this.messageEditArea) {
this.messageEditArea.removeEventListener('paste', this.handlePasteEvent, false);
}
} }
componentDidUpdate() { componentDidUpdate() {
this.messageEditArea.focus(); if (this.messageEditArea) {
this.messageEditArea.focus();
}
} }
handlePasteEvent(e) { handlePasteEvent(e) {
@@ -103,7 +109,7 @@ class SendMessage extends React.PureComponent {
handleSend(e) { handleSend(e) {
e.preventDefault(); e.preventDefault();
const message = this.state.message.trim(); const message = this.state.message.trim();
if (message || this.props.acceptBlank) { if (message || this.props.acceptBlank || this.props.noInput) {
this.props.onSendMessage(message); this.props.onSendMessage(message);
this.setState({message: ''}); this.setState({message: ''});
} }
@@ -161,20 +167,22 @@ class SendMessage extends React.PureComponent {
</>) </>)
: :
null} null}
<textarea id="sendMessage" placeholder={prompt} {this.props.noInput ?
disabled={this.props.disabled} value={this.state.message} <div className="hr thin" /> :
onChange={this.handleMessageTyping} onKeyPress={this.handleKeyPress} <textarea id="sendMessage" placeholder={prompt}
ref={(ref) => {this.messageEditArea = ref;}} disabled={this.props.disabled} value={this.state.message}
autoFocus /> onChange={this.handleMessageTyping} onKeyPress={this.handleKeyPress}
{this.props.disabled ? ref={(ref) => {this.messageEditArea = ref;}}
<i className="material-icons disabled">send</i> : autoFocus />}
<a href="#" onClick={this.handleSend} title="Send"> {this.props.disabled ?
<i className="material-icons">send</i> <i className="material-icons disabled">send</i> :
</a>} <a href="#" onClick={this.handleSend} title="Send">
<input type="file" ref={(ref) => {this.attachFile = ref;}} <i className="material-icons">send</i>
onChange={this.handleAttachFile} style={{display: 'none'}} /> </a>}
<input type="file" ref={(ref) => {this.attachImage = ref;}} accept="image/*" <input type="file" ref={(ref) => {this.attachFile = ref;}}
onChange={this.handleAttachImage} style={{display: 'none'}} /> onChange={this.handleAttachFile} style={{display: 'none'}} />
<input type="file" ref={(ref) => {this.attachImage = ref;}} accept="image/*"
onChange={this.handleAttachImage} style={{display: 'none'}} />
</div> </div>
); );
} }
umd/index.dev.js
+21 -21
View File
@@ -3619,8 +3619,6 @@ var MessagesView = function (_React$Component) {
})), ".") : null, this.state.unconfirmed ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_widgets_Invitation_jsx__WEBPACK_IMPORTED_MODULE_8__["default"], { })), ".") : null, this.state.unconfirmed ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_widgets_Invitation_jsx__WEBPACK_IMPORTED_MODULE_8__["default"], {
onAction: this.handleNewChatAcceptance onAction: this.handleNewChatAcceptance
}) : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_widgets_send_message_jsx__WEBPACK_IMPORTED_MODULE_12__["default"], { }) : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_widgets_send_message_jsx__WEBPACK_IMPORTED_MODULE_12__["default"], {
tinode: this.props.tinode,
topic: this.props.topic,
disabled: !this.state.isWriter, disabled: !this.state.isWriter,
onSendMessage: this.props.sendMessage, onSendMessage: this.props.sendMessage,
onKeyPress: this.sendKeyPress, onKeyPress: this.sendKeyPress,
@@ -8485,7 +8483,7 @@ var DocPreview = function (_React$PureComponent) {
key: "handleSendDoc", key: "handleSendDoc",
value: function handleSendDoc(caption) { value: function handleSendDoc(caption) {
this.props.onClose(); this.props.onClose();
this.props.onSendMessage(caption, this.props.content.type, this.props.content.bits, this.props.content.width, this.props.content.height, this.props.content.filename); this.props.onSendMessage(this.props.content.file);
} }
}, { }, {
key: "render", key: "render",
@@ -8496,7 +8494,6 @@ var DocPreview = function (_React$PureComponent) {
return null; return null;
} }
var doc = iconFromMime(this.props.content.type);
return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
id: "image-preview" id: "image-preview"
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
@@ -8512,20 +8509,17 @@ var DocPreview = function (_React$PureComponent) {
className: "material-icons gray" className: "material-icons gray"
}, "close"))), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { }, "close"))), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
id: "image-preview-container" id: "image-preview-container"
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "flex-column narrow"
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("i", { }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("i", {
className: "material-icons gray" className: "material-icons gray"
}, doc)), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", { }, iconFromMime(this.props.content.type)), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("b", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__["FormattedMessage"], {
id: "image-preview-footer"
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("b", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__["FormattedMessage"], {
id: "label_content_type" id: "label_content_type"
}))), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, this.props.content.type)), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("b", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__["FormattedMessage"], { })), " ", this.props.content.type || 'application/octet-stream'), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("b", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__["FormattedMessage"], {
id: "label_size" id: "label_size"
}))), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, Object(_lib_strformat_js__WEBPACK_IMPORTED_MODULE_3__["bytesToHumanSize"])(this.props.content.size)))), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_widgets_send_message_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], { })), " ", Object(_lib_strformat_js__WEBPACK_IMPORTED_MODULE_3__["bytesToHumanSize"])(this.props.content.size)))), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_widgets_send_message_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
tinode: this.props.tinode, noInput: true,
topic: this.props.topic, onSendMessage: this.handleSendDoc,
messagePrompt: "add_image_caption",
acceptBlank: true,
onSendMessage: this.handleSendImage,
onError: this.props.onError onError: this.props.onError
})); }));
} }
@@ -9344,8 +9338,6 @@ var ImagePreview = function (_React$PureComponent) {
src: this.props.content.url, src: this.props.content.url,
style: size style: size
})), this.props.onSendMessage ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_widgets_send_message_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], { })), this.props.onSendMessage ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_widgets_send_message_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
tinode: this.props.tinode,
topic: this.props.topic,
messagePrompt: "add_image_caption", messagePrompt: "add_image_caption",
acceptBlank: true, acceptBlank: true,
onSendMessage: this.handleSendImage, onSendMessage: this.handleSendImage,
@@ -10901,17 +10893,23 @@ var SendMessage = function (_React$PureComponent) {
_createClass(SendMessage, [{ _createClass(SendMessage, [{
key: "componentDidMount", key: "componentDidMount",
value: function componentDidMount() { value: function componentDidMount() {
this.messageEditArea.addEventListener('paste', this.handlePasteEvent, false); if (this.messageEditArea) {
this.messageEditArea.addEventListener('paste', this.handlePasteEvent, false);
}
} }
}, { }, {
key: "componentWillUnmount", key: "componentWillUnmount",
value: function componentWillUnmount() { value: function componentWillUnmount() {
this.messageEditArea.removeEventListener('paste', this.handlePasteEvent, false); if (this.messageEditArea) {
this.messageEditArea.removeEventListener('paste', this.handlePasteEvent, false);
}
} }
}, { }, {
key: "componentDidUpdate", key: "componentDidUpdate",
value: function componentDidUpdate() { value: function componentDidUpdate() {
this.messageEditArea.focus(); if (this.messageEditArea) {
this.messageEditArea.focus();
}
} }
}, { }, {
key: "handlePasteEvent", key: "handlePasteEvent",
@@ -10956,7 +10954,7 @@ var SendMessage = function (_React$PureComponent) {
e.preventDefault(); e.preventDefault();
var message = this.state.message.trim(); var message = this.state.message.trim();
if (message || this.props.acceptBlank) { if (message || this.props.acceptBlank || this.props.noInput) {
this.props.onSendMessage(message); this.props.onSendMessage(message);
this.setState({ this.setState({
message: '' message: ''
@@ -11025,7 +11023,9 @@ var SendMessage = function (_React$PureComponent) {
title: "Attach file" title: "Attach file"
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("i", { }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("i", {
className: "material-icons secondary" className: "material-icons secondary"
}, "attach_file"))) : null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("textarea", { }, "attach_file"))) : null, this.props.noInput ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
className: "hr thin"
}) : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("textarea", {
id: "sendMessage", id: "sendMessage",
placeholder: prompt, placeholder: prompt,
disabled: this.props.disabled, disabled: this.props.disabled,
umd/index.dev.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/index.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/index.prod.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long