Adds an edit message entry point in message details screen

This commit is contained in:
Josh Perez 2023-06-15 11:34:20 -07:00 committed by GitHub
parent 008cb99ab9
commit 94cd764107
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 168 additions and 122 deletions

View file

@ -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"

View file

@ -424,6 +424,7 @@
}
&__attachment img {
border-radius: 4px;
height: 18px;
position: absolute;
inset-inline-end: 8px;

View file

@ -253,6 +253,12 @@
}
}
&--edit {
&::after {
@include details-icon('../images/icons/v3/edit/edit.svg');
}
}
&--down {
border-radius: 18px;
@include light-theme {

View file

@ -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 {

View file

@ -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;

View file

@ -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,6 +329,7 @@ export function MessageDetail({
return (
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
<div className="module-message-detail" tabIndex={0} ref={focusRef}>
<PanelSection>
<div
className="module-message-detail__message-container"
ref={messageContainerRef}
@ -359,8 +368,12 @@ export function MessageDetail({
log.warn('MessageDetail: scrollToQuotedMessage called!');
}}
showContactModal={showContactModal}
showExpiredIncomingTapToViewToast={showExpiredIncomingTapToViewToast}
showExpiredOutgoingTapToViewToast={showExpiredOutgoingTapToViewToast}
showExpiredIncomingTapToViewToast={
showExpiredIncomingTapToViewToast
}
showExpiredOutgoingTapToViewToast={
showExpiredOutgoingTapToViewToast
}
showLightbox={showLightbox}
startConversation={startConversation}
theme={theme}
@ -383,7 +396,9 @@ export function MessageDetail({
</tr>
))}
<tr>
<td className="module-message-detail__label">{i18n('icu:sent')}</td>
<td className="module-message-detail__label">
{i18n('icu:sent')}
</td>
<td>
<ContextMenu
i18n={i18n}
@ -392,7 +407,9 @@ export function MessageDetail({
icon: 'StoryDetailsModal__copy-icon',
label: i18n('icu:StoryDetailsModal__copy-timestamp'),
onClick: () => {
void window.navigator.clipboard.writeText(String(sentAt));
void window.navigator.clipboard.writeText(
String(sentAt)
);
},
},
]}
@ -437,7 +454,25 @@ export function MessageDetail({
)}
</tbody>
</table>
{renderContacts()}
</PanelSection>
{message.isEditedMessage && (
<PanelSection>
<PanelRow
icon={
<ConversationDetailsIcon
ariaLabel={i18n('icu:MessageDetail__view-edits')}
icon={IconType.edit}
/>
}
label={i18n('icu:MessageDetail__view-edits')}
onClick={() => {
showEditHistoryModal?.(message.id);
}}
/>
</PanelSection>
)}
<PanelSection>{renderContacts()}</PanelSection>
</div>
);
}

View file

@ -9,6 +9,7 @@ import { bemGenerator } from './util';
export enum IconType {
'block' = 'block',
'edit' = 'edit',
'unblock' = 'unblock',
'color' = 'color',
'down' = 'down',

View file

@ -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}