From fe474425ba85b5ba3a792025fe4e1d6ef4c88675 Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Mon, 28 Jun 2021 11:30:22 +1000 Subject: [PATCH 1/3] wip vertical line. --- stylesheets/_session.scss | 12 ++++++++++++ ts/components/OnionStatusPathDialog.tsx | 17 ++++++++++------- 2 files changed, 22 insertions(+), 7 deletions(-) diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 4fbf56b6e0..a4cc3aca14 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -1203,6 +1203,7 @@ input { flex-direction: column; margin: $session-margin-sm; align-items: flex-start; + position: relative; .onion__node { display: flex; @@ -1218,6 +1219,17 @@ input { margin: $session-margin-sm !important; } } + + .onion__vertical-line { + border-left: 2px solid rgba($color: #585858, $alpha: 1.0); + height: 185px; + position: absolute; + left: 22px; + + // node item padding (i.e. one destination) + icon padding + half sessionIcon.small height + top: 23.35px; + z-index: -1; + } } .session-nickname-wrapper { diff --git a/ts/components/OnionStatusPathDialog.tsx b/ts/components/OnionStatusPathDialog.tsx index 93fb7f0f5b..2da17bf5ce 100644 --- a/ts/components/OnionStatusPathDialog.tsx +++ b/ts/components/OnionStatusPathDialog.tsx @@ -56,15 +56,18 @@ const OnionPathModalInner = () => { <>

{window.i18n('onionPathIndicatorDescription')}

+
{nodes.map((snode: Snode | any, index: number) => { return ( - + <> + + ); })}
From 00c7c8b96959ddcf2c90c4cc1be8a688d20eccbd Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Mon, 28 Jun 2021 13:25:20 +1000 Subject: [PATCH 2/3] vertical line wip. --- stylesheets/_session.scss | 31 +++++++++++++++--------- stylesheets/themes.scss | 2 ++ ts/components/OnionStatusPathDialog.tsx | 32 +++++++++++++++---------- 3 files changed, 41 insertions(+), 24 deletions(-) diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index a4cc3aca14..ebe0c24593 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -1211,25 +1211,34 @@ input { align-items: center; margin: $session-margin-xs; - * { + &__country { margin: $session-margin-sm; } + &__growing-icon { + position: relative; + width: 20px; + height: 20px svg { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + } + } + .session-icon-button { margin: $session-margin-sm !important; } } - .onion__vertical-line { - border-left: 2px solid rgba($color: #585858, $alpha: 1.0); - height: 185px; - position: absolute; - left: 22px; - - // node item padding (i.e. one destination) + icon padding + half sessionIcon.small height - top: 23.35px; - z-index: -1; - } + .onion__vertical-line { + border-left: 2px solid $onionPathLineColor; + height: 182px; + position: absolute; + left: 11px; + top: 22px; + z-index: -1; + } } .session-nickname-wrapper { diff --git a/stylesheets/themes.scss b/stylesheets/themes.scss index bd346b42bc..97cd50a3f8 100644 --- a/stylesheets/themes.scss +++ b/stylesheets/themes.scss @@ -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 diff --git a/ts/components/OnionStatusPathDialog.tsx b/ts/components/OnionStatusPathDialog.tsx index 2da17bf5ce..aabdf67583 100644 --- a/ts/components/OnionStatusPathDialog.tsx +++ b/ts/components/OnionStatusPathDialog.tsx @@ -8,8 +8,12 @@ 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 { + SessionIcon, + SessionIconButton, + SessionIconSize, + SessionIconType, +} from './session/icon'; import { SessionWrapperModal } from './session/SessionWrapperModal'; @@ -56,7 +60,7 @@ const OnionPathModalInner = () => { <>

{window.i18n('onionPathIndicatorDescription')}

-
+
{nodes.map((snode: Snode | any, index: number) => { return ( <> @@ -102,7 +106,7 @@ export const OnionNodeStatusLight = (props: OnionNodeStatusLightType): JSX.Eleme /> {labelText ? ( <> -
{labelText}
+
{labelText}
) : null}
@@ -117,15 +121,17 @@ export const ModalStatusLight = (props: StatusLightType) => { const theme = useSelector(getTheme); return ( - +
+ +
); }; From 4eb76df60cddc5a8f474bc1c0a9e48fa7c7e032b Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Mon, 28 Jun 2021 15:02:02 +1000 Subject: [PATCH 3/3] fix line on onion path modal --- stylesheets/_session.scss | 40 +++++++----- ts/components/OnionStatusPathDialog.tsx | 81 ++++++++++++------------- ts/components/session/icon/Icons.tsx | 8 ++- 3 files changed, 69 insertions(+), 60 deletions(-) diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index ebe0c24593..6a3f363330 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -470,6 +470,7 @@ label { } &__close > div { float: left; + padding: $session-margin-xs; margin: 0px; } &__icons > div { @@ -1211,19 +1212,12 @@ input { align-items: center; margin: $session-margin-xs; - &__country { - margin: $session-margin-sm; + &:nth-child(2) { + margin-top: 0; } - &__growing-icon { - position: relative; - width: 20px; - height: 20px svg { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - } + &:nth-last-child(2) { + margin-bottom: 0; } .session-icon-button { @@ -1231,13 +1225,27 @@ input { } } + .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 { - border-left: 2px solid $onionPathLineColor; - height: 182px; + background: $onionPathLineColor; position: absolute; - left: 11px; - top: 22px; - z-index: -1; + height: calc(100% - 2 * 15px); + margin: 15px calc(100% / 2 - 1px); + + width: 1px; + // z-index: -1; } } diff --git a/ts/components/OnionStatusPathDialog.tsx b/ts/components/OnionStatusPathDialog.tsx index aabdf67583..72c386aed6 100644 --- a/ts/components/OnionStatusPathDialog.tsx +++ b/ts/components/OnionStatusPathDialog.tsx @@ -8,12 +8,7 @@ import Electron from 'electron'; const { shell } = Electron; import { useDispatch, useSelector } from 'react-redux'; -import { - SessionIcon, - SessionIconButton, - SessionIconSize, - SessionIconType, -} from './session/icon'; +import { SessionIcon, SessionIconButton, SessionIconSize, SessionIconType } from './session/icon'; import { SessionWrapperModal } from './session/SessionWrapperModal'; @@ -31,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; @@ -60,56 +56,57 @@ const OnionPathModalInner = () => { <>

{window.i18n('onionPathIndicatorDescription')}

-
- {nodes.map((snode: Snode | any, index: number) => { - return ( - <> - - - ); - })} + +
+
+ + + {nodes.map((_snode: Snode | any, index: number) => { + return ( + + ); + })} + +
+ + {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 ?
{labelText}
: null; + })} + +
); }; 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 ( -
- - {labelText ? ( - <> -
{labelText}
- - ) : null} -
+ ); }; @@ -128,7 +125,7 @@ export const ModalStatusLight = (props: StatusLightType) => { glowDuration={glowDuration} glowStartDelay={glowStartDelay} iconType={SessionIconType.Circle} - iconSize={SessionIconSize.Small} + iconSize={SessionIconSize.Tiny} theme={theme} />
@@ -163,7 +160,7 @@ export const ActionPanelOnionStatusLight = (props: { return (