Fix Some ClassNames

This commit is contained in:
thororen1234 2026-02-11 18:08:34 -05:00
parent e6396f8553
commit 8508137b1b
No known key found for this signature in database
6 changed files with 55 additions and 54 deletions

View file

@ -18,16 +18,13 @@
import { Button } from "@components/Button";
import { Heading } from "@components/Heading";
import { classNameFactory } from "@utils/css";
import { cl, Native, settings } from "@equicordplugins/messageLoggerEnhanced/index";
import { DEFAULT_IMAGE_CACHE_DIR } from "@equicordplugins/messageLoggerEnhanced/utils/constants";
import { copyWithToast } from "@utils/discord";
import { classes } from "@utils/misc";
import { findCssClassesLazy } from "@webpack";
import { Toasts } from "@webpack/common";
import { Native, settings } from "..";
import { DEFAULT_IMAGE_CACHE_DIR } from "../utils/constants";
const cl = classNameFactory("folder-upload");
const inputClasses = findCssClassesLazy("input", "inputWrapper", "editable") as Record<string, string>;
function createDirSelector(settingKey: "logsDir" | "imageCacheDir", successMessage: string) {
@ -83,18 +80,18 @@ export function SelectFolderInput({ settingsKey, successMessage }: Props) {
}
return (
<div className={classes(cl("-container"), inputClasses.input)}>
<div onClick={() => copyWithToast(path)} className={cl("-input")}>
<div className={classes(cl("folder-upload-container"), inputClasses.input)}>
<div onClick={() => copyWithToast(path)} className={cl("folder-upload-input")}>
{path == null || path === DEFAULT_IMAGE_CACHE_DIR ? "Choose Folder" : getDirName(path)}
</div>
<Button
className={cl("-button")}
className={cl("folder-upload-button")}
size="small"
onClick={onFolderSelect}
>
Browse
</Button>
</div>
</div >
);
}

View file

