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);
}
.hr.thin {
height: 0.015rem;
}
/* Element which can take focus but shows no outline */
.group-focus {
outline: none;
@@ -780,6 +784,10 @@ i.search {
overflow: hidden;
}
.flex-column.narrow {
height: auto;
}
.scrollable-panel {
overflow-y: auto;
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 */
}
#image-preview-container .material-icons {
font-size: 6rem;
}
/* Talk bubbles */
.chat-box {
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} />
:
<SendMessage
tinode={this.props.tinode}
topic={this.props.topic}
disabled={!this.state.isWriter}
onSendMessage={this.props.sendMessage}
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) {
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);
}
render() {
if (!this.props.content) {
return null;
}
const doc = iconFromMime(this.props.content.type);
return (
<div id="image-preview">
<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>
</div>
<div id="image-preview-container">
<i className="material-icons gray">{doc}</i>
</div>
<div id="image-preview-footer">
<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 className="flex-column narrow">
<i className="material-icons gray">{iconFromMime(this.props.content.type)}</i>
<div><b><FormattedMessage id="label_content_type" /></b> {this.props.content.type || 'application/octet-stream'}</div>
<div><b><FormattedMessage id="label_size" /></b> {bytesToHumanSize(this.props.content.size)}</div>
</div>
</div>
<SendMessage
tinode={this.props.tinode}
topic={this.props.topic}
messagePrompt="add_image_caption"
acceptBlank={true}
onSendMessage={this.handleSendImage}
noInput={true}
onSendMessage={this.handleSendDoc}
onError={this.props.onError} />
</div>
);
src/widgets/image-preview.jsx
-2
View File
@@ -72,8 +72,6 @@ export default class ImagePreview extends React.PureComponent {
</div>
{this.props.onSendMessage ?
<SendMessage
tinode={this.props.tinode}
topic={this.props.topic}
messagePrompt="add_image_caption"
acceptBlank={true}
onSendMessage={this.handleSendImage}
src/widgets/send-message.jsx
+26 -18
View File
@@ -53,15 +53,21 @@ class SendMessage extends React.PureComponent {
}
componentDidMount() {
this.messageEditArea.addEventListener('paste', this.handlePasteEvent, false);
if (this.messageEditArea) {
this.messageEditArea.addEventListener('paste', this.handlePasteEvent, false);
}
}
componentWillUnmount() {
this.messageEditArea.removeEventListener('paste', this.handlePasteEvent, false);
if (this.messageEditArea) {
this.messageEditArea.removeEventListener('paste', this.handlePasteEvent, false);
}
}
componentDidUpdate() {
this.messageEditArea.focus();
if (this.messageEditArea) {
this.messageEditArea.focus();
}
}
handlePasteEvent(e) {
@@ -103,7 +109,7 @@ class SendMessage extends React.PureComponent {
handleSend(e) {
e.preventDefault();
const message = this.state.message.trim();
if (message || this.props.acceptBlank) {
if (message || this.props.acceptBlank || this.props.noInput) {
this.props.onSendMessage(message);
this.setState({message: ''});
}
@@ -161,20 +167,22 @@ class SendMessage extends React.PureComponent {
</>)
:
null}
<textarea id="sendMessage" placeholder={prompt}
disabled={this.props.disabled} value={this.state.message}
onChange={this.handleMessageTyping} onKeyPress={this.handleKeyPress}
ref={(ref) => {this.messageEditArea = ref;}}
autoFocus />
{this.props.disabled ?
<i className="material-icons disabled">send</i> :
<a href="#" onClick={this.handleSend} title="Send">
<i className="material-icons">send</i>
</a>}
<input type="file" ref={(ref) => {this.attachFile = ref;}}
onChange={this.handleAttachFile} style={{display: 'none'}} />
<input type="file" ref={(ref) => {this.attachImage = ref;}} accept="image/*"
onChange={this.handleAttachImage} style={{display: 'none'}} />
{this.props.noInput ?
<div className="hr thin" /> :
<textarea id="sendMessage" placeholder={prompt}
disabled={this.props.disabled} value={this.state.message}
onChange={this.handleMessageTyping} onKeyPress={this.handleKeyPress}
ref={(ref) => {this.messageEditArea = ref;}}
autoFocus />}
{this.props.disabled ?
<i className="material-icons disabled">send</i> :
<a href="#" onClick={this.handleSend} title="Send">
<i className="material-icons">send</i>
</a>}
<input type="file" ref={(ref) => {this.attachFile = ref;}}
onChange={this.handleAttachFile} style={{display: 'none'}} />
<input type="file" ref={(ref) => {this.attachImage = ref;}} accept="image/*"
onChange={this.handleAttachImage} style={{display: 'none'}} />
</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"], {
onAction: this.handleNewChatAcceptance
}) : 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,
onSendMessage: this.props.sendMessage,
onKeyPress: this.sendKeyPress,
@@ -8485,7 +8483,7 @@ var DocPreview = function (_React$PureComponent) {
key: "handleSendDoc",
value: function handleSendDoc(caption) {
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",
@@ -8496,7 +8494,6 @@ var DocPreview = function (_React$PureComponent) {
return null;
}
var doc = iconFromMime(this.props.content.type);
return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
id: "image-preview"
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
@@ -8512,20 +8509,17 @@ var DocPreview = function (_React$PureComponent) {
className: "material-icons gray"
}, "close"))), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
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", {
className: "material-icons gray"
}, doc)), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
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"], {
}, 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: "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"
}))), 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"], {
tinode: this.props.tinode,
topic: this.props.topic,
messagePrompt: "add_image_caption",
acceptBlank: true,
onSendMessage: this.handleSendImage,
})), " ", 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"], {
noInput: true,
onSendMessage: this.handleSendDoc,
onError: this.props.onError
}));
}
@@ -9344,8 +9338,6 @@ var ImagePreview = function (_React$PureComponent) {
src: this.props.content.url,
style: size
})), 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",
acceptBlank: true,
onSendMessage: this.handleSendImage,
@@ -10901,17 +10893,23 @@ var SendMessage = function (_React$PureComponent) {
_createClass(SendMessage, [{
key: "componentDidMount",
value: function componentDidMount() {
this.messageEditArea.addEventListener('paste', this.handlePasteEvent, false);
if (this.messageEditArea) {
this.messageEditArea.addEventListener('paste', this.handlePasteEvent, false);
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.messageEditArea.removeEventListener('paste', this.handlePasteEvent, false);
if (this.messageEditArea) {
this.messageEditArea.removeEventListener('paste', this.handlePasteEvent, false);
}
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
this.messageEditArea.focus();
if (this.messageEditArea) {
this.messageEditArea.focus();
}
}
}, {
key: "handlePasteEvent",
@@ -10956,7 +10954,7 @@ var SendMessage = function (_React$PureComponent) {
e.preventDefault();
var message = this.state.message.trim();
if (message || this.props.acceptBlank) {
if (message || this.props.acceptBlank || this.props.noInput) {
this.props.onSendMessage(message);
this.setState({
message: ''
@@ -11025,7 +11023,9 @@ var SendMessage = function (_React$PureComponent) {
title: "Attach file"
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("i", {
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",
placeholder: prompt,
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