keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

chore: move onion dialog components to styled

Browse Source
pull/2425/head
Audric Ackermann 3 years ago
parent 39cbbda609
commit 0e65b667a8
9 changed files with 78 additions and 95 deletions
Show Stats Download Patch File Download Diff File

58
stylesheets/_session.scss
Unescape Escape View File

@ -1,5 +1,3 @@
$onionPathLineColor: rgba(#7a7a7a, 0.6);
#root {
height: 100%;
}
@ -891,62 +889,6 @@ input {
}
}
.onion__description {
min-width: 400px;
width: 0;
}
.onion__node-list {
display: flex;
flex-direction: column;
margin: var(--margins-sm);
align-items: center;
min-width: 10vw;
position: relative;
.onion__node {
display: flex;
flex-grow: 1;
align-items: center;
margin: var(--margins-xs);
&:nth-child(2) {
margin-top: 0;
}
&:nth-last-child(2) {
margin-bottom: 0;
}
.session-icon-button {
margin: var(--margins-sm) !important;
}
}
.onion__node-list-lights {
position: relative;
}
.onion__node__country {
margin: var(--margins-sm);
min-width: 150px;
}
.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;
}
}
.messages-container {
.session-icon-button {
display: flex;

11
ts/components/basic/SessionToggle.tsx
Unescape Escape View File

@ -55,21 +55,20 @@ const StyledKnob = styled.div<{ active: boolean }>`
position: absolute;
top: 0.5px;
left: 0.5px;
height: 27px;
width: 27px;
height: 21px;
width: 21px;
border-radius: 28px;
background-color: white;
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.05), 0 3px 1px 0 rgba(0, 0, 0, 0.05),
0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
box-shadow: -2px 1px 3px rgba(0, 0, 0, 0.15);
transition: transform var(--default-duration) ease, background-color var(--default-duration) ease;
transform: ${props => (props.active ? 'translateX(20px)' : '')};
transform: ${props => (props.active ? 'translateX(25px)' : '')};
`;
const StyledSessionToggle = styled.div<{ active: boolean }>`
width: 51px;
height: 31px;
height: 25px;
border: 1.5px solid #e5e5ea;
border-radius: 16px;
position: relative;

2
ts/components/basic/YourSessionIDPill.tsx
Unescape Escape View File

@ -40,7 +40,7 @@ const StyledYourSessionIDSelectable = styled.p`
word-break: break-all;
padding: 0px var(--margins-lg);
font-weight: 100;
font-weight: 300;
color: var(--color-text);
font-size: var(--font-size-sm);

75
ts/components/dialog/OnionStatusPathDialog.tsx
Unescape Escape View File

@ -20,6 +20,7 @@ import useHover from 'react-use/lib/useHover';
import { SessionSpinner } from '../basic/SessionSpinner';
import { SessionIcon, SessionIconButton } from '../icon';
import { SessionWrapperModal } from '../SessionWrapperModal';
import styled from 'styled-components';
export type StatusLightType = {
glowStartDelay: number;
@ -27,19 +28,30 @@ export type StatusLightType = {
color?: string;
};
const OnionCountryDisplay = ({
index,
labelText,
snodeIp,
}: {
snodeIp?: string;
labelText: string;
index: number;
}) => {
const StyledCountry = styled.div`
margin: var(--margins-sm);
min-width: 150px;
`;
const StyledOnionNodeList = styled.div`
display: flex;
flex-direction: column;
margin: var(--margins-sm);
align-items: center;
min-width: 10vw;
position: relative;
`;
const StyledOnionDescription = styled.p`
min-width: 400px;
width: 0;
`;
const OnionCountryDisplay = ({ labelText, snodeIp }: { snodeIp?: string; labelText: string }) => {
const element = (hovered: boolean) => (
<div className="onion__node__country" key={`country-${index}`}>
<StyledCountry key={`country-${snodeIp}`}>
{hovered && snodeIp ? snodeIp : labelText}
</div>
</StyledCountry>
);
const [hoverable] = useHover(element);
@ -67,11 +79,13 @@ const OnionPathModalInner = () => {
return (
<>
<p className="onion__description">{window.i18n('onionPathIndicatorDescription')}</p>
<div className="onion__node-list">
<StyledOnionDescription>
{window.i18n('onionPathIndicatorDescription')}
</StyledOnionDescription>
<StyledOnionNodeList>
<Flex container={true}>
<div className="onion__node-list-lights">
<div className="onion__vertical-line" />
<StyledLightsContainer>
<StyledVerticalLine />
<Flex container={true} flexDirection="column" alignItems="center" height="100%">
{nodes.map((_snode: Snode | any, index: number) => {
@ -84,9 +98,9 @@ const OnionPathModalInner = () => {
);
})}
</Flex>
</div>
</StyledLightsContainer>
<Flex container={true} flexDirection="column" alignItems="flex-start">
{nodes.map((snode: Snode | any, index: number) => {
{nodes.map((snode: Snode | any) => {
let labelText = snode.label
? snode.label
: `${countryLookup.byIso(ip2country(snode.ip))?.country}`;
@ -94,16 +108,35 @@ const OnionPathModalInner = () => {
labelText = window.i18n('unknownCountry');
}
return labelText ? (
<OnionCountryDisplay index={index} labelText={labelText} snodeIp={snode.ip} />
<OnionCountryDisplay labelText={labelText} snodeIp={snode.ip} />
) : null;
})}
</Flex>
</Flex>
</div>
</StyledOnionNodeList>
</>
);
};
const StyledVerticalLine = styled.div`
background: rgba(#7a7a7a, 0.6);
position: absolute;
height: calc(100% - 2 * 15px);
margin: 15px calc(100% / 2 - 1px);
width: 1px;
`;
const StyledLightsContainer = styled.div`
position: relative;
`;
const StyledGrowingIcon = styled.div`
flex-grow: 1;
display: flex;
align-items: center;
`;
export type OnionNodeStatusLightType = {
glowStartDelay: number;
glowDuration: number;
@ -131,7 +164,7 @@ export const ModalStatusLight = (props: StatusLightType) => {
const { glowStartDelay, glowDuration, color } = props;
return (
<div className="onion__growing-icon">
<StyledGrowingIcon>
<SessionIcon
borderRadius={'50px'}
iconColor={color}
@ -140,7 +173,7 @@ export const ModalStatusLight = (props: StatusLightType) => {
iconType="circle"
iconSize={'tiny'}
/>
</div>
</StyledGrowingIcon>
);
};

8
ts/components/settings/SessionSettingListItem.tsx
Unescape Escape View File

@ -1,5 +1,5 @@
import React from 'react';
import { SessionButton, SessionButtonColor } from '../basic/SessionButton';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionToggle } from '../basic/SessionToggle';
import { SessionConfirmDialogProps } from '../dialog/SessionConfirm';
import styled from 'styled-components';
@ -8,6 +8,7 @@ type ButtonSettingsProps = {
title?: string;
description?: string;
buttonColor: SessionButtonColor;
buttonType: SessionButtonType;
buttonText: string;
dataTestId?: string;
onClick: () => void;
@ -16,7 +17,7 @@ type ButtonSettingsProps = {
const StyledDescription = styled.div`
font-family: var(--font-default);
font-size: var(--font-size-sm);
font-weight: 100;
font-weight: 400;
max-width: 700px;
color: var(--color-text-subtle);
`;
@ -93,7 +94,7 @@ export const SessionToggleWithDescription = (props: {
};
export const SessionSettingButtonItem = (props: ButtonSettingsProps) => {
const { title, description, buttonColor, buttonText, dataTestId, onClick } = props;
const { title, description, buttonColor, buttonType, buttonText, dataTestId, onClick } = props;
return (
<SessionSettingsItemWrapper title={title} description={description} inline={true}>
@ -102,6 +103,7 @@ export const SessionSettingButtonItem = (props: ButtonSettingsProps) => {
text={buttonText}
buttonColor={buttonColor}
onClick={onClick}
buttonType={buttonType}
/>
</SessionSettingsItemWrapper>
);

2
ts/components/settings/SessionSettingsHeader.tsx
Unescape Escape View File

@ -15,7 +15,7 @@ export const SettingsHeader = (props: Props) => {
categoryLocalized = 'appearanceSettingsTitle';
break;
case SessionSettingCategory.Conversations:
categoryLocalized = 'blockedSettingsTitle';
categoryLocalized = 'conversationsSettingsTitle';
break;
case SessionSettingCategory.Notifications:
categoryLocalized = 'notificationsSettingsTitle';

3
ts/components/settings/section/CategoryConversations.tsx
Unescape Escape View File

@ -8,7 +8,7 @@ import { ToastUtils } from '../../../session/utils';
import { toggleAudioAutoplay } from '../../../state/ducks/userConfig';
import { getBlockedPubkeys } from '../../../state/selectors/conversations';
import { getAudioAutoplay } from '../../../state/selectors/userConfig';
import { SessionButtonColor } from '../../basic/SessionButton';
import { SessionButtonColor, SessionButtonType } from '../../basic/SessionButton';
import {
SessionSettingButtonItem,
@ -100,6 +100,7 @@ const BlockedEntry = (props: { blockedEntry: string; title: string }) => {
<SessionSettingButtonItem
key={props.blockedEntry}
buttonColor={SessionButtonColor.Danger}
buttonType={SessionButtonType.Square}
buttonText={window.i18n('unblockUser')}
title={props.title}
onClick={async () => {

5
ts/components/settings/section/CategoryHelp.tsx
Unescape Escape View File

@ -1,6 +1,6 @@
import { ipcRenderer, shell } from 'electron';
import React from 'react';
import { SessionButtonColor } from '../../basic/SessionButton';
import { SessionButtonColor, SessionButtonType } from '../../basic/SessionButton';
import { SessionSettingButtonItem } from '../SessionSettingListItem';
@ -12,12 +12,14 @@ export const SettingsCategoryHelp = (props: { hasPassword: boolean | null }) =>
title={window.i18n('surveyTitle')}
onClick={() => void shell.openExternal('https://getsession.org/survey')}
buttonColor={SessionButtonColor.Primary}
buttonType={SessionButtonType.Square}
buttonText={window.i18n('goToOurSurvey')}
/>
<SessionSettingButtonItem
title={window.i18n('helpUsTranslateSession')}
onClick={() => void shell.openExternal('https://crowdin.com/project/session-desktop/')}
buttonColor={SessionButtonColor.Primary}
buttonType={SessionButtonType.Square}
buttonText={window.i18n('translation')}
/>
<SessionSettingButtonItem
@ -25,6 +27,7 @@ export const SettingsCategoryHelp = (props: { hasPassword: boolean | null }) =>
ipcRenderer.send('show-debug-log');
}}
buttonColor={SessionButtonColor.Primary}
buttonType={SessionButtonType.Square}
buttonText={window.i18n('showDebugLog')}
/>
</>

9
ts/components/settings/section/CategoryPrivacy.tsx
Unescape Escape View File

@ -4,7 +4,7 @@ import useUpdate from 'react-use/lib/useUpdate';
import { Data, hasLinkPreviewPopupBeenDisplayed } from '../../../data/data';
import { SettingsKey } from '../../../data/settings-key';
import { sessionPassword, updateConfirmModal } from '../../../state/ducks/modalDialog';
import { SessionButtonColor } from '../../basic/SessionButton';
import { SessionButtonColor, SessionButtonType } from '../../basic/SessionButton';
import { PasswordAction } from '../../dialog/SessionPasswordDialog';
import { SessionSettingButtonItem, SessionToggleWithDescription } from '../SessionSettingListItem';
@ -86,7 +86,8 @@ export const SettingsCategoryPrivacy = (props: {
onClick={() => {
displayPasswordModal('set', props.onPasswordUpdated);
}}
buttonColor={SessionButtonColor.Primary}
buttonColor={SessionButtonColor.Green}
buttonType={SessionButtonType.BrandOutline}
buttonText={window.i18n('setPassword')}
dataTestId={'set-password-button'}
/>
@ -98,7 +99,8 @@ export const SettingsCategoryPrivacy = (props: {
onClick={() => {
displayPasswordModal('change', props.onPasswordUpdated);
}}
buttonColor={SessionButtonColor.Primary}
buttonColor={SessionButtonColor.Green}
buttonType={SessionButtonType.BrandOutline}
buttonText={window.i18n('changePassword')}
/>
)}
@ -110,6 +112,7 @@ export const SettingsCategoryPrivacy = (props: {
displayPasswordModal('remove', props.onPasswordUpdated);
}}
buttonColor={SessionButtonColor.Danger}
buttonType={SessionButtonType.BrandOutline}
buttonText={window.i18n('removePassword')}
/>
)}

Write Preview
Loading…
Cancel
Save