From 056368bdaf47f13d18bcca8c7897f257855f7bb9 Mon Sep 17 00:00:00 2001 From: Marciel404 <48138111+eumarciel404@users.noreply.github.com> Date: Sat, 2 Nov 2024 11:09:27 -0300 Subject: [PATCH] fix(attachment): adding button download (#499) Co-authored-by: Jeroen Claassens --- .../_private/DiscordMediaAttachmentStyles.ts | 29 ++++++++++++++ .../DiscordAudioAttachment.ts | 14 +++++++ .../DiscordFileAttachment.ts | 38 +++++++++++++++++++ .../DiscordVideoAttachment.ts | 19 ++++++++++ .../svgs/AttachmentDownloadButton.ts | 25 ++++++++++++ 5 files changed, 125 insertions(+) create mode 100644 packages/core/src/components/svgs/AttachmentDownloadButton.ts diff --git a/packages/core/src/components/_private/DiscordMediaAttachmentStyles.ts b/packages/core/src/components/_private/DiscordMediaAttachmentStyles.ts index 02e76f492..356713021 100644 --- a/packages/core/src/components/_private/DiscordMediaAttachmentStyles.ts +++ b/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; + } `; diff --git a/packages/core/src/components/discord-audio-attachment/DiscordAudioAttachment.ts b/packages/core/src/components/discord-audio-attachment/DiscordAudioAttachment.ts index 5f8ecec8a..23962dd78 100644 --- a/packages/core/src/components/discord-audio-attachment/DiscordAudioAttachment.ts +++ b/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 +
+ + ${AttachmentDownloadButton()} + +
`; } } diff --git a/packages/core/src/components/discord-file-attachment/DiscordFileAttachment.ts b/packages/core/src/components/discord-file-attachment/DiscordFileAttachment.ts index fbdca7d08..34ad40860 100644 --- a/packages/core/src/components/discord-file-attachment/DiscordFileAttachment.ts +++ b/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 { +
+ + ${AttachmentDownloadButton()} + +
`; } } diff --git a/packages/core/src/components/discord-video-attachment/DiscordVideoAttachment.ts b/packages/core/src/components/discord-video-attachment/DiscordVideoAttachment.ts index 0001430d0..ca1e0efe4 100644 --- a/packages/core/src/components/discord-video-attachment/DiscordVideoAttachment.ts +++ b/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 +
+ + ${AttachmentDownloadButton()} + +
`; } } diff --git a/packages/core/src/components/svgs/AttachmentDownloadButton.ts b/packages/core/src/components/svgs/AttachmentDownloadButton.ts new file mode 100644 index 000000000..ea9dec5f3 --- /dev/null +++ b/packages/core/src/components/svgs/AttachmentDownloadButton.ts @@ -0,0 +1,25 @@ +import { html, svg } from 'lit'; +import { spread } from '../../spread.js'; + +const svgContent = svg` + +`; + +export default function AttachmentDownloadButton(props: Record = {}) { + return html``; +}