implementing refactored contact list

app/mobile/src/constants/Strings.js

@@ -83,7 +83,6 @@ const Strings = [
     editDetails: 'Edit Details',
 
     // contacts page
-    add: 'Add',
     back: 'Back',
     deleteContact: 'Delete Contact',
     confirmDelete: 'Delete',
@@ -93,7 +92,6 @@ const Strings = [
     confirmBlock: 'Block',
     reportContact: 'Report Contact',
     confirmReport: 'Report',
-
     confirmed: 'Saved',
     pending: 'Unknown',
     connecting: 'Requested',
@@ -101,7 +99,6 @@ const Strings = [
     requested: 'Received',
     unsaved: 'Unsaved',
     offsync: 'Offsync',
-
     actionResync: 'Resync',
     actionConnect: 'Connect',
     actionAccept: 'Accept',
@@ -112,6 +109,16 @@ const Strings = [
     actionDelete: 'Delete',
     actionBlock: 'Block',
     actionReport: 'Report',
+
+    // contact list page
+    add: 'Add',
+    contactFilter: 'Contacts',
+    serverFilter: 'Server',
+    usernameFilter: 'Username',
+    viewProfile: 'View Profile',
+    messageContact: 'Message Contact',
+    callContact: 'Call Contact',
+    noContacts: 'No Contacts Found',
   },
   {
     visibleRegistry: 'Visible dans le Registre',
@@ -192,7 +199,6 @@ const Strings = [
     editDetails: 'Modifier les Détails',
 
     //constacts page
-    add: 'Ajouter',
     back: 'Arrière',
     deleteContact: 'Supprimer le Contact',
     confirmDelete: 'Supprimer',
@@ -202,7 +208,6 @@ const Strings = [
     confirmBlock: 'Bloquer',
     reportContact: 'Signaler le Contact',
     confirmReport: 'Signaler',
-
     confirmed: 'Enregistré',
     pending: 'Inconnu',
     connecting: 'Demandé',
@@ -210,7 +215,6 @@ const Strings = [
     requested: 'Reçue',
     unsaved: 'Non Enregistré',
     offsync: 'Hors Sync',
-
     actionResync: 'Resync',
     actionConnect: 'Connecter',
     actionAccept: 'Accepter',
@@ -221,6 +225,16 @@ const Strings = [
     actionDelete: 'Supprimer',
     actionBlock: 'Bloquer',
     actionReport: 'Signaler',
+
+    //constact list page
+    add: 'Ajouter',
+    contactFilter: 'Contacts',
+    serverFilter: 'Serveur',
+    usernameFilter: 'Nom d\'Utilisateur',
+    viewProfile: 'Voir le Profil',
+    messageContact: 'Envoyer un Message',
+    callContact: 'Appeler le Contact',
+    noContacts: 'Aucun Contact Trouvé',
   },
   {
     visibleRegistry: 'Visible en el Registro',
@@ -301,7 +315,6 @@ const Strings = [
     editDetails: 'Editar Detalles',
 
     // contacts page
-    add: 'Agregar', 
     back: 'Atrás',
     deleteContact: 'Borrar Contacto',
     confirmDelete: 'Borrar',
@@ -311,7 +324,6 @@ const Strings = [
     confirmBlock: 'Bloquear',
     reportContact: 'Reportar el Contacto',
     confirmReport: 'Reportar',
-  
     confirmed: 'Guardado',
     pending: 'Desconocido',
     connecting: 'Conectando',
@@ -319,7 +331,6 @@ const Strings = [
     requested: 'Solicitado',
     unsaved: 'No Guardado',
     offsync: 'Fuera de Sync',
-
     actionResync: 'Resinc',
     actionConnect: 'Conectar',
     actionAccept: 'Aceptar',
@@ -330,6 +341,16 @@ const Strings = [
     actionDelete: 'Borrar',
     actionBlock: 'Bloquear',
     actionReport: 'Reportar',
+
+    // contact list page
+    add: 'Agregar', 
+    contactFilter: 'Contactos',
+    serverFilter: 'Servidor',
+    usernameFilter: 'Nombre de Usuario',
+    viewProfile: 'Ver Perfil',
+    messageContact: 'Enviar Mensaje',
+    callContact: 'Llamar Contacto',
+    noContacts: 'No Encontraron Contactos',
   },
   {
     visibleRegistry: 'Sichtbar in der Registrierung',
@@ -410,7 +431,6 @@ const Strings = [
     editDetails: 'Details Bearbeiten',
     
     //contacts page
-    add: 'Hinzufügen',
     back: 'Rückwärts',
     deleteContact: 'Kontakt Löschen',
     confirmDelete: 'Löschen',
@@ -420,7 +440,6 @@ const Strings = [
     confirmBlock: 'Verstecken',
     reportContact: 'Kontakt Melden',
     confirmReport: 'Bericht',
-
     confirmed: 'Gerettet',
     pending: 'Unbekannt',
     connecting: 'Verbinden',
@@ -428,7 +447,6 @@ const Strings = [
     requested: 'Angefordert',
     unsaved: 'Nicht Gespeichert',
     offsync: 'Nicht Sync',
-
     actionResync: 'Neu Sync',
     actionConnect: 'Verbinden',
     actionAccept: 'Akzeptieren',
@@ -439,6 +457,16 @@ const Strings = [
     actionDelete: 'Löschen',
     actionBlock: 'Verstecken',
     actionReport: 'Bericht',
+
+    // contact list page
+    add: 'Hinzufügen',
+    contactFilter: 'Kontakte',
+    serverFilter: 'Server',
+    usernameFilter: 'Benutzername',
+    viewProfile: 'Profil Anzeigen',
+    messageContact: 'Nachricht Senden',
+    callContact: 'Kontakt Anrufen',
+    noContacts: 'Keine Kontakte Gefunden',
   }
 ];
 

app/mobile/src/session/Session.jsx

@@ -43,8 +43,8 @@ const RegistryDrawer = createDrawerNavigator();
 const Tab = createBottomTabNavigator();
 
 function ConversationStackScreen({ dmChannel, shareChannel, shareIntent, setShareIntent }) {
-  const stackParams = { headerStyle: { backgroundColor: Colors.titleBackground }, headerBackTitleVisible: false };
+  const stackParams = { headerStyle: { backgroundColor: Colors.areaBase }, headerBackTitleVisible: false };
-  const screenParams = { headerShown: true, headerTintColor: Colors.primary };
+  const screenParams = { headerShown: true };
 
   const conversation = useContext(ConversationContext);
   const [cardId, setCardId] = useState();
@@ -98,8 +98,8 @@ function ConversationStackScreen({ dmChannel, shareChannel, shareIntent, setShar
 }
 
 function SettingsStackScreen() {
-  const stackParams = { headerStyle: { backgroundColor: Colors.titleBackground }, headerBackTitleVisible: false };
+  const stackParams = { headerBackTitleVisible: false };
-  const screenParams = { headerShown: false, headerTintColor: Colors.primary };
+  const screenParams = { headerShown: false };
 
   return (
     <SafeAreaView edges={['left', 'right']} style={styles.body}>
@@ -113,8 +113,8 @@ function SettingsStackScreen() {
 }
 
 function ProfileStackScreen() {
-  const stackParams = { headerStyle: { backgroundColor: Colors.titleBackground }, headerBackTitleVisible: false };
+  const stackParams = { headerBackTitleVisible: false };
-  const screenParams = { headerShown: false, headerTintColor: Colors.primary };
+  const screenParams = { headerShown: false };
 
   return (
     <SafeAreaView edges={['left', 'right']} style={styles.body}>
@@ -128,8 +128,8 @@ function ProfileStackScreen() {
 }
 
 function ContactStackScreen({ addChannel }) {
-  const stackParams = { headerStyle: { backgroundColor: Colors.titleBackground }, headerBackTitleVisible: false };
+  const stackParams = { headerStyle: { backgroundColor: Colors.screenBase }, headerBackTitleVisible: false };
-  const screenParams = { headerShown: true, headerTintColor: Colors.primary };
+  const screenParams = { headerShown: true };
 
   const profile = useContext(ProfileContext);
   

app/mobile/src/session/Session.styled.js

@@ -5,7 +5,7 @@ export const styles = StyleSheet.create({
   body: {
     width: '100%',
     height: '100%',
-    backgroundColor: Colors.formBackground,
+    backgroundColor: Colors.screenBase,
   },
   container: {
     width: '100%',
@@ -14,7 +14,7 @@ export const styles = StyleSheet.create({
   firstRun: {
     width: '100%',
     height: '100%',
-    backgroundColor: Colors.background,
+    backgroundColor: Colors.screenBase,
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -58,13 +58,13 @@ export const styles = StyleSheet.create({
   start: {
     marginTop: 16,
     padding: 8,
-    backgroundColor: Colors.primary,
+    backgroundColor: Colors.primaryButton,
     borderRadius: 4,
     display: 'flex',
     alignItems: 'center',
   },
   startText: {
-    color: Colors.white,
+    color: Colors.primaryButtonText,
   },
   tabBar: {
     borderColor: Colors.tabBar,
@@ -83,11 +83,11 @@ export const styles = StyleSheet.create({
     width: '33%',
     maxWidth: 500,
     borderRightWidth: 1,
-    borderColor: Colors.divider,
+    borderColor: Colors.verticalDivider,
   },
   conversation: {
     width: '67%',
-    backgroundColor: Colors.formFocus,
+    backgroundColor: Colors.areaBase,
   },
   drawer: {
     width: '100%',
@@ -138,7 +138,7 @@ export const styles = StyleSheet.create({
   },
   headertext: {
     fontSize: 18,
-    color: Colors.tetx,
+    color: Colors.text,
   },
   ringBase: {
     display: 'flex',
@@ -149,7 +149,7 @@ export const styles = StyleSheet.create({
     backgroundColor: 'rgba(52, 52, 52, 0.8)'
   },
   ringFrame: {
-    backgroundColor: Colors.formBackground,
+    backgroundColor: Colors.areaBase,
     padding: 16,
     width: '90%',
     maxWidth: 400,
@@ -185,7 +185,7 @@ export const styles = StyleSheet.create({
   ringAccept: {
     borderWidth: 1,
     borderRadius: 20,
-    borderColor: Colors.primary,
+    borderColor: Colors.primaryButton,
     padding: 6,
     marginLeft: 4,
   },

app/mobile/src/session/cards/Cards.jsx

@@ -8,31 +8,35 @@ import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { Colors } from 'constants/Colors';
 import { CardItem } from './cardItem/CardItem';
 import { useNavigation } from '@react-navigation/native';
+import { getLanguageStrings } from 'constants/Strings';
 
 export function CardsHeader({ filter, setFilter, sort, setSort, openRegistry }) {
   const navigation = useNavigation();
+  const strings = getLanguageStrings();
 
   return (
     <View style={styles.title}>
       { sort && (
         <TouchableOpacity style={styles.sort} onPress={() => setSort(false)}>
-          <MatIcons style={styles.icon} name="sort-alphabetical-ascending" size={18} color={Colors.text} />
+          <MatIcons style={styles.icon} name="sort-ascending" size={18} color={Colors.text} />
         </TouchableOpacity>
       )}
       { !sort && (
         <TouchableOpacity style={styles.sort} onPress={() => setSort(true)}>
-          <MatIcons style={styles.icon} name="sort-alphabetical-ascending" size={18} color={Colors.disabled} />
+          <MatIcons style={styles.icon} name="sort-ascending" size={18} color={Colors.unsetText} />
         </TouchableOpacity>
       )}
       <View style={styles.inputwrapper}>
-        <AntIcons style={styles.icon} name="search1" size={16} color={Colors.disabled} />
+        <AntIcons style={styles.icon} name="search1" size={16} color={Colors.inputPlaceholder} />
-        <TextInput style={styles.inputfield} value={filter} onChangeText={setFilter}
+
-            autoCapitalize="none" placeholderTextColor={Colors.disabled} placeholder="Contacts" />
+        <TextInput placeholder={ strings.contactFilter } placeholderTextColor={Colors.inputPlaceholder} value={filter}
+            style={styles.inputfield} autoCapitalize={'none'} spellCheck={false} onChangeText={setFilter} />
+
         <View style={styles.space} />
       </View>
       <TouchableOpacity style={styles.add} onPress={() => openRegistry(navigation)}>
-        <AntIcons name={'adduser'} size={16} color={Colors.white} style={[styles.box, { transform: [ { rotateY: "180deg" }, ]} ]}/>
+        <AntIcons name={'adduser'} size={16} color={Colors.primaryButtonText} style={[styles.box, { transform: [ { rotateY: "180deg" }, ]} ]}/>
-        <Text style={styles.newtext}>Add</Text>
+        <Text style={styles.newtext}>{ strings.add }</Text>
       </TouchableOpacity>
     </View>
   );
@@ -48,9 +52,9 @@ export function CardsBody({ filter, sort, openContact, addChannel }) {
     catch (err) {
       console.log(err);
       Alert.alert(
-        'Failed to Call Contact',
+        state.strings.error,
-        'Please try again.'
+        state.strings.tryAgain,
-      )
+      );
     }
   }
 
@@ -58,7 +62,7 @@ export function CardsBody({ filter, sort, openContact, addChannel }) {
     <>
       { state.cards.length == 0 && (
         <View style={styles.notfound}>
-          <Text style={styles.notfoundtext}>No Contacts Found</Text>
+          <Text style={styles.notfoundtext}>{ state.strings.noContacts }</Text>
         </View>
       )}
       { state.cards.length != 0 && (

app/mobile/src/session/cards/Cards.styled.js

@@ -7,7 +7,7 @@ export const styles = StyleSheet.create({
     height: '100%',
     display: 'flex',
     flexDirection: 'column',
-    backgroundColor: Colors.formBackground,
+    backgroundColor: Colors.screenBase,
   },
   drawer: {
     flexGrow: 1,
@@ -21,7 +21,7 @@ export const styles = StyleSheet.create({
   topbar: {
     borderTopWidth: 1,
     borderBottomWidth: 1,
-    borderColor: Colors.divider,
+    borderColor: Colors.itemDivider,
     paddingTop: 32,
     paddingBottom: 6,
     paddingLeft: 16,
@@ -34,11 +34,11 @@ export const styles = StyleSheet.create({
   cardlist: {
     flexGrow: 1,
     borderBottomWidth: 1,
-    borderColor: Colors.divider,
+    borderColor: Colors.itemDivider,
   },
   searcharea: {
     borderBottomWidth: 1,
-    borderColor: Colors.divider,
+    borderColor: Colors.itemDivider,
   },
   searchbar: {
     display: 'flex',
@@ -53,7 +53,7 @@ export const styles = StyleSheet.create({
     display: 'flex',
     flexDirection: 'row',
     borderRadius: 4,
-    backgroundColor: Colors.white,
+    backgroundColor: Colors.inputBase,
     alignItems: 'center',
     flexGrow: 1,
     flexShrink: 1,
@@ -65,7 +65,7 @@ export const styles = StyleSheet.create({
     flex: 1,
     textAlign: 'center',
     padding: 4,
-    color: Colors.text,
+    color: Colors.inputText,
     fontSize: 14,
   },
   icon: {
@@ -75,6 +75,7 @@ export const styles = StyleSheet.create({
     width: '100%',
     paddingLeft: 16,
     paddingRight: 16,
+    backgroundColor: Colors.screenBase,
   },
   addbottom: {
     marginRight: 8,
@@ -90,7 +91,7 @@ export const styles = StyleSheet.create({
     paddingLeft: 8,
   },
   add: {
-    backgroundColor: Colors.primary,
+    backgroundColor: Colors.primaryButton,
     marginLeft: 8,
     display: 'flex',
     flexDirection: 'row',
@@ -100,7 +101,7 @@ export const styles = StyleSheet.create({
   },
   newtext: {
     paddingLeft: 8,
-    color: Colors.white,
+    color: Colors.primaryButtonText,
   },
   up: {
     marginRight: 8,
@@ -110,7 +111,7 @@ export const styles = StyleSheet.create({
   },
   findarea: {
     borderTopWidth: 1,
-    borderColor: Colors.divider,
+    borderColor: Colors.itemDivider,
   },
   notfound: {
     width: '100%',
@@ -120,7 +121,7 @@ export const styles = StyleSheet.create({
   },
   notfoundtext: {
     fontSize: 20,
-    color: Colors.grey,
+    color: Colors.unsetText,
   }
 })
 

app/mobile/src/session/cards/cardItem/CardItem.jsx

@@ -3,8 +3,12 @@ import { Logo } from 'utils/Logo';
 import { styles } from './CardItem.styled';
 import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import Colors from 'constants/Colors';
+import { Menu, MenuOptions, MenuOption, MenuTrigger } from 'react-native-popup-menu';
+import { getLanguageStrings } from 'constants/Strings';
 
 export function CardItem({ item, openContact, enableIce, call, message }) {
+
+  const strings = getLanguageStrings();
   
   const select = () => {
     const { guid, name, handle, node, location, description, imageSet } = item;
@@ -16,42 +20,47 @@ export function CardItem({ item, openContact, enableIce, call, message }) {
     <View>
       { item.cardId && (
         <View style={styles.container}>
-          <TouchableOpacity style={styles.profile} activeOpacity={1} onPress={select}>
+          <View style={styles.profile}>
-            <Logo src={item.logo} width={32} height={32} radius={6} />
+            <Logo src={item.logo} width={48} height={48} radius={6} />
             <View style={styles.detail}>
-              <Text style={styles.name} numberOfLines={1} ellipsizeMode={'tail'}>{ item.name }</Text>
+              <Text style={styles.name} numberOfLines={1} adjustsFontSizeToFit={true}>{ item.name }</Text>
-              <Text style={styles.handle} numberOfLines={1} ellipsizeMode={'tail'}>{ item.handle }</Text>
+              <Text style={styles.handle} numberOfLines={1} adjustsFontSizeToFit={true}>{ item.username }</Text>
             </View>
-          </TouchableOpacity>
+          </View>
           { item.status === 'connected' && (
-            <View style={styles.options}>
+            <Menu>
-              <TouchableOpacity style={styles.option} onPress={message}>
+              <MenuTrigger customStyles={styles.trigger}>
-                <MatIcons name={'message-outline'} size={20} color={Colors.primary} />
+                { item.status === 'connected' && item.offsync && (
-              </TouchableOpacity>
+                  <MatIcons name={'dots-horizontal'} size={32} color={Colors.offysnc} />
-              { enableIce && (
+                )}
-                <TouchableOpacity style={styles.option} onPress={call}>
+                { item.status === 'connected' && !item.offsync && (
-                  <MatIcons name={'phone-outline'} size={20} color={Colors.primary} />
+                  <MatIcons name={'dots-horizontal'} size={32} color={Colors.connected} />
-                </TouchableOpacity>
+                )}
-              )}
+              </MenuTrigger>
-            </View>
+              <MenuOptions optionsContainerStyle={{ width: 'auto' }} style={styles.options}>
-          )}
+                <MenuOption onSelect={() => {}}>
-          { item.status === 'connected' && item.offsync && (
+                  <Text style={styles.option}>{ strings.viewProfile }</Text>
-            <View style={styles.offsync} />
+                </MenuOption>
-          )}
+                <MenuOption onSelect={() => {}}>
-          { item.status === 'connected' && !item.offsync && (
+                  <Text style={styles.option}>{ strings.messageContact }</Text>
-            <View style={styles.connected} />
+                </MenuOption>
+                <MenuOption onSelect={() => {}}>
+                  <Text style={styles.option}>{ strings.callContact }</Text>
+                </MenuOption>
+              </MenuOptions>
+            </Menu>
           )}
           { item.status === 'requested' && (
-            <View style={styles.requested} />
+            <MatIcons name={'dots-horizontal'} size={32} color={Colors.requested} />
           )}
           { item.status === 'connecting' && (
-            <View style={styles.connecting} />
+            <MatIcons name={'dots-horizontal'} size={32} color={Colors.connecting} />
           )}
           { item.status === 'pending' && (
-            <View style={styles.pending} />
+            <MatIcons name={'dots-horizontal'} size={32} color={Colors.pending} />
           )}
           { item.status === 'confirmed' && (
-            <View style={styles.confirmed} />
+            <MatIcons name={'dots-horizontal'} size={32} color={Colors.confirmed} />
           )}
         </View>
       )}

app/mobile/src/session/cards/cardItem/CardItem.styled.js

@@ -6,14 +6,16 @@ export const styles = StyleSheet.create({
     width: '100%',
     display: 'flex',
     flexDirection: 'row',
-    height: 48,
+    height: 64,
     alignItems: 'center',
     borderBottomWidth: 1,
     borderColor: Colors.itemDivider,
+    flex: 1,
   },
   profile: {
     flexDirection: 'row',
-    flexGrow: 1,
+    flexShrink: 1,
+    display: 'flex',
   },
   detail: {
     paddingLeft: 12,
@@ -21,17 +23,20 @@ export const styles = StyleSheet.create({
     flexDirection: 'column',
     justifyContent: 'center',
     flexShrink: 1,
+    flexGrow: 1,
   },
   space: {
     height: 64,
   },
   name: {
     color: Colors.text,
-    fontSize: 14,
+    fontSize: 18,
+    flexShrink: 1,
   },
   handle: {
     color: Colors.text,
-    fontSize: 12,
+    fontSize: 16,
+    flexShrink: 1,
   },
   connected: {
     width: 8,
@@ -69,19 +74,23 @@ export const styles = StyleSheet.create({
     borderRadius: 4,
     backgroundColor: Colors.confirmed,
   },
+  trigger: {
+    triggerTouchable: {
+      activeOpacity: 70,
+    },
+  },
   options: {
-    display: 'flex',
+    backgroundColor: Colors.areaBase,
-    flexDirection: 'row',
+    borderWidth: 0.2,
-    height: '100%',
+    borderColor: Colors.areaBorder,
-    marginRight: 8,
   },
   option: {
-    paddingLeft: 12,
+    padding: 6,
-    paddingRight: 12,
+    color: Colors.text,
-    height: '100%',
+    backgroundColor: Colors.areaBase,
-    display: 'flex',
+    fontFamily: 'roboto',
-    alignItems: 'center',
+    fontSize: 16,
-    justifyContent: 'center',
+    textAlign: 'center',
   },
 })
 

app/mobile/src/session/cards/useCards.hook.js

@@ -3,12 +3,14 @@ import { CardContext } from 'context/CardContext';
 import { RingContext } from 'context/RingContext';
 import { AccountContext } from 'context/AccountContext';
 import { ProfileContext } from 'context/ProfileContext';
+import { getLanguageStrings } from 'constants/Strings';
 
 export function useCards(filter, sort) {
 
   const [state, setState] = useState({
     cards: [],
     enableIce: false,
+    strings: getLanguageStrings(),
   });
 
   const profile = useContext(ProfileContext);
@@ -33,6 +35,7 @@ export function useCards(filter, sort) {
       cardId: cardId,
       name: name,
       handle: handle,
+      username: `${handle}/${node}`,
       node: node,
       guid: guid,
       location: location,