Skip to content

Commit

Permalink
improve message asset read indicator
Browse files Browse the repository at this point in the history
  • Loading branch information
@przemvs
przemvs committed Jan 19, 2024
1 parent e78f549 commit 9815614
Show file tree
Hide file tree
Showing 6 changed files with 49 additions and 62 deletions.
14 changes: 0 additions & 14 deletions src/script/components/MessagesList/Message/ContentMessage/ContentMessage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,13 +199,6 @@ export const ContentMessageComponent: React.FC<ContentMessageProps> = ({
onClick={onClickDetails}
showIconOnly
/>

{/*<ReadReceiptStatus*/}
{/* message={message}*/}
{/* is1to1Conversation={conversation.is1to1()}*/}
{/* isLastDeliveredMessage={isLastDeliveredMessage}*/}
{/* onClickDetails={onClickDetails}*/}
{/*/>*/}
</MessageHeader>
)}
<div className="message-body">
Expand Down Expand Up @@ -260,13 +253,6 @@ export const ContentMessageComponent: React.FC<ContentMessageProps> = ({
onRetry={() => onRetry(message)}
/>
)}

<ReadIndicator
message={message}
is1to1Conversation={conversation.is1to1()}
isLastDeliveredMessage={isLastDeliveredMessage}
onClick={onClickDetails}
/>
</div>

