Skip to content

Commit

Permalink
Improve layout for tablet screens on setup screens
Browse files Browse the repository at this point in the history
  • Loading branch information
@CommanderRedYT
CommanderRedYT committed Dec 18, 2024
1 parent df49eb7 commit ce480e8
Show file tree
Hide file tree
Showing 6 changed files with 337 additions and 220 deletions.
60 changes: 60 additions & 0 deletions src/components/OrientationContainer.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import type { FC, PropsWithChildren } from 'react';
import { Box } from 'react-native-flex-layout';

import useOrientation, { Orientation } from '@/hooks/useOrientation';

export interface OrientationContainerProps extends PropsWithChildren {
flexOnPortrait?: number;
flexOnLandscape?: number;
display?: 'flex' | 'none';
flexDirection?: 'row' | 'column';
alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
justifyContent?:
| 'flex-start'
| 'flex-end'
| 'center'
| 'space-between'
| 'space-around'
| 'space-evenly';
}

const OrientationContainer: FC<OrientationContainerProps> = ({
children,
flexOnLandscape = 0.5,
flexOnPortrait = 1,
display = 'flex',
flexDirection = 'column',
alignItems = 'stretch',
justifyContent = 'flex-start',
}) => {
const { orientation } = useOrientation();

return (
<Box
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
height: '100%',
}}
>
<Box
style={{
flex:
orientation === Orientation.PORTRAIT
? flexOnPortrait
: flexOnLandscape,
display,
flexDirection,
alignItems,
justifyContent,
}}
>
{children}
</Box>
</Box>
);
};

export default OrientationContainer;
27 changes: 26 additions & 1 deletion src/views/navigation/screens/DebugGroup/DebugScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Box } from 'react-native-flex-layout';
import { Appbar, IconButton, List, Text, useTheme } from 'react-native-paper';
import Toast from 'react-native-toast-message';

import { ScrollView, View } from 'react-native';
import { Linking, ScrollView, View } from 'react-native';

import moment from 'moment';

