Fix Some ClassNames
This commit is contained in:
parent
e6396f8553
commit
8508137b1b
6 changed files with 55 additions and 54 deletions
|
|
@ -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 >
|
||||
);
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue