Take some color fixes from revenge
Just faster, but still nice :D
This commit is contained in:
kmmiio99o
parent
1611ff2216
commit
db9f3894b2
5 changed files with 150 additions and 77 deletions
|
|
@ -60,7 +60,7 @@ const useStyles = createStyles({
|
|||
gap: 5,
|
||||
},
|
||||
iconStyle: {
|
||||
tintColor: semanticColors.LOGO_PRIMARY,
|
||||
tintColor: semanticColors.INTERACTIVE_ICON_DEFAULT,
|
||||
opacity: 0.2,
|
||||
height: 64,
|
||||
width: 64,
|
||||
|
|
|
|||
|
|
@ -5,63 +5,114 @@ import { useProxy } from "@core/vendetta/storage";
|
|||
import { FontDefinition, fonts, selectFont } from "@lib/addons/fonts";
|
||||
import { findAssetId } from "@lib/api/assets";
|
||||
import { BundleUpdaterManager } from "@lib/api/native/modules";
|
||||
import { NavigationNative } from "@metro/common";
|
||||
import { Button, Card, IconButton, Text } from "@metro/common/components";
|
||||
import { lazyDestructure } from "@lib/utils/lazy";
|
||||
import { findByProps } from "@metro";
|
||||
import { NavigationNative, tokens } from "@metro/common";
|
||||
import { Button, Card, IconButton, Stack, Text } from "@metro/common/components";
|
||||
import * as Skia from "@shopify/react-native-skia";
|
||||
import { TextStyleSheet } from "@ui/styles";
|
||||
import { useMemo } from "react";
|
||||
import { View } from "react-native";
|
||||
|
||||
import FontEditor from "./FontEditor";
|
||||
|
||||
export default function FontCard({ item: font }: CardWrapper<FontDefinition>) {
|
||||
useProxy(fonts);
|
||||
const { useToken } = lazyDestructure(() => findByProps("useToken"));
|
||||
|
||||
const navigation = NavigationNative.useNavigation();
|
||||
const selected = fonts.__selected === font.name;
|
||||
function FontPreview({ font }: { font: FontDefinition; }) {
|
||||
const TEXT_DEFAULT = useToken(tokens.colors.TEXT_DEFAULT);
|
||||
const { fontFamily: fontFamilyList, fontSize } = TextStyleSheet["text-md/medium"];
|
||||
const fontFamily = fontFamilyList!.split(/,/g)[0];
|
||||
|
||||
return (
|
||||
<Card style={{ padding: 18, borderRadius: 16, backgroundColor: "#23272a" }}>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text variant="heading-lg/bold">{font.name}</Text>
|
||||
const typeface = Skia.useFont(font.main[fontFamily])?.getTypeface();
|
||||
|
||||
const paragraph = useMemo(() => {
|
||||
if (!typeface) return null;
|
||||
|
||||
const fMgr = SkiaApi.TypefaceFontProvider.Make();
|
||||
fMgr.registerFont(typeface, fontFamily);
|
||||
|
||||
|
||||
return SkiaApi.ParagraphBuilder.Make({}, fMgr)
|
||||
.pushStyle({
|
||||
color: SkiaApi.Color(TEXT_DEFAULT),
|
||||
fontFamilies: [fontFamily],
|
||||
fontSize,
|
||||
})
|
||||
.addText("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")
|
||||
.pop()
|
||||
.build();
|
||||
}, [typeface]);
|
||||
|
||||
return (
|
||||
// This does not work, actually :woeis:
|
||||
<View style={{ height: 64 }}>
|
||||
{typeface
|
||||
? <Skia.Canvas style={{ height: 64 }}>
|
||||
<Skia.Paragraph paragraph={paragraph} x={0} y={0} width={300} />
|
||||
</Skia.Canvas>
|
||||
: <View style={{ justifyContent: "center", alignItems: "center" }}>
|
||||
<Text color="text-muted" variant="heading-lg/semibold">
|
||||
Loading...
|
||||
</Text>
|
||||
</View>}
|
||||
</View>
|
||||
|
||||
<View style={{ flexDirection: "row", alignItems: "center" }}>
|
||||
<Button
|
||||
size="sm"
|
||||
variant={selected ? "secondary" : "primary"}
|
||||
text={selected ? "Unapply" : "Apply"}
|
||||
style={{ minWidth: 80, marginRight: 8 }}
|
||||
onPress={async () => {
|
||||
await selectFont(selected ? null : font.name);
|
||||
showConfirmationAlert({
|
||||
title: Strings.HOLD_UP,
|
||||
content: "Reload Discord to apply changes?",
|
||||
confirmText: Strings.RELOAD,
|
||||
cancelText: Strings.CANCEL,
|
||||
confirmColor: "red",
|
||||
onConfirm: BundleUpdaterManager.reload,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
onPress={() => {
|
||||
navigation.push("BUNNY_CUSTOM_PAGE", {
|
||||
title: "Edit Font",
|
||||
render: () => <FontEditor name={font.name} />,
|
||||
});
|
||||
}}
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
disabled={selected}
|
||||
icon={findAssetId("WrenchIcon")}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</Card>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
export default function FontCard({ item: font }: CardWrapper<FontDefinition>) {
|
||||
useProxy(fonts);
|
||||
|
||||
const navigation = NavigationNative.useNavigation();
|
||||
const selected = fonts.__selected === font.name;
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Stack spacing={16}>
|
||||
<View style={{ flexDirection: "row", alignItems: "center" }}>
|
||||
<View>
|
||||
<Text variant="heading-lg/semibold">
|
||||
{font.name}
|
||||
</Text>
|
||||
{/* TODO: Text wrapping doesn't work well */}
|
||||
{/* <Text color="text-muted" variant="text-sm/semibold">
|
||||
{font.description}
|
||||
</Text> */}
|
||||
</View>
|
||||
<View style={{ marginLeft: "auto" }}>
|
||||
<Stack spacing={12} direction="horizontal">
|
||||
<IconButton
|
||||
onPress={() => {
|
||||
navigation.push("BUNNY_CUSTOM_PAGE", {
|
||||
title: "Edit Font",
|
||||
render: () => <FontEditor name={font.name} />
|
||||
});
|
||||
}}
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
disabled={selected}
|
||||
icon={findAssetId("WrenchIcon")}
|
||||
/>
|
||||
<Button
|
||||
size="sm"
|
||||
variant={selected ? "secondary" : "primary"}
|
||||
text={selected ? "Unapply" : "Apply"}
|
||||
onPress={async () => {
|
||||
await selectFont(selected ? null : font.name);
|
||||
showConfirmationAlert({
|
||||
title: Strings.HOLD_UP,
|
||||
content: "Reload Discord to apply changes?",
|
||||
confirmText: Strings.RELOAD,
|
||||
cancelText: Strings.CANCEL,
|
||||
confirmColor: "red",
|
||||
onConfirm: BundleUpdaterManager.reload
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
</View>
|
||||
</View>
|
||||
<FontPreview font={font} />
|
||||
</Stack>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -332,7 +332,7 @@ export default function FontEditor(props: {
|
|||
|
||||
return <TableRow
|
||||
label={name}
|
||||
subLabel={error ? <Text variant='text-xs/medium' color='text-danger'>{error.message}</Text> : url}
|
||||
subLabel={error ? <Text variant='text-xs/medium' color='text-feedback-critical'>{error.message}</Text> : url}
|
||||
trailing={<Stack spacing={8} direction="horizontal">
|
||||
<IconButton
|
||||
size="sm"
|
||||
|
|
|
|||
|
|
@ -236,7 +236,7 @@ export default function PluginInfoActionSheet({
|
|||
variant="text-md/semibold"
|
||||
style={{
|
||||
marginBottom: 4,
|
||||
color: semanticColors.MOBILE_TEXT_HEADING_PRIMARY,
|
||||
color: "text-strong",
|
||||
}}
|
||||
>
|
||||
Description
|
||||
|
|
|
|||
|
|
@ -4,34 +4,56 @@ import { createStyles } from "@ui/styles";
|
|||
import { Platform, Text, TextInput } from "react-native";
|
||||
|
||||
export interface CodeblockProps {
|
||||
selectable?: boolean;
|
||||
style?: import("react-native").TextStyle;
|
||||
children?: string;
|
||||
selectable?: boolean;
|
||||
style?: import("react-native").TextStyle;
|
||||
children?: string;
|
||||
}
|
||||
|
||||
const useStyles = createStyles({
|
||||
codeBlock: {
|
||||
fontFamily: constants.Fonts.CODE_NORMAL,
|
||||
fontSize: 12,
|
||||
textAlignVertical: "center",
|
||||
backgroundColor: semanticColors.BACKGROUND_SECONDARY,
|
||||
color: semanticColors.TEXT_NORMAL,
|
||||
borderWidth: 1,
|
||||
borderRadius: 12,
|
||||
borderColor: semanticColors.BACKGROUND_TERTIARY,
|
||||
padding: 10,
|
||||
},
|
||||
codeBlock: {
|
||||
fontFamily: constants.Fonts.CODE_NORMAL,
|
||||
fontSize: 12,
|
||||
textAlignVertical: "center",
|
||||
backgroundColor: semanticColors.CARD_BACKGROUND_DEFAULT,
|
||||
color: semanticColors.TEXT_DEFAULT,
|
||||
borderWidth: 1,
|
||||
borderRadius: 12,
|
||||
borderColor: semanticColors.BORDER_SUBTLE,
|
||||
padding: 10,
|
||||
},
|
||||
});
|
||||
|
||||
// iOS doesn't support the selectable property on RN.Text...
|
||||
const InputBasedCodeblock = ({ style, children }: CodeblockProps) => <TextInput editable={false} multiline style={[useStyles().codeBlock, style && style]} value={children} />;
|
||||
const TextBasedCodeblock = ({ selectable, style, children }: CodeblockProps) => <Text selectable={selectable} style={[useStyles().codeBlock, style && style]}>{children}</Text>;
|
||||
const InputBasedCodeblock = ({ style, children }: CodeblockProps) => (
|
||||
<TextInput
|
||||
editable={false}
|
||||
multiline
|
||||
style={[useStyles().codeBlock, style && style]}
|
||||
value={children}
|
||||
/>
|
||||
);
|
||||
const TextBasedCodeblock = ({
|
||||
selectable,
|
||||
style,
|
||||
children,
|
||||
}: CodeblockProps) => (
|
||||
<Text selectable={selectable} style={[useStyles().codeBlock, style && style]}>
|
||||
{children}
|
||||
</Text>
|
||||
);
|
||||
|
||||
export default function Codeblock({ selectable, style, children }: CodeblockProps) {
|
||||
if (!selectable) return <TextBasedCodeblock style={style} children={children} />;
|
||||
export default function Codeblock({
|
||||
selectable,
|
||||
style,
|
||||
children,
|
||||
}: CodeblockProps) {
|
||||
if (!selectable)
|
||||
return <TextBasedCodeblock style={style} children={children} />;
|
||||
|
||||
return Platform.select({
|
||||
ios: <InputBasedCodeblock style={style} children={children} />,
|
||||
default: <TextBasedCodeblock style={style} children={children} selectable />,
|
||||
});
|
||||
return Platform.select({
|
||||
ios: <InputBasedCodeblock style={style} children={children} />,
|
||||
default: (
|
||||
<TextBasedCodeblock style={style} children={children} selectable />
|
||||
),
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue