mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
Merge pull request #1937 from Bilb/hover-ip-o-onion-dialog
show ip of onion path on hover of country name
This commit is contained in:
commit
6de594b44d
|
@ -2,7 +2,7 @@
|
|||
"name": "session-desktop",
|
||||
"productName": "Session",
|
||||
"description": "Private messaging from your desktop",
|
||||
"version": "1.7.2",
|
||||
"version": "1.7.3",
|
||||
"license": "GPL-3.0",
|
||||
"author": {
|
||||
"name": "Loki Project",
|
||||
|
|
|
@ -1094,7 +1094,8 @@ input {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: $session-margin-sm;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
min-width: 10vw;
|
||||
position: relative;
|
||||
|
||||
.onion__node {
|
||||
|
@ -1121,6 +1122,7 @@ input {
|
|||
}
|
||||
.onion__node__country {
|
||||
margin: $session-margin-sm;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.onion__growing-icon {
|
||||
|
|
|
@ -19,6 +19,8 @@ import { Flex } from '../basic/Flex';
|
|||
import { SessionIcon, SessionIconButton } from '../session/icon';
|
||||
import { SessionSpinner } from '../session/SessionSpinner';
|
||||
import { SessionWrapperModal } from '../session/SessionWrapperModal';
|
||||
// tslint:disable-next-line: no-submodule-imports
|
||||
import useHover from 'react-use/lib/useHover';
|
||||
|
||||
export type StatusLightType = {
|
||||
glowStartDelay: number;
|
||||
|
@ -26,6 +28,25 @@ export type StatusLightType = {
|
|||
color?: string;
|
||||
};
|
||||
|
||||
const OnionCountryDisplay = ({
|
||||
index,
|
||||
labelText,
|
||||
snodeIp,
|
||||
}: {
|
||||
snodeIp?: string;
|
||||
labelText: string;
|
||||
index: number;
|
||||
}) => {
|
||||
const element = (hovered: boolean) => (
|
||||
<div className="onion__node__country" key={`country-${index}`}>
|
||||
{hovered && snodeIp ? snodeIp : labelText}
|
||||
</div>
|
||||
);
|
||||
const [hoverable] = useHover(element);
|
||||
|
||||
return hoverable;
|
||||
};
|
||||
|
||||
const OnionPathModalInner = () => {
|
||||
const onionPath = useSelector(getFirstOnionPath);
|
||||
const isOnline = useSelector(getIsOnline);
|
||||
|
@ -69,14 +90,12 @@ const OnionPathModalInner = () => {
|
|||
{nodes.map((snode: Snode | any, index: number) => {
|
||||
let labelText = snode.label
|
||||
? snode.label
|
||||
: `${countryLookup.byIso(ip2country(snode.ip))?.country} [${snode.ip}]`;
|
||||
: `${countryLookup.byIso(ip2country(snode.ip))?.country}`;
|
||||
if (!labelText) {
|
||||
labelText = window.i18n('unknownCountry');
|
||||
}
|
||||
return labelText ? (
|
||||
<div className="onion__node__country" key={`country-${index}`}>
|
||||
{labelText}
|
||||
</div>
|
||||
<OnionCountryDisplay index={index} labelText={labelText} snodeIp={snode.ip} />
|
||||
) : null;
|
||||
})}
|
||||
</Flex>
|
||||
|
|
Loading…
Reference in a new issue