building refactored contacts screen

2025-02-11 19:19:16 +00:00 · 2023-09-18 23:08:26 -07:00 · 2023-09-18 23:08:26 -07:00 · 7eb88452d1
commit 7eb88452d1
parent 35e1b55685
5 changed files with 178 additions and 29 deletions
--- a/app/mobile/src/constants/Colors.js
+++ b/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',
--- a/app/mobile/src/constants/Strings.js
+++ b/app/mobile/src/constants/Strings.js
@ -87,22 +87,22 @@ const Strings = [
    back: 'Back',

    confirmed: 'Saved',
-    pending: 'Unknown Contact',
-    connecting: 'Request Sent',
+    pending: 'Unknown',
+    connecting: 'Requested',
    connected: 'Connected',
-    requested: 'Request Received',
-    unsaved: 'Unsaved Contact',
+    requested: 'Received',
+    unsaved: 'Unsaved',
    offsync: 'Offsync',

-    saveContact: 'Save Contact',
-    requestConnection: 'Request Connection',
-    deleteContact: 'Delete Contact',
-    blockContact: 'Block Contact',
-    reportContact: 'Report Contact',
-    cancelRequest: 'Cancel Request',
-    acceptConnection: 'Accept Connection',
-    ignoreContact: 'Ignore Contact',
-    resyncContact: 'Resync Contact',
+    resyncContact: 'Resync',
+    requestConnection: 'Request',
+    acceptConnection: 'Accept',
+    saveContact: 'Save',
+    cancelRequest: 'Cancel',
+    ignoreContact: 'Ignore',
+    deleteContact: 'Delete',
+    blockContact: 'Block',
+    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',
  }
 ];

--- a/app/mobile/src/session/contact/Contact.jsx
+++ b/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' && (
-                    <View style={styles.statusConnected}>
-                      <Text style={styles.statusLabel}>Connected</Text>
+                  { state.status === 'connecting' && (
+                    <View style={styles.statusConnecting}>
+                      <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>
--- a/app/mobile/src/session/contact/Contact.styled.js
+++ b/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,
  },
--- a/app/mobile/src/session/contact/useContact.hook.js
+++ b/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]);