diff --git a/_locales/en/messages.json b/_locales/en/messages.json index adafcd090..df9361b1b 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -5150,6 +5150,10 @@ "messageformat": "Disappears in", "description": "In the message details screen, shown as a label of how long it will be before the message disappears" }, + "icu:MessageDetail__view-edits": { + "messageformat": "View edit history", + "description": "Link to view a message's edit history" + }, "icu:ProfileEditor--about": { "messageformat": "About", "description": "Default text for about field" diff --git a/stylesheets/components/CompositionInput.scss b/stylesheets/components/CompositionInput.scss index 3c441a998..e1c6fc9fe 100644 --- a/stylesheets/components/CompositionInput.scss +++ b/stylesheets/components/CompositionInput.scss @@ -424,6 +424,7 @@ } &__attachment img { + border-radius: 4px; height: 18px; position: absolute; inset-inline-end: 8px; diff --git a/stylesheets/components/ConversationDetails.scss b/stylesheets/components/ConversationDetails.scss index 54c989da0..2bc0fe438 100644 --- a/stylesheets/components/ConversationDetails.scss +++ b/stylesheets/components/ConversationDetails.scss @@ -253,6 +253,12 @@ } } + &--edit { + &::after { + @include details-icon('../images/icons/v3/edit/edit.svg'); + } + } + &--down { border-radius: 18px; @include light-theme { diff --git a/stylesheets/components/EditHistoryMessagesModal.scss b/stylesheets/components/EditHistoryMessagesModal.scss index 66820212c..879bda271 100644 --- a/stylesheets/components/EditHistoryMessagesModal.scss +++ b/stylesheets/components/EditHistoryMessagesModal.scss @@ -3,7 +3,16 @@ .EditHistoryMessagesModal { &__divider { + border-style: solid; margin-block: 24px; + + @include light-theme { + border-color: $color-gray-15; + } + + @include dark-theme { + border-color: $color-gray-75; + } } &__title { diff --git a/stylesheets/components/MessageDetail.scss b/stylesheets/components/MessageDetail.scss index 564cb4275..65f66dbb6 100644 --- a/stylesheets/components/MessageDetail.scss +++ b/stylesheets/components/MessageDetail.scss @@ -39,18 +39,6 @@ } } -.module-message-detail__contact-container { - border-top: 1px solid $color-gray-15; - margin-top: 36px; - - @include light-theme { - border-top-color: $color-gray-15; - } - @include dark-theme { - border-top-color: $color-gray-75; - } -} - .module-message-detail__contact-group__header { @include font-body-1-bold; align-items: center; diff --git a/ts/components/conversation/MessageDetail.tsx b/ts/components/conversation/MessageDetail.tsx index 261de4112..6df791229 100644 --- a/ts/components/conversation/MessageDetail.tsx +++ b/ts/components/conversation/MessageDetail.tsx @@ -27,6 +27,12 @@ import { formatDateTimeLong } from '../../util/timestamp'; import { DurationInSeconds } from '../../util/durations'; import { format as formatRelativeTime } from '../../util/expirationTimer'; import { missingCaseError } from '../../util/missingCaseError'; +import { PanelRow } from './conversation-details/PanelRow'; +import { PanelSection } from './conversation-details/PanelSection'; +import { + ConversationDetailsIcon, + IconType, +} from './conversation-details/ConversationDetailsIcon'; export type Contact = Pick< ConversationType, @@ -88,6 +94,7 @@ export type PropsReduxActions = Pick< | 'saveAttachment' | 'showContactModal' | 'showConversation' + | 'showEditHistoryModal' | 'showExpiredIncomingTapToViewToast' | 'showExpiredOutgoingTapToViewToast' | 'showLightbox' @@ -131,6 +138,7 @@ export function MessageDetail({ saveAttachment, showContactModal, showConversation, + showEditHistoryModal, showExpiredIncomingTapToViewToast, showExpiredOutgoingTapToViewToast, showLightbox, @@ -321,123 +329,150 @@ export function MessageDetail({ return ( // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-
- { - log.warn('MessageDetail: scrollToQuotedMessage called!'); - }} - showContactModal={showContactModal} - showExpiredIncomingTapToViewToast={showExpiredIncomingTapToViewToast} - showExpiredOutgoingTapToViewToast={showExpiredOutgoingTapToViewToast} - showLightbox={showLightbox} - startConversation={startConversation} - theme={theme} - viewStory={viewStory} - onToggleSelect={noop} - onReplyToMessage={noop} - /> -
- - - {(errors || []).map(error => ( - + +
+ { + log.warn('MessageDetail: scrollToQuotedMessage called!'); + }} + showContactModal={showContactModal} + showExpiredIncomingTapToViewToast={ + showExpiredIncomingTapToViewToast + } + showExpiredOutgoingTapToViewToast={ + showExpiredOutgoingTapToViewToast + } + showLightbox={showLightbox} + startConversation={startConversation} + theme={theme} + viewStory={viewStory} + onToggleSelect={noop} + onReplyToMessage={noop} + /> +
+
+ + {(errors || []).map(error => ( + + + + + ))} + - ))} - - - + + - - {receivedAt && message.direction === 'incoming' ? ( - - - - - ) : null} - {timeRemaining && timeRemaining > 0 && ( - - - - - )} - -
+ {i18n('icu:error')} + + {' '} + {error.message}{' '} +
- {i18n('icu:error')} + {i18n('icu:sent')} - {' '} - {error.message}{' '} + { + void window.navigator.clipboard.writeText( + String(sentAt) + ); + }, + }, + ]} + > + <> + {' '} + + ({sentAt}) + + +
{i18n('icu:sent')} - { - void window.navigator.clipboard.writeText(String(sentAt)); - }, - }, - ]} - > - <> -
+ {i18n('icu:received')} + + {' '} - ({sentAt}) + ({receivedAt}) - - -
- {i18n('icu:received')} - - {' '} - - ({receivedAt}) - -
- {i18n('icu:MessageDetail--disappears-in')} - - {formatRelativeTime(i18n, timeRemaining, { - largest: 2, - })} -
- {renderContacts()} + + + ) : null} + {timeRemaining && timeRemaining > 0 && ( + + + {i18n('icu:MessageDetail--disappears-in')} + + + {formatRelativeTime(i18n, timeRemaining, { + largest: 2, + })} + + + )} + + + + {message.isEditedMessage && ( + + + } + label={i18n('icu:MessageDetail__view-edits')} + onClick={() => { + showEditHistoryModal?.(message.id); + }} + /> + + )} + + {renderContacts()}
); } diff --git a/ts/components/conversation/conversation-details/ConversationDetailsIcon.tsx b/ts/components/conversation/conversation-details/ConversationDetailsIcon.tsx index b4ba22876..49f5490a3 100644 --- a/ts/components/conversation/conversation-details/ConversationDetailsIcon.tsx +++ b/ts/components/conversation/conversation-details/ConversationDetailsIcon.tsx @@ -9,6 +9,7 @@ import { bemGenerator } from './util'; export enum IconType { 'block' = 'block', + 'edit' = 'edit', 'unblock' = 'unblock', 'color' = 'color', 'down' = 'down', diff --git a/ts/state/smart/MessageDetail.tsx b/ts/state/smart/MessageDetail.tsx index fc97f3c54..d942b30df 100644 --- a/ts/state/smart/MessageDetail.tsx +++ b/ts/state/smart/MessageDetail.tsx @@ -54,7 +54,8 @@ export function SmartMessageDetail(): JSX.Element | null { showSpoiler, startConversation, } = useConversationsActions(); - const { showContactModal, toggleSafetyNumberModal } = useGlobalModalActions(); + const { showContactModal, showEditHistoryModal, toggleSafetyNumberModal } = + useGlobalModalActions(); const { showLightbox, showLightboxForViewOnceMedia } = useLightboxActions(); const { viewStory } = useStoriesActions(); @@ -100,6 +101,7 @@ export function SmartMessageDetail(): JSX.Element | null { sentAt={message.timestamp} showContactModal={showContactModal} showConversation={showConversation} + showEditHistoryModal={showEditHistoryModal} showExpiredIncomingTapToViewToast={showExpiredIncomingTapToViewToast} showExpiredOutgoingTapToViewToast={showExpiredOutgoingTapToViewToast} showLightbox={showLightbox}