Fix input positioning for small screens
parent
0b7b91d5fd
commit
5bb8751bc1
|
@ -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,
|
||||||
|
|
|
@ -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,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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`
|
||||||
|
|
Loading…
Reference in New Issue