2-pane UI implementation

clj-rn.conf.edn

@@ -45,6 +45,7 @@
               "text-encoding"
               "js-sha3"
               "react-navigation"
+              "react-native-navigation-twopane"
               "hi-base32"
               "react-native-mail"
               "react-native-shake"]
@@ -87,6 +88,7 @@
                    "js-sha3"
                    "web3-utils"
                    "react-navigation"
+                   "react-native-navigation-twopane"
                    "hi-base32"]
 
  ;; Resoures

desktop_files/package.json.orig

@@ -91,6 +91,7 @@
     "react-native-tcp": "3.3.0",
     "react-native-udp": "2.2.1",
     "react-native-webview-bridge": "git+https://github.com/status-im/react-native-webview-bridge.git#0.33.16-status-rn049-desktop",
+    "react-native-navigation-twopane": "git+https://github.com/status-im/react-native-navigation-twopane.git#v0.0.2-status",
     "react-navigation": "^2.12.1",
     "realm": "git+https://github.com/status-im/realm-js.git#v2.20.1",
     "rn-snoopy": "git+https://github.com/status-im/rn-snoopy.git#v2.0.2-status",

desktop_files/yarn.lock

@@ -7146,6 +7146,10 @@ react-native-invertible-scroll-view@1.1.0:
   version "3.0.2"
   resolved "git+https://github.com/status-im/react-native-languages.git#60338ff3040b8af68d33233aebeb36db4d31aed0"
 
+"react-native-navigation-twopane@git+https://github.com/status-im/react-native-navigation-twopane.git#v0.0.2-status":
+  version "0.0.2"
+  resolved "git+https://github.com/status-im/react-native-navigation-twopane.git#04ed5fddfb46a6a3ee30776987acb4d3b11c27d4"
+
 react-native-os@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/react-native-os/-/react-native-os-1.1.0.tgz#bfbe1c44d8a5b14a6f3a3a405d8ada6f547a516e"

mobile_files/package.json.orig

@@ -66,6 +66,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.2-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

@@ -5619,6 +5619,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.2-status":
+  version "0.0.2"
+  resolved "git+https://github.com/status-im/react-native-navigation-twopane.git#04ed5fddfb46a6a3ee30776987acb4d3b11c27d4"
+
 "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/desktop/status_im/react_native/js_dependencies.cljs

