From 815d91e76fd55b862569968cbc49ca202a51220b Mon Sep 17 00:00:00 2001 From: Zack Rauen Date: Fri, 31 Mar 2023 02:06:49 -0400 Subject: [PATCH] Separate changelog modal --- renderer/src/ui/modals.js | 49 ++----------------- renderer/src/ui/modals/changelog.jsx | 63 +++++++++++++++++++++++++ renderer/src/ui/modals/confirmation.jsx | 3 +- 3 files changed, 68 insertions(+), 47 deletions(-) create mode 100644 renderer/src/ui/modals/changelog.jsx diff --git a/renderer/src/ui/modals.js b/renderer/src/ui/modals.js index b96335d2..e458a78f 100644 --- a/renderer/src/ui/modals.js +++ b/renderer/src/ui/modals.js @@ -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; } diff --git a/renderer/src/ui/modals/changelog.jsx b/renderer/src/ui/modals/changelog.jsx new file mode 100644 index 00000000..3e9fb800 --- /dev/null +++ b/renderer/src/ui/modals/changelog.jsx @@ -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 = Join our Discord Server.; +const defaultFooter = Need support? {supportLink}; + + +export default function ChangelogModal({transitionState, footer, title, subtitle, onClose, video, poster, image, description, changes}) { + + const ChangelogHeader = useMemo(() =>
+ + {title} + {subtitle} + + +
, [title, subtitle, onClose]); + + const ChangelogFooter = useMemo(() => , [footer]); + + const changelogItems = useMemo(() => { + const items = [video ?