Merge pull request #224 from virtualidentityag/fix/CONNECTA-252-downl…

…oad-area Fix/connecta 252 download area
virtualidentityag · Jul 15, 2024 · 496538b · 496538b
2 parents 63974bb + 5c2b6de
commit 496538b
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 17 deletions.
diff --git a/src/components/message/MessageAttachment.tsx b/src/components/message/MessageAttachment.tsx
@@ -6,7 +6,7 @@ import {
 import { ReactComponent as DownloadIcon } from '../../resources/img/icons/download.svg';
 import { useTranslation } from 'react-i18next';
 import { apiUrl } from '../../resources/scripts/endpoints';
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';
 import { FETCH_METHODS, fetchData } from '../../api';
 import {
 	decryptAttachment,
@@ -54,6 +54,7 @@ export const MessageAttachment = (props: MessageAttachmentProps) => {
 	const [attachmentStatus, setAttachmentStatus] = React.useState(
 		props.t === 'e2e' ? ENCRYPTED : NOT_ENCRYPTED
 	);
+	const currentDownloadLink = useRef<any>();
 
 	const decryptFile = useCallback(
 		async (url: string) => {
@@ -151,6 +152,18 @@ export const MessageAttachment = (props: MessageAttachmentProps) => {
 		return null;
 	}, []);
 
+	const attachmentAriaLabel = () => {
+		if (
+			props.t === 'e2e' &&
+			encryptedFile &&
+			attachmentStatus === DECRYPTION_FINISHED
+		)
+			return translate('e2ee.attachment.save');
+		else if (props.t === 'e2e' && attachmentStatus !== DECRYPTION_FINISHED)
+			return translate(`e2ee.attachment.${attachmentStatus}`);
+		else return translate('attachments.download.label');
+	};
+
 	return (
 		<div
 			className={
@@ -159,7 +172,11 @@ export const MessageAttachment = (props: MessageAttachmentProps) => {
 					: ''
 			}
 		>
-			<div className="messageItem__message__attachment">
+			<button
+				aria-label={attachmentAriaLabel()}
+				onClick={() => currentDownloadLink.current.click()}
+				className="messageItem__message__attachment"
+			>
 				<span className="messageItem__message__attachment__icon">
 					{attachmentStatus === IS_DECRYPTING ? (
 						<LoadingSpinner />
@@ -198,12 +215,13 @@ export const MessageAttachment = (props: MessageAttachmentProps) => {
 							: null}
 					</p>
 				</span>
-			</div>
+			</button>
 			{props.t === 'e2e' && (
 				<>
 					{encryptedFile &&
 					attachmentStatus === DECRYPTION_FINISHED ? (
 						<a
+							ref={currentDownloadLink}
 							href={encryptedFile}
 							download={props.file.name}
 							rel="noopener noreferer"
@@ -217,6 +235,7 @@ export const MessageAttachment = (props: MessageAttachmentProps) => {
 						</a>
 					) : (
 						<button
+							ref={currentDownloadLink}
 							onClick={() =>
 								decryptFile(
 									apiUrl + props.attachment.title_link
@@ -242,6 +261,7 @@ export const MessageAttachment = (props: MessageAttachmentProps) => {
 			)}
 			{props.t !== 'e2e' && (
 				<a
+					ref={currentDownloadLink}
 					href={apiUrl + props.attachment.title_link}
 					rel="noopener noreferer"
 					className="messageItem__message__attachment__download"

diff --git a/src/components/message/message.styles.scss b/src/components/message/message.styles.scss
@@ -217,9 +217,11 @@ $message-attachment-color: $secondary !default;
 			align-items: center;
 			background-color: $dark-grey;
 			border-radius: $icon-size;
+			border: none;
 			color: $message-attachment-color;
 			padding: 6px $grid-base-three 5px 12px;
 			max-width: 350px;
+			cursor: pointer;
 
 			&__icon svg {
 				* {
@@ -241,7 +243,7 @@ $message-attachment-color: $secondary !default;
 
 				p {
 					margin: 0;
-					color: var(--text-color-contrast-switch, $secondary);
+					color: var(--skin-color-default, $secondary);
 					line-height: $icon-size;
 					text-decoration: underline;
 
@@ -250,14 +252,11 @@ $message-attachment-color: $secondary !default;
 						color: var(--text-color-contrast-switch, $primary);
 						text-decoration: none;
 					}
-				}
-
-				&:hover p {
-					color: var(--text-color-contrast-switch, $primary);
-				}
 
-				svg * {
-					fill: var(--text-color-contrast-switch, $primary);
+					&:hover {
+						color: var(--skin-color-default, $secondary);
+						opacity: 0.8;
+					}
 				}
 			}
 

diff --git a/src/extensions/resources/styles/_overwrites.scss b/src/extensions/resources/styles/_overwrites.scss
@@ -1,9 +1,11 @@
-.messageItem__message__attachment__download:hover {
-	p,
-	svg * {
-		fill: var(--text-color-contrast-switch, $white);
-		color: var(--text-color-contrast-switch, $white);
-		opacity: 0.8;
+.messageItem__message--myMessage {
+	.messageItem__message__attachment__download:hover {
+		p,
+		svg * {
+			fill: var(--text-color-contrast-switch, $white);
+			color: var(--text-color-contrast-switch, $white);
+			opacity: 0.8;
+		}
 	}
 }