mirror of
https://github.com/coracle-social/coracle.git
synced 2024-09-05 21:03:46 +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": "^8.33.0",
|
||||||
"eslint-plugin-svelte3": "^4.0.0",
|
"eslint-plugin-svelte3": "^4.0.0",
|
||||||
"postcss": "^8.4.19",
|
"postcss": "^8.4.19",
|
||||||
"svelte": "^3.52.0",
|
|
||||||
"tailwindcss": "^3.2.4",
|
"tailwindcss": "^3.2.4",
|
||||||
"typescript": "^4.9.5",
|
"typescript": "^4.9.5",
|
||||||
"vite": "^3.2.3",
|
"vite": "^3.2.3",
|
||||||
@ -43,6 +42,7 @@
|
|||||||
"qr-scanner": "^1.4.2",
|
"qr-scanner": "^1.4.2",
|
||||||
"qrcode": "^1.5.1",
|
"qrcode": "^1.5.1",
|
||||||
"ramda": "^0.28.0",
|
"ramda": "^0.28.0",
|
||||||
|
"svelte": "^3.55.1",
|
||||||
"svelte-check": "^3.0.3",
|
"svelte-check": "^3.0.3",
|
||||||
"svelte-link-preview": "^0.3.3",
|
"svelte-link-preview": "^0.3.3",
|
||||||
"svelte-loading-spinners": "^0.3.4",
|
"svelte-loading-spinners": "^0.3.4",
|
||||||
|
@ -38,7 +38,7 @@
|
|||||||
</li>
|
</li>
|
||||||
<li class="cursor-pointer relative">
|
<li class="cursor-pointer relative">
|
||||||
<a class="block px-4 py-2 hover:bg-accent transition-all" href="/alerts">
|
<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}
|
{#if $newAlerts}
|
||||||
<div class="w-2 h-2 rounded bg-accent absolute top-3 left-6" />
|
<div class="w-2 h-2 rounded bg-accent absolute top-3 left-6" />
|
||||||
{/if}
|
{/if}
|
||||||
@ -47,18 +47,18 @@
|
|||||||
{/if}
|
{/if}
|
||||||
<li class="cursor-pointer">
|
<li class="cursor-pointer">
|
||||||
<a class="block px-4 py-2 hover:bg-accent transition-all" href="/search/people">
|
<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>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="cursor-pointer">
|
<li class="cursor-pointer">
|
||||||
<a class="block px-4 py-2 hover:bg-accent transition-all" href="/notes/follows">
|
<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>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{#if $profile}
|
{#if $profile}
|
||||||
<li class="cursor-pointer relative">
|
<li class="cursor-pointer relative">
|
||||||
<a class="block px-4 py-2 hover:bg-accent transition-all" href="/messages">
|
<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}
|
{#if $newDirectMessages}
|
||||||
<div class="w-2 h-2 rounded bg-accent absolute top-2 left-7" />
|
<div class="w-2 h-2 rounded bg-accent absolute top-2 left-7" />
|
||||||
{/if}
|
{/if}
|
||||||
@ -66,7 +66,7 @@
|
|||||||
</li>
|
</li>
|
||||||
<li class="cursor-pointer relative">
|
<li class="cursor-pointer relative">
|
||||||
<a class="block px-4 py-2 hover:bg-accent transition-all" href="/chat">
|
<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}
|
{#if $newChatMessages}
|
||||||
<div class="w-2 h-2 rounded bg-accent absolute top-2 left-7" />
|
<div class="w-2 h-2 rounded bg-accent absolute top-2 left-7" />
|
||||||
{/if}
|
{/if}
|
||||||
@ -76,7 +76,7 @@
|
|||||||
<li class="h-px mx-3 my-4 bg-medium" />
|
<li class="h-px mx-3 my-4 bg-medium" />
|
||||||
<li class="cursor-pointer relative">
|
<li class="cursor-pointer relative">
|
||||||
<a class="block px-4 py-2 hover:bg-accent transition-all" href="/relays">
|
<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}
|
{#if $slowConnections.length > 0}
|
||||||
<div class="w-2 h-2 rounded bg-accent absolute top-2 left-8" />
|
<div class="w-2 h-2 rounded bg-accent absolute top-2 left-8" />
|
||||||
{/if}
|
{/if}
|
||||||
@ -85,30 +85,30 @@
|
|||||||
{#if $profile}
|
{#if $profile}
|
||||||
<li class="cursor-pointer">
|
<li class="cursor-pointer">
|
||||||
<a class="block px-4 py-2 hover:bg-accent transition-all" href="/keys">
|
<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>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="cursor-pointer">
|
<li class="cursor-pointer">
|
||||||
<a class="block px-4 py-2 hover:bg-accent transition-all" href="/settings">
|
<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>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="cursor-pointer">
|
<li class="cursor-pointer">
|
||||||
<a class="block px-4 py-2 hover:bg-accent transition-all" href="/logout">
|
<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>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{:else}
|
{:else}
|
||||||
<li class="cursor-pointer">
|
<li class="cursor-pointer">
|
||||||
<a class="block px-4 py-2 hover:bg-accent transition-all" href="/login">
|
<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>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{/if}
|
{/if}
|
||||||
{#if import.meta.env.VITE_SHOW_DEBUG_ROUTE === 'true'}
|
{#if import.meta.env.VITE_SHOW_DEBUG_ROUTE === 'true'}
|
||||||
<li class="cursor-pointer">
|
<li class="cursor-pointer">
|
||||||
<a class="block px-4 py-2 hover:bg-accent transition-all" href="/debug">
|
<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>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{/if}
|
{/if}
|
||||||
@ -116,7 +116,7 @@
|
|||||||
<li
|
<li
|
||||||
class="cursor-pointer px-4 py-2 hover:bg-accent transition-all"
|
class="cursor-pointer px-4 py-2 hover:bg-accent transition-all"
|
||||||
on:click={install}>
|
on:click={install}>
|
||||||
<i class="fa-solid fa-rocket mr-2" /> Install
|
<i class="fa fa-rocket mr-2" /> Install
|
||||||
</li>
|
</li>
|
||||||
{/if}
|
{/if}
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
import {last} from 'ramda'
|
import {last} from 'ramda'
|
||||||
import {onMount} from 'svelte'
|
import {onMount} from 'svelte'
|
||||||
import {tweened} from 'svelte/motion'
|
import {tweened} from 'svelte/motion'
|
||||||
import {fly} from 'svelte/transition'
|
import {fly, fade} from 'svelte/transition'
|
||||||
import {navigate} from 'svelte-routing'
|
import {navigate} from 'svelte-routing'
|
||||||
import {log} from 'src/util/logger'
|
import {log} from 'src/util/logger'
|
||||||
import {renderContent} from 'src/util/html'
|
import {renderContent} from 'src/util/html'
|
||||||
@ -35,6 +35,7 @@
|
|||||||
let followersCount = tweened(0, {interpolate, duration: 1000})
|
let followersCount = tweened(0, {interpolate, duration: 1000})
|
||||||
let person = database.getPersonWithFallback(pubkey)
|
let person = database.getPersonWithFallback(pubkey)
|
||||||
let loading = true
|
let loading = true
|
||||||
|
let showActions = false
|
||||||
|
|
||||||
$: following = $petnamePubkeys.includes(pubkey)
|
$: 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 setActiveTab = tab => navigate(routes.person(pubkey, tab))
|
||||||
|
|
||||||
const showFollows = () => {
|
const showFollows = () => {
|
||||||
@ -101,6 +112,8 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<svelte:window on:click={() => { showActions = false }} />
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="absolute w-full h-64"
|
class="absolute w-full h-64"
|
||||||
style="z-index: -1;
|
style="z-index: -1;
|
||||||
@ -110,12 +123,12 @@
|
|||||||
url('{person.kind0?.banner}')" />
|
url('{person.kind0?.banner}')" />
|
||||||
|
|
||||||
<Content>
|
<Content>
|
||||||
<div class="flex gap-4" in:fly={{y: 20}}>
|
<div class="flex gap-4">
|
||||||
<div
|
<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"
|
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})" />
|
style="background-image: url({person.kind0?.picture})" />
|
||||||
<div class="flex flex-col gap-4 flex-grow">
|
<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-grow flex flex-col gap-2">
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
<h1 class="text-2xl">{displayPerson(person)}</h1>
|
<h1 class="text-2xl">{displayPerson(person)}</h1>
|
||||||
@ -127,29 +140,80 @@
|
|||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="whitespace-nowrap flex gap-3 items-center flex-wrap">
|
<div class="whitespace-nowrap flex gap-3 flex-wrap relative">
|
||||||
{#if user.getPubkey() === pubkey && $canPublish}
|
<div on:click|stopPropagation={toggleActions} class="px-5 py-2 cursor-pointer">
|
||||||
<Anchor href="/profile"><i class="fa-solid fa-edit" /> Edit profile</Anchor>
|
<i class="fa fa-ellipsis-vertical" />
|
||||||
{:else if $canPublish}
|
</div>
|
||||||
<Anchor type="button-circle" on:click={openAdvanced}>
|
{#if showActions}
|
||||||
<i class="fa fa-sliders" />
|
{@const getTransition = makeGetTransition()}
|
||||||
</Anchor>
|
<div class="absolute top-0 right-0 mt-12 flex flex-col gap-2 opacity-90">
|
||||||
<Anchor type="button-circle" href={`/messages/${npub}`}>
|
<div
|
||||||
<i class="fa fa-envelope" />
|
class="absolute inset-0 bg-black rounded-full"
|
||||||
</Anchor>
|
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}
|
{/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}>
|
|
||||||
<i class="fa fa-share-nodes" />
|
|
||||||
</Anchor>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p>{@html renderContent(person?.kind0?.about || '')}</p>
|
<p>{@html renderContent(person?.kind0?.about || '')}</p>
|
||||||
|
Loading…
Reference in New Issue
Block a user