From 95476fba2f40051e6a65a92f7f8faff285faadcc Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Mon, 19 Aug 2024 16:59:35 +1000 Subject: [PATCH] feat: move openUrl modal to its own as maxHeight is linked to url len --- ts/components/basic/SessionToggle.tsx | 2 +- .../message/message-content/MessageBody.tsx | 2 +- .../message-content/MessageLinkPreview.tsx | 2 +- ts/components/dialog/DeleteAccountModal.tsx | 1 - ts/components/dialog/OpenUrlModal.tsx | 42 ++++++++++------ ts/components/dialog/SessionConfirm.tsx | 50 ++----------------- ts/components/dialog/StyledSubText.tsx | 19 +++++++ ts/interactions/conversationInteractions.ts | 2 - ts/state/ducks/modalDialog.tsx | 2 +- 9 files changed, 54 insertions(+), 68 deletions(-) create mode 100644 ts/components/dialog/StyledSubText.tsx diff --git a/ts/components/basic/SessionToggle.tsx b/ts/components/basic/SessionToggle.tsx index 43cc17c65..95c41f8d6 100644 --- a/ts/components/basic/SessionToggle.tsx +++ b/ts/components/basic/SessionToggle.tsx @@ -60,7 +60,7 @@ export const SessionToggle = (props: Props) => { props.onClick(); }; - if (props.confirmationDialogParams && props.confirmationDialogParams.shouldShowConfirm) { + if (props.confirmationDialogParams) { // If item needs a confirmation dialog to turn ON, render it const closeConfirmModal = () => { dispatch(updateConfirmModal(null)); diff --git a/ts/components/conversation/message/message-content/MessageBody.tsx b/ts/components/conversation/message/message-content/MessageBody.tsx index cd1c9a305..689a6adc2 100644 --- a/ts/components/conversation/message/message-content/MessageBody.tsx +++ b/ts/components/conversation/message/message-content/MessageBody.tsx @@ -6,10 +6,10 @@ import styled from 'styled-components'; import { RenderTextCallbackType } from '../../../../types/Util'; import { getEmojiSizeClass, SizeClassType } from '../../../../util/emoji'; import { LinkPreviews } from '../../../../util/linkPreviews'; -import { showLinkVisitWarningDialog } from '../../../dialog/SessionConfirm'; import { AddMentions } from '../../AddMentions'; import { AddNewLines } from '../../AddNewLines'; import { Emojify } from '../../Emojify'; +import { showLinkVisitWarningDialog } from '../../../dialog/OpenUrlModal'; const linkify = LinkifyIt(); diff --git a/ts/components/conversation/message/message-content/MessageLinkPreview.tsx b/ts/components/conversation/message/message-content/MessageLinkPreview.tsx index a9216c3d9..83ce99b3d 100644 --- a/ts/components/conversation/message/message-content/MessageLinkPreview.tsx +++ b/ts/components/conversation/message/message-content/MessageLinkPreview.tsx @@ -9,9 +9,9 @@ import { } from '../../../../state/selectors'; import { useIsMessageSelectionMode } from '../../../../state/selectors/selectedConversation'; import { isImageAttachment } from '../../../../types/Attachment'; -import { showLinkVisitWarningDialog } from '../../../dialog/SessionConfirm'; import { SessionIcon } from '../../../icon'; import { Image } from '../../Image'; +import { showLinkVisitWarningDialog } from '../../../dialog/OpenUrlModal'; export type MessageLinkPreviewSelectorProps = Pick< MessageRenderingProps, diff --git a/ts/components/dialog/DeleteAccountModal.tsx b/ts/components/dialog/DeleteAccountModal.tsx index e9bc599c2..46cae8f0d 100644 --- a/ts/components/dialog/DeleteAccountModal.tsx +++ b/ts/components/dialog/DeleteAccountModal.tsx @@ -25,7 +25,6 @@ const DescriptionBeforeAskingConfirmation = (props: { return ( <> {window.i18n('clearDataAllDescription')} - {window.i18n('clearDataAllDescription')} - - - +
+ + + +
- +
- +
); } + +export const showLinkVisitWarningDialog = (urlToOpen: string, dispatch: Dispatch) => { + dispatch( + updateOpenUrlModal({ + urlToOpen, + }) + ); +}; diff --git a/ts/components/dialog/SessionConfirm.tsx b/ts/components/dialog/SessionConfirm.tsx index 0b52c258d..e1bbf26b8 100644 --- a/ts/components/dialog/SessionConfirm.tsx +++ b/ts/components/dialog/SessionConfirm.tsx @@ -1,35 +1,16 @@ -import { Dispatch, useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { useDispatch } from 'react-redux'; import useKey from 'react-use/lib/useKey'; -import styled from 'styled-components'; import { useLastMessage } from '../../hooks/useParamSelector'; import { updateConversationInteractionState } from '../../interactions/conversationInteractions'; import { ConversationInteractionStatus } from '../../interactions/types'; -import { updateConfirmModal, updateOpenUrlModal } from '../../state/ducks/modalDialog'; +import { updateConfirmModal } from '../../state/ducks/modalDialog'; import { SessionWrapperModal } from '../SessionWrapperModal'; import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton'; -import { SessionHtmlRenderer } from '../basic/SessionHTMLRenderer'; import { SessionRadioGroup, SessionRadioItems } from '../basic/SessionRadioGroup'; import { SpacerLG } from '../basic/Text'; -import { SessionIcon, SessionIconSize, SessionIconType } from '../icon'; import { SessionSpinner } from '../loading'; - -const StyledSubText = styled(SessionHtmlRenderer)<{ textLength: number }>` - font-size: var(--font-size-md); - line-height: 1.5; - margin-bottom: var(--margins-lg); - - max-width: ${props => - props.textLength > 90 - ? '60ch' - : '33ch'}; // this is ugly, but we want the dialog description to have multiple lines when a short text is displayed -`; - -const StyledSubMessageText = styled(SessionHtmlRenderer)` - // Overrides SASS in this one case - margin-top: 0; - margin-bottom: var(--margins - md); -`; +import { StyledSubMessageText, StyledSubText } from './StyledSubText'; export interface SessionConfirmDialogProps { message?: string; @@ -58,9 +39,6 @@ export interface SessionConfirmDialogProps { hideCancel?: boolean; okTheme?: SessionButtonColor; closeTheme?: SessionButtonColor; - sessionIcon?: SessionIconType; - iconSize?: SessionIconSize; - shouldShowConfirm?: boolean | undefined; showExitIcon?: boolean | undefined; headerReverse?: boolean; conversationId?: string; @@ -78,9 +56,6 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => { onClickOk, onClickClose, hideCancel = false, - sessionIcon, - iconSize, - shouldShowConfirm, onClickCancel, showExitIcon, headerReverse, @@ -136,10 +111,6 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => { } }, [isLoading, conversationId, lastMessage?.interactionType]); - if (shouldShowConfirm && !shouldShowConfirm) { - return null; - } - /** * Performs specified on close action then removes the modal. */ @@ -160,13 +131,6 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => { {!showHeader && }
- {sessionIcon && iconSize && ( - <> - - - - )} - {messageSub && ( { ); }; - -export const showLinkVisitWarningDialog = (urlToOpen: string, dispatch: Dispatch) => { - dispatch( - updateOpenUrlModal({ - urlToOpen, - }) - ); -}; diff --git a/ts/components/dialog/StyledSubText.tsx b/ts/components/dialog/StyledSubText.tsx new file mode 100644 index 000000000..b5024b55d --- /dev/null +++ b/ts/components/dialog/StyledSubText.tsx @@ -0,0 +1,19 @@ +import styled from 'styled-components'; +import { SessionHtmlRenderer } from '../basic/SessionHTMLRenderer'; + +export const StyledSubText = styled(SessionHtmlRenderer)<{ textLength: number }>` + font-size: var(--font-size-md); + line-height: 1.5; + margin-bottom: var(--margins-lg); + + max-width: ${props => + props.textLength > 90 + ? '60ch' + : '33ch'}; // this is ugly, but we want the dialog description to have multiple lines when a short text is displayed +`; + +export const StyledSubMessageText = styled(SessionHtmlRenderer)` + // Overrides SASS in this one case + margin-top: 0; + margin-bottom: var(--margins-md); +`; diff --git a/ts/interactions/conversationInteractions.ts b/ts/interactions/conversationInteractions.ts index 1cb4d029b..6489805c8 100644 --- a/ts/interactions/conversationInteractions.ts +++ b/ts/interactions/conversationInteractions.ts @@ -715,8 +715,6 @@ export async function showLinkSharingConfirmationModalDialog(e: any) { if (!alreadyDisplayedPopup) { window.inboxStore?.dispatch( updateConfirmModal({ - shouldShowConfirm: - !window.getSettingValue(SettingsKey.settingsLinkPreview) && !alreadyDisplayedPopup, title: window.i18n('linkPreviewsSend'), message: window.i18n('linkPreviewsSendModalDescription'), okTheme: SessionButtonColor.Danger, diff --git a/ts/state/ducks/modalDialog.tsx b/ts/state/ducks/modalDialog.tsx index 0422858d4..a526e295e 100644 --- a/ts/state/ducks/modalDialog.tsx +++ b/ts/state/ducks/modalDialog.tsx @@ -155,7 +155,7 @@ const ModalSlice = createSlice({ return { ...state, hideRecoveryPasswordModalState: action.payload }; }, updateOpenUrlModal(state, action: PayloadAction) { - return { ...state, updateOpenUrlModal: action.payload }; + return { ...state, openUrlModal: action.payload }; }, updateLightBoxOptions(state, action: PayloadAction) { const lightBoxOptions = action.payload;