ryanamay/ModularVencord
1
0
Fork 0
mirror of https://github.com/Vendicated/Vencord.git synced 2024-09-20 06:30:35 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

BetterQuickReact: Compact mode + fix grid not being centered

Browse source
This commit is contained in:
Sqaaakoi 2024-03-14 23:53:41 +13:00
parent 53ab164cf8
commit 9dcae6b09a
No known key found for this signature in database
2 changed files with 27 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/plugins/betterQuickReact/index.css
View file

@ -1,11 +1,27 @@
/* Fixes to make the quick reactions look better */ /* Fixes to make the quick reactions look better */
.vc-better-quick-react { .vc-better-quick-react {
padding: 4px 0 6px; /* Discord officially has a 2px right margin and a 0px left margin, which is a hack for their selection border being cut off on the right */
justify-self: center; padding: 4px 1px 6px;
gap: 4px; justify-content: center;
max-width: calc((var(--vc-better-quick-react-columns) * 44px) - 4px); grid-template-columns: repeat(var(--vc-better-quick-react-columns), 44px);
grid-template-columns: repeat(var(--vc-better-quick-react-columns), 40px); grid-template-rows: unset;
grid-auto-rows: 44px;
z-index: 10;
}
.vc-better-quick-react.vc-better-quick-react-compact {
grid-template-columns: repeat(var(--vc-better-quick-react-columns), 33px);
grid-auto-rows: 33px;
}
.vc-better-quick-react.vc-better-quick-react-compact > div {
scale: 0.75;
}
.vc-better-quick-react.vc-better-quick-react-compact img {
width: 25px;
height: 25px;
} }
[class*="menu_"]:has(>div>.vc-better-quick-react) { [class*="menu_"]:has(>div>.vc-better-quick-react) {

7
src/plugins/betterQuickReact/index.tsx
View file

@ -31,6 +31,11 @@ export const settings = definePluginSettings({
markers: makeRange(4, 10, 1), markers: makeRange(4, 10, 1),
stickToMarkers: true stickToMarkers: true
}, },
compactMode: {
description: "Scales the buttons to 75% of their original scale, while increasing the emoji to 125% scale to stay visible. Recommended to have a minimum of 5 columns",
type: OptionType.BOOLEAN,
default: false
}
}); });
export default definePlugin({ export default definePlugin({
@ -58,7 +63,7 @@ export default definePlugin({
find: "default.Messages.ADD_REACTION_NAMED.format", find: "default.Messages.ADD_REACTION_NAMED.format",
replacement: { replacement: {
match: /className:(\i)\.wrapper,/, match: /className:(\i)\.wrapper,/,
replace: "className:\"vc-better-quick-react \"+$1.wrapper,style:{\"--vc-better-quick-react-columns\":$self.settings.store.columns}," replace: "className:\"vc-better-quick-react \"+($self.settings.store.compactMode?\"vc-better-quick-react-compact \":\"\")+$1.wrapper,style:{\"--vc-better-quick-react-columns\":$self.settings.store.columns},"
} }
}, },
// MenuGroup doesn't accept styles or anything special by default :/ // MenuGroup doesn't accept styles or anything special by default :/