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

fixing blur modal on for settings screen in android

Browse Source
This commit is contained in:
balzack 2023-09-13 22:50:04 -07:00
parent 59035760de
commit 1e6a8e0e79
3 changed files with 149 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/mobile/src/session/profile/Profile.jsx
View File

@ -138,7 +138,7 @@ export function Profile() {
<TouchableOpacity activeOpacity={1} onPress={() => setVisible(!state.searchable)}>
<Text style={styles.visibleLabel}>{ state.strings.visibleRegistry }</Text>
</TouchableOpacity>
<Switch value={state.searchable} style={styles.visibleSwitch} thumbColor={Colors.sliderGrip} ios_backgroundColor={Colors.disabledIndicator}
<Switch value={state.searchable} style={Platform.OS==='ios' ? styles.visibleSwitch : {}} thumbColor={Colors.sliderGrip} ios_backgroundColor={Colors.disabledIndicator}
trackColor={styles.track} onValueChange={setVisible} />
</TouchableOpacity>
</View>

46
app/mobile/src/session/settings/Settings.jsx
View File

@ -171,8 +171,10 @@ export function Settings() {
<MatIcons name="bell-outline" size={20} color={Colors.linkText} />
</View>
<View style={styles.optionControl}>
<TouchableOpacity activeOpacity={1} onPress={() => setNotifications(!state.pushEnabled)}>
<Text style={styles.optionLink}>{ state.strings.enableNotifications }</Text>
<Switch value={state.pushEnabled} style={styles.notifications} thumbColor={Colors.sliderGrip} ios_backgroundColor={Colors.disabledIndicator}
</TouchableOpacity>
<Switch value={state.pushEnabled} style={Platform.OS==='ios' ? styles.notifications : {}} thumbColor={Colors.sliderGrip} ios_backgroundColor={Colors.disabledIndicator}
trackColor={styles.track} onValueChange={setNotifications} />
</View>
</TouchableOpacity>
@ -331,8 +333,9 @@ export function Settings() {
supportedOrientations={['portrait', 'landscape']}
onRequestClose={actions.hideEditSeal}
>
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black">
<View style={styles.modalOverlay}>
<BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black" />
<KeyboardAvoidingView style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<View style={styles.modalContainer}>
<View style={styles.modalClose}>
<TouchableOpacity style={styles.dismissButton} activeOpacity={1} onPress={actions.hideEditSeal}>
@ -497,8 +500,8 @@ export function Settings() {
</>
)}
</View>
</BlurView>
</KeyboardAvoidingView>
</View>
</Modal>
<Modal
@ -508,8 +511,9 @@ export function Settings() {
supportedOrientations={['portrait', 'landscape']}
onRequestClose={actions.hideLogin}
>
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black">
<View style={styles.modalOverlay}>
<BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black" />
<KeyboardAvoidingView style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<View style={styles.modalContainer}>
<View style={styles.modalClose}>
<TouchableOpacity style={styles.dismissButton} activeOpacity={1} onPress={actions.hideLogin}>
@ -561,8 +565,8 @@ export function Settings() {
)}
</View>
</View>
</BlurView>
</KeyboardAvoidingView>
</View>
</Modal>
<Modal
@ -572,7 +576,9 @@ export function Settings() {
supportedOrientations={['portrait', 'landscape']}
onRequestClose={actions.hideDelete}
>
<BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black">
<View style={styles.modalOverlay}>
<BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black" />
<KeyboardAvoidingView style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<View style={styles.modalContainer}>
<View style={styles.modalClose}>
<TouchableOpacity style={styles.dismissButton} activeOpacity={1} onPress={actions.hideDelete}>
@ -603,7 +609,8 @@ export function Settings() {
)}
</View>
</View>
</BlurView>
</KeyboardAvoidingView>
</View>
</Modal>
<Modal
@ -613,7 +620,9 @@ export function Settings() {
supportedOrientations={['portrait', 'landscape']}
onRequestClose={state.hideBlockedContacts}
>
<BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black">
<View style={styles.modalOverlay}>
<BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black" />
<View style={styles.modalBase}>
<View style={styles.modalContainer}>
<View style={styles.modalClose}>
<TouchableOpacity style={styles.dismissButton} activeOpacity={1} onPress={actions.hideBlockedContacts}>
@ -642,7 +651,8 @@ export function Settings() {
</TouchableOpacity>
</View>
</View>
</BlurView>
</View>
</View>
</Modal>
<Modal
@ -652,7 +662,9 @@ export function Settings() {
supportedOrientations={['portrait', 'landscape']}
onRequestClose={state.hideBlockedTopics}
>
<BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black">
<View style={styles.modalOverlay}>
<BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black" />
<View style={styles.modalBase}>
<View style={styles.modalContainer}>
<View style={styles.modalClose}>
<TouchableOpacity style={styles.dismissButton} activeOpacity={1} onPress={actions.hideBlockedTopics}>
@ -681,7 +693,8 @@ export function Settings() {
</TouchableOpacity>
</View>
</View>
</BlurView>
</View>
</View>
</Modal>
<Modal
@ -691,7 +704,9 @@ export function Settings() {
supportedOrientations={['portrait', 'landscape']}
onRequestClose={actions.hideBlockedMessages}
>
<BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black">
<View style={styles.modalOverlay}>
<BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black" />
<View style={styles.modalBase}>
<View style={styles.modalContainer}>
<View style={styles.modalClose}>
<TouchableOpacity style={styles.dismissButton} activeOpacity={1} onPress={actions.hideBlockedMessages}>
@ -720,7 +735,8 @@ export function Settings() {
</TouchableOpacity>
</View>
</View>
</BlurView>
</View>
</View>
</Modal>
</SafeAreaView>

7
app/mobile/src/session/settings/Settings.styled.js
View File

@ -115,11 +115,18 @@ export const styles = StyleSheet.create({
transform: [{ scaleX: .6 }, { scaleY: .6 }],
},
modalOverlay: {
width: '100%',
height: '100%',
},
modalBase: {
display: 'flex',
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
top: 0,
left: 0,
},
modalContainer: {
backgroundColor: Colors.modalBase,