mirror of
https://github.com/coracle-social/coracle.git
synced 2024-09-29 08:21:20 +00:00
Spruce up reply rendering
This commit is contained in:
parent
9f136ad715
commit
64d77defa8
@ -4,7 +4,7 @@
|
||||
import {onMount, onDestroy} from "svelte"
|
||||
import {quantify, ensurePlural, batch} from "hurdak"
|
||||
import {Tags} from "paravel"
|
||||
import {fly} from "src/util/transition"
|
||||
import {fly, slide} from "src/util/transition"
|
||||
import {
|
||||
getIdOrAddress,
|
||||
isChildOf,
|
||||
@ -17,7 +17,7 @@
|
||||
} from "src/util/nostr"
|
||||
import {formatTimestamp} from "src/util/misc"
|
||||
import Popover from "src/partials/Popover.svelte"
|
||||
import AlternatingBackground from "src/partials/AlternatingBackground.svelte"
|
||||
import AltColor from "src/partials/AltColor.svelte"
|
||||
import Spinner from "src/partials/Spinner.svelte"
|
||||
import Anchor from "src/partials/Anchor.svelte"
|
||||
import Card from "src/partials/Card.svelte"
|
||||
@ -101,7 +101,9 @@
|
||||
const goToParent = () =>
|
||||
router
|
||||
.at("notes")
|
||||
.of(getParentId(event), {relays: mergeHints([getPubkeyHints(event.pubkey, 'read'), tags.getReplyHints()])})
|
||||
.of(getParentId(event), {
|
||||
relays: mergeHints([getPubkeyHints(event.pubkey, "read"), tags.getReplyHints()]),
|
||||
})
|
||||
.cx({context: ctx.concat(event)})
|
||||
.open()
|
||||
|
||||
@ -236,16 +238,30 @@
|
||||
|
||||
{#if ready}
|
||||
{@const showReply = replyId && !getParentIds(event).includes(anchor) && showParent}
|
||||
{@const showRoot = rootId && !getRootIds(event).includes(anchor) && rootId !== replyId && showParent}
|
||||
{@const showRoot =
|
||||
rootId && !getRootIds(event).includes(anchor) && rootId !== replyId && showParent}
|
||||
<div>
|
||||
<NoteMeta note={event} {showGroup} />
|
||||
<div class="note relative" class:py-2={!showParent && !topLevel}>
|
||||
{#if !showParent && !topLevel}
|
||||
<AlternatingBackground class="absolute -left-4 h-[2px] w-4" style="top: 27px;" />
|
||||
<AltColor let:isAlt>
|
||||
<svg height="36" width="36" class="absolute -left-[18px] top-2">
|
||||
<circle
|
||||
cx="18"
|
||||
cy="18"
|
||||
r="14"
|
||||
fill="transparent"
|
||||
stroke-width="4"
|
||||
stroke-dashoffset="54"
|
||||
stroke-dasharray="100 100"
|
||||
transform-origin="center"
|
||||
class={isAlt ? "stroke-cocoa" : "stroke-dark"} />
|
||||
</svg>
|
||||
</AltColor>
|
||||
{#if isLastReply}
|
||||
<AlternatingBackground class="absolute -left-4 w-[2px]" style="height: 19px;" />
|
||||
<AltColor background class="absolute -left-4 h-[19px] w-1" let:isAlt />
|
||||
{:else}
|
||||
<AlternatingBackground class="absolute -left-4 h-full w-[2px]" />
|
||||
<AltColor background class="absolute -left-4 h-full w-1" let:isAlt />
|
||||
{/if}
|
||||
{/if}
|
||||
<div class="group relative">
|
||||
@ -311,27 +327,26 @@
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{#if !replyIsActive && visibleReplies.length > 0 && !showEntire && depth > 0}
|
||||
<div class="relative">
|
||||
<div
|
||||
class="absolute right-0 top-0 -mr-2 -mt-4 flex h-6 w-6 cursor-pointer items-center
|
||||
justify-center rounded-full border border-solid border-mid bg-dark text-lightest"
|
||||
{#if !replyIsActive && (visibleReplies.length > 0 || collapsed) && !showEntire && depth > 0}
|
||||
<div class="relative h-4">
|
||||
<AltColor
|
||||
background
|
||||
class="absolute left-0 top-0 -mr-2 -mt-5 flex h-8 w-8 cursor-pointer items-center
|
||||
justify-center rounded-full"
|
||||
on:click={() => {
|
||||
collapsed = !collapsed
|
||||
}}>
|
||||
<Popover triggerType="mouseenter">
|
||||
<div slot="trigger">
|
||||
{#if collapsed}
|
||||
<i class="fa fa-xs fa-up-right-and-down-left-from-center" />
|
||||
{:else}
|
||||
<i class="fa fa-xs fa-down-left-and-up-right-to-center" />
|
||||
{/if}
|
||||
<i
|
||||
class="fa fa-arrow-up text-lighter transition-all"
|
||||
class:rotate-180={collapsed} />
|
||||
</div>
|
||||
<div slot="tooltip">
|
||||
{collapsed ? "Show replies" : "Hide replies"}
|
||||
</div>
|
||||
</Popover>
|
||||
</div>
|
||||
</AltColor>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@ -351,7 +366,10 @@
|
||||
}} />
|
||||
|
||||
{#if visibleReplies.length > 0 || hiddenReplies.length > 0 || mutedReplies.length > 0}
|
||||
<div class="note-children relative ml-4 mt-2 flex flex-col">
|
||||
<div
|
||||
class="note-children relative ml-4 mt-2 flex flex-col"
|
||||
in:fly|local={{y: 20}}
|
||||
out:slide|local>
|
||||
{#if hiddenReplies.length > 0}
|
||||
<button
|
||||
class="mb-2 mt-2 cursor-pointer rounded-md bg-gradient-to-l from-transparent to-cocoa py-2 text-lightest outline-0 transition-colors hover:bg-cocoa"
|
||||
@ -362,10 +380,10 @@
|
||||
Show {quantify(hiddenReplies.length, "other reply", "more replies")}
|
||||
</button>
|
||||
{#if visibleReplies.length > 0}
|
||||
<AlternatingBackground class="absolute -left-4 -top-4 h-20 w-[2px]" />
|
||||
<AltColor background class="absolute -left-4 -top-10 h-28 w-1" />
|
||||
{/if}
|
||||
{:else if visibleReplies.length > 0}
|
||||
<AlternatingBackground class="absolute -left-4 -top-4 h-8 w-[2px]" />
|
||||
<AltColor background class="absolute -left-4 -top-10 h-14 w-1" />
|
||||
{/if}
|
||||
{#if visibleReplies.length}
|
||||
<div in:fly={{y: 20}} class="-mb-2">
|
||||
|
@ -7,7 +7,7 @@
|
||||
import Popover from "src/partials/Popover.svelte"
|
||||
import Compose from "src/app/shared/Compose.svelte"
|
||||
import ImageInput from "src/partials/ImageInput.svelte"
|
||||
import AlternatingBackground from "src/partials/AlternatingBackground.svelte"
|
||||
import AltColor from "src/partials/AltColor.svelte"
|
||||
import NsecWarning from "src/app/shared/NsecWarning.svelte"
|
||||
import PersonCircle from "src/app/shared/PersonCircle.svelte"
|
||||
import NoteOptions from "src/app/shared/NoteOptions.svelte"
|
||||
@ -97,34 +97,32 @@
|
||||
</script>
|
||||
|
||||
<form on:submit|preventDefault={() => onSubmit()}>
|
||||
<AlternatingBackground class="z-feature overflow-hidden rounded p-3">
|
||||
<div class="flex gap-4 text-lightest">
|
||||
<PersonCircle class="h-10 w-10" pubkey={$pubkey} />
|
||||
<div class="w-full">
|
||||
<Compose placeholder="What's up?" bind:this={compose} {onSubmit} style="min-height: 3em;" />
|
||||
<div class="p-2">
|
||||
<NoteImages bind:this={images} bind:compose includeInContent />
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center justify-end gap-3">
|
||||
<i class="fa fa-cog cursor-pointer" on:click={() => options.setView("settings")} />
|
||||
<ImageInput multi hostLimit={3} on:change={e => images.addImage(e.detail)}>
|
||||
<i slot="button" class="fa fa-paperclip cursor-pointer" />
|
||||
</ImageInput>
|
||||
{#if group}
|
||||
<Popover triggerType="mouseenter">
|
||||
<i slot="trigger" class="fa fa-circle-nodes cursor-pointer" />
|
||||
<div slot="tooltip">
|
||||
Posting to <GroupLink address={group} />
|
||||
</div>
|
||||
</Popover>
|
||||
{/if}
|
||||
</div>
|
||||
<Anchor button accent on:click={() => onSubmit()}>Send</Anchor>
|
||||
<AltColor background class="z-feature flex gap-4 overflow-hidden rounded p-3 text-lightest">
|
||||
<PersonCircle class="h-10 w-10" pubkey={$pubkey} />
|
||||
<div class="w-full">
|
||||
<Compose placeholder="What's up?" bind:this={compose} {onSubmit} style="min-height: 3em;" />
|
||||
<div class="p-2">
|
||||
<NoteImages bind:this={images} bind:compose includeInContent />
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center justify-end gap-3">
|
||||
<i class="fa fa-cog cursor-pointer" on:click={() => options.setView("settings")} />
|
||||
<ImageInput multi hostLimit={3} on:change={e => images.addImage(e.detail)}>
|
||||
<i slot="button" class="fa fa-paperclip cursor-pointer" />
|
||||
</ImageInput>
|
||||
{#if group}
|
||||
<Popover triggerType="mouseenter">
|
||||
<i slot="trigger" class="fa fa-circle-nodes cursor-pointer" />
|
||||
<div slot="tooltip">
|
||||
Posting to <GroupLink address={group} />
|
||||
</div>
|
||||
</Popover>
|
||||
{/if}
|
||||
</div>
|
||||
<Anchor button accent on:click={() => onSubmit()}>Send</Anchor>
|
||||
</div>
|
||||
</div>
|
||||
</AlternatingBackground>
|
||||
</AltColor>
|
||||
</form>
|
||||
|
||||
<NoteOptions
|
||||
|
@ -5,7 +5,7 @@
|
||||
import {asNostrEvent} from "src/util/nostr"
|
||||
import {slide} from "src/util/transition"
|
||||
import ImageInput from "src/partials/ImageInput.svelte"
|
||||
import AlternatingBackground from "src/partials/AlternatingBackground.svelte"
|
||||
import AltColor from "src/partials/AltColor.svelte"
|
||||
import Chip from "src/partials/Chip.svelte"
|
||||
import Compose from "src/app/shared/Compose.svelte"
|
||||
import NsecWarning from "src/app/shared/NsecWarning.svelte"
|
||||
@ -149,9 +149,9 @@
|
||||
bind:this={container}
|
||||
on:click|stopPropagation>
|
||||
{#if showBorder}
|
||||
<AlternatingBackground class="absolute bottom-0 left-4 top-0 z-none -my-2 w-px" />
|
||||
<AltColor background class="absolute bottom-0 left-4 top-0 z-none -my-2 w-px" />
|
||||
{/if}
|
||||
<AlternatingBackground class="z-feature overflow-hidden rounded">
|
||||
<AltColor background class="z-feature overflow-hidden rounded">
|
||||
<div class="p-3 text-lightest" class:rounded-b={mentions.length === 0}>
|
||||
<Compose autofocus bind:this={compose} onSubmit={() => send()} style="min-height: 4rem">
|
||||
<div class="flex flex-col justify-start" slot="addon">
|
||||
@ -190,7 +190,7 @@
|
||||
<div class="-mb-2" />
|
||||
</div>
|
||||
</div>
|
||||
</AlternatingBackground>
|
||||
</AltColor>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
@ -37,7 +37,7 @@ export const getPersonWithDefault = pubkey => ({pubkey, ...people.key(pubkey).ge
|
||||
export const displayNpub = pubkey => {
|
||||
const d = nip19.npubEncode(pubkey)
|
||||
|
||||
return d.slice(0, 8) + "..." + d.slice(-5)
|
||||
return d.slice(0, 8) + "…" + d.slice(-5)
|
||||
}
|
||||
|
||||
export const displayPerson = ({pubkey, profile}: Person) => {
|
||||
|
31
src/partials/AltColor.svelte
Normal file
31
src/partials/AltColor.svelte
Normal file
@ -0,0 +1,31 @@
|
||||
<script lang="ts">
|
||||
import cx from "classnames"
|
||||
import {onMount} from "svelte"
|
||||
|
||||
export let background = false
|
||||
|
||||
let element, isAlt
|
||||
|
||||
onMount(() => {
|
||||
let cur = element
|
||||
let count = 0
|
||||
while (cur.parentElement) {
|
||||
if (cur.parentElement.classList.contains("bg-swap")) {
|
||||
count++
|
||||
}
|
||||
|
||||
cur = cur.parentElement
|
||||
}
|
||||
|
||||
isAlt = count % 2 === 0
|
||||
})
|
||||
</script>
|
||||
|
||||
<div
|
||||
on:click
|
||||
bind:this={element}
|
||||
class={cx("bg-swap", $$props.class)}
|
||||
class:bg-cocoa={background && isAlt}
|
||||
class:bg-dark={background && !isAlt}>
|
||||
<slot {isAlt} />
|
||||
</div>
|
@ -1,37 +0,0 @@
|
||||
<script lang="ts">
|
||||
import cx from "classnames"
|
||||
import {onMount} from "svelte"
|
||||
|
||||
export let interactive = false
|
||||
export let border = false
|
||||
|
||||
let element, className
|
||||
|
||||
onMount(() => {
|
||||
let cur = element
|
||||
let count = 0
|
||||
while (cur.parentElement) {
|
||||
if (cur.parentElement.classList.contains("bg-swap")) {
|
||||
count++
|
||||
}
|
||||
|
||||
cur = cur.parentElement
|
||||
}
|
||||
|
||||
const isAlt = count % 2 === 0
|
||||
|
||||
className = cx({
|
||||
"border-r-4 border-transparent": border,
|
||||
"cursor-pointer transition-colors": interactive,
|
||||
"hover:border-accent": border && interactive,
|
||||
"bg-cocoa": isAlt,
|
||||
// "hover:bg-cocoa-d": isAlt && interactive && !border,
|
||||
"bg-dark": !isAlt,
|
||||
// "hover:bg-dark-d": !isAlt && interactive && !border,
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<div {...$$props} class={cx($$props.class, "bg-swap", className)} bind:this={element}>
|
||||
<slot />
|
||||
</div>
|
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import cx from "classnames"
|
||||
import {createEventDispatcher} from "svelte"
|
||||
import AlternatingBackground from "src/partials/AlternatingBackground.svelte"
|
||||
import AltColor from "src/partials/AltColor.svelte"
|
||||
|
||||
export let interactive = false
|
||||
export let stopPropagation = false
|
||||
@ -41,10 +41,12 @@
|
||||
</script>
|
||||
|
||||
<div on:mousedown={startClick} on:touchstart={startClick} on:click={onClick}>
|
||||
<AlternatingBackground
|
||||
border
|
||||
{interactive}
|
||||
class={cx($$props.class, "rounded py-5 px-7 text-lightest")}>
|
||||
<AltColor
|
||||
background
|
||||
class={cx($$props.class, "rounded px-7 py-5 text-lightest", {
|
||||
"cursor-pointer border-r-4 border-transparent transition-colors hover:border-mid":
|
||||
interactive,
|
||||
})}>
|
||||
<slot />
|
||||
</AlternatingBackground>
|
||||
</AltColor>
|
||||
</div>
|
||||
|
@ -2,7 +2,7 @@
|
||||
import {randomId} from "hurdak"
|
||||
import {onMount} from "svelte"
|
||||
import {fly, fade} from "src/util/transition"
|
||||
import AlternatingBackground from "src/partials/AlternatingBackground.svelte"
|
||||
import AltColor from "src/partials/AltColor.svelte"
|
||||
import {router} from "src/app/router"
|
||||
|
||||
export let mini = false
|
||||
@ -114,14 +114,15 @@
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<AlternatingBackground class="absolute mt-12 h-full w-full" />
|
||||
<AltColor background class="absolute mt-12 h-full w-full" />
|
||||
<div on:click|stopPropagation>
|
||||
<AlternatingBackground
|
||||
<AltColor
|
||||
background
|
||||
class="relative h-full w-full cursor-auto overflow-hidden rounded-t-2xl pb-10 pt-2">
|
||||
<div class="m-auto flex max-w-2xl flex-col gap-4 p-2 modal-content-inner">
|
||||
<div class="modal-content-inner m-auto flex max-w-2xl flex-col gap-4 p-2">
|
||||
<slot />
|
||||
</div>
|
||||
</AlternatingBackground>
|
||||
</AltColor>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user