lightcordwarez
/
BetterDiscordApp-rauenzi
mirror of https://github.com/rauenzi/BetterDiscordApp.git
1
0
Fork 0
Code Issues 3 Releases Wiki Activity

Fixes emote menu and button hiding (#501)

This commit is contained in:
Strencher 2020-11-17 21:42:12 +01:00 committed by GitHub
parent 618b577c75
commit 91c765b853
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 163 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/builtins/appearance/hidegifbutton.js
View File

@ -9,7 +9,7 @@ export default new class HideGIFButton extends Builtin {
enabled() {
this.after(WebpackModules.find(m => m.type && m.type.render && m.type.render.displayName === "ChannelTextAreaContainer").type, "render", (_, __, returnValue) => {
const buttons = Utilities.getNestedProp(returnValue, "props.children.props.children.props.children.1.props.children.props.children.2.props.children");
const buttons = Utilities.getNestedProp(returnValue, "props.children.props.children.1.props.children.props.children.2.props.children");
if (Array.isArray(buttons)) {
for (const button of buttons) {
if (!button) continue;

2
src/builtins/appearance/hidegiftbutton.js
View File

@ -9,7 +9,7 @@ export default new class HideGiftButton extends Builtin {
enabled() {
this.after(WebpackModules.find(m => m.type && m.type.render && m.type.render.displayName === "ChannelTextAreaContainer").type, "render", (_, __, returnValue) => {
const buttons = Utilities.getNestedProp(returnValue, "props.children.props.children.props.children.1.props.children.props.children.2.props.children");
const buttons = Utilities.getNestedProp(returnValue, "props.children.props.children.1.props.children.props.children.2.props.children");
if (Array.isArray(buttons)) {
for (const button of buttons) {
if (!button || !button.props) continue;

27
src/builtins/emotes/category.jsx Normal file
View File

@ -0,0 +1,27 @@
import {React} from "modules";
import DownArrow from "../../ui/icons/downarrow";
export default class Category extends React.Component {
constructor(props) {
super(props);
this.state = {
opened: true
};
}
render() {
return <div className="bd-emote-category">
<div className="bd-emote-content">
<div className="bd-emote-header" onClick={() => this.setState({opened: !this.state.opened})}>
<div className="bd-emote-headerIcon">
{this.props.icon ? this.props.icon : null}
</div>
<div className="bd-emote-headerLabel">{this.props.label}</div>
<div className="bd-emote-headerCollapseIcon">
<DownArrow className={this.state.opened ? "bd-emote-opened" : "bd-emote-closed"}/>
</div>
</div>
</div>
{this.state.opened && this.props.children}
</div>;
}
}

66
src/builtins/emotes/emotemenu.js
View File

@ -1,8 +1,13 @@
import Builtin from "../../structs/builtin";
import {Utilities, WebpackModules, React} from "modules";
import Tabs from "./tabs";
import EmoteModule from "./emotes";
import EmoteMenuCard from "../../ui/emotemenucard";
import EmoteIcon from "../../ui/emoteicon";
import Category from "./category";
import Favorite from "../../ui/icons/favorite";
import Twitch from "../../ui/icons/twitch";
const EmojiPicker = WebpackModules.find(m => m.type && m.type.displayName == "ExpressionPicker");
export default new class EmoteMenu extends Builtin {
get name() {return "EmoteMenu";}
get collection() {return "emotes";}
@ -11,32 +16,57 @@ export default new class EmoteMenu extends Builtin {
get hideEmojisID() {return "hideEmojiMenu";}
get hideEmojis() {return this.get(this.hideEmojisID);}
getSelected(body) {
if (body[1]) return {id: "stickers", index: 1};
else if (body[2]) return {id: "gif", index: 2};
else if (body[3]) return {id: "emoji", index: 3};
return {id: "bd-emotes", index: 3};
}
enabled() {
this.before(EmojiPicker, "type", (_, [props]) => {
if (props.expressionPickerView == "emoji" && this.hideEmojis) props.expressionPickerView = "gif";
});
this.after(EmojiPicker, "type", (_, [props], returnValue) => {
this.after(EmojiPicker, "type", (_, __, returnValue) => {
const head = Utilities.getNestedProp(returnValue, "props.children.props.children.props.children.1.props.children.0.props.children.props.children");
const body = Utilities.getNestedProp(returnValue, "props.children.props.children.props.children.1.props.children");
if (!head || !body) return returnValue;
const selected = props.expressionPickerView;
const currentTab = Tabs.find(e => e.id === selected);
let activePicker = this.getSelected(body);
let isActive = activePicker.id == "bd-emotes";
const tabProps = head[0].props;
if (!isActive && activePicker.id == "emoji" && this.hideEmojis) {
activePicker = {id: "bd-emotes", index: 3};
isActive = true;
}
if (this.hideEmojis) head.splice(head.findIndex(e => e && e.props && e.props.id == "emoji-picker-tab"), 1);
head.push(
...Tabs.map(e => React.createElement("div", {
"id": e.id + "-tab",
React.createElement("div", {
"id": "bd-emotes-tab",
"role": "tab",
"aria-selected": selected == e.id,
"aria-selected": isActive,
"className": tabProps.className,
}, React.createElement(tabProps.children.type, {
viewType: e.id,
isActive: selected == e.id,
setActiveView: tabProps.children.props.setActiveView
}, e.label))
viewType: "bd-emotes",
isActive: isActive,
}, "Twitch")
));
if (currentTab) body[2] = currentTab.element();
if (this.hideEmojis) head.splice(head.findIndex(e => e && e.props && e.props.id == "emoji-picker-tab"), 1);
if (isActive) {
body[activePicker.index] = React.createElement(EmoteMenuCard, {
type: "twitch",
}, [
React.createElement(Category, {
label: "Favorites",
icon: React.createElement(Favorite, {}),
}, Object.entries(EmoteModule.favorites).map(([emote, url]) => {
return React.createElement(EmoteIcon, {emote, url});
})),
React.createElement(Category, {
label: "Twitch Emotes",
icon: React.createElement(Twitch, {})
}, Object.keys(EmoteModule.getCategory("TwitchGlobal")).map(emote=> {
const url = EmoteModule.getUrl("TwitchGlobal", emote);
return React.createElement(EmoteIcon, {emote, url});
}))
]);
}
});
}

25
src/builtins/emotes/tabs.js
View File

@ -1,25 +0,0 @@
import {React} from "modules";
import EmoteModule from "./emotes";
import EmoteMenuCard from "../../ui/emotemenucard";
import EmoteIcon from "../../ui/emoteicon";
export default [
{
id: "twitchEmotes",
label: "Twitch Emotes",
element: () => React.createElement(EmoteMenuCard, {
type: "twitch"
}, Object.keys(EmoteModule.getCategory("TwitchGlobal")).map(emote=> {
const url = EmoteModule.getUrl("TwitchGlobal", emote);
return React.createElement(EmoteIcon, {emote, url});
}))
},
{
id: "favoriteEmotes",
label: "Favorite Emotes",
element: () => React.createElement(EmoteMenuCard, {
type: "favourite"
}, Object.entries(EmoteModule.favorites).map(([emote, url]) => {
return React.createElement(EmoteIcon, {emote, url});
}))
}
];

8
src/styles/builtins/emotemenu.css
View File

@ -108,20 +108,18 @@
background-color: #e2e2e2;
}
#bd-qem-twitch-container,
#bd-qem-favourite-container {
#bd-emote-menu {
width: 346px;
height: 329px;
background-color: #fff;
border-radius: 0 0 5px 5px;
}
#bd-qem-twitch-container .scroller-wrap,
#bd-qem-favourite-container .scroller-wrap {
#bd-emote-menu .scrollerBase-289Jih {
height: 100%;
}
.emote-menu-inner {
.bd-emote-menu-inner {
padding: 5px 0 0 15px;
}

61
src/styles/builtins/emotes.css
View File

@ -1,3 +1,64 @@
.bd-emote-header {
color: var(--header-secondary);
justify-content: flex-start;
font-size: 12px;
font-weight: 600;
transition: color 0.125s;
align-items: center;
display: flex;
}
.bd-emote-scroller {
max-height: 380px;
}
.bd-emote-category {
margin-bottom: 12px;
}
.bd-emote-content {
cursor: pointer;
position: sticky;
top: 0;
background: var(--background-secondary);
z-index: 2;
}
.bd-emote-wrapper {
background-color: var(--background-secondary);
box-sizing: border-box;
height: 32px;
padding: 0 4px;
z-index: 1;
}
.bd-emote-headerIcon {
width: 14px;
height: 14px;
margin-right: 8px;
}
.bd-emote-headerLabel {
overflow: hidden;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
margin-right: 8px;
}
.bd-emote-headerIcon + .bd-emote-headerLabel {
margin-left: 8px;
}
.bd-emote-headerCollapseIcon .bd-emote-opened {
transition: 0.3s;
}
.bd-emote-headerCollapseIcon .bd-emote-closed {
transform: rotate(90deg);
transition: 0.3s;
}
#emote-container {
padding: 10px;
}

8
src/ui/emotemenucard.jsx
View File

@ -1,10 +1,10 @@
import {React, WebpackModules} from "modules";
const Scroller = WebpackModules.getByDisplayName("VerticalScroller");
const {ScrollerAuto: Scroller} = WebpackModules.getByProps("ScrollerAuto");
export default class EmoteMenuCard extends React.Component {
render() {
return <div className={`bd-qem-${this.props.type}-container`}>
<Scroller className="bd-em-scroller">
<div className="emote-menu-inner">
return <div className={`bd-emote-menu`}>
<Scroller className="bd-emote-scroller">
<div className="bd-emote-menu-inner">
{this.props.children}
</div>
</Scroller>

9
src/ui/icons/favorite.jsx Normal file
View File

@ -0,0 +1,9 @@
import {React} from "modules";
export default class Favorite extends React.Component {
render() {
return <svg aria-hidden="false" width="16" height="16" viewBox="0 0 24 24">
<path fill="currentColor" d="M21.924 8.61789C21.77 8.24489 21.404 8.00089 21 8.00089H15.618L12.894 2.55389C12.555 1.87689 11.444 1.87689 11.105 2.55389L8.38199 8.00089H2.99999C2.59599 8.00089 2.22999 8.24489 2.07599 8.61789C1.92199 8.99089 2.00699 9.42289 2.29299 9.70789L6.87699 14.2919L5.03899 20.7269C4.92399 21.1299 5.07199 21.5619 5.40999 21.8089C5.74999 22.0569 6.20699 22.0659 6.55399 21.8329L12 18.2029L17.445 21.8329C17.613 21.9449 17.806 22.0009 18 22.0009C18.207 22.0009 18.414 21.9369 18.59 21.8089C18.928 21.5619 19.076 21.1299 18.961 20.7269L17.123 14.2919L21.707 9.70789C21.993 9.42289 22.078 8.99089 21.924 8.61789Z"></path>
</svg>;
}
}

9
src/ui/icons/twitch.jsx Normal file
View File

@ -0,0 +1,9 @@
import {React} from "modules";
export default class Twitch extends React.Component {
render() {
return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor" d="M40.1 32L10 108.9v314.3h107V480h60.2l56.8-56.8h87l117-117V32H40.1zm357.8 254.1L331 353H224l-56.8 56.8V353H76.9V72.1h321v214zM331 149v116.9h-40.1V149H331zm-107 0v116.9h-40.1V149H224z"/>
</svg>;
}
}