From e96519445d761b8bcbc40487fbd765a819f39f7f Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 22 Apr 2024 15:04:01 +1000 Subject: [PATCH] feat: removed overlayheader moved some parts into the leftpanesectionheader --- _locales/en/messages.json | 3 - stylesheets/_session_left_pane.scss | 10 --- .../leftpane/LeftPaneSectionHeader.tsx | 62 +++++++++++++--- .../leftpane/overlay/OverlayClosedGroup.tsx | 4 -- .../leftpane/overlay/OverlayCommunity.tsx | 4 -- .../leftpane/overlay/OverlayHeader.tsx | 72 ------------------- .../leftpane/overlay/OverlayMessage.tsx | 5 -- ts/types/LocalizerKeys.ts | 3 - 8 files changed, 53 insertions(+), 110 deletions(-) delete mode 100644 ts/components/leftpane/overlay/OverlayHeader.tsx diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 743246b3e..733a0ace5 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -109,10 +109,8 @@ "copiedToClipboard": "Copied", "copyErrorAndQuit": "Copy error and quit", "copyMessage": "Copy message text", - "copyOpenGroupURL": "Copy Group URL", "couldntFindServerMatching": "Couldn't find the corresponding Community server", "create": "Create", - "createClosedGroupNamePrompt": "Group Name", "createClosedGroupPlaceholder": "Enter a group name", "createConversationNewContact": "Create a conversation with a new contact", "createConversationNewGroup": "Create a group with existing contacts", @@ -371,7 +369,6 @@ "onsErrorNotRecognised": "We couldn't recognise this ONS. Please check it and try again.", "open": "Open", "openGroupInvitation": "Community invitation", - "openGroupURL": "Community URL", "openMessageRequestInbox": "Message Requests", "openMessageRequestInboxDescription": "View your Message Request inbox", "or": "or", diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss index 35997b4e2..64425168f 100644 --- a/stylesheets/_session_left_pane.scss +++ b/stylesheets/_session_left_pane.scss @@ -80,16 +80,6 @@ $session-compose-margin: 20px; height: 100%; } - &__header { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - height: var(--main-view-header-height); - padding-inline-end: 7px; - transition: var(--default-duration); - } - &__title { padding-inline-end: var(--margins-sm); padding-inline-start: var(--margins-sm); diff --git a/ts/components/leftpane/LeftPaneSectionHeader.tsx b/ts/components/leftpane/LeftPaneSectionHeader.tsx index f5b3f008e..527fd7238 100644 --- a/ts/components/leftpane/LeftPaneSectionHeader.tsx +++ b/ts/components/leftpane/LeftPaneSectionHeader.tsx @@ -1,16 +1,22 @@ import { useDispatch, useSelector } from 'react-redux'; import styled from 'styled-components'; import { recoveryPhraseModal } from '../../state/ducks/modalDialog'; -import { SectionType } from '../../state/ducks/section'; +import { SectionType, setLeftOverlayMode } from '../../state/ducks/section'; import { disableRecoveryPhrasePrompt } from '../../state/ducks/userConfig'; -import { getFocusedSection, getIsMessageRequestOverlayShown } from '../../state/selectors/section'; +import { getFocusedSection, getLeftOverlayMode } from '../../state/selectors/section'; import { getShowRecoveryPhrasePrompt } from '../../state/selectors/userConfig'; import { isSignWithRecoveryPhrase } from '../../util/storage'; import { Flex } from '../basic/Flex'; import { SessionButton } from '../basic/SessionButton'; import { SpacerMD } from '../basic/Text'; import { MenuButton } from '../buttons'; -import { SessionIcon } from '../icon'; +import { SessionIcon, SessionIconButton } from '../icon'; + +const StyledLeftPaneSectionHeader = styled(Flex)` + height: var(--main-view-header-height); + padding-inline-end: 7px; + transition: var(--default-duration); +`; const SectionTitle = styled.h1` padding-top: var(--margins-xs); @@ -117,30 +123,68 @@ export const LeftPaneBanner = () => { export const LeftPaneSectionHeader = () => { const showRecoveryPhrasePrompt = useSelector(getShowRecoveryPhrasePrompt); const focusedSection = useSelector(getFocusedSection); - const isMessageRequestOverlayShown = useSelector(getIsMessageRequestOverlayShown); + const leftOverlayMode = useSelector(getLeftOverlayMode); + + const dispatch = useDispatch(); + const returnToActionChooser = () => { + dispatch(setLeftOverlayMode('choose-action')); + }; let label: string | undefined; const isMessageSection = focusedSection === SectionType.Message; + let leftOverlayHeading = ''; + + switch (leftOverlayMode) { + case 'open-group': + leftOverlayHeading = window.i18n('joinOpenGroup'); + break; + case 'closed-group': + leftOverlayHeading = window.i18n('createGroup'); + break; + case 'message': + leftOverlayHeading = window.i18n('newMessage'); + break; + case 'message-requests': + leftOverlayHeading = window.i18n('messageRequests'); + break; + case 'choose-action': + default: + leftOverlayHeading = window.i18n('messagesHeader'); + } + switch (focusedSection) { case SectionType.Settings: label = window.i18n('settingsHeader'); break; case SectionType.Message: - label = isMessageRequestOverlayShown - ? window.i18n('messageRequests') - : window.i18n('messagesHeader'); + label = leftOverlayHeading; break; default: } return ( -
+ + {leftOverlayMode && + leftOverlayMode !== 'choose-action' && + leftOverlayMode !== 'message-requests' ? ( + + ) : null} {label} {isMessageSection && } -
+ {showRecoveryPhrasePrompt && } ); diff --git a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx index 35281d215..50f61f814 100644 --- a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx +++ b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx @@ -8,7 +8,6 @@ import { SessionButton } from '../../basic/SessionButton'; import { SessionIdEditable } from '../../basic/SessionIdEditable'; import { SessionSpinner } from '../../loading'; import { MemberListItem } from '../../MemberListItem'; -import { OverlayHeader } from './OverlayHeader'; import { useSet } from '../../../hooks/useSet'; import { VALIDATION } from '../../../session/constants'; @@ -120,9 +119,7 @@ export const OverlayClosedGroup = () => { useKey('Escape', closeOverlay); - const title = window.i18n('createGroup'); const buttonText = window.i18n('create'); - const subtitle = window.i18n('createClosedGroupNamePrompt'); const placeholder = window.i18n('createClosedGroupPlaceholder'); const noContactsForClosedGroup = privateContactsPubkeys.length === 0; @@ -133,7 +130,6 @@ export const OverlayClosedGroup = () => { return (
-
{ useKey('Escape', closeOverlay); - const title = window.i18n('joinOpenGroup'); const buttonText = window.i18n('join'); - const subtitle = window.i18n('openGroupURL'); const placeholder = window.i18n('enterAnOpenGroupURL'); return (
-
{ - const dispatch = useDispatch(); - const returnToActionChooser = () => { - dispatch(setLeftOverlayMode('choose-action')); - }; - - return ( - <> - - - - - - - {title} - - - {subtitle} - - - - - ); -}; diff --git a/ts/components/leftpane/overlay/OverlayMessage.tsx b/ts/components/leftpane/overlay/OverlayMessage.tsx index 761d78add..1b1f429ee 100644 --- a/ts/components/leftpane/overlay/OverlayMessage.tsx +++ b/ts/components/leftpane/overlay/OverlayMessage.tsx @@ -12,7 +12,6 @@ import { resetLeftOverlayMode } from '../../../state/ducks/section'; import { SessionButton } from '../../basic/SessionButton'; import { SessionIdEditable } from '../../basic/SessionIdEditable'; import { SessionSpinner } from '../../loading'; -import { OverlayHeader } from './OverlayHeader'; import { ONSResolve } from '../../../session/apis/snode_api/onsResolve'; import { Flex } from '../../basic/Flex'; @@ -49,9 +48,7 @@ export const OverlayMessage = () => { const [pubkeyOrOns, setPubkeyOrOns] = useState(''); const [loading, setLoading] = useState(false); - const title = window.i18n('newMessage'); const buttonText = window.i18n('next'); - const subtitle = window.i18n('accountIdEnter'); const placeholder = window.i18n('accountIdEnterYourFriends'); const disableNextButton = !pubkeyOrOns || loading; @@ -114,8 +111,6 @@ export const OverlayMessage = () => { return (
- -