Fix input positioning for small screens

zio/stable
Paul Frazee 2022-11-16 14:28:33 -06:00
parent 0b7b91d5fd
commit 5bb8751bc1
5 changed files with 53 additions and 34 deletions

View File

@ -1,6 +1,7 @@
import React, {useEffect, useMemo, useState} from 'react' import React, {useEffect, useMemo, useState} from 'react'
import { import {
ActivityIndicator, ActivityIndicator,
KeyboardAvoidingView,
StyleSheet, StyleSheet,
Text, Text,
TextInput, TextInput,
@ -20,7 +21,7 @@ import {s, colors, gradients} from '../../lib/styles'
const MAX_TEXT_LENGTH = 256 const MAX_TEXT_LENGTH = 256
const WARNING_TEXT_LENGTH = 200 const WARNING_TEXT_LENGTH = 200
const DANGER_TEXT_LENGTH = 255 const DANGER_TEXT_LENGTH = MAX_TEXT_LENGTH
export function ComposePost({ export function ComposePost({
replyTo, replyTo,
@ -56,9 +57,6 @@ export function ComposePost({
}) })
const onChangeText = (newText: string) => { const onChangeText = (newText: string) => {
if (newText.length > MAX_TEXT_LENGTH) {
newText = newText.slice(0, MAX_TEXT_LENGTH)
}
setText(newText) setText(newText)
const prefix = extractTextAutocompletePrefix(newText) const prefix = extractTextAutocompletePrefix(newText)
@ -81,6 +79,9 @@ export function ComposePost({
if (isProcessing) { if (isProcessing) {
return return
} }
if (text.length > MAX_TEXT_LENGTH) {
return
}
setError('') setError('')
if (text.trim().length === 0) { if (text.trim().length === 0) {
setError('Did you want to say anything?') setError('Did you want to say anything?')
@ -112,6 +113,7 @@ export function ComposePost({
setAutocompleteOptions([]) setAutocompleteOptions([])
} }
const canPost = text.length <= MAX_TEXT_LENGTH
const progressColor = const progressColor =
text.length > DANGER_TEXT_LENGTH text.length > DANGER_TEXT_LENGTH
? '#e60000' ? '#e60000'
@ -133,7 +135,7 @@ export function ComposePost({
}, [text]) }, [text])
return ( return (
<View style={styles.outer}> <KeyboardAvoidingView behavior="padding" style={styles.outer}>
<View style={styles.topbar}> <View style={styles.topbar}>
<TouchableOpacity onPress={onPressCancel}> <TouchableOpacity onPress={onPressCancel}>
<Text style={[s.blue3, s.f16]}>Cancel</Text> <Text style={[s.blue3, s.f16]}>Cancel</Text>
@ -143,7 +145,7 @@ export function ComposePost({
<View style={styles.postBtn}> <View style={styles.postBtn}>
<ActivityIndicator /> <ActivityIndicator />
</View> </View>
) : ( ) : canPost ? (
<TouchableOpacity onPress={onPressPublish}> <TouchableOpacity onPress={onPressPublish}>
<LinearGradient <LinearGradient
colors={[gradients.primary.start, gradients.primary.end]} colors={[gradients.primary.start, gradients.primary.end]}
@ -153,6 +155,10 @@ export function ComposePost({
<Text style={[s.white, s.f16, s.bold]}>Post</Text> <Text style={[s.white, s.f16, s.bold]}>Post</Text>
</LinearGradient> </LinearGradient>
</TouchableOpacity> </TouchableOpacity>
) : (
<View style={[styles.postBtn, {backgroundColor: colors.gray1}]}>
<Text style={[s.gray5, s.f16, s.bold]}>Post</Text>
</View>
)} )}
</View> </View>
{error !== '' && ( {error !== '' && (
@ -176,8 +182,11 @@ export function ComposePost({
style={styles.textInput}> style={styles.textInput}>
{textDecorated} {textDecorated}
</TextInput> </TextInput>
<View style={[s.flexRow, s.pt10, s.pb10, s.pr5]}> <View style={[s.flexRow, {alignItems: 'center'}, s.pt10, s.pb10, s.pr5]}>
<View style={s.flex1} /> <View style={s.flex1} />
<Text style={[s.mr10, {color: progressColor}]}>
{text.length} / {MAX_TEXT_LENGTH}
</Text>
<View> <View>
<ProgressCircle <ProgressCircle
color={progressColor} color={progressColor}
@ -190,7 +199,7 @@ export function ComposePost({
items={autocompleteOptions} items={autocompleteOptions}
onSelect={onSelectAutocompleteItem} onSelect={onSelectAutocompleteItem}
/> />
</View> </KeyboardAvoidingView>
) )
} }
@ -219,6 +228,7 @@ const styles = StyleSheet.create({
paddingTop: 10, paddingTop: 10,
paddingBottom: 5, paddingBottom: 5,
paddingHorizontal: 5, paddingHorizontal: 5,
height: 50,
}, },
postBtn: { postBtn: {
borderRadius: 20, borderRadius: 20,

View File

@ -92,15 +92,18 @@ export function Component({}: {}) {
setIsProcessing(false) setIsProcessing(false)
} }
} }
const onPressCancel = () => {
store.shell.closeModal()
}
return ( return (
<View style={styles.outer}> <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}> <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={{paddingBottom: 50}}>
<View style={styles.group}> <View style={styles.group}>
<Text style={styles.label}>Scene Handle</Text> <Text style={styles.label}>Scene Handle</Text>
@ -159,6 +162,11 @@ export function Component({}: {}) {
</View> </View>
</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> </View>
</BottomSheetScrollView> </BottomSheetScrollView>
</View> </View>
@ -168,8 +176,7 @@ export function Component({}: {}) {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
outer: { outer: {
flex: 1, flex: 1,
paddingTop: 20, // paddingTop: 20,
paddingBottom: 20,
}, },
title: { title: {
textAlign: 'center', textAlign: 'center',
@ -222,7 +229,6 @@ const styles = StyleSheet.create({
width: '100%', width: '100%',
borderRadius: 32, borderRadius: 32,
padding: 14, padding: 14,
marginBottom: 10,
backgroundColor: colors.gray1, backgroundColor: colors.gray1,
}, },
}) })

View File

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

View File

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

View File

@ -42,9 +42,7 @@ export function ago(date: number | string | Date): string {
ts = date ts = date
} }
const diffSeconds = Math.floor((Date.now() - ts) / 1e3) const diffSeconds = Math.floor((Date.now() - ts) / 1e3)
if (diffSeconds === 0) { if (diffSeconds < MINUTE) {
return 'just now'
} else if (diffSeconds < MINUTE) {
return `${diffSeconds}s` return `${diffSeconds}s`
} else if (diffSeconds < HOUR) { } else if (diffSeconds < HOUR) {
return `${Math.floor(diffSeconds / MINUTE)}m` return `${Math.floor(diffSeconds / MINUTE)}m`