diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx index c8393137..ac1998b2 100644 --- a/src/app/features/room/message/Message.tsx +++ b/src/app/features/room/message/Message.tsx @@ -79,7 +79,7 @@ import { MemberPowerTag, StateEvent } from '../../../../types/matrix/room'; import { PowerIcon } from '../../../components/power'; import colorMXID from '../../../../util/colorMXID'; import { getPowerTagIconSrc } from '../../../hooks/useMemberPowerTag'; -import { AddReactionButton } from '../../../../owl/components/AddReactionButton'; +import { timeHourMinute } from '../../../utils/time'; export type ReactionHandler = (keyOrMxc: string, shortcode: string) => void; @@ -1143,10 +1143,16 @@ export const Message = as<'div', MessageProps>( )} - {!edit && collapse && canSendReaction && !hasVisibleReactions - && messageLayout !== MessageLayout.Compact + {!edit && collapse && messageLayout !== MessageLayout.Compact && (hover || !!emojiBoardAnchor) && ( - + + {timeHourMinute(mEvent.getTs(), hour24Clock)} + )} {messageLayout === MessageLayout.Compact && ( diff --git a/src/app/features/room/message/styles.css.ts b/src/app/features/room/message/styles.css.ts index 4be501bd..2493d882 100644 --- a/src/app/features/room/message/styles.css.ts +++ b/src/app/features/room/message/styles.css.ts @@ -55,3 +55,13 @@ export const ReactionsContainer = style({ export const ReactionsTooltipText = style({ wordBreak: 'break-word', }); + +export const CollapsedTime = style({ + position: 'absolute', + left: config.space.S400, + top: '50%', + transform: 'translateY(-50%)', + opacity: 0.6, + userSelect: 'none', + pointerEvents: 'none', +}); diff --git a/src/owl/components/AddReactionButton.tsx b/src/owl/components/AddReactionButton.tsx index bd112be5..3fead937 100644 --- a/src/owl/components/AddReactionButton.tsx +++ b/src/owl/components/AddReactionButton.tsx @@ -4,14 +4,13 @@ import * as css from '../styles/reactions.css'; type AddReactionButtonProps = { onClick: MouseEventHandler; - ghost?: boolean; }; -export function AddReactionButton({ onClick, ghost }: AddReactionButtonProps) { +export function AddReactionButton({ onClick }: AddReactionButtonProps) { return (