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

onto modal overlay cleanup

Browse Source
This commit is contained in:
Roland Osborne 2023-10-06 13:49:11 -07:00
parent 6fc0566a90
commit fed78939a7
6 changed files with 105 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/mobile/src/constants/Colors.js
View File

@ -89,7 +89,7 @@ const DarkColors = {
contentBase: '#000000',
modalBase: '#1b1b1b',
modalBorder: '#555555',
modalOverlay: 'rgba(0,0,0,0,0.8)',
modalOverlay: '#333333',
headerBar: '#555555',
primaryButton: '#448866',
primaryButtonText: '#ffffff',

96
app/mobile/src/session/channels/Channels.jsx
View File

@ -99,60 +99,56 @@ export function Channels({ cardId, channelId, navigation, openConversation, dmCh
supportedOrientations={['portrait', 'landscape']}
onRequestClose={actions.hideAdding}
>
<View style={styles.modalOverlay}>
<View style={styles.blur} />
<KeyboardAvoidingView style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<KeyboardAvoidingView style={styles.modalOverlay} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<View style={styles.modalContainer}>
<Text style={styles.addHeader}>{ state.strings.newTopic }</Text>
<View style={styles.modalContainer}>
<Text style={styles.addHeader}>{ state.strings.newTopic }</Text>
<InputField
label={state.strings.subject}
value={state.addSubject}
autoCapitalize={'words'}
spellCheck={false}
style={styles.field}
onChangeText={actions.setAddSubject}
/>
<InputField
label={state.strings.subject}
value={state.addSubject}
autoCapitalize={'words'}
spellCheck={false}
style={styles.field}
onChangeText={actions.setAddSubject}
/>
{ state.contacts.length == 0 && (
<View style={styles.emptyMembers}>
<Text style={styles.empty}>{ state.strings.noContacts }</Text>
</View>
)}
{ state.contacts.length > 0 && (
<FlatList style={styles.addMembers}
data={state.contacts}
renderItem={({ item }) => <AddMember members={state.addMembers} item={item}
setCard={actions.setAddMember} clearCard={actions.clearAddMember} />}
keyExtractor={item => item.cardId}
/>
)}
<View style={styles.addControls}>
<View style={styles.sealed}>
{ state.sealable && (
<>
<Switch style={styles.switch} trackColor={styles.track}
value={state.sealed} onValueChange={actions.setSealed} />
<Text style={styles.sealedText}>{ state.strings.sealed }</Text>
</>
)}
</View>
<TouchableOpacity style={styles.cancel} onPress={actions.hideAdding}>
<Text style={styles.cancelText}>{ state.strings.cancel }</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.save} onPress={addChannel}>
{ state.busy && (
<ActivityIndicator color={Colors.text} />
)}
{ !state.busy && (
<Text style={styles.saveText}>{ state.strings.create }</Text>
)}
</TouchableOpacity>
{ state.contacts.length == 0 && (
<View style={styles.emptyMembers}>
<Text style={styles.empty}>{ state.strings.noContacts }</Text>
</View>
)}
{ state.contacts.length > 0 && (
<FlatList style={styles.addMembers}
data={state.contacts}
renderItem={({ item }) => <AddMember members={state.addMembers} item={item}
setCard={actions.setAddMember} clearCard={actions.clearAddMember} />}
keyExtractor={item => item.cardId}
/>
)}
<View style={styles.addControls}>
<View style={styles.sealed}>
{ state.sealable && (
<>
<Switch style={styles.switch} trackColor={styles.track}
value={state.sealed} onValueChange={actions.setSealed} />
<Text style={styles.sealedText}>{ state.strings.sealed }</Text>
</>
)}
</View>
<TouchableOpacity style={styles.cancel} onPress={actions.hideAdding}>
<Text style={styles.cancelText}>{ state.strings.cancel }</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.save} onPress={addChannel}>
{ state.busy && (
<ActivityIndicator color={Colors.text} />
)}
{ !state.busy && (
<Text style={styles.saveText}>{ state.strings.create }</Text>
)}
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
</View>
</View>
</KeyboardAvoidingView>
</Modal>
</View>
);

14
app/mobile/src/session/channels/Channels.styled.js
View File

