building refactored contacts screen

app/mobile/src/constants/Colors.js

@@ -51,6 +51,13 @@ const LightColors = {
   disconnectedIndicator: '#aa0000',
   sliderGrip: '#eeeeee',
   areaBorder: '#ffffff',
+  connected: '#4488FF',
+  connecting: '#dd88ff',
+  requested: '#448844',
+  pending: '#ffaa22',
+  confirmed: '#aaaaaa',
+  offsync: '#ff4444',
+  unsaved: '#888888',
 };
 
 const DarkColors = {
@@ -104,6 +111,13 @@ const DarkColors = {
   disconnectedIndicator: '#aa0000',
   sliderGrip: '#eeeeee',
   areaBorder: '#777777',
+  connected: '#4488FF',
+  connecting: '#dd88ff',
+  requested: '#448844',
+  pending: '#ffaa22',
+  confirmed: '#aaaaaa',
+  offsync: '#ff4444',
+  unsaved: '#888888',
 };
 
 function getColor(label) {
@@ -160,6 +174,13 @@ export const Colors = {
   disconnectedIndicator: getColor('disconnectedIndicator'),
   sliderGrip: getColor('sliderGrip'),
   areaBorder: getColor('areaBorder'),
+  connected: getColor('connected'),
+  connecting: getColor('connecting'),
+  requested: getColor('requested'),
+  pending: getColor('pending'),
+  confirmed: getColor('confirmed'),
+  offsync: getColor('offsync'),
+  unsaved: getColor('unsaved'),
 
   background: '#8fbea7',
   primary: '#448866',
@@ -182,12 +203,6 @@ export const Colors = {
   active: '#222222',
   idle: '#707070',
 
-  
-  connected: '#4488FF',
-  connecting: '#dd88ff',
-  requested: '#448844',
-  pending: '#ffaa22',
-  confirmed: '#aaaaaa',
   error: '#ff4444',
 
   profileForm: '#e8e8e8',

app/mobile/src/constants/Strings.js

@@ -87,22 +87,22 @@ const Strings = [
     back: 'Back',
 
     confirmed: 'Saved',
-    pending: 'Unknown Contact',
+    pending: 'Unknown',
-    connecting: 'Request Sent',
+    connecting: 'Requested',
     connected: 'Connected',
-    requested: 'Request Received',
+    requested: 'Received',
-    unsaved: 'Unsaved Contact',
+    unsaved: 'Unsaved',
     offsync: 'Offsync',
 
-    saveContact: 'Save Contact',
+    resyncContact: 'Resync',
-    requestConnection: 'Request Connection',
+    requestConnection: 'Request',
-    deleteContact: 'Delete Contact',
+    acceptConnection: 'Accept',
-    blockContact: 'Block Contact',
+    saveContact: 'Save',
-    reportContact: 'Report Contact',
+    cancelRequest: 'Cancel',
-    cancelRequest: 'Cancel Request',
+    ignoreContact: 'Ignore',
-    acceptConnection: 'Accept Connection',
+    deleteContact: 'Delete',
-    ignoreContact: 'Ignore Contact',
+    blockContact: 'Block',
-    resyncContact: 'Resync Contact',
+    reportContact: 'Report',
   },
   {
     visibleRegistry: 'Visible dans le Registre',
@@ -185,6 +185,24 @@ const Strings = [
     //constacts page
     add: 'Ajouter',
     back: 'Arrière',
+
+    confirmed: 'Enregistré',
+    pending: 'Inconnu',
+    connecting: 'Demandé',
+    connected: 'Connecté',
+    requested: 'Reçue',
+    unsaved: 'Non Enregistré',
+    offsync: 'Hors Sync',
+
+    resyncContact: 'Resync',
+    requestConnection: 'Connexion',
+    acceptConnection: 'Accepter',
+    saveContact: 'Enregistrer',
+    cancelRequest: 'Annuler',
+    ignoreContact: 'Ignorer',
+    deleteContact: 'Supprimer',
+    blockContact: 'Bloquer',
+    reportContact: 'Signaler',
   },
   {
     visibleRegistry: 'Visible en el Registro',
@@ -267,6 +285,24 @@ const Strings = [
     // contacts page
     add: 'Agregar', 
     back: 'Atrás',
+
+    confirmed: 'Guardado',
+    pending: 'Desconocido',
+    connecting: 'Conectando',
+    connected: 'Conectado',
+    requested: 'Solicitado',
+    unsaved: 'No Guardado',
+    offsync: 'Fuera de Sync',
+
+    resyncContact: 'Resinc',
+    requestConnection: 'Conectar',
+    acceptConnection: 'Aceptar',
+    saveContact: 'Guardar',
+    cancelRequest: 'Cancelar',
+    ignoreContact: 'Ignorar',
+    deleteContact: 'Borrar',
+    blockContact: 'Bloquear',
+    reportContact: 'Informe',
   },
   {
     visibleRegistry: 'Sichtbar in der Registrierung',
@@ -349,6 +385,24 @@ const Strings = [
     //contacts page
     add: 'Hinzufügen',
     back: 'Rückwärts',
+
+    confirmed: 'Gerettet',
+    pending: 'Unbekannt',
+    connecting: 'Verbinden',
+    connected: 'Beigetreten',
+    requested: 'Angefordert',
+    unsaved: 'Nicht Gespeichert',
+    offsync: 'Nicht Sync',
+
+    resyncContact: 'Neu Sync',
+    requestConnection: 'Verbinden',
+    acceptConnection: 'Akzeptieren',
+    saveContact: 'Speichern',
+    cancelRequest: 'Stornieren',
+    ignoreContact: 'Ignorieren',
+    deleteContact: 'Löschen',
+    blockContact: 'Verstecken',
+    reportContact: 'Bericht',
   }
 ];
 

app/mobile/src/session/contact/Contact.jsx

@@ -332,12 +332,42 @@ export function Contact({ contact, drawer, back }) {
                 <View style={styles.status}>
                   { state.status === 'connected' && (
                     <View style={styles.statusConnected}>
-                      <Text style={styles.statusLabel}>Connected</Text>
+                      <Text numberOfLines={1} style={styles.statusLabel}>{ state.strings.connected }</Text>
                     </View>
                   )}
-                  { state.status !== 'connected' && (
+                  { state.status === 'connecting' && (
-                    <View style={styles.statusConnected}>
+                    <View style={styles.statusConnecting}>
-                      <Text style={styles.statusLabel}>Connected</Text>
+                      <Text numberOfLines={1} style={styles.statusLabel}>{ state.strings.connecting }</Text>
+                    </View>
+                  )}
+                  { state.status === 'requested' && (
+                    <View style={styles.statusRequested}>
+                      <Text numberOfLines={1} style={styles.statusLabel}>{ state.strings.requested }</Text>
+                    </View>
+                  )}
+                  { state.status === 'offsync' && (
+                    <View style={styles.statusOffsync}>
+                      <Text numberOfLines={1} style={styles.statusLabel}>{ state.strings.offsync }</Text>
+                    </View>
+                  )}
+                  { state.status === 'received' && (
+                    <View style={styles.statusReceived}>
+                      <Text numberOfLines={1} style={styles.statusLabel}>{ state.strings.received }</Text>
+                    </View>
+                  )}
+                  { state.status === 'pending' && (
+                    <View style={styles.statusPending}>
+                      <Text numberOfLines={1} style={styles.statusLabel}>{ state.strings.pending }</Text>
+                    </View>
+                  )}
+                  { state.status === 'saved' && (
+                    <View style={styles.statusSaved}>
+                      <Text numberOfLines={1} style={styles.statusLabel}>{ state.strings.saved }</Text>
+                    </View>
+                  )}
+                  { state.status === 'unsaved' && (
+                    <View style={styles.statusUnsaved}>
+                      <Text numberOfLines={1} style={styles.statusLabel}>{ state.strings.unsaved }</Text>
                     </View>
                   )}
                 </View>

app/mobile/src/session/contact/Contact.styled.js

@@ -79,6 +79,7 @@ export const styles = StyleSheet.create({
   username: {
     color: Colors.text,
     fontFamily: 'roboto',
+    flexShrink: 1,
     fontSize: 18,
     paddingLeft: 16,
     paddingRight: 16,
@@ -86,12 +87,12 @@ export const styles = StyleSheet.create({
   usernameStatus: {
     display: 'flex',
     flexDirection: 'row',
-    alignItems: 'center',
+    marginTop: 4,
   },
   status: {
     display: 'flex',
     flexGrow: 1,
-    paddingRight: 32,
+    paddingRight: 16,
     alignItems: 'flex-end',
   },
   statusConnected: {
@@ -100,7 +101,55 @@ export const styles = StyleSheet.create({
     paddingTop: 2,
     paddingBottom: 2,
     borderRadius: 8,
-    backgroundColor: 'yellow',
+    backgroundColor: Colors.connected,
+  },
+  statusConfirmed: {
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 2,
+    paddingBottom: 2,
+    borderRadius: 8,
+    backgroundColor: Colors.confirmed,
+  },
+  statusPending: {
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 2,
+    paddingBottom: 2,
+    borderRadius: 8,
+    backgroundColor: Colors.pending,
+  },
+  statusConnecting: {
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 2,
+    paddingBottom: 2,
+    borderRadius: 8,
+    backgroundColor: Colors.connecting,
+  },
+  statusRequested: {
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 2,
+    paddingBottom: 2,
+    borderRadius: 8,
+    backgroundColor: Colors.requested,
+  },
+  statusUnsaved: {
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 2,
+    paddingBottom: 2,
+    borderRadius: 8,
+    backgroundColor: Colors.unsaved,
+  },
+  statusOffysnc: {
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 2,
+    paddingBottom: 2,
+    borderRadius: 8,
+    backgroundColor: Colors.offsync,
   },
   statusLabel: {
     color: Colors.text,
@@ -110,7 +159,7 @@ export const styles = StyleSheet.create({
     marginRight: 16,
     backgroundColor: Colors.areaBase,
     borderRadius: 8,
-    marginTop: 32,
+    marginTop: 24,
     display: 'flex',
     flexShrink: 1,
   },

app/mobile/src/session/contact/useContact.hook.js

@@ -60,7 +60,8 @@ export function useContact(contact) {
       
       const username = `${handle}/${node}`
       const imageSource = imageSet ? { uri: card.actions.getCardImageUrl(cardId) } : avatar;
-      updateState({ offsync, name, handle, node: server, location, description, imageSource, username, cardId, guid, status: detail.status });
+      const status = offsync ? 'offsync' : detail.status;
+      updateState({ name, handle, node: server, location, description, imageSource, username, cardId, guid, status });
     }
     else {
       const { guid, handle, node, name, location, description, imageSet } = contact || {};
@@ -68,7 +69,7 @@ export function useContact(contact) {
       
       const username = `${handle}/${node}`
       const imageSource = imageSet ? { uri: getListingImageUrl(server, guid) } : avatar;
-      updateState({ guid, handle, node: host, name, location, description, imageSource, username, offsync: false, status: null });
+      updateState({ guid, handle, node: host, name, location, description, imageSource, username, offsync: false, status: 'unsaved' });
     }
   }, [contact, card.state, profile.state]);