From 7eb88452d10c46af7fb8876ec631b9c2696d0280 Mon Sep 17 00:00:00 2001 From: balzack Date: Mon, 18 Sep 2023 23:08:26 -0700 Subject: [PATCH] building refactored contacts screen --- app/mobile/src/constants/Colors.js | 27 +++++-- app/mobile/src/constants/Strings.js | 80 ++++++++++++++++--- app/mobile/src/session/contact/Contact.jsx | 38 ++++++++- .../src/session/contact/Contact.styled.js | 57 ++++++++++++- .../src/session/contact/useContact.hook.js | 5 +- 5 files changed, 178 insertions(+), 29 deletions(-) diff --git a/app/mobile/src/constants/Colors.js b/app/mobile/src/constants/Colors.js index 6ab4b5cf..7d6092f9 100644 --- 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', diff --git a/app/mobile/src/constants/Strings.js b/app/mobile/src/constants/Strings.js index e2b7d6e9..7d724a5f 100644 --- 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', } ]; diff --git a/app/mobile/src/session/contact/Contact.jsx b/app/mobile/src/session/contact/Contact.jsx index dadeacf1..695460a5 100644 --- 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 }) { { state.status === 'connected' && ( - Connected + { state.strings.connected } )} - { state.status !== 'connected' && ( - - Connected + { state.status === 'connecting' && ( + + { state.strings.connecting } + + )} + { state.status === 'requested' && ( + + { state.strings.requested } + + )} + { state.status === 'offsync' && ( + + { state.strings.offsync } + + )} + { state.status === 'received' && ( + + { state.strings.received } + + )} + { state.status === 'pending' && ( + + { state.strings.pending } + + )} + { state.status === 'saved' && ( + + { state.strings.saved } + + )} + { state.status === 'unsaved' && ( + + { state.strings.unsaved } )} diff --git a/app/mobile/src/session/contact/Contact.styled.js b/app/mobile/src/session/contact/Contact.styled.js index 0166dd5c..60d5a5c6 100644 --- 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, }, diff --git a/app/mobile/src/session/contact/useContact.hook.js b/app/mobile/src/session/contact/useContact.hook.js index eed85166..7bbd9a25 100644 --- 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]);