fix: enable frontend initials in user-avatar for community avatar

status-im · Jul 19, 2023 · 7ecb32f · 7ecb32f
1 parent b7b849d
commit 7ecb32f
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 21 deletions.
diff --git a/src/quo2/components/avatars/user_avatar/style.cljs b/src/quo2/components/avatars/user_avatar/style.cljs
@@ -27,6 +27,19 @@
             :status-indicator-border 0
             :font-size               :label}})
 
+(defn initials-avatar
+  [size customization-color]
+  (let [dimensions (get-in sizes [size :dimensions])]
+    {:position         :absolute
+     :top              0
+     :left             0
+     :width            dimensions
+     :height           dimensions
+     :border-radius    dimensions
+     :justify-content  :center
+     :align-items      :center
+     :background-color (colors/custom-color-by-theme customization-color 50 60)}))
+
 (def indicator-color
   {:online  colors/success-50
    :offline colors/neutral-40})

diff --git a/src/quo2/components/avatars/user_avatar/view.cljs b/src/quo2/components/avatars/user_avatar/view.cljs
@@ -3,7 +3,21 @@
             [quo2.components.common.no-flicker-image :as no-flicker-image]
             [quo2.components.markdown.text :as text]
             [react-native.core :as rn]
-            [react-native.fast-image :as fast-image]))
+            [react-native.fast-image :as fast-image]
+            utils.string))
+
+(defn initials-avatar
+  [{:keys [full-name size customization-color]}]
+  (let [font-size       (get-in style/sizes [size :font-size])
+        amount-initials (if (#{:xs :xxs :xxxs} size) 1 2)]
+    [rn/view
+     {:accessibility-label :initials-avatar
+      :style               (style/initials-avatar size customization-color)}
+     [text/text
+      {:style  style/initials-avatar-text
+       :size   font-size
+       :weight :semi-bold}
+      (utils.string/get-initials full-name amount-initials)]]))
 
 (defn user-avatar
   "Render user avatar with `profile-picture`
@@ -39,7 +53,8 @@
            status-indicator?   true
            online?             true
            ring?               true
-           customization-color :turquoise}}]
+           customization-color :turquoise}
+    :as   props}]
   (let [full-name          (or full-name "Your Name")
         ;; image generated with profile-picture-fn is round cropped
         ;; no need to add border-radius for them
@@ -55,22 +70,29 @@
         profile-picture-fn (:fn profile-picture)]
 
     [rn/view {:style outer-styles :accessibility-label :user-avatar}
-     [image-view
-      {:accessibility-label :profile-picture
-       :style               outer-styles
-       :source              (if profile-picture-fn
-                              {:uri (profile-picture-fn
-                                     {:length           amount-initials
-                                      :full-name        full-name
-                                      :font-size        (:font-size (text/text-style {:size font-size}))
-                                      :indicator-size   (when status-indicator?
-                                                          (:status-indicator sizes))
-                                      :indicator-border (when status-indicator?
-                                                          (:status-indicator-border sizes))
-                                      :indicator-color  indicator-color
-                                      :override-theme   override-theme
-                                      :background-color (style/customization-color customization-color)
-                                      :color            (:color style/initials-avatar-text)
-                                      :size             (:width outer-styles)
-                                      :ring?            (if muted? false ring?)})}
-                              profile-picture)}]]))
+     (if (and full-name (not (or profile-picture-fn profile-picture)))
+       ;; this is for things that's not user-avatar
+       ;; but are currently using user-avatar to render the initials
+       ;; e.g. community avatar
+       [initials-avatar props]
+       [image-view
+        {:accessibility-label :profile-picture
+         :style               outer-styles
+         :source              {:uri (if profile-picture-fn
+                                      (profile-picture-fn
+                                       {:length           amount-initials
+                                        :full-name        full-name
+                                        :font-size        (:font-size (text/text-style {:size
+                                                                                        font-size}))
+                                        :indicator-size   (when status-indicator?
+                                                            (:status-indicator sizes))
+                                        :indicator-border (when status-indicator?
+                                                            (:status-indicator-border sizes))
+                                        :indicator-color  indicator-color
+                                        :override-theme   override-theme
+                                        :background-color (style/customization-color
+                                                           customization-color)
+                                        :color            (:color style/initials-avatar-text)
+                                        :size             (:width outer-styles)
+                                        :ring?            (if muted? false ring?)})
+                                      profile-picture)}}])]))