diff --git a/app/mobile/ios/Databag.xcodeproj/project.pbxproj b/app/mobile/ios/Databag.xcodeproj/project.pbxproj index 6480ebee..63174916 100644 --- a/app/mobile/ios/Databag.xcodeproj/project.pbxproj +++ b/app/mobile/ios/Databag.xcodeproj/project.pbxproj @@ -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", diff --git a/app/mobile/src/constants/Colors.js b/app/mobile/src/constants/Colors.js index 6e07ebcb..ed07cdf8 100644 --- a/app/mobile/src/constants/Colors.js +++ b/app/mobile/src/constants/Colors.js @@ -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', diff --git a/app/mobile/src/constants/Strings.js b/app/mobile/src/constants/Strings.js index 87ddbdde..06f794e7 100644 --- a/app/mobile/src/constants/Strings.js +++ b/app/mobile/src/constants/Strings.js @@ -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; diff --git a/app/mobile/src/session/Session.jsx b/app/mobile/src/session/Session.jsx index 166a3abf..54541102 100644 --- a/app/mobile/src/session/Session.jsx +++ b/app/mobile/src/session/Session.jsx @@ -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 ( + + (screenParams)}> + + {(props) => } + + + + ); +} + 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 ; } + if (route.name === 'Settings') { + return ; + } if (route.name === 'Contacts') { return ; } @@ -444,8 +464,9 @@ export function Session({ sharing, clearSharing }) { tabBarInactiveTintColor: Colors.disabled, })}> } /> - } /> + + )} diff --git a/app/mobile/src/session/Session.styled.js b/app/mobile/src/session/Session.styled.js index 5dd86b76..6c1479ca 100644 --- a/app/mobile/src/session/Session.styled.js +++ b/app/mobile/src/session/Session.styled.js @@ -68,6 +68,7 @@ export const styles = StyleSheet.create({ }, tabBar: { backgroundColor: Colors.primary, + maxHeight: 72, }, home: { display: 'flex', diff --git a/app/mobile/src/session/settings/Settings.jsx b/app/mobile/src/session/settings/Settings.jsx new file mode 100644 index 00000000..780299cb --- /dev/null +++ b/app/mobile/src/session/settings/Settings.jsx @@ -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 ( + + + + Settings + + + + + + + { Strings[state.lang].enableNotifications } + + + + + + + + + + + + { Strings[state.lang].sealedTopics } + + + + + + Display + + + + + + + { Strings[state.lang].hourMode } + + + + + + + + + + { Strings[state.lang].language } + + + + + + + + ); +} diff --git a/app/mobile/src/session/settings/Settings.styled.js b/app/mobile/src/session/settings/Settings.styled.js new file mode 100644 index 00000000..15bd6e66 --- /dev/null +++ b/app/mobile/src/session/settings/Settings.styled.js @@ -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 }], + }, +}); + diff --git a/app/mobile/src/session/settings/useSettings.hook.js b/app/mobile/src/session/settings/useSettings.hook.js new file mode 100644 index 00000000..0c4ca665 --- /dev/null +++ b/app/mobile/src/session/settings/useSettings.hook.js @@ -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 }; +} + +