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

feat: add menu action and action chooser left pane option

Browse Source
pull/2410/head
Audric Ackermann 3 years ago
parent 9e3b76dd28
commit 282e631f73
24 changed files with 415 additions and 277 deletions
Show Stats Download Patch File Download Diff File

8
_locales/en/messages.json
Unescape Escape View File

@ -327,11 +327,9 @@
"ByUsingThisService...": "By using this service, you agree to our <a href=\"https://getsession.org/terms-of-service \">Terms of Service</a> and <a href=\"https://getsession.org/privacy-policy\" target=\"_blank\">Privacy Policy</a>",
"beginYourSession": "Begin your Session.",
"welcomeToYourSession": "Welcome to your Session",
"newSession": "New Session",
"searchFor...": "Search for messages or conversations",
"enterSessionID": "Enter Session ID",
"enterSessionIDOfRecipient": "Enter Session ID or ONS name of recipient",
"usersCanShareTheir...": "Users can share their Session ID by going into their account settings and tapping \"Share Session ID\", or by sharing their QR code.",
"enterSessionIDOfRecipient": "Enter your contact's Session ID or ONS",
"message": "Message",
"appearanceSettingsTitle": "Appearance",
"privacySettingsTitle": "Privacy",
@ -339,8 +337,8 @@
"recoveryPhraseEmpty": "Enter your recovery phrase",
"displayNameEmpty": "Please enter a display name",
"members": "$count$ members",
"joinOpenGroup": "Join Open Group",
"newClosedGroup": "New Closed Group",
"joinOpenGroup": "Join Community",
"createGroup": "Create Group",
"createClosedGroupNamePrompt": "Group Name",
"createClosedGroupPlaceholder": "Enter a group name",
"openGroupURL": "Open Group URL",

19
stylesheets/_modal.scss
Unescape Escape View File

@ -246,25 +246,6 @@
align-items: center;
flex-direction: column;
.panel-text-divider {
margin-top: 35px;
margin-bottom: 35px;
}
&-display {
user-select: text;
text-align: center;
word-break: break-all;
font-size: $session-font-md;
padding: 0px $session-margin-lg;
font-family: $session-font-default;
font-weight: 100;
color: var(--color-text);
font-size: $session-font-md;
padding: 0px $session-margin-sm;
}
.session-button {
width: 148px;
}

5
stylesheets/_modules.scss
Unescape Escape View File

@ -1278,11 +1278,6 @@
height: 100%;
}
.module-left-pane__header {
flex-shrink: 0;
flex-grow: 0;
}
.module-left-pane__list {
flex-grow: 1;
flex-shrink: 1;

1
stylesheets/_session.scss
Unescape Escape View File

@ -1048,6 +1048,7 @@ label {
&.session-id-editable-textarea:placeholder-shown {
padding: 10px 5px 0px 5px;
font-family: var(--font-default);
}
&.group-id-editable-textarea {

93
stylesheets/_session_left_pane.scss
Unescape Escape View File

@ -137,42 +137,6 @@ $session-compose-margin: 20px;
padding: 13px;
}
h2 {
margin-top: 0px;
}
h3,
h2 {
text-align: center;
}
h3 {
padding-top: 22px;
position: relative;
margin-bottom: 6px;
.green-border {
position: absolute;
color: var(--color-accent);
background-color: var(--color-accent);
height: 5px;
left: -10px;
right: -10px;
margin-top: 7px;
border: none;
z-index: 1;
}
}
.white-border {
width: $session-left-pane-width;
position: relative;
height: 1px;
opacity: 0.3;
margin-top: 2px;
margin-bottom: 40px;
}
.exit {
margin-top: 10px;
margin-inline-start: 13px;
@ -184,13 +148,6 @@ $session-compose-margin: 20px;
width: -webkit-fill-available;
}
.session-description-long {
font-size: $session-font-sm;
line-height: $session-font-h3;
margin: 0px 20px;
font-family: $session-font-default;
}
.session-id-editable {
width: 90%;
@ -214,22 +171,6 @@ $session-compose-margin: 20px;
}
}
.module-conversations-list-content {
overflow-x: hidden;
display: flex;
flex-direction: column;
flex-grow: 1;
transition: none;
background: var(--color-conversation-list);
.left-pane-contact-bottom-buttons .session-button {
vertical-align: middle;
white-space: normal;
text-align: center;
}
}
.session-left-pane-section-content {
display: flex;
flex-direction: column;
@ -348,14 +289,6 @@ $session-compose-margin: 20px;
}
}
}
&-bottom-buttons {
@include bottom-buttons();
.session-button {
height: 57px;
}
}
}
.left-pane-setting {
@ -447,29 +380,3 @@ $session-compose-margin: 20px;
}
}
}
.panel-text-divider {
width: 100%;
text-align: center;
display: flex;
margin: 50px 0 50px;
.panel-text-divider-line {
border-bottom: 1px solid var(--color-pill-divider);
line-height: 0.1em;
flex-grow: 1;
height: 1px;
align-self: center;
}
span {
padding: 5px 10px;
border-radius: 50px;
color: var(--color-pill-divider-text);
border: 1px solid var(--color-pill-divider);
font-family: $session-font-default;
font-size: $session-font-sm;
}
}

4
stylesheets/_session_signin.scss
Unescape Escape View File

