mirror of
https://github.com/coracle-social/coracle.git
synced 2024-09-20 20:16:43 +00:00
Rework some popovers
This commit is contained in:
parent
a395652f12
commit
bfc011551a
@ -1,12 +1,8 @@
|
||||
# Current
|
||||
|
||||
- [ ] Create my own version of nostr.how and extension explanation
|
||||
- [ ] Go over onboarding process, suggest some good relays for newcomers
|
||||
- [ ] Submit blog post with new onboarding process built in
|
||||
- [ ] Fix hover on notes in modal
|
||||
- [ ] Show loading/success on zap invoice screen
|
||||
- [ ] Fix iOS/safari/firefox
|
||||
- [ ] Show more link on long notes (rather than just an ellipsis)
|
||||
- [ ] Update https://nostr.com/clients/coracle
|
||||
|
||||
# Coracle website
|
||||
|
||||
@ -42,6 +38,8 @@
|
||||
|
||||
# More
|
||||
|
||||
- [ ] Show an error when something fails to load with a constructive suggestion
|
||||
- [ ] Show more link on long notes (rather than just an ellipsis)
|
||||
- [ ] Log in as user button
|
||||
- [ ] Abort all context subs when navigating
|
||||
- [ ] Separate mentions from other notifications
|
||||
@ -132,3 +130,4 @@
|
||||
- [ ] Offline-first
|
||||
- [ ] Add support for nests https://nostrnests.com/
|
||||
- nevent1qqs2jm46m9tg9z33av4fp8hhapsx96234htz75wrvpvrax5jjl8m5usprfmhxue69uhhyetvv9ujumn0wd68yurvv438xtnrdaksy4d92m
|
||||
- [ ] NIP 39 Support https://github.com/nostr-protocol/nips/pull/201/files
|
||||
|
50
src/app.css
50
src/app.css
@ -61,19 +61,53 @@ body,
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Tippy */
|
||||
/* Tippy dark */
|
||||
|
||||
.tippy-box {
|
||||
background-color: #0f0f0e !important;
|
||||
.tippy-box[data-theme~="dark"] {
|
||||
background-color: #0f0f0e;
|
||||
border: 1px solid #403d39;
|
||||
box-shadow: 3px 3px 20px #0f0f0e, 3px -3px 20px #0f0f0e, -3px 3px 20px #0f0f0e,
|
||||
-3px -3px 20px #0f0f0e;
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^="top"] > .tippy-arrow:before {
|
||||
border-top-color: #403d39 !important;
|
||||
}
|
||||
|
||||
.tippy-box[data-placement^="top"] > .tippy-arrow {
|
||||
.tippy-box[data-theme~="dark"][data-placement^="top"] > .tippy-arrow {
|
||||
bottom: -1px !important;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme~="dark"][data-placement^="top"] > .tippy-arrow:before {
|
||||
border-top-color: #403d39;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme~="dark"][data-placement^="bottom"] > .tippy-arrow:before {
|
||||
border-bottom-color: #403d39;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme~="dark"][data-placement^="left"] > .tippy-arrow:before {
|
||||
border-left-color: #403d39;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme~="dark"][data-placement^="right"] > .tippy-arrow:before {
|
||||
border-right-color: #403d39;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme~="dark"] > .tippy-backdrop {
|
||||
background-color: #403d39;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme~="dark"] > .tippy-svg-arrow {
|
||||
fill: #0f0f0e;
|
||||
}
|
||||
|
||||
/* Tippy transparent */
|
||||
|
||||
.tippy-box[data-theme~="transparent"] {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme~="transparent"][data-placement^="top"] > .tippy-arrow:before {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.tippy-box[data-theme~="transparent"] > .tippy-svg-arrow {
|
||||
fill: transparent;
|
||||
}
|
||||
|
@ -4,6 +4,7 @@
|
||||
import tippy from "tippy.js"
|
||||
import {onMount} from "svelte"
|
||||
|
||||
export let theme = "dark"
|
||||
export let triggerType = "click"
|
||||
|
||||
let trigger
|
||||
@ -12,6 +13,7 @@
|
||||
|
||||
onMount(() => {
|
||||
instance = tippy(trigger, {
|
||||
theme,
|
||||
appendTo: () => document.body,
|
||||
allowHTML: true,
|
||||
interactive: true,
|
||||
@ -62,6 +64,6 @@
|
||||
|
||||
<div bind:this={tooltip} class="hidden">
|
||||
<div>
|
||||
<slot name="tooltip" />
|
||||
<slot name="tooltip" {instance} />
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,9 +1,8 @@
|
||||
<script>
|
||||
import {fly} from "svelte/transition"
|
||||
import {ellipsize, quantify, switcher} from "hurdak/lib/hurdak"
|
||||
import Badge from "src/partials/Badge.svelte"
|
||||
import Popover from "src/partials/Popover.svelte"
|
||||
import {formatTimestamp} from "src/util/misc"
|
||||
import {killEvent} from "src/util/html"
|
||||
import database from "src/agent/database"
|
||||
import {modal} from "src/app/ui"
|
||||
|
||||
@ -21,43 +20,26 @@
|
||||
likes: "liked your note",
|
||||
zaps: "zapped your note",
|
||||
})
|
||||
|
||||
let isOpen = false
|
||||
|
||||
const openPopover = e => {
|
||||
killEvent(e)
|
||||
|
||||
isOpen = true
|
||||
}
|
||||
|
||||
const closePopover = e => {
|
||||
killEvent(e)
|
||||
|
||||
isOpen = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="flex w-full cursor-pointer flex-col gap-2 border border-solid border-black py-2
|
||||
px-3 text-left text-white transition-all hover:border-medium hover:bg-dark"
|
||||
on:click={() => modal.set({type: "note/detail", note})}>
|
||||
<div class="relative flex w-full items-center justify-between gap-2">
|
||||
<button class="cursor-pointer" on:click={openPopover}>
|
||||
<div class="relative flex w-full items-center justify-between gap-2" on:click|stopPropagation>
|
||||
<Popover>
|
||||
<div slot="trigger">
|
||||
{quantify(pubkeys.length, "person", "people")}
|
||||
{actionText}.
|
||||
</button>
|
||||
{#if isOpen}
|
||||
<button in:fly={{y: 20}} class="fixed inset-0 z-10" on:click={closePopover} />
|
||||
<button
|
||||
on:click={killEvent}
|
||||
in:fly={{y: 20}}
|
||||
class="absolute top-0 z-20 mt-8 grid grid-cols-2 gap-y-2 gap-x-4 rounded
|
||||
border border-solid border-medium bg-dark py-2 px-4">
|
||||
</div>
|
||||
<div slot="tooltip">
|
||||
<div class="grid grid-cols-2 gap-y-2 gap-x-4">
|
||||
{#each pubkeys as pubkey}
|
||||
<Badge person={database.getPersonWithFallback(pubkey)} />
|
||||
{/each}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</Popover>
|
||||
<p class="text-sm text-light">{formatTimestamp(note.created_at)}</p>
|
||||
</div>
|
||||
<div class="ml-6 text-light">
|
||||
|
@ -8,7 +8,7 @@
|
||||
import {navigate} from "svelte-routing"
|
||||
import {quantify} from "hurdak/lib/hurdak"
|
||||
import {Tags, findRootId, findReplyId, displayPerson, isLike} from "src/util/nostr"
|
||||
import {formatTimestamp, now, tryJson, stringToColor, formatSats, fetchJson} from "src/util/misc"
|
||||
import {formatTimestamp, now, tryJson, formatSats, fetchJson} from "src/util/misc"
|
||||
import {extractUrls, isMobile} from "src/util/html"
|
||||
import {invoiceAmount} from "src/util/lightning"
|
||||
import ImageCircle from "src/partials/ImageCircle.svelte"
|
||||
@ -341,7 +341,7 @@
|
||||
</Anchor>
|
||||
</div>
|
||||
<div class="flex min-w-0 flex-grow flex-col gap-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex flex-col items-start justify-between sm:flex-row sm:items-center">
|
||||
<Popover triggerType={isMobile ? "click" : "mouseenter"}>
|
||||
<div slot="trigger">
|
||||
<Anchor
|
||||
@ -360,7 +360,7 @@
|
||||
</Popover>
|
||||
<Anchor
|
||||
href={"/" + nip19.neventEncode({id: note.id, relays: [note.seen_on]})}
|
||||
class="hidden text-sm text-light sm:block"
|
||||
class="text-sm text-light"
|
||||
type="unstyled">
|
||||
{timestamp}
|
||||
</Anchor>
|
||||
@ -422,22 +422,29 @@
|
||||
<i class="fa fa-bolt cursor-pointer" />
|
||||
{formatSats($zapsTotal)}
|
||||
</button>
|
||||
<button
|
||||
class="hidden w-16 text-left sm:block"
|
||||
on:click|stopPropagation={() => react("-")}>
|
||||
<i class="fa fa-flag cursor-pointer" />
|
||||
{$flagsCount}
|
||||
</button>
|
||||
</div>
|
||||
<div on:click|stopPropagation>
|
||||
<Popover theme="transparent">
|
||||
<div slot="trigger" class="cursor-pointer px-2">
|
||||
<i class="fa fa-ellipsis-v" />
|
||||
</div>
|
||||
<div
|
||||
class="hidden cursor-pointer items-center gap-1 sm:flex"
|
||||
on:click|stopPropagation={() => {
|
||||
slot="tooltip"
|
||||
let:instance
|
||||
class="flex flex-col gap-2"
|
||||
on:click={() => instance.hide()}>
|
||||
<Anchor
|
||||
type="button-circle"
|
||||
on:click={() => {
|
||||
showRelays = true
|
||||
}}>
|
||||
<i class="fa fa-server" />
|
||||
<div
|
||||
class="h-1 w-1 rounded-full"
|
||||
style={`background: ${stringToColor(note.seen_on)}`} />
|
||||
</Anchor>
|
||||
<Anchor type="button-circle" on:click={() => react("-")}>
|
||||
<i class="fa fa-flag" />
|
||||
</Anchor>
|
||||
</div>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@ -529,6 +536,7 @@
|
||||
showRelays = false
|
||||
}}>
|
||||
<Content>
|
||||
<p class="text-center">This note was found on the relay below.</p>
|
||||
<RelayCard theme="black" showControls relay={{url: note.seen_on}} />
|
||||
</Content>
|
||||
</Modal>
|
||||
|
@ -4,7 +4,7 @@
|
||||
import Content from "src/partials/Content.svelte"
|
||||
import {modal} from "src/app/ui"
|
||||
|
||||
const tutorialUrl = "https://nostr.how/"
|
||||
const tutorialUrl = "https://nostr.com/"
|
||||
const videoUrl = "https://dufflepud.us-southeast-1.linodeobjects.com/coracle_intro.mp4"
|
||||
</script>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user