more overlay debugging

This commit is contained in:
Roland Osborne 2023-10-06 13:26:56 -07:00
parent afcde011e9
commit ae7edd8fec
2 changed files with 20 additions and 35 deletions

View File

@ -40,27 +40,24 @@ export function Prompt() {
onRequestClose={display.actions.hidePrompt}
>
<View style={styles.modalOverlay}>
<View style={styles.blur} />
<View style={styles.modalBase}>
<View style={styles.modalContainer}>
<Text style={styles.modalHeader}>{ display.state.prompt?.title }</Text>
<View style={display.state.prompt?.centerButtons ? styles.centerModalButtons : styles.modalButtons}>
{ display.state.prompt?.cancel && (
<TouchableOpacity style={styles.cancelButton} activeOpacity={1} onPress={display.actions.hidePrompt}>
<Text style={styles.cancelButtonText}>{ display.state.prompt?.cancel?.label }</Text>
</TouchableOpacity>
)}
{ display.state.prompt?.ok && (
<TouchableOpacity style={styles.okButton} activeOpacity={1} onPress={okPrompt}>
{ !busy && (
<Text style={styles.okButtonText}>{ display.state.prompt?.ok?.label }</Text>
)}
{ busy && (
<ActivityIndicator animating={true} color={Colors.primaryButtonText} />
)}
</TouchableOpacity>
)}
</View>
<View style={styles.modalContainer}>
<Text style={styles.modalHeader}>{ display.state.prompt?.title }?</Text>
<View style={display.state.prompt?.centerButtons ? styles.centerModalButtons : styles.modalButtons}>
{ display.state.prompt?.cancel && (
<TouchableOpacity style={styles.cancelButton} activeOpacity={1} onPress={display.actions.hidePrompt}>
<Text style={styles.cancelButtonText}>{ display.state.prompt?.cancel?.label }</Text>
</TouchableOpacity>
)}
{ display.state.prompt?.ok && (
<TouchableOpacity style={styles.okButton} activeOpacity={1} onPress={okPrompt}>
{ !busy && (
<Text style={styles.okButtonText}>{ display.state.prompt?.ok?.label }</Text>
)}
{ busy && (
<ActivityIndicator animating={true} color={Colors.primaryButtonText} />
)}
</TouchableOpacity>
)}
</View>
</View>
</View>
@ -73,7 +70,7 @@ export function Prompt() {
supportedOrientations={['portrait', 'landscape']}
onRequestClose={display.actions.hideAlert}
>
<View styles={styles.blur}>
<View styles={styles.modalOverlay}>
<View style={styles.modalContainer}>
<Text style={styles.modalHeader}>{ display.state.alert?.title }</Text>
<Text style={styles.modalMessage}>{ display.state.alert?.message }</Text>

View File

@ -5,16 +5,10 @@ export const styles = StyleSheet.create({
modalOverlay: {
width: '100%',
height: '100%',
},
modalBase: {
backgroundColor: '#333333',
display: 'flex',
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
top: 0,
left: 0,
},
modalContainer: {
backgroundColor: Colors.modalBase,
@ -112,11 +106,5 @@ export const styles = StyleSheet.create({
justifyContent: 'center',
flexDirection: 'row',
},
blur: {
width: '100%',
height: '100%',
backgroundColor: '#333333',
opacity: 0.8,
},
});