2-pane UI implementation

clj-rn.conf.edn

@@ -44,6 +44,7 @@
               "text-encoding"
               "js-sha3"
               "react-navigation"
+              "react-native-navigation-twopane"
               "hi-base32"
               "react-native-mail"
               "react-native-shake"]

mobile_files/package.json.orig

@@ -65,6 +65,7 @@
     "react-native-udp": "git+https://github.com/status-im/react-native-udp.git#v2.3.1-1-status",
     "react-native-webview": "^5.2.1",
     "react-native-webview-bridge": "git+https://github.com/status-im/react-native-webview-bridge.git#fix/classnames-colision",
+    "react-native-navigation-twopane": "git+https://github.com/status-im/react-native-navigation-twopane.git#v0.0.1-status",
     "react-navigation": "^3.11.0",
     "realm": "2.28.1",
     "rn-snoopy": "git+https://github.com/status-im/rn-snoopy.git#v2.0.2-status",

mobile_files/yarn.lock

@@ -5568,6 +5568,10 @@ react-native-languages@^3.0.2:
   version "3.0.7"
   resolved "git+https://github.com/status-im/react-native-mail.git#5dd2d4e92fa696a9dd0efebdc530df22772326fe"
 
+"react-native-navigation-twopane@git+https://github.com/status-im/react-native-navigation-twopane.git#v0.0.1-status":
+  version "0.0.1"
+  resolved "git+https://github.com/status-im/react-native-navigation-twopane.git#5977354279e11ff82ff7cf55d52714d55af0a7d5"
+
 "react-native-os@git+https://github.com/status-im/react-native-os.git#v1.1.0-1-status":
   version "1.1.0"
   resolved "git+https://github.com/status-im/react-native-os.git#1a6d0835f919cb075793ad7c602f2724eee4702d"

react-native/src/mobile/status_im/react_native/js_dependencies.cljs

@@ -33,6 +33,7 @@
 (def background-timer-class (js-require/js-require "react-native-background-timer"))
 (defn background-timer []   (.-default (background-timer-class)))
 (def react-navigation       (js/require "react-navigation"))
+(def react-native-navigation-twopane  (js/require "react-native-navigation-twopane"))
 (def react-native-shake     (js-require/js-require "react-native-shake"))
 (def mail-class             (js-require/js-require  "react-native-mail"))
 (defn react-native-mail []  (.-default (mail-class)))

src/status_im/constants.cljs

@@ -24,6 +24,8 @@
 (def default-number-of-messages 20)
 (def blocks-per-hour 120)
 (def one-earth-day 86400)
+(def two-pane-min-width 640)
+(def left-pane-min-width 320)
 
 (def mailserver-password "status-offline-inbox")
 

src/status_im/ui/screens/chat/views.cljs

@@ -465,3 +465,8 @@
 
 (defview chat-modal []
   [chat-root true])
+
+(defview select-chat []
+  [react/view {:style {:align-items :center :justify-content :center :flex 1}}
+   [react/text {:style style/decline-chat}
+    (i18n/label :t/select-chat)]])

src/status_im/ui/screens/home/views.cljs

@@ -15,7 +15,8 @@
             [status-im.ui.components.bottom-bar.styles :as tabs.styles]
             [status-im.ui.screens.home.views.inner-item :as inner-item]
             [status-im.ui.components.common.common :as components.common]
