MessageLogger: Add toggle deleted highlight rightclick button
This commit is contained in:
parent
ce64631310
commit
7d55a81bac
|
@ -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 patchMessageContextMenu: NavContextMenuPatchCallback = (children, props) => () => {
|
||||||
const { message } = props;
|
const { message } = props;
|
||||||
const { deleted, editHistory, id, channel_id } = message;
|
const { deleted, editHistory, id, channel_id } = message;
|
||||||
|
@ -52,11 +53,11 @@ const patchMessageContextMenu: NavContextMenuPatchCallback = (children, props) =
|
||||||
|
|
||||||
children.push((
|
children.push((
|
||||||
<Menu.MenuItem
|
<Menu.MenuItem
|
||||||
id={MENU_ITEM_ID}
|
id={REMOVE_HISTORY_ID}
|
||||||
key={MENU_ITEM_ID}
|
key={REMOVE_HISTORY_ID}
|
||||||
label="Remove Message History"
|
label="Remove Message History"
|
||||||
action={() => {
|
action={() => {
|
||||||
if (message.deleted) {
|
if (deleted) {
|
||||||
FluxDispatcher.dispatch({
|
FluxDispatcher.dispatch({
|
||||||
type: "MESSAGE_DELETE",
|
type: "MESSAGE_DELETE",
|
||||||
channelId: channel_id,
|
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({
|
export default definePlugin({
|
||||||
|
|
|
@ -2,15 +2,15 @@
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.messagelogger-deleted :is(video),
|
.messagelogger-deleted :is(video, .emoji, [data-type="sticker"]),
|
||||||
.messagelogger-deleted-attachment,
|
.messagelogger-deleted .messagelogger-deleted-attachment,
|
||||||
.messagelogger-deleted div iframe {
|
.messagelogger-deleted div iframe {
|
||||||
filter: grayscale(1) !important;
|
filter: grayscale(1) !important;
|
||||||
transition: 150ms filter ease-in-out;
|
transition: 150ms filter ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.messagelogger-deleted:hover :is(video),
|
.messagelogger-deleted:hover :is(video, .emoji, [data-type="sticker"]),
|
||||||
.messagelogger-deleted-attachment:hover,
|
.messagelogger-deleted .messagelogger-deleted-attachment:hover,
|
||||||
.messagelogger-deleted iframe:hover {
|
.messagelogger-deleted iframe:hover {
|
||||||
filter: grayscale(0) !important;
|
filter: grayscale(0) !important;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue