Skip to content

Commit 41bd637

Browse files
CommanderRedYTCommanderRedYT
authored
Merge pull request #284 from OpenDTU-App/add-orientation-container
Improve layout for tablet screens on setup screens
2 parents 3f5c74b + bdfe864 commit 41bd637

File tree

6 files changed

+337
-220
lines changed

6 files changed

+337
-220
lines changed

‎src/components/OrientationContainer.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import type { FC, PropsWithChildren } from 'react';
2+
import { Box } from 'react-native-flex-layout';
3+
4+
import useOrientation, { Orientation } from '@/hooks/useOrientation';
5+
6+
export interface OrientationContainerProps extends PropsWithChildren {
7+
flexOnPortrait?: number;
8+
flexOnLandscape?: number;
9+
display?: 'flex' | 'none';
10+
flexDirection?: 'row' | 'column';
11+
alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
12+
justifyContent?:
13+
| 'flex-start'
14+
| 'flex-end'
15+
| 'center'
16+
| 'space-between'
17+
| 'space-around'
18+
| 'space-evenly';
19+
}
20+
21+
const OrientationContainer: FC<OrientationContainerProps> = ({
22+
children,
23+
flexOnLandscape = 0.5,
24+
flexOnPortrait = 1,
25+
display = 'flex',
26+
flexDirection = 'column',
27+
alignItems = 'stretch',
28+
justifyContent = 'flex-start',
29+
}) => {
30+
const { orientation } = useOrientation();
31+
32+
return (
33+
<Box
34+
style={{
35+
display: 'flex',
36+
alignItems: 'center',
37+
justifyContent: 'center',
38+
flexDirection: 'row',
39+
height: '100%',
40+
}}
41+
>
42+
<Box
43+
style={{
44+
flex:
45+
orientation === Orientation.PORTRAIT
46+
? flexOnPortrait
47+
: flexOnLandscape,
48+
display,
49+
flexDirection,
50+
alignItems,
51+
justifyContent,
52+
}}
53+
>
54+
{children}
55+
</Box>
56+
</Box>
57+
);
58+
};
59+
60+
export default OrientationContainer;

‎src/views/navigation/screens/DebugGroup/DebugScreen.tsx‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Box } from 'react-native-flex-layout';
55
import { Appbar, IconButton, List, Text, useTheme } from 'react-native-paper';
66
import Toast from 'react-native-toast-message';
77

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

1010
import moment from 'moment';
1111

