Separate changelog modal
This commit is contained in:
parent
4cb8964aa8
commit
815d91e76f
|
@ -1,21 +1,19 @@
|
||||||
import {Config} from "data";
|
import {Config} from "data";
|
||||||
import Logger from "common/logger";
|
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 FormattableString from "../structs/string";
|
||||||
import AddonErrorModal from "./addonerrormodal";
|
import AddonErrorModal from "./addonerrormodal";
|
||||||
import ErrorBoundary from "./errorboundary";
|
import ErrorBoundary from "./errorboundary";
|
||||||
import TextElement from "./base/text";
|
import TextElement from "./base/text";
|
||||||
import ModalRoot from "./modals/root";
|
import ModalRoot from "./modals/root";
|
||||||
import Flex from "./base/flex";
|
|
||||||
import ModalHeader from "./modals/header";
|
import ModalHeader from "./modals/header";
|
||||||
import ModalContent from "./modals/content";
|
import ModalContent from "./modals/content";
|
||||||
import ModalFooter from "./modals/footer";
|
import ModalFooter from "./modals/footer";
|
||||||
import CloseButton from "./modals/close";
|
|
||||||
|
|
||||||
import ConfirmationModal from "./modals/confirmation";
|
import ConfirmationModal from "./modals/confirmation";
|
||||||
import Button from "./base/button";
|
import Button from "./base/button";
|
||||||
import CustomMarkdown from "./base/markdown";
|
import CustomMarkdown from "./base/markdown";
|
||||||
import SimpleMarkdownExt from "../structs/markdown";
|
import ChangelogModal from "./modals/changelog";
|
||||||
|
|
||||||
|
|
||||||
export default class Modals {
|
export default class Modals {
|
||||||
|
@ -226,49 +224,10 @@ export default class Modals {
|
||||||
}
|
}
|
||||||
|
|
||||||
static showChangelogModal(options = {}) {
|
static showChangelogModal(options = {}) {
|
||||||
const {image = "https://i.imgur.com/wuh5yMK.png", description = "", changes = [], title = "BetterDiscord", subtitle = `v${Config.version}`, footer} = options;
|
options = Object.assign({image: "https://i.imgur.com/wuh5yMK.png", description: "", changes: [], title: "BetterDiscord", subtitle: `v${Config.version}`}, 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);
|
|
||||||
|
|
||||||
const key = this.ModalActions.openModal(props => {
|
const key = this.ModalActions.openModal(props => {
|
||||||
return React.createElement(ErrorBoundary, null, React.createElement(ModalRoot, Object.assign({
|
return React.createElement(ErrorBoundary, null, React.createElement(ChangelogModal, Object.assign(options, props)));
|
||||||
className: `bd-changelog-modal`,
|
|
||||||
size: ModalRoot.Sizes.SMALL,
|
|
||||||
style: ModalRoot.Styles.STANDARD
|
|
||||||
}, props), renderHeader(props), body, renderFooter()));
|
|
||||||
});
|
});
|
||||||
return key;
|
return key;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>;
|
||||||
|
}
|
|
@ -6,7 +6,6 @@ import Content from "./content";
|
||||||
|
|
||||||
import Text from "../base/text";
|
import Text from "../base/text";
|
||||||
import Button from "../base/button";
|
import Button from "../base/button";
|
||||||
import CloseButton from "./close";
|
|
||||||
|
|
||||||
const {useRef, useEffect} = React;
|
const {useRef, useEffect} = React;
|
||||||
|
|
||||||
|
@ -21,7 +20,7 @@ export default function ConfirmationModal({transitionState, onClose, header, chi
|
||||||
|
|
||||||
|
|
||||||
return <Root transitionState={transitionState} size={Root.Sizes.SMALL}>
|
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>
|
<Content>{children}</Content>
|
||||||
<Footer>
|
<Footer>
|
||||||
{confirmText && <Button
|
{confirmText && <Button
|
||||||
|
|
Loading…
Reference in New Issue