Merge branch 'develop' into issue-13832

ci/Jenkinsfile.ios

@@ -4,7 +4,7 @@ library 'status-jenkins-lib@v1.5.3'
 def isPRBuild = utils.isPRBuild()
 
 pipeline {
-  agent { label 'macos && x86_64 && nix-2.8 && xcode-13.3' }
+  agent { label 'macos && x86_64 && nix-2.8 && xcode-13.4' }
 
   parameters {
     string(

nix/overlay.nix

@@ -43,7 +43,12 @@ in {
   go = super.pkgs.go_1_17;
   buildGoPackage = super.pkgs.buildGo117Package;
   buildGoModule = super.pkgs.buildGo117Module;
-  gomobile = super.gomobile.override {
+  gomobile = (super.gomobile.overrideAttrs (old: {
+    patches = self.pkgs.fetchurl { # https://github.com/golang/mobile/pull/84
+      url = "https://github.com/golang/mobile/commit/f20e966e05b8f7e06bed500fa0da81cf6ebca307.patch";
+      sha256 = "sha256-TZ/Yhe8gMRQUZFAs9G5/cf2b9QGtTHRSObBFD5Pbh7Y=";
+    };
+  })).override {
     # FIXME: No Android SDK packages for aarch64-darwin.
     withAndroidPkgs = stdenv.system != "aarch64-darwin";
     androidPkgs = self.androidEnvCustom.compose;

src/quo2/components/list_items/preview_list.cljs

@@ -0,0 +1,115 @@
+(ns quo2.components.list-items.preview-list
+  (:require [quo.react-native :as rn]
+            [status-im.i18n.i18n :as i18n]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.icon :as quo2.icons]
+            [quo2.components.avatars.user-avatar :as user-avatar]
+            [quo2.components.markdown.text :as quo2.text]))
+
+(def params {32 {:border-radius {:circular 16 :rounded  10}
+                 :hole-radius   {:circular 18 :rounded  12}
+                 :margin-left   -8
+                 :hole-size     36
+                 :hole-x        22
+                 :hole-y        -2}
+             24 {:border-radius {:circular 12 :rounded  8}
+                 :hole-radius   {:circular 13 :rounded  9}
+                 :margin-left   -4
+                 :hole-size     26
+                 :hole-x        19
+                 :hole-y        -1}
+             16 {:border-radius {:circular 8 :rounded  8}
+                 :hole-radius   {:circular 9 :rounded  9}
+                 :margin-left   -4
+                 :hole-size     18
+                 :hole-x        11
+                 :hole-y        -1}})
+
+;; TODO - Add avatar components for other types once implemented
+(defn avatar [item type size]
+  (case type
+    :user [user-avatar/user-avatar
+           (merge {:ring?             false
+                   :status-indicator? false
+                   :size              (case size 32 :small 24 :xs 16 :xxxs)}
+                  item)]))
+
+(defn list-item [index type size item list-size margin-left
+                 hole-size hole-radius hole-x hole-y]
+  (let [last-item? (= index (- list-size 1))]
+    [rn/hole-view {:style {:margin-left   (if (= index 0) 0 margin-left)}
+                   :holes (if last-item? []
+                              [{:x             hole-x
+                                :y             hole-y
+                                :width         hole-size
+                                :height        hole-size
+                                :borderRadius  hole-radius}])}
+     [avatar item type size]]))
+
+(defn get-overflow-color [transparent? transparent-color light-color dark-color]
+  (if transparent?
+    transparent-color
+    (colors/theme-colors light-color dark-color)))
+
+(defn overflow-label [label size transparent? border-radius margin-left]
+  [rn/view {:style {:width            size
+                    :height           size
+                    :margin-left      margin-left
+                    :border-radius    border-radius
+                    :justify-content  :center
+                    :align-items      :center
+                    :background-color (get-overflow-color
+                                       transparent?
+                                       colors/white-opa-10
+                                       colors/neutral-20
+                                       colors/neutral-70)}}
+   (if (= size 16)
+     [quo2.icons/icon :main-icons2/more {:size 12
+                                         :color (get-overflow-color
+                                                 transparent?
+                                                 colors/white-opa-70
+                                                 colors/neutral-50
+                                                 colors/neutral-40)}]
+     [quo2.text/text {:size   (if (= size 32) :paragraph-2 :label)
+                      :weight :medium
+                      :style  {:color       (get-overflow-color
+                                             transparent?
+                                             colors/white-opa-70
+                                             colors/neutral-60
+                                             colors/neutral-40)
+                               :margin-left -2}}
+      ;; If overflow label is below 100, show label as +label (ex. +30), else just show 99+
+      (if (< label 100)
+        (str "+" label)
+        (i18n/label :counter-99-plus))])])
+
+(defn border-type [type]
+  (case type
+    (:account :collectible) :rounded
+    :circular))
+
+(defn preview-list
+  "[preview-list opts items]
+   opts
+   {:type          :user/:community/:account/:token/:collectible/:dapp
+    :size          32/24/16
+    :list-size     override items count in overflow label (optional)
+    :transparent?  overflow-label transparent?}
+   items           preview list items (only 4 items is required for preview)
+  "
+  [{:keys [type size list-size transparent?]} items]
+  (let [items-arr     (into [] items)
+        list-size     (or list-size (count items))
+        margin-left   (get-in params [size :margin-left])
+        hole-size     (get-in params [size :hole-size])
+        border-radius (get-in params [size :border-radius (border-type type)])
+        hole-radius   (get-in params [size :hole-radius (border-type type)])
+        hole-x        (get-in params [size :hole-x])
+        hole-y        (get-in params [size :hole-y])]
+    [rn/view {:style {:flex-direction :row}}
+     (for [index (range (if (> list-size 4) 3 list-size))]
+       ^{:key (str index list-size)}
+       [list-item index type size (get items-arr index) list-size
+        margin-left hole-size hole-radius hole-x hole-y])
+     (when (> list-size 4)
+       [overflow-label (- list-size 3) size transparent? border-radius margin-left])]))

src/quo2/components/messages/gap.cljs

@@ -70,8 +70,8 @@
 ;;;; others
 (defn circle []
   [rn/view
-   {:width         8
-    :height        8
+   {:width         9
+    :height        9
     :border-width  1
     :margin        4
     :flex          0
@@ -88,24 +88,24 @@
    {:on-press on-press}
    [icon/icon "message-gap-info" {:size 12 :no-color true :container-style {:padding 4}}]])
 
-;;;; left/right
-(defn left []
+;;;; timeline/body
+(defn timeline []
   [rn/view {:flex            0
-            :padding-left    11.5
-            :margin-right    20.5
+            :margin-right    20
             :align-items     :center
+            :width           9
             :justify-content :space-between}
    [circle]
    [rn/image {:style {:flex 1} :source (get-image :circles) :resize-mode :repeat}]
    [circle]])
 
-(defn right [timestamp-far timestamp-near chat-id gap-ids on-info-button-pressed]
+(defn body [timestamp-far timestamp-near chat-id gap-ids on-info-button-pressed]
   [rn/view {:flex 1}
    [rn/view
-    {:flex-direction  :row
-     :align-items     :center
-     :justify-content :space-between
-     :margin-right    2}
+    {:flex-direction    :row
+     :align-items       :center
+     :justify-content   :space-between
+     :margin-right      2}
     [timestamp timestamp-far]
     (when on-info-button-pressed [info-button on-info-button-pressed])]
 
@@ -119,7 +119,7 @@
    [timestamp timestamp-near]])
 
 ;;; main
-(defn messages-gap
+(defn gap
   "if `gap-ids` and `chat-id` are provided, press the main text area to fetch messages
   if `on-info-button-pressed` fn is provided, the info button will show up and is pressable"
   [{:keys [timestamp-far
@@ -132,17 +132,19 @@
     (fn []
       [rn/view
        {:on-layout #(reset! body-height (oget % "nativeEvent.layout.height"))
-        :overflow  :hidden}
+        :overflow  :hidden
+        :flex      1}
        [hborder {:type :top}]
        [hborder {:type :bottom}]
        [rn/view (merge {:width            "100%"
                         :background-color (get-color :background)
                         :flex-direction   :row
                         :padding          20
+                        :padding-left     31
                         :margin-vertical  4}
                        style)
 
-        [left]
-        [right timestamp-far timestamp-near chat-id gap-ids on-info-button-pressed]]
+        [timeline]
+        [body timestamp-far timestamp-near chat-id gap-ids on-info-button-pressed]]
        [vborder :left body-height]
        [vborder :right body-height]])))

src/quo2/screens/list_items/preview_lists.cljs

@@ -0,0 +1,50 @@
+(ns quo2.screens.list-items.preview-lists
+  (:require [quo.react-native :as rn]
+            [reagent.core :as reagent]
+            [quo.previews.preview :as preview]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.list-items.preview-list :as quo2]))
+
+(def descriptor [{:label   "Size:"
+                  :key     :size
+                  :type    :select
+                  :options [{:key   32
+                             :value "32"}
+                            {:key   24
+                             :value "24"}
+                            {:key   16
+                             :value "16"}]}
+                 {:label "List Size"
+                  :key   :list-size
+                  :default 10
+                  :type  :text}])
+
+(def user-list-mock
+  [{:full-name "ABC DEF"}
+   {:full-name "GHI JKL"}
+   {:full-name "MNO PQR"}
+   {:full-name "STU VWX"}])
+
+(defn cool-preview []
+  (let [state (reagent/atom {:type      :user
+                             :size      32
+                             :list-size 10})
+        type  (reagent/cursor state [:type])]
+    (fn []
+      [rn/view {:margin-bottom 50
+                :padding       16}
+       [preview/customizer state descriptor]
+       [rn/view {:padding-vertical 60
+                 :align-items      :center}
+        [quo2/preview-list @state
+         ;; Mocked list items
+         (case @type
+           :user user-list-mock)]]])))
+
+(defn preview-preview-lists []
+  [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
+            :flex             1}
+   [rn/flat-list {:flex                      1
+                  :keyboardShouldPersistTaps :always
+                  :header                    [cool-preview]
+                  :key-fn                    str}]])

src/quo2/screens/main.cljs

@@ -27,6 +27,7 @@
             [quo2.screens.tags.status-tags :as status-tags]
             [quo2.screens.tags.token-tag :as token-tag]
             [quo2.screens.wallet.token-overview :as token-overview]
+            [quo2.screens.list-items.preview-lists :as preview-lists]
             [re-frame.core :as re-frame]))
 
 (def screens-categories
@@ -92,7 +93,10 @@
            :component token-tag/preview-token-tag}]
    :wallet [{:name      :token-overview
              :insets    {:top false}
-             :component token-overview/preview-token-overview}]})
+             :component token-overview/preview-token-overview}]
+   :list-items [{:name      :preview-lists
+                 :insets    {:top false}
+                 :component preview-lists/preview-preview-lists}]})
 
 (def screens (flatten (map val screens-categories)))
 

src/quo2/screens/messages/gap.cljs

@@ -2,7 +2,7 @@
   (:require
    [quo.previews.preview :as preview]
    [quo.react-native :as rn]
-   [quo2.components.messages.gap :as quo2]
+   [quo2.components.messages.gap :as gap]
    [reagent.core :as reagent]))
 
 (def descriptor [{:label "Timestamp Far"
@@ -20,7 +20,7 @@
         [preview/customizer state descriptor]]
        [rn/view {:padding-vertical 60
                  :align-items      :center}
-        [quo2/messages-gap @state]]])))
+        [gap/gap @state]]])))
 
 (defn preview-messages-gap []
   [rn/view {:flex 1}