diff --git a/src/plugins/messageLogger/index.tsx b/src/plugins/messageLogger/index.tsx index 5ff514ecb..3a20fd232 100644 --- a/src/plugins/messageLogger/index.tsx +++ b/src/plugins/messageLogger/index.tsx @@ -43,7 +43,8 @@ function addDeleteStyle() { } } -const MENU_ITEM_ID = "message-logger-remove-history"; +const REMOVE_HISTORY_ID = "ml-remove-history"; +const TOGGLE_DELETE_STYLE_ID = "ml-toggle-style"; const patchMessageContextMenu: NavContextMenuPatchCallback = (children, props) => () => { const { message } = props; const { deleted, editHistory, id, channel_id } = message; @@ -52,11 +53,11 @@ const patchMessageContextMenu: NavContextMenuPatchCallback = (children, props) = children.push(( { - if (message.deleted) { + if (deleted) { FluxDispatcher.dispatch({ type: "MESSAGE_DELETE", channelId: channel_id, @@ -69,6 +70,20 @@ const patchMessageContextMenu: NavContextMenuPatchCallback = (children, props) = }} /> )); + + if (!deleted) return; + + const domElement = document.getElementById(`chat-messages-${channel_id}-${id}`); + if (!domElement) return; + + children.push(( + domElement.classList.toggle("messagelogger-deleted")} + /> + )); }; export default definePlugin({ diff --git a/src/plugins/messageLogger/messageLogger.css b/src/plugins/messageLogger/messageLogger.css index 5d7e6b989..da5ccc21e 100644 --- a/src/plugins/messageLogger/messageLogger.css +++ b/src/plugins/messageLogger/messageLogger.css @@ -2,15 +2,15 @@ display: none; } -.messagelogger-deleted :is(video), -.messagelogger-deleted-attachment, +.messagelogger-deleted :is(video, .emoji, [data-type="sticker"]), +.messagelogger-deleted .messagelogger-deleted-attachment, .messagelogger-deleted div iframe { filter: grayscale(1) !important; transition: 150ms filter ease-in-out; } -.messagelogger-deleted:hover :is(video), -.messagelogger-deleted-attachment:hover, +.messagelogger-deleted:hover :is(video, .emoji, [data-type="sticker"]), +.messagelogger-deleted .messagelogger-deleted-attachment:hover, .messagelogger-deleted iframe:hover { filter: grayscale(0) !important; }