feat: add ability to set tool-avatar-select size

prose-im · Jun 23, 2024 · ce6eb45 · ce6eb45
1 parent 8d0e6f6
commit ce6eb45
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/src/components/popups/sidebar/EditProfileNavigate.vue b/src/components/popups/sidebar/EditProfileNavigate.vue
@@ -15,6 +15,7 @@
       @update="onAvatarUpdate"
       :jid="jid"
       :pending="pending"
+      size="96px"
     )
 
     p.p-edit-profile-navigate__identity-name.u-medium

diff --git a/src/components/tool/ToolAvatarSelect.vue b/src/components/tool/ToolAvatarSelect.vue
@@ -13,14 +13,19 @@ div(
   :class=`[
     "c-tool-avatar-select",
     {
-      "c-tool-avatar-select--locked": pending || fileLoading
+      "c-tool-avatar-select--locked": pending || fileLoading,
+      "c-tool-avatar-select--block": block
     }
   ]`
+  :style=`{
+    width: size,
+    height: size
+  }`
 )
   base-avatar(
     :jid="jid"
     :data-url="avatarDataUrl"
-    size="96px"
+    :size="size"
     shadow="light"
     class="c-tool-avatar-select__image"
     square
@@ -84,9 +89,19 @@ export default {
       required: true
     },
 
+    size: {
+      type: String,
+      default: "100px"
+    },
+
     pending: {
       type: Boolean,
       default: false
+    },
+
+    block: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -290,5 +305,10 @@ $c: ".c-tool-avatar-select";
   &--locked {
     pointer-events: none;
   }
+
+  &--block {
+    margin-inline: auto;
+    display: block;
+  }
 }
 </style>