Merge branch 'develop' into issue-13832

doc/STARTING_GUIDE.md

@@ -14,14 +14,25 @@ This step will take a while the first time as it will download all dependencies.
 
 There are three steps necessary to start development, in this case for Android:
 
-1. `make run-clojure` - Compiles Clojure into JavaScript, watches for changes on cljs files, and hot-reloads code in the app
-2. `make run-metro` - Starts metro bundler and watches JavaScript code
-3. `make run-android` - Builds the Android app and starts it on the device
+1. `make run-clojure` - Compiles Clojure into JavaScript, watches for changes on cljs files, and hot-reloads code in the app.
+2. `make run-metro` - Starts metro bundler and watches JavaScript code.
+3. `make run-android` or `make run-ios` - Builds the Android/iOS app and starts it on the device.
 
 The first two will continue watching for changes and keep re-building the app. They need to be ready first.
 The last one will exit once the app is up and ready.
 
-You need to have your emulator or real devices running and visible to adb, before you run `make run-android`.
+## Simulators and Devices
+### Android
+
+You need to have an emulator like [AVD](https://developer.android.com/studio/run/emulator), or [Genymotion](#genymotion-virtualization), or a real device running and visible to [adb](https://developer.android.com/studio/command-line/adb), before you run `make run-android`.
+
+### iOS
+
+You can specify the simulator type by adding the `SIMULATOR` flag:
+```sh
+make run-ios SIMULATOR="iPhone 11 Pro"
+```
+Some manual steps are necesary for [developing on a physical iOS Device](#physical-ios-device).
 
 # Build release
 
@@ -71,3 +82,17 @@ Steps:
 2. [Setup Git to use your GPG key](https://help.github.com/en/github/authenticating-to-github/telling-git-about-your-signing-key)
 3. [Setup Git to sign commits](https://help.github.com/en/github/authenticating-to-github/signing-commits)
 4. [Setup GitHub to validate commits](https://help.github.com/en/github/authenticating-to-github/adding-a-new-gpg-key-to-your-github-account)
+
+## Physical iOS Device
+
+To use a physical iPhone your device UDID must be added to provisioning profiles and your Apple account invited as Developer to Status team.
+
+1. [Get your UDID of your iPhone.](https://www.extentia.com/post/finding-the-udid-of-an-ios-device)
+2. Request from someone with access like @cammellos or @jakubgs to
+  - Add the UDID to development devices on Apple Developer Portal.
+  - Invite your Apple account to be Developer in Status team.
+3. Run a build in XCode using the project from `status-mobile/ios` directory.
+  - You might see error: `Select a development team in the Signing & Capabilities editor`
+  - Select `STATUS HOLDINGS PTE. LTD.` as the development team and rebuild again.
+
+Once build finishes Status should start on your iPhone with its logs in terminal running `make run-metro`.

src/mocks/js_dependencies.cljs

@@ -248,6 +248,8 @@
 
 (def react-native-gradien #js {:default #js {}})
 
+(def masked-view #js {:default #js {}})
+
 (def react-native-permissions #js {:default #js {}})
 
 (def push-notification-ios #js {:default #js {:abandonPermissions identity}})
@@ -308,6 +310,7 @@
     "react-native-device-info" react-native-device-info
     "react-native-push-notification" react-native-push-notification
     "react-native-linear-gradient" react-native-gradien
+    "@react-native-community/masked-view" masked-view
     "react-native-blob-util" react-native-blob-util
     "react-native-navigation" react-native-navigation
     "@react-native-community/push-notification-ios" push-notification-ios

src/quo2/components/avatars/icon_avatar.cljs

@@ -9,9 +9,10 @@
    :small 20})
 
 (defn icon-avatar
-  [{:keys [size icon color]}]
+  [{:keys [size icon color opacity]
+    :or   {opacity 20}}]
   (let [component-size (size sizes)
-        circle-color   (colors/custom-color color 50 20)
+        circle-color   (colors/custom-color color 50 opacity)
         icon-color     (colors/custom-color-by-theme color 50 60)
         icon-size      (case size
                          :big    20
@@ -25,4 +26,4 @@
                       :align-items      :center}}
      [icons/icon icon {:container-style {:width  icon-size
                                          :height icon-size}
-                       :color icon-color}]]))
+                       :color           icon-color}]]))

src/quo2/components/avatars/user_avatar.cljs

@@ -4,8 +4,7 @@
             [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]))
