nostr/coracle
1
0
Fork 0
mirror of https://github.com/coracle-social/coracle.git synced 2024-09-18 19:23:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

fallback avatar image added

Browse Source
This commit is contained in:
Wojciech Morkowski 2023-03-08 22:28:54 +01:00 committed by Jonathan Staab
parent e9e19f5811
commit bce5a03752
11 changed files with 45 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
public/images/avatar.svg Normal file
View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg fill="#eb5e28" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="800px" height="800px" viewBox="0 -10 409.165 409.164"
xml:space="preserve">
<g>
<g>
<path d="M204.583,216.671c50.664,0,91.74-48.075,91.74-107.378c0-82.237-41.074-107.377-91.74-107.377
c-50.668,0-91.74,25.14-91.74,107.377C112.844,168.596,153.916,216.671,204.583,216.671z"/>
<path d="M407.164,374.717L360.88,270.454c-2.117-4.771-5.836-8.728-10.465-11.138l-71.83-37.392
c-1.584-0.823-3.502-0.663-4.926,0.415c-20.316,15.366-44.203,23.488-69.076,23.488c-24.877,0-48.762-8.122-69.078-23.488
c-1.428-1.078-3.346-1.238-4.93-0.415L58.75,259.316c-4.631,2.41-8.346,6.365-10.465,11.138L2.001,374.717
c-3.191,7.188-2.537,15.412,1.75,22.005c4.285,6.592,11.537,10.526,19.4,10.526h362.861c7.863,0,15.117-3.936,19.402-10.527
C409.699,390.129,410.355,381.902,407.164,374.717z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

6
src/partials/Badge.svelte
View File

