ThemeAttributes: add larger avatar url variables to avatars (#2449)
Co-authored-by: vee <vendicated@riseup.net>
This commit is contained in:
parent
719c6140f3
commit
d8b3869b81
|
@ -1,6 +1,6 @@
|
||||||
# ThemeAttributes
|
# ThemeAttributes
|
||||||
|
|
||||||
This plugin adds data attributes to various elements inside Discord
|
This plugin adds data attributes and CSS variables to various elements inside Discord
|
||||||
|
|
||||||
This allows themes to more easily theme those elements or even do things that otherwise wouldn't be possible
|
This allows themes to more easily theme those elements or even do things that otherwise wouldn't be possible
|
||||||
|
|
||||||
|
@ -19,3 +19,11 @@ This allows themes to more easily theme those elements or even do things that ot
|
||||||
- `data-is-self` is a boolean indicating whether this is the current user's message
|
- `data-is-self` is a boolean indicating whether this is the current user's message
|
||||||
|
|
||||||
![image](https://github.com/Vendicated/Vencord/assets/45497981/34bd5053-3381-402f-82b2-9c812cc7e122)
|
![image](https://github.com/Vendicated/Vencord/assets/45497981/34bd5053-3381-402f-82b2-9c812cc7e122)
|
||||||
|
|
||||||
|
## CSS Variables
|
||||||
|
|
||||||
|
### Avatars
|
||||||
|
|
||||||
|
`--avatar-url-<resolution>` contains a URL for the users avatar with the size attribute adjusted for the resolutions `128, 256, 512, 1024, 2048, 4096`.
|
||||||
|
|
||||||
|
![image](https://github.com/Vendicated/Vencord/assets/26598490/192ddac0-c827-472f-9933-fa99ff36f723)
|
||||||
|
|
|
@ -9,10 +9,11 @@ import definePlugin from "@utils/types";
|
||||||
import { UserStore } from "@webpack/common";
|
import { UserStore } from "@webpack/common";
|
||||||
import { Message } from "discord-types/general";
|
import { Message } from "discord-types/general";
|
||||||
|
|
||||||
|
|
||||||
export default definePlugin({
|
export default definePlugin({
|
||||||
name: "ThemeAttributes",
|
name: "ThemeAttributes",
|
||||||
description: "Adds data attributes to various elements for theming purposes",
|
description: "Adds data attributes to various elements for theming purposes",
|
||||||
authors: [Devs.Ven],
|
authors: [Devs.Ven, Devs.Board],
|
||||||
|
|
||||||
patches: [
|
patches: [
|
||||||
// Add data-tab-id to all tab bar items
|
// Add data-tab-id to all tab bar items
|
||||||
|
@ -32,9 +33,36 @@ export default definePlugin({
|
||||||
match: /\.messageListItem(?=,"aria)/,
|
match: /\.messageListItem(?=,"aria)/,
|
||||||
replace: "$&,...$self.getMessageProps(arguments[0])"
|
replace: "$&,...$self.getMessageProps(arguments[0])"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// add --avatar-url-<resolution> css variable to avatar img elements
|
||||||
|
// popout profiles
|
||||||
|
{
|
||||||
|
find: ".LABEL_WITH_ONLINE_STATUS",
|
||||||
|
replacement: {
|
||||||
|
match: /src:null!=\i\?(\i).{1,50}"aria-hidden":!0/,
|
||||||
|
replace: "$&,style:$self.getAvatarStyles($1)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// chat avatars
|
||||||
|
{
|
||||||
|
find: "showCommunicationDisabledStyles",
|
||||||
|
replacement: {
|
||||||
|
match: /src:(\i),"aria-hidden":!0/,
|
||||||
|
replace: "$&,style:$self.getAvatarStyles($1)"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
||||||
|
getAvatarStyles(src: string) {
|
||||||
|
return Object.fromEntries(
|
||||||
|
[128, 256, 512, 1024, 2048, 4096].map(size => [
|
||||||
|
`--avatar-url-${size}`,
|
||||||
|
`url(${src.replace(/\d+$/, String(size))})`
|
||||||
|
])
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
getMessageProps(props: { message: Message; }) {
|
getMessageProps(props: { message: Message; }) {
|
||||||
const author = props.message?.author;
|
const author = props.message?.author;
|
||||||
const authorId = author?.id;
|
const authorId = author?.id;
|
||||||
|
|
|
@ -382,6 +382,10 @@ export const Devs = /* #__PURE__*/ Object.freeze({
|
||||||
name: "ant0n",
|
name: "ant0n",
|
||||||
id: 145224646868860928n
|
id: 145224646868860928n
|
||||||
},
|
},
|
||||||
|
Board: {
|
||||||
|
name: "BoardTM",
|
||||||
|
id: 285475344817848320n,
|
||||||
|
},
|
||||||
philipbry: {
|
philipbry: {
|
||||||
name: "philipbry",
|
name: "philipbry",
|
||||||
id: 554994003318276106n
|
id: 554994003318276106n
|
||||||
|
|
Loading…
Reference in a new issue