@@ -36,5 +36,6 @@
 (def snoopy-buffer          (fn [] #js {}))
 (def background-timer       (fn [] #js {:setTimeout (fn [cb ms] (js/setTimeout cb ms))}))
 (def react-navigation       (js/require "react-navigation"))
+(def react-native-navigation-twopane  (js/require "react-native-navigation-twopane"))
 (def react-native-shake     (fn [] #js {}))
 (def react-native-mail      (fn [] #js {:mail (fn [])}))

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

@@ -34,6 +34,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 react-native-screens   (js-require/js-require "react-native-screens"))
 (def mail-class             (js-require/js-require  "react-native-mail"))

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/events.cljs

@@ -804,6 +804,18 @@
                                            current-param-position
                                            value))))
 
+(defn- mark-messages-seen
+  [{:keys [db] :as cofx}]
+  (let [{:keys [current-chat-id]} db]
+    (chat/mark-messages-seen cofx current-chat-id)))
+
+(handlers/register-handler-fx
+ :chat.ui/mark-messages-seen
+ (fn [{:keys [db] :as cofx} [_ view-id]]
+   (fx/merge cofx
+             {:db (assoc db :view-id view-id)}
+             #(mark-messages-seen %))))
+
 (handlers/register-handler-fx
  :chat/send-plain-text-message
  (fn [{{:keys [current-chat-id]} :db :as cofx} [_ message-text]]

src/status_im/subs.cljs

@@ -58,6 +58,7 @@
 (reg-root-key-sub :view-id :view-id)
 (reg-root-key-sub :navigation-stack :navigation-stack)
 (reg-root-key-sub :screen-params :navigation/screen-params)
+(reg-root-key-sub :two-pane-ui-enabled? :two-pane-ui-enabled?)
 
 ;;bottom sheet
 (reg-root-key-sub :bottom-sheet/show? :bottom-sheet/show?)

src/status_im/ui/components/connectivity/view.cljs

@@ -150,13 +150,14 @@
 (defview connectivity-view [anim-translate-y]
   (letsubs [status-properties [:connectivity/status-properties]
             view-id           [:view-id]
-            window-width      [:dimensions/window-width]]
+            window-width (reagent/atom 0)]
     (let [{:keys [loading-indicator?]} status-properties]
-      [react/view {:style {:align-self :flex-start}}
+      [react/view {:style {:align-items :stretch}
+                   :on-layout #(reset! window-width (-> % .-nativeEvent .-layout .-width))}
        (when loading-indicator?
-         [loading-indicator window-width])
+         [loading-indicator @window-width])
        [connectivity-status
         (merge status-properties
                {:view-id      view-id
-                :window-width window-width})
+                :window-width @window-width})
         anim-translate-y]])))

src/status_im/ui/screens/add_new/new_public_chat/view.cljs

@@ -18,6 +18,10 @@
    [status-im.utils.slurp :refer [slurp]]
    [status-im.utils.views :as views]))
 
+(defn- start-chat [topic]
+  (re-frame/dispatch [:chat.ui/start-public-chat topic {:navigation-reset? true}])
+  (re-frame/dispatch [:set :public-group-topic nil]))
+
 (defn- chat-name-input [topic error]
   [react/view
    [react/view (merge add-new.styles/input-container {:margin-top 8})
@@ -26,8 +30,7 @@
      [text-input.view/text-input-with-label
       {:container           styles/input-container
        :on-change-text      #(re-frame/dispatch [:set :public-group-topic %])
-       :on-submit-editing   #(when (db/valid-topic? topic)
-                               (re-frame/dispatch [:chat.ui/start-public-chat topic {:navigation-reset? true}]))
+       :on-submit-editing   #(when (db/valid-topic? topic) (start-chat topic))
        :auto-capitalize     :none
        :auto-focus          false
        :accessibility-label :chat-name-input
@@ -43,9 +46,7 @@
     (first topic)]])
 
 (defn- render-topic [topic]
-  [react/touchable-highlight {:on-press            #(re-frame/dispatch [:chat.ui/start-public-chat
-                                                                        topic
-                                                                        {:navigation-reset? true}])
+  [react/touchable-highlight {:on-press            #(start-chat topic)
                               :accessibility-label :chat-item}
    [react/view
     [list/item

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

@@ -78,7 +78,8 @@
 
 (defview stickers-paging-panel [installed-packs selected-pack]
   (letsubs [ref          (atom nil)
-            window-width [:dimensions/window-width]]
+            window-width [:dimensions/window-width]
+            content-width (reagent/atom 0)]
     {:component-will-update (fn [_ [_ installed-packs selected-pack]]
                               (update-scroll-position @ref installed-packs selected-pack window-width))
      :component-did-mount   #(update-scroll-position @ref installed-packs selected-pack window-width)}
@@ -87,12 +88,13 @@
                         :shows-horizontal-scroll-indicator false
                         :on-momentum-scroll-end            #(on-scroll % installed-packs window-width)
                         :scrollEventThrottle               8
-                        :on-scroll                         #(reset! scroll-x (.-nativeEvent.contentOffset.x %))}
+                        :on-scroll                         #(reset! scroll-x (.-nativeEvent.contentOffset.x %))
+                        :on-layout #(reset! content-width (-> % .-nativeEvent .-layout .-width))}
      ^{:key "recent"}
-     [recent-stickers-panel window-width]
+     [recent-stickers-panel @content-width]
      (for [{:keys [stickers id]} installed-packs]
        ^{:key (str "sticker" id)}
-       [stickers-panel (map #(assoc % :pack id) stickers) window-width])]))
+       [stickers-panel (map #(assoc % :pack id) stickers) @content-width])]))
 
 (defn pack-icon [{:keys [id on-press background-color]
                   :or   {on-press #(re-frame/dispatch [:stickers/select-pack id])}}

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

@@ -431,7 +431,8 @@
             current-chat-id       [:chats/current-chat-id]
             show-message-options? [:chats/current-chat-ui-prop :show-message-options?]
             show-stickers?        [:chats/current-chat-ui-prop :show-stickers?]
-            anim-translate-y      (animation/create-value -35)]
+            two-pane-ui-enabled?  [:two-pane-ui-enabled?]
+            anim-translate-y      (animation/create-value (if two-pane-ui-enabled? 0 -35))]
     ;; this check of current-chat-id is necessary only because in a fresh public chat creation sometimes
     ;; this component renders before current-chat-id is set to current chat-id. Hence further down in sub
     ;; components (e.g. chat-toolbar) there can be a brief visual inconsistancy like showing 'add contact'
@@ -448,7 +449,8 @@
                     :on-layout (fn [e]
                                  (re-frame/dispatch [:set :layout-height (-> e .-nativeEvent .-layout .-height)]))}
         [chat-toolbar current-chat public? modal?]
-        [connectivity/connectivity-view anim-translate-y]
+        (when-not two-pane-ui-enabled?
+          [connectivity/connectivity-view anim-translate-y])
         [connectivity/connectivity-animation-wrapper
          {}
          anim-translate-y
@@ -469,3 +471,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/db.cljs

@@ -68,7 +68,8 @@
                                                                    :current      []
                                                                    :puk          []
                                                                    :enter-step   :original}}
-             :chats/loading?                     true})
+             :chats/loading?                     true
+             :two-pane-ui-enabled?               (dimensions/fit-two-pane?)})
 
 ;;;;GLOBAL
 
@@ -151,6 +152,7 @@
 (spec/def :desktop/desktop (spec/nilable any?))
 (spec/def ::tooltips (spec/nilable any?))
 (spec/def ::initial-props (spec/nilable any?))
+(spec/def ::two-pane-ui-enabled? (spec/nilable boolean?))
 
 ;;;;NETWORK
 
@@ -352,4 +354,5 @@
                                    ::collectible
                                    ::collectibles
                                    ::extensions-store
-                                   :registry/registry]))
+                                   :registry/registry
+                                   ::two-pane-ui-enabled?]))

src/status_im/ui/screens/events.cljs

@@ -65,11 +65,6 @@
  :http-post
  http-post)
 
-(defn- mark-messages-seen
-  [{:keys [db] :as cofx}]
-  (let [{:keys [current-chat-id]} db]
-    (chat/mark-messages-seen cofx current-chat-id)))
-
 (defn- http-raw-post [{:keys [url body response-validator success-event-creator failure-event-creator timeout-ms opts]}]
   (let [on-success #(re-frame/dispatch (success-event-creator %))
         on-error   (when failure-event-creator #(re-frame/dispatch (failure-event-creator %)))
@@ -204,6 +199,11 @@
  (fn [{:keys [db]} [_ dimensions]]
    {:db (assoc db :dimensions/window (dimensions/window dimensions))}))
 
+(handlers/register-handler-fx
+ :set-two-pane-ui-enabled
+ (fn [{:keys [db]} [_ enabled?]]
+   {:db (assoc db :two-pane-ui-enabled? enabled?)}))
+
 (handlers/register-handler-fx
  :screens/on-will-focus
  (fn [{:keys [db] :as cofx} [_ view-id]]
@@ -222,5 +222,4 @@
                 :hardwallet-connect-modal (hardwallet/hardwallet-connect-screen-did-load %)
                 :hardwallet-authentication-method (hardwallet/authentication-method-screen-did-load %)
                 :accounts (hardwallet/accounts-screen-did-load %)
-                :chat (mark-messages-seen %)
                 nil))))

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

@@ -16,7 +16,9 @@
             [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.animation :as animation])
+            [status-im.ui.components.animation :as animation]
+            [status-im.constants :as constants]
+            [status-im.ui.components.colors :as colors])
   (:require-macros [status-im.utils.views :as views]))
 
 (views/defview les-debug-info []
@@ -121,49 +123,54 @@
 (views/defview home [loading?]
   (views/letsubs
     [anim-translate-y (animation/create-value -35)
-     {:keys [search-filter chats all-home-items]} [:home-items]]
+     {:keys [search-filter chats all-home-items]} [:home-items]
+     window-width [:dimensions/window-width]
+     two-pane-ui-enabled? [:two-pane-ui-enabled?]]
     {: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 anim-translate-y]
-              [connectivity/connectivity-animation-wrapper
-               {}
-               anim-translate-y
-               [react/activity-indicator {:flex      1
-                                          :animating true}]]]
-
-             :else
-             [react/view {:style {:flex 1}}
-              [connectivity/connectivity-view anim-translate-y]
-              [connectivity/connectivity-animation-wrapper
-               {}
-               anim-translate-y
-               [filter.views/search-input-wrapper search-filter]
-               (if (and (not search-filter)
-                        (empty? all-home-items))
-                 [home-empty-view]
-                 [home-items-view
-                  search-filter
-                  chats
-                  all-home-items
-                  filter.views/search-input-state])]])]
-      [home-action-button]]]))
+    (let [home-width (if (> window-width constants/two-pane-min-width)
+                       (max constants/left-pane-min-width (/ window-width 3))
+                       window-width)]
+      [react/view (merge {:flex 1 :width home-width}
+                         (when two-pane-ui-enabled?
+                           {:border-right-width 1 :border-right-color colors/gray-light}))
+       [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 anim-translate-y]
+                [connectivity/connectivity-animation-wrapper
+                 {}
+                 anim-translate-y
+                 [react/activity-indicator {:flex      1
+                                            :animating true}]]] :else
+               [react/view {:style {:flex 1}}
+                [connectivity/connectivity-view anim-translate-y]
+                [connectivity/connectivity-animation-wrapper
+                 {}
+                 anim-translate-y
+                 [filter.views/search-input-wrapper search-filter]
+                 (if (and (not search-filter)
+                          (empty? all-home-items))
+                   [home-empty-view]
+                   [home-items-view
+                    search-filter
+                    chats
+                    all-home-items
+                    filter.views/search-input-state])]])]
+        [home-action-button]]])))
 
 (views/defview home-wrapper []
   (views/letsubs [loading? [:chats/loading?]]

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

@@ -98,7 +98,9 @@
                                               (and group-chat public?)       :public-chat-actions
                                               (and group-chat (not public?)) :group-chat-actions
                                               :else                          :private-chat-actions)]
-    [react/touchable-highlight {:on-press #(re-frame/dispatch [:chat.ui/navigate-to-chat chat-id])
+    [react/touchable-highlight {:on-press #(do
+                                             (re-frame/dispatch [:chat.ui/navigate-to-chat chat-id])
+                                             (re-frame/dispatch [:chat.ui/mark-messages-seen :chat]))
                                 :on-long-press #(re-frame/dispatch [:bottom-sheet/show-sheet chat-actions {:chat-id chat-id}])}
      [react/view styles/chat-container
       [react/view styles/chat-icon-container

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}})