From ee3e528337bc81e946425216205deea8fd6183b0 Mon Sep 17 00:00:00 2001 From: Roland Osborne Date: Wed, 28 Feb 2024 15:04:43 -0800 Subject: [PATCH] adding translations to contact component --- net/web/src/constants/Colors.js | 15 ++- net/web/src/constants/Strings.js | 54 ++++++-- net/web/src/session/contact/Contact.jsx | 118 +++++++++++------- net/web/src/session/contact/Contact.styled.js | 47 +++++++ .../src/session/contact/useContact.hook.js | 15 +-- 5 files changed, 181 insertions(+), 68 deletions(-) diff --git a/net/web/src/constants/Colors.js b/net/web/src/constants/Colors.js index a1643551..681341d3 100644 --- a/net/web/src/constants/Colors.js +++ b/net/web/src/constants/Colors.js @@ -20,7 +20,8 @@ export const Colors = { link: '#0077CC', itemDivider: '#eeeeee', - + + unsaved: '#ffff00', connected: '#44cc44', connecting: '#dd88ff', requested: '#4488ff', @@ -66,6 +67,12 @@ export const LightTheme = { sectionBorder: '#bbbbbb', headerBorder: '#aaaaaa', drawerBorder: '#cccccc', + unsaved: '#ffff00', + connected: '#44cc44', + connecting: '#dd88ff', + requested: '#4488ff', + pending: '#22aaaa', + confirmed: '#aaaaaa', }; export const DarkTheme = { @@ -96,5 +103,11 @@ export const DarkTheme = { sectionBorder: '#777777', headerBorder: '#aaaaaa', drawerBorder: '#444444', + unsaved: '#ffff00', + connected: '#44cc44', + connecting: '#dd88ff', + requested: '#4488ff', + pending: '#22aaaa', + confirmed: '#aaaaaa', }; diff --git a/net/web/src/constants/Strings.js b/net/web/src/constants/Strings.js index e345e212..92cfeecd 100644 --- a/net/web/src/constants/Strings.js +++ b/net/web/src/constants/Strings.js @@ -22,7 +22,7 @@ export const en = { sealedTopic: 'Sealed Topic', start: 'Start', - communication: 'Communication for the decentralized web', + communication: 'Communication for the Decentralized Web', setupProfile: 'Setup your profile', connectPeople: 'Connect with people', startConversation: 'Start a conversation', @@ -42,6 +42,7 @@ export const en = { application: 'Application', account: 'Account', name: 'Name', + node: 'Node', location: 'Location', description: 'Description', timeFormat: 'Time Format', @@ -64,6 +65,7 @@ export const en = { confirmPassword: 'Confirm Password', deleteKey: 'Type \'delete\' to remove key', delete: 'delete', + remove: 'Delete', username: 'Username', updateProfile: 'Update Profile', @@ -75,6 +77,22 @@ export const en = { connectingTip: 'Connection Requested', pendingTip: 'Connection Requested by Unknown Contact', confirmedTip: 'Disconnected Contact', + unsavedTip: 'Unknown Contact', + + actions: 'Actions', + resync: 'Resync', + connect: 'Connect', + disconnect: 'Disconnect', + disconnectContact: 'Disconnect Contact', + deleteContact: 'Delete Contact', + saveContact: 'Save Contact', + saveAccept: 'Save and Accept Connection', + saveRequest: 'Save and Request Connection', + ignoreRequest: 'Ignore Request', + acceptConnection: 'Accept Connection', + requestConnection: 'Request Connection', + cancelRequest: 'Cancel Request', + resyncContact: 'Resync Contact', }; export const fr = { @@ -101,7 +119,7 @@ export const fr = { sealedTopic: 'Sujet Sécurisé', start: 'Commencer', - communication: 'Communication pour le web décentralisé', + communication: 'Communication pour le Web Décentralisé', setupProfile: 'Configurez votre profil', connectPeople: 'Connectez avec les gens', startConversation: 'Commencez une conversation', @@ -121,6 +139,7 @@ export const fr = { application: 'Application', account: 'Compte', name: 'Nom', + node: 'Serveur', location: 'Emplacement', description: 'Description', timeFormat: 'Format de l\'heure', @@ -143,16 +162,33 @@ export const fr = { confirmPassword: 'Confirmer le Mot de Passe', deleteKey: 'Tapez \'supprimer\' pour supprimer la clé', delete: 'supprimer', + remove: 'Supprimer', username: 'Nom d\'Utilisateur', updateProfile: 'Mettre à Jour le Profil', - syncError: 'Erreur de synchronisation', + syncError: 'Erreur de Synchronisation', callTip: 'Appeler le Contact', - messageTip: 'Envoyer un message au contact', - connectedTip: 'Contact connecté', - requestedTip: 'Demande de connexion envoyée par le contact', - connectingTip: 'Demande de connexion en cours', - pendingTip: 'Demande de connexion envoyée par un contact inconnu', - confirmedTip: 'Contact déconnecté' + messageTip: 'Envoyer un Message au Contact', + connectedTip: 'Contact Connecté', + requestedTip: 'Demande de Connexion Envoyée par le Contact', + connectingTip: 'Demande de Connexion en Cours', + pendingTip: 'Demande de Connexion Envoyée par un Contact Inconnu', + confirmedTip: 'Contact Déconnecté', + unsavedTip: 'Contact Inconnu', + + actions: 'Actions', + resync: 'Resynchroniser', + connect: 'Connecter', + disconnect: 'Déconnecter', + disconnectContact: 'Déconnecter le Contact', + deleteContact: 'Supprimer le Contact', + saveContact: 'Enregistrer le Contact', + saveAccept: 'Enregistrer et Accepter la Connexion', + saveRequest: 'Enregistrer et Demander la Connexion', + ignoreRequest: 'Ignorer la Demande', + acceptConnection: 'Accepter la Connexion', + requestConnection: 'Demander une Connexion', + cancelRequest: 'Annuler la Demande', + resyncContact: 'Resynchroniser le Contact', }; diff --git a/net/web/src/session/contact/Contact.jsx b/net/web/src/session/contact/Contact.jsx index e68a2cb0..94f84946 100644 --- a/net/web/src/session/contact/Contact.jsx +++ b/net/web/src/session/contact/Contact.jsx @@ -1,5 +1,5 @@ import { Modal, Button, Tooltip } from 'antd'; -import { ContactWrapper } from './Contact.styled'; +import { StatusConnected, StatusRequested, StatusConnecting, StatusPending, StatusConfirmed, StatusUnsaved, ContactWrapper } from './Contact.styled'; import { useContact } from './useContact.hook'; import { Logo } from 'logo/Logo'; import { SyncOutlined, UserAddOutlined, UserDeleteOutlined, UserSwitchOutlined, StopOutlined, DeleteOutlined, DatabaseOutlined, CloseOutlined, BookOutlined, EnvironmentOutlined } from '@ant-design/icons'; @@ -9,9 +9,6 @@ export function Contact({ close, guid, listing }) { const [ modal, modalContext ] = Modal.useModal(); const { state, actions } = useContact(guid, listing, close); -console.log(state.busy); - - const updateContact = async (action) => { try { await action(); @@ -54,7 +51,7 @@ console.log(state.busy);
{ state.name }
)} { !state.name && ( -
Name
+
{ state.strings.name }
)} { state.node && ( @@ -69,7 +66,7 @@ console.log(state.busy);
{ state.location }
)} { !state.location && ( -
Location
+
{ state.strings.location }
)}
@@ -78,91 +75,124 @@ console.log(state.busy);
{ state.description }
)} { !state.description && ( -
Description
+
{ state.strings.description }
)}
-
Actions
+
{ state.strings.actions }
{ state.status === 'connected' && ( - - + + )} { state.status === 'connected' && ( - - + + )} { state.status === 'pending' && ( - - + + )} { state.status === 'pending' && ( - - + + )} { state.status === 'pending' && ( - - + + )} - { state.status === 'request received' && ( - - + { state.status === 'requested' && ( + + )} - { state.status === 'request received' && ( - - + { state.status === 'requested' && ( + + )} - { state.status === 'request sent' && ( + { state.status === 'connecting' && ( - + )} - { state.status === 'request sent' && ( - - + { state.status === 'connecting' && ( + + )} - { state.status === 'saved' && ( - - + { state.status === 'confirmed' && ( + + )} - { state.status === 'saved' && ( - - + { state.status === 'confirmed' && ( + + )} { state.status === 'unsaved' && ( - - + + )} { state.status === 'unsaved' && ( - - + + )} { state.offsync && ( - - + + )}
-
-
Status: { state.status }
-
+ { state.status === 'connected' && ( +
+ +
{state.strings.connectedTip}
+
+ )} + { state.status === 'requested' && ( +
+ +
{state.strings.requestedTip}
+
+ )} + { state.status === 'connecting' && ( +
+ +
{state.strings.connectingTip}
+
+ )} + { state.status === 'pending' && ( +
+ +
{state.strings.pendingTip}
+
+ )} + { state.status === 'confirmed' && ( +
+ +
{state.strings.confirmedTip}
+
+ )} + { state.status === 'unsaved' && ( +
+ +
{state.strings.unsavedTip}
+
+ )} ); diff --git a/net/web/src/session/contact/Contact.styled.js b/net/web/src/session/contact/Contact.styled.js index da7ddfcc..baa58f9b 100644 --- a/net/web/src/session/contact/Contact.styled.js +++ b/net/web/src/session/contact/Contact.styled.js @@ -208,6 +208,8 @@ export const ContactWrapper = styled.div` display: flex; flex-direction: row; gap: 16px; + flex-wrap: wrap; + justify-content: space-evenly; .button { display: flex; @@ -241,6 +243,51 @@ export const ContactWrapper = styled.div` justify-content: center; padding-bottom: 16px; color: ${props => props.theme.hintText}; + align-items: center; + gap: 8px; } ` +export const StatusConnected = styled.div` + background-color: ${props => props.theme.connected}; + border-radius: 8px; + width: 8px; + height: 8px; +`; + +export const StatusConnecting = styled.div` + background-color: ${props => props.theme.connecting}; + border-radius: 8px; + width: 8px; + height: 8px; +`; + +export const StatusRequested = styled.div` + background-color: ${props => props.theme.requested}; + border-radius: 8px; + width: 8px; + height: 8px; +`; + +export const StatusPending = styled.div` + background-color: ${props => props.theme.pending}; + border-radius: 8px; + width: 8px; + height: 8px; +`; + +export const StatusConfirmed = styled.div` + background-color: ${props => props.theme.confirmed}; + border-radius: 8px; + width: 8px; + height: 8px; +`; + +export const StatusUnsaved = styled.div` + background-color: ${props => props.theme.unsaved}; + border-radius: 8px; + width: 8px; + height: 8px; +`; + + diff --git a/net/web/src/session/contact/useContact.hook.js b/net/web/src/session/contact/useContact.hook.js index b5764e14..9b84d84c 100644 --- a/net/web/src/session/contact/useContact.hook.js +++ b/net/web/src/session/contact/useContact.hook.js @@ -30,26 +30,13 @@ export function useContact(guid, listing, close) { setState((s) => ({ ...s, ...value })); } - const statusMap = (status) => { - if (status === 'confirmed') { - return 'saved'; - } - if (status === 'requested') { - return 'request received'; - } - if (status === 'connecting') { - return 'request sent'; - } - return status; - } - useEffect(() => { const contact = getCardByGuid(card.state.cards, guid); if (contact) { const profile = contact?.data?.cardProfile; const detail = contact?.data?.cardDetail; const { imageSet, name, location, description, handle, node } = profile; - const status = statusMap(detail.status); + const status = detail.status; const cardId = contact.id; const offsync = contact.offsync; const logo = imageSet ? card.actions.getCardImageUrl(cardId) : null;