@ -1,9 +1,9 @@
<script>
import {Link} from "svelte-routing"
import ImageCircle from "src/partials/ImageCircle.svelte"
import {killEvent} from "src/util/html"
import {displayPerson} from "src/util/nostr"
import {routes} from "src/app/ui"
import PersonCircle from "./PersonCircle.svelte";
export let person
export let inert = false
@ -11,7 +11,7 @@
{#if inert}
<span class="relative z-10 flex items-center gap-2">
<ImageCircle src={person.kind0?.picture} />
<PersonCircle src={person.kind0?.picture} />
<span class="text-lg font-bold">{displayPerson(person)}</span>
</span>
{:else}
@ -19,7 +19,7 @@
to={routes.person(person.pubkey)}
class="relative z-10 flex items-center gap-2"
on:click={killEvent}>
<ImageCircle src={person.kind0?.picture} />
<PersonCircle src={person.kind0?.picture} />
<span class="text-lg font-bold">{displayPerson(person)}</span>
</Link>
{/if}

8
src/partials/PersonCircle.svelte Normal file
View File

@ -0,0 +1,8 @@
<script lang="ts">
import ImageCircle from "./ImageCircle.svelte";
export let src;
export let size = 4;
</script>
<ImageCircle {size} src={src || "/images/avatar.svg"} class={$$props.class} />

5
src/partials/PersonInfo.svelte
View File

@ -6,6 +6,7 @@
import {displayPerson} from "src/util/nostr"
import Anchor from "src/partials/Anchor.svelte"
import {routes} from "src/app/ui"
import PersonCircle from "./PersonCircle.svelte";
export let person
export let addPetname = null
@ -16,9 +17,7 @@
in:fly={{y: 20}}
href={routes.person(person.pubkey)}
class="flex gap-4 overflow-hidden border-l-2 border-solid border-dark py-3 px-4 transition-all hover:border-accent hover:bg-black">
<div
class="h-12 w-12 shrink-0 overflow-hidden rounded-full border border-solid border-white bg-cover bg-center"
style="background-image: url({person.kind0?.picture})" />
<PersonCircle src={person.kind0?.picture} size={12} />
<div class="flex min-w-0 flex-grow flex-col gap-4">
<div class="flex items-start justify-between gap-2">
<div class="flex flex-col gap-2">

5
src/routes/MessagesDetail.svelte
View File

@ -16,6 +16,7 @@
import {routes} from "src/app/ui"
import {lastChecked} from "src/app/alerts"
import {renderNote} from "src/app"
import PersonCircle from "src/partials/PersonCircle.svelte";
export let entity
@ -74,9 +75,7 @@
<div slot="header" class="flex items-start gap-4">
<div class="flex items-center gap-4">
<Anchor type="unstyled" class="fa fa-arrow-left cursor-pointer text-2xl" href="/messages" />
<div
class="h-12 w-12 shrink-0 overflow-hidden rounded-full border border-solid border-white bg-cover bg-center"
style="background-image: url({$person.kind0?.picture})" />
<PersonCircle src={$person.kind0?.picture} size={12} />
</div>
<div class="flex w-full flex-col gap-2">
<div class="flex w-full items-center justify-between">

5
src/routes/PersonDetail.svelte
View File

@ -20,6 +20,7 @@
import network from "src/agent/network"
import database from "src/agent/database"
import {routes, modal} from "src/app/ui"
import PersonCircle from "src/partials/PersonCircle.svelte";
export let npub
export let activeTab
@ -172,9 +173,7 @@
<Content>
<div class="flex gap-4">
<div
class="h-16 w-16 shrink-0 overflow-hidden rounded-full border border-solid border-white bg-cover bg-center sm:h-32 sm:w-32"
style="background-image: url({person.kind0?.picture})" />
<PersonCircle src={person.kind0?.picture} size={16} class="sm:h-32 sm:w-32" />
<div class="flex flex-grow flex-col gap-4">
<div class="flex items-start justify-between gap-4">
<div class="flex flex-grow flex-col gap-2">

5
src/views/SideNav.svelte
View File

@ -5,6 +5,7 @@
import {menuIsOpen, installPrompt, routes} from "src/app/ui"
import {newAlerts, newDirectMessages, newChatMessages} from "src/app/alerts"
import {slowConnections} from "src/app/connection"
import PersonCircle from "src/partials/PersonCircle.svelte";
const {profile, canPublish} = user
@ -30,9 +31,7 @@
{#if $profile}
<li>
<a href={routes.person($profile.pubkey)} class="flex items-center gap-2 px-4 py-2 pb-6">
<div
class="h-6 w-6 shrink-0 overflow-hidden rounded-full border border-solid border-white bg-cover bg-center"
style="background-image: url({$profile.kind0?.picture})" />
<PersonCircle size={6} src={$profile.kind0?.picture} />
<span class="text-lg font-bold">{displayPerson($profile)}</span>
</a>
</li>

4
src/views/alerts/Mention.svelte
View File

@ -2,11 +2,11 @@
import {ellipsize} from "hurdak/lib/hurdak"
import {formatTimestamp} from "src/util/misc"
import {displayPerson} from "src/util/nostr"
import ImageCircle from "src/partials/ImageCircle.svelte"
import Popover from "src/partials/Popover.svelte"
import PersonSummary from "src/views/person/PersonSummary.svelte"
import database from "src/agent/database"
import {modal} from "src/app/ui"
import PersonCircle from "src/partials/PersonCircle.svelte";
export let note
@ -19,7 +19,7 @@
on:click={() => modal.set({type: "note/detail", note})}>
<div class="relative flex w-full items-center justify-between gap-2">
<div class="flex items-center gap-2">
<ImageCircle src={person.kind0?.picture} />
<PersonCircle src={person.kind0?.picture} />
<div on:click|stopPropagation>
<Popover class="inline-block">
<div slot="trigger" class="font-bold">

6
src/views/messages/MessagesListItem.svelte
View File

@ -6,6 +6,7 @@
import {displayPerson} from "src/util/nostr"
import database from "src/agent/database"
import {lastChecked} from "src/app/alerts"
import PersonCircle from "src/partials/PersonCircle.svelte";
export let contact
@ -19,10 +20,7 @@
px-4 py-6 transition-all hover:bg-medium"
on:click={enter}
in:fly={{y: 20}}>
<div
class="h-14 w-14 shrink-0 overflow-hidden rounded-full border border-solid border-white
bg-cover bg-center"
style="background-image: url({person.kind0?.picture})" />
<PersonCircle size={14} src={person.kind0?.picture} />
<div class="flex min-w-0 flex-grow flex-col justify-start gap-2">
<div class="flex flex-grow items-start justify-between gap-2">
<div class="flex items-center gap-2 overflow-hidden">

4
src/views/notes/Note.svelte
View File

@ -10,7 +10,6 @@
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"
import QRCode from "src/partials/QRCode.svelte"
import ImageInput from "src/partials/ImageInput.svelte"
import Input from "src/partials/Input.svelte"
@ -34,6 +33,7 @@
import cmd from "src/agent/cmd"
import {routes} from "src/app/ui"
import {publishWithToast} from "src/app"
import PersonCircle from "src/partials/PersonCircle.svelte";
export let note
export let depth = 0
@ -338,7 +338,7 @@
{/if}
<div>
<Anchor class="text-lg font-bold" href={routes.person($person.pubkey)}>
<ImageCircle size={10} src={$person.kind0?.picture} />
<PersonCircle size={10} src={$person.kind0?.picture} />
</Anchor>
</div>
<div class="flex min-w-0 flex-grow flex-col gap-2">

5
src/views/person/PersonSummary.svelte
View File

@ -8,6 +8,7 @@
import {sampleRelays, getPubkeyWriteRelays} from "src/agent/relays"
import database from "src/agent/database"
import {routes} from "src/app/ui"
import PersonCircle from "src/partials/PersonCircle.svelte";
export let pubkey
@ -32,9 +33,7 @@
<div class="relative flex flex-col gap-4 py-2 px-3">
<div class="flex gap-4">
<div
class="h-14 w-14 shrink-0 overflow-hidden rounded-full border border-solid border-white bg-cover bg-center"
style="background-image: url({$person.kind0?.picture})" />
<PersonCircle size={14} src={$person.kind0?.picture} />
<div class="flex flex-grow flex-col gap-2">
<Anchor
type="unstyled"