@@ -204,6 +204,31 @@ const DebugScreen: FC<PropsWithNavigation> = ({ navigation }) => {
204204
{JSON.stringify(theme, null, 2)}
205205
</Text>
206206
</List.Section>
207+
<List.Section title="Linking testing">
208+
<List.Item
209+
title="Open GitHub (With canOpenURL)"
210+
onPress={async () => {
211+
const link =
212+
'https://github.com/tbnobody/OpenDTU/releases/tag/v24.11.7-2-gdc1787b';
213+
if (await Linking.canOpenURL(link)) {
214+
await Linking.openURL(link);
215+
} else {
216+
Toast.show({
217+
type: 'error',
218+
text1: t('cannotOpenUrl'),
219+
});
220+
}
221+
}}
222+
/>
223+
<List.Item
224+
title="Open GitHub (Without canOpenURL)"
225+
onPress={async () => {
226+
await Linking.openURL(
227+
'https://github.com/tbnobody/OpenDTU/releases/tag/v24.11.7-2-gdc1787b',
228+
);
229+
}}
230+
/>
231+
</List.Section>
207232
<View style={{ height: spacing * 2 }} />
208233
</ScrollView>
209234
</Box>

‎src/views/navigation/screens/InformationGroup/AboutAppScreen.tsx‎

Lines changed: 107 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import moment from 'moment';
2222
import { setEnableAppUpdates } from '@/slices/settings';
2323

2424
import GenericRefreshModal from '@/components/modals/GenericRefreshModal';
25+
import OrientationContainer from '@/components/OrientationContainer';
2526
import ReleaseChangelog from '@/components/ReleaseChangelog';
2627

2728
import useHasNewAppVersion from '@/hooks/useHasNewAppVersion';
@@ -100,104 +101,117 @@ const AboutAppScreen: FC<PropsWithNavigation> = ({ navigation }) => {
100101
title={t('aboutApp.refreshModal.title')}
101102
warningText={t('aboutApp.refreshModal.warningText')}
102103
/>
103-
<Box style={{ width: '100%', flex: 1 }}>
104-
<ScrollView>
105-
<Box>
106-
<Text style={{ textAlign: 'center' }} variant="titleLarge">
107-
{packageJson.name} {packageJson.version}
108-
</Text>
109-
<Box p={8}>
110-
<Text style={{ textAlign: 'center' }}>
111-
{t('aboutApp.projectHint')}
112-
</Text>
113-
<Box mt={16} mb={8}>
114-
<Button
115-
buttonColor="#24292e"
116-
textColor="#ffffff"
117-
icon="github"
118-
onPress={() => Linking.openURL(packageJson.repository.url)}
119-
>
120-
{t('aboutApp.viewOnGithub')}
121-
</Button>
122-
</Box>
123-
</Box>
124-
</Box>
125-
{Config.DISABLE_IN_APP_UPDATES !== 'true' ? (
126-
<>
127-
<Divider />
128-
<Box p={8}>
129-
<Box
130-
style={{
131-
display: 'flex',
132-
flexDirection: 'row',
133-
justifyContent: 'center',
134-
gap: 4,
135-
}}
136-
>
137-
<Text variant="titleLarge" style={{ textAlign: 'center' }}>
138-
{hasNewAppVersion
139-
? t('aboutApp.newVersionAvailable')
140-
: t('aboutApp.latestAppRelease')}
141-
</Text>
142-
<Badge
143-
style={{
144-
alignSelf: 'center',
145-
backgroundColor: theme.colors.primary,
146-
}}
147-
>
148-
{prettyTagName}
149-
</Badge>
150-
</Box>
151-
<Box>
152-
<Text variant="bodySmall" style={{ textAlign: 'center' }}>
153-
{t('fetchedWithTime', {
154-
time: formattedReleaseFetchTime,
155-
})}
104+
<OrientationContainer justifyContent="center">
105+
<Box style={{ flex: 1 }}>
106+
<Box style={{ width: '100%', flex: 1 }}>
107+
<ScrollView>
108+
<Box>
109+
<Text style={{ textAlign: 'center' }} variant="titleLarge">
110+
{packageJson.name} {packageJson.version}
111+
</Text>
112+
<Box p={8}>
113+
<Text style={{ textAlign: 'center' }}>
114+
{t('aboutApp.projectHint')}
156115
</Text>
157-
</Box>
158-
<Surface
159-
style={{ padding: 16, marginTop: 8, borderRadius: 16 }}
160-
>
161-
<ReleaseChangelog releaseBody={releaseInfo?.body} />
162-
</Surface>
163-
<Box mt={16} mb={8}>
164-
<Button
165-
buttonColor="#24292e"
166-
textColor="#ffffff"
167-
icon="github"
168-
onPress={() =>
169-
Linking.openURL(releaseInfo?.html_url || '')
170-
}
171-
disabled={!releaseInfo?.html_url}
172-
>
173-
{t('aboutApp.viewMore')}
174-
</Button>
116+
<Box mt={16} mb={8}>
117+
<Button
118+
buttonColor="#24292e"
119+
textColor="#ffffff"
120+
icon="github"
121+
onPress={() =>
122+
Linking.openURL(packageJson.repository.url)
123+
}
124+
>
125+
{t('aboutApp.viewOnGithub')}
126+
</Button>
127+
</Box>
175128
</Box>
176129
</Box>
177-
<Divider />
178-
<List.Item
179-
title={t('settings.activateInappUpdates')}
180-
onPress={handleToggleInAppUpdates}
181-
borderless
182-
right={props => (
183-
<Switch
184-
{...props}
185-
value={!!inAppUpdatesEnabled}
186-
onValueChange={handleToggleInAppUpdates}
187-
color={theme.colors.primary}
130+
{Config.DISABLE_IN_APP_UPDATES !== 'true' ? (
131+
<>
132+
<Divider />
133+
<Box p={8}>
134+
<Box
135+
style={{
136+
display: 'flex',
137+
flexDirection: 'row',
138+
justifyContent: 'center',
139+
gap: 4,
140+
}}
141+
>
142+
<Text
143+
variant="titleLarge"
144+
style={{ textAlign: 'center' }}
145+
>
146+
{hasNewAppVersion
147+
? t('aboutApp.newVersionAvailable')
148+
: t('aboutApp.latestAppRelease')}
149+
</Text>
150+
<Badge
151+
style={{
152+
alignSelf: 'center',
153+
backgroundColor: theme.colors.primary,
154+
}}
155+
>
156+
{prettyTagName}
157+
</Badge>
158+
</Box>
159+
<Box>
160+
<Text
161+
variant="bodySmall"
162+
style={{ textAlign: 'center' }}
163+
>
164+
{t('fetchedWithTime', {
165+
time: formattedReleaseFetchTime,
166+
})}
167+
</Text>
168+
</Box>
169+
<Surface
170+
style={{ padding: 16, marginTop: 8, borderRadius: 16 }}
171+
>
172+
<ReleaseChangelog releaseBody={releaseInfo?.body} />
173+
</Surface>
174+
<Box mt={16} mb={8}>
175+
<Button
176+
buttonColor="#24292e"
177+
textColor="#ffffff"
178+
icon="github"
179+
onPress={() =>
180+
Linking.openURL(releaseInfo?.html_url || '')
181+
}
182+
disabled={!releaseInfo?.html_url}
183+
>
184+
{t('aboutApp.viewMore')}
185+
</Button>
186+
</Box>
187+
</Box>
188+
<Divider />
189+
<List.Item
190+
title={t('settings.activateInappUpdates')}
191+
onPress={handleToggleInAppUpdates}
192+
borderless
193+
right={props => (
194+
<Switch
195+
{...props}
196+
value={!!inAppUpdatesEnabled}
197+
onValueChange={handleToggleInAppUpdates}
198+
color={theme.colors.primary}
199+
disabled={Config.DISABLE_IN_APP_UPDATES === 'true'}
200+
/>
201+
)}
188202
disabled={Config.DISABLE_IN_APP_UPDATES === 'true'}
203+
style={{
204+
opacity:
205+
Config.DISABLE_IN_APP_UPDATES === 'true' ? 0.5 : 1,
206+
}}
189207
/>
190-
)}
191-
disabled={Config.DISABLE_IN_APP_UPDATES === 'true'}
192-
style={{
193-
opacity: Config.DISABLE_IN_APP_UPDATES === 'true' ? 0.5 : 1,
194-
}}
195-
/>
196-
</>
197-
) : null}
198-
<View style={{ height: spacing * 2 }} />
199-
</ScrollView>
200-
</Box>
208+
</>
209+
) : null}
210+
<View style={{ height: spacing * 2 }} />
211+
</ScrollView>
212+
</Box>
213+
</Box>
214+
</OrientationContainer>
201215
</StyledView>
202216
</>
203217
);

0 commit comments

Comments
 (0)