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