MessageLogger: Add toggle deleted highlight rightclick button

This commit is contained in:
Vendicated 2023-04-17 01:27:25 +02:00
parent ce64631310
commit 7d55a81bac
No known key found for this signature in database
GPG key ID: A1DC0CFB5615D905
2 changed files with 23 additions and 8 deletions

View file

@ -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({

View file

@ -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;
}