diff --git a/resources/images/icons/identicon_ring20@2x.png b/resources/images/icons/identicon_ring20@2x.png new file mode 100644 index 0000000000..df1fb88758 Binary files /dev/null and b/resources/images/icons/identicon_ring20@2x.png differ diff --git a/resources/images/icons/identicon_ring20@3x.png b/resources/images/icons/identicon_ring20@3x.png new file mode 100644 index 0000000000..8222f6d195 Binary files /dev/null and b/resources/images/icons/identicon_ring20@3x.png differ diff --git a/resources/images/icons/identicon_ring24@2x.png b/resources/images/icons/identicon_ring24@2x.png new file mode 100644 index 0000000000..ec08bff5e2 Binary files /dev/null and b/resources/images/icons/identicon_ring24@2x.png differ diff --git a/resources/images/icons/identicon_ring24@3x.png b/resources/images/icons/identicon_ring24@3x.png new file mode 100644 index 0000000000..99f9df737e Binary files /dev/null and b/resources/images/icons/identicon_ring24@3x.png differ diff --git a/resources/images/icons/identicon_ring32@2x.png b/resources/images/icons/identicon_ring32@2x.png new file mode 100644 index 0000000000..a71849fcc8 Binary files /dev/null and b/resources/images/icons/identicon_ring32@2x.png differ diff --git a/resources/images/icons/identicon_ring32@3x.png b/resources/images/icons/identicon_ring32@3x.png new file mode 100644 index 0000000000..e12426dec6 Binary files /dev/null and b/resources/images/icons/identicon_ring32@3x.png differ diff --git a/resources/images/icons/identicon_ring48@2x.png b/resources/images/icons/identicon_ring48@2x.png new file mode 100644 index 0000000000..e12426dec6 Binary files /dev/null and b/resources/images/icons/identicon_ring48@2x.png differ diff --git a/resources/images/icons/identicon_ring48@3x.png b/resources/images/icons/identicon_ring48@3x.png new file mode 100644 index 0000000000..9b315ea0b1 Binary files /dev/null and b/resources/images/icons/identicon_ring48@3x.png differ diff --git a/resources/images/icons/identicon_ring80@2x.png b/resources/images/icons/identicon_ring80@2x.png new file mode 100644 index 0000000000..9d6b43b622 Binary files /dev/null and b/resources/images/icons/identicon_ring80@2x.png differ diff --git a/resources/images/icons/identicon_ring80@3x.png b/resources/images/icons/identicon_ring80@3x.png new file mode 100644 index 0000000000..35a8bc7279 Binary files /dev/null and b/resources/images/icons/identicon_ring80@3x.png differ diff --git a/src/quo2/components/user_avatar.cljs b/src/quo2/components/user_avatar.cljs new file mode 100644 index 0000000000..fbe7973ca2 --- /dev/null +++ b/src/quo2/components/user_avatar.cljs @@ -0,0 +1,147 @@ +(ns quo2.components.user-avatar + (:require [quo.react-native :as rn] + [quo2.components.text :as text] + [quo2.foundations.colors :as colors] + [quo2.components.icon :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 :heading-1} + :medium {:outer 48 + :inner 44 + :status-indicator 12 + :status-indicator-border 2 + :font-size :paragraph-1} + :small {:outer 32 + :inner 28 + :status-indicator 12 + :status-indicator-border 2 + :font-size :paragraph-2} + :xs {:outer 24 + :inner 24 + :status-indicator 0 + :status-indicator-border 0 + :font-size :paragraph-2} + :xxs {:outer 20 + :inner 20 + :status-indicator 0 + :status-indicator-border 0 + :font-size :label} + :xxxs {:outer 16 + :inner 16 + :status-indicator 0 + :status-indicator-border 0 + :font-size :label}}) + +(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 -2 + 0) + bottom (case size + :big (if ring? + -1 + 2) + :medium (if ring? + 0 + -2) + :small (if ring? + -2 + -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])) + +(def small-sizes #{:xs :xxs :xxxs}) +(def identicon-sizes #{:big :medium :small}) + +(defn user-avatar + [{:keys [ring? + online? + size + status-indicator? + profile-picture + full-name] + :or {full-name "empty name" + 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 + (or (first full-name) "") + "") + 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]) + icon-text (if-not (or (blank? first-initial-letter) + (blank? initials)) + (if small? + first-initial-letter + initials) + "")] + [rn/view {:style {:width outer-dimensions + :height outer-dimensions + :border-radius outer-dimensions}} + (when (and ring? identicon?) + [icons/icon :main-icons/identicon-ring {:width outer-dimensions + :height outer-dimensions + :size 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 + [text/text {:weight :semi-bold + :size font-size + :style {:color colors/white-opa-70}} + (upper-case icon-text)]]) + [dot-indicator size status-indicator? online? ring? (dark?)]])) \ No newline at end of file diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs index e729b33565..bdf016aeee 100644 --- a/src/quo2/screens/main.cljs +++ b/src/quo2/screens/main.cljs @@ -23,6 +23,7 @@ [quo2.screens.token-overview :as token-overview] [quo2.screens.token-tag :as token-tag] [quo2.screens.wallet-user-avatar :as wallet-user-avatar] + [quo2.screens.user-avatar :as user-avatar] [re-frame.core :as re-frame])) (def screens [{:name :quo2-texts @@ -31,6 +32,9 @@ {:name :quo2-wallet-user-avatar :insets {:top false} :component wallet-user-avatar/preview-wallet-user-avatar} + {:name :quo2-user-avatar + :insets {:top false} + :component user-avatar/preview-user-avatar} {:name :quo2-button :insets {:top false} :component button/preview-button} diff --git a/src/quo2/screens/user_avatar.cljs b/src/quo2/screens/user_avatar.cljs new file mode 100644 index 0000000000..a417084cca --- /dev/null +++ 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 "A Y" + :status-indicator? true + :online? true + :size :medium + :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}]]) \ No newline at end of file