Page MenuHomePhorge
Files F33093454

D14544.1768464862.diff
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

D14544.1768464862.diff
View Options

diff --git a/web/chat/chat-message-list.css b/web/chat/chat-message-list.css
--- a/web/chat/chat-message-list.css
+++ b/web/chat/chat-message-list.css
@@ -224,3 +224,11 @@
.pinIconRight {
right: -20px;
}
+
+.deletedMessageContent {
+ display: flex;
+ gap: 4px;
+ align-items: center;
+ color: var(--deleted-message-color);
+ background-color: var(--deleted-message-background);
+}
diff --git a/web/chat/deleted-message.react.js b/web/chat/deleted-message.react.js
new file mode 100644
--- /dev/null
+++ b/web/chat/deleted-message.react.js
@@ -0,0 +1,39 @@
+// @flow
+
+import classNames from 'classnames';
+import * as React from 'react';
+
+import SWMansionIcon from 'lib/components/swmansion-icon.react.js';
+import type { ComposableChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
+import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
+
+import css from './chat-message-list.css';
+import ComposedMessage from './composed-message.react.js';
+
+type Props = {
+ +item: ComposableChatMessageInfoItem,
+ +threadInfo: ThreadInfo,
+};
+function DeletedMessage(props: Props): React.Node {
+ const messageClassName = classNames([
+ css.textMessage,
+ css.normalTextMessage,
+ css.deletedMessageContent,
+ ]);
+
+ return (
+ <ComposedMessage
+ item={props.item}
+ threadInfo={props.threadInfo}
+ shouldDisplayPinIndicator={false}
+ sendFailed={false}
+ >
+ <div className={messageClassName}>
+ <SWMansionIcon icon="block-2" size={16} />
+ <i>Deleted message</i>
+ </div>
+ </ComposedMessage>
+ );
+}
+
+export default DeletedMessage;
diff --git a/web/chat/message.react.js b/web/chat/message.react.js
--- a/web/chat/message.react.js
+++ b/web/chat/message.react.js
@@ -9,6 +9,7 @@
import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
import css from './chat-message-list.css';
+import DeletedMessage from './deleted-message.react.js';
import { useEditModalContext } from './edit-message-provider.js';
import { ComposedEditTextMessage } from './edit-text-message.react.js';
import MultimediaMessage from './multimedia-message.react.js';
@@ -35,7 +36,9 @@
const { editState } = useEditModalContext();
let message;
- if (
+ if (item.deleted) {
+ message = <DeletedMessage item={item} threadInfo={props.threadInfo} />;
+ } else if (
item.messageInfoType === 'composable' &&
item.messageInfo.id &&
editState?.messageInfo.messageInfo?.id === item.messageInfo.id
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -353,6 +353,10 @@
/* List Item */
--listItem-background-primary-hover: var(--shades-black-90);
+
+ /* Chat */
+ --deleted-message-background: var(--shades-black-85);
+ --deleted-message-color: var(--shades-white-60);
}
/* Light theme */
@@ -464,4 +468,8 @@
/* List Item */
/* @GINSU: TODO double check these values after redesign is finished */
--listItem-background-primary-hover: var(--shades-white-70);
+
+ /* Chat */
+ --deleted-message-background: var(--shades-black-85);
+ --deleted-message-color: var(--shades-white-60);
}

File Metadata

Mime Type
text/plain
Expires
Thu, Jan 15, 8:14 AM (11 h, 10 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5936879
Default Alt Text
D14544.1768464862.diff (3 KB)

Event Timeline