@ -175,7 +175,7 @@
}
}
&-description-long {
session-description-long {
padding-top: 0;
padding-bottom: 20px;
@include session-color-subtle(var(--color-text));
@ -196,7 +196,7 @@
align-items: center;
justify-content: center;
padding: 20px;
border-radius: 8px;
border-radius: 13px;
border: 1px solid subtle(#353535);
margin-bottom: 20px;

15
ts/components/basic/PillDivider.tsx
Unescape Escape View File

@ -1,15 +0,0 @@
import React from 'react';
type Props = {
text: string;
};
export const PillDivider = (props: Props) => {
return (
<div className="panel-text-divider">
<div className="panel-text-divider-line" />
<span>{props.text}</span>
<div className="panel-text-divider-line" />
</div>
);
};

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

@ -0,0 +1,57 @@
import React from 'react';
import styled from 'styled-components';
import { UserUtils } from '../../session/utils';
const StyledPillDividerLine = styled.div`
border-bottom: 1px solid var(--color-pill-divider);
line-height: 0.1em;
flex-grow: 1;
height: 1px;
align-self: center;
`;
const StyledPillSpan = styled.span`
padding: 5px 15px;
border-radius: 50px;
color: var(--color-pill-divider-text);
border: 1px solid var(--color-pill-divider);
`;
const StyledPillDivider = styled.div`
width: 100%;
text-align: center;
display: flex;
margin: 35px 0;
`;
export const YourSessionIDPill = () => {
return (
<StyledPillDivider>
<StyledPillDividerLine />
<StyledPillSpan>{window.i18n('yourSessionID')}</StyledPillSpan>
<StyledPillDividerLine />
</StyledPillDivider>
);
};
const StyledYourSessionIDSelectable = styled.p`
user-select: text;
text-align: center;
word-break: break-all;
padding: 0px var(--margins-lg);
font-weight: 100;
color: var(--color-text);
font-size: var(--font-size-sm);
padding: 0px var(--margins-md);
`;
export const YourSessionIDSelectable = () => {
const ourSessionID = UserUtils.getOurPubKeyStrFromCache();
return (
<StyledYourSessionIDSelectable data-testid="your-session-id">
{ourSessionID}
</StyledYourSessionIDSelectable>
);
};

67
ts/components/button/MenuButton.tsx
Unescape Escape View File

@ -0,0 +1,67 @@
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import styled, { CSSProperties } from 'styled-components';
import { resetOverlayMode, setOverlayMode } from '../../state/ducks/section';
import { getOverlayMode } from '../../state/selectors/section';
import { SessionIcon } from '../icon';
// tslint:disable: use-simple-attributes
const StyledMenuButton = styled.label`
position: relative;
display: inline-block;
display: flex;
justify-content: center;
align-items: center;
background: var(--bg-color);
border-radius: 2px;
width: 51px;
height: 33px;
cursor: pointer;
:hover {
background: var(--hover-bg-color);
}
`;
const StyledMenuInput = styled.input`
opacity: 0;
width: 0;
height: 0;
`;
/**
* This is the Session Menu Botton. i.e. the button on top of the conversation list to start a new conversation.
* It has two state: selected or not and so we use an checkbox input to keep the state in sync.
*/
export const MenuButton = () => {
const overlayMode = useSelector(getOverlayMode);
const dispatch = useDispatch();
const isToggled = Boolean(overlayMode);
const onClickFn = () =>
dispatch(isToggled ? resetOverlayMode() : setOverlayMode('choose-action'));
return (
<StyledMenuButton
data-testid="new-conversation-button"
style={
{
'--bg-color': 'var(--color-accent-button)',
'--hover-bg-color': 'var(--color-accent-button)',
'--fg-color': 'white',
} as CSSProperties
}
>
<StyledMenuInput type="checkbox" checked={isToggled} onClick={onClickFn} />
<SessionIcon
iconSize="small"
iconType="plusFat"
iconColor="var(--fg-color)"
iconRotation={isToggled ? 45 : 0}
/>
</StyledMenuButton>
);
};

20
ts/components/dialog/EditProfileDialog.tsx
Unescape Escape View File

@ -1,10 +1,9 @@
import React, { ChangeEvent } from 'react';
import classNames from 'classnames';
import { QRCode } from 'react-qr-svg';
import { Avatar, AvatarSize } from '../avatar/Avatar';
import { PillDivider } from '../basic/PillDivider';
import { YourSessionIDPill, YourSessionIDSelectable } from '../basic/YourSessionIDPill';
import { SyncUtils, ToastUtils, UserUtils } from '../../session/utils';
import { ConversationModel } from '../../models/conversation';
@ -106,13 +105,8 @@ export class EditProfileDialog extends React.Component<{}, State> {
{viewEdit && this.renderEditView()}
<div className="session-id-section">
<PillDivider text={window.i18n('yourSessionID')} />
<p
className={classNames('text-selectable', 'session-id-section-display')}
data-testid="your-session-id"
>
{sessionID}
</p>
<YourSessionIDPill />
<YourSessionIDSelectable />
<SpacerLG />
<SessionSpinner loading={this.state.loading} />
@ -123,7 +117,8 @@ export class EditProfileDialog extends React.Component<{}, State> {
buttonType={SessionButtonType.BrandOutline}
buttonColor={SessionButtonColor.Green}
onClick={() => {
copySessionID(sessionID);
window.clipboard.writeText(sessionID);
ToastUtils.pushCopiedToClipBoard();
}}
dataTestId="copy-button-profile-update"
/>
@ -331,8 +326,3 @@ async function commitProfileEdits(newName: string, scaledAvatarUrl: string | nul
await setLastProfileUpdateTimestamp(Date.now());
await SyncUtils.forceSyncConfigurationNowIfNeeded(true);
}
function copySessionID(sessionID: string) {
window.clipboard.writeText(sessionID);
ToastUtils.pushCopiedToClipBoard();
}

24
ts/components/icon/Icons.tsx
Unescape Escape View File

@ -16,7 +16,9 @@ export type SessionIconType =
| 'circlePlus'
| 'circleElipses'
| 'contacts'
| 'copy'
| 'crown'
| 'communities'
| 'delete'
| 'ellipses'
| 'emoji'
@ -26,7 +28,7 @@ export type SessionIconType =
| 'file'
| 'fullscreen'
| 'gear'
| 'globe'
| 'group'
| 'hangup'
| 'info'
| 'link'
@ -44,6 +46,7 @@ export type SessionIconType =
| 'play'
| 'plus'
| 'plusThin'
| 'plusFat'
| 'reply'
| 'send'
| 'search'
@ -186,12 +189,24 @@ export const icons = {
viewBox: '0 2.5 24 20',
ratio: 1,
},
copy: {
path:
'M14.2242 15.2325C14.3378 15.124 14.428 14.9946 14.4895 14.8519C14.551 14.7092 14.5826 14.5561 14.5823 14.4014V2.0795C14.5823 1.92477 14.5508 1.77155 14.4898 1.6286C14.4287 1.48565 14.3392 1.35575 14.2264 1.24634C14.1136 1.13693 13.9796 1.05014 13.8322 0.990929C13.6848 0.931716 13.5267 0.901238 13.3672 0.901238H5.27296C4.96712 0.900776 4.67219 1.01148 4.44638 1.2115H3.3418C3.51437 0.855597 3.78729 0.554341 4.12904 0.342562C4.47079 0.130783 4.86739 0.0171364 5.27296 0.0147705H13.3672C13.9319 0.0147705 14.4735 0.232303 14.8728 0.619516C15.2721 1.00673 15.4964 1.5319 15.4964 2.0795V14.4162C15.4954 14.8164 15.3747 15.2078 15.1488 15.5428C14.923 15.8778 14.6018 16.1421 14.2242 16.3037V15.2325ZM2.62547 18.9963C2.06142 18.9953 1.52081 18.7774 1.12232 18.3903C0.723828 18.0031 0.499999 17.4785 0.5 16.9316V4.59116C0.499999 4.0442 0.723828 3.51959 1.12232 3.13248C1.52081 2.74537 2.06142 2.52741 2.62547 2.52643H10.7235C11.2879 2.5274 11.8289 2.74525 12.228 3.13226C12.6271 3.51926 12.8517 4.04386 12.8527 4.59116V16.9316C12.8517 17.4789 12.6271 18.0035 12.228 18.3905C11.8289 18.7775 11.2879 18.9953 10.7235 18.9963H2.62547ZM2.62547 3.4129C2.30387 3.41387 1.99577 3.53845 1.76872 3.75931C1.54167 3.98017 1.41418 4.27931 1.41418 4.59116V16.9316C1.41418 17.2434 1.54167 17.5426 1.76872 17.7634C1.99577 17.9843 2.30387 18.1088 2.62547 18.1098H10.7235C11.0458 18.1098 11.3548 17.9857 11.5827 17.7647C11.8105 17.5438 11.9386 17.2441 11.9386 16.9316V4.59116C11.9386 4.27867 11.8105 3.97898 11.5827 3.75801C11.3548 3.53704 11.0458 3.4129 10.7235 3.4129H2.62547Z',
viewBox: '0 0 16 19',
ratio: 1.19,
},
crown: {
path:
'M462.3,130.5c-26.7,0-48.5,21.8-48.5,48.5c0,12.9,5,24.5,13.2,33.2c-14.6,16.3-35.7,26.6-59.3,26.6c-1.4,0-2.7,0-4.1-0.1c-36.3-1.8-66.2-28.1-73.7-62.7c8.9-8.8,14.5-21,14.5-34.5c0-0.8,0-1.7-0.1-2.5c-0.2-3.2-0.6-6.4-1.4-9.4 c0-0.1,0-0.2-0.1-0.2c-5.3-20.7-24-36-46.2-36.4c-0.3,0-0.5,0-0.8,0v0c0,0,0,0,0,0c-26.7,0-48.5,21.8-48.5,48.5c0,13.5,5.5,25.7,14.5,34.5c-7.7,35.8-39.6,62.8-77.7,62.8c-23.5,0-44.7-10.3-59.3-26.6c8.2-8.7,13.2-20.4,13.2-33.2c0-26.7-21.8-48.5-48.5-48.5S1.2,152.2,1.2,179c0,23.2,16.3,42.6,38.1,47.4c5.2,42.6,16.1,96.3,39.2,132.9h0V404c0,8.3,6.7,15,15,15H256h162.5c8.3,0,15-6.7,15-15v-44.8h0c5.6-8.8,10.5-18.7,14.7-29.1c13.3-32.8,20.6-71.5,24.5-103.7c21.8-4.8,38.1-24.2,38.1-47.4C510.8,152.2,489.1,130.5,462.3,130.5z',
viewBox: '0 0 512 512',
ratio: 1,
},
group: {
path:
'M19.0674 11.1167C22.141 11.1167 24.647 8.6258 24.647 5.55835C24.647 2.4909 22.1466 0 19.0674 0C15.9882 0 13.4878 2.4909 13.4878 5.55835C13.4878 8.6258 15.9882 11.1167 19.0674 11.1167ZM19.0674 2.24461C20.9048 2.24461 22.3994 3.73355 22.3994 5.56395C22.3994 7.39434 20.9048 8.88329 19.0674 8.88329C17.23 8.88329 15.7354 7.39434 15.7354 5.56395C15.7354 3.73355 17.23 2.24461 19.0674 2.24461ZM19.0674 12.9415C14.7015 12.9415 11.0098 15.2757 9.82422 18.4719C9.5489 19.2108 10.0771 20 10.8693 20C11.3582 20 11.7684 19.681 11.9369 19.222C12.7966 16.8934 15.6623 15.1805 19.0674 15.1805C22.4724 15.1805 25.3381 16.899 26.1978 19.222C26.3664 19.6754 26.7766 20 27.2654 20C28.0577 20 28.5858 19.2108 28.3105 18.4719C27.1249 15.2757 23.4333 12.9415 19.0674 12.9415ZM30.5581 10.8928C33.0136 10.8928 35.0139 8.90009 35.0139 6.44836C35.0139 3.99664 33.0136 2.00952 30.5581 2.00952C28.1026 2.00952 26.1023 4.00224 26.1023 6.44836C26.1023 8.89449 28.1026 10.8928 30.5581 10.8928ZM30.5581 3.80073C32.0247 3.80073 33.2215 4.9874 33.2215 6.45396C33.2215 7.92051 32.0303 9.1072 30.5581 9.1072C29.086 9.1072 27.8947 7.91492 27.8947 6.45396C27.8947 4.993 29.086 3.80073 30.5581 3.80073ZM7.45314 10.8928C9.90861 10.8928 11.9089 8.90009 11.9089 6.44836C11.9089 3.99664 9.90861 2.00952 7.45314 2.00952C4.99766 2.00952 2.99731 4.00224 2.99731 6.44836C2.99731 8.89449 4.99766 10.8928 7.45314 10.8928ZM7.45314 3.80073C8.91968 3.80073 10.1165 4.9874 10.1165 6.45396C10.1165 7.92051 8.9253 9.1072 7.45314 9.1072C5.98097 9.1072 4.78976 7.91492 4.78976 6.45396C4.78976 4.993 5.98097 3.80073 7.45314 3.80073ZM37.9415 16.7702C36.9919 14.2177 34.042 12.3481 30.5526 12.3481C28.9681 12.3481 27.4959 12.7344 26.271 13.3949C26.8217 13.7699 27.333 14.1897 27.7881 14.6487C28.6141 14.3241 29.5525 14.1338 30.5526 14.1338C33.2722 14.1338 35.5647 15.5052 36.2502 17.3635C36.3851 17.7274 36.711 17.9849 37.1043 17.9849C37.7392 17.9849 38.1607 17.3523 37.9415 16.7646V16.7702ZM11.8021 13.4397C10.5604 12.7568 9.06572 12.3538 7.44747 12.3538C3.95811 12.3538 1.00817 14.2233 0.0585709 16.7758C-0.160568 17.3691 0.260847 17.9961 0.895787 17.9961C1.28349 17.9961 1.61501 17.7386 1.74987 17.3748C2.43538 15.5164 4.7279 14.145 7.44747 14.145C8.48697 14.145 9.45904 14.3465 10.3075 14.6935C10.757 14.2345 11.2571 13.8203 11.8021 13.4397Z',
viewBox: '0 0 38 20',
ratio: 1.5,
},
ellipses: {
path:
'M30,16c4.411,0,8-3.589,8-8s-3.589-8-8-8s-8,3.589-8,8S25.589,16,30,16z M30,22c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S34.411,22,30,22z M30,44c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S34.411,44,30,44z',
@ -240,7 +255,7 @@ export const icons = {
viewBox: '0 0 24 24',
ratio: 1,
},
globe: {
communities: {
path:
'M16,1.99999996 C8.26801348,1.99999996 1.99999996,8.26801348 1.99999996,16 C1.99999996,23.7319865 8.26801348,30 16,30 C23.7319865,30 30,23.7319865 30,16 C30,12.2869691 28.5250043,8.72601434 25.899495,6.10050503 C23.2739857,3.47499573 19.7130309,1.99999996 16,1.99999996 Z M24,15 C23.9541824,13.7847684 23.81713,12.5746962 23.59,11.38 C25.78,12.29 27.34,13.57 27.84,15 L24,15 Z M22,15 L17,15 L17,9.99999998 C18.4647569,10.0572205 19.9194297,10.2683827 21.34,10.63 C21.7186973,12.058241 21.9400138,13.5236242 22,15 Z M17,7.99999997 L17,4.18999996 C18.43,4.68999996 19.71,6.24999997 20.62,8.43999998 C19.426069,8.2027972 18.2159902,8.05571581 17,7.99999998 L17,7.99999997 Z M15,4.18999996 L15,7.99999997 C13.7847684,8.04581761 12.5746962,8.18286998 11.38,8.40999998 C12.29,6.24999997 13.57,4.68999996 15,4.18999996 Z M15,9.99999998 L15,15 L9.99999998,15 C10.0523471,13.5347995 10.2635844,12.0796099 10.63,10.66 C12.0592465,10.2861705 13.5241011,10.0649339 15,9.99999998 L15,9.99999998 Z M7.99999997,15 L4.18999996,15 C4.68999996,13.57 6.24999997,12.29 8.43999998,11.38 C8.2027972,12.573931 8.05571581,13.7840098 7.99999998,15 L7.99999997,15 Z M7.99999997,17 C8.04581761,18.2152316 8.18286998,19.4253038 8.40999998,20.62 C6.24999997,19.71 4.68999996,18.43 4.18999996,17 L7.99999997,17 Z M9.99999998,17 L15,17 L15,22 C13.5352431,21.9427795 12.0805703,21.7316173 10.66,21.37 C10.2813027,19.941759 10.0599862,18.4763758 9.99999998,17 L9.99999998,17 Z M15,24 L15,27.84 C13.57,27.34 12.29,25.78 11.38,23.59 C12.5746962,23.81713 13.7847684,23.9541824 15,24 Z M17,27.84 L17,24 C18.2152316,23.9541824 19.4253038,23.81713 20.62,23.59 C19.71,25.75 18.43,27.31 17,27.81 L17,27.84 Z M17,22 L17,17 L22,17 C21.9476529,18.4652005 21.7364156,19.9203901 21.37,21.34 C19.9407535,21.7138295 18.4758989,21.9350661 17,22 L17,22 Z M24,17 L27.84,17 C27.34,18.43 25.78,19.71 23.59,20.62 C23.81713,19.4253038 23.9541824,18.2152316 24,17 L24,17 Z M26.87,10.88 C25.6762805,10.0719416 24.3730724,9.43885859 23,8.99999998 C22.5705064,7.62858818 21.9475643,6.32546065 21.15,5.12999997 C23.6492047,6.33846833 25.6578129,8.36825686 26.84,10.88 L26.87,10.88 Z M10.87,5.15999997 C10.0679904,6.34500038 9.43836847,7.63791394 8.99999998,8.99999998 C7.62858818,9.42949358 6.32546065,10.0524357 5.12999997,10.85 C6.33846833,8.35079527 8.36825686,6.34218713 10.88,5.15999997 L10.87,5.15999997 Z M5.14999997,21.16 C6.33983272,21.9523657 7.63608858,22.571875 8.99999998,23 C9.42949358,24.3714118 10.0524357,25.6745393 10.85,26.87 C8.35079527,25.6615317 6.34218713,23.6317431 5.15999997,21.12 L5.14999997,21.16 Z M21.15,26.88 C21.9484187,25.681438 22.5713875,24.3748872 23,23 C24.3714118,22.5705064 25.6745393,21.9475643 26.87,21.15 C25.6615317,23.6492047 23.6317431,25.6578129 21.12,26.84 L21.15,26.88',
viewBox: '0.5 0 30 30',
@ -348,6 +363,11 @@ export const icons = {
viewBox: '0 0 48 48',
ratio: 1,
},
plusFat: {
path: 'M11.1 18.2h-3V11H.8V8h7.3V.8h3V8h7.1v3h-7.1z',
viewBox: '0 0 19 19',
ratio: 1,
},
reply: {
path:
'M4,3 C4.55228475,3 5,3.44771525 5,4 L5,4 L5,11 C5,12.6568542 6.34314575,14 8,14 L8,14 L17.585,14 L14.2928932,10.7071068 C13.9324093,10.3466228 13.9046797,9.77939176 14.2097046,9.38710056 L14.2928932,9.29289322 C14.6834175,8.90236893 15.3165825,8.90236893 15.7071068,9.29289322 L15.7071068,9.29289322 L20.7071068,14.2928932 C20.7355731,14.3213595 20.7623312,14.3515341 20.787214,14.3832499 C20.788658,14.3849951 20.7902348,14.3870172 20.7918027,14.389044 C20.8140715,14.4179625 20.8348358,14.4480862 20.8539326,14.4793398 C20.8613931,14.4913869 20.8685012,14.5036056 20.8753288,14.5159379 C20.8862061,14.5357061 20.8966234,14.5561086 20.9063462,14.5769009 C20.914321,14.5939015 20.9218036,14.6112044 20.9287745,14.628664 C20.9366843,14.6484208 20.9438775,14.6682023 20.9504533,14.6882636 C20.9552713,14.7031487 20.9599023,14.7185367 20.9641549,14.734007 C20.9701664,14.7555635 20.9753602,14.7772539 20.9798348,14.7992059 C20.9832978,14.8166247 20.9863719,14.834051 20.9889822,14.8515331 C20.9962388,14.8996379 21,14.9493797 21,15 L20.9962979,14.9137692 C20.9978436,14.9317345 20.9989053,14.9497336 20.9994829,14.9677454 L21,15 C21,15.0112225 20.9998151,15.0224019 20.9994483,15.0335352 C20.9988772,15.050591 20.997855,15.0679231 20.996384,15.0852242 C20.994564,15.1070574 20.9920941,15.1281144 20.9889807,15.1489612 C20.9863719,15.165949 20.9832978,15.1833753 20.9797599,15.2007258 C20.9753602,15.2227461 20.9701664,15.2444365 20.964279,15.2658396 C20.9599023,15.2814633 20.9552713,15.2968513 20.9502619,15.3121425 C20.9438775,15.3317977 20.9366843,15.3515792 20.928896,15.3710585 C20.9218036,15.3887956 20.914321,15.4060985 20.9063266,15.4232215 C20.8974314,15.4421635 20.8879327,15.4609002 20.8778732,15.4792864 C20.8703855,15.4931447 20.862375,15.5070057 20.8540045,15.5207088 C20.8382813,15.546275 20.8215099,15.5711307 20.8036865,15.5951593 C20.774687,15.6343256 20.7425008,15.6717127 20.7071068,15.7071068 L20.787214,15.6167501 C20.7849289,15.6196628 20.7826279,15.6225624 20.7803112,15.625449 L20.7071068,15.7071068 L15.7071068,20.7071068 C15.3165825,21.0976311 14.6834175,21.0976311 14.2928932,20.7071068 C13.9023689,20.3165825 13.9023689,19.6834175 14.2928932,19.2928932 L14.2928932,19.2928932 L17.585,16 L8,16 C5.3112453,16 3.11818189,13.8776933 3.00461951,11.2168896 L3,11 L3,4 C3,3.44771525 3.44771525,3 4,3',

4
ts/components/leftpane/ActionsPanel.tsx
Unescape Escape View File

@ -21,7 +21,7 @@ import {
import { applyTheme } from '../../state/ducks/theme';
import { getFocusedSection } from '../../state/selectors/section';
import { clearSearch } from '../../state/ducks/search';
import { SectionType, setOverlayMode, showLeftPaneSection } from '../../state/ducks/section';
import { resetOverlayMode, SectionType, showLeftPaneSection } from '../../state/ducks/section';
import { cleanUpOldDecryptedMedias } from '../../session/crypto/DecryptedAttachmentsManager';
@ -90,7 +90,7 @@ const Section = (props: { type: SectionType }) => {
// message section
dispatch(clearSearch());
dispatch(showLeftPaneSection(type));
dispatch(setOverlayMode(undefined));
dispatch(resetOverlayMode());
}
};

55
ts/components/leftpane/LeftPaneMessageSection.tsx
Unescape Escape View File

@ -11,7 +11,6 @@ import autoBind from 'auto-bind';
import _ from 'lodash';
import { MessageRequestsBanner } from './MessageRequestsBanner';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
import { SessionSearchInput } from '../SessionSearchInput';
import { RowRendererParamsType } from './LeftPane';
import { OverlayOpenGroup } from './overlay/OverlayOpenGroup';
@ -19,6 +18,8 @@ import { OverlayMessageRequest } from './overlay/OverlayMessageRequest';
import { OverlayMessage } from './overlay/OverlayMessage';
import { OverlayClosedGroup } from './overlay/OverlayClosedGroup';
import { OverlayMode, setOverlayMode } from '../../state/ducks/section';
import { OverlayChooseAction } from './overlay/OverlayChooseAction';
import styled from 'styled-components';
export interface Props {
contacts: Array<ReduxConversationType>;
@ -26,9 +27,19 @@ export interface Props {
searchResults?: SearchResultsProps;
messageRequestsEnabled?: boolean;
overlayMode: OverlayMode;
overlayMode: OverlayMode | undefined;
}
const StyledConversationListContent = styled.div`
overflow-x: hidden;
display: flex;
flex-direction: column;
flex-grow: 1;
transition: none;
background: var(--color-conversation-list);
`;
export class LeftPaneMessageSection extends React.Component<Props> {
public constructor(props: Props) {
super(props);
@ -96,11 +107,7 @@ export class LeftPaneMessageSection extends React.Component<Props> {
return (
<div className="session-left-pane-section-content">
<LeftPaneSectionHeader
buttonClicked={() => {
window.inboxStore?.dispatch(setOverlayMode('message'));
}}
/>
<LeftPaneSectionHeader />
{overlayMode ? this.renderClosableOverlay() : this.renderConversations()}
</div>
);
@ -108,7 +115,7 @@ export class LeftPaneMessageSection extends React.Component<Props> {
public renderConversations() {
return (
<div className="module-conversations-list-content">
<StyledConversationListContent>
<SessionSearchInput />
<MessageRequestsBanner
handleOnClick={() => {
@ -116,8 +123,7 @@ export class LeftPaneMessageSection extends React.Component<Props> {
}}
/>
{this.renderList()}
{this.renderBottomButtons()}
</div>
</StyledConversationListContent>
);
}
@ -125,11 +131,12 @@ export class LeftPaneMessageSection extends React.Component<Props> {
const { overlayMode } = this.props;
switch (overlayMode) {
case 'choose-action':
return <OverlayChooseAction />;
case 'open-group':
return <OverlayOpenGroup />;
case 'closed-group':
return <OverlayClosedGroup />;
case 'message':
return <OverlayMessage />;
case 'message-requests':
@ -138,30 +145,4 @@ export class LeftPaneMessageSection extends React.Component<Props> {
return null;
}
}
private renderBottomButtons(): JSX.Element {
const joinOpenGroup = window.i18n('joinOpenGroup');
const newClosedGroup = window.i18n('newClosedGroup');
return (
<div className="left-pane-contact-bottom-buttons">
<SessionButton
text={joinOpenGroup}
buttonType={SessionButtonType.SquareOutline}
buttonColor={SessionButtonColor.Green}
onClick={() => {
window.inboxStore?.dispatch(setOverlayMode('open-group'));
}}
/>
<SessionButton
text={newClosedGroup}
buttonType={SessionButtonType.SquareOutline}
buttonColor={SessionButtonColor.White}
onClick={() => {
window.inboxStore?.dispatch(setOverlayMode('closed-group'));
}}
/>
</div>
);
}
}

21
ts/components/leftpane/LeftPaneSectionHeader.tsx
Unescape Escape View File

@ -6,10 +6,11 @@ import { getShowRecoveryPhrasePrompt } from '../../state/selectors/userConfig';
import { recoveryPhraseModal } from '../../state/ducks/modalDialog';
import { Flex } from '../basic/Flex';
import { getFocusedSection, getOverlayMode } from '../../state/selectors/section';
import { SectionType, setOverlayMode } from '../../state/ducks/section';
import { resetOverlayMode, SectionType } from '../../state/ducks/section';
import { SessionButton, SessionButtonType } from '../basic/SessionButton';
import { SessionIcon, SessionIconButton } from '../icon';
import { SessionIconButton } from '../icon';
import { isSignWithRecoveryPhrase } from '../../util/storage';
import { MenuButton } from '../button/MenuButton';
const SectionTitle = styled.h1`
padding: 0 var(--margins-sm);
@ -17,7 +18,7 @@ const SectionTitle = styled.h1`
color: var(--color-text);
`;
export const LeftPaneSectionHeader = (props: { buttonClicked?: any }) => {
export const LeftPaneSectionHeader = () => {
const showRecoveryPhrasePrompt = useSelector(getShowRecoveryPhrasePrompt);
const focusedSection = useSelector(getFocusedSection);
const overlayMode = useSelector(getOverlayMode);
@ -26,7 +27,7 @@ export const LeftPaneSectionHeader = (props: { buttonClicked?: any }) => {
let label: string | undefined;
const isMessageSection = focusedSection === SectionType.Message;
const isMessageRequestOverlay = overlayMode === 'message-requests';
const isMessageRequestOverlay = overlayMode && overlayMode === 'message-requests';
const showBackButton = isMessageRequestOverlay && isMessageSection;
@ -48,23 +49,19 @@ export const LeftPaneSectionHeader = (props: { buttonClicked?: any }) => {
return (
<Flex flexDirection="column">
<div className="module-left-pane__header">
{showBackButton && (
{showBackButton ? (
<SessionIconButton
onClick={() => {
dispatch(setOverlayMode(undefined));
dispatch(resetOverlayMode());
}}
iconType="chevron"
iconRotation={90}
iconSize="medium"
margin="0 0 var(--margins-xs) var(--margins-xs)"
/>
)}
) : null}
<SectionTitle>{label}</SectionTitle>
{isMessageSection && !isMessageRequestOverlay && (
<SessionButton onClick={props.buttonClicked} dataTestId="new-conversation-button">
<SessionIcon iconType="plus" iconSize="small" iconColor="white" />
</SessionButton>
)}
{isMessageSection && !isMessageRequestOverlay && <MenuButton />}
</div>
{showRecoveryPhrasePrompt && <LeftPaneBanner />}
</Flex>

2
ts/components/leftpane/MessageRequestsBanner.tsx
Unescape Escape View File

@ -20,7 +20,7 @@ const StyledMessageRequestBanner = styled.div`
background: var(--color-request-banner-background);
transition: var(--session-transition-duration);
transition: var(--default-duration);
&:hover {
background: var(--color-clickable-hovered);

82
ts/components/leftpane/overlay/OverlayChooseAction.tsx
Unescape Escape View File

@ -0,0 +1,82 @@
import React from 'react';
// tslint:disable: use-simple-attributes no-submodule-imports
import { useDispatch } from 'react-redux';
import { resetOverlayMode, setOverlayMode } from '../../../state/ducks/section';
import useKey from 'react-use/lib/useKey';
import styled from 'styled-components';
import { SessionIcon, SessionIconType } from '../../icon';
const StyledActionRow = styled.button`
border: none;
width: 100%;
display: flex;
align-items: center;
border-bottom: 1px var(--color-session-border) solid;
transition-duration: 0.25s;
&:first-child {
border-top: 1px var(--color-session-border) solid;
}
:hover {
background: var(--color-clickable-hovered);
}
`;
const StyledActionText = styled.span`
color: var(--color-text);
font-size: 18px;
padding: 5px 0px 5px 10px;
`;
const StyledIcon = styled.div`
width: 58px;
`;
const IconOnActionRow = (props: { iconType: SessionIconType }) => {
return (
<StyledIcon>
<SessionIcon iconSize="medium" iconType={props.iconType} />
</StyledIcon>
);
};
export const OverlayChooseAction = () => {
const dispatch = useDispatch();
function closeOverlay() {
dispatch(resetOverlayMode());
}
function openNewMessage() {
dispatch(setOverlayMode('message'));
}
function openCreateGroup() {
dispatch(setOverlayMode('closed-group'));
}
function openJoinCommunity() {
dispatch(setOverlayMode('open-group'));
}
useKey('Escape', closeOverlay);
return (
<div className="module-left-pane-overlay">
<StyledActionRow onClick={openNewMessage}>
<IconOnActionRow iconType="chatBubble" />
<StyledActionText>{window.i18n('newMessage')}</StyledActionText>
</StyledActionRow>
<StyledActionRow onClick={openCreateGroup}>
<IconOnActionRow iconType="group" />
<StyledActionText>{window.i18n('createGroup')}</StyledActionText>
</StyledActionRow>
<StyledActionRow onClick={openJoinCommunity}>
<IconOnActionRow iconType="communities" />
<StyledActionText>{window.i18n('joinOpenGroup')}</StyledActionText>
</StyledActionRow>
</div>
);
};

6
ts/components/leftpane/overlay/OverlayClosedGroup.tsx
Unescape Escape View File

@ -9,7 +9,7 @@ import { MemberListItem } from '../../MemberListItem';
import { OverlayHeader } from './OverlayHeader';
// tslint:disable: no-submodule-imports use-simple-attributes
import { setOverlayMode } from '../../../state/ducks/section';
import { resetOverlayMode } from '../../../state/ducks/section';
import { getPrivateContactsPubkeys } from '../../../state/selectors/conversations';
import { SpacerLG } from '../../basic/Text';
import { MainViewController } from '../../MainViewController';
@ -24,7 +24,7 @@ export const OverlayClosedGroup = () => {
const [selectedMemberIds, setSelectedMemberIds] = useState<Array<string>>([]);
function closeOverlay() {
dispatch(setOverlayMode(undefined));
dispatch(resetOverlayMode());
}
function handleSelectMember(memberId: string) {
@ -59,7 +59,7 @@ export const OverlayClosedGroup = () => {
useKey('Escape', closeOverlay);
const title = window.i18n('newClosedGroup');
const title = window.i18n('createGroup');
const buttonText = window.i18n('done');
const subtitle = window.i18n('createClosedGroupNamePrompt');
const placeholder = window.i18n('createClosedGroupPlaceholder');

63
ts/components/leftpane/overlay/OverlayHeader.tsx
Unescape Escape View File

@ -1,34 +1,71 @@
import React from 'react';
import { useDispatch } from 'react-redux';
import styled from 'styled-components';
import { setOverlayMode } from '../../../state/ducks/section';
import { SpacerMD } from '../../basic/Text';
import { Flex } from '../../basic/Flex';
import { SpacerSM } from '../../basic/Text';
import { SessionIconButton } from '../../icon';
const StyledGreenBorder = styled.hr`
position: absolute;
color: var(--color-accent);
background-color: var(--color-accent);
height: 5px;
left: -10px;
right: -10px;
margin-top: 7px;
border: none;
z-index: 1;
`;
const StyledWhiteBorder = styled.hr`
width: 100%;
position: relative;
height: 1px;
opacity: 0.3;
margin-top: 2px;
margin-bottom: 40px;
`;
const StyledTitle = styled.h2`
text-align: center;
margin-top: 0px;
`;
const StyledSubTitle = styled.h3`
text-align: center;
padding-top: 22px;
position: relative;
margin-bottom: 6px;
`;
export const OverlayHeader = ({ subtitle, title }: { title: string; subtitle: string }) => {
const dispatch = useDispatch();
const returnToActionChooser = () => {
dispatch(setOverlayMode('choose-action'));
};
return (
<>
<div className="exit">
<Flex container={true} width="100%" padding="var(--margins-xs)">
<SessionIconButton
iconSize="small"
iconSize="medium"
iconType="chevron"
iconRotation={90}
onClick={() => {
dispatch(setOverlayMode(undefined));
}}
onClick={returnToActionChooser}
/>
</div>
</Flex>
<SpacerMD />
<SpacerSM />
<h2>{title}</h2>
<StyledTitle>{title}</StyledTitle>
<h3>
<StyledSubTitle>
{subtitle}
<hr className="green-border" />
</h3>
<hr className="white-border" />
<StyledGreenBorder />
</StyledSubTitle>
<StyledWhiteBorder />
</>
);
};

106
ts/components/leftpane/overlay/OverlayMessage.tsx
Unescape Escape View File

@ -6,33 +6,62 @@ import { SessionButton, SessionButtonColor, SessionButtonType } from '../../basi
import { SessionIdEditable } from '../../basic/SessionIdEditable';
import { SessionSpinner } from '../../basic/SessionSpinner';
import { OverlayHeader } from './OverlayHeader';
import { setOverlayMode } from '../../../state/ducks/section';
import { resetOverlayMode } from '../../../state/ducks/section';
import { PubKey } from '../../../session/types';
import { ConversationTypeEnum } from '../../../models/conversationAttributes';
import { SNodeAPI } from '../../../session/apis/snode_api';
import { onsNameRegex } from '../../../session/apis/snode_api/SNodeAPI';
import { getConversationController } from '../../../session/conversations';
import { ToastUtils } from '../../../session/utils';
import { ToastUtils, UserUtils } from '../../../session/utils';
import { openConversationWithMessages } from '../../../state/ducks/conversations';
import useKey from 'react-use/lib/useKey';
import { YourSessionIDPill, YourSessionIDSelectable } from '../../basic/YourSessionIDPill';
import { Flex } from '../../basic/Flex';
import { SessionIconButton } from '../../icon';
import { SpacerMD } from '../../basic/Text';
function copyOurSessionID() {
const ourSessionId = UserUtils.getOurPubKeyStrFromCache();
if (!ourSessionId) {
return;
}
window.clipboard.writeText(ourSessionId);
ToastUtils.pushCopiedToClipBoard();
}
export const OverlayMessage = () => {
const dispatch = useDispatch();
function closeOverlay() {
dispatch(setOverlayMode(undefined));
dispatch(resetOverlayMode());
}
useKey('Escape', closeOverlay);
const [pubkeyOrOns, setPubkeyOrOns] = useState('');
const [loading, setLoading] = useState(false);
const title = window.i18n('newSession');
const title = window.i18n('newMessage');
const buttonText = window.i18n('next');
const descriptionLong = window.i18n('usersCanShareTheir...');
const subtitle = window.i18n('enterSessionIDOrONSName');
const placeholder = window.i18n('enterSessionIDOfRecipient');
async function openConvoOnceResolved(resolvedSessionID: string) {
const convo = await getConversationController().getOrCreateAndWait(
resolvedSessionID,
ConversationTypeEnum.PRIVATE
);
// we now want to show a conversation we just started on the leftpane, even if we did not sent a message to it yet
if (!convo.isActive() || !convo.isApproved()) {
convo.set({ active_at: Date.now(), isApproved: true });
await convo.commit();
}
await openConversationWithMessages({ conversationKey: resolvedSessionID, messageId: null });
closeOverlay();
}
async function handleMessageButtonClick() {
if ((!pubkeyOrOns && !pubkeyOrOns.length) || !pubkeyOrOns.trim().length) {
ToastUtils.pushToastError('invalidPubKey', window.i18n('invalidNumberError')); // or ons name
@ -41,42 +70,29 @@ export const OverlayMessage = () => {
const pubkeyorOnsTrimmed = pubkeyOrOns.trim();
if (!PubKey.validateWithErrorNoBlinding(pubkeyorOnsTrimmed)) {
// this is a pubkey
await getConversationController().getOrCreateAndWait(
pubkeyorOnsTrimmed,
ConversationTypeEnum.PRIVATE
);
await openConversationWithMessages({ conversationKey: pubkeyorOnsTrimmed, messageId: null });
closeOverlay();
} else {
// this might be an ONS, validate the regex first
const mightBeOnsName = new RegExp(onsNameRegex, 'g').test(pubkeyorOnsTrimmed);
if (!mightBeOnsName) {
ToastUtils.pushToastError('invalidPubKey', window.i18n('invalidNumberError'));
return;
}
setLoading(true);
try {
const resolvedSessionID = await SNodeAPI.getSessionIDForOnsName(pubkeyorOnsTrimmed);
if (PubKey.validateWithErrorNoBlinding(resolvedSessionID)) {
throw new Error('Got a resolved ONS but the returned entry is not a vlaid SessionID');
}
// this is a pubkey
await getConversationController().getOrCreateAndWait(
resolvedSessionID,
ConversationTypeEnum.PRIVATE
);
await openConversationWithMessages({ conversationKey: resolvedSessionID, messageId: null });
closeOverlay();
} catch (e) {
window?.log?.warn('failed to resolve ons name', pubkeyorOnsTrimmed, e);
ToastUtils.pushToastError('invalidPubKey', window.i18n('failedResolveOns'));
} finally {
setLoading(false);
await openConvoOnceResolved(pubkeyOrOns);
return;
}
// this might be an ONS, validate the regex first
const mightBeOnsName = new RegExp(onsNameRegex, 'g').test(pubkeyorOnsTrimmed);
if (!mightBeOnsName) {
ToastUtils.pushToastError('invalidPubKey', window.i18n('invalidNumberError'));
return;
}
setLoading(true);
try {
const resolvedSessionID = await SNodeAPI.getSessionIDForOnsName(pubkeyorOnsTrimmed);
if (PubKey.validateWithErrorNoBlinding(resolvedSessionID)) {
throw new Error('Got a resolved ONS but the returned entry is not a vlaid SessionID');
}
// this is a pubkey
await openConvoOnceResolved(resolvedSessionID);
} catch (e) {
window?.log?.warn('failed to resolve ons name', pubkeyorOnsTrimmed, e);
ToastUtils.pushToastError('invalidPubKey', window.i18n('failedResolveOns'));
} finally {
setLoading(false);
}
}
@ -93,7 +109,15 @@ export const OverlayMessage = () => {
<SessionSpinner loading={loading} />
<div className="session-description-long">{descriptionLong}</div>
<Flex container={true} width="100%">
<SpacerMD />
<YourSessionIDPill />
<SpacerMD />
</Flex>
<Flex container={true} justifyContent="space-between" alignItems="center">
<YourSessionIDSelectable />
<SessionIconButton iconSize="small" iconType="copy" onClick={copyOurSessionID} />
</Flex>
<SessionButton
buttonColor={SessionButtonColor.Green}
buttonType={SessionButtonType.BrandOutline}

6
ts/components/leftpane/overlay/OverlayMessageRequest.tsx
Unescape Escape View File

@ -10,7 +10,7 @@ import {
import { MemoConversationListItemWithDetails } from '../conversation-list-item/ConversationListItem';
import styled from 'styled-components';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../../basic/SessionButton';
import { SectionType, setOverlayMode, showLeftPaneSection } from '../../../state/ducks/section';
import { resetOverlayMode, SectionType, showLeftPaneSection } from '../../../state/ducks/section';
import { getConversationController } from '../../../session/conversations';
import { forceSyncConfigurationNowIfNeeded } from '../../../session/utils/syncUtils';
import { BlockedNumberController } from '../../../util';
@ -25,7 +25,7 @@ export const OverlayMessageRequest = () => {
useKey('Escape', closeOverlay);
const dispatch = useDispatch();
function closeOverlay() {
dispatch(setOverlayMode(undefined));
dispatch(resetOverlayMode());
}
const convoRequestCount = useSelector(getConversationRequests).length;
const messageRequests = useSelector(getConversationRequests);
@ -81,7 +81,7 @@ export const OverlayMessageRequest = () => {
// if no more requests, return to placeholder screen
if (convoRequestCount === newConvosBlocked.length) {
dispatch(setOverlayMode(undefined));
dispatch(resetOverlayMode());
dispatch(showLeftPaneSection(SectionType.Message));
dispatch(resetConversationExternal());
}

4
ts/components/leftpane/overlay/OverlayOpenGroup.tsx
Unescape Escape View File

@ -8,7 +8,7 @@ import { SessionIdEditable } from '../../basic/SessionIdEditable';
import { SessionSpinner } from '../../basic/SessionSpinner';
import { OverlayHeader } from './OverlayHeader';
import { useDispatch } from 'react-redux';
import { setOverlayMode } from '../../../state/ducks/section';
import { resetOverlayMode } from '../../../state/ducks/section';
import { joinOpenGroupV2WithUIEvents } from '../../../session/apis/open_group_api/opengroupV2/JoinOpenGroupV2';
import { openGroupV2CompleteURLRegex } from '../../../session/apis/open_group_api/utils/OpenGroupUtils';
import { ToastUtils } from '../../../session/utils';
@ -32,7 +32,7 @@ export const OverlayOpenGroup = () => {
const [groupUrl, setGroupUrl] = useState('');
function closeOverlay() {
dispatch(setOverlayMode(undefined));
dispatch(resetOverlayMode());
}
async function onEnterPressed() {

25
ts/state/ducks/section.tsx
Unescape Escape View File

@ -4,6 +4,7 @@ export const FOCUS_SECTION = 'FOCUS_SECTION';
export const FOCUS_SETTINGS_SECTION = 'FOCUS_SETTINGS_SECTION';
export const IS_APP_FOCUSED = 'IS_APP_FOCUSED';
export const OVERLAY_MODE = 'OVERLAY_MODE';
export const RESET_OVERLAY_MODE = 'RESET_OVERLAY_MODE';
export enum SectionType {
Profile,
@ -34,6 +35,10 @@ type OverlayModeActionType = {
payload: OverlayMode;
};
type ResetOverlayModeActionType = {
type: 'RESET_OVERLAY_MODE';
};
export function showLeftPaneSection(section: SectionType): FocusSectionActionType {
return {
type: FOCUS_SECTION,
@ -51,11 +56,11 @@ export function setIsAppFocused(focused: boolean): IsAppFocusedActionType {
}
export type OverlayMode =
| 'choose-action'
| 'message'
| 'open-group'
| 'closed-group'
| 'message-requests'
| undefined;
| 'message-requests';
export function setOverlayMode(overlayMode: OverlayMode): OverlayModeActionType {
return {
@ -64,6 +69,12 @@ export function setOverlayMode(overlayMode: OverlayMode): OverlayModeActionType
};
}
export function resetOverlayMode(): ResetOverlayModeActionType {
return {
type: RESET_OVERLAY_MODE,
};
}
export function showSettingsSection(
category: SessionSettingCategory
): FocusSettingsSectionActionType {
@ -77,20 +88,21 @@ export const actions = {
showLeftPaneSection,
showSettingsSection,
setOverlayMode,
resetOverlayMode,
};
export const initialSectionState: SectionStateType = {
focusedSection: SectionType.Message,
focusedSettingsSection: undefined,
isAppFocused: false,
overlayMode: undefined,
overlayMode: 'message',
};
export type SectionStateType = {
focusedSection: SectionType;
focusedSettingsSection?: SessionSettingCategory;
isAppFocused: boolean;
overlayMode: OverlayMode;
overlayMode: OverlayMode | undefined;
};
export const reducer = (
@ -138,6 +150,11 @@ export const reducer = (
...state,
overlayMode: payload,
};
case RESET_OVERLAY_MODE:
return {
...state,
overlayMode: undefined,
};
default:
return state;
}

2
ts/state/selectors/section.ts
Unescape Escape View File

@ -23,5 +23,5 @@ export const getIsAppFocused = createSelector(
export const getOverlayMode = createSelector(
getSection,
(state: SectionStateType): OverlayMode => state.overlayMode
(state: SectionStateType): OverlayMode | undefined => state.overlayMode
);

3
ts/types/LocalizerKeys.ts
Unescape Escape View File

@ -1,6 +1,5 @@
export type LocalizerKeys =
| 'removePassword'
| 'newClosedGroup'
| 'userUnbanFailed'
| 'changePassword'
| 'saved'
@ -131,7 +130,6 @@ export type LocalizerKeys =
| 'banUserAndDeleteAll'
| 'joinOpenGroupAfterInvitationConfirmationDesc'
| 'invalidNumberError'
| 'newSession'
| 'contextMenuNoSuggestions'
| 'recoveryPhraseRevealButtonText'
| 'banUser'
@ -231,6 +229,7 @@ export type LocalizerKeys =
| 'displayName'
| 'invalidSessionId'
| 'audioPermissionNeeded'
| 'createGroup'
| 'add'
| 'messageRequests'
| 'show'

Write Preview
Loading…
Cancel
Save