Adds an edit message entry point in message details screen
This commit is contained in:
parent
008cb99ab9
commit
94cd764107
8 changed files with 168 additions and 122 deletions
|
@ -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"
|
||||
|
|
|
@ -424,6 +424,7 @@
|
|||
}
|
||||
|
||||
&__attachment img {
|
||||
border-radius: 4px;
|
||||
height: 18px;
|
||||
position: absolute;
|
||||
inset-inline-end: 8px;
|
||||
|
|
|
@ -253,6 +253,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
&--edit {
|
||||
&::after {
|
||||
@include details-icon('../images/icons/v3/edit/edit.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&--down {
|
||||
border-radius: 18px;
|
||||
@include light-theme {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -9,6 +9,7 @@ import { bemGenerator } from './util';
|
|||
|
||||
export enum IconType {
|
||||
'block' = 'block',
|
||||
'edit' = 'edit',
|
||||
'unblock' = 'unblock',
|
||||
'color' = 'color',
|
||||
'down' = 'down',
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue