Skip to content

[FIX] Screen Lock's Password screen UI is broken on tablets #4583

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
reinaldonetof merged 7 commits into from
Oct 18, 2022
Merged

[FIX] Screen Lock's Password screen UI is broken on tablets #4583

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0cb7547
[FIX] Screen Lock's Password screen UI is broken on tablets
reinaldonetof Sep 29, 2022
0f8e848
minor tweak and added comment
reinaldonetof Sep 29, 2022
b41cd64
minor tweak
reinaldonetof Sep 29, 2022
f723935
minor tweak
reinaldonetof Sep 30, 2022
a9fdd03
minor tweak
reinaldonetof Oct 5, 2022
d55e5c3
Merge branch 'develop' into fix.password-screen-landscape
reinaldonetof Oct 13, 2022
f5d9d29
Merge branch 'develop' into fix.password-screen-landscape
reinaldonetof Oct 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions app/containers/Passcode/Base/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { Text } from 'react-native';
import { Text, StyleProp, ViewStyle } from 'react-native';

import styles from './styles';
import { themes } from '../../../lib/constants';
Expand All @@ -12,16 +12,17 @@ interface IPasscodeButton {
icon?: TIconsName;
disabled?: boolean;
onPress?: Function;
style?: StyleProp<ViewStyle>;
}

const Button = React.memo(({ text, disabled, onPress, icon }: IPasscodeButton) => {
const Button = React.memo(({ style, text, disabled, onPress, icon }: IPasscodeButton) => {
const { theme } = useTheme();

const press = () => onPress && onPress(text);

return (
<Touch
style={[styles.buttonView, { backgroundColor: 'transparent' }]}
style={[styles.buttonView, { backgroundColor: 'transparent' }, style]}
underlayColor={themes[theme].passcodeButtonActive}
rippleColor={themes[theme].passcodeButtonActive}
enabled={!disabled}
Expand Down
57 changes: 39 additions & 18 deletions app/containers/Passcode/Base/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
import React, { forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
import { Col, Grid, Row } from 'react-native-easy-grid';
import range from 'lodash/range';
import { View } from 'react-native';
import * as Animatable from 'react-native-animatable';
import * as Haptics from 'expo-haptics';
import Orientation from 'react-native-orientation-locker';

import styles from './styles';
import Button from './Button';
Expand All @@ -14,6 +15,8 @@ import { useTheme } from '../../../theme';
import LockIcon from './LockIcon';
import Title from './Title';
import Subtitle from './Subtitle';
import { useDimensions } from '../../../dimensions';
import { isTablet } from '../../../lib/methods/helpers';

interface IPasscodeBase {
type: string;
Expand All @@ -34,7 +37,25 @@ export interface IBase {

const Base = forwardRef<IBase, IPasscodeBase>(
({ type, onEndProcess, previousPasscode, title, subtitle, onError, showBiometry, onBiometryPress }, ref) => {
useLayoutEffect(() => {
if (!isTablet) {
Orientation.lockToPortrait();
}

return () => {
if (!isTablet) {
Orientation.unlockAllOrientations();
}
};
}, []);

const { theme } = useTheme();
const { height } = useDimensions();

// 206 is the height of the header calculating the margins, icon size height, title font size and subtitle height.
// 56 is a fixed number to decrease the height of button numbers.
const dinamicHeight = (height - 206 - 56) / 4;
const heightButtonRow = { height: dinamicHeight > 102 ? 102 : dinamicHeight };

const rootRef = useRef<Animatable.View & View>(null);
const dotsRef = useRef<Animatable.View & View>(null);
Expand Down Expand Up @@ -103,40 +124,40 @@ const Base = forwardRef<IBase, IPasscodeBase>(
<Dots passcode={passcode} length={PASSCODE_LENGTH} />
</Animatable.View>
</Row>
<Row style={[styles.row, styles.buttonRow]}>
<Row style={[styles.row, heightButtonRow]}>
{range(1, 4).map(i => (
<Col key={i} style={styles.colButton}>
<Button text={i.toString()} onPress={onPressNumber} />
<Col key={i} style={[styles.colButton, heightButtonRow]}>
<Button style={heightButtonRow} text={i.toString()} onPress={onPressNumber} />
</Col>
))}
</Row>
<Row style={[styles.row, styles.buttonRow]}>
<Row style={[styles.row, heightButtonRow]}>
{range(4, 7).map(i => (
<Col key={i} style={styles.colButton}>
<Button text={i.toString()} onPress={onPressNumber} />
<Col key={i} style={[styles.colButton, heightButtonRow]}>
<Button style={heightButtonRow} text={i.toString()} onPress={onPressNumber} />
</Col>
))}
</Row>
<Row style={[styles.row, styles.buttonRow]}>
<Row style={[styles.row, heightButtonRow]}>
{range(7, 10).map(i => (
<Col key={i} style={styles.colButton}>
<Button text={i.toString()} onPress={onPressNumber} />
<Col key={i} style={[styles.colButton, heightButtonRow]}>
<Button style={heightButtonRow} text={i.toString()} onPress={onPressNumber} />
</Col>
))}
</Row>
<Row style={[styles.row, styles.buttonRow]}>
<Row style={[styles.row, heightButtonRow]}>
{showBiometry ? (
<Col style={styles.colButton}>
<Button icon='fingerprint' onPress={onBiometryPress} />
<Col style={[styles.colButton, heightButtonRow]}>
<Button style={heightButtonRow} icon='fingerprint' onPress={onBiometryPress} />
</Col>
) : (
<Col style={styles.colButton} />
<Col style={[styles.colButton, heightButtonRow]} />
)}
<Col style={styles.colButton}>
<Button text='0' onPress={onPressNumber} />
<Col style={[styles.colButton, heightButtonRow]}>
<Button style={heightButtonRow} text='0' onPress={onPressNumber} />
</Col>
<Col style={styles.colButton}>
<Button icon='backspace' onPress={onPressDelete} />
<Col style={[styles.colButton, heightButtonRow]}>
<Button style={heightButtonRow} icon='backspace' onPress={onPressDelete} />
</Col>
</Row>
</Grid>
Expand Down
7 changes: 1 addition & 6 deletions app/containers/Passcode/Base/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,12 @@ export default StyleSheet.create({
alignItems: 'center',
justifyContent: 'center'
},
buttonRow: {
height: 102
},
colButton: {
flex: 0,
marginLeft: 12,
marginRight: 12,
alignItems: 'center',
width: 78,
height: 78
width: 78
},
buttonText: {
fontSize: 28,
Expand All @@ -37,7 +33,6 @@ export default StyleSheet.create({
alignItems: 'center',
justifyContent: 'center',
width: 78,
height: 78,
borderRadius: 4
},
textTitle: {
Expand Down