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

forwarding dialog looks and works as expected

Browse Source
This commit is contained in:
or-else
2021-10-04 16:52:20 -07:00
parent 2e45ac6bf9
commit a17b3d5b9c
13 changed files with 112 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/base.css
+9 -7
View File
@@ -348,7 +348,7 @@ div.alert-container {
div.alert {
position: relative;
background-color: white;
box-shadow: 0 1px 6px rgba(0, 0, 0, .45);
box-shadow: 0.15rem 0.15rem 1.5rem rgb(0 0 0 / 45%);
padding: 1rem;
border-radius: 0.3rem;
margin: auto 2rem auto 2rem;
@@ -2542,14 +2542,16 @@ ul.tabbar li.active > a {
/* Message forwarding. */
.forward-dialog {
position: relative;
overflow: auto;
overflow: hidden;
background-color: white;
box-shadow: 0 1px 6px rgba(0, 0, 0, .45);
box-shadow: 0.15rem 0.15rem 1.5rem rgb(0 0 0 / 45%);
padding: 0.5rem;
border-radius: 0.3rem;
margin: auto 1rem auto 1rem;
width: fit-content;
min-width: 16rem;
max-width: 24rem;
max-height: 80%;
width: 24rem;
height: 80%;
}
.forward-dialog .scrollable-panel {
height: 80%;
}
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
+3 -3
View File
@@ -905,7 +905,7 @@ class MessagesView extends React.Component {
<ImagePreview
content={this.state.imagePreview}
tinode={this.props.tinode}
replyTo={this.state.reply}
reply={this.state.reply}
onCancelReply={this.handleCancelReply}
onClose={this.handleClosePreview}
onSendMessage={this.sendImageAttachment} />
@@ -923,7 +923,7 @@ class MessagesView extends React.Component {
<DocPreview
content={this.state.docPreview}
tinode={this.props.tinode}
replyTo={this.state.reply}
reply={this.state.reply}
onCancelReply={this.handleCancelReply}
onClose={this.handleClosePreview}
onSendMessage={this.sendFileAttachment} />
@@ -1112,7 +1112,7 @@ class MessagesView extends React.Component {
onAttachFile={this.props.forwardedMessage == null ? this.handleAttachFile : null}
onAttachImage={this.props.forwardedMessage == null ? this.handleAttachImage : null}
onError={this.props.onError}
replyTo={this.state.reply}
reply={this.state.reply}
onQuoteClick={this.handleQuoteClick}
onCancelReply={this.handleCancelReply} />}
</>
src/views/tinode-web.jsx
-1
View File
@@ -204,7 +204,6 @@ class TinodeWeb extends React.Component {
contextMenuItems: [],
forwardDialogVisible: false,
forwardDialogClickAt: null,
forwardMessage: null,
// Modal alert dialog.
src/widgets/context-menu.jsx
-4
View File
@@ -418,10 +418,6 @@ class ContextMenu extends React.Component {
});
}
replyToMessage(params, errorHandler) {
console.log("Reply to message", params);
}
// Function is used by context menu to set permissions.
topicPermissionSetter(mode, params, errorHandler) {
const topic = this.props.tinode.getTopic(params.topicName);
src/widgets/doc-preview.jsx
+1 -1
View File
@@ -48,7 +48,7 @@ export default class DocPreview extends React.PureComponent {
<SendMessage
noInput={true}
tinode={this.props.tinode}
replyTo={this.props.replyTo}
reply={this.props.reply}
onCancelReply={this.props.onCancelReply}
onSendMessage={this.handleSendDoc}
onError={this.props.onError} />
src/widgets/forward-dialog.jsx
+12 -9
View File
@@ -63,15 +63,18 @@ export default class ForwardDialog extends React.Component {
</div>
<SearchContacts
onSearchContacts={this.handleSearchContacts} />
<ContactList
tinode={this.props.tinode}
contacts={contacts}
myUserId={this.props.myUserId}
emptyListMessage={null}
showOnline={false}
showUnread={false}
showContextMenu={false}
onTopicSelected={this.handleContactSelected} />
<FormattedMessage id="search_no_results" defaultMessage="Search returned no results"
description="Text shown in contacts view when query returned no results.">{
(not_found_placeholder) => <ContactList
tinode={this.props.tinode}
contacts={contacts}
myUserId={this.props.myUserId}
emptyListMessage={not_found_placeholder}
showOnline={false}
showUnread={false}
showContextMenu={false}
onTopicSelected={this.handleContactSelected} />
}</FormattedMessage>
</div>
</div>
);
src/widgets/image-preview.jsx
+1 -1
View File
@@ -72,7 +72,7 @@ export default class ImagePreview extends React.PureComponent {
messagePrompt="add_image_caption"
acceptBlank={true}
tinode={this.props.tinode}
replyTo={this.props.replyTo}
reply={this.props.reply}
onCancelReply={this.props.onCancelReply}
onSendMessage={this.handleSendImage}
onError={this.props.onError} />
src/widgets/send-message.jsx
+55 -56
View File
@@ -53,6 +53,8 @@ class SendMessage extends React.PureComponent {
this.handleMessageTyping = this.handleMessageTyping.bind(this);
this.handleQuoteClick = this.handleQuoteClick.bind(this);
this.formatReply = this.formatReply.bind(this);
}
componentDidMount() {
@@ -60,12 +62,7 @@ class SendMessage extends React.PureComponent {
this.messageEditArea.addEventListener('paste', this.handlePasteEvent, false);
}
this.setState({quote: this.props.replyTo ?
Drafty.format(this.props.replyTo.content, replyFormatter, {
formatMessage: this.props.intl.formatMessage.bind(this.props.intl),
authorizeURL: this.props.tinode.authorizeURL.bind(this.props.tinode)
}) :
null});
this.setState({quote: this.formatReply()});
}
componentWillUnmount() {
@@ -79,16 +76,19 @@ class SendMessage extends React.PureComponent {
this.messageEditArea.focus();
}
if (prevProps.replyTo != this.props.replyTo) {
this.setState({quote: this.props.replyTo ?
Drafty.format(this.props.replyTo.content, replyFormatter, {
formatMessage: this.props.intl.formatMessage.bind(this.props.intl),
authorizeURL: this.props.tinode.authorizeURL.bind(this.props.tinode)
}) :
null});
if (prevProps.reply != this.props.reply) {
this.setState({quote: this.formatReply()});
}
}
formatReply() {
return this.props.reply ?
Drafty.format(this.props.reply.content, replyFormatter, {
formatMessage: this.props.intl.formatMessage.bind(this.props.intl),
authorizeURL: this.props.tinode.authorizeURL.bind(this.props.tinode)
}) : null;
}
handlePasteEvent(e) {
if (this.props.disabled) {
return;
@@ -163,8 +163,8 @@ class SendMessage extends React.PureComponent {
handleQuoteClick(e) {
e.preventDefault();
e.stopPropagation();
if (this.props.replyTo && this.props.onQuoteClick) {
const replyToSeq = this.props.replyTo.seq;
if (this.props.reply && this.props.onQuoteClick) {
const replyToSeq = this.props.reply.seq;
this.props.onQuoteClick(replyToSeq);
}
}
@@ -179,49 +179,48 @@ class SendMessage extends React.PureComponent {
return (
<div id="send-message-wrapper">
{this.state.quote ?
<div id="reply-quote-preview">
<div className="cancel">
<a href="#" onClick={(e) => {e.preventDefault(); this.props.onCancelReply();}}><i className="material-icons gray">close</i></a>
{this.state.quote ?
<div id="reply-quote-preview">
<div className="cancel">
<a href="#" onClick={(e) => {e.preventDefault(); this.props.onCancelReply();}}><i className="material-icons gray">close</i></a>
</div>
{this.state.quote}
</div>
{this.state.quote}
:
null}
<div id="send-message-panel">
{!this.props.disabled ?
<>
{this.props.onAttachFile ?
<>
<a href="#" onClick={(e) => {e.preventDefault(); this.attachImage.click();}} title="Add image">
<i className="material-icons secondary">photo</i>
</a>
<a href="#" onClick={(e) => {e.preventDefault(); this.attachFile.click();}} title="Attach file">
<i className="material-icons secondary">attach_file</i>
</a>
</>
:
null}
{this.props.noInput ?
<div className="hr thin" /> :
<textarea id="sendMessage" placeholder={prompt}
value={this.state.message} onChange={this.handleMessageTyping}
onKeyPress={this.handleKeyPress}
ref={(ref) => {this.messageEditArea = ref;}}
autoFocus />}
<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 id="writing-disabled">{prompt}</div>
}
</div>
:
null}
<div id="send-message-panel">
{!this.props.disabled ?
<>
{this.props.onAttachFile ?
<>
<a href="#" onClick={(e) => {e.preventDefault(); this.attachImage.click();}} title="Add image">
<i className="material-icons secondary">photo</i>
</a>
<a href="#" onClick={(e) => {e.preventDefault(); this.attachFile.click();}} title="Attach file">
<i className="material-icons secondary">attach_file</i>
</a>
</>
:
null}
{this.props.noInput ?
<div className="hr thin" /> :
<textarea id="sendMessage" placeholder={prompt}
value={this.state.message} onChange={this.handleMessageTyping}
onKeyPress={this.handleKeyPress}
ref={(ref) => {this.messageEditArea = ref;}}
autoFocus />}
<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 id="writing-disabled">{prompt}</div>
}
</div>
</div>
);
}
umd/index.dev.js
+27 -24
View File
@@ -4213,7 +4213,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
component2 = react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_image_preview_jsx__WEBPACK_IMPORTED_MODULE_8__["default"], {
content: this.state.imagePreview,
tinode: this.props.tinode,
replyTo: this.state.reply,
reply: this.state.reply,
onCancelReply: this.handleCancelReply,
onClose: this.handleClosePreview,
onSendMessage: this.sendImageAttachment
@@ -4227,7 +4227,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
component2 = react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_doc_preview_jsx__WEBPACK_IMPORTED_MODULE_5__["default"], {
content: this.state.docPreview,
tinode: this.props.tinode,
replyTo: this.state.reply,
reply: this.state.reply,
onCancelReply: this.handleCancelReply,
onClose: this.handleClosePreview,
onSendMessage: this.sendFileAttachment
@@ -4448,7 +4448,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
onAttachFile: this.props.forwardedMessage == null ? this.handleAttachFile : null,
onAttachImage: this.props.forwardedMessage == null ? this.handleAttachImage : null,
onError: this.props.onError,
replyTo: this.state.reply,
reply: this.state.reply,
onQuoteClick: this.handleQuoteClick,
onCancelReply: this.handleCancelReply
}));
@@ -5452,7 +5452,6 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
contextMenuParams: null,
contextMenuItems: [],
forwardDialogVisible: false,
forwardDialogClickAt: null,
forwardMessage: null,
alertVisible: false,
alertParams: {},
@@ -9123,10 +9122,6 @@ class ContextMenu extends (react__WEBPACK_IMPORTED_MODULE_0___default().Componen
});
}
replyToMessage(params, errorHandler) {
console.log("Reply to message", params);
}
topicPermissionSetter(mode, params, errorHandler) {
const topic = this.props.tinode.getTopic(params.topicName);
@@ -9538,7 +9533,7 @@ class DocPreview extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompo
})), " ", (0,_lib_strformat_js__WEBPACK_IMPORTED_MODULE_3__.bytesToHumanSize)(this.props.content.size)))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_send_message_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
noInput: true,
tinode: this.props.tinode,
replyTo: this.props.replyTo,
reply: this.props.reply,
onCancelReply: this.props.onCancelReply,
onSendMessage: this.handleSendDoc,
onError: this.props.onError
@@ -9765,16 +9760,22 @@ class ForwardDialog extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compon
className: "material-icons"
}, "close")))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_search_contacts_jsx__WEBPACK_IMPORTED_MODULE_4__["default"], {
onSearchContacts: this.handleSearchContacts
}), react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_contact_list_jsx__WEBPACK_IMPORTED_MODULE_3__["default"], {
}), react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
id: "search_no_results",
defaultMessage: [{
"type": 0,
"value": "Search returned no results"
}]
}, not_found_placeholder => react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_contact_list_jsx__WEBPACK_IMPORTED_MODULE_3__["default"], {
tinode: this.props.tinode,
contacts: contacts,
myUserId: this.props.myUserId,
emptyListMessage: null,
emptyListMessage: not_found_placeholder,
showOnline: false,
showUnread: false,
showContextMenu: false,
onTopicSelected: this.handleContactSelected
})));
}))));
}
}
@@ -10295,7 +10296,7 @@ class ImagePreview extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom
messagePrompt: "add_image_caption",
acceptBlank: true,
tinode: this.props.tinode,
replyTo: this.props.replyTo,
reply: this.props.reply,
onCancelReply: this.props.onCancelReply,
onSendMessage: this.handleSendImage,
onError: this.props.onError
@@ -11715,6 +11716,7 @@ class SendMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
this.handleKeyPress = this.handleKeyPress.bind(this);
this.handleMessageTyping = this.handleMessageTyping.bind(this);
this.handleQuoteClick = this.handleQuoteClick.bind(this);
this.formatReply = this.formatReply.bind(this);
}
componentDidMount() {
@@ -11723,10 +11725,7 @@ class SendMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
}
this.setState({
quote: this.props.replyTo ? tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.format(this.props.replyTo.content, _lib_formatters_js__WEBPACK_IMPORTED_MODULE_5__.replyFormatter, {
formatMessage: this.props.intl.formatMessage.bind(this.props.intl),
authorizeURL: this.props.tinode.authorizeURL.bind(this.props.tinode)
}) : null
quote: this.formatReply()
});
}
@@ -11741,16 +11740,20 @@ class SendMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
this.messageEditArea.focus();
}
if (prevProps.replyTo != this.props.replyTo) {
if (prevProps.reply != this.props.reply) {
this.setState({
quote: this.props.replyTo ? tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.format(this.props.replyTo.content, _lib_formatters_js__WEBPACK_IMPORTED_MODULE_5__.replyFormatter, {
formatMessage: this.props.intl.formatMessage.bind(this.props.intl),
authorizeURL: this.props.tinode.authorizeURL.bind(this.props.tinode)
}) : null
quote: this.formatReply()
});
}
}
formatReply() {
return this.props.reply ? tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.format(this.props.reply.content, _lib_formatters_js__WEBPACK_IMPORTED_MODULE_5__.replyFormatter, {
formatMessage: this.props.intl.formatMessage.bind(this.props.intl),
authorizeURL: this.props.tinode.authorizeURL.bind(this.props.tinode)
}) : null;
}
handlePasteEvent(e) {
if (this.props.disabled) {
return;
@@ -11828,8 +11831,8 @@ class SendMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
e.preventDefault();
e.stopPropagation();
if (this.props.replyTo && this.props.onQuoteClick) {
const replyToSeq = this.props.replyTo.seq;
if (this.props.reply && this.props.onQuoteClick) {
const replyToSeq = this.props.reply.seq;
this.props.onQuoteClick(replyToSeq);
}
}
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