SheWhoReignsSupreme/GoonCord
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui(plugins): partially revert to old design

Browse source
This commit is contained in:
amsyarasyiq 2024-06-02 01:25:47 +08:00
parent e660447143
commit 93ab105735
3 changed files with 72 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
src/core/ui/settings/pages/Plugins/PluginCard.tsx
View file

@ -6,7 +6,7 @@ import { showSheet } from "@lib/ui/sheets";
import { lazyDestructure } from "@lib/utils/lazy";
import { findByProps } from "@metro";
import { NavigationNative, tokens } from "@metro/common";
import { Card, IconButton, Stack, TableSwitch, Text } from "@metro/common/components";
import { Card, PressableScale, Stack, TableSwitch, Text } from "@metro/common/components";
import { createContext, useContext } from "react";
import { Image, View } from "react-native";
@ -36,18 +36,18 @@ function Title() {
const styles = usePluginCardStyles();
const plugin = usePlugin();
return <Text variant="heading-lg/semibold">
{plugin.manifest.vendetta?.icon && <>
const iconName = plugin.manifest.vendetta?.icon;
const icon = iconName && requireAssetIndex(iconName);
return <Text
numberOfLines={1}
adjustsFontSizeToFit={true}
variant="heading-md/semibold"
>
{icon && <>
<Image
style={styles.iconStyle}
source={{
// This is pretty dirty but RN won't listen if I declare height and width somewhere else
...Image.resolveAssetSource(
requireAssetIndex(plugin.manifest.vendetta?.icon)
),
height: 18,
width: 18
}}
style={styles.pluginIcon}
source={icon}
/>
{" "}
</>}
@ -59,29 +59,47 @@ function Title() {
// TODO: Allow glacing at the error's stack
function Status() {
const plugin = usePlugin();
const TEXT_NORMAL = useToken(tokens.colors.TEXT_NORMAL);
const styles = usePluginCardStyles();
const INTERACTIVE_NORMAL = useToken(tokens.colors.INTERACTIVE_NORMAL);
if (!plugin.error) return null;
return <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
<Image
tintColor={TEXT_NORMAL}
source={{
...Image.resolveAssetSource(
requireAssetIndex("WarningIcon")
),
height: 18,
width: 18
}}
/>
<View style={styles.actionIcon}>
<Image
tintColor={INTERACTIVE_NORMAL}
source={requireAssetIndex("WarningIcon")}
/>
</View>
<Text variant="text-sm/semibold">
There was an error while attempting to start this plugin.
</Text>
</View>;
}
function ActionIcon(props: {
onPress: () => void;
icon: string;
disabled?: boolean;
}) {
const styles = usePluginCardStyles();
return <View style={props.disabled && { opacity: 0.4, pointerEvents: "none" }}>
<PressableScale onPress={() => !props.disabled && props.onPress()}>
<View style={styles.actionIconContainer}>
<Image
source={requireAssetIndex(props.icon)}
style={styles.actionIcon}
/>
</View>
</PressableScale>
</View>;
}
export default function PluginCard({ item: plugin }: CardWrapper<BunnyPlugin>) {
const navigation = NavigationNative.useNavigation();
const styles = usePluginCardStyles();
useProxy(plugin);
return (
@ -96,20 +114,24 @@ export default function PluginCard({ item: plugin }: CardWrapper<BunnyPlugin>) {
</Stack>
<View style={{ marginLeft: "auto" }}>
<Stack spacing={12} direction="horizontal">
<IconButton
onPress={() => {
showSheet(
<View style={{ flexDirection: "row", gap: 6 }}>
<ActionIcon
icon="WrenchIcon"
disabled={!getSettings(plugin.id)}
onPress={() => navigation.push("VendettaCustomPage", {
title: plugin.manifest.name,
render: getSettings(plugin.id),
})}
/>
<ActionIcon
icon="CircleInformationIcon-primary"
onPress={() => void showSheet(
"PluginInfoActionSheet",
import("./sheets/PluginInfoActionSheet"),
{ plugin, navigation }
);
}}
size="sm"
variant="secondary"
icon={requireAssetIndex(
getSettings(plugin.id) ? "SettingsIcon" : "MoreHorizontalIcon"
)}
/>
)}
/>
</View>
<TableSwitch
value={plugin.enabled}
onValueChange={(v: boolean) => {

44
src/core/ui/settings/pages/Plugins/usePluginCardStyles.ts
View file

@ -1,37 +1,23 @@
import { createStyles, TextStyleSheet } from "@lib/ui/styles";
import { createStyles } from "@lib/ui/styles";
import { tokens } from "@metro/common";
export const usePluginCardStyles = createStyles({
header: {
paddingVertical: 2,
pluginIcon: {
tintColor: tokens.colors.LOGO_PRIMARY,
height: 18,
width: 18,
},
headerLeading: {
flexDirection: "column",
actionIconContainer: {
width: 32,
height: 32,
borderRadius: 20,
backgroundColor: tokens.colors.BACKGROUND_ACCENT,
justifyContent: "center",
scale: 1.2
},
headerTrailing: {
display: "flex",
flexDirection: "row",
gap: 15,
alignItems: "center"
},
headerLabel: {
...TextStyleSheet["heading-md/semibold"],
color: tokens.colors.TEXT_NORMAL,
},
headerSubtitle: {
},
descriptionLabel: {
...TextStyleSheet["text-md/semibold"],
color: tokens.colors.TEXT_NORMAL,
},
actions: {
flexDirection: "row-reverse",
alignItems: "center",
gap: 5
},
iconStyle: {
tintColor: tokens.colors.LOGO_PRIMARY
}
actionIcon: {
tintColor: tokens.colors.INTERACTIVE_NORMAL,
width: 18,
height: 18,
},
});

2
src/lib/managers/plugins.ts
View file

@ -10,7 +10,7 @@ import { Author } from "@lib/utils/types";
type EvaledPlugin = {
onLoad?(): void;
onUnload(): void;
settings: JSX.Element;
settings: () => JSX.Element;
};
// See https://github.com/vendetta-mod/polymanifest