2-pane UI implementation

status-im · Jun 21, 2019 · 0754f96 · 0754f96
1 parent 3973ebd
commit 0754f96
Show file tree

Hide file tree

Showing 14 changed files with 182 additions and 102 deletions.
diff --git a/clj-rn.conf.edn b/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"]

diff --git a/mobile_files/package.json.orig b/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",

diff --git a/mobile_files/yarn.lock b/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"

diff --git a/react-native/src/mobile/status_im/react_native/js_dependencies.cljs b/react-native/src/mobile/status_im/react_native/js_dependencies.cljs
@@ -1,42 +1,44 @@
 (ns status-im.react-native.js-dependencies
   (:require-macros [status-im.utils.js-require :as js-require]))
 
-(def config                 (js-require/js-require "react-native-config"))
-(def fs                     (js-require/js-require "react-native-fs"))
-(def http-bridge            (js-require/js-require "react-native-http-bridge"))
-(def keychain               (js-require/js-require "react-native-keychain"))
-(def qr-code                (js-require/js-require "react-native-qrcode"))
-(def react-native           (js/require "react-native"))
-(def status-keycard         (js-require/js-require "react-native-status-keycard"))
-(def realm                  (js/require "realm"))
-(def webview-bridge         (js-require/js-require "react-native-webview-bridge"))
-(def touchid-class          (js-require/js-require "react-native-touch-id"))
-(defn touchid []            (.-default (touchid-class)))
-(def webview                (js-require/js-require "react-native-webview"))
-(def securerandom           (js-require/js-require "react-native-securerandom"))
-(defn secure-random []      (.-generateSecureRandom (securerandom)))
-(def fetch-polyfill         (js-require/js-require "react-native-fetch-polyfill"))
-(defn fetch []              (.-default (fetch-polyfill)))
-(def i18n                   (js/require "i18n-js"))
-(def react-native-languages (.-default (js/require "react-native-languages")))
-(def camera                 (js-require/js-require "react-native-camera"))
-(def dialogs                (js-require/js-require "react-native-dialogs"))
-(def dismiss-keyboard       (js-require/js-require "dismissKeyboard"))
-(def image-crop-picker      (js-require/js-require "react-native-image-crop-picker"))
-(def image-resizer          (js-require/js-require "react-native-image-resizer"))
-(def svg                    (js/require "react-native-svg"))
-(def react-native-firebase  (js-require/js-require "react-native-firebase"))
-(def snoopy                 (js-require/js-require "rn-snoopy"))
-(def snoopy-filter          (js-require/js-require "rn-snoopy/stream/filter"))
-(def snoopy-bars            (js-require/js-require "rn-snoopy/stream/bars"))
-(def snoopy-buffer          (js-require/js-require "rn-snoopy/stream/buffer"))
-(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-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)))
-(def desktop-linking        #js {:addEventListener (fn [])})
-(def desktop-menu           #js {:addEventListener (fn [])})
-(def desktop-config         #js {:addEventListener (fn [])})
-(def desktop-shortcuts      #js {:addEventListener (fn [])})
+(def config                           (js-require/js-require "react-native-config"))
+(def fs                               (js-require/js-require "react-native-fs"))
+(def http-bridge                      (js-require/js-require "react-native-http-bridge"))
+(def keychain                         (js-require/js-require "react-native-keychain"))
+(def qr-code                          (js-require/js-require "react-native-qrcode"))
+(def react-native                     (js/require "react-native"))
+(def status-keycard                   (js-require/js-require "react-native-status-keycard"))
+(def realm                            (js/require "realm"))
+(def webview-bridge                   (js-require/js-require "react-native-webview-bridge"))
+(def touchid-class                    (js-require/js-require "react-native-touch-id"))
+(defn touchid []                      (.-default (touchid-class)))
+(def webview                          (js-require/js-require "react-native-webview"))
+(def securerandom                     (js-require/js-require "react-native-securerandom"))
+(defn secure-random []                (.-generateSecureRandom (securerandom)))
+(def fetch-polyfill                   (js-require/js-require "react-native-fetch-polyfill"))
+(defn fetch []                        (.-default (fetch-polyfill)))
+(def i18n                             (js/require "i18n-js"))
+(def react-native-languages           (.-default (js/require "react-native-languages")))
+(def camera                           (js-require/js-require "react-native-camera"))
+(def dialogs                          (js-require/js-require "react-native-dialogs"))
+(def dismiss-keyboard                 (js-require/js-require "dismissKeyboard"))
+(def image-crop-picker                (js-require/js-require "react-native-image-crop-picker"))
+(def image-resizer                    (js-require/js-require "react-native-image-resizer"))
+(def svg                              (js/require "react-native-svg"))
+(def react-native-firebase            (js-require/js-require "react-native-firebase"))
+(def snoopy                           (js-require/js-require "rn-snoopy"))
+(def snoopy-filter                    (js-require/js-require "rn-snoopy/stream/filter"))
+(def snoopy-bars                      (js-require/js-require "rn-snoopy/stream/bars"))
+(def snoopy-buffer                    (js-require/js-require "rn-snoopy/stream/buffer"))
+(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)))
+(def desktop-linking                  #js {:addEventListener (fn [])})
+(def desktop-menu                     #js {:addEventListener (fn [])})
+(def desktop-config                   #js {:addEventListener (fn [])})
+(def desktop-shortcuts                #js {:addEventListener (fn [])})
+
diff --git a/src/status_im/constants.cljs b/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")
 

diff --git a/src/status_im/ui/screens/chat/views.cljs b/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)]])
diff --git a/src/status_im/ui/screens/home/views.cljs b/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?]]

diff --git a/src/status_im/ui/screens/routing/chat_stack.cljs b/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}})
diff --git a/src/status_im/ui/screens/routing/core.cljs b/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 [])})}]])

diff --git a/src/status_im/ui/screens/routing/screens.cljs b/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