zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Fix input positioning for small screens

Browse source
This commit is contained in:
Paul Frazee 2022-11-16 14:28:33 -06:00
parent 0b7b91d5fd
commit 5bb8751bc1
5 changed files with 53 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/view/com/modals/CreateScene.tsx
View file

@ -92,15 +92,18 @@ export function Component({}: {}) {
setIsProcessing(false)
}
}
const onPressCancel = () => {
store.shell.closeModal()
}
return (
<View style={styles.outer}>
<Text style={styles.title}>Create a scene</Text>
<Text style={styles.description}>
Scenes are invite-only groups which aggregate what's popular with
members.
</Text>
<BottomSheetScrollView style={styles.inner}>
<Text style={styles.title}>Create a scene</Text>
<Text style={styles.description}>
Scenes are invite-only groups which aggregate what's popular with
members.
</Text>
<View style={{paddingBottom: 50}}>
<View style={styles.group}>
<Text style={styles.label}>Scene Handle</Text>
@ -159,6 +162,11 @@ export function Component({}: {}) {
</View>
</View>
)}
<TouchableOpacity style={s.mt10} onPress={onPressCancel}>
<View style={[styles.btn, {backgroundColor: colors.white}]}>
<Text style={[s.black, s.bold]}>Cancel</Text>
</View>
</TouchableOpacity>
</View>
</BottomSheetScrollView>
</View>
@ -168,8 +176,7 @@ export function Component({}: {}) {
const styles = StyleSheet.create({
outer: {
flex: 1,
paddingTop: 20,
paddingBottom: 20,
// paddingTop: 20,
},
title: {
textAlign: 'center',
@ -222,7 +229,6 @@ const styles = StyleSheet.create({
width: '100%',
borderRadius: 32,
padding: 14,
marginBottom: 10,
backgroundColor: colors.gray1,
},
})

21
src/view/com/modals/EditProfile.tsx
View file

@ -1,7 +1,8 @@
import React, {useState} from 'react'
import Toast from '../util/Toast'
import {StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native'
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import {BottomSheetScrollView, BottomSheetTextInput} from '@gorhom/bottom-sheet'
import {ErrorMessage} from '../util/ErrorMessage'
import {useStores} from '../../../state'
import {ProfileViewModel} from '../../../state/models/profile-view'
@ -9,7 +10,7 @@ import {s, colors, gradients} from '../../lib/styles'
import {enforceLen, MAX_DISPLAY_NAME, MAX_DESCRIPTION} from '../../lib/strings'
import * as Profile from '../../../third-party/api/src/client/types/app/bsky/actor/profile'
export const snapPoints = ['80%']
export const snapPoints = ['60%']
export function Component({
profileView,
@ -26,6 +27,9 @@ export function Component({
const [description, setDescription] = useState<string>(
profileView.description || '',
)
const onPressCancel = () => {
store.shell.closeModal()
}
const onPressSave = async () => {
if (error) {
setError('')
@ -60,7 +64,7 @@ export function Component({
return (
<View style={s.flex1}>
<Text style={[s.textCenter, s.bold, s.f16]}>Edit my profile</Text>
<View style={styles.inner}>
<BottomSheetScrollView style={styles.inner}>
{error !== '' && (
<View style={s.mb10}>
<ErrorMessage message={error} />
@ -68,7 +72,7 @@ export function Component({
)}
<View style={styles.group}>
<Text style={styles.label}>Display Name</Text>
<TextInput
<BottomSheetTextInput
style={styles.textInput}
placeholder="e.g. Alice Roberts"
value={displayName}
@ -77,7 +81,7 @@ export function Component({
</View>
<View style={styles.group}>
<Text style={styles.label}>Description</Text>
<TextInput
<BottomSheetTextInput
style={[styles.textArea]}
placeholder="e.g. Artist, dog-lover, and memelord."
multiline
@ -94,7 +98,12 @@ export function Component({
<Text style={[s.white, s.bold]}>Save Changes</Text>
</LinearGradient>
</TouchableOpacity>
</View>
<TouchableOpacity style={s.mt5} onPress={onPressCancel}>
<View style={[styles.btn]}>
<Text style={[s.black, s.bold]}>Cancel</Text>
</View>
</TouchableOpacity>
</BottomSheetScrollView>
</View>
)
}

14
src/view/com/modals/ServerInput.tsx
View file

@ -1,13 +1,9 @@
import React, {useState} from 'react'
import Toast from '../util/Toast'
import {StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import LinearGradient from 'react-native-linear-gradient'
import {ErrorMessage} from '../util/ErrorMessage'
import {BottomSheetScrollView, BottomSheetTextInput} from '@gorhom/bottom-sheet'
import {useStores} from '../../../state'
import {ProfileViewModel} from '../../../state/models/profile-view'
import {s, colors, gradients} from '../../lib/styles'
import {enforceLen, MAX_DISPLAY_NAME, MAX_DESCRIPTION} from '../../lib/strings'
import {s, colors} from '../../lib/styles'
import {
IS_PROD_BUILD,
LOCAL_DEV_SERVICE,
@ -38,7 +34,7 @@ export function Component({
return (
<View style={s.flex1}>
<Text style={[s.textCenter, s.bold, s.f18]}>Choose Service</Text>
<View style={styles.inner}>
<BottomSheetScrollView style={styles.inner}>
<View style={styles.group}>
{!IS_PROD_BUILD ? (
<>
@ -66,7 +62,7 @@ export function Component({
<View style={styles.group}>
<Text style={styles.label}>Other service</Text>
<View style={{flexDirection: 'row'}}>
<TextInput
<BottomSheetTextInput
style={styles.textInput}
placeholder="e.g. https://bsky.app"
autoCapitalize="none"
@ -86,7 +82,7 @@ export function Component({
</TouchableOpacity>
</View>
</View>
</View>
</BottomSheetScrollView>
</View>
)
}