diff --git a/src/lib/components/messaging/PinnedMessages.svelte b/src/lib/components/messaging/PinnedMessages.svelte index aec8ba660..dcb268ffe 100644 --- a/src/lib/components/messaging/PinnedMessages.svelte +++ b/src/lib/components/messaging/PinnedMessages.svelte @@ -2,7 +2,6 @@ import Text from "$lib/elements/Text.svelte" import { FileEmbed, ImageEmbed, STLViewer, ProfilePicture } from "$lib/components" import { Appearance, MessageAttachmentKind, Shape, Size } from "$lib/enums" - import { OperationState, type Attachment, type Message } from "$lib/types" import { _ } from "svelte-i18n" import TextDocument from "$lib/components/messaging/embeds/TextDocument.svelte" @@ -13,6 +12,7 @@ import StoreResolver from "$lib/components/utils/StoreResolver.svelte" import Label from "$lib/elements/Label.svelte" import Button from "$lib/elements/Button.svelte" + import { Icon } from "$lib/elements" export let chatID: string export let messages: Message[] @@ -46,49 +46,54 @@
Store.getUser(v)} let:resolved> - +
-

{resolved.name}

-

{message.details.at.toLocaleString()}

+ {resolved.name} + {message.details.at.toLocaleString()}
- - + +
+
+
{#each message.text as line} {/each} + {#if message.attachments.length > 0} + {#each message.attachments as attachment} + {#if attachment.kind === MessageAttachmentKind.File || attachment.location.length == 0} + download_attachment(message.id, attachment)} /> + {:else if attachment.kind === MessageAttachmentKind.Image} + download_attachment(message.id, attachment)} /> + {:else if attachment.kind === MessageAttachmentKind.Text} + + {:else if attachment.kind === MessageAttachmentKind.STL} + + {:else if attachment.kind === MessageAttachmentKind.Audio} + + {:else if attachment.kind === MessageAttachmentKind.Video} + + {/if} + {/each} + {/if}
- {#if message.attachments.length > 0} - {#each message.attachments as attachment} - {#if attachment.kind === MessageAttachmentKind.File || attachment.location.length == 0} - download_attachment(message.id, attachment)} /> - {:else if attachment.kind === MessageAttachmentKind.Image} - download_attachment(message.id, attachment)} /> - {:else if attachment.kind === MessageAttachmentKind.Text} - - {:else if attachment.kind === MessageAttachmentKind.STL} - - {:else if attachment.kind === MessageAttachmentKind.Audio} - - {:else if attachment.kind === MessageAttachmentKind.Video} - - {/if} - {/each} - {/if} {/each} @@ -115,6 +120,7 @@ max-height: 500px; overflow: hidden; overflow-y: auto; + z-index: 5; } } @@ -122,24 +128,36 @@ background: var(--background-alt); padding: var(--padding-less); border-radius: var(--border-radius); + width: 100%; .pinned-sender-container { display: flex; - gap: var(--gap); - margin-bottom: var(--padding-less); + width: 100%; .pinned-sender { + padding-left: var(--padding); display: flex; + width: 100%; flex-direction: column; - width: min-content; - .sender-time { - color: var(--color-muted); - } + flex: 1; } } + .pinned-button-container { + display: flex; + height: 100%; + gap: var(--gap-less); + } } - - .pinned-button-container { - display: flex; - gap: var(--gap-less); - margin-left: auto; + .pinned-message-content { + background-color: var(--alt-color-alt); + border-radius: 1rem; + padding: var(--padding-less); + text-align: center; + font-size: 0.8rem; + transform: scale(0.85); + } + :global(.pinned-message-content .container .image) { + transform: scale(0.9) !important; + } + :global(.pinned-message-content .container) { + background-color: var(--alt-color-alt); } diff --git a/src/lib/components/messaging/embeds/FileEmbed.svelte b/src/lib/components/messaging/embeds/FileEmbed.svelte index 1483162d5..deefbd4a0 100644 --- a/src/lib/components/messaging/embeds/FileEmbed.svelte +++ b/src/lib/components/messaging/embeds/FileEmbed.svelte @@ -9,11 +9,14 @@ import { createEventDispatcher } from "svelte" import { _ } from "svelte-i18n" + export let altBackgroundColor: boolean = false + const dispatch = createEventDispatcher() export let fileInfo: FileInfo = { id: "1", isRenaming: OperationState.Initial, + displayName: "", source: "unknown", name: "unknown", size: 999999999999999, @@ -27,7 +30,7 @@ } -
+
@@ -59,9 +62,13 @@ width: 100%; display: inline-flex; padding: var(--padding); - background-color: var(--background-alt); + background-color: var(--background); border-radius: var(--border-radius-medium); + &.alt-bg { + background: var(--alt-color); + } + .body { display: inline-flex; flex-direction: row; diff --git a/src/lib/enums/icons.ts b/src/lib/enums/icons.ts index ec5bf8a49..b641dd4cd 100644 --- a/src/lib/enums/icons.ts +++ b/src/lib/enums/icons.ts @@ -1,6 +1,8 @@ const svgOptions = `stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"` export const enum Shape { + GoTo = ``, + PinSlash = ``, VerticalEllipsis = ``, Android = ``, Apple = ``,