Merge pull request #1737 from oxen-io/clearnet

Fix clear data with loading spinner and add a line on onion path modal
pull/1998/head
Audric Ackermann 4 years ago committed by GitHub
commit c9ce0114e2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -5,15 +5,15 @@
"contentProxyUrl": "",
"seedNodeList": [
{
"ip_url": "http://116.203.53.213:4433/",
"ip_url": "https://116.203.53.213:4433/",
"url": "https://storage.seed1.loki.network:4433/"
},
{
"ip_url": "http://212.199.114.66:4433/",
"ip_url": "https://212.199.114.66:4433/",
"url": "https://storage.seed3.loki.network:4433/"
},
{
"ip_url": "http://144.76.164.202:4433/",
"ip_url": "https://144.76.164.202:4433/",
"url": "https://public.loki.foundation:4433/"
}
],

@ -470,6 +470,7 @@ label {
}
&__close > div {
float: left;
padding: $session-margin-xs;
margin: 0px;
}
&__icons > div {
@ -1203,6 +1204,7 @@ input {
flex-direction: column;
margin: $session-margin-sm;
align-items: flex-start;
position: relative;
.onion__node {
display: flex;
@ -1210,14 +1212,41 @@ input {
align-items: center;
margin: $session-margin-xs;
* {
margin: $session-margin-sm;
&:nth-child(2) {
margin-top: 0;
}
&:nth-last-child(2) {
margin-bottom: 0;
}
.session-icon-button {
margin: $session-margin-sm !important;
}
}
.onion__node-list-lights {
position: relative;
}
.onion__node__country {
margin: $session-margin-sm;
}
.onion__growing-icon {
flex-grow: 1;
display: flex;
align-items: center;
}
.onion__vertical-line {
background: $onionPathLineColor;
position: absolute;
height: calc(100% - 2 * 15px);
margin: 15px calc(100% / 2 - 1px);
width: 1px;
// z-index: -1;
}
}
.session-nickname-wrapper {

@ -11,6 +11,8 @@ $borderLightTheme: #f1f1f1; // search for references on ts TODO: make this expos
$borderDarkTheme: rgba($white, 0.06);
$inputBackgroundColor: #8e8e93;
$onionPathLineColor: rgba(#7a7a7a, 0.6);
$borderAvatarColor: unquote(
'#00000059'
); // search for references on ts TODO: make this exposed on ts

@ -8,7 +8,6 @@ import Electron from 'electron';
const { shell } = Electron;
import { useDispatch, useSelector } from 'react-redux';
import { StateType } from '../state/reducer';
import { SessionIcon, SessionIconButton, SessionIconSize, SessionIconType } from './session/icon';
import { SessionWrapperModal } from './session/SessionWrapperModal';
@ -27,6 +26,7 @@ import {
// tslint:disable-next-line: no-submodule-imports
import useNetworkState from 'react-use/lib/useNetworkState';
import { SessionSpinner } from './session/SessionSpinner';
import { Flex } from './basic/Flex';
export type StatusLightType = {
glowStartDelay: number;
@ -56,53 +56,57 @@ const OnionPathModalInner = () => {
<>
<p className="onion__description">{window.i18n('onionPathIndicatorDescription')}</p>
<div className="onion__node-list">
{nodes.map((snode: Snode | any, index: number) => {
return (
<OnionNodeStatusLight
glowDuration={glowDuration}
glowStartDelay={index}
label={snode.label}
snode={snode}
key={index}
/>
);
})}
<Flex container={true}>
<div className="onion__node-list-lights">
<div className="onion__vertical-line" />
<Flex container={true} flexDirection="column" alignItems="center" height="100%">
{nodes.map((_snode: Snode | any, index: number) => {
return (
<OnionNodeStatusLight
glowDuration={glowDuration}
glowStartDelay={index}
key={index}
/>
);
})}
</Flex>
</div>
<Flex container={true} flexDirection="column" alignItems="flex-start">
{nodes.map((snode: Snode | any, index: number) => {
let labelText = snode.label
? snode.label
: countryLookup.byIso(ip2country(snode.ip))?.country;
if (!labelText) {
labelText = window.i18n('unknownCountry');
}
return labelText ? <div className="onion__node__country">{labelText}</div> : null;
})}
</Flex>
</Flex>
</div>
</>
);
};
export type OnionNodeStatusLightType = {
snode: Snode;
label?: string;
glowStartDelay: number;
glowDuration: number;
};
/**
* Component containing a coloured status light and an adjacent country label.
* Component containing a coloured status light.
*/
export const OnionNodeStatusLight = (props: OnionNodeStatusLightType): JSX.Element => {
const { snode, label, glowStartDelay, glowDuration } = props;
const { glowStartDelay, glowDuration } = props;
const theme = useTheme();
let labelText = label ? label : countryLookup.byIso(ip2country(snode.ip))?.country;
if (!labelText) {
labelText = window.i18n('unknownCountry');
}
return (
<div className="onion__node">
<ModalStatusLight
glowDuration={glowDuration}
glowStartDelay={glowStartDelay}
color={theme.colors.accent}
/>
{labelText ? (
<>
<div className="onion-node__country">{labelText}</div>
</>
) : null}
</div>
<ModalStatusLight
glowDuration={glowDuration}
glowStartDelay={glowStartDelay}
color={theme.colors.accent}
/>
);
};
@ -114,15 +118,17 @@ export const ModalStatusLight = (props: StatusLightType) => {
const theme = useSelector(getTheme);
return (
<SessionIcon
borderRadius={50}
iconColor={color}
glowDuration={glowDuration}
glowStartDelay={glowStartDelay}
iconType={SessionIconType.Circle}
iconSize={SessionIconSize.Small}
theme={theme}
/>
<div className="onion__growing-icon">
<SessionIcon
borderRadius={50}
iconColor={color}
glowDuration={glowDuration}
glowStartDelay={glowStartDelay}
iconType={SessionIconType.Circle}
iconSize={SessionIconSize.Tiny}
theme={theme}
/>
</div>
);
};
@ -154,7 +160,7 @@ export const ActionPanelOnionStatusLight = (props: {
return (
<SessionIconButton
iconSize={SessionIconSize.Medium}
iconSize={SessionIconSize.Small}
iconType={SessionIconType.Circle}
iconColor={iconColor}
onClick={handleClick}

@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import { SessionButton, SessionButtonColor } from '../session/SessionButton';
import { SessionWrapperModal } from '../session/SessionWrapperModal';
@ -16,11 +16,15 @@ export const AdminLeaveClosedGroupDialog = (props: Props) => {
const warningAsAdmin = `${window.i18n('leaveGroupConfirmationAdmin')}`;
const okText = window.i18n('leaveAndRemoveForEveryone');
const cancelText = window.i18n('cancel');
const [isLoading, setIsLoading] = useState(false);
const onClickOK = async () => {
setIsLoading(true);
await getConversationController()
.get(props.conversationId)
.leaveClosedGroup();
setIsLoading(false);
closeDialog();
};

@ -120,7 +120,6 @@ const onDeleteAccount = () => {
okTheme: SessionButtonColor.Danger,
onClickOk: deleteAccount,
onClickClose,
closeAfterClickOk: true,
})
);
};

@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import { SessionModal } from './SessionModal';
import { SessionButton, SessionButtonColor } from './SessionButton';
import { SessionHtmlRenderer } from './SessionHTMLRenderer';
@ -9,6 +9,7 @@ import { useDispatch } from 'react-redux';
import { updateConfirmModal } from '../../state/ducks/modalDialog';
import { update } from 'lodash';
import { SpacerLG } from '../basic/Text';
import { SessionSpinner } from './SessionSpinner';
export interface SessionConfirmDialogProps {
message?: string;
@ -26,7 +27,6 @@ export interface SessionConfirmDialogProps {
sessionIcon?: SessionIconType;
iconSize?: SessionIconSize;
theme?: DefaultTheme;
closeAfterClickOk?: boolean;
shouldShowConfirm?: () => boolean | undefined;
}
@ -45,6 +45,8 @@ const SessionConfirmInner = (props: SessionConfirmDialogProps) => {
shouldShowConfirm,
} = props;
const [isLoading, setIsLoading] = useState(false);
const okText = props.okText || window.i18n('ok');
const cancelText = props.cancelText || window.i18n('cancel');
const showHeader = !!props.title;
@ -53,9 +55,16 @@ const SessionConfirmInner = (props: SessionConfirmDialogProps) => {
const messageSubText = messageSub ? 'session-confirm-main-message' : 'subtle';
const onClickOkHandler = () => {
const onClickOkHandler = async () => {
if (onClickOk) {
onClickOk();
setIsLoading(true);
try {
await onClickOk();
} catch (e) {
window.log.warn(e);
} finally {
setIsLoading(false);
}
}
window.inboxStore?.dispatch(updateConfirmModal(null));
@ -99,6 +108,8 @@ const SessionConfirmInner = (props: SessionConfirmDialogProps) => {
className="session-confirm-sub-message subtle"
html={messageSub}
/>
<SessionSpinner loading={isLoading} />
</div>
<div className="session-modal__button-group">

@ -102,8 +102,12 @@ export const icons = {
ratio: 1,
},
[SessionIconType.Circle]: {
path: 'M 100, 100m -75, 0a 75,75 0 1,0 150,0a 75,75 0 1,0 -150,0',
viewBox: '0 0 200 200',
path: '\
M 0, 50\
a 50,50 0 1,1 100,0\
a 50,50 0 1,1 -100,0\
',
viewBox: '0 0 100 100',
ratio: 1,
},
[SessionIconType.CircleCheck]: {

@ -342,7 +342,7 @@ export async function selectGuardNodes(): Promise<Array<Snode>> {
async function buildNewOnionPathsWorker() {
window?.log?.info('LokiSnodeAPI::buildNewOnionPaths - building new onion paths...');
const allNodes = await SnodePool.getRandomSnodePool();
let allNodes = await SnodePool.getRandomSnodePool();
if (guardNodes.length === 0) {
// Not cached, load from DB
@ -369,7 +369,8 @@ async function buildNewOnionPathsWorker() {
// TODO: don't throw away potentially good guard nodes
guardNodes = await exports.selectGuardNodes();
}
// be sure to fetch again as that list might have been refreshed by selectGuardNodes
allNodes = await SnodePool.getRandomSnodePool();
// TODO: select one guard node and 2 other nodes randomly
let otherNodes = _.differenceBy(allNodes, guardNodes, 'pubkey_ed25519');
if (otherNodes.length < 2) {

Loading…
Cancel
Save