new chat fixes and improvements, sheet modal screen improvements (#15993)

src/quo2/components/buttons/button.cljs

@@ -204,17 +204,13 @@
          (when disabled
            {:opacity 0.3})))
 
-(defn community-themed?
-  [type community-color]
-  (and (= type :community) (string? community-color)))
-
 (defn button
   "with label
    [button opts \"label\"]
    opts
    {:type   :primary/:secondary/:grey/:dark-grey/:outline/:ghost/
             :danger/:photo-bg/:blur-bg/:blur-bg-outline/:shell/:community
-    :size   40/32/24
+    :size   40 [default] /32/24
     :icon   true/false
     :community-color '#FFFFFF'
     :community-text-color '#000000'

src/quo2/components/drawers/action_drawers/style.cljs

@@ -1,11 +1,10 @@
 (ns quo2.components.drawers.action-drawers.style
   (:require [quo2.foundations.colors :as colors]))
 
-(def divider
+(defn divider
+  []
   {:border-top-width 1
-   :border-top-color (colors/theme-colors
+   :border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-90)
-                      colors/neutral-10
-                      colors/neutral-90)
    :margin-top       8
    :margin-bottom    7
    :align-items      :center

src/quo2/components/drawers/action_drawers/view.cljs

@@ -11,9 +11,10 @@
     colors/danger-60
     (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)))
 
-(def divider
+(defn divider
+  []
   [rn/view
-   {:style               style/divider
+   {:style               (style/divider)
     :accessible          true
     :accessibility-label :divider}])
 
@@ -30,7 +31,8 @@
     :as   action-props}]
   (when action-props
     [:<> {:key label}
-     (when add-divider? divider)
+     (when add-divider?
+       [divider])
      [rn/touchable-highlight
       {:accessibility-label accessibility-label
        :style               (style/container sub-label)

src/status_im/events.cljs

@@ -63,7 +63,8 @@
     [react-native.core :as rn]
     [react-native.platform :as platform]
     status-im2.contexts.chat.home.events
-    status-im2.contexts.communities.home.events))
+    status-im2.contexts.communities.home.events
+    status-im.ui.components.invite.events))
 
 (re-frame/reg-fx
  :dismiss-keyboard

src/status_im/ui/components/invite/events.cljs

@@ -11,7 +11,7 @@
    (.share ^js react/sharing (clj->js content))))
 
 (rf/defn share-link
-  {:events [::share-link]}
+  {:events [:invite.events/share-link]}
   [{:keys [db]}]
   (let [{:keys [public-key preferred-name]} (get db :multiaccount)
         profile-link                        (universal-links/generate-link :user

src/status_im/ui/components/invite/views.cljs

@@ -1,13 +1,12 @@
 (ns status-im.ui.components.invite.views
   (:require [quo.core :as quo]
             [re-frame.core :as re-frame]
-            [utils.i18n :as i18n]
+            [utils.i18n :as i18n]))
-            [status-im.ui.components.invite.events :as invite.events]))
 
 (defn button
   []
   [quo/button
-   {:on-press            #(re-frame/dispatch [::invite.events/share-link nil])
+   {:on-press            #(re-frame/dispatch [:invite.events/share-link nil])
     :accessibility-label :invite-friends-button}
    (i18n/label :t/invite-friends)])
 
@@ -21,7 +20,7 @@
     :on-press            (fn []
                            (re-frame/dispatch [:bottom-sheet/hide-old])
                            (js/setTimeout
-                            #(re-frame/dispatch [::invite.events/share-link nil])
+                            #(re-frame/dispatch [:invite.events/share-link nil])
                             250))}])
 
 

src/status_im2/common/bottom_sheet_screen/style.cljs

@@ -22,7 +22,8 @@
     :border-top-left-radius  20
     :border-top-right-radius 20
     :flex                    1
-    :overflow                :hidden}))
+    :overflow                :hidden
+    :padding-top             20}))
 
 (def handle-container
   {:left            0

src/status_im2/common/bottom_sheet_screen/view.cljs

@@ -11,10 +11,10 @@
     [reagent.core :as reagent]
     [utils.re-frame :as rf]))
 
