keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

add screen break for jump in messages timestamp

Browse Source
pull/1884/head
audric 4 years ago
parent 40566a58a4
commit 2825b66ef6
6 changed files with 73 additions and 20 deletions
Show Stats Download Patch File Download Diff File

1
package.json
Unescape Escape View File

@ -152,7 +152,6 @@
"@types/lodash": "4.14.106",
"@types/mkdirp": "0.5.2",
"@types/mocha": "5.0.0",
"@types/moment": "^2.13.0",
"@types/node-fetch": "^2.5.7",
"@types/pify": "3.0.2",
"@types/qs": "6.5.1",

30
ts/components/conversation/message/DateBreak.tsx
Unescape Escape View File

@ -0,0 +1,30 @@
import moment from 'moment';
import React from 'react';
import styled from 'styled-components';
const DateBreakContainer = styled.div``;
const DateBreakText = styled.div`
margin-top: 0.3rem;
margin-bottom: 0.3rem;
letter-spacing: 0.6px;
font-size: 0.8rem;
font-weight: bold;
text-align: center;
color: ${props => props.theme.colors.lastSeenIndicatorTextColor};
`;
export const MessageDateBreak = (props: { timestamp: number }) => {
const { timestamp } = props;
moment().calendar();
const text = moment().calendar(timestamp, {
sameElse: 'llll',
});
return (
<DateBreakContainer id={`date-break-${timestamp}`}>
<DateBreakText>{text}</DateBreakText>
</DateBreakContainer>
);
};

5
ts/components/session/conversation/SessionLastSeenIndicator.tsx
Unescape Escape View File

@ -3,7 +3,8 @@ import styled from 'styled-components';
const LastSeenBarContainer = styled.div`
padding-bottom: 35px;
margin-inline-start: 28px;
margin-inline-start: 10rem;
margin-inline-end: 10rem;
padding-top: 28px;
overflow: hidden;
`;
@ -17,7 +18,7 @@ const LastSeenBar = styled.div`
const LastSeenText = styled.div`
margin-top: 3px;
font-size: 11px;
line-height: 16px;
line-height: 26px;
letter-spacing: 0.3px;
text-transform: uppercase;
text-align: center;

22
ts/components/session/conversation/SessionMessagesList.tsx
Unescape Escape View File

