mirror of
https://github.com/coracle-social/coracle.git
synced 2024-09-18 19:23:40 +00:00
Add images to replies
This commit is contained in:
parent
6f75712e6e
commit
6802b411e2
@ -4,6 +4,8 @@
|
|||||||
|
|
||||||
- [x] Add search by nip05
|
- [x] Add search by nip05
|
||||||
- [x] Fix feed to show more variety
|
- [x] Fix feed to show more variety
|
||||||
|
- [x] Beautify notes
|
||||||
|
- [x] Add uploads to replies
|
||||||
|
|
||||||
## 0.2.15
|
## 0.2.15
|
||||||
|
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
# Current
|
# Current
|
||||||
|
|
||||||
- [ ] Strip zero width spaces from compose
|
|
||||||
- [ ] Fix iOS/safari/firefox
|
- [ ] Fix iOS/safari/firefox
|
||||||
- [ ] Add dynamic title tag
|
- [ ] Add dynamic title tag
|
||||||
- [ ] Show more link on long notes (rather than just an ellipsis)
|
- [ ] Show more link on long notes (rather than just an ellipsis)
|
||||||
|
@ -61,9 +61,13 @@
|
|||||||
<i slot="before" class={`fa fa-${icon}`} />
|
<i slot="before" class={`fa fa-${icon}`} />
|
||||||
</Input>
|
</Input>
|
||||||
{/if}
|
{/if}
|
||||||
<Anchor type="button" on:click={() => { isOpen = true }}>
|
<div on:click={() => { isOpen = true }}>
|
||||||
<i class="fa fa-upload" />
|
<slot name="button">
|
||||||
</Anchor>
|
<Anchor type="button">
|
||||||
|
<i class="fa fa-upload" />
|
||||||
|
</Anchor>
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if quote}
|
{#if quote}
|
||||||
|
@ -20,7 +20,7 @@
|
|||||||
transition:fade
|
transition:fade
|
||||||
on:click={onEscape} />
|
on:click={onEscape} />
|
||||||
<div
|
<div
|
||||||
class="absolute inset-0 mt-20 sm:mt-28 modal-content"
|
class="absolute inset-0 mt-24 sm:mt-28 modal-content"
|
||||||
transition:fly={{y: 1000, opacity: 1}}>
|
transition:fly={{y: 1000, opacity: 1}}>
|
||||||
<div class="bg-dark border-t border-solid border-medium h-full w-full overflow-auto pb-10">
|
<div class="bg-dark border-t border-solid border-medium h-full w-full overflow-auto pb-10">
|
||||||
<slot />
|
<slot />
|
||||||
|
@ -13,6 +13,7 @@
|
|||||||
import {formatTimestamp, now, tryJson, stringToColor, formatSats, fetchJson} from 'src/util/misc'
|
import {formatTimestamp, now, tryJson, stringToColor, formatSats, fetchJson} from 'src/util/misc'
|
||||||
import {extractUrls, copyToClipboard} from "src/util/html"
|
import {extractUrls, copyToClipboard} from "src/util/html"
|
||||||
import ImageCircle from 'src/partials/ImageCircle.svelte'
|
import ImageCircle from 'src/partials/ImageCircle.svelte'
|
||||||
|
import ImageInput from 'src/partials/ImageInput.svelte'
|
||||||
import Input from 'src/partials/Input.svelte'
|
import Input from 'src/partials/Input.svelte'
|
||||||
import Textarea from 'src/partials/Textarea.svelte'
|
import Textarea from 'src/partials/Textarea.svelte'
|
||||||
import Content from 'src/partials/Content.svelte'
|
import Content from 'src/partials/Content.svelte'
|
||||||
@ -46,6 +47,7 @@
|
|||||||
without([user.getPubkey()], uniq(Tags.from(note).type("p").values().all().concat(note.pubkey)))
|
without([user.getPubkey()], uniq(Tags.from(note).type("p").values().all().concat(note.pubkey)))
|
||||||
|
|
||||||
let zap = null
|
let zap = null
|
||||||
|
let image = null
|
||||||
let reply = null
|
let reply = null
|
||||||
let replyMentions = getDefaultReplyMentions()
|
let replyMentions = getDefaultReplyMentions()
|
||||||
let replyContainer = null
|
let replyContainer = null
|
||||||
@ -197,6 +199,10 @@
|
|||||||
const sendReply = async () => {
|
const sendReply = async () => {
|
||||||
let {content, mentions, topics} = reply.parse()
|
let {content, mentions, topics} = reply.parse()
|
||||||
|
|
||||||
|
if (image) {
|
||||||
|
content = (content + '\n' + image).trim()
|
||||||
|
}
|
||||||
|
|
||||||
if (content) {
|
if (content) {
|
||||||
mentions = uniq(mentions.concat(replyMentions))
|
mentions = uniq(mentions.concat(replyMentions))
|
||||||
|
|
||||||
@ -389,16 +395,16 @@
|
|||||||
</button>
|
</button>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="flex justify-between text-light" on:click={e => e.stopPropagation()}>
|
<div class="flex justify-between text-light">
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<div class="w-16">
|
<div class="w-16">
|
||||||
<button class="fa fa-reply cursor-pointer" on:click={startReply} />
|
<button class="fa fa-reply cursor-pointer" on:click|stopPropagation={startReply} />
|
||||||
{$repliesCount}
|
{$repliesCount}
|
||||||
</div>
|
</div>
|
||||||
<div class="w-16" class:text-accent={like}>
|
<div class="w-16" class:text-accent={like}>
|
||||||
<button
|
<button
|
||||||
class={cx('fa fa-heart cursor-pointer', {'fa-beat fa-beat-custom': like})}
|
class={cx('fa fa-heart cursor-pointer', {'fa-beat fa-beat-custom': like})}
|
||||||
on:click={() => like ? deleteReaction(like) : react("+")} />
|
on:click|stopPropagation={() => like ? deleteReaction(like) : react("+")} />
|
||||||
{$likesCount}
|
{$likesCount}
|
||||||
</div>
|
</div>
|
||||||
<div class="w-20" class:text-accent={zapped}>
|
<div class="w-20" class:text-accent={zapped}>
|
||||||
@ -406,16 +412,17 @@
|
|||||||
class={cx("fa fa-bolt cursor-pointer", {
|
class={cx("fa fa-bolt cursor-pointer", {
|
||||||
'pointer-events-none opacity-50': !canZap,
|
'pointer-events-none opacity-50': !canZap,
|
||||||
})}
|
})}
|
||||||
on:click={startZap} />
|
on:click|stopPropagation={startZap} />
|
||||||
{formatSats($zapsTotal)}
|
{formatSats($zapsTotal)}
|
||||||
</div>
|
</div>
|
||||||
<div class="w-16">
|
<div class="w-16">
|
||||||
<button class="fa fa-flag cursor-pointer" on:click={() => react("-")} />
|
<button class="fa fa-flag cursor-pointer" on:click|stopPropagation={() => react("-")} />
|
||||||
{$flagsCount}
|
{$flagsCount}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="cursor-pointer flex gap-1 items-center" on:click={() => { showRelays = true }}>
|
class="cursor-pointer flex gap-1 items-center"
|
||||||
|
on:click|stopPropagation={() => { showRelays = true }}>
|
||||||
<i class="fa fa-server" />
|
<i class="fa fa-server" />
|
||||||
<div
|
<div
|
||||||
class="h-1 w-1 rounded-full"
|
class="h-1 w-1 rounded-full"
|
||||||
@ -429,8 +436,13 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if reply}
|
{#if reply}
|
||||||
<div transition:slide class="note-reply relative z-10" bind:this={replyContainer}>
|
<div transition:slide
|
||||||
<div class={`border border-${borderColor} border-solid rounded-t bg-dark`} on:keydown={onReplyKeydown}>
|
class={`note-reply relative z-10 border border-${borderColor} border-solid rounded`}
|
||||||
|
bind:this={replyContainer}>
|
||||||
|
<div
|
||||||
|
class="bg-dark"
|
||||||
|
class:rounded-b={replyMentions.length === 0}
|
||||||
|
on:keydown={onReplyKeydown}>
|
||||||
<Compose bind:this={reply} onSubmit={sendReply}>
|
<Compose bind:this={reply} onSubmit={sendReply}>
|
||||||
<button
|
<button
|
||||||
slot="addon"
|
slot="addon"
|
||||||
@ -441,20 +453,31 @@
|
|||||||
</button>
|
</button>
|
||||||
</Compose>
|
</Compose>
|
||||||
</div>
|
</div>
|
||||||
{#if replyMentions.length > 0}
|
{#if image}
|
||||||
<div class={`text-white text-sm p-2 rounded-b border-t-0 border border-solid border-${borderColor} bg-black`}>
|
<div class="p-2 bg-dark">
|
||||||
<div class="inline-block border-r border-solid border-medium pl-1 pr-3 mr-2">
|
<Preview url={image} onClose={() => { image = null }} />
|
||||||
<i class="fa fa-at" />
|
</div>
|
||||||
|
{/if}
|
||||||
|
<div class={`h-px bg-${borderColor}`} />
|
||||||
|
<div class="text-white text-sm p-2 rounded-b bg-black h-12">
|
||||||
|
<div class="inline-block py-2 pl-1 pr-3 mr-2 border-r border-solid border-medium">
|
||||||
|
<div class="flex gap-3 items-center cursor-pointer">
|
||||||
|
<ImageInput bind:value={image} icon="image" hideInput>
|
||||||
|
<i slot="button" class="fa fa-paperclip" />
|
||||||
|
</ImageInput>
|
||||||
|
<i class="fa fa-at" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{#each replyMentions as p}
|
{#each replyMentions as p}
|
||||||
<div class="inline-block py-1 px-2 mr-1 mb-2 rounded-full border border-solid border-light">
|
<div class="inline-block py-1 px-2 mr-1 rounded-full border border-solid border-light">
|
||||||
<button class="fa fa-times cursor-pointer" on:click|stopPropagation={() => removeMention(p)} />
|
<button class="fa fa-times cursor-pointer" on:click|stopPropagation={() => removeMention(p)} />
|
||||||
{displayPerson(database.getPersonWithFallback(p))}
|
{displayPerson(database.getPersonWithFallback(p))}
|
||||||
</div>
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="text-light inline-block">No mentions</div>
|
||||||
{/each}
|
{/each}
|
||||||
<div class="-mt-2" />
|
<div class="-mt-2" />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
@ -45,7 +45,7 @@
|
|||||||
let {content, mentions, topics} = input.parse()
|
let {content, mentions, topics} = input.parse()
|
||||||
|
|
||||||
if (image) {
|
if (image) {
|
||||||
content += '\n' + image
|
content = (content + '\n' + image).trim()
|
||||||
}
|
}
|
||||||
|
|
||||||
if (content) {
|
if (content) {
|
||||||
|
@ -56,7 +56,7 @@
|
|||||||
</div>
|
</div>
|
||||||
{:else if note.pubkey}
|
{:else if note.pubkey}
|
||||||
<div in:fly={{y: 20}} class="flex flex-col gap-4 p-4">
|
<div in:fly={{y: 20}} class="flex flex-col gap-4 p-4">
|
||||||
<Note showContext invertColors depth={6} anchorId={note.id} note={asDisplayEvent(note)} />
|
<Note showContext depth={6} anchorId={note.id} note={asDisplayEvent(note)} />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user