-(def ^:const drag-threshold 100)
+(def ^:const drag-threshold 200)
 
 (defn drag-gesture
-  [translate-y opacity scroll-enabled curr-scroll]
+  [translate-y opacity scroll-enabled curr-scroll close]
   (->
     (gesture/gesture-pan)
     (gesture/on-start (fn [e]
@@ -28,12 +28,10 @@
                              (reanimated/set-shared-value opacity (- 1 (/ progress 5)))))))
     (gesture/on-end (fn [e]
                       (if (> (oops/oget e "translationY") drag-threshold)
+                        (close)
                         (do
-                          (reanimated/set-shared-value opacity (reanimated/with-timing-duration 0 100))
+                          (reanimated/animate translate-y 0 300)
-                          (rf/dispatch [:navigate-back]))
+                          (reanimated/animate opacity 1 300)
-                        (do
-                          (reanimated/set-shared-value opacity (reanimated/with-timing 1))
-                          (reanimated/set-shared-value translate-y (reanimated/with-timing 0))
                           (reset! scroll-enabled true)))))
     (gesture/on-finalize (fn [e]
                            (when (and (>= (oops/oget e "velocityY") 0)
@@ -50,17 +48,20 @@
   (let [scroll-enabled (reagent/atom true)
         curr-scroll    (atom 0)]
     (fn []
-      (let [insets      (safe-area/get-insets)
+      (let [insets           (safe-area/get-insets)
-            padding-top (:top insets)
+            {:keys [height]} (rn/get-window)
-            padding-top (if platform/ios? padding-top (+ padding-top 10))
+            padding-top      (:top insets)
-            opacity     (reanimated/use-shared-value 0)
+            padding-top      (if platform/ios? padding-top (+ padding-top 10))
-            translate-y (reanimated/use-shared-value 0)
+            opacity          (reanimated/use-shared-value 0)
-            close       (fn []
+            translate-y      (reanimated/use-shared-value height)
-                          (reanimated/set-shared-value opacity (reanimated/with-timing-duration 0 100))
+            close            (fn []
-                          (rf/dispatch [:navigate-back]))]
+                               (reanimated/animate translate-y height 300)
+                               (reanimated/animate opacity 0 300)
+                               (rf/dispatch [:navigate-back]))]
         (rn/use-effect
          (fn []
-           (reanimated/animate-delay opacity 1 (if platform/ios? 300 100))))
+           (reanimated/animate translate-y 0 300)
+           (reanimated/animate opacity 1 300)))
         (hooks/use-back-handler close)
         [rn/view
          {:style {:flex        1
@@ -68,7 +69,7 @@
          (when-not skip-background?
            [reanimated/view {:style (style/background opacity)}])
          [gesture/gesture-detector
-          {:gesture (drag-gesture translate-y opacity scroll-enabled curr-scroll)}
+          {:gesture (drag-gesture translate-y opacity scroll-enabled curr-scroll close)}
           [reanimated/view {:style (style/main-view translate-y)}
            [rn/view {:style style/handle-container}
             [rn/view {:style (style/handle)}]]

src/status_im2/common/resources.cljs

@@ -1,4 +1,5 @@
-(ns status-im2.common.resources)
+(ns status-im2.common.resources
+  (:require [quo2.foundations.colors :as colors]))
 
 (def ui
   {:add-new-contact               (js/require "../resources/images/ui2/add-contact.png")
@@ -20,7 +21,9 @@
    :keycard-chip-dark             (js/require "../resources/images/ui2/keycard-chip-dark.png")
    :keycard-watermark             (js/require "../resources/images/ui2/keycard-watermark.png")
    :discover                      (js/require "../resources/images/ui2/discover.png")
-   :invite-friends                (js/require "../resources/images/ui2/invite-friends.png")})
+   :invite-friends                (js/require "../resources/images/ui2/invite-friends.png")
+   :no-contacts-light             (js/require "../resources/images/ui2/no-contacts-light.png")
+   :no-contacts-dark              (js/require "../resources/images/ui2/no-contacts-dark.png")})
 
 (def mock-images
   {:coinbase             (js/require "../resources/images/mock2/coinbase.png")
@@ -62,6 +65,10 @@
   [k]
   (get ui k))
 
+(defn get-themed-image
+  [k k2]
+  (get ui (if (colors/dark?) k k2)))
+
 (defn get-token
   [k]
   (get tokens k))

src/status_im2/contexts/chat/new_chat/styles.cljs

@@ -0,0 +1,22 @@
+(ns status-im2.contexts.chat.new-chat.styles
+  (:require [react-native.safe-area :as safe-area]))
+
+(def contact-selection-heading
+  {:flex-direction  :row
+   :justify-content :space-between
+   :align-items     :flex-end
+   :margin-top      24
+   :margin-bottom   16})
+
+(def chat-button
+  {:position :absolute
+   :bottom   (+ 12 (safe-area/get-bottom))
+   :left     20
+   :right    20})
+
+(defn no-contacts
+  []
+  {:margin-bottom   (+ 96 (safe-area/get-bottom))
+   :flex            1
+   :justify-content :center
+   :align-items     :center})

src/status_im2/contexts/chat/new_chat/view.cljs

@@ -0,0 +1,109 @@
+(ns status-im2.contexts.chat.new-chat.view
+  (:require [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
+            [re-frame.core :as re-frame]
+            [react-native.gesture :as gesture]
+            [status-im2.constants :as constants]
+            [utils.i18n :as i18n]
+            [react-native.core :as rn]
+            [utils.re-frame :as rf]
+            [status-im2.common.contact-list.view :as contact-list]
+            [status-im2.common.resources :as resources]
+            [status-im2.common.contact-list-item.view :as contact-list-item]
+            [status-im2.contexts.chat.new-chat.styles :as style]))
+
+(defn- no-contacts-view
+  []
+  [rn/view
+   {:style (style/no-contacts)}
+   [rn/image {:source (resources/get-themed-image :no-contacts-dark :no-contacts-light)}]
+   [quo/text
+    {:weight :semi-bold
+     :size   :paragraph-1
+     :style  {:margin-bottom 2
+              :margin-top    12}}
+    (i18n/label :t/you-have-no-contacts)]
+   [quo/text
+    {:weight :regular
+     :size   :label}
+    (i18n/label :t/dont-yell-at-me)]
+   [quo/button
+    {:type     :primary
+     :size     32
+     :style    {:margin-top    20
+                :margin-bottom 12}
+     :on-press #(rf/dispatch [:invite.events/share-link])}
+    (i18n/label :t/invite-friends)]
+   [quo/button
+    {:type     :grey
+     :size     32
+     :on-press #(do
+                  (rf/dispatch [:navigate-back])
+                  (rf/dispatch [:open-modal :new-contact]))}
+    (i18n/label :t/add-a-contact)]])
+
+(defn contact-item-render
+  [_]
+  (fn [{:keys [public-key] :as item}]
+    (let [user-selected? (rf/sub [:is-contact-selected? public-key])
+          on-toggle      #(if user-selected?
+                            (re-frame/dispatch [:deselect-contact public-key])
+                            (re-frame/dispatch [:select-contact public-key]))]
+      [contact-list-item/contact-list-item
+       {:on-press  on-toggle
+        :accessory {:type     :checkbox
+                    :checked? user-selected?
+                    :on-check on-toggle}}
+       item])))
+
+(defn view
+  [{:keys [scroll-enabled on-scroll close]}]
+  (let [contacts                          (rf/sub [:contacts/sorted-and-grouped-by-first-letter])
+        selected-contacts-count           (rf/sub [:selected-contacts-count])
+        selected-contacts                 (rf/sub [:group/selected-contacts])
+        one-contact-selected?             (= selected-contacts-count 1)
+        contacts-selected?                (pos? selected-contacts-count)
+        {:keys [primary-name public-key]} (when one-contact-selected?
+                                            (rf/sub [:contacts/contact-by-identity
+                                                     (first selected-contacts)]))]
+    [rn/view {:flex 1}
+     [rn/view {:padding-horizontal 20}
+      [quo/button {:type :grey :size 32 :icon true :on-press close} :i/close]
+      [rn/view {:style style/contact-selection-heading}
+       [quo/text
+        {:weight :semi-bold
+         :size   :heading-1
+         :style  {:color (colors/theme-colors colors/neutral-100 colors/white)}}
+        (i18n/label :t/new-chat)]
+       (when (seq contacts)
+         [quo/text
+          {:size   :paragraph-2
+           :weight :regular
+           :style  {:margin-bottom 2
+                    :color         (colors/theme-colors colors/neutral-40 colors/neutral-50)}}
+          (i18n/label :t/selected-count-from-max
+                      {:selected selected-contacts-count
+                       :max      constants/max-group-chat-participants})])]]
+     (if (empty? contacts)
+       [no-contacts-view]
+       [gesture/section-list
+        {:key-fn                         :title
+         :sticky-section-headers-enabled false
+         :sections                       (rf/sub [:contacts/filtered-active-sections])
+         :render-section-header-fn       contact-list/contacts-section-header
+         :content-container-style        {:padding-bottom 70}
+         :render-fn                      contact-item-render
+         :scroll-enabled                 @scroll-enabled
+         :on-scroll                      on-scroll}])
+     (when contacts-selected?
+       [quo/button
+        {:type                :primary
+         :accessibility-label :next-button
+         :style               style/chat-button
+         :on-press            (fn []
+                                (if one-contact-selected?
+                                  (rf/dispatch [:chat.ui/start-chat public-key])
+                                  (rf/dispatch [:navigate-to :new-group])))}
+        (if one-contact-selected?
+          (i18n/label :t/chat-with {:selected-user primary-name})
+          (i18n/label :t/setup-group-chat))])]))

src/status_im2/contexts/chat/photo_selector/style.cljs

@@ -15,7 +15,7 @@
    :flex-direction  :row
    :left            0
    :right           0
-   :top             20
+   :top             0
    :justify-content :center
    :z-index         1})
 

src/status_im2/contexts/chat/photo_selector/view.cljs

@@ -80,7 +80,7 @@
       (inc (utils/first-index #(= (:uri item) (:uri %)) @selected))])])
 
 (defn album-title
-  [photos? selected temporary-selected insets]
+  [photos? selected temporary-selected insets close]
   (fn []
     (let [selected-album (or (rf/sub [:camera-roll/selected-album]) (i18n/label :t/recent))]
       [rn/touchable-opacity
@@ -94,9 +94,7 @@
                                  (do
                                    (reset! temporary-selected @selected)
                                    (rf/dispatch [:open-modal :album-selector {:insets insets}]))
-                                 (rf/dispatch [:navigate-back])))}
+                                 (close)))}
-
-
        [quo/text
         {:weight          :medium
          :ellipsize-mode  :tail
@@ -108,7 +106,7 @@
          {:color (colors/theme-colors colors/neutral-100 colors/white)}]]])))
 
 (defn photo-selector
-  [{:keys [scroll-enabled on-scroll]}]
+  [{:keys [scroll-enabled on-scroll close]}]
   [:f>
    (let [temporary-selected (reagent/atom [])
          {:keys [insets]}   (rf/sub [:get-screen-params])] ; used when switching albums
@@ -133,7 +131,7 @@
               [rn/view {:style {:flex 1}}
                [rn/view
                 {:style style/buttons-container}
-                [album-title true selected temporary-selected insets]
+                [album-title true selected temporary-selected insets close]
                 [clear-button selected]]
                [gesture/flat-list
                 {:key-fn                  identity

src/status_im2/navigation/core.cljs

@@ -110,7 +110,8 @@
 ;; MODAL
 (defn open-modal
   [comp]
-  (let [{:keys [options]} (get views/screens comp)]
+  (let [{:keys [options]} (get views/screens comp)
+        sheet?            (:sheet? options)]
     (if @state/dissmissing
       (reset! state/dissmissing comp)
       (do
@@ -120,10 +121,10 @@
          {:component
           {:name    comp
            :id      comp
-           :options (merge (options/statusbar-and-navbar)
+           :options (merge (options/default-root)
-                           (options/default-root)
+                           (options/statusbar-and-navbar)
                            options
-                           (when (:sheet? options)
+                           (when sheet?
                              options/sheet-options))}})))))
 
 (re-frame/reg-fx :open-modal-fx open-modal)

src/status_im2/navigation/options.cljs

@@ -53,7 +53,6 @@
        {:statusBar {:style style}})))
   ([] (statusbar nil)))
 
-
 (defn statusbar-and-navbar
   ([dark?]
    (merge (navbar dark?) (statusbar dark?)))
@@ -87,7 +86,9 @@
   {:layout                 {:componentBackgroundColor :transparent
                             :orientation              ["portrait"]
                             :backgroundColor          :transparent}
-   :modalPresentationStyle :overCurrentContext})
+   :modalPresentationStyle :overCurrentContext
+   :animations             {:showModal    {:alpha {:from 1 :to 1 :duration 300}}
+                            :dismissModal {:alpha {:from 1 :to 1 :duration 300}}}})
 
 (def lightbox
   {:topBar        {:visible false}

src/status_im2/navigation/screens.cljs

@@ -33,7 +33,8 @@
     [status-im2.contexts.syncing.setup-syncing.view :as settings-setup-syncing]
     [status-im2.contexts.share.view :as share]
     [status-im2.contexts.onboarding.syncing.results.view :as syncing-results]
-    [status-im2.contexts.onboarding.syncing.progress.view :as syncing-devices]))
+    [status-im2.contexts.onboarding.syncing.progress.view :as syncing-devices]
+    [status-im2.contexts.chat.new-chat.view :as new-chat]))
 
 (defn screens
   []
@@ -55,6 +56,10 @@
      :options   {:insets {:top? true}}
      :component chat/chat}
 
+    {:name      :start-a-new-chat
+     :options   {:sheet? true}
+     :component new-chat/view}
+
     {:name      :group-add-manage-members
      :options   {:sheet? true}
      :component group-details/add-manage-members}

translations/en.json

@@ -2174,5 +2174,6 @@
     "you-hold-number-of-hold-tokens-of-these": "You hold {{number-of-hold-tokens}} of these:",
     "token-gated-communities": "Token gated communities",
     "read-more": "Read more",
-    "token-gated-communities-info": "Here will be something relevant about this topic. This will help the user get more context and therefore have a better understanding of it."
+    "token-gated-communities-info": "Here will be something relevant about this topic. This will help the user get more context and therefore have a better understanding of it.",
+    "dont-yell-at-me": "Don’t yell at me"
 }