{!isConversationReadonly && isActionMenuVisible && (
Expand Down
4 changes: 2 additions & 2 deletions ...pt/components/MessagesList/Message/ContentMessage/MessageActions/MessageActions.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export const messageBodyActions: CSSObject = {
minWidth: '40px',
position: 'absolute',
right: '16px',
top: '-20px',
top: '-30px',
userSelect: 'none',
'@media (max-width: @screen-md-min)': {
height: '45px',
Expand Down Expand Up @@ -103,5 +103,5 @@ export const getActionsMenuCSS = (isActive?: boolean): CSSObject => {
};

export const messageWithHeaderTop: CSSObject = {
top: '-53px',
top: '-63px',
};
65 changes: 31 additions & 34 deletions src/script/components/MessagesList/Message/ContentMessage/asset/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ import {AssetType} from '../../../../../assets/AssetType';
import {Button} from '../../../../../entity/message/Button';
import {CompositeMessage} from '../../../../../entity/message/CompositeMessage';
import {ContentMessage} from '../../../../../entity/message/ContentMessage';
import {ReadIndicator} from '../../ReadIndicator';

interface ContentAssetProps {
asset: Asset;
Expand Down Expand Up @@ -95,12 +96,12 @@ const ContentAsset = ({
</div>
))}

{/*<ReadIndicator*/}
{/* message={message}*/}
{/* is1to1Conversation={is1to1Conversation}*/}
{/* isLastDeliveredMessage={isLastDeliveredMessage}*/}
{/* onClick={onClickDetails}*/}
{/*/>*/}
<ReadIndicator
message={message}
is1to1Conversation={is1to1Conversation}
isLastDeliveredMessage={isLastDeliveredMessage}
onClick={onClickDetails}
/>
</>
);
case AssetType.FILE:
Expand All @@ -109,13 +110,12 @@ const ContentAsset = ({
<div className={`message-asset ${isObfuscated ? 'ephemeral-asset-expired icon-file' : ''}`}>
<FileAsset message={message} isFocusable={isMessageFocused} />

{/*<ReadIndicator*/}
{/* message={message}*/}
{/* is1to1Conversation={is1to1Conversation}*/}
{/* isLastDeliveredMessage={isLastDeliveredMessage}*/}
{/* onClick={onClickDetails}*/}
{/* isInAsset*/}
{/*/>*/}
<ReadIndicator
message={message}
is1to1Conversation={is1to1Conversation}
isLastDeliveredMessage={isLastDeliveredMessage}
onClick={onClickDetails}
/>
</div>
);
}
Expand All @@ -125,13 +125,12 @@ const ContentAsset = ({
<div className={`message-asset ${isObfuscated ? 'ephemeral-asset-expired' : ''}`}>
<AudioAsset message={message} isFocusable={isMessageFocused} />

{/*<ReadIndicator*/}
{/* message={message}*/}
{/* is1to1Conversation={is1to1Conversation}*/}
{/* isLastDeliveredMessage={isLastDeliveredMessage}*/}
{/* onClick={onClickDetails}*/}
{/* isInAsset*/}
{/*/>*/}
<ReadIndicator
message={message}
is1to1Conversation={is1to1Conversation}
isLastDeliveredMessage={isLastDeliveredMessage}
onClick={onClickDetails}
/>
</div>
);
}
Expand All @@ -141,13 +140,12 @@ const ContentAsset = ({
<div className={`message-asset ${isObfuscated ? 'ephemeral-asset-expired icon-movie' : ''}`}>
<VideoAsset message={message} isFocusable={isMessageFocused} />

{/*<ReadIndicator*/}
{/* message={message}*/}
{/* is1to1Conversation={is1to1Conversation}*/}
{/* isLastDeliveredMessage={isLastDeliveredMessage}*/}
{/* onClick={onClickDetails}*/}
{/* isInAsset*/}
{/*/>*/}
<ReadIndicator
message={message}
is1to1Conversation={is1to1Conversation}
isLastDeliveredMessage={isLastDeliveredMessage}
onClick={onClickDetails}
/>
</div>
);
}
Expand All @@ -161,13 +159,12 @@ const ContentAsset = ({
isFocusable={isMessageFocused}
/>

{/*<ReadIndicator*/}
{/* message={message}*/}
{/* is1to1Conversation={is1to1Conversation}*/}
{/* isLastDeliveredMessage={isLastDeliveredMessage}*/}
{/* onClick={onClickDetails}*/}
{/* isInAsset*/}
{/*/>*/}
<ReadIndicator
message={message}
is1to1Conversation={is1to1Conversation}
isLastDeliveredMessage={isLastDeliveredMessage}
onClick={onClickDetails}
/>
</div>
);
case AssetType.LOCATION:
Expand Down
13 changes: 7 additions & 6 deletions src/script/components/MessagesList/Message/ReadIndicator/ReadIndicator.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,16 +25,12 @@ export const ReadReceiptText: CSSObject = {
verticalAlign: 'bottom',
};

export const ReadIndicatorStyles = (showIconOnly = false, isInAsset = false): CSSObject => ({
export const ReadIndicatorStyles = (showIconOnly = false): CSSObject => ({
color: 'var(--gray-70)',
fontSize: 'var(--font-size-small)',
fontWeight: 'var(--font-weight-medium)',
lineHeight: 'var(--line-height-sm)',

...(isInAsset && {
marginTop: '8px',
}),

svg: {
width: '10px',
minHeight: '10px',
Expand All @@ -48,8 +44,13 @@ export const ReadIndicatorStyles = (showIconOnly = false, isInAsset = false): CS
marginLeft: '8px',
}),

'.message-asset &': {
marginTop: '8px',
marginLeft: '12px',
},

...(!showIconOnly && {
opacity: 0,
opacity: 1,
'.message:hover &': {
opacity: '1',
},
Expand Down
6 changes: 2 additions & 4 deletions src/script/components/MessagesList/Message/ReadIndicator/ReadIndicator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ interface ReadIndicatorProps {
is1to1Conversation?: boolean;
isLastDeliveredMessage?: boolean;
showIconOnly?: boolean;
isInAsset?: boolean;
onClick: (message: Message) => void;
}

Expand All @@ -40,7 +39,6 @@ export const ReadIndicator = ({
is1to1Conversation = false,
isLastDeliveredMessage = false,
showIconOnly = false,
isInAsset = false,
onClick,
}: ReadIndicatorProps) => {
const {readReceipts} = useKoSubscribableChildren(message, ['readReceipts']);
Expand All @@ -54,7 +52,7 @@ export const ReadIndicator = ({
const showDeliveredMessage = isLastDeliveredMessage && readReceiptText === '';

return (
<span css={ReadIndicatorStyles(showIconOnly, isInAsset)} data-uie-name="status-message-read-receipts">
<span css={ReadIndicatorStyles(showIconOnly)} data-uie-name="status-message-read-receipts">
{showDeliveredMessage && (
<span data-uie-name="status-message-read-receipt-delivered">{t('conversationMessageDelivered')}</span>
)}
Expand All @@ -75,7 +73,7 @@ export const ReadIndicator = ({

return (
<button
css={ReadIndicatorStyles(showIconOnly, isInAsset)}
css={ReadIndicatorStyles(showIconOnly)}
onClick={() => onClick(message)}
className="button-reset-default"
data-uie-name="status-message-read-receipts"
Expand Down
9 changes: 7 additions & 2 deletions src/style/content/conversation/message-list.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -314,14 +314,18 @@
&-content {
width: 100%;
max-width: calc(@conversation-max-width - var(--conversation-message-sender-width));

//display: flex;
//align-items: flex-start;
}

.text {
.text-selection;
.accent-selection;

display: inline;
width: 100%;
//width: 100%;
width: auto;
min-width: 0;
margin-right: 12px;
line-height: @line-height-lg;
Expand Down Expand Up @@ -789,8 +793,9 @@

// MESSAGE SPACING
.message-asset {
display: flex;
max-width: var(--conversation-message-asset-width);
flex: 1;
align-items: flex-start;
margin-top: 8px;
}

Expand Down

0 comments on commit 9815614

Please sign in to comment.