Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Show blockies when avatar image is missing
Sebastian Martinez committed 4 years ago
commit fe54bcacdc677b525b733949f315533843e546e1
parent 2e55ee0e5db59c21c4b9bd4c84ec1e867a806393
7 files changed +26 -26
modified src/Address.svelte
@@ -49,7 +49,7 @@


<div class="address" title={address} class:no-badge={noBadge}>

  {#if !noAvatar}
- 
    <Avatar inline source={profile?.avatar ?? address} />
+ 
    <Avatar inline source={profile?.avatar ?? address} {address}/>

  {/if}

  {#if addressType === AddressType.Org}

    <a use:link href={`/orgs/${address}`}>{addressLabel}</a>
modified src/Avatar.svelte
@@ -1,25 +1,29 @@
<script lang="ts">
- 
  import { onMount } from 'svelte';

  import { createIcon } from '@app/blockies';

  import { isAddress, isRadicleId } from '@app/utils';
+ 
  export let address: string;

  export let source: string;

  export let inline = false;

  export let glowOnHover = false;
- 
  let container: HTMLElement;
+ 
  function handleMissingFile() {
+ 
    source = createContainer(address);
+ 
  }
+
+ 
  function createContainer(source: string) {
+ 
    const seed = source.toLowerCase();
+ 
    const avatar = createIcon({
+ 
      seed,
+ 
      size: 8,
+ 
      scale: 16,
+ 
    });
+ 
    return avatar.toDataURL();
+ 
  }
- 
  onMount(() => {
- 
    if (isAddress(source) || isRadicleId(source)) {
- 
      const seed = source.toLowerCase();
- 
      const avatar = createIcon({
- 
        seed,
- 
        size: 8,
- 
        scale: 16,
- 
      });
- 
      container.style.backgroundImage = `url(${avatar.toDataURL()})`;
- 
    }
- 
  });
+ 
  $: if (isAddress(source) || isRadicleId(source)) {
+ 
    source = createContainer(source);
+ 
  }

</script>



<style>
@@ -44,9 +48,5 @@
  }

</style>
- 
{#if isAddress(source) || isRadicleId(source)}
- 
  <div class="avatar" class:inline bind:this={container} class:glowOnHover title={source}/>
- 
{:else}
- 
  <!-- svelte-ignore a11y-missing-attribute -->
- 
  <img class="avatar" class:inline src={source} class:glowOnHover />
- 
{/if}
+ 
<!-- svelte-ignore a11y-missing-attribute -->
+ 
<img class="avatar" class:inline src={source} on:error={handleMissingFile} class:glowOnHover />
modified src/Header.svelte
@@ -175,7 +175,7 @@
          {#if sessionButtonHover}

            Disconnect

          {:else}
- 
            <Avatar source={profile.avatar ?? address} inline />{formatAddress(address)}
+ 
            <Avatar source={profile.avatar ?? address} {address} inline />{formatAddress(address)}

          {/if}

        {/await}

      </button>
modified src/base/orgs/List.svelte
@@ -83,7 +83,7 @@
      <Link to={`/orgs/${profile.nameOrAddress}`}>

        <div class="org">

          <div class="org-avatar">
- 
            <Avatar source={profile.avatar ?? profile.address} />
+ 
            <Avatar source={profile.avatar ?? profile.address} address={profile.address} />

          </div>

          <div class="org-label">

            {#if profile.name}
modified src/base/orgs/View.svelte
@@ -161,7 +161,7 @@
      {:then profile}

        <header>

          <div class="avatar">
- 
            <Avatar source={profile.avatar ?? org.address} />
+ 
            <Avatar source={profile.avatar ?? org.address} address={org.address} />

          </div>

          <div class="info">

            <span class="title">
@@ -288,7 +288,7 @@
                {#each members as profile}

                  <div class="member">

                    <div class="member-icon">
- 
                      <Avatar source={profile.avatar ?? profile.address} />
+ 
                      <Avatar source={profile.avatar ?? profile.address} address={profile.address} />

                    </div>

                    <Address address={profile.address} compact

                      resolve noAvatar {profile} {config} />
modified src/base/projects/View.svelte
@@ -107,7 +107,7 @@
      <div class="title bold">

        {#if result.org}

          <a class="org-avatar" title={result.org.nameOrAddress} href={`/orgs/${result.org.nameOrAddress}`}>
- 
            <Avatar source={result.org.avatar || result.org.address}/>
+ 
            <Avatar source={result.org.avatar || result.org.address} address={result.org.address}/>

          </a>

          <span class="divider">/</span>

        {/if}
modified src/base/users/View.svelte
@@ -78,7 +78,7 @@
  <main>

    <header>

      <div class="avatar">
- 
        <Avatar source={profile.avatar ?? address} />
+ 
        <Avatar source={profile.avatar ?? address} {address} />

      </div>

      <div class="info">

        <span class="title bold">