mirror of
https://github.com/coracle-social/coracle.git
synced 2024-09-19 11:43:35 +00:00
Add titles to note detail overflow menu, add ability to collapse threads
This commit is contained in:
parent
2d53752ea7
commit
b9f5e169f4
@ -1,5 +1,10 @@
|
|||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
|
## 0.2.22
|
||||||
|
|
||||||
|
- [x] Add ability to collapse threads
|
||||||
|
- [x] Add titles to overflow menu on note detail
|
||||||
|
|
||||||
## 0.2.21
|
## 0.2.21
|
||||||
|
|
||||||
- [x] Fix AUTH support
|
- [x] Fix AUTH support
|
||||||
|
@ -1,15 +1,14 @@
|
|||||||
# Current
|
# Current
|
||||||
|
|
||||||
|
- [ ] Instead of doing streamContext, listen, at least on note detail page
|
||||||
|
- [ ] Support https://github.com/nostr-protocol/nips/pull/211 as a bech32 entity
|
||||||
|
|
||||||
- [ ] Fix performance issues
|
- [ ] Fix performance issues
|
||||||
- [ ] https://github.com/techfort/LokiJS
|
- [ ] https://github.com/techfort/LokiJS
|
||||||
- Use indexed adapter github.com/techfort/LokiJS/blob/master/tutorials/Persistence%20Adapters.md and partitioning adapter
|
- Use indexed adapter github.com/techfort/LokiJS/blob/master/tutorials/Persistence%20Adapters.md and partitioning adapter
|
||||||
- Call close onbeforeunload to save pending changes
|
- Call close onbeforeunload to save pending changes
|
||||||
- [ ] Fix iOS/safari/firefox
|
- [ ] Fix iOS/safari/firefox
|
||||||
- [ ] Add onError handler to subscriptions for when sockets fail to connect?
|
|
||||||
- [ ] Show more link on long notes (rather than just an ellipsis)
|
|
||||||
- [ ] Revisit profile page and info, include similar access to hex keys etc on notes, keys page
|
- [ ] Revisit profile page and info, include similar access to hex keys etc on notes, keys page
|
||||||
- [ ] Support https://github.com/nostr-protocol/nips/pull/211 as a bech32 entity
|
|
||||||
- [ ] Collapsible thread view
|
|
||||||
- [ ] Image classification
|
- [ ] Image classification
|
||||||
- https://github.com/bhky/opennsfw2
|
- https://github.com/bhky/opennsfw2
|
||||||
- Requires updating my OS -_-
|
- Requires updating my OS -_-
|
||||||
|
15
src/partials/OverflowMenu.svelte
Normal file
15
src/partials/OverflowMenu.svelte
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import Anchor from "src/partials/Anchor.svelte"
|
||||||
|
|
||||||
|
export let actions
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="absolute inset-0 rounded-full bg-gray-8"
|
||||||
|
style="filter: blur(15px) opacity(0.7)" />
|
||||||
|
|
||||||
|
{#each actions as {label, icon, onClick}}
|
||||||
|
<div class="z-10 flex gap-2 justify-end items-center cursor-pointer" on:click={onClick}>
|
||||||
|
{label} <Anchor type="button-circle"><i class={`fa fa-${icon}`} /></Anchor>
|
||||||
|
</div>
|
||||||
|
{/each}
|
@ -207,9 +207,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="absolute top-0 right-0 z-10 mt-12 flex flex-col gap-2 opacity-90">
|
<div class="absolute top-0 right-0 z-10 mt-12 flex flex-col gap-2 opacity-90">
|
||||||
<div
|
<div
|
||||||
|
style="filter: blur(15px) opacity(0.7)"
|
||||||
class="absolute inset-0 rounded-full bg-gray-8"
|
class="absolute inset-0 rounded-full bg-gray-8"
|
||||||
class:hidden={!showActions}
|
class:hidden={!showActions}
|
||||||
style="filter: blur(15px)"
|
|
||||||
transition:fade|local />
|
transition:fade|local />
|
||||||
{#each actions as { onClick, href, label, icon }, i}
|
{#each actions as { onClick, href, label, icon }, i}
|
||||||
<div
|
<div
|
||||||
|
@ -11,6 +11,7 @@
|
|||||||
import {isMobile, copyToClipboard} from "src/util/html"
|
import {isMobile, copyToClipboard} from "src/util/html"
|
||||||
import {invoiceAmount} from "src/util/lightning"
|
import {invoiceAmount} from "src/util/lightning"
|
||||||
import QRCode from "src/partials/QRCode.svelte"
|
import QRCode from "src/partials/QRCode.svelte"
|
||||||
|
import OverflowMenu from "src/partials/OverflowMenu.svelte"
|
||||||
import ImageInput from "src/partials/ImageInput.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"
|
||||||
@ -54,6 +55,7 @@
|
|||||||
let replyContainer = null
|
let replyContainer = null
|
||||||
let visibleNotes = []
|
let visibleNotes = []
|
||||||
let showRelays = false
|
let showRelays = false
|
||||||
|
let collapsed = false
|
||||||
|
|
||||||
const {profile, canPublish, mutes} = user
|
const {profile, canPublish, mutes} = user
|
||||||
const timestamp = formatTimestamp(note.created_at)
|
const timestamp = formatTimestamp(note.created_at)
|
||||||
@ -62,7 +64,7 @@
|
|||||||
const interactive = !anchorId || !showEntire
|
const interactive = !anchorId || !showEntire
|
||||||
const person = watch("people", () => getPersonWithFallback(note.pubkey))
|
const person = watch("people", () => getPersonWithFallback(note.pubkey))
|
||||||
|
|
||||||
let likes, flags, zaps, like, flag, border, childrenContainer, noteContainer, canZap
|
let likes, flags, zaps, like, flag, border, childrenContainer, noteContainer, canZap, actions
|
||||||
let muted = false
|
let muted = false
|
||||||
|
|
||||||
const interpolate = (a, b) => t => a + Math.round((b - a) * t)
|
const interpolate = (a, b) => t => a + Math.round((b - a) * t)
|
||||||
@ -124,6 +126,30 @@
|
|||||||
$: $repliesCount = note.replies.length
|
$: $repliesCount = note.replies.length
|
||||||
$: visibleNotes = note.replies.filter(r => (showContext ? true : !r.isContext))
|
$: visibleNotes = note.replies.filter(r => (showContext ? true : !r.isContext))
|
||||||
$: canZap = $person?.zapper && $person?.pubkey !== user.getPubkey()
|
$: canZap = $person?.zapper && $person?.pubkey !== user.getPubkey()
|
||||||
|
$: {
|
||||||
|
actions = []
|
||||||
|
|
||||||
|
if (pool.forceUrls.length === 0) {
|
||||||
|
actions.push({
|
||||||
|
label: "Relays",
|
||||||
|
icon: "server",
|
||||||
|
onClick: () => {
|
||||||
|
showRelays = true
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
actions.push({label: "Permalink", icon: "link", onClick: copyLink})
|
||||||
|
actions.push({label: "Quote", icon: "quote-left", onClick: quote})
|
||||||
|
|
||||||
|
if (muted) {
|
||||||
|
actions.push({label: "Unmute", icon: "microphone", onClick: unmute})
|
||||||
|
} else {
|
||||||
|
actions.push({label: "Mute", icon: "microphone-slash", onClick: mute})
|
||||||
|
}
|
||||||
|
|
||||||
|
actions.push({label: "Flag", icon: "flag", onClick: () => react("-")})
|
||||||
|
}
|
||||||
|
|
||||||
const onClick = e => {
|
const onClick = e => {
|
||||||
const target = e.target as HTMLElement
|
const target = e.target as HTMLElement
|
||||||
@ -448,33 +474,7 @@
|
|||||||
let:instance
|
let:instance
|
||||||
class="flex flex-col gap-2"
|
class="flex flex-col gap-2"
|
||||||
on:click={() => instance.hide()}>
|
on:click={() => instance.hide()}>
|
||||||
{#if pool.forceUrls.length === 0}
|
<OverflowMenu {actions} />
|
||||||
<Anchor
|
|
||||||
type="button-circle"
|
|
||||||
on:click={() => {
|
|
||||||
showRelays = true
|
|
||||||
}}>
|
|
||||||
<i class="fa fa-server" />
|
|
||||||
</Anchor>
|
|
||||||
{/if}
|
|
||||||
<Anchor type="button-circle" on:click={copyLink}>
|
|
||||||
<i class="fa fa-link" />
|
|
||||||
</Anchor>
|
|
||||||
<Anchor type="button-circle" on:click={quote}>
|
|
||||||
<i class="fa fa-quote-left" />
|
|
||||||
</Anchor>
|
|
||||||
{#if muted}
|
|
||||||
<Anchor type="button-circle" on:click={unmute}>
|
|
||||||
<i class="fa fa-microphone" />
|
|
||||||
</Anchor>
|
|
||||||
{:else}
|
|
||||||
<Anchor type="button-circle" on:click={mute}>
|
|
||||||
<i class="fa fa-microphone-slash" />
|
|
||||||
</Anchor>
|
|
||||||
{/if}
|
|
||||||
<Anchor type="button-circle" on:click={() => react("-")}>
|
|
||||||
<i class="fa fa-flag" />
|
|
||||||
</Anchor>
|
|
||||||
</div>
|
</div>
|
||||||
</Popover>
|
</Popover>
|
||||||
</div>
|
</div>
|
||||||
@ -544,7 +544,31 @@
|
|||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if visibleNotes.length > 0 && depth > 0 && !muted}
|
{#if visibleNotes.length > 0 && !showEntire && depth > 0 && !muted}
|
||||||
|
<div class="relative -mt-4">
|
||||||
|
<div
|
||||||
|
class="absolute top-0 right-0 z-10 -mt-4 -mr-2 flex h-6 w-6 cursor-pointer
|
||||||
|
items-center justify-center rounded-full border border-solid border-gray-7 bg-gray-8"
|
||||||
|
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}
|
||||||
|
</div>
|
||||||
|
<div slot="tooltip">
|
||||||
|
{collapsed ? "Show replies" : "Hide replies"}
|
||||||
|
</div>
|
||||||
|
</Popover>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if !collapsed && visibleNotes.length > 0 && depth > 0 && !muted}
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<div class={`absolute w-px bg-${borderColor} z-10 -mt-4 ml-4 h-0`} bind:this={border} />
|
<div class={`absolute w-px bg-${borderColor} z-10 -mt-4 ml-4 h-0`} bind:this={border} />
|
||||||
<div class="note-children relative ml-8 flex flex-col gap-4" bind:this={childrenContainer}>
|
<div class="note-children relative ml-8 flex flex-col gap-4" bind:this={childrenContainer}>
|
||||||
|
Loading…
Reference in New Issue
Block a user