@ -17,6 +17,7 @@
*/
import { HeaderBarButton } from "@api/HeaderBar";
import { cl } from "@equicordplugins/messageLoggerEnhanced/index";
import { findComponentByCodeLazy } from "@webpack";
import { openLogModal } from "./LogsModal";
@ -26,7 +27,7 @@ const Icon = findComponentByCodeLazy("0-1.27-.97l-2.5.7a3");
export function OpenLogsButton() {
return (
<HeaderBarButton
className="vc-log-toolbox-btn"
className={cl("toolbox-btn")}
onClick={() => openLogModal()}
tooltip={"Open Logs"}
icon={Icon}

View file

@ -9,7 +9,6 @@ import { Button } from "@components/Button";
import { Flex } from "@components/Flex";
import { InfoIcon } from "@components/Icons";
import { Link } from "@components/Link";
import { classNameFactory } from "@utils/css";
import { copyWithToast, openUserProfile } from "@utils/discord";
import { closeAllModals, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
import { LazyComponent } from "@utils/react";
@ -18,7 +17,7 @@ import { find, findByCode, findByCodeLazy } from "@webpack";
import { Alerts, ChannelStore, ContextMenuApi, FluxDispatcher, GuildStore, Menu, NavigationRouter, React, TabBar, TextInput, Tooltip, useMemo, useRef, useState } from "@webpack/common";
import { clearMessagesIDB, DBMessageRecord, deleteMessageIDB, deleteMessagesBulkIDB } from "../db";
import { settings } from "../index";
import { cl, settings } from "../index";
import { LoggedMessage, LoggedMessageJSON } from "../types";
import { messageJsonToMessageClass } from "../utils";
import { importLogs } from "../utils/settingsUtils";
@ -56,8 +55,6 @@ const PrivateChannelRecord = findByCodeLazy(".is_message_request_timestamp,");
const MessagePreview = LazyComponent<MessagePreviewProps>(() => find(m => m?.type?.toString().includes("previewLinkTarget:") && !m?.type?.toString().includes("HAS_THREAD")));
const ChildrenAccessories = LazyComponent<ChildrenAccProops>(() => findByCode("channelMessageProps:{message:"));
const cl = classNameFactory("msg-logger-modal-");
export enum LogTabs {
DELETED = "Deleted",
EDITED = "Edited",
@ -79,13 +76,13 @@ export function LogsModal({ modalProps, initalQuery }: Props) {
const { messages, total, statusTotal, pending, reset } = useMessages(queryEh, currentTab, sortNewest, numDisplayedMessages);
return (
<ModalRoot className={cl("root")} {...modalProps} size={ModalSize.LARGE}>
<ModalHeader className={cl("header")}>
<ModalRoot className={cl("modal-root")} {...modalProps} size={ModalSize.LARGE}>
<ModalHeader className={cl("modal-header")}>
<TextInput value={queryEh} onChange={e => setQuery(e)} style={{ width: "100%" }} placeholder="Filter Messages" />
<TabBar
type="top"
look="brand"
className={cl("tab-bar")}
className={cl("modal-tab-bar")}
selectedItem={currentTab}
onItemSelect={e => {
setCurrentTab(e);
@ -94,30 +91,30 @@ export function LogsModal({ modalProps, initalQuery }: Props) {
}}
>
<TabBar.Item
className={cl("tab-bar-item")}
className={cl("modal-tab-bar-item")}
id={LogTabs.DELETED}
>
Deleted
</TabBar.Item>
<TabBar.Item
className={cl("tab-bar-item")}
className={cl("modal-tab-bar-item")}
id={LogTabs.EDITED}
>
Edited
</TabBar.Item>
<TabBar.Item
className={cl("tab-bar-item")}
className={cl("modal-tab-bar-item")}
id={LogTabs.GHOST_PING}
>
Ghost Pinged
</TabBar.Item>
</TabBar>
</ModalHeader>
<div style={{ opacity: modalProps.transitionState === 1 ? "1" : "0" }} className={cl("content-container")} ref={contentRef}>
<div style={{ opacity: modalProps.transitionState === 1 ? "1" : "0" }} className={cl("modal-content-container")} ref={contentRef}>
{
modalProps.transitionState === 1 &&
<ModalContent
className={cl("content")}
className={cl("modal-content")}
>
{messages != null && total === 0 && (
<EmptyLogs
@ -209,7 +206,7 @@ function LogsContent({ visibleMessages, canLoadMore, sortNewest, tab, reset, han
return <NoResults tab={tab} />;
return (
<div className={cl("content-inner")}>
<div className={cl("modal-content-inner")}>
{visibleMessages
.map(({ message }, i) => (
<LMessage
@ -251,7 +248,7 @@ function NoResults({ tab }: { tab: LogTabs; }) {
const { nextTab, lastTab } = generateSuggestedTabs(tab);
return (
<div className={cl("empty-logs", "content-inner")} style={{ textAlign: "center" }}>
<div className={cl("modal-empty-logs", "modal-content-inner")} style={{ textAlign: "center" }}>
<BaseText size="lg">
No results in <b>{tab}</b>.
</BaseText>
@ -264,7 +261,7 @@ function NoResults({ tab }: { tab: LogTabs; }) {
function EmptyLogs({ hasQuery, reset: forceUpdate }: { hasQuery: boolean; reset: () => void; }) {
return (
<div className={cl("empty-logs", "content-inner")} style={{ textAlign: "center" }}>
<div className={cl("modal-empty-logs", "modal-content-inner")} style={{ textAlign: "center" }}>
<Flex flexDirection="column" style={{ position: "relative" }}>
<BaseText size="lg">
@ -276,7 +273,7 @@ function EmptyLogs({ hasQuery, reset: forceUpdate }: { hasQuery: boolean; reset:
<Tooltip text="ML Enhanced now stores logs in indexeddb. You need to import your old logs from the logs directory. Importing wont overwrite existing logs">
{({ onMouseEnter, onMouseLeave }) => (
<div
className={cl("info-icon")}
className={cl("modal-info-icon")}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
@ -392,7 +389,7 @@ function LMessage({ log, isGroupStart, reset, }: LMessageProps) {
);
}}>
<MessagePreview
className={`${cl("msg-preview")} ${message.deleted ? "messagelogger-deleted" : ""}`}
className={`${cl("modal-msg-preview")} ${message.deleted ? "messagelogger-deleted" : ""}`}
author={message.author}
message={message}
compact={false}
@ -419,13 +416,13 @@ function LMessage({ log, isGroupStart, reset, }: LMessageProps) {
}
/>
{settings.store.ShowWhereMessageIsFrom && channel?.isDM() && message?.author && (
<span className={`${cl("from")} ${message.deleted ? cl("from-deleted") : cl("from-edited")}`}>From {message.author.username}'s DMs</span>
<span className={`${cl("modal-from")} ${message.deleted ? cl("modal-from-deleted") : cl("modal-from-edited")}`}>From {message.author.username}'s DMs</span>
)}
{settings.store.ShowWhereMessageIsFrom && channel?.isGroupDM() && channel?.name && (
<span className={`${cl("from")} ${message.deleted ? cl("from-deleted") : cl("from-edited")}`}>From {channel.name} Group DM</span>
<span className={`${cl("modal-from")} ${message.deleted ? cl("modal-from-deleted") : cl("modal-from-edited")}`}>From {channel.name} Group DM</span>
)}
{settings.store.ShowWhereMessageIsFrom && !channel?.isDM() && !channel?.isGroupDM() && channel?.name && guild?.name && (
<span className={`${cl("from")} ${message.deleted ? cl("from-deleted") : cl("from-edited")}`}>From {channel.name} in {guild.name}</span>
<span className={`${cl("modal-from")} ${message.deleted ? cl("modal-from-deleted") : cl("modal-from-edited")}`}>From {channel.name} in {guild.name}</span>
)}
</div>
);

View file

@ -9,6 +9,7 @@ export const Native = getNative();
import "./styles.css";
import { Devs, EquicordDevs } from "@utils/constants";
import { classNameFactory } from "@utils/css";
import { Logger } from "@utils/Logger";
import definePlugin from "@utils/types";
import { findByPropsLazy } from "@webpack";
@ -33,6 +34,7 @@ export { settings };
export const Flogger = new Logger("MessageLoggerEnhanced", "#f26c6c");
export const cacheSentMessages = new LimitedMap<string, LoggedMessageJSON>();
export const cl = classNameFactory("vc-msg-logger-enhanced-");
const cacheThing = findByPropsLazy("commit", "getOrCreate");

View file

@ -1,17 +1,17 @@
.msg-logger-modal-root {
.vc-msg-logger-enhanced-modal-root {
max-height: 80vh;
min-height: 80vh;
min-width: 85vw;
max-width: 85vw;
}
.msg-logger-modal-empty-logs {
.vc-msg-logger-enhanced-modal-empty-logs {
display: grid;
place-content: center;
height: 100%;
}
.msg-logger-modal-info-icon {
.vc-msg-logger-enhanced-modal-info-icon {
position: absolute;
top: -24px;
right: -24px;
@ -19,63 +19,67 @@
cursor: pointer;
}
.msg-logger-modal-header {
.vc-msg-logger-enhanced-modal-header {
flex-direction: column;
/* width: 100%; */
}
.msg-logger-modal-footer {
align-items: center;
}
.msg-logger-modal-content-container {
.vc-msg-logger-enhanced-modal-content-container {
/* max-height: 80vh; */
overflow: hidden;
height: 100%;
transition: opacity 100ms ease-in;
}
.msg-logger-modal-content {
.vc-msg-logger-enhanced-modal-content {
padding-bottom: 20px;
height: 100%;
}
.msg-logger-modal-content-inner {
.vc-msg-logger-enhanced-modal-content-inner {
padding-top: 1rem;
padding-bottom: 1rem;
height: 100%;
}
.msg-logger-modal-header > div:has(input) {
.vc-msg-logger-enhanced-modal-header > div:has(input) {
width: 100%;
}
.msg-logger-modal-tab-bar-item {
.vc-msg-logger-enhanced-modal-tab-bar-item {
padding-bottom: 16px;
margin-bottom: -2px;
}
.msg-logger-modal-tab-bar {
.vc-msg-logger-enhanced-modal-tab-bar {
margin-top: 20px;
width: 100%;
justify-content: space-around;
}
.msg-logger-modal-danger-btn {
color: var(--white-500);
background-color: var(--button-danger-background);
.vc-msg-logger-enhanced-modal-from {
font-size: 14px;
margin-left: 12px;
}
.vc-log-toolbox-btn svg {
.msg-logger-modal-from-deleted {
color: var(--status-danger);
}
.vc-msg-logger-enhanced-modal-from-edited {
color: var(--white-600);
}
.vc-msg-logger-enhanced-toolbox-btn svg {
color: var(--interactive-icon-default);
}
:is(.vc-log-toolbox-btn:hover, .vc-log-toolbox-btn[class*="selected"]) svg {
:is(.vc-msg-logger-enhanced-toolbox-btn:hover, .vc-msg-logger-enhanced-toolbox-btn[class*="selected"]) svg {
color: var(--interactive-icon-active);
}
.folder-upload-container {
.vc-msg-logger-enhanced-folder-upload-container {
display: flex;
justify-content: space-between;
align-items: center;
@ -83,13 +87,13 @@
background-color: var(--background-secondary-alt);
}
.folder-upload-input {
.vc-msg-logger-enhanced-folder-upload-input {
cursor: pointer;
padding: 10px 0 10px 10px;
color: var(--text-default);
}
.folder-upload-button {
.vc-msg-logger-enhanced-folder-upload-button {
margin: 6px;
padding: 4px 8px;
}

View file

@ -161,10 +161,10 @@ export default definePlugin({
break;
}
const cl = useCompact ? classNameFactory("vc-indicators-compact") : classNameFactory("vc-indicators");
const cl = useCompact ? classNameFactory("vc-indicators-compact-") : classNameFactory("vc-indicators-");
return <ErrorBoundary noop>
<div id={cl("-container")}>
<div id={cl("container")}>
<Tooltip text={text} position="right">
{({ onMouseEnter, onMouseLeave }) => (
<div