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'
|
import user from 'src/agent/user'
|
||||||
|
|
||||||
export let url
|
export let url
|
||||||
|
export let onClose = null
|
||||||
|
|
||||||
let preview
|
let preview
|
||||||
|
|
||||||
|
const close = () => {
|
||||||
|
onClose?.()
|
||||||
|
preview = null
|
||||||
|
}
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
if (url.match('\.(jpg|jpeg|png|gif)')) {
|
if (url.match('\.(jpg|jpeg|png|gif)')) {
|
||||||
preview = {image: url}
|
preview = {image: url}
|
||||||
@ -40,7 +46,7 @@
|
|||||||
<Anchor
|
<Anchor
|
||||||
external
|
external
|
||||||
href={url}
|
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}
|
{#if preview.image}
|
||||||
<img alt="Link preview" src={preview.image} class="object-center max-h-96 object-contain" />
|
<img alt="Link preview" src={preview.image} class="object-center max-h-96 object-contain" />
|
||||||
{/if}
|
{/if}
|
||||||
@ -54,6 +60,12 @@
|
|||||||
<small>{preview.description}</small>
|
<small>{preview.description}</small>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/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>
|
</Anchor>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -9,6 +9,7 @@
|
|||||||
import Button from "src/partials/Button.svelte"
|
import Button from "src/partials/Button.svelte"
|
||||||
import Compose from "src/partials/Compose.svelte"
|
import Compose from "src/partials/Compose.svelte"
|
||||||
import ImageInput from "src/partials/ImageInput.svelte"
|
import ImageInput from "src/partials/ImageInput.svelte"
|
||||||
|
import Preview from "src/partials/Preview.svelte"
|
||||||
import Input from "src/partials/Input.svelte"
|
import Input from "src/partials/Input.svelte"
|
||||||
import RelayCardSimple from "src/views/relays/RelayCardSimple.svelte"
|
import RelayCardSimple from "src/views/relays/RelayCardSimple.svelte"
|
||||||
import Content from "src/partials/Content.svelte"
|
import Content from "src/partials/Content.svelte"
|
||||||
@ -40,14 +41,12 @@
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
$: {
|
|
||||||
if (image) {
|
|
||||||
input.type('\n' + image)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const onSubmit = async () => {
|
const onSubmit = async () => {
|
||||||
const {content, mentions, topics} = input.parse()
|
let {content, mentions, topics} = input.parse()
|
||||||
|
|
||||||
|
if (image) {
|
||||||
|
content += '\n' + image
|
||||||
|
}
|
||||||
|
|
||||||
if (content) {
|
if (content) {
|
||||||
const thunk = cmd.createNote(content, mentions, topics)
|
const thunk = cmd.createNote(content, mentions, topics)
|
||||||
@ -107,6 +106,9 @@
|
|||||||
<Compose bind:this={input} {onSubmit} />
|
<Compose bind:this={input} {onSubmit} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{#if image}
|
||||||
|
<Preview url={image} onClose={() => { image = null }} />
|
||||||
|
{/if}
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2">
|
||||||
<Button type="submit" class="text-center flex-grow">Send</Button>
|
<Button type="submit" class="text-center flex-grow">Send</Button>
|
||||||
<ImageInput bind:value={image} icon="image" hideInput />
|
<ImageInput bind:value={image} icon="image" hideInput />
|
||||||
|
Loading…
Reference in New Issue
Block a user