feat: extend Avatar with new fallback data (#221)

* Extend Avatar with avatarFallback * Hide erroneous avatar image * Fix mock avatar img url
radicle-dev · Mar 13, 2020 · fc2f7bd · fc2f7bd
1 parent 660fa31
commit fc2f7bd
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 18 deletions.
diff --git a/proxy/src/graphql/schema.rs b/proxy/src/graphql/schema.rs
@@ -285,7 +285,7 @@ impl Query {
             metadata: identity::Metadata {
                 handle: "cloudhead".into(),
                 display_name: Some("Alexis Sellier".into()),
-                avatar_url: Some("https://avatars1.githubusercontent.com/u/4077".into()),
+                avatar_url: Some("https://avatars1.githubusercontent.com/u/40774".into()),
             },
         }))
     }

diff --git a/proxy/tests/graphql_mutation.rs b/proxy/tests/graphql_mutation.rs
@@ -17,7 +17,7 @@ fn create_identity() {
         vars.insert("displayName".into(), InputValue::scalar("Alexis Sellier"));
         vars.insert(
             "avatarUrl".into(),
-            InputValue::scalar("https://avatars1.githubusercontent.com/u/4077"),
+            InputValue::scalar("https://avatars1.githubusercontent.com/u/40774"),
         );
 
         let query = "mutation($handle: String!, $displayName: String, $avatarUrl: String) {
@@ -43,7 +43,7 @@ fn create_identity() {
                         "metadata": {
                             "handle": "cloudhead",
                             "displayName": "Alexis Sellier",
-                            "avatarUrl": "https://avatars1.githubusercontent.com/u/4077",
+                            "avatarUrl": "https://avatars1.githubusercontent.com/u/40774",
                         },
                     },
                 })

diff --git a/proxy/tests/graphql_query.rs b/proxy/tests/graphql_query.rs
@@ -615,7 +615,7 @@ fn identity() {
                         "metadata": {
                             "handle": "cloudhead",
                             "displayName": "Alexis Sellier",
-                            "avatarUrl": "https://avatars1.githubusercontent.com/u/4077",
+                            "avatarUrl": "https://avatars1.githubusercontent.com/u/40774",
                         },
                         "avatarFallback": {
                             "emoji": "🚡",

diff --git a/ui/DesignSystem/Primitive/Avatar.svelte b/ui/DesignSystem/Primitive/Avatar.svelte
@@ -3,12 +3,19 @@
 
   export let style = null;
 
-  export let imageUrl = `https://avatars.dicebear.com/v2/avataaars/S7oswrhcNJkjzUhNW33S.svg`;
+  // the hierarchy of usage for the following avatars is:
+  // imageUrl > avatarFallback
+  export let imageUrl = null;
+  export let avatarFallback = null; // {emoji: <emoji>, background: {r: <r>, g: <g>, b: <b>}};
   export let title = null;
 
   export let variant = "user"; // user | project
   export let size = "regular"; // regular | medium | big
 
+  const fmt = background => {
+    return `rgb(${background.r}, ${background.g}, ${background.b})`;
+  };
+
   $: avatarClass = [variant, size].join(" ");
 </script>
 
@@ -32,6 +39,10 @@
     border-radius: 34px;
   }
 
+  .avatar.user.big {
+    line-height: 68px;
+  }
+
   .project {
     border-radius: 2px;
   }
@@ -46,15 +57,41 @@
     height: 64px;
   }
 
