mirror of
https://github.com/coracle-social/coracle.git
synced 2024-09-18 19:23:40 +00:00
Small note display bugfixes
This commit is contained in:
parent
1576c66e96
commit
3a91d49fc0
@ -1,5 +1,8 @@
|
||||
# Current
|
||||
|
||||
- [ ] Fix @ mention on safari
|
||||
- [ ] Fix http://localhost:5173/nevent1qqspulrcsx0ceunrnk88vvdta4lw70ch32e03rl8elughxpwsdy0kkgpzfmhxue69uhk7enxvd5xz6tw9ec82cs56smhk
|
||||
- [ ] Get rid of Button
|
||||
- [ ] Make notifications beautiful and usable
|
||||
- [ ] Render threads in a way that makes them easy to use
|
||||
- [ ] White-labeled
|
||||
|
@ -11,6 +11,7 @@
|
||||
export let anchorId = null
|
||||
export let maxLength = 700
|
||||
export let showEntire = false
|
||||
export let hideShowMore = true
|
||||
export let showMedia = user.getSetting("showMedia")
|
||||
</script>
|
||||
|
||||
@ -25,5 +26,5 @@
|
||||
{:else if note.kind === 30023}
|
||||
<NoteContentKind30023 {note} {showEntire} {showMedia} />
|
||||
{:else}
|
||||
<NoteContentKind1 {note} {anchorId} {maxLength} {showEntire} {showMedia} />
|
||||
<NoteContentKind1 {note} {anchorId} {maxLength} {showEntire} {showMedia} {hideShowMore} />
|
||||
{/if}
|
||||
|
7
src/app/shared/NoteContentEllipsis.svelte
Normal file
7
src/app/shared/NoteContentEllipsis.svelte
Normal file
@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
import Anchor from 'src/partials/Anchor.svelte'
|
||||
</script>
|
||||
|
||||
<div class="-ml-12 mt-8 mb-4 flex justify-center pointer-events-none">
|
||||
<Anchor type="button">See more</Anchor>
|
||||
</div>
|
@ -7,11 +7,14 @@
|
||||
LINK,
|
||||
INVOICE,
|
||||
NEWLINE,
|
||||
ELLIPSIS,
|
||||
TOPIC,
|
||||
TEXT,
|
||||
} from "src/util/notes"
|
||||
import MediaSet from "src/partials/MediaSet.svelte"
|
||||
import QRCode from "src/partials/QRCode.svelte"
|
||||
import NoteContentNewline from "src/app/shared/NoteContentNewline.svelte"
|
||||
import NoteContentEllipsis from "src/app/shared/NoteContentEllipsis.svelte"
|
||||
import NoteContentTopic from "src/app/shared/NoteContentTopic.svelte"
|
||||
import NoteContentLink from "src/app/shared/NoteContentLink.svelte"
|
||||
import NoteContentPerson from "src/app/shared/NoteContentPerson.svelte"
|
||||
@ -22,13 +25,17 @@
|
||||
export let anchorId = false
|
||||
export let showEntire = false
|
||||
export let showMedia = false
|
||||
export let hideShowMore = false
|
||||
|
||||
const fullContent = parseContent(note)
|
||||
const shortContent = truncateContent(fullContent, {maxLength, showEntire, showMedia})
|
||||
const links = getLinks(shortContent)
|
||||
const extraLinks = without(links, getLinks(fullContent))
|
||||
|
||||
export const isNewline = i => !shortContent[i] || shortContent[i].type === NEWLINE
|
||||
export const isNewline = i =>
|
||||
!shortContent[i] ||
|
||||
shortContent[i].type === NEWLINE ||
|
||||
(shortContent[i].type === TEXT && shortContent[i].value.match(/^\s+$/))
|
||||
|
||||
export const isStartOrEnd = i => isNewline(i - 1) || isNewline(i + 1)
|
||||
</script>
|
||||
@ -38,6 +45,10 @@
|
||||
{#each shortContent as { type, value }, i}
|
||||
{#if type === NEWLINE}
|
||||
<NoteContentNewline {value} />
|
||||
{:else if type === ELLIPSIS}
|
||||
{#if !hideShowMore}
|
||||
<NoteContentEllipsis />
|
||||
{/if}
|
||||
{:else if type === TOPIC}
|
||||
<NoteContentTopic {value} />
|
||||
{:else if type === INVOICE}
|
||||
|
@ -1,7 +1,7 @@
|
||||
<script>
|
||||
import {pipe, filter, map, when, identity, pluck, propEq, uniq} from "ramda"
|
||||
import {closure, quantify} from "hurdak/lib/hurdak"
|
||||
import {tryJson} from "src/util/misc"
|
||||
import {tryJson, formatTimestamp} from "src/util/misc"
|
||||
import {Tags} from "src/util/nostr"
|
||||
import PersonBadge from "src/app/shared/PersonBadge.svelte"
|
||||
import Card from "src/partials/Card.svelte"
|
||||
@ -44,9 +44,9 @@
|
||||
interactive
|
||||
class="flex w-full flex-col gap-2 text-left"
|
||||
on:click={() => modal.push({type: "note/detail", note})}>
|
||||
<div on:click|stopPropagation>
|
||||
<div on:click|stopPropagation class="flex justify-between">
|
||||
{#if !event.ref}
|
||||
<div>
|
||||
<div class="flex items-center">
|
||||
<PersonBadge class="float-left" person={author} />
|
||||
<span class="relative top-px pl-1">mentioned you.</span>
|
||||
</div>
|
||||
@ -70,9 +70,12 @@
|
||||
</div>
|
||||
</Popover>
|
||||
{/if}
|
||||
<small>
|
||||
{formatTimestamp(event.created_at)}
|
||||
</small>
|
||||
</div>
|
||||
<div class="break-word overflow-hidden text-gray-1">
|
||||
<NoteContent maxLength={80} showMedia={false} {note} />
|
||||
<NoteContent maxLength={80} hideShowMore showMedia={false} {note} />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
@ -69,6 +69,7 @@
|
||||
ref,
|
||||
key: e.id,
|
||||
notifications: [e],
|
||||
created_at: e.created_at,
|
||||
dateDisplay: formatTimestampAsDate(e.created_at),
|
||||
showLine: e.created_at < prevChecked && prevTimestamp >= prevChecked,
|
||||
})
|
||||
|
@ -74,7 +74,7 @@
|
||||
|
||||
// Add the span and space
|
||||
selection.getRangeAt(0).insertNode(span)
|
||||
selection.collapse(span.nextSibling, 0)
|
||||
selection.collapse(span.parentNode, word.length + prefix.length)
|
||||
selection.getRangeAt(0).insertNode(space)
|
||||
selection.collapse(space, 2)
|
||||
|
||||
|
@ -4,6 +4,7 @@ import {first} from "hurdak/lib/hurdak"
|
||||
import {fromNostrURI} from "src/util/nostr"
|
||||
|
||||
export const NEWLINE = "newline"
|
||||
export const ELLIPSIS = "ellipsis"
|
||||
export const TEXT = "text"
|
||||
export const TOPIC = "topic"
|
||||
export const LINK = "link"
|
||||
@ -173,20 +174,21 @@ export const truncateContent = (content, {showEntire, maxLength, showMedia = fal
|
||||
content.every((part, i) => {
|
||||
const isText = [TOPIC, TEXT].includes(part.type) || (part.type === LINK && !part.value.isMedia)
|
||||
const isMedia = part.type === INVOICE || part.type.startsWith("nostr:") || part.value.isMedia
|
||||
const textLength = part.value.url?.length || part.value.length
|
||||
|
||||
if (isText) {
|
||||
length += part.value.length
|
||||
length += textLength
|
||||
}
|
||||
|
||||
if (isMedia) {
|
||||
length += showMedia ? maxLength / 3 : part.value.length
|
||||
length += showMedia ? maxLength / 3 : textLength
|
||||
}
|
||||
|
||||
result.push(part)
|
||||
|
||||
if (length > truncateAt && i < content.length - 1) {
|
||||
if (isText || (isMedia && !showMedia)) {
|
||||
result.push({type: TEXT, value: "..."})
|
||||
result.push({type: ELLIPSIS})
|
||||
}
|
||||
|
||||
return false
|
||||
|
Loading…
Reference in New Issue
Block a user