User avatar component

status-im · Sep 5, 2022 · ea24fa8 · ea24fa8
1 parent 53008b1
commit ea24fa8
Show file tree

Hide file tree

Showing 5 changed files with 207 additions and 0 deletions.
diff --git a/resources/images/icons/[email protected] b/resources/images/icons/[email protected]
diff --git a/resources/images/icons/[email protected] b/resources/images/icons/[email protected]
diff --git a/src/quo2/components/user_avatar.cljs b/src/quo2/components/user_avatar.cljs
@@ -0,0 +1,142 @@
+(ns quo2.components.user-avatar
+  (:require [quo.react-native :as rn]
+            [quo2.foundations.colors :as colors]
+            [status-im.ui.components.icons.icons :as icons]
+            [clojure.string :refer [upper-case split blank?]]
+            [quo.theme :refer [dark?]]
+            [status-im.ui.components.react :as react]))
+
+(def sizes {:big {:outer 80
+                  :inner 72
+                  :status-indicator 20
+                  :status-indicator-border 4
+                  :font-size 27}
+            :medium {:outer 48
+                     :inner 44
+                     :status-indicator 16
+                     :status-indicator-border 2
+                     :font-size 15}
+            :small {:outer 32
+                    :inner 28
+                    :status-indicator 12
+                    :status-indicator-border 2
+                    :font-size 13}
+            :xs {:outer 24
+                 :inner 24
+                 :status-indicator 0
+                 :status-indicator-border 0
+                 :font-size 13}
+            :xxs {:outer 20
+                  :inner 20
+                  :status-indicator 0
+                  :status-indicator-border 0
+                  :font-size 11}
+            :xxxs {:outer 16
+                   :inner 16
+                   :status-indicator 0
+                   :status-indicator-border 0
+                   :font-size 11}})
+
+(defn dot-indicator
+  [size status-indicator? online? ring? dark?]
+  (when status-indicator?
+    (let [dimensions (get-in sizes [size :status-indicator])
+          border-width (get-in sizes [size :status-indicator-border])
+          right (case size
+                  :big 2
+                  :medium 0
+                  :small 0
+                  0)
+          bottom (case size
+                   :big (if ring?
+                          4
+                          2)
+                   :medium (if ring?
+                             0
+                             -2)
+                   :small (if ring?
+                            0
+                            -2)
+                   0)]
+      [rn/view {:style {:background-color (if online?
+                                            colors/success-50
+                                            colors/neutral-40)
+                        :width dimensions
+                        :height dimensions
+                        :border-width border-width
+                        :border-radius dimensions
+                        :border-color (if dark?
+                                        colors/black
+                                        colors/white)
+                        :position :absolute
+                        :bottom bottom
+                        :right right}}])))
+
+(defn container-styling [inner-dimensions outer-dimensions]
+  {:width inner-dimensions
+   :position :absolute
+   :top (/ (- outer-dimensions inner-dimensions) 2)
+   :left (/ (- outer-dimensions inner-dimensions) 2)
+   :height inner-dimensions
+   :border-radius inner-dimensions})
+
+(defn container [inner-dimensions outer-dimensions & children]
+  (let [dark-kw (if dark? :dark :light)]
+    [rn/view {:style (merge {:background-color (colors/custom-color
+                                                :turquoise
+                                                dark-kw)
+                             :justify-content :center
+                             :align-items :center}
+                            (container-styling inner-dimensions outer-dimensions))}
+     children]))
+
+(defn user-avatar
+  [{:keys [ring?
+           online?
+           size
+           status-indicator?
+           profile-picture
+           full-name]
+    :or {full-name "john doe"
+         status-indicator? true
+         online? true
+         size :big
+         ring? true}}]
+  (let [initials (if full-name
+                   (reduce str (map first (split full-name " ")))
+                   "")
+        first-initial-letter (if full-name
+                               (first full-name)
+                               "")
+        small-sizes #{:small :xs :xxs :xxxs}
+        identicon-sizes #{:big :medium :small}
+        identicon? (contains? identicon-sizes size)
+        small? (contains? small-sizes size)
+        using-profile-picture? (-> profile-picture
+                                   blank?
+                                   false?)
+        outer-dimensions (get-in sizes [size :outer])
+        inner-dimensions (get-in sizes [size (if ring?
+                                               :inner
+                                               :outer)])
+        font-size (get-in sizes [size :font-size])]
+    [rn/view {:style {:width outer-dimensions
+                      :height outer-dimensions
+                      :border-radius outer-dimensions}}
+     (when (and ring? identicon?)
+       [icons/icon :main-icons/identicon-ring32 {:width outer-dimensions
+                                                 :height outer-dimensions
+                                                 :no-color true}])
+     (if using-profile-picture?
+       [react/image {:style  (container-styling inner-dimensions outer-dimensions)
+                     :source {:uri profile-picture}}]
+       [container inner-dimensions outer-dimensions
+        [rn/text {:style {:color colors/white-opa-70
+                          :font-size font-size}}
+         (upper-case (if-not (or (blank? first-initial-letter)
+                                 (blank? initials))
+                       (if small?
+                         first-initial-letter
+                         initials)
+                       ""))]])
+     [dot-indicator size status-indicator? online? ring? (dark?)]]))
diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs
@@ -8,6 +8,7 @@
             [quo2.screens.tabs :as tabs]
             [quo2.screens.status-tags :as status-tags]
             [quo2.screens.context-tags :as context-tags]