-  div {
+  .container {
     display: flex;
     align-items: center;
     justify-content: center;
   }
+
+  .avatar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 </style>
 
-<div class={size} {style}>
-  <img class={avatarClass} src={imageUrl} alt="user-avatar" />
+<div class={`container ${size}`} {style}>
+  {#if imageUrl}
+    <img
+      class={avatarClass}
+      src={imageUrl}
+      alt="user-avatar"
+      onerror="this.style.display='none'" />
+  {:else if avatarFallback}
+    <div
+      class={`avatar ${avatarClass}`}
+      style="background: {fmt(avatarFallback.background)}">
+      <Title variant={size} style="min-width: 27px; text-align: end;">
+        {avatarFallback.emoji}
+      </Title>
+    </div>
+  {:else}
+    <!-- TODO: Remove when all avatars use the new fallback data or add placeholder -->
+    <img
+      class={avatarClass}
+      src="https://avatars.dicebear.com/v2/avataaars/S7oswrhcNJkjzUhNW33S.svg"
+      alt="user-avatar" />
+  {/if}
 
   {#if title && size === 'regular'}
     <Title

diff --git a/ui/DesignSystem/Primitive/Input/Text.svelte b/ui/DesignSystem/Primitive/Input/Text.svelte
@@ -12,6 +12,7 @@
   export let valid = true;
   export let validationMessage = null;
   export let variant = "vanilla"; // vanilla | handle
+  export let avatar = null;
   export let validationPending = false;
 </script>
 
@@ -70,10 +71,11 @@
     {disabled}
     on:change
     on:input />
-  {#if variant === 'handle'}
+  {#if variant === 'handle' && value && avatar}
     <Avatar
+      avatarFallback={avatar}
       variant="user"
-      size="small"
+      size="regular"
       style="width: 32px; height: 48px; justify-content: flex-start; position:
       absolute; top: 0px; left: 10px" />
   {/if}

diff --git a/ui/Screen/DesignSystemGuide.svelte b/ui/Screen/DesignSystemGuide.svelte
@@ -56,6 +56,24 @@
     avatar: "https://avatars.dicebear.com/v2/jdenticon/two.svg"
   };
 
+  const avatarFallback1 = {
+    emoji: "📐",
+    background: {
+      r: 24,
+      g: 105,
+      b: 216
+    }
+  };
+
+  const avatarFallback2 = {
+    emoji: "🛠",
+    background: {
+      r: 181,
+      g: 25,
+      b: 111
+    }
+  };
+
   const dropdownMenuItems = [
     {
       title: "Add something",
@@ -448,6 +466,7 @@
 
     <Swatch>
       <Input.Text
+        avatar={avatarFallback1}
         placeholder="Enter user name"
         style="width: 100%"
         valid={true}
@@ -457,6 +476,7 @@
 
     <Swatch>
       <Input.Text
+        avatar={avatarFallback1}
         placeholder="Enter user name"
         style="width: 100%"
         valid={true}
@@ -467,6 +487,7 @@
 
     <Swatch>
       <Input.Text
+        avatar={avatarFallback2}
         placeholder="Enter user name."
         style="width: 100%"
         valid={false}
@@ -495,12 +516,11 @@
     subTitle="User, project, etc avatars in various sizes and shapes.">
 
     <Swatch>
-      <Avatar />
-      <Avatar size="big" />
-      <Avatar
-        imageUrl="https://avatars.dicebear.com/v2/avataaars/gWIIBkeCYYZFCPhBp3Cl.svg" />
+      <Avatar avatarFallback={avatarFallback1} />
+      <Avatar size="big" avatarFallback={avatarFallback1} />
+      <Avatar imageUrl="https://avatars1.githubusercontent.com/u/40774" />
       <Avatar
-        imageUrl="https://avatars.dicebear.com/v2/avataaars/gWIIBkeCYYZFCPhBp3Cl.svg"
+        imageUrl="https://avatars1.githubusercontent.com/u/40774"
         size="big" />
       <Avatar
         imageUrl="https://avatars.dicebear.com/v2/jdenticon/one.svg"
@@ -512,8 +532,8 @@
     </Swatch>
 
     <Swatch>
-      <Avatar title="My name" />
-      <Avatar size="big" title="My name" />
+      <Avatar title="My name" avatarFallback={avatarFallback2} />
+      <Avatar size="big" title="My name" avatarFallback={avatarFallback2} />
     </Swatch>
   </Section>
 
@@ -553,7 +573,7 @@
         </div>
 
         <div slot="right">
-          <Avatar title="user" />
+          <Avatar title="user" avatarFallback={avatarFallback1} />
         </div>
       </Row>
     </Swatch>