From 3512e607263efdf932075b8d2ce04e30a6e99ccb Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Thu, 8 Feb 2024 10:34:35 +1100
Subject: [PATCH] feat: add drop shadow to all selected message elements
---
stylesheets/_modules.scss | 4 ++++
ts/components/conversation/H5AudioPlayer.tsx | 7 ++++++-
.../message/message-content/MessageAttachment.tsx | 10 +++++++++-
3 files changed, 19 insertions(+), 2 deletions(-)
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 349b85b70..54391bce3 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -69,6 +69,10 @@
color: var(--message-bubbles-received-text-color);
background: var(--message-bubbles-received-background-color);
}
+
+ &.message-selected {
+ box-shadow: var(--drop-shadow);
+ }
}
.module-message__generic-attachment__icon-container {
diff --git a/ts/components/conversation/H5AudioPlayer.tsx b/ts/components/conversation/H5AudioPlayer.tsx
index 490166f9f..2ace8bde9 100644
--- a/ts/components/conversation/H5AudioPlayer.tsx
+++ b/ts/components/conversation/H5AudioPlayer.tsx
@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from 'react-redux';
import styled from 'styled-components';
import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch';
import { setNextMessageToPlayId } from '../../state/ducks/conversations';
+import { useMessageSelected } from '../../state/selectors';
import {
getNextMessageToPlayId,
getSortedMessagesOfSelectedConversation,
@@ -25,7 +26,7 @@ const StyledSpeedButton = styled.div`
}
`;
-export const StyledH5AudioPlayer = styled(H5AudioPlayer)`
+export const StyledH5AudioPlayer = styled(H5AudioPlayer)<{ dropShadow?: boolean }>`
&.rhap_container {
min-width: 220px;
padding: 0px;
@@ -145,6 +146,8 @@ export const StyledH5AudioPlayer = styled(H5AudioPlayer)`
height: 20px;
margin-right: 0px;
}
+
+ ${props => props.dropShadow && 'box-shadow: var(--drop-shadow);'}
`;
export const AudioPlayerWithEncryptedFile = (props: {
@@ -162,6 +165,7 @@ export const AudioPlayerWithEncryptedFile = (props: {
const messageProps = useSelector(getSortedMessagesOfSelectedConversation);
const nextMessageToPlayId = useSelector(getNextMessageToPlayId);
const multiSelectMode = useSelector(isMessageSelectionMode);
+ const selected = useMessageSelected(messageId);
const dataTestId = `audio-${messageId}`;
@@ -263,6 +267,7 @@ export const AudioPlayerWithEncryptedFile = (props: {
play: <SessionIcon iconType="play" iconSize="small" />,
pause: <SessionIcon iconType="pause" iconSize="small" />,
}}
+ dropShadow={selected}
/>
);
};
diff --git a/ts/components/conversation/message/message-content/MessageAttachment.tsx b/ts/components/conversation/message/message-content/MessageAttachment.tsx
index db3d843d5..1eda378f5 100644
--- a/ts/components/conversation/message/message-content/MessageAttachment.tsx
+++ b/ts/components/conversation/message/message-content/MessageAttachment.tsx
@@ -11,6 +11,7 @@ import {
toggleSelectedMessageId,
} from '../../../../state/ducks/conversations';
import { StateType } from '../../../../state/reducer';
+import { useMessageSelected } from '../../../../state/selectors';
import {
getMessageAttachmentProps,
isMessageSelectionMode,
@@ -72,6 +73,7 @@ export const MessageAttachment = (props: Props) => {
);
const multiSelectMode = useSelector(isMessageSelectionMode);
+ const selected = useMessageSelected(messageId);
const onClickOnImageGrid = useCallback(
(attachment: AttachmentTypeWithPath | AttachmentType) => {
if (multiSelectMode) {
@@ -176,7 +178,13 @@ export const MessageAttachment = (props: Props) => {
const extension = getExtensionForDisplay({ contentType, fileName });
return (
- <MessageHighlighter highlight={highlight} className="module-message__generic-attachment">
+ <MessageHighlighter
+ highlight={highlight}
+ className={classNames(
+ 'module-message__generic-attachment',
+ selected ? 'message-selected' : undefined
+ )}
+ >
{pending ? (
<div className="module-message__generic-attachment__spinner-container">
<Spinner size="small" />