From 4ff36f46c46c4f32f45302234c7c73055d9ba59e Mon Sep 17 00:00:00 2001 From: hackerbirds <120066692+hackerbirds@users.noreply.github.com> Date: Thu, 15 Jun 2023 22:52:29 +0200 Subject: [PATCH] Modernize forward message modal * ModalHost is replaced with Modal. * The CSS is simplified down to unify the theme palette --- .../components/ForwardMessageModal.scss | 107 +------ stylesheets/components/Modal.scss | 12 +- ts/components/ForwardMessagesModal.tsx | 285 ++++++++---------- 3 files changed, 135 insertions(+), 269 deletions(-) diff --git a/stylesheets/components/ForwardMessageModal.scss b/stylesheets/components/ForwardMessageModal.scss index a4b36bed9..4750dcb30 100644 --- a/stylesheets/components/ForwardMessageModal.scss +++ b/stylesheets/components/ForwardMessageModal.scss @@ -2,27 +2,12 @@ // SPDX-License-Identifier: AGPL-3.0-only .module-ForwardMessageModal { - $padding: 16px; - @include popper-shadow(); - border-radius: 8px; - display: flex; flex-direction: column; margin-block: 0; margin-inline: auto; - max-height: 90vh; max-width: 360px; width: 95%; - @include light-theme() { - background: $color-white; - color: $color-gray-90; - } - - @include dark-theme() { - background: $color-gray-75; - color: $color-gray-05; - } - .module-conversation-list { // remove horizontal padding so ListTiles extend to the edges padding: 0; @@ -43,6 +28,7 @@ display: flex; justify-content: center; position: relative; + @include font-body-1-bold; &--edit { border-bottom: 1px solid $color-gray-15; @@ -51,73 +37,6 @@ border-color: $color-gray-60; } } - - &--close { - @include button-reset; - position: absolute; - inset-inline-end: 16px; - - height: 20px; - width: 20px; - - @include light-theme { - @include color-svg('../images/icons/v3/x/x.svg', $color-gray-75); - } - - @include dark-theme { - @include color-svg('../images/icons/v3/x/x.svg', $color-gray-15); - } - - @include keyboard-mode { - &:focus { - background-color: $color-ultramarine; - } - } - } - - &--back { - @include button-reset; - - height: 24px; - inset-inline-start: 16px; - position: absolute; - width: 24px; - - @include light-theme { - @include color-svg( - '../images/icons/v3/chevron/chevron-left.svg', - $color-gray-60 - ); - } - - @include keyboard-mode { - &:focus { - @include color-svg( - '../images/icons/v3/chevron/chevron-left.svg', - $color-ultramarine - ); - } - } - - @include dark-theme { - @include color-svg( - '../images/icons/v3/chevron/chevron-left.svg', - $color-gray-25 - ); - } - @include dark-keyboard-mode { - &:hover { - @include color-svg( - '../images/icons/v3/chevron/chevron-left.svg', - $color-ultramarine-light - ); - } - } - } - - h1 { - @include font-body-1-bold; - } } &__list-wrapper { @@ -176,26 +95,18 @@ } } + // Disable vertical scrolling on the modal pages + // since the elements inside are scrollable themselves + .module-Modal__body { + overflow-y: hidden; + } + &__footer { @include font-body-2; - align-items: center; - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; display: flex; + align-items: center; + flex-grow: 1; justify-content: space-between; - margin-top: 0; - padding: $padding; - position: relative; - - @include light-theme { - background-color: $color-gray-02; - color: $color-gray-60; - } - - @include dark-theme() { - background: $color-gray-65; - color: $color-gray-25; - } } // Disable cursor since images are non-clickable diff --git a/stylesheets/components/Modal.scss b/stylesheets/components/Modal.scss index 3d8d54c97..30581d077 100644 --- a/stylesheets/components/Modal.scss +++ b/stylesheets/components/Modal.scss @@ -41,6 +41,7 @@ &__back-button { @include button-reset; + border-radius: 4px; height: 20px; width: 20px; @@ -68,16 +69,7 @@ &:hover, &:focus { - background: $color-gray-45; - &::before { - background-color: $color-ultramarine; - } - } - &:active { - background: $color-gray-45; - &::before { - background-color: $color-ultramarine; - } + box-shadow: 0 0 0 2px $color-ultramarine; } } diff --git a/ts/components/ForwardMessagesModal.tsx b/ts/components/ForwardMessagesModal.tsx index 954d46032..84084dc89 100644 --- a/ts/components/ForwardMessagesModal.tsx +++ b/ts/components/ForwardMessagesModal.tsx @@ -11,9 +11,6 @@ import React, { } from 'react'; import type { MeasuredComponentProps } from 'react-measure'; import Measure from 'react-measure'; -import { animated } from '@react-spring/web'; - -import classNames from 'classnames'; import { AttachmentList } from './conversation/AttachmentList'; import type { AttachmentType } from '../types/Attachment'; import { Button } from './Button'; @@ -25,11 +22,9 @@ import type { ConversationType } from '../state/ducks/conversations'; import type { PreferredBadgeSelectorType } from '../state/selectors/badges'; import type { LocalizerType, ThemeType } from '../types/Util'; import type { SmartCompositionTextAreaProps } from '../state/smart/CompositionTextArea'; -import { ModalHost } from './ModalHost'; import { SearchInput } from './SearchInput'; import { StagedLinkPreview } from './conversation/StagedLinkPreview'; import { filterAndSortConversationsByRecent } from '../util/filterAndSortConversations'; -import { useAnimated } from '../hooks/useAnimated'; import { shouldNeverBeCalled, asyncShouldNeverBeCalled, @@ -46,6 +41,7 @@ import type { ShowToastAction } from '../state/ducks/toast'; import type { HydratedBodyRangesType } from '../types/BodyRange'; import { BodyRange } from '../types/BodyRange'; import { UserText } from './UserText'; +import { Modal } from './Modal'; export type DataPropsType = { candidateConversations: ReadonlyArray; @@ -212,24 +208,13 @@ export function ForwardMessagesModal({ [contactLookup, selectedContacts, setSelectedContacts] ); - const { close, modalStyles, overlayStyles } = useAnimated(onClose, { - getFrom: () => ({ opacity: 0, transform: 'translateY(48px)' }), - getTo: isOpen => - isOpen - ? { opacity: 1, transform: 'translateY(0px)' } - : { - opacity: 0, - transform: 'translateY(48px)', - }, - }); - const handleBackOrClose = useCallback(() => { if (isEditingMessage) { setIsEditingMessage(false); } else { - close(); + onClose(); } - }, [isEditingMessage, close, setIsEditingMessage]); + }, [isEditingMessage, onClose, setIsEditingMessage]); const rowCount = filteredConversations.length; const getRow = (index: number): undefined | Row => { @@ -263,6 +248,38 @@ export function ForwardMessagesModal({ }; }, []); + const footer = ( +
+
+ {selectedContacts.map((contact, index) => { + return ( + + + {index < selectedContacts.length - 1 ? ', ' : ''} + + ); + })} +
+
+ {isEditingMessage || !isLonelyDraftEditable ? ( +
+
+ ); + return ( <> {cannotMessage && ( @@ -275,155 +292,101 @@ export function ForwardMessagesModal({ {i18n('icu:GroupV2--cannot-send')} )} - - -
- {isEditingMessage ? ( - - ) : ( -
- {isEditingMessage && lonelyDraft != null ? ( - { - onChange([{ ...lonelyDraft, messageBody, bodyRanges }]); - }} - onChangeAttachments={attachments => { - onChange([{ ...lonelyDraft, attachments }]); - }} - removeLinkPreview={removeLinkPreview} - theme={theme} + {isEditingMessage && lonelyDraft != null ? ( + { + onChange([{ ...lonelyDraft, messageBody, bodyRanges }]); + }} + onChangeAttachments={attachments => { + onChange([{ ...lonelyDraft, attachments }]); + }} + removeLinkPreview={removeLinkPreview} + theme={theme} + i18n={i18n} + RenderCompositionTextArea={RenderCompositionTextArea} + onSubmit={forwardMessages} + /> + ) : ( +
+ { + setSearchTerm(event.target.value); + }} + ref={inputRef} + value={searchTerm} /> - ) : ( -
- { - setSearchTerm(event.target.value); - }} - ref={inputRef} - value={searchTerm} - /> - {candidateConversations.length ? ( - - {({ contentRect, measureRef }: MeasuredComponentProps) => ( -
- { - if ( - disabledReason !== - ContactCheckboxDisabledReason.MaximumContactsSelected - ) { - toggleSelectedConversation(conversationId); - } - }} - lookupConversationWithoutUuid={asyncShouldNeverBeCalled} - showConversation={shouldNeverBeCalled} - showUserNotFoundModal={shouldNeverBeCalled} - setIsFetchingUUID={shouldNeverBeCalled} - onSelectConversation={shouldNeverBeCalled} - blockConversation={shouldNeverBeCalled} - removeConversation={shouldNeverBeCalled} - onOutgoingAudioCallInConversation={shouldNeverBeCalled} - onOutgoingVideoCallInConversation={shouldNeverBeCalled} - renderMessageSearchResult={() => { - shouldNeverBeCalled(); - return
; - }} - rowCount={rowCount} - shouldRecomputeRowHeights={false} - showChooseGroupMembers={shouldNeverBeCalled} - theme={theme} - /> -
- )} - - ) : ( -
- {i18n('icu:noContactsFound')} -
- )} -
- )} -
-
- {selectedContacts.map((contact, index) => { - return ( - - - {index < selectedContacts.length - 1 ? ', ' : ''} - - ); - })} -
-
- {isEditingMessage || !isLonelyDraftEditable ? ( -
+ {candidateConversations.length ? ( + + {({ contentRect, measureRef }: MeasuredComponentProps) => ( +
+ { + if ( + disabledReason !== + ContactCheckboxDisabledReason.MaximumContactsSelected + ) { + toggleSelectedConversation(conversationId); + } + }} + lookupConversationWithoutUuid={asyncShouldNeverBeCalled} + showConversation={shouldNeverBeCalled} + showUserNotFoundModal={shouldNeverBeCalled} + setIsFetchingUUID={shouldNeverBeCalled} + onSelectConversation={shouldNeverBeCalled} + blockConversation={shouldNeverBeCalled} + removeConversation={shouldNeverBeCalled} + onOutgoingAudioCallInConversation={shouldNeverBeCalled} + onOutgoingVideoCallInConversation={shouldNeverBeCalled} + renderMessageSearchResult={() => { + shouldNeverBeCalled(); + return
; + }} + rowCount={rowCount} + shouldRecomputeRowHeights={false} + showChooseGroupMembers={shouldNeverBeCalled} + theme={theme} + /> +
+ )} + + ) : ( +
+ {i18n('icu:noContactsFound')} +
+ )}
- - + )} + ); }