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 { #root {
height: 100%; 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 { .messages-container {
.session-icon-button { .session-icon-button {
display: flex; display: flex;

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

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

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

@ -40,7 +40,7 @@ const StyledYourSessionIDSelectable = styled.p`
word-break: break-all; word-break: break-all;
padding: 0px var(--margins-lg); padding: 0px var(--margins-lg);
font-weight: 100; font-weight: 300;
color: var(--color-text); color: var(--color-text);
font-size: var(--font-size-sm); 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 { SessionSpinner } from '../basic/SessionSpinner';
import { SessionIcon, SessionIconButton } from '../icon'; import { SessionIcon, SessionIconButton } from '../icon';
import { SessionWrapperModal } from '../SessionWrapperModal'; import { SessionWrapperModal } from '../SessionWrapperModal';
import styled from 'styled-components';
export type StatusLightType = { export type StatusLightType = {
glowStartDelay: number; glowStartDelay: number;
@ -27,19 +28,30 @@ export type StatusLightType = {
color?: string; color?: string;
}; };
const OnionCountryDisplay = ({ const StyledCountry = styled.div`
index, margin: var(--margins-sm);
labelText, min-width: 150px;
snodeIp, `;
}: {
snodeIp?: string; const StyledOnionNodeList = styled.div`
labelText: string; display: flex;
index: number; 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) => ( const element = (hovered: boolean) => (
<div className="onion__node__country" key={`country-${index}`}> <StyledCountry key={`country-${snodeIp}`}>
{hovered && snodeIp ? snodeIp : labelText} {hovered && snodeIp ? snodeIp : labelText}
</div> </StyledCountry>
); );
const [hoverable] = useHover(element); const [hoverable] = useHover(element);
@ -67,11 +79,13 @@ const OnionPathModalInner = () => {
return ( return (
<> <>
<p className="onion__description">{window.i18n('onionPathIndicatorDescription')}</p> <StyledOnionDescription>
<div className="onion__node-list"> {window.i18n('onionPathIndicatorDescription')}
</StyledOnionDescription>
<StyledOnionNodeList>
<Flex container={true}> <Flex container={true}>
<div className="onion__node-list-lights"> <StyledLightsContainer>
<div className="onion__vertical-line" /> <StyledVerticalLine />
<Flex container={true} flexDirection="column" alignItems="center" height="100%"> <Flex container={true} flexDirection="column" alignItems="center" height="100%">
{nodes.map((_snode: Snode | any, index: number) => { {nodes.map((_snode: Snode | any, index: number) => {
@ -84,9 +98,9 @@ const OnionPathModalInner = () => {
); );
})} })}
</Flex> </Flex>
</div> </StyledLightsContainer>
<Flex container={true} flexDirection="column" alignItems="flex-start"> <Flex container={true} flexDirection="column" alignItems="flex-start">
{nodes.map((snode: Snode | any, index: number) => { {nodes.map((snode: Snode | any) => {
let labelText = snode.label let labelText = snode.label
? snode.label ? snode.label
: `${countryLookup.byIso(ip2country(snode.ip))?.country}`; : `${countryLookup.byIso(ip2country(snode.ip))?.country}`;
@ -94,16 +108,35 @@ const OnionPathModalInner = () => {
labelText = window.i18n('unknownCountry'); labelText = window.i18n('unknownCountry');
} }
return labelText ? ( return labelText ? (
<OnionCountryDisplay index={index} labelText={labelText} snodeIp={snode.ip} /> <OnionCountryDisplay labelText={labelText} snodeIp={snode.ip} />
) : null; ) : null;
})} })}
</Flex> </Flex>
</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 = { export type OnionNodeStatusLightType = {
glowStartDelay: number; glowStartDelay: number;
glowDuration: number; glowDuration: number;
@ -131,7 +164,7 @@ export const ModalStatusLight = (props: StatusLightType) => {
const { glowStartDelay, glowDuration, color } = props; const { glowStartDelay, glowDuration, color } = props;
return ( return (
<div className="onion__growing-icon"> <StyledGrowingIcon>
<SessionIcon <SessionIcon
borderRadius={'50px'} borderRadius={'50px'}
iconColor={color} iconColor={color}
@ -140,7 +173,7 @@ export const ModalStatusLight = (props: StatusLightType) => {
iconType="circle" iconType="circle"
iconSize={'tiny'} iconSize={'tiny'}
/> />
</div> </StyledGrowingIcon>
); );
}; };

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

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

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

@ -15,7 +15,7 @@ export const SettingsHeader = (props: Props) => {
categoryLocalized = 'appearanceSettingsTitle'; categoryLocalized = 'appearanceSettingsTitle';
break; break;
case SessionSettingCategory.Conversations: case SessionSettingCategory.Conversations:
categoryLocalized = 'blockedSettingsTitle'; categoryLocalized = 'conversationsSettingsTitle';
break; break;
case SessionSettingCategory.Notifications: case SessionSettingCategory.Notifications:
categoryLocalized = 'notificationsSettingsTitle'; 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 { toggleAudioAutoplay } from '../../../state/ducks/userConfig';
import { getBlockedPubkeys } from '../../../state/selectors/conversations'; import { getBlockedPubkeys } from '../../../state/selectors/conversations';
import { getAudioAutoplay } from '../../../state/selectors/userConfig'; import { getAudioAutoplay } from '../../../state/selectors/userConfig';
import { SessionButtonColor } from '../../basic/SessionButton'; import { SessionButtonColor, SessionButtonType } from '../../basic/SessionButton';
import { import {
SessionSettingButtonItem, SessionSettingButtonItem,
@ -100,6 +100,7 @@ const BlockedEntry = (props: { blockedEntry: string; title: string }) => {
<SessionSettingButtonItem <SessionSettingButtonItem
key={props.blockedEntry} key={props.blockedEntry}
buttonColor={SessionButtonColor.Danger} buttonColor={SessionButtonColor.Danger}
buttonType={SessionButtonType.Square}
buttonText={window.i18n('unblockUser')} buttonText={window.i18n('unblockUser')}
title={props.title} title={props.title}
onClick={async () => { onClick={async () => {

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

@ -1,6 +1,6 @@
import { ipcRenderer, shell } from 'electron'; import { ipcRenderer, shell } from 'electron';
import React from 'react'; import React from 'react';
import { SessionButtonColor } from '../../basic/SessionButton'; import { SessionButtonColor, SessionButtonType } from '../../basic/SessionButton';
import { SessionSettingButtonItem } from '../SessionSettingListItem'; import { SessionSettingButtonItem } from '../SessionSettingListItem';
@ -12,12 +12,14 @@ export const SettingsCategoryHelp = (props: { hasPassword: boolean | null }) =>
title={window.i18n('surveyTitle')} title={window.i18n('surveyTitle')}
onClick={() => void shell.openExternal('https://getsession.org/survey')} onClick={() => void shell.openExternal('https://getsession.org/survey')}
buttonColor={SessionButtonColor.Primary} buttonColor={SessionButtonColor.Primary}
buttonType={SessionButtonType.Square}
buttonText={window.i18n('goToOurSurvey')} buttonText={window.i18n('goToOurSurvey')}
/> />
<SessionSettingButtonItem <SessionSettingButtonItem
title={window.i18n('helpUsTranslateSession')} title={window.i18n('helpUsTranslateSession')}
onClick={() => void shell.openExternal('https://crowdin.com/project/session-desktop/')} onClick={() => void shell.openExternal('https://crowdin.com/project/session-desktop/')}
buttonColor={SessionButtonColor.Primary} buttonColor={SessionButtonColor.Primary}
buttonType={SessionButtonType.Square}
buttonText={window.i18n('translation')} buttonText={window.i18n('translation')}
/> />
<SessionSettingButtonItem <SessionSettingButtonItem
@ -25,6 +27,7 @@ export const SettingsCategoryHelp = (props: { hasPassword: boolean | null }) =>
ipcRenderer.send('show-debug-log'); ipcRenderer.send('show-debug-log');
}} }}
buttonColor={SessionButtonColor.Primary} buttonColor={SessionButtonColor.Primary}
buttonType={SessionButtonType.Square}
buttonText={window.i18n('showDebugLog')} 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 { Data, hasLinkPreviewPopupBeenDisplayed } from '../../../data/data';
import { SettingsKey } from '../../../data/settings-key'; import { SettingsKey } from '../../../data/settings-key';
import { sessionPassword, updateConfirmModal } from '../../../state/ducks/modalDialog'; import { sessionPassword, updateConfirmModal } from '../../../state/ducks/modalDialog';
import { SessionButtonColor } from '../../basic/SessionButton'; import { SessionButtonColor, SessionButtonType } from '../../basic/SessionButton';
import { PasswordAction } from '../../dialog/SessionPasswordDialog'; import { PasswordAction } from '../../dialog/SessionPasswordDialog';
import { SessionSettingButtonItem, SessionToggleWithDescription } from '../SessionSettingListItem'; import { SessionSettingButtonItem, SessionToggleWithDescription } from '../SessionSettingListItem';
@ -86,7 +86,8 @@ export const SettingsCategoryPrivacy = (props: {
onClick={() => { onClick={() => {
displayPasswordModal('set', props.onPasswordUpdated); displayPasswordModal('set', props.onPasswordUpdated);
}} }}
buttonColor={SessionButtonColor.Primary} buttonColor={SessionButtonColor.Green}
buttonType={SessionButtonType.BrandOutline}
buttonText={window.i18n('setPassword')} buttonText={window.i18n('setPassword')}
dataTestId={'set-password-button'} dataTestId={'set-password-button'}
/> />
@ -98,7 +99,8 @@ export const SettingsCategoryPrivacy = (props: {
onClick={() => { onClick={() => {
displayPasswordModal('change', props.onPasswordUpdated); displayPasswordModal('change', props.onPasswordUpdated);
}} }}
buttonColor={SessionButtonColor.Primary} buttonColor={SessionButtonColor.Green}
buttonType={SessionButtonType.BrandOutline}
buttonText={window.i18n('changePassword')} buttonText={window.i18n('changePassword')}
/> />
)} )}
@ -110,6 +112,7 @@ export const SettingsCategoryPrivacy = (props: {
displayPasswordModal('remove', props.onPasswordUpdated); displayPasswordModal('remove', props.onPasswordUpdated);
}} }}
buttonColor={SessionButtonColor.Danger} buttonColor={SessionButtonColor.Danger}
buttonType={SessionButtonType.BrandOutline}
buttonText={window.i18n('removePassword')} buttonText={window.i18n('removePassword')}
/> />
)} )}

Write Preview
Loading…
Cancel
Save