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;
}
.panel-title.deleted {
text-decoration: line-through;
}
.caption-panel {
display: flex;
align-items: center;
@@ -956,6 +960,12 @@ i.search {
white-space: nowrap;
}
.contact-box .contact-title.deleted {
opacity: 0.66;
text-decoration: line-through;
text-decoration-thickness: 0.5px;
}
.contact-box .contact-comment {
text-overflow: ellipsis;
overflow-x: hidden;
@@ -1007,8 +1017,9 @@ i.search {
height: 2rem;
}
.avatar.disabled {
opacity: 0.5;
.avatar.deleted {
opacity: 0.75;
filter: grayscale(1);
}
.contact-box .avatar-box > .material-icons {
@@ -1093,22 +1104,24 @@ img.channel {
font-size: 1.5rem;
color: #0097A7;
position: absolute;
right: 0.05rem;
bottom: 0.05rem;
right: 0;
bottom: 0;
background-color: white;
overflow: visible;
border: 0.0px solid transparent;
padding-left: 0.5px;
}
.contact-box .deleted.material-icons {
width: 1.5rem;
height: 1.5rem;
font-size: 1.5rem;
color: gray;
color: #999;
position: absolute;
right: 0.05rem;
bottom: 0.05rem;
right: 0;
bottom: 0;
background-color: white;
padding-left: 0.5px;
}
/* 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,
isStaff: false,
isDangerous: false,
deleted: false,
docPreview: null,
imagePreview: null,
imagePostview: null,
@@ -237,7 +238,8 @@ class MessagesView extends React.Component {
scrollPosition: 0,
fetchingMessages: false,
reply: reply,
showGoToLastButton: false
showGoToLastButton: false,
deleted: topic._deleted
};
if (topic) {
@@ -1077,7 +1079,10 @@ class MessagesView extends React.Component {
}
}
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 = (
<>
@@ -1093,11 +1098,12 @@ class MessagesView extends React.Component {
tinode={this.props.tinode}
avatar={avatar}
topic={this.state.topic}
title={this.state.title} />
title={this.state.title}
deleted={this.state.deleted} />
{!isChannel ? <span className={online} /> : null}
</div>
<div id="topic-title-group">
<div id="topic-title" className="panel-title">{
<div id="topic-title" className={titleClass}>{
this.state.title ||
<i><FormattedMessage id="unnamed_topic" defaultMessage="Unnamed"
description="Title shown when the topic has no name" /></i>
@@ -1158,7 +1164,7 @@ class MessagesView extends React.Component {
<SendMessage
tinode={this.props.tinode}
noInput={!!this.props.forwardMessage}
disabled={!this.state.isWriter || topic.deleted}
disabled={!this.state.isWriter || this.state.deleted}
onKeyPress={this.sendKeyPress}
onSendMessage={this.sendMessage}
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}
isStaff={c.trusted && c.trusted.staff}
isDangerous={c.trusted && c.trusted.danger}
deleted={c.deleted}
deleted={c._deleted}
item={key}
index={contactNodes.length}
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 marker = icon ? <i className={'material-icons small space-right' +
(icon.color ? ' ' + icon.color : '')}>{icon.name}</i> : null;
const titleClass = 'contact-title' + (this.props.deleted ? ' deleted' : '');
return (
<li className={!this.props.showCheckmark && this.props.selected ? 'selected' : null} onClick={this.handleClick}>
@@ -95,7 +96,7 @@ class Contact extends React.Component {
avatar={avatar}
title={this.props.title}
topic={this.props.item}
disabled={this.props.deleted} />
deleted={this.props.deleted} />
{this.props.deleted ? <i className="deleted material-icons">cancel</i> :
this.props.showOnline ? <span className={online} /> :
(this.props.showCheckmark && this.props.selected) ?
@@ -103,9 +104,10 @@ class Contact extends React.Component {
: null}
</div>
<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}
<ContactBadges badges={icon_badges} /><UnreadBadge count={this.props.unread} />
<ContactBadges badges={icon_badges} />
{!this.props.deleted ? <UnreadBadge count={this.props.unread} /> : null}
</div>
{this.props.showMode ?
<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);
if (this.props.topic && this.props.title && this.props.title.trim()) {
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>)
} 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>;
}
} else if (this.props.avatar) {
const url = this.props.tinode.authorizeURL(sanitizeImageUrl(this.props.avatar));
// 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}
onError={(e)=>{e.target.onerror = null; e.target.src="../img/broken_image.png"}} />;
} 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,
isStaff: false,
isDangerous: false,
deleted: false,
docPreview: null,
imagePreview: null,
imagePostview: null,
@@ -3544,7 +3545,8 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
scrollPosition: 0,
fetchingMessages: false,
reply: reply,
showGoToLastButton: false
showGoToLastButton: false,
deleted: topic._deleted
};
if (topic) {
@@ -4424,7 +4426,8 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
}
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", {
id: "topic-caption-panel",
className: "caption-panel"
@@ -4443,14 +4446,15 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
tinode: this.props.tinode,
avatar: avatar,
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", {
className: online
}) : null), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
id: "topic-title-group"
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
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, {
id: "unnamed_topic",
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"], {
tinode: this.props.tinode,
noInput: !!this.props.forwardMessage,
disabled: !this.state.isWriter || topic.deleted,
disabled: !this.state.isWriter || this.state.deleted,
onKeyPress: this.sendKeyPress,
onSendMessage: this.sendMessage,
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,
isStaff: c.trusted && c.trusted.staff,
isDangerous: c.trusted && c.trusted.danger,
deleted: c.deleted,
deleted: c._deleted,
item: key,
index: contactNodes.length,
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", {
className: 'material-icons small space-right' + (icon.color ? ' ' + icon.color : '')
}, icon.name) : null;
const titleClass = 'contact-title' + (this.props.deleted ? ' deleted' : '');
return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
className: !this.props.showCheckmark && this.props.selected ? 'selected' : null,
onClick: this.handleClick
@@ -8755,7 +8760,7 @@ class Contact extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component) {
avatar: avatar,
title: this.props.title,
topic: this.props.item,
disabled: this.props.deleted
deleted: this.props.deleted
}), this.props.deleted ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
className: "deleted material-icons"
}, "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", {
className: "text-box"
}, 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", {
src: "/img/channel.png",
className: "channel",
alt: "channel"
}) : null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_contact_badges_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
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
})), 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
})) : this.props.small ? null : react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
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()) {
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", {
className: className
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, letter));
} 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", {
className: className
}, "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) {
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", {
className: className,
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