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

updating modal styles

Browse Source
This commit is contained in:
balzack 2023-10-03 13:55:57 -07:00
parent 405e6c2b76
commit c28e1ebb84
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 (
<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}>
{ !navigation && (
<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 { ImageFile } from './imageFile/ImageFile';
import { BinaryFile } from './binaryFile/BinaryFile';
import { BlurView } from "@react-native-community/blur";
export function AddTopic({ contentKey, shareIntent, setShareIntent }) {
@ -227,46 +228,49 @@ export function AddTopic({ contentKey, shareIntent, setShareIntent }) {
supportedOrientations={['portrait', 'landscape']}
onRequestClose={actions.hideFontSize}
>
<View style={styles.editWrapper}>
<View style={styles.editContainer}>
<Text style={styles.editHeader}>Font Size:</Text>
<View style={styles.editSize}>
{ state.size === 'small' && (
<View style={styles.selected}>
<Text style={styles.selectedText}>Small</Text>
</View>
)}
{ state.size !== 'small' && (
<TouchableOpacity style={styles.option} onPress={() => actions.setFontSize('small')}>
<Text style={styles.optionText}>Small</Text>
<View style={styles.modalOverlay}>
<BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black" />
<View style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<View style={styles.modalContainer}>
<Text style={styles.editHeader}>Font Size:</Text>
<View style={styles.editSize}>
{ state.size === 'small' && (
<View style={styles.selected}>
<Text style={styles.selectedText}>Small</Text>
</View>
)}
{ 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>
)}
{ 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>
@ -278,25 +282,28 @@ export function AddTopic({ contentKey, shareIntent, setShareIntent }) {
supportedOrientations={['portrait', 'landscape']}
onRequestClose={actions.hideFontColor}
>
<View style={styles.editWrapper}>
<View style={styles.editContainer}>
<Text style={styles.editHeader}>Font Color:</Text>
<View style={styles.editColor}>
<ColorPicker
color={state.color}
onColorChange={actions.setFontColor}
onColorChangeComplete={actions.setFontColor}
swatched={false}
style={{flex: 1, padding: 8}} />
</View>
<View style={styles.editControls}>
<View style={styles.selection}>
<Text>Set Color:</Text>
<View style={{ marginLeft: 6, borderRadius: 4, width: 16, height: 16, backgroundColor: state.color }} />
<View style={styles.modalOverlay}>
<BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black" />
<View style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<View style={styles.modalContainer}>
<Text style={styles.editHeader}>Font Color:</Text>
<View style={styles.editColor}>
<ColorPicker
color={state.color}
onColorChange={actions.setFontColor}
onColorChangeComplete={actions.setFontColor}
swatched={false}
style={{flex: 1, padding: 8}} />
</View>
<View style={styles.editControls}>
<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>
<TouchableOpacity style={styles.close} onPress={actions.hideFontColor}>
<Text>Close</Text>
</TouchableOpacity>
</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: {
fontSize: 18,
paddingBottom: 16,
color: Colors.text,
},
editSize: {
width: '100%',
borderWidth: 1,
borderColor: Colors.lightgrey,
borderRadius: 2,
},
editColor: {
width: '100%',
height: 300,
borderWidth: 1,
borderColor: Colors.lightgrey,
borderRadius: 2,
},
editControls: {
display: 'flex',
@ -120,7 +116,7 @@ export const styles = StyleSheet.create({
},
close: {
borderWidth: 1,
borderColor: Colors.lightgrey,
borderColor: Colors.closeButton,
borderRadius: 4,
padding: 8,
marginTop: 8,
@ -128,12 +124,44 @@ export const styles = StyleSheet.create({
display: 'flex',
alignItems: 'center',
},
closeText: {
color: Colors.closeButtonText,
},
selection: {
flexGrow: 1,
display: 'flex',
flexDirection: 'row',
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',
alignItems: 'center',
borderRadius: 8,
borderColor: Colors.modalBorder,
borderWidth: 1,
padding: 16,
},
close: {

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

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