UI Improvements to the edit history modal
This commit is contained in:
parent
c96565c4c9
commit
2e7cdfdb70
2 changed files with 9 additions and 4 deletions
|
@ -3,6 +3,7 @@
|
|||
|
||||
.EditHistoryMessagesModal {
|
||||
&__divider {
|
||||
border-bottom: 0;
|
||||
border-style: solid;
|
||||
margin-block: 24px;
|
||||
|
||||
|
|
|
@ -60,7 +60,7 @@ const MESSAGE_DEFAULT_PROPS = {
|
|||
shouldHideMetadata: false,
|
||||
showContactModal: shouldNeverBeCalled,
|
||||
showConversation: noop,
|
||||
showEditHistoryModal: shouldNeverBeCalled,
|
||||
showEditHistoryModal: noop,
|
||||
showExpiredIncomingTapToViewToast: shouldNeverBeCalled,
|
||||
showExpiredOutgoingTapToViewToast: shouldNeverBeCalled,
|
||||
showLightboxForViewOnceMedia: shouldNeverBeCalled,
|
||||
|
@ -100,6 +100,8 @@ export function EditHistoryMessagesModal({
|
|||
const [currentMessage, ...pastEdits] = editHistoryMessages;
|
||||
const currentMessageId = `${currentMessage.id}.${currentMessage.timestamp}`;
|
||||
|
||||
let previousItem = currentMessage;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
hasXButton
|
||||
|
@ -110,6 +112,7 @@ export function EditHistoryMessagesModal({
|
|||
noTransform
|
||||
>
|
||||
<div ref={containerElementRef}>
|
||||
<TimelineDateHeader i18n={i18n} timestamp={currentMessage.timestamp} />
|
||||
<Message
|
||||
{...MESSAGE_DEFAULT_PROPS}
|
||||
{...currentMessage}
|
||||
|
@ -118,6 +121,7 @@ export function EditHistoryMessagesModal({
|
|||
displayLimit={displayLimitById[currentMessageId]}
|
||||
getPreferredBadge={getPreferredBadge}
|
||||
i18n={i18n}
|
||||
isEditedMessage
|
||||
isSpoilerExpanded={revealedSpoilersById[currentMessageId] || {}}
|
||||
key={currentMessage.timestamp}
|
||||
kickOffAttachmentDownload={kickOffAttachmentDownload}
|
||||
|
@ -146,11 +150,9 @@ export function EditHistoryMessagesModal({
|
|||
{i18n('icu:EditHistoryMessagesModal__title')}
|
||||
</h3>
|
||||
|
||||
{pastEdits.map((messageAttributes, index) => {
|
||||
{pastEdits.map(messageAttributes => {
|
||||
const syntheticId = `${messageAttributes.id}.${messageAttributes.timestamp}`;
|
||||
|
||||
const previousItem = pastEdits[index - 1];
|
||||
|
||||
const shouldShowDateHeader = Boolean(
|
||||
!previousItem ||
|
||||
// This comparison avoids strange header behavior for out-of-order messages.
|
||||
|
@ -164,6 +166,8 @@ export function EditHistoryMessagesModal({
|
|||
/>
|
||||
) : null;
|
||||
|
||||
previousItem = messageAttributes;
|
||||
|
||||
return (
|
||||
<React.Fragment key={messageAttributes.timestamp}>
|
||||
{dateHeaderElement}
|
||||
|
|
Loading…
Reference in a new issue