Fix input positioning for small screens

2022-11-16 14:28:33 -06:00 · 2022-11-16 14:28:33 -06:00 · 5bb8751bc1
parent 0b7b91d5fd
commit 5bb8751bc1
5 changed files with 53 additions and 34 deletions
--- a/src/view/com/composer/ComposePost.tsx
+++ b/src/view/com/composer/ComposePost.tsx
@ -1,6 +1,7 @@
 import React, {useEffect, useMemo, useState} from 'react'
 import {
  ActivityIndicator,
+  KeyboardAvoidingView,
  StyleSheet,
  Text,
  TextInput,
@ -20,7 +21,7 @@ import {s, colors, gradients} from '../../lib/styles'

 const MAX_TEXT_LENGTH = 256
 const WARNING_TEXT_LENGTH = 200
-const DANGER_TEXT_LENGTH = 255
+const DANGER_TEXT_LENGTH = MAX_TEXT_LENGTH

 export function ComposePost({
  replyTo,
@ -56,9 +57,6 @@ export function ComposePost({
  })

  const onChangeText = (newText: string) => {
-    if (newText.length > MAX_TEXT_LENGTH) {
-      newText = newText.slice(0, MAX_TEXT_LENGTH)
-    }
    setText(newText)

    const prefix = extractTextAutocompletePrefix(newText)
@ -81,6 +79,9 @@ export function ComposePost({
    if (isProcessing) {
      return
    }
+    if (text.length > MAX_TEXT_LENGTH) {
+      return
+    }
    setError('')
    if (text.trim().length === 0) {
      setError('Did you want to say anything?')
@ -112,6 +113,7 @@ export function ComposePost({
    setAutocompleteOptions([])
  }

+  const canPost = text.length <= MAX_TEXT_LENGTH
  const progressColor =
    text.length > DANGER_TEXT_LENGTH
      ? '#e60000'
@ -133,7 +135,7 @@ export function ComposePost({
  }, [text])

  return (
-    <View style={styles.outer}>
+    <KeyboardAvoidingView behavior="padding" style={styles.outer}>
      <View style={styles.topbar}>
        <TouchableOpacity onPress={onPressCancel}>
          <Text style={[s.blue3, s.f16]}>Cancel</Text>
@ -143,7 +145,7 @@ export function ComposePost({
          <View style={styles.postBtn}>
            <ActivityIndicator />
          </View>
-        ) : (
+        ) : canPost ? (
          <TouchableOpacity onPress={onPressPublish}>
            <LinearGradient
              colors={[gradients.primary.start, gradients.primary.end]}
@ -153,6 +155,10 @@ export function ComposePost({
              <Text style={[s.white, s.f16, s.bold]}>Post</Text>
            </LinearGradient>
          </TouchableOpacity>
+        ) : (
+          <View style={[styles.postBtn, {backgroundColor: colors.gray1}]}>
+            <Text style={[s.gray5, s.f16, s.bold]}>Post</Text>
+          </View>
        )}
      </View>
      {error !== '' && (
@ -176,8 +182,11 @@ export function ComposePost({
        style={styles.textInput}>
        {textDecorated}
      </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} />
+        <Text style={[s.mr10, {color: progressColor}]}>
+          {text.length} / {MAX_TEXT_LENGTH}
+        </Text>
        <View>
          <ProgressCircle
            color={progressColor}
@ -190,7 +199,7 @@ export function ComposePost({
        items={autocompleteOptions}
        onSelect={onSelectAutocompleteItem}
      />
-    </View>
+    </KeyboardAvoidingView>
  )
 }

@ -219,6 +228,7 @@ const styles = StyleSheet.create({
    paddingTop: 10,
    paddingBottom: 5,
    paddingHorizontal: 5,
+    height: 50,
  },
  postBtn: {
    borderRadius: 20,
--- a/src/view/com/modals/CreateScene.tsx
+++ b/src/view/com/modals/CreateScene.tsx
@ -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,
  },
 })
--- a/src/view/com/modals/EditProfile.tsx
+++ b/src/view/com/modals/EditProfile.tsx
@ -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>
  )
 }
--- a/src/view/com/modals/ServerInput.tsx
+++ b/src/view/com/modals/ServerInput.tsx
@ -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>
  )
 }
--- a/src/view/lib/strings.ts
+++ b/src/view/lib/strings.ts
@ -42,9 +42,7 @@ export function ago(date: number | string | Date): string {
    ts = date
  }
  const diffSeconds = Math.floor((Date.now() - ts) / 1e3)
-  if (diffSeconds === 0) {
-    return 'just now'
-  } else if (diffSeconds < MINUTE) {
+  if (diffSeconds < MINUTE) {
    return `${diffSeconds}s`
  } else if (diffSeconds < HOUR) {
    return `${Math.floor(diffSeconds / MINUTE)}m`