@ -15,11 +15,6 @@ export const styles = StyleSheet.create({
alignItems: 'center',
justifyContent: 'center',
},
blur: {
width: '100%',
height: '100%',
backgroundColor: Colors.modalOverlay,
},
inputwrapper: {
display: 'flex',
flexDirection: 'row',
@ -202,18 +197,13 @@ export const styles = StyleSheet.create({
transform: [{ scaleX: .7 }, { scaleY: .7 }],
},
modalOverlay: {
width: '100%',
height: '100%',
},
modalBase: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
backgroundColor: Colors.modalOverlay,
opacity: 0.8,
},
modalContainer: {
backgroundColor: Colors.modalBase,

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

@ -200,63 +200,61 @@ export function Profile({ drawer }) {
supportedOrientations={['portrait', 'landscape']}
onRequestClose={actions.hideDetails}
>
<View style={styles.modalOverlay}>
<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.hideDetails}>
<MatIcons name="close" size={20} color={Colors.descriptionText} />
</TouchableOpacity>
</View>
<Text style={styles.modalHeader}>{ state.strings.editDetails }</Text>
<InputField
label={state.strings.name}
value={state.detailName}
autoCapitalize={'none'}
spellCheck={false}
multiline={false}
style={styles.field}
onChangeText={actions.setDetailName}
/>
<InputField
label={state.strings.location}
value={state.detailLocation}
autoCapitalize={'none'}
spellCheck={false}
multiline={false}
style={styles.field}
onChangeText={actions.setDetailLocation}
/>
<InputField
label={state.strings.description}
value={state.detailDescription}
autoCapitalize={'none'}
spellCheck={false}
multiline={true}
style={styles.field}
onChangeText={actions.setDetailDescription}
/>
<View style={styles.buttons}>
<TouchableOpacity style={styles.cancelButton} activeOpacity={1} onPress={actions.hideDetails}>
<Text style={styles.cancelButtonText}>{ state.strings.cancel }</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.saveButton} activeOpacity={1} onPress={saveDetails}>
{ busyDetail && (
<ActivityIndicator animating={true} color={Colors.primaryButtonText} />
)}
{ !busyDetail && (
<Text style={styles.saveButtonText}>{ state.strings.save }</Text>
)}
</TouchableOpacity>
</View>
<KeyboardAvoidingView style={styles.modalOverlay} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<View style={styles.modalContainer}>
<View style={styles.modalClose}>
<TouchableOpacity style={styles.dismissButton} activeOpacity={1} onPress={actions.hideDetails}>
<MatIcons name="close" size={20} color={Colors.descriptionText} />
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
</View>
<Text style={styles.modalHeader}>{ state.strings.editDetails }</Text>
<InputField
label={state.strings.name}
value={state.detailName}
autoCapitalize={'none'}
spellCheck={false}
multiline={false}
style={styles.field}
onChangeText={actions.setDetailName}
/>
<InputField
label={state.strings.location}
value={state.detailLocation}
autoCapitalize={'none'}
spellCheck={false}
multiline={false}
style={styles.field}
onChangeText={actions.setDetailLocation}
/>
<InputField
label={state.strings.description}
value={state.detailDescription}
autoCapitalize={'none'}
spellCheck={false}
multiline={true}
style={styles.field}
onChangeText={actions.setDetailDescription}
/>
<View style={styles.buttons}>
<TouchableOpacity style={styles.cancelButton} activeOpacity={1} onPress={actions.hideDetails}>
<Text style={styles.cancelButtonText}>{ state.strings.cancel }</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.saveButton} activeOpacity={1} onPress={saveDetails}>
{ busyDetail && (
<ActivityIndicator animating={true} color={Colors.primaryButtonText} />
)}
{ !busyDetail && (
<Text style={styles.saveButtonText}>{ state.strings.save }</Text>
)}
</TouchableOpacity>
</View>
</View>
</KeyboardAvoidingView>
</Modal>
</>

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

@ -278,10 +278,6 @@ export const styles = StyleSheet.create({
fontSize: 16,
textAlign: 'center',
},
modalOverlay: {
width: '100%',
height: '100%',
},
modalBase: {
width: '100%',
height: '100%',
@ -289,6 +285,7 @@ export const styles = StyleSheet.create({
alignItems: 'center',
justifyContent: 'center',
backgroundColor: Colors.modalOverlay,
opacity: 0.8,
},
modalContainer: {
backgroundColor: Colors.modalBase,

2
app/mobile/src/utils/Prompt.styled.js
View File

@ -5,7 +5,7 @@ export const styles = StyleSheet.create({
modalOverlay: {
width: '100%',
height: '100%',
backgroundColor: '#333333',
backgroundColor: Colors.modalOverlay,
opacity: 0.8,
display: 'flex',
alignItems: 'center',