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

Improve changelog modal

This commit is contained in:
Zerebos 2024-03-04 14:45:51 -05:00
parent ea6e009ce1
commit b2ebe2ab97
No known key found for this signature in database
GPG Key ID: 79BE50E3D28D5686
6 changed files with 78 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/locales/en-us.json
View File

@ -260,5 +260,9 @@
"customColor": "Custom Color",
"resetSettings": "Reset Settings",
"resetSettingsWarning": "Resetting your settings returns them all to the original state, this cannot be undone."
},
"Socials": {
"twitter": "Follow Us!",
"github": "Star Us!"
}
}

24
renderer/src/styles/ui/changelog.css
View File

@ -1,3 +1,4 @@
.bd-changelog-modal iframe,
.bd-changelog-modal video,
.bd-changelog-modal img {
width: 100%;
@ -95,10 +96,16 @@
border-radius: 0;
}
.bd-changelog-modal .bd-modal-content img {
.bd-changelog-modal .bd-modal-content img,
.bd-changelog-modal .bd-modal-content video,
.bd-changelog-modal .bd-modal-content iframe {
width: 100%;
}
.bd-changelog-modal .bd-modal-content iframe {
height: 346px;
}
.bd-changelog-modal .bd-modal-content a {
color: hsl(200, calc(var(--saturation-factor, 1) * 100%), 49.4%);
transition: 0.05s;
@ -194,11 +201,13 @@
background-color: hsl(235, calc(var(--saturation-factor, 1)*86.1%), 77.5%);
}
.theme-dark .bd-changelog-modal iframe,
.theme-dark .bd-changelog-modal video,
.theme-dark .bd-changelog-modal img {
box-shadow: 0 2px 10px 0 hsl(var(0, calc(var(--saturation-factor, 1)*0%), 0%-hsl)/.2);
}
.theme-light .bd-changelog-modal iframe,
.theme-light .bd-changelog-modal video,
.theme-light .bd-changelog-modal img {
box-shadow: 0 2px 10px 0 hsl(var(0, calc(var(--saturation-factor, 1)*0%), 0%-hsl)/.1);
@ -215,3 +224,16 @@
.theme-dark .socialLink-1qjJIk {
color: hsl(210, calc(var(--saturation-factor, 1)*9.3%), 78.8%);
} */
.bd-social {
opacity: 0.7;
transition: 0.17s ease opacity;
}
.bd-social:hover {
opacity: 1;
}
.bd-social + .bd-social {
margin-left: 10px;
}

8
renderer/src/ui/icons/twitch.jsx
View File

@ -1,8 +0,0 @@
import React from "@modules/react";
export default function Twitch(props) {
const size = props.size || "18px";
return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style={{width: size, height: size}}>
<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>;
}

8
renderer/src/ui/icons/twitter.jsx Normal file
View File

@ -0,0 +1,8 @@
import React from "@modules/react";
export default function Twitter(props) {
const size = props.size || "18px";
return <svg xmlns="http://www.w3.org/2000/svg" fill="#26a7de" viewBox="0 0 24 24" style={{width: size, height: size}}>
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
</svg>;
}

40
renderer/src/ui/modals/changelog.jsx
View File

@ -1,6 +1,7 @@
import React from "@modules/react";
import WebpackModules from "@modules/webpackmodules";
import DiscordModules from "@modules/discordmodules";
import Strings from "@modules/strings";
import Root from "./root";
import Header from "./header";
@ -12,6 +13,8 @@ import Text from "../base/text";
import CloseButton from "./close";
import SimpleMarkdownExt from "@structs/markdown";
import Twitter from "@ui/icons/twitter";
import GitHub from "@ui/icons/github";
const {useMemo} = React;
@ -26,6 +29,33 @@ const joinSupportServer = (click) => {
const supportLink = <a className={`${AnchorClasses.anchor} ${AnchorClasses.anchorUnderlineOnHover}`} onClick={joinSupportServer}>Join our Discord Server.</a>;
const defaultFooter = <Text>Need support? {supportLink}</Text>;
const twitter = <DiscordModules.Tooltip color="primary" position="top" text={Strings.Socials.twitter}>
{p => <a {...p} className="bd-social" href="https://x.com/_BetterDiscord_" rel="noopener noreferrer" target="_blank">
<Twitter />
</a>}
</DiscordModules.Tooltip>;
const github = <DiscordModules.Tooltip color="primary" position="top" text={Strings.Socials.github}>
{p => <a {...p} className="bd-social" href="https://github.com/BetterDiscord/BetterDiscord" rel="noopener noreferrer" target="_blank">
<GitHub />
</a>}
</DiscordModules.Tooltip>;
function YoutubeEmbed({src}) {
return <iframe
src={src}
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowFullScreen
/>;
}
function Video({src, poster}) {
if (src.toLowerCase().includes("youtube.com")) return <YoutubeEmbed src={src} />;
return <video src={src} poster={poster} controls={true} className="bd-changelog-poster" />;
}
export default function ChangelogModal({transitionState, footer, title, subtitle, onClose, video, poster, image, description, changes}) {
@ -37,14 +67,18 @@ export default function ChangelogModal({transitionState, footer, title, subtitle
<CloseButton onClick={onClose} />
</Header>, [title, subtitle, onClose]);
const ChangelogFooter = useMemo(() => <Footer>
const ChangelogFooter = useMemo(() => <Footer justify={Flex.Justify.BETWEEN} direction={Flex.Direction.HORIZONTAL}>
<Flex.Child grow="1" shrink="1">
{footer ? footer : defaultFooter}
</Flex.Child>
{!footer && <Flex.Child grow="0" shrink="0">
{twitter}
{github}
</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" />];
const items = [video ? <Video src={video} poster={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];
@ -58,7 +92,7 @@ export default function ChangelogModal({transitionState, footer, title, subtitle
return items;
}, [description, video, image, poster, changes]);
return <Root className="bd-changelog-modal" transitionState={transitionState} size={Root.Sizes.SMALL} style={Root.Styles.STANDARD}>
return <Root className="bd-changelog-modal" transitionState={transitionState} size={Root.Sizes.MEDIUM} style={Root.Styles.STANDARD}>
{ChangelogHeader}
<Content>{changelogItems}</Content>
{ChangelogFooter}

10
renderer/src/ui/modals/footer.jsx
View File

@ -4,16 +4,16 @@ import Utilities from "@modules/utilities";
import Flex from "../base/flex";
export default function Footer({id, className, children}) {
export default function Footer({id, className, children, justify, direction, align, wrap}) {
return <Flex
id={id}
className={Utilities.className("bd-modal-footer", className)}
grow={0}
shrink={0}
direction={Flex.Direction.HORIZONTAL_REVERSE}
justify={Flex.Justify.START}
align={Flex.Align.STRETCH}
wrap={Flex.Wrap.NO_WRAP}
direction={direction ?? Flex.Direction.HORIZONTAL_REVERSE}
justify={justify ?? Flex.Justify.START}
align={align ?? Flex.Align.STRETCH}
wrap={wrap ?? Flex.Wrap.NO_WRAP}
>
{children}
</Flex>;