+            [quo2.screens.user-avatar :as user-avatar]
             [quo2.screens.group-avatar :as group-avatar]
             [quo2.screens.activity-logs :as activity-logs]
             [quo2.screens.counter :as counter]
@@ -38,6 +39,9 @@
               {:name      :quo2-tabs
                :insets    {:top false}
                :component tabs/preview-tabs}
+              {:name      :quo2-user-avatar
+               :insets    {:top false}
+               :component user-avatar/preview-user-avatar}
               {:name      :quo2-segmented
                :insets    {:top false}
                :component segmented/preview-segmented}

diff --git a/src/quo2/screens/user_avatar.cljs b/src/quo2/screens/user_avatar.cljs
@@ -0,0 +1,61 @@
+(ns quo2.screens.user-avatar
+  (:require [quo.react-native :as rn]
+            [quo.design-system.colors :as colors]
+            [quo.previews.preview :as preview]
+            [quo2.components.user-avatar :as quo2]
+            [reagent.core :as reagent]))
+
+(def descriptor [{:label   "Size:"
+                  :key     :size
+                  :type    :select
+                  :options [{:key   :big
+                             :value "Big"}
+                            {:key   :medium
+                             :value "Medium"}
+                            {:key   :small
+                             :value "Small"}
+                            {:key   :xs
+                             :value "x Small"}
+                            {:key   :xxs
+                             :value "xx Small"}
+                            {:key   :xxxs
+                             :value "xxx Small"}]}
+                 {:label "Online status"
+                  :key   :online?
+                  :type  :boolean}
+                 {:label "Status Indicator"
+                  :key   :status-indicator?
+                  :type  :boolean}
+                 {:label "Identicon Ring"
+                  :key   :ring?
+                  :type  :boolean}
+                 {:label "Full name separated by space"
+                  :key   :full-name
+                  :type  :text}
+                 {:label "Profile Picture URL"
+                  :key   :profile-picture
+                  :type  :text}])
+
+(defn cool-preview []
+  (let [state  (reagent/atom {:full-name "john doe"
+                              :status-indicator? true
+                              :online? true
+                              :size :big
+                              :ring? true})]
+    (fn []
+      [rn/view {:margin-bottom 50
+                :padding       16}
+       [rn/view {:flex 1}
+        [preview/customizer state descriptor]]
+       [rn/view {:padding-vertical 60
+                 :flex-direction   :row
+                 :justify-content  :center}
+        [quo2/user-avatar @state]]])))
+
+(defn preview-user-avatar []
+  [rn/view {:background-color (:ui-background @colors/theme)
+            :flex             1}
+   [rn/flat-list {:flex                      1
+                  :keyboardShouldPersistTaps :always
+                  :header                    [cool-preview]
+                  :key-fn                    str}]])