fix(attachment): adding button download (#499)

Co-authored-by: Jeroen Claassens <support@favware.tech>

Author: eumarciel404

packages/core/src/components/_private/DiscordMediaAttachmentStyles.ts

@@ -11,6 +11,7 @@ export const DiscordMediaAttachmentStyles = css`
 		max-width: 100%;
 		display: flex;
 		flex-direction: column;
+		position: relative;
 	}
 
 	.discord-media-attachment-mosaic-item-media {
@@ -65,4 +66,32 @@ export const DiscordMediaAttachmentStyles = css`
 	.discord-media-attachment-duration-time-separator {
 		margin: 0 2px;
 	}
+
+	.discord-media-attachment-non-visual-media-item-container:hover .discord-button-download-attachment {
+		display: block !important;
+	}
+
+	.discord-button-download-attachment {
+		display: none;
+		position: absolute;
+		top: -8px;
+		right: -8px;
+		border-radius: 5px;
+		outline: color-mix(in oklab, hsl(220 calc(1 * 6.5%) 18% / 1) 100%, black 0%);
+		background-color: color-mix(in oklab, hsl(223 calc(1 * 6.7%) 20.6% / 1) 100%, black 0%);
+	}
+
+	.discord-link-download-attachment {
+		color: color-mix(in oklab, hsl(215 calc(1 * 8.8%) 73.3% / 1) 100%, black 0%);
+		display: flex;
+	}
+
+	.discord-icon-download {
+		padding: 6px;
+	}
+
+	.discord-button-download-attachment {
+		top: 5px !important;
+		right: 8px !important;
+	}
 `;

packages/core/src/components/discord-audio-attachment/DiscordAudioAttachment.ts

@@ -12,6 +12,7 @@ import { DiscordPlaybackControlStyles } from '../_private/DiscordPlaybackControl
 import { DiscordVolumeControlStyles } from '../_private/DiscordVolumeControlStyles.js';
 import '../discord-link/DiscordLink.js';
 import { messagesLightTheme } from '../discord-messages/DiscordMessages.js';
+import AttachmentDownloadButton from '../svgs/AttachmentDownloadButton.js';
 import MediaPauseIcon from '../svgs/MediaPauseIcon.js';
 import MediaPlayIcon from '../svgs/MediaPlayIcon.js';
 import MediaRestartIcon from '../svgs/MediaRestartIcon.js';
@@ -304,6 +305,19 @@ export class DiscordAudioAttachment extends DiscordMediaLifecycle implements Lig
 					</div>
 				</div>
 			</div>
+			<div class="discord-button-download-attachment">
+				<a
+					class="discord-link-download-attachment"
+					aria-label="Download"
+					href="${ifDefined(this.href)}"
+					rel="noreferrer noopener"
+					target="_blank"
+					role="button"
+					tabindex="0"
+				>
+					${AttachmentDownloadButton()}
+				</a>
+			</div>
 		</div>`;
 	}
 }

packages/core/src/components/discord-file-attachment/DiscordFileAttachment.ts

@@ -7,6 +7,7 @@ import { when } from 'lit/directives/when.js';
 import '../discord-link/DiscordLink.js';
 import type { LightTheme } from '../../types.js';
 import { messagesLightTheme } from '../discord-messages/DiscordMessages.js';
+import AttachmentDownloadButton from '../svgs/AttachmentDownloadButton.js';
 import FileAttachment from '../svgs/FileAttachment.js';
 
 @customElement('discord-file-attachment')
@@ -35,11 +36,35 @@ export class DiscordFileAttachment extends LitElement implements LightTheme {
 			align-self: start;
 		}
 
