fix dialog width and height on tablet

This commit is contained in:
ammarahm-ed
2020-10-04 09:46:50 +05:00
parent b4005314ff
commit a24185f71f
9 changed files with 26 additions and 25 deletions

View File

@@ -3,7 +3,7 @@ import {Modal, Text, TouchableOpacity, View} from 'react-native';
import {TextInput} from 'react-native-gesture-handler'; import {TextInput} from 'react-native-gesture-handler';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {opacity, ph, pv, SIZE, WEIGHT} from '../../common/common'; import {opacity, ph, pv, SIZE, WEIGHT} from '../../common/common';
import {getElevation, ToastEvent, db} from '../../utils/utils'; import {getElevation, ToastEvent, db, DDS} from '../../utils/utils';
import {eSendEvent} from '../../services/eventManager'; import {eSendEvent} from '../../services/eventManager';
import {eOnNewTopicAdded} from '../../services/events'; import {eOnNewTopicAdded} from '../../services/events';
import {Toast} from '../Toast'; import {Toast} from '../Toast';
@@ -68,7 +68,7 @@ export class AddTopicDialog extends React.Component {
<View <View
style={{ style={{
...getElevation(5), ...getElevation(5),
width: '80%', width:DDS.isTab? 350 : '80%',
maxHeight: 350, maxHeight: 350,
borderRadius: 5, borderRadius: 5,
backgroundColor: colors.bg, backgroundColor: colors.bg,

View File

@@ -118,7 +118,7 @@ const ExportDialog = () => {
<View <View
style={[ style={[
{ {
width: DDS.isTab ? '40%' : '80%', width: DDS.isTab ? 350 : '80%',
backgroundColor: colors.bg, backgroundColor: colors.bg,
}, },
styles.container, styles.container,

View File

@@ -237,6 +237,7 @@ const LoginDialog = () => {
justifyContent: 'center', justifyContent: 'center',
borderRadius: DDS.isTab ? 5 : 0, borderRadius: DDS.isTab ? 5 : 0,
zIndex: 10, zIndex: 10,
...getElevation(5),
}}> }}>
<Toast context="local" /> <Toast context="local" />
{loggingIn || signingIn ? ( {loggingIn || signingIn ? (

View File

@@ -110,7 +110,9 @@ export const Menu = ({
opacity: hide ? 0 : 1, opacity: hide ? 0 : 1,
width: '100%', width: '100%',
backgroundColor: colors.bg, backgroundColor: colors.bg,
paddingTop:insets.top paddingTop:insets.top,
borderRightWidth:1,
borderRightColor:colors.nav
}}> }}>
<ScrollView <ScrollView
alwaysBounceVertical={false} alwaysBounceVertical={false}

View File

@@ -114,8 +114,8 @@ const MoveNoteDialog = () => {
<View <View
style={{ style={{
...getElevation(DDS.isTab ? 10 : 0), ...getElevation(DDS.isTab ? 10 : 0),
width: DDS.isTab ? '65%' : '100%', width: DDS.isTab ? 500 : '100%',
height: DDS.isTab ? '90%' : '100%', height: DDS.isTab ? 500 : '100%',
flex: 1, flex: 1,
borderRadius: DDS.isTab ? 5 : 0, borderRadius: DDS.isTab ? 5 : 0,
backgroundColor: colors.bg, backgroundColor: colors.bg,

View File

@@ -15,6 +15,7 @@ class PremiumDialog extends React.Component {
this.state = { this.state = {
user: null, user: null,
product: null, product: null,
scrollEnabled: false,
}; };
this.routeIndex = 0; this.routeIndex = 0;
this.count = 0; this.count = 0;
@@ -25,6 +26,7 @@ class PremiumDialog extends React.Component {
this.subsriptionErrorListener = RNIap.purchaseErrorListener( this.subsriptionErrorListener = RNIap.purchaseErrorListener(
this.onSubscriptionError, this.onSubscriptionError,
); );
this.prevScroll = 0;
} }
open() { open() {
@@ -37,7 +39,7 @@ class PremiumDialog extends React.Component {
async componentDidMount() { async componentDidMount() {
let u = await db.user.get(); let u = await db.user.get();
let prod = await RNIap.getSubscriptions(itemSkus); let prod = await RNIap.getSubscriptions(itemSkus);
console.log(prod); //console.log(prod);
this.setState({ this.setState({
user: u && u.Id ? u : null, user: u && u.Id ? u : null,
product: prod[0], product: prod[0],
@@ -69,11 +71,9 @@ class PremiumDialog extends React.Component {
width: DDS.isTab ? 500 : '100%', width: DDS.isTab ? 500 : '100%',
alignSelf: 'center', alignSelf: 'center',
borderRadius: 10, borderRadius: 10,
marginBottom: DDS.isTab ? 50 : 0, marginBottom: DDS.isTab ? 50 : 0,
}} }}
extraScroll={DDS.isTab ? 50 : 0} extraScroll={DDS.isTab ? 50 : 0}
gestureEnabled={true}
footerAlwaysVisible={DDS.isTab} footerAlwaysVisible={DDS.isTab}
footerHeight={DDS.isTab ? 20 : 10} footerHeight={DDS.isTab ? 20 : 10}
footerStyle={ footerStyle={
@@ -111,10 +111,8 @@ class PremiumDialog extends React.Component {
<ScrollView <ScrollView
style={{ style={{
width: '100%', width: '100%',
maxHeight:DDS.isTab? h * 0.35 : h * 0.5, maxHeight: DDS.isTab ? h * 0.35 : h * 0.5,
}} }}>
nestedScrollEnabled={true}
showsVerticalScrollIndicator={false}>
{[ {[
{ {
title: 'Cross Platfrom Sync', title: 'Cross Platfrom Sync',

View File

@@ -4,7 +4,7 @@ import {ph, SIZE, WEIGHT} from '../../common/common';
import {useTracked} from '../../provider'; import {useTracked} from '../../provider';
import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/eventManager'; import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/eventManager';
import {eOpenProgressDialog, eCloseProgressDialog} from '../../services/events'; import {eOpenProgressDialog, eCloseProgressDialog} from '../../services/events';
import {getElevation} from '../../utils/utils'; import {DDS, getElevation} from '../../utils/utils';
import BaseDialog from '../Dialog/base-dialog'; import BaseDialog from '../Dialog/base-dialog';
import {Loading} from '../Loading'; import {Loading} from '../Loading';
@@ -39,7 +39,7 @@ const ProgressDialog = () => {
<View <View
style={{ style={{
...getElevation(5), ...getElevation(5),
width: '80%', width: DDS.isTab? 350 : '80%',
maxHeight: 350, maxHeight: 350,
borderRadius: 5, borderRadius: 5,
backgroundColor: colors.bg, backgroundColor: colors.bg,

View File

@@ -1,7 +1,6 @@
import React, {useEffect, useState} from 'react'; import React, {useEffect, useState} from 'react';
import {FlatList, Text, View} from 'react-native'; import {FlatList, Text, View} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context'; import {useSafeAreaInsets} from 'react-native-safe-area-context';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import RNFetchBlob from 'rn-fetch-blob'; import RNFetchBlob from 'rn-fetch-blob';
import {ph, SIZE, WEIGHT} from '../../common/common'; import {ph, SIZE, WEIGHT} from '../../common/common';
import {useTracked} from '../../provider'; import {useTracked} from '../../provider';
@@ -11,11 +10,13 @@ import {eCloseRestoreDialog, eOpenRestoreDialog} from '../../services/events';
import storage from '../../utils/storage'; import storage from '../../utils/storage';
import { import {
db, db,
DDS,
getElevation, getElevation,
requestStoragePermission, requestStoragePermission,
sleep, sleep,
ToastEvent, ToastEvent,
} from '../../utils/utils'; } from '../../utils/utils';
import {ActionIcon} from '../ActionIcon';
import {Button} from '../Button'; import {Button} from '../Button';
import BaseDialog from '../Dialog/base-dialog'; import BaseDialog from '../Dialog/base-dialog';
import {Loading} from '../Loading'; import {Loading} from '../Loading';
@@ -68,8 +69,8 @@ const RestoreDialog = () => {
<View <View
style={{ style={{
...getElevation(5), ...getElevation(5),
width: '100%', width: DDS.isTab ? 500 : '100%',
height: '100%', height: DDS.isTab ? 500 : '100%',
borderRadius: 5, borderRadius: 5,
backgroundColor: colors.bg, backgroundColor: colors.bg,
paddingHorizontal: 12, paddingHorizontal: 12,
@@ -107,19 +108,18 @@ const RestoreDialog = () => {
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
height: 50, height: 50,
marginTop: insets.top, marginTop: DDS.isTab ? 0 : insets.top,
}}> }}>
<Icon <ActionIcon
name="close" name="close"
size={SIZE.xxl} size={SIZE.xxl}
onPress={close} onPress={close}
style={{ customStyle={{
width: 50, width: 40,
height: 50, height: 40,
position: 'absolute', position: 'absolute',
textAlignVertical: 'center', textAlignVertical: 'center',
left: 0, left: 0,
marginBottom: 15,
}} }}
color={colors.heading} color={colors.heading}
/> />

View File

@@ -263,7 +263,7 @@ export class VaultDialog extends Component {
<View <View
style={{ style={{
...getElevation(5), ...getElevation(5),
width: '80%', width: DDS.isTab ? 350 : '80%',
maxHeight: 350, maxHeight: 350,
borderRadius: 5, borderRadius: 5,
backgroundColor: colors.bg, backgroundColor: colors.bg,