Expand Down Expand Up @@ -204,6 +204,31 @@ const DebugScreen: FC<PropsWithNavigation> = ({ navigation }) => {
{JSON.stringify(theme, null, 2)}
</Text>
</List.Section>
<List.Section title="Linking testing">
<List.Item
title="Open GitHub (With canOpenURL)"
onPress={async () => {
const link =
'https://github.com/tbnobody/OpenDTU/releases/tag/v24.11.7-2-gdc1787b';
if (await Linking.canOpenURL(link)) {
await Linking.openURL(link);
} else {
Toast.show({
type: 'error',
text1: t('cannotOpenUrl'),
});
}
}}
/>
<List.Item
title="Open GitHub (Without canOpenURL)"
onPress={async () => {
await Linking.openURL(
'https://github.com/tbnobody/OpenDTU/releases/tag/v24.11.7-2-gdc1787b',
);
}}
/>
</List.Section>
<View style={{ height: spacing * 2 }} />
</ScrollView>
</Box>
Expand Down
200 changes: 107 additions & 93 deletions src/views/navigation/screens/InformationGroup/AboutAppScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import moment from 'moment';
import { setEnableAppUpdates } from '@/slices/settings';

import GenericRefreshModal from '@/components/modals/GenericRefreshModal';
import OrientationContainer from '@/components/OrientationContainer';
import ReleaseChangelog from '@/components/ReleaseChangelog';

import useHasNewAppVersion from '@/hooks/useHasNewAppVersion';
Expand Down Expand Up @@ -100,104 +101,117 @@ const AboutAppScreen: FC<PropsWithNavigation> = ({ navigation }) => {
title={t('aboutApp.refreshModal.title')}
warningText={t('aboutApp.refreshModal.warningText')}
/>
<Box style={{ width: '100%', flex: 1 }}>
<ScrollView>
<Box>
<Text style={{ textAlign: 'center' }} variant="titleLarge">
{packageJson.name} {packageJson.version}
</Text>
<Box p={8}>
<Text style={{ textAlign: 'center' }}>
{t('aboutApp.projectHint')}
</Text>
<Box mt={16} mb={8}>
<Button
buttonColor="#24292e"
textColor="#ffffff"
icon="github"
onPress={() => Linking.openURL(packageJson.repository.url)}
>
{t('aboutApp.viewOnGithub')}
</Button>
</Box>
</Box>
</Box>
{Config.DISABLE_IN_APP_UPDATES !== 'true' ? (
<>
<Divider />
<Box p={8}>
<Box
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
gap: 4,
}}
>
<Text variant="titleLarge" style={{ textAlign: 'center' }}>
{hasNewAppVersion
? t('aboutApp.newVersionAvailable')
: t('aboutApp.latestAppRelease')}
</Text>
<Badge
style={{
alignSelf: 'center',
backgroundColor: theme.colors.primary,
}}
>
{prettyTagName}
</Badge>
</Box>
<Box>
<Text variant="bodySmall" style={{ textAlign: 'center' }}>
{t('fetchedWithTime', {
time: formattedReleaseFetchTime,
})}
<OrientationContainer justifyContent="center">
<Box style={{ flex: 1 }}>
<Box style={{ width: '100%', flex: 1 }}>
<ScrollView>
<Box>
<Text style={{ textAlign: 'center' }} variant="titleLarge">
{packageJson.name} {packageJson.version}
</Text>
<Box p={8}>
<Text style={{ textAlign: 'center' }}>
{t('aboutApp.projectHint')}
</Text>
</Box>
<Surface
style={{ padding: 16, marginTop: 8, borderRadius: 16 }}
>
<ReleaseChangelog releaseBody={releaseInfo?.body} />
</Surface>
<Box mt={16} mb={8}>
<Button
buttonColor="#24292e"
textColor="#ffffff"
icon="github"
onPress={() =>
Linking.openURL(releaseInfo?.html_url || '')
}
disabled={!releaseInfo?.html_url}
>
{t('aboutApp.viewMore')}
</Button>
<Box mt={16} mb={8}>
<Button
buttonColor="#24292e"
textColor="#ffffff"
icon="github"
onPress={() =>
Linking.openURL(packageJson.repository.url)
}
>
{t('aboutApp.viewOnGithub')}
</Button>
</Box>
</Box>
</Box>
<Divider />
<List.Item
title={t('settings.activateInappUpdates')}
onPress={handleToggleInAppUpdates}
borderless
right={props => (
<Switch
{...props}
value={!!inAppUpdatesEnabled}
onValueChange={handleToggleInAppUpdates}
color={theme.colors.primary}
{Config.DISABLE_IN_APP_UPDATES !== 'true' ? (
<>
<Divider />
<Box p={8}>
<Box
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
gap: 4,
}}
>
<Text
variant="titleLarge"
style={{ textAlign: 'center' }}
>
{hasNewAppVersion
? t('aboutApp.newVersionAvailable')
: t('aboutApp.latestAppRelease')}
</Text>
<Badge
style={{
alignSelf: 'center',
backgroundColor: theme.colors.primary,
}}
>
{prettyTagName}
</Badge>
</Box>
<Box>
<Text
variant="bodySmall"
style={{ textAlign: 'center' }}
>
{t('fetchedWithTime', {
time: formattedReleaseFetchTime,
})}
</Text>
</Box>
<Surface
style={{ padding: 16, marginTop: 8, borderRadius: 16 }}
>
<ReleaseChangelog releaseBody={releaseInfo?.body} />
</Surface>
<Box mt={16} mb={8}>
<Button
buttonColor="#24292e"
textColor="#ffffff"
icon="github"
onPress={() =>
Linking.openURL(releaseInfo?.html_url || '')
}
disabled={!releaseInfo?.html_url}
>
{t('aboutApp.viewMore')}
</Button>
</Box>
</Box>
<Divider />
<List.Item
title={t('settings.activateInappUpdates')}
onPress={handleToggleInAppUpdates}
borderless
right={props => (
<Switch
{...props}
value={!!inAppUpdatesEnabled}
onValueChange={handleToggleInAppUpdates}
color={theme.colors.primary}
disabled={Config.DISABLE_IN_APP_UPDATES === 'true'}
/>
)}
disabled={Config.DISABLE_IN_APP_UPDATES === 'true'}
style={{
opacity:
Config.DISABLE_IN_APP_UPDATES === 'true' ? 0.5 : 1,
}}
/>
)}
disabled={Config.DISABLE_IN_APP_UPDATES === 'true'}
style={{
opacity: Config.DISABLE_IN_APP_UPDATES === 'true' ? 0.5 : 1,
}}
/>
</>
) : null}
<View style={{ height: spacing * 2 }} />
</ScrollView>
</Box>
</>
) : null}
<View style={{ height: spacing * 2 }} />
</ScrollView>
</Box>
</Box>
</OrientationContainer>
</StyledView>
</>
);
Expand Down
Loading

0 comments on commit ce480e8

Please sign in to comment.