martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'uix' into main

Browse Source
This commit is contained in:
Roland Osborne 2023-10-03 13:57:18 -07:00
commit 22eafd10ff
5 changed files with 103 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/mobile/src/session/conversation/Conversation.jsx
View File

@ -67,7 +67,7 @@ export function Conversation({ navigation, cardId, channelId, closeConversation,
return ( return (
<KeyboardAvoidingView style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}> <KeyboardAvoidingView style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'} keyboardVerticalOffset={72}>
<View style={styles.container}> <View style={styles.container}>
{ !navigation && ( { !navigation && (
<View style={styles.header}> <View style={styles.header}>

121
app/mobile/src/session/conversation/addTopic/AddTopic.jsx
View File

@ -13,6 +13,7 @@ import { VideoFile } from './videoFile/VideoFile';
import { AudioFile } from './audioFile/AudioFile'; import { AudioFile } from './audioFile/AudioFile';
import { ImageFile } from './imageFile/ImageFile'; import { ImageFile } from './imageFile/ImageFile';
import { BinaryFile } from './binaryFile/BinaryFile'; import { BinaryFile } from './binaryFile/BinaryFile';
import { BlurView } from "@react-native-community/blur";
export function AddTopic({ contentKey, shareIntent, setShareIntent }) { export function AddTopic({ contentKey, shareIntent, setShareIntent }) {
@ -227,46 +228,49 @@ export function AddTopic({ contentKey, shareIntent, setShareIntent }) {
supportedOrientations={['portrait', 'landscape']} supportedOrientations={['portrait', 'landscape']}
onRequestClose={actions.hideFontSize} onRequestClose={actions.hideFontSize}
> >
<View style={styles.editWrapper}> <View style={styles.modalOverlay}>
<View style={styles.editContainer}> <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black" />
<Text style={styles.editHeader}>Font Size:</Text> <View style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<View style={styles.editSize}> <View style={styles.modalContainer}>
{ state.size === 'small' && ( <Text style={styles.editHeader}>Font Size:</Text>
<View style={styles.selected}> <View style={styles.editSize}>
<Text style={styles.selectedText}>Small</Text> { state.size === 'small' && (
</View> <View style={styles.selected}>
)} <Text style={styles.selectedText}>Small</Text>
{ state.size !== 'small' && ( </View>
<TouchableOpacity style={styles.option} onPress={() => actions.setFontSize('small')}> )}
<Text style={styles.optionText}>Small</Text> { state.size !== 'small' && (
<TouchableOpacity style={styles.option} onPress={() => actions.setFontSize('small')}>
<Text style={styles.optionText}>Small</Text>
</TouchableOpacity>
)}
{ state.size === 'medium' && (
<View style={styles.selected}>
<Text style={styles.selectedText}>Medium</Text>
</View>
)}
{ state.size !== 'medium' && (
<TouchableOpacity style={styles.option} onPress={() => actions.setFontSize('medium')}>
<Text style={styles.optionText}>Medium</Text>
</TouchableOpacity>
)}
{ state.size === 'large' && (
<View style={styles.selected}>
<Text style={styles.selectedText}>Large</Text>
</View>
)}
{ state.size !== 'large' && (
<TouchableOpacity style={styles.option} onPress={() => actions.setFontSize('large')}>
<Text style={styles.optionText}>Large</Text>
</TouchableOpacity>
)}
</View>
<View style={styles.editControls}>
<View style={styles.selection} />
<TouchableOpacity style={styles.close} onPress={actions.hideFontSize}>
<Text style={styles.closeText}>Close</Text>
</TouchableOpacity> </TouchableOpacity>
)} </View>
{ state.size === 'medium' && (
<View style={styles.selected}>
<Text style={styles.selectedText}>Medium</Text>
</View>
)}
{ state.size !== 'medium' && (
<TouchableOpacity style={styles.option} onPress={() => actions.setFontSize('medium')}>
<Text style={styles.optionText}>Medium</Text>
</TouchableOpacity>
)}
{ state.size === 'large' && (
<View style={styles.selected}>
<Text style={styles.selectedText}>Large</Text>
</View>
)}
{ state.size !== 'large' && (
<TouchableOpacity style={styles.option} onPress={() => actions.setFontSize('large')}>
<Text style={styles.optionText}>Large</Text>
</TouchableOpacity>
)}
</View>
<View style={styles.editControls}>
<View style={styles.selection} />
<TouchableOpacity style={styles.close} onPress={actions.hideFontSize}>
<Text>Close</Text>
</TouchableOpacity>
</View> </View>
</View> </View>
</View> </View>
@ -278,25 +282,28 @@ export function AddTopic({ contentKey, shareIntent, setShareIntent }) {
supportedOrientations={['portrait', 'landscape']} supportedOrientations={['portrait', 'landscape']}
onRequestClose={actions.hideFontColor} onRequestClose={actions.hideFontColor}
> >
<View style={styles.editWrapper}> <View style={styles.modalOverlay}>
<View style={styles.editContainer}> <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black" />
<Text style={styles.editHeader}>Font Color:</Text> <View style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<View style={styles.editColor}> <View style={styles.modalContainer}>
<ColorPicker <Text style={styles.editHeader}>Font Color:</Text>
color={state.color} <View style={styles.editColor}>
onColorChange={actions.setFontColor} <ColorPicker
onColorChangeComplete={actions.setFontColor} color={state.color}
swatched={false} onColorChange={actions.setFontColor}
style={{flex: 1, padding: 8}} /> onColorChangeComplete={actions.setFontColor}
</View> swatched={false}
<View style={styles.editControls}> style={{flex: 1, padding: 8}} />
<View style={styles.selection}> </View>
<Text>Set Color:</Text> <View style={styles.editControls}>
<View style={{ marginLeft: 6, borderRadius: 4, width: 16, height: 16, backgroundColor: state.color }} /> <View style={styles.selection}>
<Text style={styles.selectionText}>Set Color:</Text>
<View style={{ marginLeft: 6, borderRadius: 4, width: 16, height: 16, backgroundColor: state.color }} />
</View>
<TouchableOpacity style={styles.close} onPress={actions.hideFontColor}>
<Text style={styles.closeText}>Close</Text>
</TouchableOpacity>
</View> </View>
<TouchableOpacity style={styles.close} onPress={actions.hideFontColor}>
<Text>Close</Text>
</TouchableOpacity>
</View> </View>
</View> </View>
</View> </View>

40
app/mobile/src/session/conversation/addTopic/AddTopic.styled.js
View File

@ -63,19 +63,15 @@ export const styles = StyleSheet.create({
editHeader: { editHeader: {
fontSize: 18, fontSize: 18,
paddingBottom: 16, paddingBottom: 16,
color: Colors.text,
}, },
editSize: { editSize: {
width: '100%', width: '100%',
borderWidth: 1,
borderColor: Colors.lightgrey,
borderRadius: 2, borderRadius: 2,
}, },
editColor: { editColor: {
width: '100%', width: '100%',
height: 300, height: 300,
borderWidth: 1,
borderColor: Colors.lightgrey,
borderRadius: 2,
}, },
editControls: { editControls: {
display: 'flex', display: 'flex',
@ -120,7 +116,7 @@ export const styles = StyleSheet.create({
}, },
close: { close: {
borderWidth: 1, borderWidth: 1,
borderColor: Colors.lightgrey, borderColor: Colors.closeButton,
borderRadius: 4, borderRadius: 4,
padding: 8, padding: 8,
marginTop: 8, marginTop: 8,
@ -128,12 +124,44 @@ export const styles = StyleSheet.create({
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
}, },
closeText: {
color: Colors.closeButtonText,
},
selection: { selection: {
flexGrow: 1, flexGrow: 1,
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
}, },
selectionText: {
color: Colors.text,
},
modalOverlay: {
width: '100%',
height: '100%',
},
modalBase: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
},
modalContainer: {
backgroundColor: Colors.modalBase,
borderColor: Colors.modalBorder,
borderWidth: 1,
width: '80%',
maxWidth: 400,
display: 'flex',
alignItems: 'center',
borderRadius: 8,
padding: 8,
},
}) })

2
app/mobile/src/session/details/Details.styled.js
View File

@ -201,6 +201,8 @@ export const styles = StyleSheet.create({
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
borderRadius: 8, borderRadius: 8,
borderColor: Colors.modalBorder,
borderWidth: 1,
padding: 16, padding: 16,
}, },
close: { close: {

2
app/mobile/src/session/profile/Profile.styled.js
View File

@ -294,6 +294,8 @@ export const styles = StyleSheet.create({
}, },
modalContainer: { modalContainer: {
backgroundColor: Colors.modalBase, backgroundColor: Colors.modalBase,
borderColor: Colors.modalBorder,
borderWidth: 1,
width: '80%', width: '80%',
maxWidth: 400, maxWidth: 400,
display: 'flex', display: 'flex',