mirror of
https://github.com/coracle-social/coracle.git
synced 2024-09-18 19:23:40 +00:00
Show note image rather than append url to note. Add close button for previews
This commit is contained in:
parent
447fdab654
commit
c16ea1e8e8
@ -5,9 +5,15 @@
|
||||
import user from 'src/agent/user'
|
||||
|
||||
export let url
|
||||
export let onClose = null
|
||||
|
||||
let preview
|
||||
|
||||
const close = () => {
|
||||
onClose?.()
|
||||
preview = null
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
if (url.match('\.(jpg|jpeg|png|gif)')) {
|
||||
preview = {image: url}
|
||||
@ -40,7 +46,7 @@
|
||||
<Anchor
|
||||
external
|
||||
href={url}
|
||||
class="rounded border border-solid border-medium flex flex-col bg-medium overflow-hidden">
|
||||
class="relative rounded border border-solid border-medium flex flex-col bg-medium overflow-hidden">
|
||||
{#if preview.image}
|
||||
<img alt="Link preview" src={preview.image} class="object-center max-h-96 object-contain" />
|
||||
{/if}
|
||||
@ -54,6 +60,12 @@
|
||||
<small>{preview.description}</small>
|
||||
</div>
|
||||
{/if}
|
||||
<div
|
||||
on:click|preventDefault={close}
|
||||
class="w-6 h-6 rounded-full bg-white border border-solid border-medium shadow absolute
|
||||
top-0 right-0 m-1 text-black flex justify-center items-center opacity-50">
|
||||
<i class="fa fa-times" />
|
||||
</div>
|
||||
</Anchor>
|
||||
</div>
|
||||
{/if}
|
||||
|
@ -9,6 +9,7 @@
|
||||
import Button from "src/partials/Button.svelte"
|
||||
import Compose from "src/partials/Compose.svelte"
|
||||
import ImageInput from "src/partials/ImageInput.svelte"
|
||||
import Preview from "src/partials/Preview.svelte"
|
||||
import Input from "src/partials/Input.svelte"
|
||||
import RelayCardSimple from "src/views/relays/RelayCardSimple.svelte"
|
||||
import Content from "src/partials/Content.svelte"
|
||||
@ -40,14 +41,12 @@
|
||||
)
|
||||
}
|
||||
|
||||
$: {
|
||||
if (image) {
|
||||
input.type('\n' + image)
|
||||
}
|
||||
}
|
||||
|
||||
const onSubmit = async () => {
|
||||
const {content, mentions, topics} = input.parse()
|
||||
let {content, mentions, topics} = input.parse()
|
||||
|
||||
if (image) {
|
||||
content += '\n' + image
|
||||
}
|
||||
|
||||
if (content) {
|
||||
const thunk = cmd.createNote(content, mentions, topics)
|
||||
@ -107,6 +106,9 @@
|
||||
<Compose bind:this={input} {onSubmit} />
|
||||
</div>
|
||||
</div>
|
||||
{#if image}
|
||||
<Preview url={image} onClose={() => { image = null }} />
|
||||
{/if}
|
||||
<div class="flex gap-2">
|
||||
<Button type="submit" class="text-center flex-grow">Send</Button>
|
||||
<ImageInput bind:value={image} icon="image" hideInput />
|
||||
|
Loading…
Reference in New Issue
Block a user