@ -11,6 +11,7 @@ import { DataExtractionNotification } from '../../conversation/DataExtractionNot
import { GroupInvitation } from '../../conversation/GroupInvitation';
import { GroupNotification } from '../../conversation/GroupNotification';
import { Message } from '../../conversation/Message';
import { MessageDateBreak } from '../../conversation/message/DateBreak';
import { TimerNotification } from '../../conversation/TimerNotification';
import { SessionLastSeenIndicator } from './SessionLastSeenIndicator';
@ -26,26 +27,38 @@ export const SessionMessagesList = (props: {
const unreadIndicator = messageProps.showUnreadIndicator ? (
<SessionLastSeenIndicator key={`unread-indicator-${messageId}`} />
) : null;
const dateBreak =
messageProps.showDateBreak !== undefined ? (
<MessageDateBreak
key={`date-break-${messageId}`}
timestamp={messageProps.showDateBreak}
/>
) : null;
if (messageProps.message?.messageType === 'group-notification') {
const msgProps = messageProps.message.props as PropsForGroupUpdate;
return [<GroupNotification key={messageId} {...msgProps} />, unreadIndicator];
return [<GroupNotification key={messageId} {...msgProps} />, dateBreak, unreadIndicator];
}
if (messageProps.message?.messageType === 'group-invitation') {
const msgProps = messageProps.message.props as PropsForGroupInvitation;
return [<GroupInvitation key={messageId} {...msgProps} />, unreadIndicator];
return [<GroupInvitation key={messageId} {...msgProps} />, dateBreak, unreadIndicator];
}
if (messageProps.message?.messageType === 'data-extraction') {
const msgProps = messageProps.message.props as PropsForDataExtractionNotification;
return [<DataExtractionNotification key={messageId} {...msgProps} />, unreadIndicator];
return [
<DataExtractionNotification key={messageId} {...msgProps} />,
dateBreak,
unreadIndicator,
];
}
if (messageProps.message?.messageType === 'timer-notification') {
const msgProps = messageProps.message.props as PropsForExpirationTimer;
return [<TimerNotification key={messageId} {...msgProps} />, unreadIndicator];
return [<TimerNotification key={messageId} {...msgProps} />, dateBreak, unreadIndicator];
}
if (!messageProps) {
@ -58,6 +71,7 @@ export const SessionMessagesList = (props: {
onQuoteClick={props.scrollToQuoteMessage}
key={messageId}
/>,
dateBreak,
unreadIndicator,
];
})}

18
ts/state/selectors/conversations.ts
Unescape Escape View File

@ -149,12 +149,24 @@ export const getSortedMessagesTypesOfSelectedConversation = createSelector(
getMessagesOfSelectedConversation,
getFirstUnreadMessageId,
(sortedMessages, firstUnreadId) => {
return sortedMessages.map(msg => {
// we want to show the date break if there is a large jump in time
// remember that messages are sorted from the most recent to the oldest
return sortedMessages.map((msg, index) => {
const isFirstUnread = Boolean(firstUnreadId === msg.propsForMessage.id);
const messageTimestamp = msg.propsForMessage.serverTimestamp || msg.propsForMessage.timestamp;
const previousMessageTimestamp =
index + 1 >= sortedMessages.length
? 0
: sortedMessages[index + 1].propsForMessage.serverTimestamp ||
sortedMessages[index + 1].propsForMessage.timestamp;
// more than 10 minutes
const showDateBreak =
messageTimestamp - previousMessageTimestamp > 10 * 60 * 1000 ? messageTimestamp : undefined;
if (msg.propsForDataExtractionNotification) {
return {
showUnreadIndicator: isFirstUnread,
showDateBreak,
message: {
messageType: 'data-extraction',
props: { ...msg.propsForDataExtractionNotification, messageId: msg.propsForMessage.id },
@ -165,6 +177,7 @@ export const getSortedMessagesTypesOfSelectedConversation = createSelector(
if (msg.propsForGroupInvitation) {
return {
showUnreadIndicator: isFirstUnread,
showDateBreak,
message: {
messageType: 'group-invitation',
props: { ...msg.propsForGroupInvitation, messageId: msg.propsForMessage.id },
@ -175,6 +188,7 @@ export const getSortedMessagesTypesOfSelectedConversation = createSelector(
if (msg.propsForGroupNotification) {
return {
showUnreadIndicator: isFirstUnread,
showDateBreak,
message: {
messageType: 'group-notification',
props: { ...msg.propsForGroupNotification, messageId: msg.propsForMessage.id },
@ -185,6 +199,7 @@ export const getSortedMessagesTypesOfSelectedConversation = createSelector(
if (msg.propsForTimerNotification) {
return {
showUnreadIndicator: isFirstUnread,
showDateBreak,
message: {
messageType: 'timer-notification',
props: { ...msg.propsForTimerNotification, messageId: msg.propsForMessage.id },
@ -194,6 +209,7 @@ export const getSortedMessagesTypesOfSelectedConversation = createSelector(
return {
showUnreadIndicator: isFirstUnread,
showDateBreak,
message: {
messageType: 'regular-message',
props: { messageId: msg.propsForMessage.id },

17
yarn.lock
Unescape Escape View File

@ -622,13 +622,6 @@
resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-5.0.0.tgz#a3014921991066193f6c8e47290d4d598dfd19e6"
integrity sha512-ZS0vBV7Jn5Z/Q4T3VXauEKMDCV8nWOtJJg90OsDylkYJiQwcWtKuLzohWzrthBkerUF7DLMmJcwOPEP0i/AOXw==
"@types/moment@^2.13.0":
version "2.13.0"
resolved "https://registry.yarnpkg.com/@types/moment/-/moment-2.13.0.tgz#604ebd189bc3bc34a1548689404e61a2a4aac896"
integrity sha1-YE69GJvDvDShVIaJQE5hoqSqyJY=
dependencies:
moment "*"
"@types/node-fetch@^2.5.7":
version "2.5.7"
resolved "https://registry.yarnpkg.com/@types/node-fetch/-/node-fetch-2.5.7.tgz#20a2afffa882ab04d44ca786449a276f9f6bbf3c"
@ -6099,16 +6092,16 @@ mocha@4.1.0:
mkdirp "0.5.1"
supports-color "4.4.0"
moment@*, moment@^2.10.6:
version "2.24.0"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
moment@2.21.0:
version "2.21.0"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.21.0.tgz#2a114b51d2a6ec9e6d83cf803f838a878d8a023a"
integrity sha512-TCZ36BjURTeFTM/CwRcViQlfkMvL1/vFISuNLO5GkcVm1+QHfbSiNqZuWeMFjj1/3+uAjXswgRk30j1kkLYJBQ==
moment@^2.10.6:
version "2.24.0"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
ms@0.7.1:
version "0.7.1"
resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"

Write Preview
Loading…
Cancel
Save