-            [status-im.ui.components.list-selection :as list-selection])
+            [status-im.ui.components.list-selection :as list-selection]
+            [status-im.constants :as constants])
   (:require-macros [status-im.utils.views :as views]))
 
 (views/defview les-debug-info []
@@ -111,39 +112,44 @@
          [icons/icon :main-icons/add {:color :white}])]]]))
 
 (views/defview home [loading?]
-  (views/letsubs [{:keys [search-filter chats all-home-items]} [:home-items]]
+  (views/letsubs [{:keys [search-filter chats all-home-items]} [:home-items]
+                  window-width [:dimensions/window-width]]
+
     {:component-did-mount (fn [this]
                             (let [[_ loading?] (.. this -props -argv)]
                               (when loading? (utils/set-timeout #(re-frame/dispatch [:init-rest-of-chats]) 100))))}
-    [react/view {:flex 1}
-     [status-bar/status-bar {:type :main}]
-     [react/keyboard-avoiding-view {:style     {:flex 1
-                                                :align-items :center}
-                                    :on-layout (fn [e]
-                                                 (re-frame/dispatch
-                                                  [:set-once :content-layout-height
-                                                   (-> e .-nativeEvent .-layout .-height)]))}
-      [react/view {:style {:flex       1
-                           :align-self :stretch}}
-       [toolbar/toolbar nil nil [toolbar/content-title (i18n/label :t/chat)]]
-       [les-debug-info]
-       (cond loading?
-             [react/view {:style {:flex            1
-                                  :justify-content :center
-                                  :align-items     :center}}
-              [connectivity/connectivity-view]
-              [react/activity-indicator {:flex      1
-                                         :animating true}]]
+    (let [home-width (if (> window-width constants/two-pane-min-width)
+                       (max constants/left-pane-min-width (/ window-width 3))
+                       window-width)]
+      [react/view {:flex 1 :width home-width}
+       [status-bar/status-bar {:type :main}]
+       [react/keyboard-avoiding-view {:style     {:flex 1
+                                                  :align-items :center}
+                                      :on-layout (fn [e]
+                                                   (re-frame/dispatch
+                                                    [:set-once :content-layout-height
+                                                     (-> e .-nativeEvent .-layout .-height)]))}
+        [react/view {:style {:flex       1
+                             :align-self :stretch}}
+         [toolbar/toolbar nil nil [toolbar/content-title (i18n/label :t/chat)]]
+         [les-debug-info]
+         (cond loading?
+               [react/view {:style {:flex            1
+                                    :justify-content :center
+                                    :align-items     :center}}
+                [connectivity/connectivity-view]
+                [react/activity-indicator {:flex      1
+                                           :animating true}]]
 
-             :else
-             [react/view {:style {:flex 1}}
-              [connectivity/connectivity-view]
-              [filter.views/animated-search-input search-filter]
-              (if (and (not search-filter)
-                       (empty? all-home-items))
-                [home-empty-view]
-                [home-items-view search-filter chats all-home-items])])]
-      [home-action-button]]]))
+               :else
+               [react/view {:style {:flex 1}}
+                [connectivity/connectivity-view]
+                [filter.views/animated-search-input search-filter]
+                (if (and (not search-filter)
+                         (empty? all-home-items))
+                  [home-empty-view]
+                  [home-items-view search-filter chats all-home-items])])]
+        [home-action-button]]])))
 
 (views/defview home-wrapper []
   (views/letsubs [loading? [:chats/loading?]]

src/status_im/ui/screens/routing/chat_stack.cljs

@@ -4,6 +4,7 @@
   {:name    :chat-stack
    :screens [:home
              :chat
+             :select-chat
              :profile
              :new
              :new-chat
@@ -17,4 +18,5 @@
              :new-public-chat
              :stickers
              :stickers-pack]
-   :config  {:initialRouteName :home}})
+   :config  {:initialRouteName :home
+             :emptyRightPaneName :select-chat}})

src/status_im/ui/screens/routing/core.cljs

@@ -135,6 +135,27 @@
                                        (bottom-bar/minimize-bar route-name)))))}
            (prepare-config config)))))
 