+            [quo.theme :refer [dark?]]))
 
 (def sizes {:big {:outer 80
                   :inner 72
@@ -98,47 +97,46 @@
            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 " ")))
-                   "")
+    :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
+        identicon?           (contains? identicon-sizes size)
+        small?               (contains? small-sizes size)
+        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
+       [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}}]
+     (if profile-picture
+       ;; display image
+       [rn/image {:style  (container-styling inner-dimensions outer-dimensions)
+                  :source profile-picture}]
+       ;; else display initials
        [container inner-dimensions outer-dimensions
         [text/text {:weight :semi-bold
-                    :size font-size
-                    :style {:color colors/white-opa-70}}
+                    :size   font-size
+                    :style  {:color colors/white-opa-70}}
          (upper-case icon-text)]])
      [dot-indicator size status-indicator? online? ring? (dark?)]]))

src/quo2/components/messages/system_message.cljs

@@ -0,0 +1,162 @@
+(ns quo2.components.messages.system-message
+  (:require [status-im.i18n.i18n :as i18n]
+            [quo.react-native :as rn]
+            [status-im.utils.core :as utils]
+            [quo.theme :as theme]
+            [quo2.components.buttons.button :as button]
+            [quo2.components.markdown.text :as text]
+            [quo2.reanimated :as ra]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.avatars.user-avatar :as user-avatar]
+            [quo2.components.avatars.icon-avatar :as icon-avatar]))
+
+(def themes-landed {:pinned  colors/primary-50-opa-5
+                    :added   colors/primary-50-opa-5
+                    :deleted colors/danger-50-opa-5})
+
+(def themes
+  {:light {:text colors/neutral-100
+           :time colors/neutral-50
+           :bg   {:default colors/white
+                  :pressed colors/neutral-5
+                  :landed  themes-landed}}
+   :dark  {:text colors/white
+           :time colors/neutral-40
+           :bg   {:default colors/neutral-90
+                  :pressed colors/neutral-80
+                  :landed  themes-landed}}})
+
+(defn get-color [& keys]
+  (reduce (fn [acc k] (get acc k (reduced acc)))
+          ((theme/get-theme) themes) (vec keys)))
+
+(defn sm-timestamp [timestamp-str]
+  [rn/view {:margin-left 6}
+   [text/text {:size  :label
+               :style {:color          (get-color :time)
+                       :text-transform :none}}
+    timestamp-str]])
+
+(defn sm-icon [{:keys [icon color opacity]}]
+  [rn/view {:align-items  :center
+            :margin-right 8}
+   [icon-avatar/icon-avatar {:size    :medium
+                             :icon    icon
+                             :color   color
+                             :opacity opacity}]])
+
+(defn sm-user-avatar [image]
+  [rn/view {:margin-right 4}
+   [user-avatar/user-avatar {:status-indicator? false
+                             :online?           false
+                             :size              :xxxs
+                             :profile-picture   image
+                             :ring?             false}]])
+
+(defmulti sm-render :type)
+
+(defmethod sm-render :deleted [{:keys [state action timestamp-str]}]
+  [rn/view {:align-items     :center
+            :justify-content :space-between
+            :flex            1
+            :flex-direction  :row}
+   [rn/view {:align-items    :center
+             :flex-direction :row}
+    [sm-icon {:icon    :main-icons/delete16
+              :color   :danger
+              :opacity (if (= state :landed) 0 5)}]
+    [text/text {:size  :paragraph-2
+                :style {:color        (get-color :text)
+                        :margin-right 5}}
+     (i18n/label (if action :message-deleted-for-you :message-deleted))]
+    (when (nil? action) [sm-timestamp timestamp-str])]
+   (when action [button/button {:size   24
+                                :before :main-icons/timeout
+                                :type   :grey} (i18n/label :undo)])])
+
+(defmethod sm-render :added [{:keys [state mentions timestamp-str]}]
+  [rn/view {:align-items    :center
+            :flex-direction :row}
+   [sm-icon {:icon    :main-icons/add-user16
+             :color   :primary
+             :opacity (if (= state :landed) 0 5)}]
+   [sm-user-avatar (:image (first mentions))]
+   [text/text {:weight :semi-bold
+               :size   :paragraph-2}
+    (:name (first mentions))]
+   [text/text {:size  :paragraph-2
+               :style {:color        (get-color :text)
+                       :margin-left  3
+                       :margin-right 3}}
+    (i18n/label :added)]
+   [sm-user-avatar (:image (second mentions))]
+   [text/text {:weight :semi-bold
+               :size   :paragraph-2}
+    (:name (second mentions))]
+   [sm-timestamp timestamp-str]])
+
+(defmethod sm-render :pinned [{:keys [state pinned-by content timestamp-str]}]
+  [rn/view {:flex-direction :row
+            :flex           1
+            :align-items    :center}
+   [sm-icon {:icon    :main-icons/pin16
+             :color   :primary
+             :opacity (if (= state :landed) 0 5)}]
+   [rn/view {:flex-direction :column
+             :flex           1}
+    [rn/view {:align-items    :baseline
+              :flex-direction :row}
+     [text/text {:size   :paragraph-2
+                 :weight :semi-bold
+                 :style  {:color (get-color :text)}}
+      (utils/truncate-str pinned-by 18)]
+     [rn/view {:margin-left  4
+               :margin-right 2}
+      [text/text {:size  :paragraph-2
+                  :style {:color (get-color :text)}}
+       (i18n/label :pinned-a-message)]]
+     [sm-timestamp timestamp-str]]
+    [rn/view {:flex-direction :row}
+     [rn/view {:flex-direction :row
+               :margin-right   4}
+      [sm-user-avatar (:image (:mentions content))]
+      [text/text {:weight :semi-bold
+                  :size   :label}
+       (:name (:mentions content))]]
+     (when (seq (:text content))
+       [rn/view {:margin-right   20
+                 :flex-direction :row
+                 :flex           1}
+        [text/text {:size            :label
+                    :style           {:color (get-color :text)}
+                    :number-of-lines 1
+                    :ellipsize-mode  :tail}
+         (:text content)]])
+     [rn/view {:justify-content :flex-end
+               :flex-direction  :row
+               :min-width       10}
+      (when (seq (:info content))
+        [text/text {:size  :label
+                    :style {:color (get-color :time)}}
+         (utils/truncate-str (:info content) 24)])]]]])
+
+(defn system-message [{:keys [type] :as message}]
+  [:f>
+   (fn []
+     (let [sv-color (ra/use-shared-value (get-color :bg :landed type))]
+       (ra/animate-shared-value-with-delay
+        sv-color (get-color :bg :default type) 0 :linear 1000)
+       [ra/touchable-opacity
+        {:on-press #(ra/set-shared-value
+                     sv-color (get-color :bg :pressed type))
+         :style    (ra/apply-animations-to-style
+                    {:background-color sv-color}
+                    {:flex-direction     :row
+                     :flex               1
+                     :border-radius      16
+                     :padding-vertical   9
+                     :padding-horizontal 11
+                     :width              359
+                     :height             52
+                     :background-color   sv-color})}
+        [sm-render message]]))])