Skip to content

Commit

Permalink
Merge pull request #223 from virtualidentityag/fix/CONNECTA-252-downl…
Browse files Browse the repository at this point in the history
…oad-area

fix(attachments): fix label color and make attachment area clickable
  • Loading branch information
koepferd authored Jul 12, 2024
2 parents 7bd5341 + 5c2b6de commit 99f16a4
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 17 deletions.
26 changes: 23 additions & 3 deletions src/components/message/MessageAttachment.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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={
Expand All @@ -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 />
Expand Down Expand Up @@ -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"
Expand All @@ -217,6 +235,7 @@ export const MessageAttachment = (props: MessageAttachmentProps) => {
</a>
) : (
<button
ref={currentDownloadLink}
onClick={() =>
decryptFile(
apiUrl + props.attachment.title_link
Expand All @@ -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"
Expand Down
15 changes: 7 additions & 8 deletions src/components/message/message.styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
* {
Expand All @@ -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;

Expand All @@ -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;
}
}
}

Expand Down
14 changes: 8 additions & 6 deletions src/extensions/resources/styles/_overwrites.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
}

Expand Down

0 comments on commit 99f16a4

Please sign in to comment.