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

add new settings screen separate from porfile

Browse Source
This commit is contained in:
balzack 2023-08-23 13:59:17 -07:00
parent 622111e697
commit 3787652777
8 changed files with 195 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/mobile/ios/Databag.xcodeproj/project.pbxproj
View File

@ -622,7 +622,7 @@
"$(inherited)",
"@executable_path/Frameworks",
);
MARKETING_VERSION = 1.19;
MARKETING_VERSION = 1.21;
OTHER_LDFLAGS = (
"$(inherited)",
"-ObjC",
@ -656,7 +656,7 @@
"$(inherited)",
"@executable_path/Frameworks",
);
MARKETING_VERSION = 1.19;
MARKETING_VERSION = 1.21;
OTHER_LDFLAGS = (
"$(inherited)",
"-ObjC",

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

@ -28,6 +28,8 @@ const LightColors = {
horizontalDivider: '#eeeeee',
verticalDivider: '#aaaaaa',
unreadIndicator: '#00aa00',
enabledIndicator: '#8fbea7',
disabledIndicator: '#eeeeee',
disconnectedIndicator: '#aa0000',
};
@ -59,6 +61,8 @@ const DarkColors = {
horizonalDivider: '#888888',
verticalDivider: '#aaaaaa',
unreadIndicator: '#00aa00',
enabledIndicator: '#8fbea7',
disabledIndicator: '#eeeeee',
disconnectedIndicator: '#aa0000',
};
@ -94,6 +98,8 @@ export const Colors = {
horizonalDivider: getColor('horizontalDivider'),
verticalDivider: getColor('verticalDivider'),
unreadIndicator: getColor('unreadIndicator'),
enabledIndicator: getColor('enabledIndicator'),
disabledIndicator: getColor('disabledIndicator'),
disconnectedIndicator: getColor('disconnectedIndicator'),
background: '#8fbea7',

13
app/mobile/src/constants/Strings.js
View File

@ -1,4 +1,4 @@
export getLanguageId(language) {
export function getLanguageId(language) {
if (language === 'english') {
return 0;
}
@ -21,7 +21,7 @@ export const Strings = [
enableNotifications: 'Enable Notifications',
sealedTopics: 'Sealed Topics',
colorMode: 'Color Mode',
clockMode: 'Hour Format',
hourMode: 'Hour Format',
language: 'Language',
logout: 'Logout',
changeLogin: 'Change Login',
@ -41,7 +41,7 @@ export const Strings = [
enableNotifications: 'Activer les Notifications',
sealedTopics: 'Sujets Sécurisés',
colorMode: 'Mode de Couleur',
clockMode: 'Format d\'Heure',
hourMode: 'Format d\'Heure',
language: 'Langue',
logout: 'Se Déconnecter',
changeLogin: 'Changer le Mot de Passe',
@ -61,7 +61,7 @@ export const Strings = [
enableNotifications: 'Permitir Notificaciones',
sealedTopics: 'Temas Protegidos',
colorMode: 'Modo de Color',
clockMode: 'Formato de Hora',
hourMode: 'Formato de Hora',
language: 'Idioma',
logout: 'Cerrar Sesión',
changeLogin: 'Cambiar la contraseña',
@ -72,7 +72,7 @@ export const Strings = [
support: 'Ayuda',
blocked: 'Oculto',
actions: 'Métodos',
display: 'Pantalla'
display: 'Pantalla',
settings: 'Configuración',
},
{
@ -81,7 +81,7 @@ export const Strings = [
enableNotifications: 'Benachrichtigungen aktivieren',
sealedTopics: 'Gesicherte Themen',
colorMode: 'Farmodus',
clockMode: 'Stundenformat',
hourMode: 'Stundenformat',
language: 'Sprache',
logout: 'Ausloggen',
changeLogin: 'Kennwort Aktualisieren',
@ -97,3 +97,4 @@ export const Strings = [
}
];
export default Strings;

23
app/mobile/src/session/Session.jsx
View File

@ -17,6 +17,7 @@ import { ContactHeader, ContactBody, Contact } from './contact/Contact';
import { Details } from './details/Details';
import { Conversation, ConversationHeader, ConversationBody } from './conversation/Conversation';
import { Welcome } from './welcome/Welcome';
import { Settings } from './settings/Settings';
import { Channels } from './channels/Channels';
import { CommonActions } from '@react-navigation/native';
import { ConversationContext } from 'context/ConversationContext';
@ -31,6 +32,7 @@ import { useNavigate } from 'react-router-dom';
const ConversationStack = createStackNavigator();
const ProfileStack = createStackNavigator();
const SettingsStack = createStackNavigator();
const ContactStack = createStackNavigator();
const ProfileDrawer = createDrawerNavigator();
const ContactDrawer = createDrawerNavigator();
@ -94,6 +96,21 @@ function ConversationStackScreen({ dmChannel, shareChannel, shareIntent, setShar
);
}
function SettingsStackScreen() {
const stackParams = { headerStyle: { backgroundColor: Colors.titleBackground }, headerBackTitleVisible: false };
const screenParams = { headerShown: false, headerTintColor: Colors.primary };
return (
<SafeAreaView edges={['left', 'right']} style={styles.body}>
<SettingsStack.Navigator screenOptions={({ route }) => (screenParams)}>
<SettingsStack.Screen name="settings" options={stackParams}>
{(props) => <Settings />}
</SettingsStack.Screen>
</SettingsStack.Navigator>
</SafeAreaView>
);
}
function ProfileStackScreen() {
const stackParams = { headerStyle: { backgroundColor: Colors.titleBackground }, headerBackTitleVisible: false };
const screenParams = { headerShown: true, headerTintColor: Colors.primary };
@ -435,6 +452,9 @@ export function Session({ sharing, clearSharing }) {
if (route.name === 'Conversation') {
return <Ionicons name={'message1'} size={size} color={color} />;
}
if (route.name === 'Settings') {
return <Ionicons name={'setting'} size={size} color={color} />;
}
if (route.name === 'Contacts') {
return <CardsIcon size={size} color={color} />;
}
@ -444,8 +464,9 @@ export function Session({ sharing, clearSharing }) {
tabBarInactiveTintColor: Colors.disabled,
})}>
<Tab.Screen name="Conversation" children={()=><ConversationStackScreen dmChannel={dmChannel} shareChannel={shareChannel} shareIntent={shareIntent} setShareIntent={setShareIntent} />} />
<Tab.Screen name="Profile" component={ProfileStackScreen} />
<Tab.Screen name="Contacts" children={()=><ContactStackScreen addChannel={addChannel} />} />
<Tab.Screen name="Profile" component={ProfileStackScreen} />
<Tab.Screen name="Settings" component={SettingsStackScreen} />
</Tab.Navigator>
)}
<StatusBar barStyle="dark-content" backgroundColor={Colors.formBackground} />

1
app/mobile/src/session/Session.styled.js
View File

@ -68,6 +68,7 @@ export const styles = StyleSheet.create({
},
tabBar: {
backgroundColor: Colors.primary,
maxHeight: 72,
},
home: {
display: 'flex',

68
app/mobile/src/session/settings/Settings.jsx Normal file
View File

@ -0,0 +1,68 @@
import { ScrollView, View, Text, Switch, TouchableOpacity } from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { styles } from './Settings.styled';
import { useSettings } from './useSettings.hook';
import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Colors from 'constants/Colors';
import Strings from 'constants/Strings';
export function Settings() {
const { state, actions } = useSettings();
return (
<SafeAreaView edges={['left', 'right', 'top', 'bottom']} style={styles.container}>
<ScrollView style={styles.content}>
<Text style={styles.label}>Settings</Text>
<View style={styles.group}>
<TouchableOpacity style={styles.entry} activeOpacity={1}>
<View style={styles.icon}>
<MatIcons name="bell-outline" size={20} color={Colors.linkText} />
</View>
<View style={styles.option}>
<Text style={styles.optionLink}>{ Strings[state.lang].enableNotifications }</Text>
</View>
<View style={styles.control}>
<Switch style={styles.notifications} trackColor={styles.track}/>
</View>
</TouchableOpacity>
<View style={styles.divider} />
<View style={styles.entry}>
<View style={styles.icon}>
<MatIcons name="lock-outline" size={20} color={Colors.linkText} />
</View>
<View style={styles.option}>
<Text style={styles.optionLink}>{ Strings[state.lang].sealedTopics }</Text>
</View>
<View style={styles.control} />
</View>
</View>
<Text style={styles.label}>Display</Text>
<View style={styles.group}>
<TouchableOpacity style={styles.entry} activeOpacity={1}>
<View style={styles.icon}>
<MatIcons name="progress-clock" size={20} color={Colors.linkText} />
</View>
<View style={styles.option}>
<Text style={styles.optionLink}>{ Strings[state.lang].hourMode }</Text>
</View>
<View style={styles.control} />
</TouchableOpacity>
<View style={styles.divider} />
<TouchableOpacity style={styles.entry}>
<View style={styles.icon}>
<MatIcons name="earth" size={20} color={Colors.linkText} />
</View>
<View style={styles.option}>
<Text style={styles.optionLink}>{ Strings[state.lang].language }</Text>
</View>
<View style={styles.control} />
</TouchableOpacity>
</View>
</ScrollView>
</SafeAreaView>
);
}

70
app/mobile/src/session/settings/Settings.styled.js Normal file
View File

@ -0,0 +1,70 @@
import { StyleSheet } from 'react-native';
import { Colors } from 'constants/Colors';
export const styles = StyleSheet.create({
container: {
backgroundColor: Colors.screenBase,
},
content: {
width: '100%',
height: '100%',
display: 'flex',
paddingLeft: 16,
paddingRight: 16,
},
label: {
color: Colors.text,
padding: 4,
},
group: {
backgroundColor: Colors.areaBase,
width: '100%',
borderRadius: 8,
marginBottom: 8,
},
divider: {
width: '100%',
height: 2,
backgroundColor: Colors.screenBase,
},
entry: {
width: '100%',
display: 'flex',
alignItems: 'center',
flexDirection: 'row',
padding: 4,
height: 40,
},
icon: {
flex: 2,
alignItems: 'center',
},
option: {
flex: 10,
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
},
control: {
flex: 2,
alignItems: 'center',
},
optionText: {
fontSize: 16,
paddingRight: 8,
color: Colors.text,
},
optionLink: {
fontSize: 16,
paddingRight: 8,
color: Colors.linkText,
},
track: {
false: Colors.disabledIndicator,
true: Colors.enabledIndicator,
},
notifications: {
transform: [{ scaleX: .6 }, { scaleY: .6 }],
},
});

19
app/mobile/src/session/settings/useSettings.hook.js Normal file
View File

@ -0,0 +1,19 @@
import { useState, useEffect, useRef, useContext } from 'react';
export function useSettings() {
const [state, setState] = useState({
lang: 0,
});
const updateState = (value) => {
setState((s) => ({ ...s, ...value }));
}
const actions = {
};
return { state, actions };
}