mirror of
https://github.com/balzack/databag.git
synced 2025-04-25 19:15:23 +00:00
setting text size and color
This commit is contained in:
balzack
parent
6f9e2750c5
commit
1ebaf62674
@ -38,6 +38,7 @@
|
||||
"react-native-sqlite-storage": "^6.0.1",
|
||||
"react-native-vector-icons": "^10.1.0",
|
||||
"react-native-video": "^6.8.2",
|
||||
"react-native-wheel-color-picker": "^1.3.1",
|
||||
"react-router-dom": "^6.26.0",
|
||||
"react-router-native": "^6.26.0"
|
||||
},
|
||||
|
||||
@ -5,6 +5,36 @@ export const styles = StyleSheet.create({
|
||||
conversation: {
|
||||
flex: 1
|
||||
},
|
||||
closeIcon: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
modal: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
colorArea: {
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
alignItem: 'center',
|
||||
justifyContent: 'center',
|
||||
height: 300,
|
||||
width: 300,
|
||||
padding: 16,
|
||||
borderRadius: 8,
|
||||
},
|
||||
blur: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
messageList: {
|
||||
width: '100%',
|
||||
},
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import {KeyboardAvoidingView, Platform, SafeAreaView, Pressable, View, FlatList, TouchableOpacity} from 'react-native';
|
||||
import {KeyboardAvoidingView, Modal, Platform, SafeAreaView, Pressable, View, FlatList, TouchableOpacity} from 'react-native';
|
||||
import {styles} from './Conversation.styled';
|
||||
import {useConversation} from './useConversation.hook';
|
||||
import {Message} from '../message/Message';
|
||||
@ -7,6 +7,8 @@ import {Surface, Icon, Text, TextInput, Menu, IconButton, Divider} from 'react-n
|
||||
import { ActivityIndicator } from 'react-native-paper';
|
||||
import { Colors } from '../constants/Colors';
|
||||
import { Confirm } from '../confirm/Confirm';
|
||||
import ColorPicker from 'react-native-wheel-color-picker'
|
||||
import {BlurView} from '@react-native-community/blur';
|
||||
|
||||
const SCROLL_THRESHOLD = 16;
|
||||
|
||||
@ -25,6 +27,7 @@ export function Conversation({close}: {close: ()=>void}) {
|
||||
const [ sending, setSending ] = useState(false);
|
||||
const [ selected, setSelected ] = useState(null as null | string);
|
||||
const [ sizeMenu, setSizeMenu ] = useState(false);
|
||||
const [ colorMenu, setColorMenu ] = useState(false);
|
||||
const thread = useRef();
|
||||
const scrolled = useRef(false);
|
||||
const contentHeight = useRef(0);
|
||||
@ -167,27 +170,37 @@ export function Conversation({close}: {close: ()=>void}) {
|
||||
<Divider style={styles.border} bold={true} />
|
||||
<Confirm show={alert} params={alertParams} />
|
||||
<View style={styles.add}>
|
||||
<TextInput multiline={true} mode="outlined" style={styles.message} spellcheck={false} autoComplete="off" autoCapitalize="none" autoCorrect={false} placeholder={state.strings.newMessage}
|
||||
value={state.message}
|
||||
onChangeText={value => actions.setMessage(value)}
|
||||
<TextInput multiline={true} mode="outlined" style={{ ...styles.message, fontSize: state.textSize }}
|
||||
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.controls}>
|
||||
<Pressable style={styles.control}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="camera" size={24} color={Colors.primary} /></Surface></Pressable>
|
||||
<Pressable style={styles.control}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="video-outline" size={24} color={Colors.primary} /></Surface></Pressable>
|
||||
<Pressable style={styles.control}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="volume-high" size={24} color={Colors.primary} /></Surface></Pressable>
|
||||
<Pressable style={styles.control}><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}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="format-color-text" size={24} color={Colors.primary} /></Surface></Pressable>
|
||||
<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}>
|
||||
@ -204,6 +217,18 @@ export function Conversation({close}: {close: ()=>void}) {
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Modal animationType="fade" transparent={true} supportedOrientations={['portrait', 'landscape']} visible={colorMenu} onRequestClose={()=>setColorMenu(false)}>
|
||||
<View style={styles.modal}>
|
||||
<Pressable style={styles.blur} onPress={()=>setColorMenu(false)}>
|
||||
<BlurView style={styles.blur} blurType="dark" blurAmount={6} reducedTransparencyFallbackColor="dark" />
|
||||
</Pressable>
|
||||
<Surface elevation={2} style={styles.colorArea}>
|
||||
<ColorPicker color={state.textColorSet ? state.textColor : undefined} onColorChange={actions.setTextColor} onColorChangeComplete={actions.setTextColor} swatched={false} />
|
||||
<IconButton style={styles.closeIcon} icon="close" compact="true" mode="contained" size={20} onPress={()=>setColorMenu(false)} />
|
||||
</Surface>
|
||||
</View>
|
||||
</Modal>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
@ -3454,6 +3454,7 @@ __metadata:
|
||||
react-native-sqlite-storage: ^6.0.1
|
||||
react-native-vector-icons: ^10.1.0
|
||||
react-native-video: ^6.8.2
|
||||
react-native-wheel-color-picker: ^1.3.1
|
||||
react-router-dom: ^6.26.0
|
||||
react-router-native: ^6.26.0
|
||||
react-test-renderer: 18.2.0
|
||||
@ -8860,6 +8861,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-native-elevation@npm:^1.0.0":
|
||||
version: 1.0.0
|
||||
resolution: "react-native-elevation@npm:1.0.0"
|
||||
checksum: 988edf86b441459e65f5121b0f916087c94dc0fb4bf7a36da4718b633644dbf10313054208cc4758302fbaa7e1d7b99d29004efc937466ecd7d66c2372f47129
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-native-file-type@npm:^1.0.0":
|
||||
version: 1.0.0
|
||||
resolution: "react-native-file-type@npm:1.0.0"
|
||||
@ -9048,6 +9056,15 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-native-wheel-color-picker@npm:^1.3.1":
|
||||
version: 1.3.1
|
||||
resolution: "react-native-wheel-color-picker@npm:1.3.1"
|
||||
dependencies:
|
||||
react-native-elevation: ^1.0.0
|
||||
checksum: a9f34ff91e4181c3fb77b436393f3bd2232d7644c0193553b2ccbe3a9f71dd77f1d61884577c3be882f16baed2e91ef533d341fc874795fe1acd613b27549506
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-native@npm:*":
|
||||
version: 0.76.5
|
||||
resolution: "react-native@npm:0.76.5"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user