Skip to content

Commit 18d3311

Browse files
committed
Lightbox: Added Button to jump to current image within the conversation
1 parent 5d899d7 commit 18d3311

File tree

3 files changed

+47
-4
lines changed

3 files changed

+47
-4
lines changed

_locales/en/messages.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7691,5 +7691,9 @@
76917691
"icu:WhatsNew__v7.35--0": {
76927692
"messageformat": "The new filter icon next to the search box makes it easy to quickly find unread chats, but feel free to take your time deciding whether or not to leave them on read after seeing what they had to say.",
76937693
"description": "Release notes for version 7.35"
7694+
},
7695+
"icu:jumpto": {
7696+
"messageformat": "Jump to",
7697+
"description": "Jumps to the medias position in the conversation"
76947698
}
76957699
}

stylesheets/components/Lightbox.scss

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555

5656
&__thumbnail {
5757
@include mixins.button-reset;
58+
5859
& {
5960
position: relative;
6061
border-radius: 6px;
@@ -87,6 +88,7 @@
8788
'../images/image.svg',
8889
variables.$color-gray-25
8990
);
91+
9092
& {
9193
height: 100%;
9294
width: 100%;
@@ -135,6 +137,7 @@
135137

136138
&__unsupported {
137139
@include mixins.button-reset;
140+
138141
& {
139142
flex-grow: 1;
140143
height: 100%;
@@ -295,6 +298,7 @@
295298

296299
&__button {
297300
@include mixins.button-reset;
301+
298302
& {
299303
border-radius: 4px;
300304
display: inline-block;
@@ -322,17 +326,26 @@
322326
&--forward {
323327
&::before {
324328
@include mixins.color-svg(
325-
'../images/icons/v3/forward/forward.svg',
326-
variables.$color-gray-15
329+
'../images/icons/v3/forward/forward.svg',
330+
variables.$color-gray-15
327331
);
328332
}
329333
}
330334

331335
&--save {
332336
&::before {
333337
@include mixins.color-svg(
334-
'../images/icons/v3/save/save.svg',
335-
variables.$color-gray-15
338+
'../images/icons/v3/save/save.svg',
339+
variables.$color-gray-15
340+
);
341+
}
342+
}
343+
344+
&--jump {
345+
&::before {
346+
@include mixins.color-svg(
347+
'../images/icons/v3/chat/chat.svg',
348+
variables.$color-gray-15
336349
);
337350
}
338351
}
@@ -371,6 +384,7 @@
371384
}
372385

373386
outline: none;
387+
374388
&:focus {
375389
outline: none;
376390
}

ts/components/Lightbox.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import type {
1313
ConversationType,
1414
SaveAttachmentActionCreatorType,
1515
} from '../state/ducks/conversations';
16+
import { useConversationsActions } from '../state/ducks/conversations';
1617
import type { LocalizerType } from '../types/Util';
1718
import type { MediaItemType, MediaItemMessageType } from '../types/MediaItem';
1819
import * as GoogleChrome from '../util/GoogleChrome';
@@ -94,6 +95,7 @@ export function Lightbox({
9495
hasNextMessage,
9596
hasPrevMessage,
9697
}: PropsType): JSX.Element | null {
98+
const { scrollToMessage } = useConversationsActions();
9799
const hasThumbnails = media.length > 1;
98100
const messageId = media.at(0)?.message.id;
99101
const prevMessageId = usePrevious(messageId, messageId);
@@ -186,6 +188,21 @@ export function Lightbox({
186188
[isViewOnce, media, saveAttachment, selectedIndex]
187189
);
188190

191+
const handleJumpToConversation = useCallback(
192+
(
193+
event: KeyboardEvent | React.MouseEvent<HTMLButtonElement, MouseEvent>
194+
) => {
195+
if (isViewOnce) {
196+
return;
197+
}
198+
const mediaItem = media[selectedIndex];
199+
const { message } = mediaItem;
200+
const { conversationId, id } = message;
201+
scrollToMessage(conversationId, id);
202+
},
203+
[isViewOnce, media, selectedIndex, scrollToMessage]
204+
);
205+
189206
const handleForward = (
190207
event: React.MouseEvent<HTMLButtonElement, MouseEvent>
191208
) => {
@@ -677,6 +694,14 @@ export function Lightbox({
677694
<div />
678695
)}
679696
<div className="Lightbox__controls">
697+
{!isViewOnce ? (
698+
<button
699+
aria-label={i18n('icu:jumpto')}
700+
className="Lightbox__button Lightbox__button--jump"
701+
onClick={handleJumpToConversation}
702+
type="button"
703+
/>
704+
) : null}
680705
{!isViewOnce ? (
681706
<button
682707
aria-label={i18n('icu:forwardMessage')}

0 commit comments

Comments
 (0)