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

forwarding UI prettier and more usable

Browse Source
This commit is contained in:
or-else
2021-10-05 15:56:20 -07:00
parent a17b3d5b9c
commit 8f672405bc
15 changed files with 68 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/base.css
+7
View File
@@ -2535,6 +2535,13 @@ ul.tabbar li.active > a {
content: '';
}
#send-message-panel #reply-quote-preview {
width: 100%;
}
#send-message-panel #reply-quote-preview .reply-quote {
margin-bottom: 0.35rem;
}
.mention {
font-weight: bolder;
}
css/base.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
src/config.js
+2
View File
@@ -95,6 +95,8 @@ export const MESSAGE_PREVIEW_LENGTH = 80;
// Length of a quote in quoted reply (for outgoing messages).
export const QUOTED_REPLY_LENGTH = 30;
// Length of a preview of a forwarded message.
export const FORWARDED_PREVIEW_LENGTH = 128;
// Link for "Contact Us".
export const LINK_CONTACT_US = 'email:support@tinode.co';
src/views/messages-view.jsx
+11 -9
View File
@@ -216,12 +216,12 @@ class MessagesView extends React.Component {
const topic = nextProps.tinode.getTopic(nextProps.topic);
let reply = null;
if (nextProps.forwardedMessage) {
if (nextProps.forwardMessage) {
// We are forwarding a message. Show preview.
const preview = nextProps.forwardedMessage.preview;
const preview = nextProps.forwardMessage.preview;
reply = {
content: preview,
forwarded: nextProps.forwardedMessage.head.forwarded,
forwarded: nextProps.forwardMessage.head.forwarded,
seq: null
};
}
@@ -677,10 +677,10 @@ class MessagesView extends React.Component {
// sendMessage sends the message with an optional subscription to topic first.
sendMessage(msg, uploadCompletionPromise, uploader) {
let head;
if (this.props.forwardedMessage) {
if (this.props.forwardMessage) {
// We are forwarding a message.
msg = this.props.forwardedMessage.msg;
head = this.props.forwardedMessage.head;
msg = this.props.forwardMessage.msg;
head = this.props.forwardMessage.head;
this.handleCancelReply();
} else if (this.state.reply && this.state.reply.content) {
// We are replying to a message in this topic.
@@ -844,6 +844,8 @@ class MessagesView extends React.Component {
}
handlePickReply(seq, content, forwarded, senderId, senderName) {
console.log("handlePickReply", seq, content, forwarded, senderId, senderName, new Error("stacktrace"));
this.setState({reply: null});
if (!seq || !content) {
@@ -1105,12 +1107,12 @@ class MessagesView extends React.Component {
:
<SendMessage
tinode={this.props.tinode}
noInput={this.props.forwardedMessage != null}
noInput={!!this.props.forwardMessage}
disabled={!this.state.isWriter}
onKeyPress={this.sendKeyPress}
onSendMessage={this.sendMessage}
onAttachFile={this.props.forwardedMessage == null ? this.handleAttachFile : null}
onAttachImage={this.props.forwardedMessage == null ? this.handleAttachImage : null}
onAttachFile={this.props.forwardMessage ? null : this.handleAttachFile}
onAttachImage={this.props.forwardMessage ? null : this.handleAttachImage}
onError={this.props.onError}
reply={this.state.reply}
onQuoteClick={this.handleQuoteClick}
src/views/tinode-web.jsx
+3 -4
View File
@@ -1453,7 +1453,7 @@ class TinodeWeb extends React.Component {
Tinode.Drafty.forwardedContent(params.content) :
typeof params.content == 'string' ?
Tinode.Drafty.init(params.content) : params.content;
const preview = Tinode.Drafty.preview(content, QUOTED_REPLY_LENGTH,
const preview = Tinode.Drafty.preview(content, FORWARDED_PREVIEW_LENGTH,
undefined, params.forwarded != null);
const msg = Tinode.Drafty.append(
Tinode.Drafty.appendLineBreak(
@@ -1644,7 +1644,7 @@ class TinodeWeb extends React.Component {
<ForwardDialog
tinode={this.tinode}
contacts={this.state.chatList}
topicSelected={this.props.topicSelected}
topicSelected={this.state.topicSelected}
myUserId={this.state.myUserId}
hide={this.handleHideForwardDialog}
@@ -1752,8 +1752,7 @@ class TinodeWeb extends React.Component {
serverAddress={this.state.serverAddress}
applicationVisible={this.state.applicationVisible}
// Show the forwareded message if the user has selected a topic to forward this message to.
forwardedMessage={this.state.forwardMessage && !this.state.forwardMessage.head.forwarded.startsWith(this.stateTopicSelected) ? this.state.forwardMessage : null}
forwardMessage={this.state.forwardMessage}
onCancelForwardMessage={this.handleHideForwardDialog}
errorText={this.state.errorText}
src/widgets/chat-message.jsx
+1
View File
@@ -78,6 +78,7 @@ class BaseChatMessage extends React.PureComponent {
menuItems.push('menu_item_reply');
menuItems.push('menu_item_forward');
}
this.props.showContextMenu({
seq: this.props.seq,
content: this.props.content,
src/widgets/context-menu.jsx
+1 -9
View File
@@ -191,9 +191,7 @@ class ContextMenu extends React.Component {
'menu_item_forward': {
id: 'menu_item_forward',
title: formatMessage(messages.forward),
handler: (params, errorHandler) => {
return this.forwardMessage(params, errorHandler);
}
handler: () => {} /* the action is taken directly in tinode-web */
},
'topic_unmute': {
id: 'topic_unmute',
@@ -439,12 +437,6 @@ class ContextMenu extends React.Component {
params.pickReply(params.seq, params.content, params.forwarded, params.userFrom, params.userName, errorHandler);
}
forwardMessage(params, errorHandler) {
//params.pickReply({ seq: params.seq, content: params.content });
//this.props.
console.log('forwarding msg ', params);
}
render() {
const menu = [];
let count = 0;
src/widgets/forward-dialog.jsx
+5 -2
View File
@@ -50,8 +50,11 @@ export default class ForwardDialog extends React.Component {
render() {
let contacts = this.state.query != null ? this.props.searchResults : this.props.contacts;
// Filter out contacts without a 'W' permission.
contacts = contacts.filter((c) => { return c.acs.isJoiner() && c.acs.isWriter(); });
// Filter out contacts without a 'W' or 'J' permissions as well as the current topic.
contacts = contacts.filter((c) => {
console.log(c.name, this.props.topicSelected);
return (c.name != this.props.topicSelected) && c.acs.isJoiner() && c.acs.isWriter();
});
return (
<div className="alert-container">
src/widgets/send-message.jsx
+10 -10
View File
@@ -177,17 +177,17 @@ class SendMessage extends React.PureComponent {
formatMessage(messages[this.props.messagePrompt]) :
formatMessage(messages.type_new_message));
const 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>);
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>
</div>
{this.state.quote}
</div>
:
null}
{this.state.quote && !this.props.noInput ? quote : null}
<div id="send-message-panel">
{!this.props.disabled ?
<>
@@ -203,7 +203,7 @@ class SendMessage extends React.PureComponent {
:
null}
{this.props.noInput ?
<div className="hr thin" /> :
(this.state.quote ? quote : <div className="hr thin" />) :
<textarea id="sendMessage" placeholder={prompt}
value={this.state.message} onChange={this.handleMessageTyping}
onKeyPress={this.handleKeyPress}
umd/index.dev.js
+21 -24
View File
@@ -3489,11 +3489,11 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
const topic = nextProps.tinode.getTopic(nextProps.topic);
let reply = null;
if (nextProps.forwardedMessage) {
const preview = nextProps.forwardedMessage.preview;
if (nextProps.forwardMessage) {
const preview = nextProps.forwardMessage.preview;
reply = {
content: preview,
forwarded: nextProps.forwardedMessage.head.forwarded,
forwarded: nextProps.forwardMessage.head.forwarded,
seq: null
};
}
@@ -3990,9 +3990,9 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
sendMessage(msg, uploadCompletionPromise, uploader) {
let head;
if (this.props.forwardedMessage) {
msg = this.props.forwardedMessage.msg;
head = this.props.forwardedMessage.head;
if (this.props.forwardMessage) {
msg = this.props.forwardMessage.msg;
head = this.props.forwardMessage.head;
this.handleCancelReply();
} else if (this.state.reply && this.state.reply.content) {
head = {
@@ -4145,6 +4145,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
}
handlePickReply(seq, content, forwarded, senderId, senderName) {
console.log("handlePickReply", seq, content, forwarded, senderId, senderName, new Error("stacktrace"));
this.setState({
reply: null
});
@@ -4441,12 +4442,12 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
onAction: this.handleNewChatAcceptance
}) : react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_send_message_jsx__WEBPACK_IMPORTED_MODULE_13__["default"], {
tinode: this.props.tinode,
noInput: this.props.forwardedMessage != null,
noInput: !!this.props.forwardMessage,
disabled: !this.state.isWriter,
onKeyPress: this.sendKeyPress,
onSendMessage: this.sendMessage,
onAttachFile: this.props.forwardedMessage == null ? this.handleAttachFile : null,
onAttachImage: this.props.forwardedMessage == null ? this.handleAttachImage : null,
onAttachFile: this.props.forwardMessage ? null : this.handleAttachFile,
onAttachImage: this.props.forwardMessage ? null : this.handleAttachImage,
onError: this.props.onError,
reply: this.state.reply,
onQuoteClick: this.handleQuoteClick,
@@ -6951,7 +6952,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
}) : null, this.state.forwardDialogVisible ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_forward_dialog_jsx__WEBPACK_IMPORTED_MODULE_7__["default"], {
tinode: this.tinode,
contacts: this.state.chatList,
topicSelected: this.props.topicSelected,
topicSelected: this.state.topicSelected,
myUserId: this.state.myUserId,
hide: this.handleHideForwardDialog,
onInitFind: this.tnInitFind,
@@ -7052,7 +7053,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
serverVersion: this.state.serverVersion,
serverAddress: this.state.serverAddress,
applicationVisible: this.state.applicationVisible,
forwardedMessage: this.state.forwardMessage && !this.state.forwardMessage.head.forwarded.startsWith(this.stateTopicSelected) ? this.state.forwardMessage : null,
forwardMessage: this.state.forwardMessage,
onCancelForwardMessage: this.handleHideForwardDialog,
errorText: this.state.errorText,
errorLevel: this.state.errorLevel,
@@ -8911,9 +8912,7 @@ class ContextMenu extends (react__WEBPACK_IMPORTED_MODULE_0___default().Componen
'menu_item_forward': {
id: 'menu_item_forward',
title: formatMessage(messages.forward),
handler: (params, errorHandler) => {
return this.forwardMessage(params, errorHandler);
}
handler: () => {}
},
'topic_unmute': {
id: 'topic_unmute',
@@ -9145,10 +9144,6 @@ class ContextMenu extends (react__WEBPACK_IMPORTED_MODULE_0___default().Componen
params.pickReply(params.seq, params.content, params.forwarded, params.userFrom, params.userName, errorHandler);
}
forwardMessage(params, errorHandler) {
console.log('forwarding msg ', params);
}
render() {
const menu = [];
let count = 0;
@@ -9738,7 +9733,8 @@ class ForwardDialog extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compon
render() {
let contacts = this.state.query != null ? this.props.searchResults : this.props.contacts;
contacts = contacts.filter(c => {
return c.acs.isJoiner() && c.acs.isWriter();
console.log(c.name, this.props.topicSelected);
return c.name != this.props.topicSelected && c.acs.isJoiner() && c.acs.isWriter();
});
return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "alert-container"
@@ -11842,9 +11838,7 @@ class SendMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
formatMessage
} = this.props.intl;
const prompt = this.props.disabled ? formatMessage(messages.messaging_disabled) : this.props.messagePrompt ? formatMessage(messages[this.props.messagePrompt]) : formatMessage(messages.type_new_message);
return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
id: "send-message-wrapper"
}, this.state.quote ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
const quote = react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
id: "reply-quote-preview"
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "cancel"
@@ -11856,7 +11850,10 @@ class SendMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
}
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
className: "material-icons gray"
}, "close"))), this.state.quote) : null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
}, "close"))), this.state.quote);
return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
id: "send-message-wrapper"
}, this.state.quote && !this.props.noInput ? quote : null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
id: "send-message-panel"
}, !this.props.disabled ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, this.props.onAttachFile ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
href: "#",
@@ -11876,7 +11873,7 @@ class SendMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
title: "Attach file"
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
className: "material-icons secondary"
}, "attach_file"))) : null, this.props.noInput ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
}, "attach_file"))) : null, this.props.noInput ? this.state.quote ? quote : react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "hr thin"
}) : react__WEBPACK_IMPORTED_MODULE_0___default().createElement("textarea", {
id: "sendMessage",
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
umd/tinode.dev.js
+2 -2
View File
File diff suppressed because one or more lines are too long
umd/tinode.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long