diff options
| -rw-r--r-- | src/plugins/messageLogger/index.tsx | 23 | ||||
| -rw-r--r-- | src/plugins/messageLogger/messageLogger.css | 8 |
2 files changed, 23 insertions, 8 deletions
diff --git a/src/plugins/messageLogger/index.tsx b/src/plugins/messageLogger/index.tsx index 5ff514e..3a20fd2 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(( <Menu.MenuItem - id={MENU_ITEM_ID} - key={MENU_ITEM_ID} + id={REMOVE_HISTORY_ID} + key={REMOVE_HISTORY_ID} label="Remove Message History" action={() => { - 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(( + <Menu.MenuItem + id={TOGGLE_DELETE_STYLE_ID} + key={TOGGLE_DELETE_STYLE_ID} + label="Toggle Deleted Highlight" + action={() => domElement.classList.toggle("messagelogger-deleted")} + /> + )); }; export default definePlugin({ diff --git a/src/plugins/messageLogger/messageLogger.css b/src/plugins/messageLogger/messageLogger.css index 5d7e6b9..da5ccc2 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; } |