mirror of
https://github.com/Equicord/Equicord.git
synced 2025-06-17 18:37:04 -04:00
Fix lag caused by poorly written CSS rules (#3198)
Co-authored-by: Nuckyz <61953774+Nuckyz@users.noreply.github.com>
This commit is contained in:
v
GitHub
parent
4f5ebec4bb
commit
6cccb54ffc
43 changed files with 270 additions and 330 deletions
|
|
@ -18,6 +18,7 @@
|
|||
|
||||
import { Settings } from "@api/Settings";
|
||||
import ErrorBoundary from "@components/ErrorBoundary";
|
||||
import { classes } from "@utils/misc";
|
||||
import { formatDuration } from "@utils/text";
|
||||
import { findByPropsLazy, findComponentByCodeLazy } from "@webpack";
|
||||
import { EmojiStore, FluxDispatcher, GuildMemberStore, GuildStore, Parser, PermissionsBits, PermissionStore, SnowflakeUtils, Text, Timestamp, Tooltip, useEffect, useState } from "@webpack/common";
|
||||
|
|
@ -25,7 +26,7 @@ import type { Channel } from "discord-types/general";
|
|||
|
||||
import openRolesAndUsersPermissionsModal, { PermissionType, RoleOrUserPermission } from "../../permissionsViewer/components/RolesAndUsersPermissions";
|
||||
import { sortPermissionOverwrites } from "../../permissionsViewer/utils";
|
||||
import { settings } from "..";
|
||||
import { cl, settings } from "..";
|
||||
|
||||
const enum SortOrderTypes {
|
||||
LATEST_ACTIVITY = 0,
|
||||
|
|
@ -168,19 +169,19 @@ function HiddenChannelLockScreen({ channel }: { channel: ExtendedChannel; }) {
|
|||
}, [channelId]);
|
||||
|
||||
return (
|
||||
<div className={ChatScrollClasses.auto + " " + ChatScrollClasses.customTheme + " " + ChatClasses.chatContent + " " + "shc-lock-screen-outer-container"}>
|
||||
<div className="shc-lock-screen-container">
|
||||
<img className="shc-lock-screen-logo" src={HiddenChannelLogo} />
|
||||
<div className={classes(ChatScrollClasses.auto, ChatScrollClasses.customTheme, ChatScrollClasses.managedReactiveScroller)}>
|
||||
<div className={cl("container")}>
|
||||
<img className={cl("logo")} src={HiddenChannelLogo} />
|
||||
|
||||
<div className="shc-lock-screen-heading-container">
|
||||
<Text variant="heading-xxl/bold">This is a {!PermissionStore.can(PermissionsBits.VIEW_CHANNEL, channel) ? "hidden" : "locked"} {ChannelTypesToChannelNames[type]} channel.</Text>
|
||||
<div className={cl("heading-container")}>
|
||||
<Text variant="heading-xxl/bold">This is a {!PermissionStore.can(PermissionsBits.VIEW_CHANNEL, channel) ? "hidden" : "locked"} {ChannelTypesToChannelNames[type]} channel</Text>
|
||||
{channel.isNSFW() &&
|
||||
<Tooltip text="NSFW">
|
||||
{({ onMouseLeave, onMouseEnter }) => (
|
||||
<svg
|
||||
onMouseLeave={onMouseLeave}
|
||||
onMouseEnter={onMouseEnter}
|
||||
className="shc-lock-screen-heading-nsfw-icon"
|
||||
className={cl("heading-nsfw-icon")}
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 48 48"
|
||||
|
|
@ -202,7 +203,7 @@ function HiddenChannelLockScreen({ channel }: { channel: ExtendedChannel; }) {
|
|||
)}
|
||||
|
||||
{channel.isForumChannel() && topic && topic.length > 0 && (
|
||||
<div className="shc-lock-screen-topic-container">
|
||||
<div className={cl("topic-container")}>
|
||||
{Parser.parseTopic(topic, false, { channelId })}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -213,7 +214,6 @@ function HiddenChannelLockScreen({ channel }: { channel: ExtendedChannel; }) {
|
|||
<Timestamp timestamp={new Date(SnowflakeUtils.extractTimestamp(lastMessageId))} />
|
||||
</Text>
|
||||
}
|
||||
|
||||
{lastPinTimestamp &&
|
||||
<Text variant="text-md/normal">Last message pin: <Timestamp timestamp={new Date(lastPinTimestamp)} /></Text>
|
||||
}
|
||||
|
|
@ -247,7 +247,7 @@ function HiddenChannelLockScreen({ channel }: { channel: ExtendedChannel; }) {
|
|||
<Text variant="text-md/normal">Default sort order: {SortOrderTypesToNames[defaultSortOrder]}</Text>
|
||||
}
|
||||
{defaultReactionEmoji != null &&
|
||||
<div className="shc-lock-screen-default-emoji-container">
|
||||
<div className={cl("default-emoji-container")}>
|
||||
<Text variant="text-md/normal">Default reaction emoji:</Text>
|
||||
{Parser.defaultRules[defaultReactionEmoji.emojiName ? "emoji" : "customEmoji"].react({
|
||||
name: defaultReactionEmoji.emojiName
|
||||
|
|
@ -258,29 +258,29 @@ function HiddenChannelLockScreen({ channel }: { channel: ExtendedChannel; }) {
|
|||
src: defaultReactionEmoji.emojiName
|
||||
? EmojiUtils.getURL(defaultReactionEmoji.emojiName)
|
||||
: void 0
|
||||
}, void 0, { key: "0" })}
|
||||
}, void 0, { key: 0 })}
|
||||
</div>
|
||||
}
|
||||
{channel.hasFlag(ChannelFlags.REQUIRE_TAG) &&
|
||||
<Text variant="text-md/normal">Posts on this forum require a tag to be set.</Text>
|
||||
}
|
||||
{availableTags && availableTags.length > 0 &&
|
||||
<div className="shc-lock-screen-tags-container">
|
||||
<div className={cl("tags-container")}>
|
||||
<Text variant="text-lg/bold">Available tags:</Text>
|
||||
<div className="shc-lock-screen-tags">
|
||||
<div className={cl("tags")}>
|
||||
{availableTags.map(tag => <TagComponent tag={tag} key={tag.id} />)}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div className="shc-lock-screen-allowed-users-and-roles-container">
|
||||
<div className="shc-lock-screen-allowed-users-and-roles-container-title">
|
||||
{Settings.plugins.PermissionsViewer.enabled && (
|
||||
<div className={cl("allowed-users-and-roles-container")}>
|
||||
<div className={cl("allowed-users-and-roles-container-title")}>
|
||||
{Vencord.Plugins.isPluginEnabled("PermissionsViewer") && (
|
||||
<Tooltip text="Permission Details">
|
||||
{({ onMouseLeave, onMouseEnter }) => (
|
||||
<button
|
||||
onMouseLeave={onMouseLeave}
|
||||
onMouseEnter={onMouseEnter}
|
||||
className="shc-lock-screen-allowed-users-and-roles-container-permdetails-btn"
|
||||
className={cl("allowed-users-and-roles-container-permdetails-btn")}
|
||||
onClick={() => openRolesAndUsersPermissionsModal(permissions, GuildStore.getGuild(channel.guild_id), channel.name)}
|
||||
>
|
||||
<svg
|
||||
|
|
@ -300,7 +300,7 @@ function HiddenChannelLockScreen({ channel }: { channel: ExtendedChannel; }) {
|
|||
<button
|
||||
onMouseLeave={onMouseLeave}
|
||||
onMouseEnter={onMouseEnter}
|
||||
className="shc-lock-screen-allowed-users-and-roles-container-toggle-btn"
|
||||
className={cl("allowed-users-and-roles-container-toggle-btn")}
|
||||
onClick={() => settings.store.defaultAllowedUsersAndRolesDropdownState = !defaultAllowedUsersAndRolesDropdownState}
|
||||
>
|
||||
<svg
|
||||
|
|
|
|||
|
|
@ -19,8 +19,10 @@
|
|||
import "./style.css";
|
||||
|
||||
import { definePluginSettings } from "@api/Settings";
|
||||
import { classNameFactory } from "@api/Styles";
|
||||
import ErrorBoundary from "@components/ErrorBoundary";
|
||||
import { Devs } from "@utils/constants";
|
||||
import { classes } from "@utils/misc";
|
||||
import { canonicalizeMatch } from "@utils/patches";
|
||||
import definePlugin, { OptionType } from "@utils/types";
|
||||
import { findByPropsLazy } from "@webpack";
|
||||
|
|
@ -31,6 +33,8 @@ import HiddenChannelLockScreen from "./components/HiddenChannelLockScreen";
|
|||
|
||||
const ChannelListClasses = findByPropsLazy("modeMuted", "modeSelected", "unread", "icon");
|
||||
|
||||
export const cl = classNameFactory("vc-shc-");
|
||||
|
||||
const enum ShowMode {
|
||||
LockIcon,
|
||||
HiddenIconWithMutedStyle
|
||||
|
|
@ -549,7 +553,7 @@ export default definePlugin({
|
|||
aria-hidden={true}
|
||||
role="img"
|
||||
>
|
||||
<path className="shc-evenodd-fill-current-color" d="M17 11V7C17 4.243 14.756 2 12 2C9.242 2 7 4.243 7 7V11C5.897 11 5 11.896 5 13V20C5 21.103 5.897 22 7 22H17C18.103 22 19 21.103 19 20V13C19 11.896 18.103 11 17 11ZM12 18C11.172 18 10.5 17.328 10.5 16.5C10.5 15.672 11.172 15 12 15C12.828 15 13.5 15.672 13.5 16.5C13.5 17.328 12.828 18 12 18ZM15 11H9V7C9 5.346 10.346 4 12 4C13.654 4 15 5.346 15 7V11Z" />
|
||||
<path fill="currentcolor" fillRule="evenodd" d="M17 11V7C17 4.243 14.756 2 12 2C9.242 2 7 4.243 7 7V11C5.897 11 5 11.896 5 13V20C5 21.103 5.897 22 7 22H17C18.103 22 19 21.103 19 20V13C19 11.896 18.103 11 17 11ZM12 18C11.172 18 10.5 17.328 10.5 16.5C10.5 15.672 11.172 15 12 15C12.828 15 13.5 15.672 13.5 16.5C13.5 17.328 12.828 18 12 18ZM15 11H9V7C9 5.346 10.346 4 12 4C13.654 4 15 5.346 15 7V11Z" />
|
||||
</svg>
|
||||
), { noop: true }),
|
||||
|
||||
|
|
@ -559,14 +563,14 @@ export default definePlugin({
|
|||
<svg
|
||||
onMouseLeave={onMouseLeave}
|
||||
onMouseEnter={onMouseEnter}
|
||||
className={ChannelListClasses.icon + " " + "shc-hidden-channel-icon"}
|
||||
className={classes(ChannelListClasses.icon, cl("hidden-channel-icon"))}
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden={true}
|
||||
role="img"
|
||||
>
|
||||
<path className="shc-evenodd-fill-current-color" d="m19.8 22.6-4.2-4.15q-.875.275-1.762.413Q12.95 19 12 19q-3.775 0-6.725-2.087Q2.325 14.825 1 11.5q.525-1.325 1.325-2.463Q3.125 7.9 4.15 7L1.4 4.2l1.4-1.4 18.4 18.4ZM12 16q.275 0 .512-.025.238-.025.513-.1l-5.4-5.4q-.075.275-.1.513-.025.237-.025.512 0 1.875 1.312 3.188Q10.125 16 12 16Zm7.3.45-3.175-3.15q.175-.425.275-.862.1-.438.1-.938 0-1.875-1.312-3.188Q13.875 7 12 7q-.5 0-.938.1-.437.1-.862.3L7.65 4.85q1.025-.425 2.1-.638Q10.825 4 12 4q3.775 0 6.725 2.087Q21.675 8.175 23 11.5q-.575 1.475-1.512 2.738Q20.55 15.5 19.3 16.45Zm-4.625-4.6-3-3q.7-.125 1.288.112.587.238 1.012.688.425.45.613 1.038.187.587.087 1.162Z" />
|
||||
<path fill="currentcolor" fillRule="evenodd" d="m19.8 22.6-4.2-4.15q-.875.275-1.762.413Q12.95 19 12 19q-3.775 0-6.725-2.087Q2.325 14.825 1 11.5q.525-1.325 1.325-2.463Q3.125 7.9 4.15 7L1.4 4.2l1.4-1.4 18.4 18.4ZM12 16q.275 0 .512-.025.238-.025.513-.1l-5.4-5.4q-.075.275-.1.513-.025.237-.025.512 0 1.875 1.312 3.188Q10.125 16 12 16Zm7.3.45-3.175-3.15q.175-.425.275-.862.1-.438.1-.938 0-1.875-1.312-3.188Q13.875 7 12 7q-.5 0-.938.1-.437.1-.862.3L7.65 4.85q1.025-.425 2.1-.638Q10.825 4 12 4q3.775 0 6.725 2.087Q21.675 8.175 23 11.5q-.575 1.475-1.512 2.738Q20.55 15.5 19.3 16.45Zm-4.625-4.6-3-3q.7-.125 1.288.112.587.238 1.012.688.425.45.613 1.038.187.587.087 1.162Z" />
|
||||
</svg>
|
||||
)}
|
||||
</Tooltip>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,31 @@
|
|||
.shc-lock-screen-outer-container {
|
||||
overflow: hidden scroll;
|
||||
flex: 1 1 auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.shc-lock-screen-container {
|
||||
.vc-shc-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
gap: 0.65em;
|
||||
margin: 0.5em 0;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.shc-lock-screen-container > * {
|
||||
margin: 5px;
|
||||
.vc-shc-logo {
|
||||
width: 12em;
|
||||
height: 12em;
|
||||
}
|
||||
|
||||
.shc-lock-screen-logo {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.shc-lock-screen-heading-container {
|
||||
.vc-shc-heading-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.shc-lock-screen-heading-container > * {
|
||||
margin: inherit;
|
||||
}
|
||||
|
||||
.shc-lock-screen-heading-nsfw-icon {
|
||||
.vc-shc-heading-nsfw-icon {
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.shc-lock-screen-topic-container {
|
||||
.vc-shc-topic-container {
|
||||
color: var(--text-normal);
|
||||
background: var(--bg-overlay-3, var(--background-secondary));
|
||||
border-radius: 5px;
|
||||
|
|
@ -45,91 +33,75 @@
|
|||
max-width: 70vw;
|
||||
}
|
||||
|
||||
.shc-lock-screen-tags-container {
|
||||
.vc-shc-default-emoji-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background: var(--bg-overlay-3, var(--background-secondary));
|
||||
border-radius: 8px;
|
||||
padding: 0.75em;
|
||||
margin-left: 0.75em;
|
||||
}
|
||||
|
||||
.vc-shc-tags-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-overlay-3, var(--background-secondary));
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
padding: 0.75em;
|
||||
gap: 0.75em;
|
||||
max-width: 70vw;
|
||||
}
|
||||
|
||||
.shc-lock-screen-tags-container > * {
|
||||
margin: inherit;
|
||||
}
|
||||
|
||||
.shc-lock-screen-tags {
|
||||
.vc-shc-tags {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
gap: 0.35em;
|
||||
}
|
||||
|
||||
.shc-evenodd-fill-current-color {
|
||||
fill-rule: evenodd;
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
.shc-hidden-channel-icon {
|
||||
margin-left: 6px;
|
||||
z-index: 0;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.shc-lock-screen-default-emoji-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.shc-lock-screen-default-emoji-container > [class^="emojiContainer"] {
|
||||
background: var(--bg-overlay-3, var(--background-secondary));
|
||||
border-radius: 8px;
|
||||
padding: 5px 6px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.shc-lock-screen-allowed-users-and-roles-container {
|
||||
.vc-shc-allowed-users-and-roles-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: var(--bg-overlay-3, var(--background-secondary));
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
padding: 0.75em;
|
||||
max-width: 70vw;
|
||||
}
|
||||
|
||||
.shc-lock-screen-allowed-users-and-roles-container-title {
|
||||
.vc-shc-allowed-users-and-roles-container-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.shc-lock-screen-allowed-users-and-roles-container-toggle-btn {
|
||||
.vc-shc-allowed-users-and-roles-container-toggle-btn {
|
||||
all: unset;
|
||||
margin-left: 5px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.shc-lock-screen-allowed-users-and-roles-container-toggle-btn > svg {
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.shc-lock-screen-allowed-users-and-roles-container-permdetails-btn {
|
||||
.vc-shc-allowed-users-and-roles-container-permdetails-btn {
|
||||
all: unset;
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.shc-lock-screen-allowed-users-and-roles-container-permdetails-btn > svg {
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.shc-lock-screen-allowed-users-and-roles-container > [class^="members"] {
|
||||
margin-left: 10px;
|
||||
.vc-shc-allowed-users-and-roles-container > [class^="members"] {
|
||||
margin-left: 12px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.vc-shc-hidden-channel-icon {
|
||||
cursor: not-allowed;
|
||||
margin-left: 6px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue