mirror of
https://github.com/balzack/databag.git
synced 2025-04-23 01:55:17 +00:00
styling tweaks for ipad
This commit is contained in:
Roland Osborne
parent
0cab8f0c1c
commit
0d1ce4ad65
@ -3,10 +3,9 @@ import {Colors} from '../constants/Colors';
|
||||
|
||||
export const styles = StyleSheet.create({
|
||||
conversation: {
|
||||
flex: 1
|
||||
},
|
||||
largeConversation: {
|
||||
padding: 16,
|
||||
flex: 1,
|
||||
width: '100%',
|
||||
flexShrink: 1,
|
||||
},
|
||||
avoid: {
|
||||
width: '100%',
|
||||
@ -22,6 +21,7 @@ export const styles = StyleSheet.create({
|
||||
paddingLeft: 8,
|
||||
paddingBottom: 8,
|
||||
height: 80,
|
||||
minWidth: 0,
|
||||
},
|
||||
status: {
|
||||
width: 40,
|
||||
@ -63,6 +63,7 @@ export const styles = StyleSheet.create({
|
||||
},
|
||||
messageList: {
|
||||
width: '100%',
|
||||
minWidth: 0,
|
||||
},
|
||||
messages: {
|
||||
paddingBottom: 64,
|
||||
@ -72,6 +73,7 @@ export const styles = StyleSheet.create({
|
||||
flexGrow: 1,
|
||||
flexShrink: 1,
|
||||
minHeight: 0,
|
||||
minWidth: 0,
|
||||
height: '50%',
|
||||
width: '100%',
|
||||
alignItems: 'center',
|
||||
@ -106,6 +108,10 @@ export const styles = StyleSheet.create({
|
||||
marginBottom: 0,
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
pad: {
|
||||
paddingLeft: 16,
|
||||
paddingRight: 16,
|
||||
},
|
||||
border: {
|
||||
width: '100%',
|
||||
height: 2,
|
||||
@ -123,9 +129,8 @@ export const styles = StyleSheet.create({
|
||||
width: '100%',
|
||||
minWidth: 0,
|
||||
alignItems: 'center',
|
||||
},
|
||||
largeHeader: {
|
||||
height: 64,
|
||||
paddingLeft: 8,
|
||||
paddingRight: 8,
|
||||
},
|
||||
title: {
|
||||
display: 'flex',
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import {Animated, useAnimatedValue, KeyboardAvoidingView, Modal, Platform, ScrollView, SafeAreaView, Pressable, View, FlatList, TouchableOpacity} from 'react-native';
|
||||
import {Animated, useAnimatedValue, KeyboardAvoidingView, Modal, Platform, ScrollView, Pressable, View, FlatList, TouchableOpacity} from 'react-native';
|
||||
import {styles} from './Conversation.styled';
|
||||
import {useConversation} from './useConversation.hook';
|
||||
import {Message} from '../message/Message';
|
||||
@ -190,7 +190,7 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD
|
||||
|
||||
return (
|
||||
<View style={containerStyle}>
|
||||
<SafeAreaView style={{ ...headerStyle, flexDirection: state.layout === 'large' ? 'row-reverse' : 'row' }}>
|
||||
<View style={{ ...headerStyle, flexDirection: state.layout === 'large' ? 'row-reverse' : 'row' }}>
|
||||
<IconButton style={styles.icon} mode="contained" icon={wide ? 'close' : 'arrow-left'} size={28} onPress={onClose} />
|
||||
<View style={styles.status}>
|
||||
</View>
|
||||
@ -223,8 +223,10 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD
|
||||
)}
|
||||
</View>
|
||||
<IconButton style={styles.icon} mode="contained" icon="cog-outline" size={28} onPress={openDetails} />
|
||||
</SafeAreaView>
|
||||
<Divider style={styles.border} bold={true} />
|
||||
</View>
|
||||
<View style={styles.pad}>
|
||||
<Divider style={styles.border} bold={true} />
|
||||
</View>
|
||||
<View style={styles.thread}>
|
||||
<FlatList
|
||||
style={styles.messageList}
|
||||
@ -269,11 +271,13 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
<Divider style={styles.border} bold={true}>
|
||||
{ sending && (
|
||||
<View style={{ ...styles.progress, width: `${state.progress}%` }} />
|
||||
)}
|
||||
</Divider>
|
||||
<View style={styles.pad}>
|
||||
<Divider style={styles.border} bold={true}>
|
||||
{ sending && (
|
||||
<View style={{ ...styles.progress, width: `${state.progress}%` }} />
|
||||
)}
|
||||
</Divider>
|
||||
</View>
|
||||
<Confirm show={alert} params={alertParams} />
|
||||
<View style={styles.add}>
|
||||
<Animated.View style={[{},{height: scale}]}>
|
||||
@ -281,54 +285,56 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD
|
||||
{ media }
|
||||
</ScrollView>
|
||||
</Animated.View>
|
||||
<TextInput multiline={true} mode="outlined" style={{ ...styles.message, fontSize: state.textSize }}
|
||||
blurOnSubmit={true} onSubmitEditing={sendMessage} returnKeyType="send"
|
||||
onFocus={()=>setAvoid(true)} onBlur={()=>setAvoid(false)} editable={!sending}
|
||||
textColor={state.textColorSet ? state.textColor : undefined} outlineColor="transparent" activeOutlineColor="transparent"spellcheck={false}
|
||||
autoComplete="off" autoCapitalize="none" autoCorrect={false} placeholder={state.strings.newMessage} placeholderTextColor={state.textColorSet ? state.textColor : undefined}
|
||||
cursorColor={state.textColorSet ? state.textColor : undefined} value={state.message} onChangeText={value => actions.setMessage(value)} />
|
||||
<View style={styles.pad}>
|
||||
<TextInput multiline={true} mode="outlined" style={{ ...styles.message, fontSize: state.textSize }}
|
||||
blurOnSubmit={true} onSubmitEditing={sendMessage} returnKeyType="send"
|
||||
onFocus={()=>setAvoid(true)} onBlur={()=>setAvoid(false)} editable={!sending}
|
||||
textColor={state.textColorSet ? state.textColor : undefined} outlineColor="transparent" activeOutlineColor="transparent"spellcheck={false}
|
||||
autoComplete="off" autoCapitalize="none" autoCorrect={false} placeholder={state.strings.newMessage} placeholderTextColor={state.textColorSet ? state.textColor : undefined}
|
||||
cursorColor={state.textColorSet ? state.textColor : undefined} value={state.message} onChangeText={value => actions.setMessage(value)} />
|
||||
|
||||
{ Platform.OS === 'ios' && avoid && (<View style={{ ...styles.avoid, height: state.avoid - 64}} />) }
|
||||
{ Platform.OS === 'ios' && avoid && (<View style={{ ...styles.avoid, height: state.avoid - 64}} />) }
|
||||
|
||||
<View style={styles.controls}>
|
||||
<Pressable style={styles.control} onPress={addImage}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="camera" size={24} color={Colors.primary} /></Surface></Pressable>
|
||||
<Pressable style={styles.control} onPress={addVideo}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="video-outline" size={24} color={Colors.primary} /></Surface></Pressable>
|
||||
<Pressable style={styles.control} onPress={addAudio}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="volume-high" size={24} color={Colors.primary} /></Surface></Pressable>
|
||||
<Pressable style={styles.control} onPress={addBinary}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="file-outline" size={24} color={Colors.primary} /></Surface></Pressable>
|
||||
<Divider style={styles.separator} />
|
||||
<Pressable style={styles.control} onPress={()=>setColorMenu(true)}>
|
||||
<Surface style={styles.surface} elevation={2}>
|
||||
<Icon style={styles.button} source="format-color-text" size={24} color={Colors.primary} />
|
||||
</Surface>
|
||||
</Pressable>
|
||||
<View style={styles.controls}>
|
||||
<Pressable style={styles.control} onPress={addImage}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="camera" size={24} color={Colors.primary} /></Surface></Pressable>
|
||||
<Pressable style={styles.control} onPress={addVideo}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="video-outline" size={24} color={Colors.primary} /></Surface></Pressable>
|
||||
<Pressable style={styles.control} onPress={addAudio}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="volume-high" size={24} color={Colors.primary} /></Surface></Pressable>
|
||||
<Pressable style={styles.control} onPress={addBinary}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="file-outline" size={24} color={Colors.primary} /></Surface></Pressable>
|
||||
<Divider style={styles.separator} />
|
||||
<Pressable style={styles.control} onPress={()=>setColorMenu(true)}>
|
||||
<Surface style={styles.surface} elevation={2}>
|
||||
<Icon style={styles.button} source="format-color-text" size={24} color={Colors.primary} />
|
||||
</Surface>
|
||||
</Pressable>
|
||||
|
||||
<Menu
|
||||
visible={sizeMenu}
|
||||
onDismiss={()=>setSizeMenu(false)}
|
||||
anchor={(
|
||||
<Pressable style={styles.control} onPress={()=>setSizeMenu(true)}>
|
||||
<Surface style={styles.surface} elevation={2}>
|
||||
<Icon style={styles.button} source="format-size" size={24} color={Colors.primary} />
|
||||
</Surface>
|
||||
</Pressable>
|
||||
)}>
|
||||
<Menu.Item onPress={() => { actions.setTextSize(12); setSizeMenu(false) }} title={state.strings.textSmall} />
|
||||
<Menu.Item onPress={() => { actions.setTextSize(16); setSizeMenu(false) }} title={state.strings.textMedium} />
|
||||
<Menu.Item onPress={() => { actions.setTextSize(20); setSizeMenu(false) }} title={state.strings.textLarge} />
|
||||
</Menu>
|
||||
<Menu
|
||||
visible={sizeMenu}
|
||||
onDismiss={()=>setSizeMenu(false)}
|
||||
anchor={(
|
||||
<Pressable style={styles.control} onPress={()=>setSizeMenu(true)}>
|
||||
<Surface style={styles.surface} elevation={2}>
|
||||
<Icon style={styles.button} source="format-size" size={24} color={Colors.primary} />
|
||||
</Surface>
|
||||
</Pressable>
|
||||
)}>
|
||||
<Menu.Item onPress={() => { actions.setTextSize(12); setSizeMenu(false) }} title={state.strings.textSmall} />
|
||||
<Menu.Item onPress={() => { actions.setTextSize(16); setSizeMenu(false) }} title={state.strings.textMedium} />
|
||||
<Menu.Item onPress={() => { actions.setTextSize(20); setSizeMenu(false) }} title={state.strings.textLarge} />
|
||||
</Menu>
|
||||
|
||||
<View style={styles.end}>
|
||||
<Pressable style={styles.control} onPress={sendMessage}><Surface style={styles.surface} elevation={2}>
|
||||
{ sending && (
|
||||
<ActivityIndicator size="small" />
|
||||
)}
|
||||
{ !sending && (state.message || state.assets.length != 0) && (
|
||||
<Icon style={styles.button} source="send" size={24} color={Colors.primary} />
|
||||
)}
|
||||
{ !sending && !state.message && state.assets.length == 0 && (
|
||||
<Icon style={styles.button} source="send" size={24} color={Colors.placeholder} />
|
||||
)}
|
||||
</Surface></Pressable>
|
||||
<View style={styles.end}>
|
||||
<Pressable style={styles.control} onPress={sendMessage}><Surface style={styles.surface} elevation={2}>
|
||||
{ sending && (
|
||||
<ActivityIndicator size="small" />
|
||||
)}
|
||||
{ !sending && (state.message || state.assets.length != 0) && (
|
||||
<Icon style={styles.button} source="send" size={24} color={Colors.primary} />
|
||||
)}
|
||||
{ !sending && !state.message && state.assets.length == 0 && (
|
||||
<Icon style={styles.button} source="send" size={24} color={Colors.placeholder} />
|
||||
)}
|
||||
</Surface></Pressable>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
@ -165,8 +165,8 @@ export const styles = StyleSheet.create({
|
||||
justifyContent: 'center',
|
||||
},
|
||||
memberSurface: {
|
||||
position: 'relative',
|
||||
width: '80%',
|
||||
maxWidth: 400,
|
||||
},
|
||||
modalHeader: {
|
||||
display: 'flex',
|
||||
|
||||
@ -5,6 +5,7 @@ export const styles = StyleSheet.create({
|
||||
message: {
|
||||
paddingTop: 8,
|
||||
width: '100%',
|
||||
minWidth: 0,
|
||||
},
|
||||
topic: {
|
||||
paddingTop: 8,
|
||||
@ -13,6 +14,10 @@ export const styles = StyleSheet.create({
|
||||
width: '100%',
|
||||
paddingBottom: 8,
|
||||
},
|
||||
pad: {
|
||||
paddingLeft: 16,
|
||||
paddingRight: 16,
|
||||
},
|
||||
longbone: {
|
||||
width: '100%',
|
||||
height: 12,
|
||||
@ -45,6 +50,8 @@ export const styles = StyleSheet.create({
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flexStart',
|
||||
width: '100%',
|
||||
paddingLeft: 8,
|
||||
paddingRight: 8,
|
||||
},
|
||||
logo: {
|
||||
width: 32,
|
||||
@ -55,7 +62,9 @@ export const styles = StyleSheet.create({
|
||||
body: {
|
||||
display: 'flex',
|
||||
flexGrow: 1,
|
||||
flexShrink: 1,
|
||||
flexDirection: 'column',
|
||||
minWidth: 0,
|
||||
},
|
||||
header: {
|
||||
display: 'flex',
|
||||
@ -85,6 +94,7 @@ export const styles = StyleSheet.create({
|
||||
},
|
||||
text: {
|
||||
fontSize: 16,
|
||||
minWidth: 0,
|
||||
},
|
||||
timestamp: {
|
||||
fontSize: 12,
|
||||
@ -108,8 +118,8 @@ export const styles = StyleSheet.create({
|
||||
paddingTop: 4,
|
||||
},
|
||||
carousel: {
|
||||
paddingLeft: 8,
|
||||
paddingBottom: 8,
|
||||
paddingLeft: 16,
|
||||
paddingBottom: 16,
|
||||
},
|
||||
assets: {
|
||||
display: 'flex',
|
||||
|
||||
@ -270,7 +270,9 @@ export function Message({ topic, card, profile, host, select, selected }: { topi
|
||||
)}
|
||||
</Surface>
|
||||
)}
|
||||
<Divider style={styles.border} />
|
||||
<View style={styles.pad}>
|
||||
<Divider style={styles.border} />
|
||||
</View>
|
||||
<Confirm show={confirmShow} busy={removing || reporting || blocking} params={confirmParams} />
|
||||
<Modal animationType="fade" transparent={true} supportedOrientations={['portrait', 'landscape']} visible={editing} onRequestClose={()=>setEditing(false)}>
|
||||
<View style={styles.modal}>
|
||||
|
||||
@ -57,6 +57,8 @@ export const styles = StyleSheet.create({
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexGrow: 1,
|
||||
flexShrink: 1,
|
||||
minWidth: 0,
|
||||
},
|
||||
identity: {
|
||||
flexShrink: 0,
|
||||
|
||||
@ -211,7 +211,9 @@ function ContentTab({scheme, textCard, contentTab}: {scheme: string, textCard: {
|
||||
...TransitionPresets.ScaleFromCenterAndroid,
|
||||
}}>
|
||||
{props => (
|
||||
<Conversation openDetails={()=>props.navigation.navigate('details')} close={()=>props.navigation.goBack()} wide={false} />
|
||||
<SafeAreaView>
|
||||
<Conversation openDetails={()=>props.navigation.navigate('details')} close={()=>props.navigation.goBack()} wide={false} />
|
||||
</SafeAreaView>
|
||||
)}
|
||||
</ContentStack.Screen>
|
||||
<ContentStack.Screen name="details"
|
||||
@ -405,7 +407,9 @@ function SettingsScreen({nav}) {
|
||||
const SettingsComponent = useCallback(
|
||||
() => (
|
||||
<Surface elevation={1}>
|
||||
<Settings />
|
||||
<SafeAreaView>
|
||||
<Settings />
|
||||
</SafeAreaView>
|
||||
</Surface>
|
||||
),
|
||||
[],
|
||||
@ -439,10 +443,10 @@ function HomeScreen({nav}) {
|
||||
<Content textCard={nav.textCard} openConversation={()=>nav.setFocus(true)} />
|
||||
</Surface>
|
||||
</View>
|
||||
<View style={styles.right}>
|
||||
<SafeAreaView style={styles.right}>
|
||||
{nav.focus && <Conversation openDetails={nav.details.openDrawer} close={()=>nav.setFocus(false)} wide={true} />}
|
||||
{!nav.focus && <Text>FOCUS NOT SET</Text>}
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user