+(defn twopane-navigator [routes config]
+  (navigation/twopane-navigator
+   routes
+   (cond->
+    (merge {:headerMode        "none"
+            :cardStyle         {:backgroundColor (when (or platform/ios? platform/desktop?) :white)}
+            :onTransitionStart (fn [n]
+                                 (let [idx    (.. n
+                                                  -navigation
+                                                  -state
+                                                  -index)
+                                       routes (.. n
+                                                  -navigation
+                                                  -state
+                                                  -routes)]
+                                   (when (and (array? routes) (int? idx))
+                                     (let [route      (aget routes idx)
+                                           route-name (keyword (.-routeName route))]
+                                       (bottom-bar/minimize-bar route-name)))))}
+           (prepare-config config)))))
+
 (defn switch-navigator [routes config]
   (nav-reagent/switch-navigator
    routes
@@ -147,7 +168,7 @@
 
 (declare stack-screens)
 
-(defn build-screen [screen]
+(defn build-screen [navigator screen]
   "Builds screen from specified configuration. Currently screen can be
   - keyword, which points to some specific route
   - vector of [:modal :screen-key] type when screen should be wrapped as modal
@@ -162,8 +183,8 @@
     (let [res (cond
                 (map? screen-config)
                 (let [{:keys [screens config]} screen-config]
-                  (stack-navigator
-                   (stack-screens screens)
+                  (navigator
+                   (stack-screens navigator screens)
                    config))
 
                 (vector? screen-config)
@@ -178,9 +199,9 @@
                      (assoc :navigationOptions
                             (:navigation screen-config)))])))
 
-(defn stack-screens [screens-map]
+(defn stack-screens [navigator screens-map]
   (->> screens-map
-       (map build-screen)
+       (map (partial build-screen navigator))
        (into {})))
 
 (defn wrap-bottom-bar
@@ -190,28 +211,28 @@
 (defn app-container [navigator]
   (.createAppContainer js-dependencies/react-navigation navigator))
 
-(defn get-main-component [view-id]
+(defn get-main-component [view-id two-pane?]
   (log/debug :component view-id)
   (app-container
    (switch-navigator
     (into {}
-          [(build-screen (intro-login-stack/login-stack view-id))
-           (build-screen (intro-login-stack/intro-stack))
+          [(build-screen stack-navigator (intro-login-stack/login-stack view-id))
+           (build-screen stack-navigator (intro-login-stack/intro-stack))
            [:tabs-and-modals
             {:screen
              (stack-navigator
               (merge
                {:tabs
                 {:screen (tab-navigator
-                          (->> [(build-screen chat-stack/chat-stack)
-                                (build-screen browser-stack/browser-stack)
-                                (build-screen wallet-stack/wallet-stack)
-                                (build-screen profile-stack/profile-stack)]
+                          (->> [(build-screen (if two-pane? twopane-navigator stack-navigator) chat-stack/chat-stack)
+                                (build-screen stack-navigator browser-stack/browser-stack)
+                                (build-screen stack-navigator wallet-stack/wallet-stack)
+                                (build-screen stack-navigator profile-stack/profile-stack)]
                                (into {}))
                           {:initialRouteName :chat-stack
                            :tabBarComponent  (reagent.core/reactify-component
                                               wrap-bottom-bar)})}}
-               (stack-screens modals/modal-screens))
+               (stack-screens stack-navigator modals/modal-screens))
               {:mode              :modal
                :initialRouteName  :tabs
                :onTransitionStart (fn [])})}]])

src/status_im/ui/screens/routing/screens.cljs

@@ -83,6 +83,7 @@
    :hardwallet-success               hardwallet.success/hardwallet-success
    :home                             home/home-wrapper
    :chat                             chat/chat
+   :select-chat                      chat/select-chat
    :profile                          profile.contact/profile
    :new                              add-new/add-new
    :new-chat                         new-chat/new-chat

src/status_im/ui/screens/views.cljs

@@ -15,6 +15,8 @@
             [status-im.ui.screens.home.sheet.views :as home.sheet]
             [status-im.ui.screens.routing.core :as routing]
             [status-im.ui.screens.signing.views :as signing]
+            [status-im.utils.dimensions :as dimensions]
+            [status-im.constants :as constants]
             status-im.ui.screens.wallet.collectibles.etheremon.views
             status-im.ui.screens.wallet.collectibles.cryptostrikers.views
             status-im.ui.screens.wallet.collectibles.cryptokitties.views
@@ -53,6 +55,24 @@
 
       [bottom-sheet/bottom-sheet opts])))
 
+(defn dimensions-fit-two-pane? [dimensions]
+  (let [width (get dimensions :width)]
+    (>= width constants/two-pane-min-width)))
+
+(defn reset-component [view-id component two-pane?]
+  (when-not @initial-view-id
+    (reset! initial-view-id @view-id))
+  (when (and @initial-view-id
+             (or
+              js/goog.DEBUG
+              (not @component)))
+    (do
+      (reset! component (routing/get-main-component
+                         (if js/goog.DEBUG
+                           @initial-view-id
+                           @view-id)
+                         two-pane?)))))
+
 (defonce state (atom nil))
 
 (defn persist-state [state-obj]
@@ -68,35 +88,27 @@
 
 (defn main []
   (let [view-id        (re-frame/subscribe [:view-id])
-        main-component (atom nil)]
+        main-component (atom nil)
+        main-component-two-pane (atom nil)
+        two-pane? (reagent/atom (dimensions-fit-two-pane? (dimensions/window)))]
     (reagent/create-class
      {:component-did-mount
       (fn []
         (log/debug :main-component-did-mount @view-id)
         (utils.universal-links/initialize))
       :component-will-mount
       (fn []
-        (when-not @initial-view-id
-          (reset! initial-view-id @view-id))
-        (when (and @initial-view-id
-                   (or
-                    js/goog.DEBUG
-                    (not @main-component)))
-          (reset! main-component (routing/get-main-component
-                                  (if js/goog.DEBUG
-                                    @initial-view-id
-                                    @view-id)))))
+        (.addEventListener (react/dimensions)
+                           "change"
+                           #(reset! two-pane? (dimensions-fit-two-pane? (:window (js->clj % :keywordize-keys true)))))
+        (reset-component view-id main-component false)
+        (reset-component view-id main-component-two-pane true))
       :component-will-unmount
       utils.universal-links/finalize
       :component-will-update
       (fn []
-        (when-not @initial-view-id
-          (reset! initial-view-id @view-id))
-        (when (and @initial-view-id (not @main-component))
-          (reset! main-component (routing/get-main-component
-                                  (if js/goog.DEBUG
-                                    @initial-view-id
-                                    @view-id))))
+        (reset-component view-id main-component false)
+        (reset-component view-id main-component-two-pane true)
         (when-not platform/desktop?
           (react/dismiss-keyboard!)))
       :component-did-update
@@ -106,7 +118,7 @@
       (fn []
         (when (and @view-id main-component)
           [react/view {:flex 1}
-           [:> @main-component
+           [:> (if @two-pane? @main-component-two-pane @main-component)
             {:ref                    (fn [r]
                                        (navigation/set-navigator-ref r)
                                        (when (and
@@ -118,4 +130,4 @@
              :persistNavigationState (when js/goog.DEBUG persist-state)
              :loadNavigationState    (when js/goog.DEBUG load-state)}]
            [signing/signing]
-           [bottom-sheet]]))})))
+           [bottom-sheet]]))})))

src/status_im/utils/dimensions.cljs

@@ -1,11 +1,15 @@
 (ns status-im.utils.dimensions
   (:require [re-frame.core :as re-frame]
-            [status-im.ui.components.react :as react]))
+            [status-im.ui.components.react :as react]
+            [taoensso.timbre :as log]))
+
+(declare window)
 
 (defn add-event-listener []
   (.addEventListener (react/dimensions)
                      "change"
-                     #(re-frame/dispatch [:update-window-dimensions %])))
+                     #(do
+                        (re-frame/dispatch [:update-window-dimensions %]))))
 
 (defn window
   ([]

src/status_im/utils/navigation.cljs

@@ -1,6 +1,7 @@
 (ns status-im.utils.navigation
   (:require [status-im.react-native.js-dependencies :as js-dependencies]
-            [status-im.utils.platform :as platform]))
+            [status-im.utils.platform :as platform]
+            [goog.object :as gobj]))
 
 (def navigation-actions
   (.-NavigationActions js-dependencies/react-navigation))
@@ -46,3 +47,8 @@
     (.dispatch
      @navigator-ref
      (.back navigation-actions))))
+
+(defonce TwoPaneNavigator (gobj/get js-dependencies/react-native-navigation-twopane #js ["createTwoPaneNavigator"]))
+
+(defn twopane-navigator [routeConfigs stackNavigatorConfig]
+  (TwoPaneNavigator (clj->js routeConfigs) (clj->js stackNavigatorConfig)))

translations/en.json

@@ -1075,6 +1075,7 @@
     "network-fee" : "Network fee",
     "sign-with-password" : "Sign with password",
     "signing-a-message" : "Signing a message",
+    "select-chat" : "Select chat to start messaging",
     "etherscan-lookup": "Look up on Etherscan",
     "retry":  "Retry",
     "ens-deposit": "Deposit",