From 21726b63f8f42f94587e5766d21ccc656f73ff3c Mon Sep 17 00:00:00 2001 From: ginnyTheCat Date: Sat, 6 Aug 2022 06:05:56 +0200 Subject: [PATCH] Show full timestamp on hover (#714) * Show full timestamp on hover * Not always display time * Always show full timestamp in search --- src/app/atoms/time/Time.jsx | 44 ++++++++++++++++++++ src/app/molecules/message/Message.jsx | 25 ++++++++--- src/app/molecules/message/TimelineChange.jsx | 9 ++-- src/app/molecules/room-search/RoomSearch.jsx | 3 +- src/app/organisms/room/RoomViewContent.jsx | 9 ++-- 5 files changed, 73 insertions(+), 17 deletions(-) create mode 100644 src/app/atoms/time/Time.jsx diff --git a/src/app/atoms/time/Time.jsx b/src/app/atoms/time/Time.jsx new file mode 100644 index 00000000..750b958f --- /dev/null +++ b/src/app/atoms/time/Time.jsx @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import dateFormat from 'dateformat'; +import { isInSameDay } from '../../../util/common'; + +function Time({ timestamp, fullTime }) { + const date = new Date(timestamp); + + const formattedFullTime = dateFormat(date, 'dd mmmm yyyy, hh:MM TT'); + let formattedDate = formattedFullTime; + + if (!fullTime) { + const compareDate = new Date(); + const isToday = isInSameDay(date, compareDate); + compareDate.setDate(compareDate.getDate() - 1); + const isYesterday = isInSameDay(date, compareDate); + + formattedDate = dateFormat(date, isToday || isYesterday ? 'hh:MM TT' : 'dd/mm/yyyy'); + if (isYesterday) { + formattedDate = `Yesterday, ${formattedDate}`; + } + } + + return ( + + ); +} + +Time.defaultProps = { + fullTime: false, +}; + +Time.propTypes = { + timestamp: PropTypes.number.isRequired, + fullTime: PropTypes.bool, +}; + +export default Time; diff --git a/src/app/molecules/message/Message.jsx b/src/app/molecules/message/Message.jsx index e94e5a46..2f32bafa 100644 --- a/src/app/molecules/message/Message.jsx +++ b/src/app/molecules/message/Message.jsx @@ -24,6 +24,7 @@ import Tooltip from '../../atoms/tooltip/Tooltip'; import Input from '../../atoms/input/Input'; import Avatar from '../../atoms/avatar/Avatar'; import IconButton from '../../atoms/button/IconButton'; +import Time from '../../atoms/time/Time'; import ContextMenu, { MenuHeader, MenuItem, MenuBorder } from '../../atoms/context-menu/ContextMenu'; import * as Media from '../media/Media'; @@ -67,7 +68,7 @@ const MessageAvatar = React.memo(({ )); const MessageHeader = React.memo(({ - userId, username, time, + userId, username, timestamp, fullTime, }) => (
{twemojify(userId)}
- {time} + +
)); +MessageHeader.defaultProps = { + fullTime: false, +}; MessageHeader.propTypes = { userId: PropTypes.string.isRequired, username: PropTypes.string.isRequired, - time: PropTypes.string.isRequired, + timestamp: PropTypes.number.isRequired, + fullTime: PropTypes.bool, }; function MessageReply({ name, color, body }) { @@ -690,7 +697,7 @@ function getEditedBody(editedMEvent) { } function Message({ - mEvent, isBodyOnly, roomTimeline, focus, time, + mEvent, isBodyOnly, roomTimeline, focus, fullTime, }) { const [isEditing, setIsEditing] = useState(false); const roomId = mEvent.getRoomId(); @@ -751,7 +758,12 @@ function Message({ }
{!isBodyOnly && ( - + )} {roomTimeline && isReply && (
- {time} + +
); @@ -68,7 +71,7 @@ TimelineChange.propTypes = { PropTypes.string, PropTypes.node, ]).isRequired, - time: PropTypes.string.isRequired, + timestamp: PropTypes.number.isRequired, onClick: PropTypes.func, }; diff --git a/src/app/molecules/room-search/RoomSearch.jsx b/src/app/molecules/room-search/RoomSearch.jsx index f6bdf242..bd1cdfe9 100644 --- a/src/app/molecules/room-search/RoomSearch.jsx +++ b/src/app/molecules/room-search/RoomSearch.jsx @@ -120,14 +120,13 @@ function RoomSearch({ roomId }) { const renderTimeline = (timeline) => (
{ timeline.map((mEvent) => { - const time = dateFormat(mEvent.getDate(), 'dd/mm/yyyy - hh:MM TT'); const id = mEvent.getId(); return ( diff --git a/src/app/organisms/room/RoomViewContent.jsx b/src/app/organisms/room/RoomViewContent.jsx index ab1dfbab..52199648 100644 --- a/src/app/organisms/room/RoomViewContent.jsx +++ b/src/app/organisms/room/RoomViewContent.jsx @@ -125,10 +125,7 @@ function renderEvent(roomTimeline, mEvent, prevMEvent, isFocus = false) { && prevMEvent.getType() !== 'm.room.create' && diffMinutes(mEvent.getDate(), prevMEvent.getDate()) <= MAX_MSG_DIFF_MINUTES ); - const mDate = mEvent.getDate(); - const isToday = isInSameDay(mDate, new Date()); - - const time = dateFormat(mDate, isToday ? 'hh:MM TT' : 'dd/mm/yyyy'); + const timestamp = mEvent.getTs(); if (mEvent.getType() === 'm.room.member') { const timelineChange = parseTimelineChange(mEvent); @@ -138,7 +135,7 @@ function renderEvent(roomTimeline, mEvent, prevMEvent, isFocus = false) { key={mEvent.getId()} variant={timelineChange.variant} content={timelineChange.content} - time={time} + timestamp={timestamp} /> ); } @@ -149,7 +146,7 @@ function renderEvent(roomTimeline, mEvent, prevMEvent, isFocus = false) { isBodyOnly={isBodyOnly} roomTimeline={roomTimeline} focus={isFocus} - time={time} + fullTime={false} /> ); }