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

[UI] Overall cleanup and fixes

Browse source
This commit is contained in:
Beef 2023-01-14 02:41:28 +00:00
parent a8b5beff6e
commit dee5ed0172
10 changed files with 91 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/ui/fixTheme.ts
View file

@ -1,30 +1,26 @@
// Loosely based on https://github.com/Aliucord/AliucordRN/blob/main/src/ui/patchTheme.ts
// Based on https://github.com/Aliucord/AliucordRN/blob/main/src/ui/patchTheme.ts
// Literally could not figure this out, many thanks
import { findByProps, findByStoreName } from "@metro/filters";
import { FluxDispatcher } from "@metro/common";
import logger from "@/lib/logger";
import logger from "@lib/logger";
const ThemeManager = findByProps("updateTheme", "overrideTheme");
const AMOLEDThemeManager = findByProps("setAMOLEDThemeEnabled");
const ThemeStore = findByStoreName("ThemeStore");
const UnsyncedUserSettingsStore = findByStoreName("UnsyncedUserSettingsStore");
function override() {
const theme = ThemeStore.theme || "dark";
ThemeManager.overrideTheme(theme);
if (AMOLEDThemeManager && UnsyncedUserSettingsStore.useAMOLEDTheme === 2) AMOLEDThemeManager.setAMOLEDThemeEnabled(true);
FluxDispatcher.unsubscribe("I18N_LOAD_START", override);
}
export function fixTheme() {
try {
if (ThemeStore) {
function override() {
const theme = ThemeStore.theme || "dark";
ThemeManager.overrideTheme(theme);
if (AMOLEDThemeManager && UnsyncedUserSettingsStore.useAMOLEDTheme === 2) {
AMOLEDThemeManager.setAMOLEDThemeEnabled(true);
}
FluxDispatcher.unsubscribe("I18N_LOAD_START", override);
}
FluxDispatcher.subscribe("I18N_LOAD_START", override);
}
if (ThemeStore) FluxDispatcher.subscribe("I18N_LOAD_START", override);
} catch(e) {
logger.error("Failed to fix theme...", e)
}

2
src/ui/settings/components/AssetDisplay.tsx
View file

@ -22,7 +22,7 @@ export default function AssetDisplay({ asset }: AssetDisplayProps) {
return (
<FormRow
label={`${asset.name} - ${asset.id}`}
trailing={() => <RN.Image source={asset.id} style={styles.asset} />}
trailing={<RN.Image source={asset.id} style={styles.asset} />}
onPress={() => {
copyText(asset.name);
showToast("Copied asset name to clipboard.", getAssetIDByName("toast_copy_link"));

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

@ -4,6 +4,7 @@ import { Plugin } from "@types";
import { getAssetIDByName } from "@ui/assets";
import { removePlugin, startPlugin, stopPlugin, showSettings, getSettings } from "@lib/plugins";
import { showToast } from "@ui/toasts";
import copyText from "@lib/utils/copyText";
const { FormRow, FormSwitch } = Forms;
const { TouchableOpacity, Image } = General;
@ -13,6 +14,7 @@ const styles = stylesheet.createThemedStyleSheet({
backgroundColor: stylesheet.ThemeColorMap.BACKGROUND_SECONDARY,
borderRadius: 5,
margin: 10,
marginTop: 0,
},
header: {
backgroundColor: stylesheet.ThemeColorMap.BACKGROUND_TERTIARY,
@ -21,7 +23,7 @@ const styles = stylesheet.createThemedStyleSheet({
},
actions: {
justifyContent: "flex-end",
flexDirection: "row",
flexDirection: "row-reverse",
alignItems: "center",
},
icon: {
@ -73,6 +75,14 @@ export default function PluginCard({ plugin }: PluginCardProps) {
>
<Image style={styles.icon} source={getAssetIDByName("ic_message_delete")} />
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
copyText(plugin.id);
showToast("Copied plugin URL to clipboard.", getAssetIDByName("toast_copy_link"));
}}
>
<Image style={styles.icon} source={getAssetIDByName("copy")} />
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
plugin.update = !plugin.update;

6
src/ui/settings/components/SettingsSection.tsx
View file

@ -13,14 +13,14 @@ export default function SettingsSection({ navigation }: SettingsSectionProps) {
<FormSection key="Vendetta" title="Vendetta">
<FormRow
label="General"
leading={() => <FormRow.Icon source={getAssetIDByName("settings")} />}
leading={<FormRow.Icon source={getAssetIDByName("settings")} />}
trailing={FormRow.Arrow}
onPress={() => navigation.push("VendettaSettings")}
/>
<FormDivider />
<FormRow
label="Plugins"
leading={() => <FormRow.Icon source={getAssetIDByName("debug")} />}
leading={<FormRow.Icon source={getAssetIDByName("debug")} />}
trailing={FormRow.Arrow}
onPress={() => navigation.push("VendettaPlugins")}
/>
@ -29,7 +29,7 @@ export default function SettingsSection({ navigation }: SettingsSectionProps) {
<FormDivider />
<FormRow
label="Developer"
leading={() => <FormRow.Icon source={getAssetIDByName("ic_progress_wrench_24px")} />}
leading={<FormRow.Icon source={getAssetIDByName("ic_progress_wrench_24px")} />}
trailing={FormRow.Arrow}
onPress={() => navigation.push("VendettaDeveloper")}
/>

11
src/ui/settings/components/PluginSettings.tsx → src/ui/settings/components/Subpage.tsx
View file

@ -1,10 +1,9 @@
import { Plugin } from "@types";
import { navigation, navigationStack, NavigationNative, stylesheet, constants } from "@metro/common";
import { General } from "@ui/components";
import { getAssetIDByName } from "@ui/assets";
interface PluginSettingsProps {
plugin: Plugin;
interface SubpageProps {
name: string;
children: JSX.Element;
}
@ -39,11 +38,11 @@ const styles = stylesheet.createThemedStyleSheet({
export const Settings = navigationStack.createStackNavigator();
const { TouchableOpacity, Image } = General;
export default function PluginSettings({ plugin, children }: PluginSettingsProps) {
export default function Subpage({ name, children }: SubpageProps) {
return (
<NavigationNative.NavigationContainer>
<Settings.Navigator
initialRouteName={plugin.manifest.name}
initialRouteName={name}
style={styles.container}
screenOptions={{
cardOverlayEnabled: false,
@ -54,7 +53,7 @@ export default function PluginSettings({ plugin, children }: PluginSettingsProps
}}
>
<Settings.Screen
name={plugin.manifest.name}
name={name}
component={children}
options={{
headerTitleStyle: styles.headerTitle,

4
src/ui/settings/components/Version.tsx
View file

@ -15,8 +15,8 @@ export default function Version({ label, version, icon }: VersionProps) {
return (
<FormRow
label={label}
leading={() => <FormRow.Icon source={getAssetIDByName(icon)} />}
trailing={() => <FormText>{version}</FormText>}
leading={<FormRow.Icon source={getAssetIDByName(icon)} />}
trailing={<FormText>{version}</FormText>}
onPress={() => {
copyText(`${label} - ${version}`);
showToast("Copied version to clipboard.", getAssetIDByName("toast_copy_link"));

40
src/ui/settings/pages/AssetBrowser.tsx Normal file
View file

@ -0,0 +1,40 @@
import { ReactNative as RN, stylesheet } from "@metro/common";
import { Forms, Search } from "@ui/components";
import { all } from "@ui/assets";
import AssetDisplay from "@ui/settings/components/AssetDisplay";
const { FormDivider } = Forms;
const styles = stylesheet.createThemedStyleSheet({
search: {
margin: 0,
padding: 15,
borderBottomWidth: 0,
background: "none",
backgroundColor: "none",
}
});
export default function AssetBrowser() {
const [searchName, setSearchName] = React.useState("");
return (
<RN.View style={{ flex: 1 }}>
<Search
style={styles.search}
onChangeText={(v: string) => setSearchName(v)}
placeholder="Search..."
/>
<RN.FlatList
data={Object.values(all).filter(a => a.name.includes(searchName))}
renderItem={({ item }) => (
<>
<AssetDisplay asset={item} />
<FormDivider />
</>
)}
keyExtractor={item => item.name}
/>
</RN.View>
)
}

48
src/ui/settings/pages/Developer.tsx
View file

@ -1,32 +1,20 @@
import { ReactNative as RN, stylesheet } from "@metro/common";
import { Forms, Search } from "@ui/components";
import { ReactNative as RN, navigation } from "@metro/common";
import { Forms } from "@ui/components";
import { getAssetIDByName } from "@ui/assets";
import { showToast } from "@/ui/toasts";
import { connectToDebugger } from "@lib/debug";
import { all } from "@ui/assets";
import settings from "@lib/settings";
import logger from "@lib/logger";
import AssetDisplay from "@ui/settings/components/AssetDisplay";
import Subpage from "@ui/settings/components/Subpage";
import AssetBrowser from "@ui/settings/pages/AssetBrowser";
const { FormSection, FormRow, FormInput, FormDivider } = Forms;
const styles = stylesheet.createThemedStyleSheet({
search: {
margin: 0,
padding: 0,
paddingRight: 15,
paddingLeft: 15,
borderBottomWidth: 0,
backgroundColor: "none"
}
})
export default function Developer() {
const [debuggerUrl, setDebuggerUrl] = React.useState(settings.debuggerUrl || "");
const [searchName, setSearchName] = React.useState("");
return (
<RN.View>
<RN.View style={{ flex: 1 }}>
<FormSection title="Debug">
<FormInput
value={debuggerUrl}
@ -40,14 +28,12 @@ export default function Developer() {
<FormRow
label="Connect to debug websocket"
leading={() => <FormRow.Icon source={getAssetIDByName("copy")} />}
trailing={FormRow.Arrow}
onPress={() => connectToDebugger(debuggerUrl)}
/>
<FormDivider />
{window.__vendetta_rdc && <FormRow
label="Connect to React DevTools"
leading={() => <FormRow.Icon source={getAssetIDByName("ic_badge_staff")} />}
trailing={FormRow.Arrow}
onPress={() => {
try {
window.__vendetta_rdc?.connectToDevTools({
@ -61,21 +47,15 @@ export default function Developer() {
}}
/>}
</FormSection>
<FormSection title="Assets">
<Search
style={styles.search}
onChangeText={(v: string) => setSearchName(v)}
placeholder="Search..."
/>
<RN.FlatList
data={Object.values(all).filter(a => a.name.includes(searchName))}
renderItem={({ item }) => (
<>
<AssetDisplay asset={item} />
<FormDivider />
</>
)}
keyExtractor={item => item.name}
<FormSection title="Other">
<FormRow
label="Asset Browser"
leading={() => <FormRow.Icon source={getAssetIDByName("ic_media_upload")} />}
trailing={FormRow.Arrow}
onPress={() => navigation.push(Subpage, {
name: "Asset Browser",
children: AssetBrowser,
})}
/>
</FormSection>
</RN.View>

1
src/ui/settings/pages/General.tsx
View file

@ -110,7 +110,6 @@ export default function General() {
<FormRow
label="Reload Discord"
leading={<FormRow.Icon source={getAssetIDByName("ic_message_retry")} />}
trailing={FormRow.Arrow}
onPress={() => RN.NativeModules.BundleUpdaterManager.reload()}
/>
<FormDivider />

8
src/ui/settings/pages/Plugins.tsx
View file

@ -1,4 +1,4 @@
import { ReactNative as RN, stylesheet } from "@metro/common";
import { ReactNative as RN } from "@metro/common";
import { Forms } from "@ui/components";
import { showToast } from "@ui/toasts";
import { getAssetIDByName } from "@ui/assets";
@ -12,7 +12,7 @@ export default function Plugins() {
const [pluginList, setPluginList] = React.useState(plugins);
return (
<RN.View>
<RN.View style={{ flex: 1 }}>
<FormInput
value={pluginUrl}
onChange={(v: string) => setPluginUrl(v)}
@ -20,8 +20,7 @@ export default function Plugins() {
/>
<FormRow
label="Install plugin"
leading={<FormRow.Icon source={getAssetIDByName("add_white")} />}
trailing={FormRow.Arrow}
leading={<FormRow.Icon source={getAssetIDByName("ic_add_perk_24px")} />}
onPress={() => {
fetchPlugin(pluginUrl).then(() => {
setPluginUrl("");
@ -33,6 +32,7 @@ export default function Plugins() {
}
/>
<RN.FlatList
style={{ marginTop: 10 }}
data={Object.values(pluginList)}
renderItem={({ item }) => <PluginCard plugin={item} />}
keyExtractor={item => item.id}