Skip to content

Commit

Permalink
fix(pinned): move some things around and add styling to pinned messag…
Browse files Browse the repository at this point in the history
…es (#652)
  • Loading branch information
Jekrimo authored Oct 9, 2024
1 parent f79904a commit bf78373
Show file tree
Hide file tree
Showing 3 changed files with 74 additions and 47 deletions.
108 changes: 63 additions & 45 deletions src/lib/components/messaging/PinnedMessages.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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[]
Expand Down Expand Up @@ -46,49 +46,54 @@
<div class="pinned-content-container">
<div class="pinned-sender-container">
<StoreResolver value={message.details.origin} resolver={v => Store.getUser(v)} let:resolved>
<ProfilePicture hook="pinned-message-profile-picture" size={Size.Smaller} image={resolved.profile.photo.image} status={resolved.profile.status} highlight={Appearance.Default} notifications={0} />
<ProfilePicture hook="pinned-message-profile-picture" size={Size.Small} image={resolved.profile.photo.image} status={resolved.profile.status} highlight={Appearance.Default} notifications={0} />
<div class="pinned-sender">
<p data-cy="pinned-message-sender">{resolved.name}</p>
<p data-cy="pinned-message-timestamp" class="sender-time">{message.details.at.toLocaleString()}</p>
<Text singleLine hook="pinned-message-sender">{resolved.name}</Text>
<Text muted singleLine hook="pinned-message-timestamp" class="sender-time">{message.details.at.toLocaleString()}</Text>
</div>
</StoreResolver>
<div class="pinned-button-container">
<Button hook="pinned-message-button-go-to" class="pinned-buttons" text={$_("messages.pinnedGoto")} on:click={_ => scrollTo(message.id)}></Button>
<Button hook="pinned-message-button-unpin" class="pinned-buttons" text={$_("messages.pinnedUnpin")} on:click={_ => unpin(message.id)}></Button>
<Button icon hook="pinned-message-button-unpin" tooltip={$_("messages.pinnedUnpin")} appearance={Appearance.Alt} class="pinned-buttons" on:click={_ => unpin(message.id)}
><Icon icon={Shape.PinSlash} /></Button>
<Button icon hook="pinned-message-button-go-to" tooltip={$_("messages.pinnedGoto")} class="pinned-buttons" on:click={_ => scrollTo(message.id)}><Icon icon={Shape.GoTo} /></Button>
</div>
</div>
</div>
<div class="pinned-message-content">
{#each message.text as line}
<Text hook="pinned-message-text" markdown={line} />
{/each}
{#if message.attachments.length > 0}
{#each message.attachments as attachment}
{#if attachment.kind === MessageAttachmentKind.File || attachment.location.length == 0}
<FileEmbed
altBackgroundColor={true}
fileInfo={{
id: "1",
isRenaming: OperationState.Initial,
source: "unknown",
name: attachment.name,
size: attachment.size,
icon: Shape.Document,
displayName: attachment.name,
type: "unknown/unknown",
remotePath: "",
}}
on:download={_ => download_attachment(message.id, attachment)} />
{:else if attachment.kind === MessageAttachmentKind.Image}
<ImageEmbed source={attachment.location} name={attachment.name} filesize={attachment.size} on:download={_ => download_attachment(message.id, attachment)} />
{:else if attachment.kind === MessageAttachmentKind.Text}
<TextDocument />
{:else if attachment.kind === MessageAttachmentKind.STL}
<STLViewer url={attachment.location} name={attachment.name} filesize={attachment.size} />
{:else if attachment.kind === MessageAttachmentKind.Audio}
<AudioEmbed location={attachment.location} name={attachment.name} size={attachment.size} />
{:else if attachment.kind === MessageAttachmentKind.Video}
<VideoEmbed location={attachment.location} name={attachment.name} size={attachment.size} />
{/if}
{/each}
{/if}
</div>
{#if message.attachments.length > 0}
{#each message.attachments as attachment}
{#if attachment.kind === MessageAttachmentKind.File || attachment.location.length == 0}
<FileEmbed
fileInfo={{
id: "1",
isRenaming: OperationState.Initial,
source: "unknown",
name: attachment.name,
size: attachment.size,
icon: Shape.Document,
type: "unknown/unknown",
remotePath: "",
}}
on:download={_ => download_attachment(message.id, attachment)} />
{:else if attachment.kind === MessageAttachmentKind.Image}
<ImageEmbed source={attachment.location} name={attachment.name} filesize={attachment.size} on:download={_ => download_attachment(message.id, attachment)} />
{:else if attachment.kind === MessageAttachmentKind.Text}
<TextDocument />
{:else if attachment.kind === MessageAttachmentKind.STL}
<STLViewer url={attachment.location} name={attachment.name} filesize={attachment.size} />
{:else if attachment.kind === MessageAttachmentKind.Audio}
<AudioEmbed location={attachment.location} name={attachment.name} size={attachment.size} />
{:else if attachment.kind === MessageAttachmentKind.Video}
<VideoEmbed location={attachment.location} name={attachment.name} size={attachment.size} />
{/if}
{/each}
{/if}
</div>
</div>
{/each}
Expand All @@ -115,31 +120,44 @@
max-height: 500px;
overflow: hidden;
overflow-y: auto;
z-index: 5;
}
}
.pinned-message-wrap {
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);
}
</style>
11 changes: 9 additions & 2 deletions src/lib/components/messaging/embeds/FileEmbed.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -27,7 +30,7 @@
}
</script>

<div class="file-embed" data-cy="file-embed">
<div class="file-embed {altBackgroundColor ? 'alt-bg' : ''}" data-cy="file-embed">
<Icon icon={fileInfo.icon} size={Size.Larger} />
<div class="body">
<div class="details">
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 2 additions & 0 deletions src/lib/enums/icons.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
const svgOptions = `stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"`

export const enum Shape {
GoTo = `<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12" />`,
PinSlash = `<path ${svgOptions} d=" M 3.29 20.72 L 8.79 15.22 M 14.76 13.26 L 17.7 10.33 M 7.44 10.1 L 6.92 10.17 L 5.33 11.76 L 12.25 18.68 L 13.84 17.1 L 13.91 16.57 M 17.7 10.31 L 19.38 10.31 L 20.18 9.51 L 14.5 3.83 L 13.7 4.63 L 13.7 6.31 L 10.75 9.26 M 4.77 3.28 L 20.71 19.21" />`,
VerticalEllipsis = `<path ${svgOptions} d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" />`,
Android = `<path ${svgOptions} d="M18.4395 5.5586c-.675 1.1664-1.352 2.3318-2.0274 3.498-.0366-.0155-.0742-.0286-.1113-.043-1.8249-.6957-3.484-.8-4.42-.787-1.8551.0185-3.3544.4643-4.2597.8203-.084-.1494-1.7526-3.021-2.0215-3.4864a1.1451 1.1451 0 0 0-.1406-.1914c-.3312-.364-.9054-.4859-1.379-.203-.475.282-.7136.9361-.3886 1.5019 1.9466 3.3696-.0966-.2158 1.9473 3.3593.0172.031-.4946.2642-1.3926 1.0177C2.8987 12.176.452 14.772 0 18.9902h24c-.119-1.1108-.3686-2.099-.7461-3.0683-.7438-1.9118-1.8435-3.2928-2.7402-4.1836a12.1048 12.1048 0 0 0-2.1309-1.6875c.6594-1.122 1.312-2.2559 1.9649-3.3848.2077-.3615.1886-.7956-.0079-1.1191a1.1001 1.1001 0 0 0-.8515-.5332c-.5225-.0536-.9392.3128-1.0488.5449zm-.0391 8.461c.3944.5926.324 1.3306-.1563 1.6503-.4799.3197-1.188.0985-1.582-.4941-.3944-.5927-.324-1.3307.1563-1.6504.4727-.315 1.1812-.1086 1.582.4941zM7.207 13.5273c.4803.3197.5506 1.0577.1563 1.6504-.394.5926-1.1038.8138-1.584.4941-.48-.3197-.5503-1.0577-.1563-1.6504.4008-.6021 1.1087-.8106 1.584-.4941z" />`,
Apple = `<path ${svgOptions} d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" />`,
Expand Down

0 comments on commit bf78373

Please sign in to comment.