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

Separate changelog modal

This commit is contained in:
Zack Rauen 2023-03-31 02:06:49 -04:00
parent 4cb8964aa8
commit 815d91e76f
3 changed files with 68 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
renderer/src/ui/modals.js
View File

@ -1,21 +1,19 @@
import {Config} from "data";
import Logger from "common/logger";
import {WebpackModules, React, ReactDOM, Settings, Strings, DOMManager, DiscordModules} from "modules";
import {WebpackModules, React, ReactDOM, Settings, Strings, DOMManager} from "modules";
import FormattableString from "../structs/string";
import AddonErrorModal from "./addonerrormodal";
import ErrorBoundary from "./errorboundary";
import TextElement from "./base/text";
import ModalRoot from "./modals/root";
import Flex from "./base/flex";
import ModalHeader from "./modals/header";
import ModalContent from "./modals/content";
import ModalFooter from "./modals/footer";
import CloseButton from "./modals/close";
import ConfirmationModal from "./modals/confirmation";
import Button from "./base/button";
import CustomMarkdown from "./base/markdown";
import SimpleMarkdownExt from "../structs/markdown";
import ChangelogModal from "./modals/changelog";
export default class Modals {
@ -226,49 +224,10 @@ export default class Modals {
}
static showChangelogModal(options = {}) {
const {image = "https://i.imgur.com/wuh5yMK.png", description = "", changes = [], title = "BetterDiscord", subtitle = `v${Config.version}`, footer} = options;
const ce = React.createElement;
const changelogItems = [options.video ? ce("video", {src: options.video, poster: options.poster, controls: true, className: "bd-changelog-poster"}) : ce("img", {src: image, className: "bd-changelog-poster"})];
if (description) changelogItems.push(ce("p", null, SimpleMarkdownExt.parseToReact(description)));
for (let c = 0; c < changes.length; c++) {
const entry = changes[c];
const type = "bd-changelog-" + entry.type;
const margin = c == 0 ? " bd-changelog-first" : "";
changelogItems.push(ce("h1", {className: `bd-changelog-title ${type}${margin}`,}, entry.title));
if (entry.description) changelogItems.push(ce("p", null, SimpleMarkdownExt.parseToReact(entry.description)));
const list = ce("ul", null, entry.items.map(i => ce("li", null, SimpleMarkdownExt.parseToReact(i))));
changelogItems.push(list);
}
const renderHeader = function(props) {
return ce(ModalHeader, {justify: Flex.Justify.BETWEEN},
ce(Flex, {direction: Flex.Direction.VERTICAL},
ce(TextElement, {tag: "h1", size: TextElement.Sizes.SIZE_20, strong: true}, title),
ce(TextElement, {size: TextElement.Sizes.SIZE_12, color: TextElement.Colors.HEADER_SECONDARY}, subtitle)
),
ce(CloseButton, {onClick: props.onClose})
);
};
const renderFooter = () => {
const AnchorClasses = WebpackModules.getByProps("anchorUnderlineOnHover") || {anchor: "anchor-3Z-8Bb", anchorUnderlineOnHover: "anchorUnderlineOnHover-2ESHQB"};
const joinSupportServer = (click) => {
click.preventDefault();
click.stopPropagation();
DiscordModules.InviteActions.acceptInviteAndTransitionToInviteChannel({inviteKey: "0Tmfo5ZbORCRqbAd"});
};
const supportLink = ce("a", {className: `${AnchorClasses.anchor} ${AnchorClasses.anchorUnderlineOnHover}`, onClick: joinSupportServer}, "Join our Discord Server.");
const defaultFooter = ce(TextElement, {size: TextElement.Sizes.SIZE_12, color: TextElement.Colors.STANDARD}, "Need support? ", supportLink);
return ce(ModalFooter, null, ce(Flex.Child, {grow: 1, shrink: 1}, footer ? footer : defaultFooter));
};
const body = ce(ModalContent, null, changelogItems);
options = Object.assign({image: "https://i.imgur.com/wuh5yMK.png", description: "", changes: [], title: "BetterDiscord", subtitle: `v${Config.version}`}, options);
const key = this.ModalActions.openModal(props => {
return React.createElement(ErrorBoundary, null, React.createElement(ModalRoot, Object.assign({
className: `bd-changelog-modal`,
size: ModalRoot.Sizes.SMALL,
style: ModalRoot.Styles.STANDARD
}, props), renderHeader(props), body, renderFooter()));
return React.createElement(ErrorBoundary, null, React.createElement(ChangelogModal, Object.assign(options, props)));
});
return key;
}

63
renderer/src/ui/modals/changelog.jsx Normal file
View File

@ -0,0 +1,63 @@
import {React, DiscordModules, WebpackModules} from "modules";
import Root from "./root";
import Header from "./header";
import Footer from "./footer";
import Content from "./content";
import Flex from "../base/flex";
import Text from "../base/text";
import CloseButton from "./close";
import SimpleMarkdownExt from "../../structs/markdown";
const {useMemo} = React;
const AnchorClasses = WebpackModules.getByProps("anchorUnderlineOnHover") || {anchor: "anchor-3Z-8Bb", anchorUnderlineOnHover: "anchorUnderlineOnHover-2ESHQB"};
const joinSupportServer = (click) => {
click.preventDefault();
click.stopPropagation();
DiscordModules.InviteActions.acceptInviteAndTransitionToInviteChannel({inviteKey: "0Tmfo5ZbORCRqbAd"});
};
const supportLink = <a className={`${AnchorClasses.anchor} ${AnchorClasses.anchorUnderlineOnHover}`} onClick={joinSupportServer}>Join our Discord Server.</a>;
const defaultFooter = <Text>Need support? {supportLink}</Text>;
export default function ChangelogModal({transitionState, footer, title, subtitle, onClose, video, poster, image, description, changes}) {
const ChangelogHeader = useMemo(() => <Header justify={Flex.Justify.BETWEEN}>
<Flex direction={Flex.Direction.VERTICAL}>
<Text tag="h1" size={Text.Sizes.SIZE_20} strong={true}>{title}</Text>
<Text size={Text.Sizes.SIZE_12} color={Text.Colors.HEADER_SECONDARY}>{subtitle}</Text>
</Flex>
<CloseButton onClick={onClose} />
</Header>, [title, subtitle, onClose]);
const ChangelogFooter = useMemo(() => <Footer>
<Flex.Child grow="1" shrink="1">
{footer ? footer : defaultFooter}
</Flex.Child>
</Footer>, [footer]);
const changelogItems = useMemo(() => {
const items = [video ? <video src={video} poster={poster} controls={true} className="bd-changelog-poster" /> : <img src={image} className="bd-changelog-poster" />];
if (description) items.push(<p>{SimpleMarkdownExt.parseToReact(description)}</p>);
for (let c = 0; c < changes.length; c++) {
const entry = changes[c];
const type = "bd-changelog-" + entry.type;
const margin = c == 0 ? " bd-changelog-first" : "";
items.push(<h1 className={`bd-changelog-title ${type}${margin}`}>entry.title</h1>);
if (entry.description) items.push(<p>{SimpleMarkdownExt.parseToReact(entry.description)}</p>);
const list = <ul>{entry.items.map(i => <li>{SimpleMarkdownExt.parseToReact(i)}</li>)}</ul>;
items.push(list);
}
return items;
}, [description, video, image, poster, changes]);
return <Root className="bd-changelog-modal" transitionState={transitionState} size={Root.Sizes.SMALL} style={Root.Styles.STANDARD}>
{ChangelogHeader}
<Content>{changelogItems}</Content>
{ChangelogFooter}
</Root>;
}

3
renderer/src/ui/modals/confirmation.jsx
View File

@ -6,7 +6,6 @@ import Content from "./content";
import Text from "../base/text";
import Button from "../base/button";
import CloseButton from "./close";
const {useRef, useEffect} = React;
@ -21,7 +20,7 @@ export default function ConfirmationModal({transitionState, onClose, header, chi
return <Root transitionState={transitionState} size={Root.Sizes.SMALL}>
<Header><Text tag="h1" size={Text.Sizes.SIZE_20} color={Text.Colors.HEADER_PRIMARY} strong={true}>{header}</Text><CloseButton onClose={onClose} /></Header>
<Header><Text tag="h1" size={Text.Sizes.SIZE_20} color={Text.Colors.HEADER_PRIMARY} strong={true}>{header}</Text></Header>
<Content>{children}</Content>
<Footer>
{confirmText && <Button