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

a bit more work on delayed topic removal

Browse Source
This commit is contained in:
or-else
2022-02-22 12:54:18 -08:00
parent d76756c67a
commit cdff2ee697
12 changed files with 91 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/base.css
+20 -7
View File
@@ -714,6 +714,10 @@ table.permission-editor td.checkbox {
white-space: nowrap; white-space: nowrap;
} }
.panel-title.deleted {
text-decoration: line-through;
}
.caption-panel { .caption-panel {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -956,6 +960,12 @@ i.search {
white-space: nowrap; white-space: nowrap;
} }
.contact-box .contact-title.deleted {
opacity: 0.66;
text-decoration: line-through;
text-decoration-thickness: 0.5px;
}
.contact-box .contact-comment { .contact-box .contact-comment {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow-x: hidden; overflow-x: hidden;
@@ -1007,8 +1017,9 @@ i.search {
height: 2rem; height: 2rem;
} }
.avatar.disabled { .avatar.deleted {
opacity: 0.5; opacity: 0.75;
filter: grayscale(1);
} }
.contact-box .avatar-box > .material-icons { .contact-box .avatar-box > .material-icons {
@@ -1093,22 +1104,24 @@ img.channel {
font-size: 1.5rem; font-size: 1.5rem;
color: #0097A7; color: #0097A7;
position: absolute; position: absolute;
right: 0.05rem; right: 0;
bottom: 0.05rem; bottom: 0;
background-color: white; background-color: white;
overflow: visible; overflow: visible;
border: 0.0px solid transparent; border: 0.0px solid transparent;
padding-left: 0.5px;
} }
.contact-box .deleted.material-icons { .contact-box .deleted.material-icons {
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
font-size: 1.5rem; font-size: 1.5rem;
color: gray; color: #999;
position: absolute; position: absolute;
right: 0.05rem; right: 0;
bottom: 0.05rem; bottom: 0;
background-color: white; background-color: white;
padding-left: 0.5px;
} }
/* END of avatar box */ /* END of avatar box */
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
+11 -5
View File
@@ -204,6 +204,7 @@ class MessagesView extends React.Component {
isVerified: false, isVerified: false,
isStaff: false, isStaff: false,
isDangerous: false, isDangerous: false,
deleted: false,
docPreview: null, docPreview: null,
imagePreview: null, imagePreview: null,
imagePostview: null, imagePostview: null,
@@ -237,7 +238,8 @@ class MessagesView extends React.Component {
scrollPosition: 0, scrollPosition: 0,
fetchingMessages: false, fetchingMessages: false,
reply: reply, reply: reply,
showGoToLastButton: false showGoToLastButton: false,
deleted: topic._deleted
}; };
if (topic) { if (topic) {
@@ -1077,7 +1079,10 @@ class MessagesView extends React.Component {
} }
} }
const avatar = this.state.avatar || true; const avatar = this.state.avatar || true;
const online = this.props.online ? 'online' + (this.state.typingIndicator ? ' typing' : '') : 'offline'; const online = this.state.deleted ? null :
this.props.online ? 'online' + (this.state.typingIndicator ? ' typing' : '') : 'offline';
const titleClass = 'panel-title' + (this.state.deleted ? ' deleted' : '');
component2 = ( component2 = (
<> <>
@@ -1093,11 +1098,12 @@ class MessagesView extends React.Component {
tinode={this.props.tinode} tinode={this.props.tinode}
avatar={avatar} avatar={avatar}
topic={this.state.topic} topic={this.state.topic}
title={this.state.title} /> title={this.state.title}
deleted={this.state.deleted} />
{!isChannel ? <span className={online} /> : null} {!isChannel ? <span className={online} /> : null}
</div> </div>
<div id="topic-title-group"> <div id="topic-title-group">
<div id="topic-title" className="panel-title">{ <div id="topic-title" className={titleClass}>{
this.state.title || this.state.title ||
<i><FormattedMessage id="unnamed_topic" defaultMessage="Unnamed" <i><FormattedMessage id="unnamed_topic" defaultMessage="Unnamed"
description="Title shown when the topic has no name" /></i> description="Title shown when the topic has no name" /></i>
@@ -1158,7 +1164,7 @@ class MessagesView extends React.Component {
<SendMessage <SendMessage
tinode={this.props.tinode} tinode={this.props.tinode}
noInput={!!this.props.forwardMessage} noInput={!!this.props.forwardMessage}
disabled={!this.state.isWriter || topic.deleted} disabled={!this.state.isWriter || this.state.deleted}
onKeyPress={this.sendKeyPress} onKeyPress={this.sendKeyPress}
onSendMessage={this.sendMessage} onSendMessage={this.sendMessage}
onAttachFile={this.props.forwardMessage ? null : this.handleAttachFile} onAttachFile={this.props.forwardMessage ? null : this.handleAttachFile}
src/widgets/contact-list.jsx
+1 -1
View File
@@ -115,7 +115,7 @@ class ContactList extends React.Component {
isVerified={c.trusted && c.trusted.verified} isVerified={c.trusted && c.trusted.verified}
isStaff={c.trusted && c.trusted.staff} isStaff={c.trusted && c.trusted.staff}
isDangerous={c.trusted && c.trusted.danger} isDangerous={c.trusted && c.trusted.danger}
deleted={c.deleted} deleted={c._deleted}
item={key} item={key}
index={contactNodes.length} index={contactNodes.length}
key={key} /> key={key} />
src/widgets/contact.jsx
+5 -3
View File
@@ -86,6 +86,7 @@ class Contact extends React.Component {
const icon = deliveryMarker(this.props.received); const icon = deliveryMarker(this.props.received);
const marker = icon ? <i className={'material-icons small space-right' + const marker = icon ? <i className={'material-icons small space-right' +
(icon.color ? ' ' + icon.color : '')}>{icon.name}</i> : null; (icon.color ? ' ' + icon.color : '')}>{icon.name}</i> : null;
const titleClass = 'contact-title' + (this.props.deleted ? ' deleted' : '');
return ( return (
<li className={!this.props.showCheckmark && this.props.selected ? 'selected' : null} onClick={this.handleClick}> <li className={!this.props.showCheckmark && this.props.selected ? 'selected' : null} onClick={this.handleClick}>
@@ -95,7 +96,7 @@ class Contact extends React.Component {
avatar={avatar} avatar={avatar}
title={this.props.title} title={this.props.title}
topic={this.props.item} topic={this.props.item}
disabled={this.props.deleted} /> deleted={this.props.deleted} />
{this.props.deleted ? <i className="deleted material-icons">cancel</i> : {this.props.deleted ? <i className="deleted material-icons">cancel</i> :
this.props.showOnline ? <span className={online} /> : this.props.showOnline ? <span className={online} /> :
(this.props.showCheckmark && this.props.selected) ? (this.props.showCheckmark && this.props.selected) ?
@@ -103,9 +104,10 @@ class Contact extends React.Component {
: null} : null}
</div> </div>
<div className="text-box"> <div className="text-box">
<div><span className="contact-title">{title}</span> <div><span className={titleClass}>{title}</span>
{this.props.isChannel ? <img src="/img/channel.png" className="channel" alt="channel" /> : null} {this.props.isChannel ? <img src="/img/channel.png" className="channel" alt="channel" /> : null}
<ContactBadges badges={icon_badges} /><UnreadBadge count={this.props.unread} /> <ContactBadges badges={icon_badges} />
{!this.props.deleted ? <UnreadBadge count={this.props.unread} /> : null}
</div> </div>
{this.props.showMode ? {this.props.showMode ?
<span><ContactBadges badges={badges} /></span> : <span><ContactBadges badges={badges} /></span> :
src/widgets/letter-tile.jsx
+3 -3
View File
@@ -13,16 +13,16 @@ export default class LetterTile extends React.PureComponent {
const iconColor = idToColorClass(this.props.topic, isGroup); const iconColor = idToColorClass(this.props.topic, isGroup);
if (this.props.topic && this.props.title && this.props.title.trim()) { if (this.props.topic && this.props.title && this.props.title.trim()) {
const letter = this.props.title.trim().charAt(0); const letter = this.props.title.trim().charAt(0);
const className = 'lettertile ' + iconColor + (this.props.disabled ? ' disabled' : ''); const className = 'lettertile ' + iconColor + (this.props.deleted ? ' disabled' : '');
avatar = (<div className={className}><div>{letter}</div></div>) avatar = (<div className={className}><div>{letter}</div></div>)
} else { } else {
const className = 'material-icons ' + iconColor + (this.props.disabled ? ' disabled' : ''); const className = 'material-icons ' + iconColor + (this.props.deleted ? ' disabled' : '');
avatar = isGroup ? <i className={className}>group</i> : <i className={className}>person</i>; avatar = isGroup ? <i className={className}>group</i> : <i className={className}>person</i>;
} }
} else if (this.props.avatar) { } else if (this.props.avatar) {
const url = this.props.tinode.authorizeURL(sanitizeImageUrl(this.props.avatar)); const url = this.props.tinode.authorizeURL(sanitizeImageUrl(this.props.avatar));
// If avatar image is invalid, show a placeholder. // If avatar image is invalid, show a placeholder.
const className = 'avatar' + (this.props.disabled ? ' disabled' : ''); const className = 'avatar' + (this.props.deleted ? ' deleted' : '');
avatar = <img className={className} alt="avatar" src={url} avatar = <img className={className} alt="avatar" src={url}
onError={(e)=>{e.target.onerror = null; e.target.src="../img/broken_image.png"}} />; onError={(e)=>{e.target.onerror = null; e.target.src="../img/broken_image.png"}} />;
} else { } else {
umd/index.dev.js
+18 -13
View File
@@ -3512,6 +3512,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
isVerified: false, isVerified: false,
isStaff: false, isStaff: false,
isDangerous: false, isDangerous: false,
deleted: false,
docPreview: null, docPreview: null,
imagePreview: null, imagePreview: null,
imagePostview: null, imagePostview: null,
@@ -3544,7 +3545,8 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
scrollPosition: 0, scrollPosition: 0,
fetchingMessages: false, fetchingMessages: false,
reply: reply, reply: reply,
showGoToLastButton: false showGoToLastButton: false,
deleted: topic._deleted
}; };
if (topic) { if (topic) {
@@ -4424,7 +4426,8 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
} }
const avatar = this.state.avatar || true; const avatar = this.state.avatar || true;
const online = this.props.online ? 'online' + (this.state.typingIndicator ? ' typing' : '') : 'offline'; const online = this.state.deleted ? null : this.props.online ? 'online' + (this.state.typingIndicator ? ' typing' : '') : 'offline';
const titleClass = 'panel-title' + (this.state.deleted ? ' deleted' : '');
component2 = react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { component2 = react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
id: "topic-caption-panel", id: "topic-caption-panel",
className: "caption-panel" className: "caption-panel"
@@ -4443,14 +4446,15 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
tinode: this.props.tinode, tinode: this.props.tinode,
avatar: avatar, avatar: avatar,
topic: this.state.topic, topic: this.state.topic,
title: this.state.title title: this.state.title,
deleted: this.state.deleted
}), !isChannel ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { }), !isChannel ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
className: online className: online
}) : null), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { }) : null), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
id: "topic-title-group" id: "topic-title-group"
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
id: "topic-title", id: "topic-title",
className: "panel-title" className: titleClass
}, this.state.title || react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, { }, this.state.title || react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
id: "unnamed_topic", id: "unnamed_topic",
defaultMessage: [{ defaultMessage: [{
@@ -4524,7 +4528,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
}) : react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_send_message_jsx__WEBPACK_IMPORTED_MODULE_14__["default"], { }) : react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_send_message_jsx__WEBPACK_IMPORTED_MODULE_14__["default"], {
tinode: this.props.tinode, tinode: this.props.tinode,
noInput: !!this.props.forwardMessage, noInput: !!this.props.forwardMessage,
disabled: !this.state.isWriter || topic.deleted, disabled: !this.state.isWriter || this.state.deleted,
onKeyPress: this.sendKeyPress, onKeyPress: this.sendKeyPress,
onSendMessage: this.sendMessage, onSendMessage: this.sendMessage,
onAttachFile: this.props.forwardMessage ? null : this.handleAttachFile, onAttachFile: this.props.forwardMessage ? null : this.handleAttachFile,
@@ -8572,7 +8576,7 @@ class ContactList extends (react__WEBPACK_IMPORTED_MODULE_0___default().Componen
isVerified: c.trusted && c.trusted.verified, isVerified: c.trusted && c.trusted.verified,
isStaff: c.trusted && c.trusted.staff, isStaff: c.trusted && c.trusted.staff,
isDangerous: c.trusted && c.trusted.danger, isDangerous: c.trusted && c.trusted.danger,
deleted: c.deleted, deleted: c._deleted,
item: key, item: key,
index: contactNodes.length, index: contactNodes.length,
key: key key: key
@@ -8745,6 +8749,7 @@ class Contact extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component) {
const marker = icon ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", { const marker = icon ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
className: 'material-icons small space-right' + (icon.color ? ' ' + icon.color : '') className: 'material-icons small space-right' + (icon.color ? ' ' + icon.color : '')
}, icon.name) : null; }, icon.name) : null;
const titleClass = 'contact-title' + (this.props.deleted ? ' deleted' : '');
return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", { return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
className: !this.props.showCheckmark && this.props.selected ? 'selected' : null, className: !this.props.showCheckmark && this.props.selected ? 'selected' : null,
onClick: this.handleClick onClick: this.handleClick
@@ -8755,7 +8760,7 @@ class Contact extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component) {
avatar: avatar, avatar: avatar,
title: this.props.title, title: this.props.title,
topic: this.props.item, topic: this.props.item,
disabled: this.props.deleted deleted: this.props.deleted
}), this.props.deleted ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", { }), this.props.deleted ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
className: "deleted material-icons" className: "deleted material-icons"
}, "cancel") : this.props.showOnline ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { }, "cancel") : this.props.showOnline ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
@@ -8765,16 +8770,16 @@ class Contact extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component) {
}, "check_circle") : null), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { }, "check_circle") : null), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "text-box" className: "text-box"
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
className: "contact-title" className: titleClass
}, title), this.props.isChannel ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", { }, title), this.props.isChannel ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
src: "/img/channel.png", src: "/img/channel.png",
className: "channel", className: "channel",
alt: "channel" alt: "channel"
}) : null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_contact_badges_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], { }) : null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_contact_badges_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
badges: icon_badges badges: icon_badges
}), react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_unread_badge_jsx__WEBPACK_IMPORTED_MODULE_4__["default"], { }), !this.props.deleted ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_unread_badge_jsx__WEBPACK_IMPORTED_MODULE_4__["default"], {
count: this.props.unread count: this.props.unread
})), this.props.showMode ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_contact_badges_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], { }) : null), this.props.showMode ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_contact_badges_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
badges: badges badges: badges
})) : this.props.small ? null : react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { })) : this.props.small ? null : react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "contact-comment" className: "contact-comment"
@@ -10788,12 +10793,12 @@ class LetterTile extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompo
if (this.props.topic && this.props.title && this.props.title.trim()) { if (this.props.topic && this.props.title && this.props.title.trim()) {
const letter = this.props.title.trim().charAt(0); const letter = this.props.title.trim().charAt(0);
const className = 'lettertile ' + iconColor + (this.props.disabled ? ' disabled' : ''); const className = 'lettertile ' + iconColor + (this.props.deleted ? ' disabled' : '');
avatar = react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { avatar = react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: className className: className
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, letter)); }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, letter));
} else { } else {
const className = 'material-icons ' + iconColor + (this.props.disabled ? ' disabled' : ''); const className = 'material-icons ' + iconColor + (this.props.deleted ? ' disabled' : '');
avatar = isGroup ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", { avatar = isGroup ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
className: className className: className
}, "group") : react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", { }, "group") : react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
@@ -10802,7 +10807,7 @@ class LetterTile extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompo
} }
} else if (this.props.avatar) { } else if (this.props.avatar) {
const url = this.props.tinode.authorizeURL((0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_3__.sanitizeImageUrl)(this.props.avatar)); const url = this.props.tinode.authorizeURL((0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_3__.sanitizeImageUrl)(this.props.avatar));
const className = 'avatar' + (this.props.disabled ? ' disabled' : ''); const className = 'avatar' + (this.props.deleted ? ' deleted' : '');
avatar = react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", { avatar = react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
className: className, className: className,
alt: "avatar", alt: "avatar",
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
+28 -23
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