From 8712e7fdcfee052e8e1c3b62d9dd7623d380b7c6 Mon Sep 17 00:00:00 2001
From: "guillem.cordoba" <guillem.cordoba@gmail.com>
Date: Wed, 20 Nov 2024 17:32:34 +0100
Subject: [PATCH] Fix show-avatar-image

---
 ui/demo/index.html                   | 12 ++++++++----
 ui/src/elements/show-avatar-image.ts |  8 ++++++--
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/ui/demo/index.html b/ui/demo/index.html
index 7a52e9e..39fab8b 100644
--- a/ui/demo/index.html
+++ b/ui/demo/index.html
@@ -27,6 +27,7 @@
       import "../src/elements/upload-files.ts";
       import "../src/elements/file-storage-context.ts";
       import "../src/elements/show-image.ts";
+      import "../src/elements/show-avatar-image.ts";
       import { css, html, LitElement } from "lit";
       import { ContextProvider } from "@lit/context";
       import { AppWebsocket } from "@holochain/client";
@@ -56,23 +57,28 @@
                   <form ${onSubmit((data) => {
                     console.log(data);
                     this.shadowRoot.querySelector("form").reset();
-                  })} style="display: flex; flex-direction: column; flex: 1">
+                  })} style="display: flex; flex-direction: row; flex: 1">
+                  <div style="display: flex; flex-direction: column;" >
                     <upload-files
                       id="uf"
                       .oneFile=${true}
                       required
                       name="file_hash"
-                      style="max-width: 20px; max-height:20px"
                       @file-uploaded=${(e) => {
                         this.hash = e.detail.file.hash;
                       }}
                     ></upload-files>
+                    <input type="submit"></input>
+                    </div>
                     ${
                       this.hash
                         ? html`
                             <div
                               style="display: flex; flex-direction: row; flex: 1"
                             >
+                              <show-avatar-image
+                                .imageHash=${this.hash}
+                              ></show-avatar-image>
                               <show-image
                                 .imageHash=${this.hash}
                                 style="width: 500px; height: 500px; border-radius: 12px"
@@ -80,7 +86,6 @@
 
                               <upload-files
                                 .defaultValue=${this.hash}
-                                style="flex: 1"
                                 .oneFile=${true}
                                 name="file_hash"
                               ></upload-files>
@@ -88,7 +93,6 @@
                           `
                         : html``
                     }
-                    <input type="submit"></input>
                   </form>
                 </file-storage-context>
               </app-client-context>
diff --git a/ui/src/elements/show-avatar-image.ts b/ui/src/elements/show-avatar-image.ts
index 8ace5c1..1b0a97d 100644
--- a/ui/src/elements/show-avatar-image.ts
+++ b/ui/src/elements/show-avatar-image.ts
@@ -4,6 +4,7 @@ import { hashProperty, sharedStyles } from "@tnesh-stack/elements";
 import { consume } from "@lit/context";
 
 import "@shoelace-style/shoelace/dist/components/skeleton/skeleton.js";
+import "@shoelace-style/shoelace/dist/components/avatar/avatar.js";
 import "@tnesh-stack/elements/dist/elements/display-error.js";
 
 import { EntryHash } from "@holochain/client";
@@ -62,8 +63,7 @@ export class ShowAvatarImage extends LitElement {
   renderImage(data: string) {
     return html`
       <sl-avatar
-        .src=${data}
-        style="--size: var(--size)"
+        .image=${data}
         part="image"
         .initials=${this.initials.slice(0, 2)}
       ></sl-avatar>
@@ -94,6 +94,10 @@ export class ShowAvatarImage extends LitElement {
         :host {
           display: contents;
           --size: 32px;
+          --size2: var(--size);
+        }
+        sl-avatar {
+          --size: var(--size2);
         }
       `,
     ];