revenge-mod/Revenge
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[UI > PluginCard] Some needed fixes

Browse source
This commit is contained in:
Beef 2023-02-16 02:16:51 +00:00
parent 1071ae9d13
commit 46487d2aee
1 changed files with 21 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/ui/settings/components/PluginCard.tsx
View file

@ -15,23 +15,27 @@ import copyText from "@utils/copyText";
const colorModule = findByProps("SemanticColorsByThemeTable"); const colorModule = findByProps("SemanticColorsByThemeTable");
const colorMap = (colorModule?.SemanticColor ?? constants.ThemeColorMap); const colorMap = (colorModule?.SemanticColor ?? constants.ThemeColorMap);
// TODO: Replace with our eventual dialog API
const Dialog = findByProps("show", "openLazy", "close");
const { FormRow, FormSwitch } = Forms; const { FormRow, FormSwitch } = Forms;
const { TouchableOpacity, Image } = General; const { TouchableOpacity, Image } = General;
// TODO: These styles work weirdly. iOS has cramped text, Android with low DPI probably does too. Fix?
const styles = stylesheet.createThemedStyleSheet({ const styles = stylesheet.createThemedStyleSheet({
card: { card: {
backgroundColor: colorMap?.BACKGROUND_SECONDARY, backgroundColor: colorMap?.BACKGROUND_SECONDARY,
borderRadius: 5, borderRadius: 5,
margin: 10, marginHorizontal: 10,
marginTop: 0, marginBottom: 10,
}, },
header: { header: {
padding: 0,
backgroundColor: colorMap?.BACKGROUND_TERTIARY, backgroundColor: colorMap?.BACKGROUND_TERTIARY,
borderTopLeftRadius: 5, borderTopLeftRadius: 5,
borderTopRightRadius: 5, borderTopRightRadius: 5,
}, },
actions: { actions: {
justifyContent: "flex-end",
flexDirection: "row-reverse", flexDirection: "row-reverse",
alignItems: "center", alignItems: "center",
}, },
@ -51,6 +55,7 @@ export default function PluginCard({ plugin }: PluginCardProps) {
const settings = getSettings(plugin.id); const settings = getSettings(plugin.id);
const navigation = NavigationNative.useNavigation(); const navigation = NavigationNative.useNavigation();
const [removed, setRemoved] = React.useState(false); const [removed, setRemoved] = React.useState(false);
// This is needed because of React™ // This is needed because of React™
if (removed) return null; if (removed) return null;
@ -58,10 +63,12 @@ export default function PluginCard({ plugin }: PluginCardProps) {
<RN.View style={styles.card}> <RN.View style={styles.card}>
<FormRow <FormRow
style={styles.header} style={styles.header}
// TODO: Actually make use of user IDs
label={`${plugin.manifest.name} by ${plugin.manifest.authors.map(i => i.name).join(", ")}`} label={`${plugin.manifest.name} by ${plugin.manifest.authors.map(i => i.name).join(", ")}`}
leading={<FormRow.Icon source={getAssetIDByName(plugin.manifest.vendetta?.icon || "ic_application_command_24px")} />} leading={<FormRow.Icon source={getAssetIDByName(plugin.manifest.vendetta?.icon || "ic_application_command_24px")} />}
trailing={ trailing={
<FormSwitch <FormSwitch
style={RN.Platform.OS === "android" && { marginVertical: -15 }}
value={plugin.enabled} value={plugin.enabled}
onValueChange={(v: boolean) => { onValueChange={(v: boolean) => {
if (v) startPlugin(plugin.id); else stopPlugin(plugin.id); if (v) startPlugin(plugin.id); else stopPlugin(plugin.id);
@ -74,10 +81,17 @@ export default function PluginCard({ plugin }: PluginCardProps) {
trailing={ trailing={
<RN.View style={styles.actions}> <RN.View style={styles.actions}>
<TouchableOpacity <TouchableOpacity
onPress={() => { onPress={() => Dialog.show({
removePlugin(plugin.id); title: "Wait!",
setRemoved(true); body: `Are you sure you wish to delete ${plugin.manifest.name}?`,
}} confirmText: "Delete",
cancelText: "Cancel",
confirmColor: "red",
onConfirm: () => {
removePlugin(plugin.id);
setRemoved(true);
}
})}
> >
<Image style={styles.icon} source={getAssetIDByName("ic_message_delete")} /> <Image style={styles.icon} source={getAssetIDByName("ic_message_delete")} />
</TouchableOpacity> </TouchableOpacity>