mirror of
https://github.com/coracle-social/coracle.git
synced 2024-10-06 11:43:30 +00:00
Tweak side nav buttons, profile detail buttons
This commit is contained in:
parent
24b1588599
commit
0a293ca354
BIN
package-lock.json
generated
BIN
package-lock.json
generated
Binary file not shown.
@ -20,7 +20,6 @@
|
||||
"eslint": "^8.33.0",
|
||||
"eslint-plugin-svelte3": "^4.0.0",
|
||||
"postcss": "^8.4.19",
|
||||
"svelte": "^3.52.0",
|
||||
"tailwindcss": "^3.2.4",
|
||||
"typescript": "^4.9.5",
|
||||
"vite": "^3.2.3",
|
||||
@ -43,6 +42,7 @@
|
||||
"qr-scanner": "^1.4.2",
|
||||
"qrcode": "^1.5.1",
|
||||
"ramda": "^0.28.0",
|
||||
"svelte": "^3.55.1",
|
||||
"svelte-check": "^3.0.3",
|
||||
"svelte-link-preview": "^0.3.3",
|
||||
"svelte-loading-spinners": "^0.3.4",
|
||||
|
@ -38,7 +38,7 @@
|
||||
</li>
|
||||
<li class="cursor-pointer relative">
|
||||
<a class="block px-4 py-2 hover:bg-accent transition-all" href="/alerts">
|
||||
<i class="fa-solid fa-bell mr-2" /> Alerts
|
||||
<i class="fa fa-inbox mr-2" /> Inbox
|
||||
{#if $newAlerts}
|
||||
<div class="w-2 h-2 rounded bg-accent absolute top-3 left-6" />
|
||||
{/if}
|
||||
@ -47,18 +47,18 @@
|
||||
{/if}
|
||||
<li class="cursor-pointer">
|
||||
<a class="block px-4 py-2 hover:bg-accent transition-all" href="/search/people">
|
||||
<i class="fa-solid fa-search mr-2" /> Search
|
||||
<i class="fa fa-search mr-2" /> Search
|
||||
</a>
|
||||
</li>
|
||||
<li class="cursor-pointer">
|
||||
<a class="block px-4 py-2 hover:bg-accent transition-all" href="/notes/follows">
|
||||
<i class="fa-solid fa-tag mr-2" /> Notes
|
||||
<i class="fa fa-rss mr-2" /> Feed
|
||||
</a>
|
||||
</li>
|
||||
{#if $profile}
|
||||
<li class="cursor-pointer relative">
|
||||
<a class="block px-4 py-2 hover:bg-accent transition-all" href="/messages">
|
||||
<i class="fa-solid fa-envelope mr-2" /> Messages
|
||||
<i class="fa fa-envelope mr-2" /> Messages
|
||||
{#if $newDirectMessages}
|
||||
<div class="w-2 h-2 rounded bg-accent absolute top-2 left-7" />
|
||||
{/if}
|
||||
@ -66,7 +66,7 @@
|
||||
</li>
|
||||
<li class="cursor-pointer relative">
|
||||
<a class="block px-4 py-2 hover:bg-accent transition-all" href="/chat">
|
||||
<i class="fa-solid fa-comment mr-2" /> Chat
|
||||
<i class="fa fa-comment mr-2" /> Chat
|
||||
{#if $newChatMessages}
|
||||
<div class="w-2 h-2 rounded bg-accent absolute top-2 left-7" />
|
||||
{/if}
|
||||
@ -76,7 +76,7 @@
|
||||
<li class="h-px mx-3 my-4 bg-medium" />
|
||||
<li class="cursor-pointer relative">
|
||||
<a class="block px-4 py-2 hover:bg-accent transition-all" href="/relays">
|
||||
<i class="fa-solid fa-server mr-2" /> Relays
|
||||
<i class="fa fa-server mr-2" /> Relays
|
||||
{#if $slowConnections.length > 0}
|
||||
<div class="w-2 h-2 rounded bg-accent absolute top-2 left-8" />
|
||||
{/if}
|
||||
@ -85,30 +85,30 @@
|
||||
{#if $profile}
|
||||
<li class="cursor-pointer">
|
||||
<a class="block px-4 py-2 hover:bg-accent transition-all" href="/keys">
|
||||
<i class="fa-solid fa-key mr-2" /> Keys
|
||||
<i class="fa fa-key mr-2" /> Keys
|
||||
</a>
|
||||
</li>
|
||||
<li class="cursor-pointer">
|
||||
<a class="block px-4 py-2 hover:bg-accent transition-all" href="/settings">
|
||||
<i class="fa-solid fa-gear mr-2" /> Settings
|
||||
<i class="fa fa-gear mr-2" /> Settings
|
||||
</a>
|
||||
</li>
|
||||
<li class="cursor-pointer">
|
||||
<a class="block px-4 py-2 hover:bg-accent transition-all" href="/logout">
|
||||
<i class="fa-solid fa-right-from-bracket mr-2" /> Logout
|
||||
<i class="fa fa-right-from-bracket mr-2" /> Logout
|
||||
</a>
|
||||
</li>
|
||||
{:else}
|
||||
<li class="cursor-pointer">
|
||||
<a class="block px-4 py-2 hover:bg-accent transition-all" href="/login">
|
||||
<i class="fa-solid fa-right-to-bracket mr-2" /> Login
|
||||
<i class="fa fa-right-to-bracket mr-2" /> Login
|
||||
</a>
|
||||
</li>
|
||||
{/if}
|
||||
{#if import.meta.env.VITE_SHOW_DEBUG_ROUTE === 'true'}
|
||||
<li class="cursor-pointer">
|
||||
<a class="block px-4 py-2 hover:bg-accent transition-all" href="/debug">
|
||||
<i class="fa-solid fa-bug mr-2" /> Debug
|
||||
<i class="fa fa-bug mr-2" /> Debug
|
||||
</a>
|
||||
</li>
|
||||
{/if}
|
||||
@ -116,7 +116,7 @@
|
||||
<li
|
||||
class="cursor-pointer px-4 py-2 hover:bg-accent transition-all"
|
||||
on:click={install}>
|
||||
<i class="fa-solid fa-rocket mr-2" /> Install
|
||||
<i class="fa fa-rocket mr-2" /> Install
|
||||
</li>
|
||||
{/if}
|
||||
</ul>
|
||||
|
@ -2,7 +2,7 @@
|
||||
import {last} from 'ramda'
|
||||
import {onMount} from 'svelte'
|
||||
import {tweened} from 'svelte/motion'
|
||||
import {fly} from 'svelte/transition'
|
||||
import {fly, fade} from 'svelte/transition'
|
||||
import {navigate} from 'svelte-routing'
|
||||
import {log} from 'src/util/logger'
|
||||
import {renderContent} from 'src/util/html'
|
||||
@ -35,6 +35,7 @@
|
||||
let followersCount = tweened(0, {interpolate, duration: 1000})
|
||||
let person = database.getPersonWithFallback(pubkey)
|
||||
let loading = true
|
||||
let showActions = false
|
||||
|
||||
$: following = $petnamePubkeys.includes(pubkey)
|
||||
|
||||
@ -70,6 +71,16 @@
|
||||
})
|
||||
})
|
||||
|
||||
const toggleActions = () => {
|
||||
showActions = !showActions
|
||||
}
|
||||
|
||||
const makeGetTransition = () => {
|
||||
let i = 0
|
||||
|
||||
return () => ({y: 20, delay: i++ * 30})
|
||||
}
|
||||
|
||||
const setActiveTab = tab => navigate(routes.person(pubkey, tab))
|
||||
|
||||
const showFollows = () => {
|
||||
@ -101,6 +112,8 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:click={() => { showActions = false }} />
|
||||
|
||||
<div
|
||||
class="absolute w-full h-64"
|
||||
style="z-index: -1;
|
||||
@ -110,12 +123,12 @@
|
||||
url('{person.kind0?.banner}')" />
|
||||
|
||||
<Content>
|
||||
<div class="flex gap-4" in:fly={{y: 20}}>
|
||||
<div class="flex gap-4">
|
||||
<div
|
||||
class="overflow-hidden w-16 h-16 sm:w-32 sm:h-32 rounded-full bg-cover bg-center shrink-0 border border-solid border-white"
|
||||
style="background-image: url({person.kind0?.picture})" />
|
||||
<div class="flex flex-col gap-4 flex-grow">
|
||||
<div class="flex justify-between items-center gap-4">
|
||||
<div class="flex justify-between items-start gap-4">
|
||||
<div class="flex-grow flex flex-col gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<h1 class="text-2xl">{displayPerson(person)}</h1>
|
||||
@ -127,30 +140,81 @@
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="whitespace-nowrap flex gap-3 items-center flex-wrap">
|
||||
{#if user.getPubkey() === pubkey && $canPublish}
|
||||
<Anchor href="/profile"><i class="fa-solid fa-edit" /> Edit profile</Anchor>
|
||||
{:else if $canPublish}
|
||||
<Anchor type="button-circle" on:click={openAdvanced}>
|
||||
<i class="fa fa-sliders" />
|
||||
</Anchor>
|
||||
<Anchor type="button-circle" href={`/messages/${npub}`}>
|
||||
<i class="fa fa-envelope" />
|
||||
</Anchor>
|
||||
{/if}
|
||||
{#if following}
|
||||
<Anchor type="button-circle" on:click={unfollow}>
|
||||
<i class="fa fa-user-minus" />
|
||||
</Anchor>
|
||||
{:else if user.getPubkey() !== pubkey}
|
||||
<Anchor type="button-circle" on:click={follow}>
|
||||
<i class="fa fa-user-plus" />
|
||||
</Anchor>
|
||||
{/if}
|
||||
<Anchor type="button-circle" on:click={share}>
|
||||
<div class="whitespace-nowrap flex gap-3 flex-wrap relative">
|
||||
<div on:click|stopPropagation={toggleActions} class="px-5 py-2 cursor-pointer">
|
||||
<i class="fa fa-ellipsis-vertical" />
|
||||
</div>
|
||||
{#if showActions}
|
||||
{@const getTransition = makeGetTransition()}
|
||||
<div class="absolute top-0 right-0 mt-12 flex flex-col gap-2 opacity-90">
|
||||
<div
|
||||
class="absolute inset-0 bg-black rounded-full"
|
||||
style="filter: blur(15px)"
|
||||
transition:fade />
|
||||
<div
|
||||
class="flex gap-2 justify-end items-center z-10 cursor-pointer"
|
||||
transition:fly={getTransition()}
|
||||
on:click={share}>
|
||||
<div class="text-light">Share</div>
|
||||
<Anchor type="button-circle">
|
||||
<i class="fa fa-share-nodes" />
|
||||
</Anchor>
|
||||
</div>
|
||||
{#if following}
|
||||
<div
|
||||
class="flex gap-2 justify-end items-center z-10 cursor-pointer"
|
||||
transition:fly={getTransition()}
|
||||
on:click={unfollow}>
|
||||
<div class="text-light">Unfollow</div>
|
||||
<Anchor type="button-circle">
|
||||
<i class="fa fa-user-minus" />
|
||||
</Anchor>
|
||||
</div>
|
||||
{:else if user.getPubkey() !== pubkey}
|
||||
<div
|
||||
class="flex gap-2 justify-end items-center z-10 cursor-pointer"
|
||||
transition:fly={getTransition()}
|
||||
on:click={follow}>
|
||||
<div class="text-light">Follow</div>
|
||||
<Anchor type="button-circle">
|
||||
<i class="fa fa-user-plus" />
|
||||
</Anchor>
|
||||
</div>
|
||||
{/if}
|
||||
{#if $canPublish}
|
||||
<div
|
||||
class="flex gap-2 justify-end items-center z-10 cursor-pointer"
|
||||
transition:fly={getTransition()}
|
||||
on:click={() => navigate(`/messages/${npub}`)}>
|
||||
<div class="text-light">Message</div>
|
||||
<Anchor type="button-circle">
|
||||
<i class="fa fa-envelope" />
|
||||
</Anchor>
|
||||
</div>
|
||||
<div
|
||||
class="flex gap-2 justify-end items-center z-10 cursor-pointer"
|
||||
transition:fly={getTransition()}
|
||||
on:click={openAdvanced}>
|
||||
<div class="text-light">Advanced</div>
|
||||
<Anchor type="button-circle">
|
||||
<i class="fa fa-sliders" />
|
||||
</Anchor>
|
||||
</div>
|
||||
{/if}
|
||||
{#if user.getPubkey() === pubkey}
|
||||
<div
|
||||
class="flex gap-2 justify-end items-center z-10 cursor-pointer"
|
||||
transition:fly={getTransition()}
|
||||
on:click={() => navigate("/profile")}>
|
||||
<div class="text-light">Edit</div>
|
||||
<Anchor type="button-circle">
|
||||
<i class="fa fa-edit" />
|
||||
</Anchor>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<p>{@html renderContent(person?.kind0?.about || '')}</p>
|
||||
{#if person?.petnames}
|
||||
|
Loading…
Reference in New Issue
Block a user