+		.discord-file-attachment-non-visual-media-item-container:hover .discord-button-download-attachment {
+			display: block !important;
+		}
+
+		.discord-button-download-attachment {
+			display: none;
+			position: absolute;
+			top: -8px;
+			right: -8px;
+			border-radius: 5px;
+			outline: color-mix(in oklab, hsl(220 calc(1 * 6.5%) 18% / 1) 100%, black 0%);
+			background-color: color-mix(in oklab, hsl(223 calc(1 * 6.7%) 20.6% / 1) 100%, black 0%);
+		}
+
+		.discord-link-download-attachment {
+			color: color-mix(in oklab, hsl(215 calc(1 * 8.8%) 73.3% / 1) 100%, black 0%);
+			display: flex;
+		}
+
+		.discord-icon-download {
+			padding: 6px;
+		}
+
 		.discord-file-attachment-non-visual-media-item-container {
 			margin-top: 8px;
 			max-width: 100%;
 			display: flex;
 			flex-direction: column;
+			position: relative;
 		}
 
 		.discord-file-attachment-non-visual-media-item {
@@ -211,6 +236,19 @@ export class DiscordFileAttachment extends LitElement implements LightTheme {
 					</div>
 				</div>
 			</div>
+			<div class="discord-button-download-attachment">
+				<a
+					class="discord-link-download-attachment"
+					aria-label="Download"
+					href="${ifDefined(this.href)}"
+					rel="noreferrer noopener"
+					target="_blank"
+					role="button"
+					tabindex="0"
+				>
+					${AttachmentDownloadButton()}
+				</a>
+			</div>
 		</div>`;
 	}
 }

packages/core/src/components/discord-video-attachment/DiscordVideoAttachment.ts

@@ -12,6 +12,7 @@ import { DiscordPlaybackControlStyles } from '../_private/DiscordPlaybackControl
 import { DiscordVolumeControlStyles } from '../_private/DiscordVolumeControlStyles.js';
 import '../discord-link/DiscordLink.js';
 import { messagesLightTheme } from '../discord-messages/DiscordMessages.js';
+import AttachmentDownloadButton from '../svgs/AttachmentDownloadButton.js';
 import MediaPauseIcon from '../svgs/MediaPauseIcon.js';
 import MediaPlayIcon from '../svgs/MediaPlayIcon.js';
 import MediaRestartIcon from '../svgs/MediaRestartIcon.js';
@@ -50,6 +51,11 @@ export class DiscordVideoAttachment extends DiscordMediaLifecycle implements Lig
 				--volume-slider-opacity: 0;
 			}
 
+			:host .discord-button-download-attachment {
+				top: 5px !important;
+				right: 8px !important;
+			}
+
 			.discord-video-attachment-one-by-one-grid {
 				max-width: 100%;
 				border-radius: 8px;
@@ -439,6 +445,19 @@ export class DiscordVideoAttachment extends DiscordMediaLifecycle implements Lig
 					</div>
 				</div>
 			</div>
+			<div class="discord-button-download-attachment">
+				<a
+					class="discord-link-download-attachment"
+					aria-label="Download"
+					href="${ifDefined(this.href)}"
+					rel="noreferrer noopener"
+					target="_blank"
+					role="button"
+					tabindex="0"
+				>
+					${AttachmentDownloadButton()}
+				</a>
+			</div>
 		</div>`;
 	}
 }

packages/core/src/components/svgs/AttachmentDownloadButton.ts

@@ -0,0 +1,25 @@
+import { html, svg } from 'lit';
+import { spread } from '../../spread.js';
+
+const svgContent = svg`
+	<path
+		fill="currentColor"
+		d="M12 2a1 1 0 0 1 1 1v10.59l3.3-3.3a1 1 0 1 1 1.4 1.42l-5 5a1 1 0 0 1-1.4 0l-5-5a1 1 0 1 1 1.4-1.42l3.3 3.3V3a1 1 0 0 1 1-1ZM3 20a1 1 0 1 0 0 2h18a1 1 0 1 0 0-2H3Z"
+	/>
+`;
+
+export default function AttachmentDownloadButton(props: Record<string, unknown> = {}) {
+	return html`<svg
+		${spread(props)}
+		class="discord-icon-download"
+		aria-hidden="true"
+		role="img"
+		xmlns="http://www.w3.org/2000/svg"
+		width="20"
+		height="20"
+		fill="none"
+		viewBox="0 0 24 24"
+	>
+		${svgContent}
+	</svg>`;
+}