From 330b98f835e8c7481e7581dc35a2d42be206f0d9 Mon Sep 17 00:00:00 2001 From: Roland Osborne Date: Sun, 25 Feb 2024 09:21:26 -0800 Subject: [PATCH] adding a card view --- net/web/src/constants/Strings.js | 26 +++++- net/web/src/session/Session.jsx | 2 +- net/web/src/session/account/Account.jsx | 2 +- net/web/src/session/cards/Cards.jsx | 18 ++-- net/web/src/session/cards/Cards.styled.js | 86 +++++++++---------- .../src/session/cards/cardItem/CardItem.jsx | 25 +++--- .../session/cards/cardItem/CardItem.styled.js | 9 +- net/web/src/session/cards/useCards.hook.js | 6 +- net/web/src/session/channels/Channels.jsx | 4 +- .../src/session/channels/Channels.styled.js | 1 + 10 files changed, 98 insertions(+), 81 deletions(-) diff --git a/net/web/src/constants/Strings.js b/net/web/src/constants/Strings.js index 2f19d72d..e345e212 100644 --- a/net/web/src/constants/Strings.js +++ b/net/web/src/constants/Strings.js @@ -10,6 +10,7 @@ export const en = { ok: 'OK', cancel: 'Cancel', + new: 'New', newMessage: 'New Message', topics: 'Topics', unsetSealing: 'Unset Sealing Key', @@ -33,6 +34,7 @@ export const en = { operationFailed: 'Operation Failed', tryAgain: 'Please try again.', + add: 'Add', save: 'Save', forget: 'Forget', unlock: 'Unlock', @@ -53,7 +55,7 @@ export const en = { registry: 'Visible in Registry', sealedTopics: 'Sealed Topics', changeLogin: 'Change Login', - selectImage: 'Select Image', + selectImage: 'Select', profileImage: 'Profile Image', profileDetails: 'Profile Details', enableSealed: 'Enabled Sealed Topics', @@ -64,6 +66,15 @@ export const en = { delete: 'delete', username: 'Username', updateProfile: 'Update Profile', + + syncError: 'Sync Error', + callTip: 'Call Contact', + messageTip: 'Message Contact', + connectedTip: 'Connected Contact', + requestedTip: 'Connection Requested by Contact', + connectingTip: 'Connection Requested', + pendingTip: 'Connection Requested by Unknown Contact', + confirmedTip: 'Disconnected Contact', }; export const fr = { @@ -78,6 +89,7 @@ export const fr = { ok: 'OK', cancel: 'Annuler', + new: 'Nouveau', newMessage: 'Nouveau Message', topics: 'Sujets', unsetSealing: 'Clé de sécurité non définie', @@ -101,6 +113,7 @@ export const fr = { operationFailed: 'Opération Échouée', tryAgain: 'Veuillez réessayer.', + add: 'Ajouter', save: 'Enregistrer', forget: 'Oublier', unlock: 'Déverrouiller', @@ -121,7 +134,7 @@ export const fr = { registry: 'Visible dans le Registre', sealedTopics: 'Sujets Sécurisé', changeLogin: 'Changer Identifiants', - selectImage: 'Sélectionner une Image', + selectImage: 'Sélectionner', profileImage: 'Image de Profil', profileDetails: 'Détails du Profil', enableSealed: 'Activer les Sujets Sécurisé', @@ -132,5 +145,14 @@ export const fr = { delete: 'supprimer', username: 'Nom d\'Utilisateur', updateProfile: 'Mettre à Jour le Profil', + + 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é' }; diff --git a/net/web/src/session/Session.jsx b/net/web/src/session/Session.jsx index c625979a..b0f2fde0 100644 --- a/net/web/src/session/Session.jsx +++ b/net/web/src/session/Session.jsx @@ -158,7 +158,7 @@ export function Session() { actions.closeDetails(); } - const drawerStyle = { padding: 0, backgroundColor: settings.state.colors.baseArea }; + const drawerStyle = { overscrollBehavior: 'none', padding: 0, backgroundColor: settings.state.colors.baseArea }; return ( diff --git a/net/web/src/session/account/Account.jsx b/net/web/src/session/account/Account.jsx index 90589d3c..baaa5481 100644 --- a/net/web/src/session/account/Account.jsx +++ b/net/web/src/session/account/Account.jsx @@ -6,7 +6,7 @@ import { useAccount } from './useAccount.hook'; export function Account({ closeAccount, openProfile }) { - const { state, actions } = useAccount(); + const { state } = useAccount(); return ( diff --git a/net/web/src/session/cards/Cards.jsx b/net/web/src/session/cards/Cards.jsx index b73367a8..e8a728fc 100644 --- a/net/web/src/session/cards/Cards.jsx +++ b/net/web/src/session/cards/Cards.jsx @@ -17,9 +17,9 @@ export function Cards({ closeCards, openContact, openChannel, openListing }) { catch (err) { console.log(err); modal.error({ - title: 'Failed to Create Topic', - content: 'Please try again.', - bodyStyle: { padding: 16 }, + title: {state.strings.operationFailed}, + content: {state.strings.tryAgain}, + bodyStyle: { borderRadius: 8, padding: 16, ...state.menuStyle }, }); }; }; @@ -31,9 +31,9 @@ export function Cards({ closeCards, openContact, openChannel, openListing }) { catch (err) { console.log(err); modal.error({ - title: 'Failed to Start Call', - content: 'Please try again.', - bodyStyle: { padding: 16 }, + title: {state.strings.operationFailed}, + content: {state.strings.tryAgain}, + bodyStyle: { borderRadius: 8, padding: 16, ...state.menuStyle }, }); }; }; @@ -53,11 +53,11 @@ export function Cards({ closeCards, openContact, openChannel, openListing }) { )}
- } + } spellCheck="false" onChange={(e) => actions.onFilter(e.target.value)} />
- +
{ state.display === 'xlarge' && (
@@ -72,7 +72,7 @@ export function Cards({ closeCards, openContact, openChannel, openListing }) { ( actions.resync(item.cardId)} - open={() => openContact(item.guid)} message={() => message(item.cardId)} + open={() => openContact(item.guid)} message={() => message(item.cardId)} strings={state.strings} call={() => call(item)} display={state.display} canMessage={state.allowUnsealed || (item.seal && state.sealable)} /> )} /> )} diff --git a/net/web/src/session/cards/Cards.styled.js b/net/web/src/session/cards/Cards.styled.js index 9fa42a5f..6e45f1a2 100644 --- a/net/web/src/session/cards/Cards.styled.js +++ b/net/web/src/session/cards/Cards.styled.js @@ -6,7 +6,8 @@ export const CardsWrapper = styled.div` width: 100%; display: flex; flex-direction: column; - background-color: ${Colors.card}; + background-color: ${props => props.theme.itemArea}; + color: ${props => props.theme.mainText}; .view { min-height: 0; @@ -18,23 +19,48 @@ export const CardsWrapper = styled.div` align-items: center; justify-content: center; font-style: italic; - color: ${Colors.grey}; + color: ${props => props.theme.hintText}; height: 100%; } } .search { - border-bottom: 1px solid ${Colors.divider}; - display: flex; - flex-direction: row; - height: 48px; - padding-left: 16px; - padding-right: 16px; padding-top: 8px; padding-bottom: 8px; + padding-left: 16px; + padding-right: 16px; + border-bottom: 1px solid ${props => props.theme.sectionBorder}; + display: flex; + flex-direction: row; + + .filter { + border: 1px solid ${props => props.theme.sectionBorder}; + background-color: ${props => props.theme.inputArea}; + border-radius: 8px; + flex-grow: 1; + + .filterControl { + color: ${props => props.theme.mainText}; + + input { + padding-left: 4px; + color: ${props => props.theme.mainText}; + } + + input::placeholder { + color: ${props => props.theme.placeholderText}; + } + } + } + + .dismiss { + font-size: 18px; + color: ${props => props.theme.hintText}; + cursor: pointer; + } .sorted { - color: ${Colors.enabled}; + color: ${props => props.theme.mainText}; font-size: 18px; padding-right: 8px; display: flex; @@ -43,7 +69,7 @@ export const CardsWrapper = styled.div` } .unsorted { - color: ${Colors.disabled}; + color: ${props => props.theme.hintText}; font-size: 18px; padding-right: 8px; display: flex; @@ -51,14 +77,6 @@ export const CardsWrapper = styled.div` cursor: pointer; } - - .filter { - border: 1px solid ${Colors.divider}; - background-color: ${Colors.white}; - border-radius: 8px; - flex-grow: 1; - } - .inline { padding-left: 8px; display: flex; @@ -69,32 +87,10 @@ export const CardsWrapper = styled.div` align-items: center; justify-content: center; - .add { - display: flex; - flex-direction: row; - color: ${Colors.white}; - background-color: ${Colors.primary}; - align-items: center; - justify-content: center; - padding-left: 16px; - padding-right: 16px; - border-radius: 4px; - font-size: 14px; - cursor: pointer; - height: 100%; - flex-shrink: 0; - - .label { - padding-left: 8px; - } + .anticon { + color: ${props => props.theme.enabledText}; } } - - .dismiss { - font-size: 18px; - color: ${Colors.text}; - cursor: pointer; - } } .bar { @@ -105,8 +101,8 @@ export const CardsWrapper = styled.div` flex-direction: row; align-items: center; justify-content: center; - background-color: ${Colors.formBackground}; - border-top: 1px solid ${Colors.divider}; + background-color: ${props => props.theme.enabledArea}; + border-top: 1px solid ${props => props.theme.sectionBorder}; padding-bottom: 12px; padding-top: 12px; position: relative; @@ -114,7 +110,7 @@ export const CardsWrapper = styled.div` .add { display: flex; flex-direction: row; - color: ${Colors.primary}; + color: ${props => props.theme.mainText}; align-items: center; justify-content: center; padding-left: 16px; diff --git a/net/web/src/session/cards/cardItem/CardItem.jsx b/net/web/src/session/cards/cardItem/CardItem.jsx index 0f752c5b..0bf9e93b 100644 --- a/net/web/src/session/cards/cardItem/CardItem.jsx +++ b/net/web/src/session/cards/cardItem/CardItem.jsx @@ -6,7 +6,7 @@ import { Logo } from 'logo/Logo'; import { Tooltip } from 'antd'; import { MessageOutlined, PhoneOutlined, ExclamationCircleOutlined } from '@ant-design/icons'; -export function CardItem({ item, tooltip, enableIce, resync, open, call, message, display, canMessage }) { +export function CardItem({ item, tooltip, enableIce, resync, open, call, message, display, canMessage, strings }) { const onResync = (e) => { e.stopPropagation(); @@ -31,13 +31,8 @@ export function CardItem({ item, tooltip, enableIce, resync, open, call, message
{ item.handle }
- { item.offsync && !item.tooltip && ( - - - - )} - { item.offsync && item.tooltip && ( - + { item.offsync && ( + @@ -60,39 +55,39 @@ export function CardItem({ item, tooltip, enableIce, resync, open, call, message { item.status === 'connected' && display !== 'small' && ( { canMessage && ( - + )} { enableIce && ( - + )} )} { item.status === 'connected' && ( - + )} { item.status === 'requested' && ( - + )} { item.status === 'connecting' && ( - + )} { item.status === 'pending' && ( - + )} { item.status === 'confirmed' && ( - + )} diff --git a/net/web/src/session/cards/cardItem/CardItem.styled.js b/net/web/src/session/cards/cardItem/CardItem.styled.js index 3c961cfd..57f00c02 100644 --- a/net/web/src/session/cards/cardItem/CardItem.styled.js +++ b/net/web/src/session/cards/cardItem/CardItem.styled.js @@ -6,12 +6,13 @@ export const CardItemWrapper = styled.div` width: 100%; display: flex; align-items: center; - border-bottom: 1px solid ${Colors.divider}; + border-bottom: 1px solid ${props => props.theme.itemBorder}; + color: ${props => props.theme.mainText}; padding-left: 16px; padding-right: 16px; &:hover { - background-color: ${Colors.formHover}; + background-color: ${props => props.theme.hoverArea}; cursor: pointer; } @@ -50,13 +51,13 @@ export const CardItemWrapper = styled.div` `; export const StatusError = styled.div` - color: ${Colors.error}; + color: ${props => props.theme.alertText}; font-size: 14px; padding-right: 12px; ` export const ComOptions = styled.div` - color: ${Colors.primary}; + color: ${props => props.theme.linkText}; font-size: 16px; display: flex; flex-direction: row; diff --git a/net/web/src/session/cards/useCards.hook.js b/net/web/src/session/cards/useCards.hook.js index 4420ae43..0a40f2f7 100644 --- a/net/web/src/session/cards/useCards.hook.js +++ b/net/web/src/session/cards/useCards.hook.js @@ -17,6 +17,8 @@ export function useCards() { display: 'small', enableIce: false, sealable: false, + strings: {}, + menuStyle: {}, allowUnsealed: false, cards: [], }); @@ -33,8 +35,8 @@ export function useCards() { } useEffect(() => { - const { display } = settings.state; - updateState({ display }); + const { display, strings, menuStyle } = settings.state; + updateState({ display, strings, menuStyle }); }, [settings.state]); useEffect(() => { diff --git a/net/web/src/session/channels/Channels.jsx b/net/web/src/session/channels/Channels.jsx index 8c9a6069..77987d01 100644 --- a/net/web/src/session/channels/Channels.jsx +++ b/net/web/src/session/channels/Channels.jsx @@ -18,12 +18,12 @@ export function Channels({ open, active }) {
- } + } spellCheck="false" onChange={(e) => actions.onFilter(e.target.value)} />
{ state.display === 'small' && (
- +
)}
diff --git a/net/web/src/session/channels/Channels.styled.js b/net/web/src/session/channels/Channels.styled.js index 4ca9c543..684b44cf 100644 --- a/net/web/src/session/channels/Channels.styled.js +++ b/net/web/src/session/channels/Channels.styled.js @@ -38,6 +38,7 @@ export const ChannelsWrapper = styled.div` border-radius: 8px; flex-grow: 1; + .filterControl { color: ${props => props.theme.mainText};