[UI] iOS UI fixes (#19)

* [UI > Developer] Move React DevTools FormDivider inside conditional inclusion

* [UI > Developer] Add FormDividers to Loader config

* [UI > General] Remove trailing FormDividers for versions and platform info

* [UI > Developer] Remove extraneous FormDivider
This commit is contained in:
Jack 2023-02-06 03:34:22 -05:00 committed by GitHub
parent 1ae2da84fe
commit fec4c68f70
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 28 deletions

View file

@ -27,7 +27,7 @@ export default function Developer() {
return ( return (
<RN.ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 38 }}> <RN.ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 38 }}>
<FormSection title="Debug" titleStyleType="no_border"> <FormSection title="Debug" titleStyleType="no_border">
<FormInput <FormInput
value={settings.debuggerUrl} value={settings.debuggerUrl}
onChange={(v: string) => settings.debuggerUrl = v} onChange={(v: string) => settings.debuggerUrl = v}
placeholder="127.0.0.1:9090" placeholder="127.0.0.1:9090"
@ -39,23 +39,25 @@ export default function Developer() {
leading={<FormRow.Icon source={getAssetIDByName("copy")} />} leading={<FormRow.Icon source={getAssetIDByName("copy")} />}
onPress={() => connectToDebugger(settings.debuggerUrl)} onPress={() => connectToDebugger(settings.debuggerUrl)}
/> />
<FormDivider /> {window.__vendetta_rdc && <>
{window.__vendetta_rdc && <FormRow <FormDivider />
label="Connect to React DevTools" <FormRow
leading={<FormRow.Icon source={getAssetIDByName("ic_badge_staff")} />} label="Connect to React DevTools"
onPress={() => { leading={<FormRow.Icon source={getAssetIDByName("ic_badge_staff")} />}
try { onPress={() => {
window.__vendetta_rdc?.connectToDevTools({ try {
host: settings.debuggerUrl.split(":")?.[0], window.__vendetta_rdc?.connectToDevTools({
resolveRNStyle: RN.StyleSheet.flatten, host: settings.debuggerUrl.split(":")?.[0],
}); resolveRNStyle: RN.StyleSheet.flatten,
} catch(e) { });
// TODO: Check if this ever actually catches anything } catch (e) {
logger.error("Failed to connect to React DevTools!", e); // TODO: Check if this ever actually catches anything
showToast("Failed to connect to React DevTools!", getAssetIDByName("Small")); logger.error("Failed to connect to React DevTools!", e);
} showToast("Failed to connect to React DevTools!", getAssetIDByName("Small"));
}} }
/>} }}
/>
</>}
</FormSection> </FormSection>
{window.__vendetta_loader?.features.loaderConfig && <FormSection title="Loader config"> {window.__vendetta_loader?.features.loaderConfig && <FormSection title="Loader config">
<FormSwitchRow <FormSwitchRow
@ -67,12 +69,16 @@ export default function Developer() {
loaderConfig.customLoadUrl.enabled = v; loaderConfig.customLoadUrl.enabled = v;
}} }}
/> />
{loaderConfig.customLoadUrl.enabled && <FormInput <FormDivider />
value={loaderConfig.customLoadUrl.url} {loaderConfig.customLoadUrl.enabled && <>
onChange={(v: string) => loaderConfig.customLoadUrl.url = v} <FormInput
placeholder="http://localhost:4040/vendetta.js" value={loaderConfig.customLoadUrl.url}
title="VENDETTA URL" onChange={(v: string) => loaderConfig.customLoadUrl.url = v}
/>} placeholder="http://localhost:4040/vendetta.js"
title="VENDETTA URL"
/>
<FormDivider />
</>}
{window.__vendetta_loader.features.devtools && <FormSwitchRow {window.__vendetta_loader.features.devtools && <FormSwitchRow
label="Load React DevTools" label="Load React DevTools"
subLabel={`Version: ${window.__vendetta_loader.features.devtools.version}`} subLabel={`Version: ${window.__vendetta_loader.features.devtools.version}`}

View file

@ -92,18 +92,18 @@ export default function General() {
/> />
</FormSection> </FormSection>
<FormSection title="Versions"> <FormSection title="Versions">
{versions.map((v) => ( {versions.map((v, i) => (
<> <>
<Version label={v.label} version={v.version} icon={v.icon} /> <Version label={v.label} version={v.version} icon={v.icon} />
<FormDivider /> {i !== versions.length - 1 && <FormDivider />}
</> </>
))} ))}
</FormSection> </FormSection>
<FormSection title="Platform Info"> <FormSection title="Platform Info">
{platformInfo.map((p) => ( {platformInfo.map((p, i) => (
<> <>
<Version label={p.label} version={p.version} icon={p.icon} /> <Version label={p.label} version={p.version} icon={p.icon} />
<FormDivider /> {i !== platformInfo.length - 1 && <FormDivider />}
</> </>
))} ))}
</FormSection> </FormSection>