verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix scaling

This commit is contained in:
Diego Mello 2021-09-21 18:17:53 -03:00
parent cd583bb503
commit e01c31dbf3
2 changed files with 29 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/utils/scaling.js
View File

@ -2,13 +2,12 @@ import { Dimensions } from 'react-native';
import { isTablet } from './deviceInfo';
const { width, height } = Dimensions.get('window');
const guidelineBaseWidth = isTablet ? 600 : 375;
const guidelineBaseHeight = isTablet ? 800 : 667;
const scale = size => (width / guidelineBaseWidth) * size;
const verticalScale = size => (height / guidelineBaseHeight) * size;
const moderateScale = (size, factor = 0.5) => size + (scale(size) - size) * factor;
// TODO: we need to refactor this
const scale = (size, width) => (width / guidelineBaseWidth) * size;
const verticalScale = (size, height) => (height / guidelineBaseHeight) * size;
const moderateScale = (size, factor = 0.5, width) => size + (scale(size, width) - size) * factor;
export { scale, verticalScale, moderateScale };

37
app/views/NewServerView/index.js
View File

@ -31,6 +31,7 @@ import SSLPinning from '../../utils/sslPinning';
import RocketChat from '../../lib/rocketchat';
import { isTablet } from '../../utils/deviceInfo';
import { verticalScale, moderateScale } from '../../utils/scaling';
import { withDimensions } from '../../dimensions';
import ServerInput from './ServerInput';
const styles = StyleSheet.create({
@ -287,22 +288,26 @@ class NewServerView extends React.Component {
renderCertificatePicker = () => {
const { certificate } = this.state;
const { theme } = this.props;
const { theme, width, height } = this.props;
return (
<View
style={[
styles.certificatePicker,
{
marginBottom: verticalScale(32)
marginBottom: verticalScale(32, height)
}
]}>
<Text style={[styles.chooseCertificateTitle, { color: themes[theme].auxiliaryText, fontSize: moderateScale(13) }]}>
<Text
style={[
styles.chooseCertificateTitle,
{ color: themes[theme].auxiliaryText, fontSize: moderateScale(13, null, width) }
]}>
{certificate ? I18n.t('Your_certificate') : I18n.t('Do_you_have_a_certificate')}
</Text>
<TouchableOpacity
onPress={certificate ? this.handleRemove : this.chooseCertificate}
testID='new-server-choose-certificate'>
<Text style={[styles.chooseCertificate, { color: themes[theme].tintColor, fontSize: moderateScale(13) }]}>
<Text style={[styles.chooseCertificate, { color: themes[theme].tintColor, fontSize: moderateScale(13, null, width) }]}>
{certificate ?? I18n.t('Apply_Your_Certificate')}
</Text>
</TouchableOpacity>
@ -311,7 +316,7 @@ class NewServerView extends React.Component {
};
render() {
const { connecting, theme, adding, root } = this.props;
const { connecting, theme, adding, root, width, height } = this.props;
const { text, connectingOpen, serversHistory } = this.state;
const marginTopHeader = adding && root === ROOT_NEW_SERVER ? 25 : 70;
@ -322,9 +327,9 @@ class NewServerView extends React.Component {
style={[
styles.onboardingImage,
{
marginTop: isTablet ? 0 : verticalScale(marginTopHeader),
marginBottom: verticalScale(25),
maxHeight: verticalScale(150)
marginTop: isTablet ? 0 : verticalScale(marginTopHeader, height),
marginBottom: verticalScale(25, height),
maxHeight: verticalScale(150, height)
}
]}
source={require('../../static/images/logo.png')}
@ -334,14 +339,18 @@ class NewServerView extends React.Component {
<Text
style={[
styles.title,
{ color: themes[theme].titleText, fontSize: moderateScale(22), marginBottom: verticalScale(8) }
{ color: themes[theme].titleText, fontSize: moderateScale(22, null, width), marginBottom: verticalScale(8, height) }
]}>
Rocket.Chat
</Text>
<Text
style={[
styles.subtitle,
{ color: themes[theme].controlText, fontSize: moderateScale(16), marginBottom: verticalScale(41) }
{
color: themes[theme].controlText,
fontSize: moderateScale(16, null, width),
marginBottom: verticalScale(41, height)
}
]}>
{I18n.t('Onboarding_subtitle')}
</Text>
@ -368,7 +377,11 @@ class NewServerView extends React.Component {
<Text
style={[
styles.description,
{ color: themes[theme].auxiliaryText, fontSize: moderateScale(14), marginBottom: verticalScale(24) }
{
color: themes[theme].auxiliaryText,
fontSize: moderateScale(14, null, width),
marginBottom: verticalScale(24, height)
}
]}>
{I18n.t('Onboarding_join_open_description')}
</Text>
@ -402,4 +415,4 @@ const mapDispatchToProps = dispatch => ({
inviteLinksClear: () => dispatch(inviteLinksClearAction())
});
export default connect(mapStateToProps, mapDispatchToProps)(withTheme(NewServerView));
export default connect(mapStateToProps, mapDispatchToProps)(withDimensions(withTheme(NewServerView)));