From b90f1e5324017605c81591c9c53c255c5cd80755 Mon Sep 17 00:00:00 2001 From: Roman Volosovskyi Date: Mon, 22 Apr 2019 15:09:38 +0300 Subject: [PATCH] Gaps on desktop --- .../ui/components/popup_menu/views.cljs | 4 ++ .../ui/screens/chat/message/gap.cljs | 54 ++++++++++++++++ .../ui/screens/chat/styles/input/gap.cljs | 33 ++++++++++ src/status_im/ui/screens/chat/views.cljs | 61 +------------------ .../ui/screens/desktop/main/chat/views.cljs | 12 +++- 5 files changed, 104 insertions(+), 60 deletions(-) create mode 100644 src/status_im/ui/screens/chat/message/gap.cljs create mode 100644 src/status_im/ui/screens/chat/styles/input/gap.cljs diff --git a/src/status_im/ui/components/popup_menu/views.cljs b/src/status_im/ui/components/popup_menu/views.cljs index 800269b2f18..9a7e5a215c5 100644 --- a/src/status_im/ui/components/popup_menu/views.cljs +++ b/src/status_im/ui/components/popup_menu/views.cljs @@ -21,6 +21,10 @@ :on-select #(re-frame/dispatch [:chat.ui/clear-history-pressed])} {:text (i18n/label :t/fetch-history) :on-select #(re-frame/dispatch [:chat.ui/fetch-history-pressed chat-id])} + #_{:text "Fetch 48-60h" + :on-select #(re-frame/dispatch [:chat.ui/fetch-history-pressed48-60 chat-id])} + #_{:text "Fetch 84-96h" + :on-select #(re-frame/dispatch [:chat.ui/fetch-history-pressed84-96 chat-id])} {:text (i18n/label :t/delete-chat) :on-select #(re-frame/dispatch [(if (and group-chat (not public?)) :group-chats.ui/remove-chat-pressed diff --git a/src/status_im/ui/screens/chat/message/gap.cljs b/src/status_im/ui/screens/chat/message/gap.cljs new file mode 100644 index 00000000000..7f4d529b29b --- /dev/null +++ b/src/status_im/ui/screens/chat/message/gap.cljs @@ -0,0 +1,54 @@ +(ns status-im.ui.screens.chat.message.gap + (:require-macros [status-im.utils.views :as views]) + (:require [status-im.ui.components.react :as react] + [re-frame.core :as re-frame] + [status-im.i18n :as i18n] + [status-im.utils.datetime :as datetime] + [status-im.ui.screens.chat.styles.input.gap :as style])) + +(defn on-press + [ids first-gap? idx list-ref] + (fn [] + (when (and list-ref @list-ref) + (.scrollToIndex @list-ref + #js {:index (max 0 (dec idx)) + :viewOffset 20 + :viewPosition 0.5})) + (if first-gap? + (re-frame/dispatch [:chat.ui/fetch-more]) + (re-frame/dispatch [:chat.ui/fill-gaps ids])))) + +(views/defview gap + [{:keys [gaps first-gap?]} idx list-ref] + (views/letsubs [in-progress? [:chats/fetching-gap-in-progress? + (if first-gap? + [:first-gap] + (:ids gaps))] + connected? [:mailserver/connected?] + range [:chats/range] + intro-status [:chats/current-chat-intro-status]] + (let [ids (:ids gaps) + intro-loading? (= intro-status :loading)] + (when-not (and first-gap? intro-loading?) + [react/view {:style style/gap-container} + [react/touchable-highlight + {:on-press (when (and connected? (not in-progress?)) + (on-press ids first-gap? idx list-ref)) + :style style/touchable} + [react/view {:style style/label-container} + (if in-progress? + [react/activity-indicator] + [react/nested-text + {:style (style/gap-text connected?)} + (i18n/label (if first-gap? + :t/load-more-messages + :t/fetch-messages)) + (when first-gap? + [{:style style/date} + (let [date (datetime/timestamp->long-date + (* 1000 (:lowest-request-from range)))] + (str + "\n" + (i18n/label :t/load-messages-before + {:date date})))])])]]])))) + diff --git a/src/status_im/ui/screens/chat/styles/input/gap.cljs b/src/status_im/ui/screens/chat/styles/input/gap.cljs new file mode 100644 index 00000000000..151f7640ef7 --- /dev/null +++ b/src/status_im/ui/screens/chat/styles/input/gap.cljs @@ -0,0 +1,33 @@ +(ns status-im.ui.screens.chat.styles.input.gap + (:require [status-im.ui.components.colors :as colors])) + +(def gap-container + {:align-self :stretch + :margin-top 24 + :margin-bottom 24 + :height 48 + :align-items :center + :justify-content :center + :border-color colors/gray-light + :border-top-width 1 + :border-bottom-width 1 + :background-color :white}) + +(def label-container + {:flex 1 + :align-items :center + :justify-content :center + :text-align :center}) + +(defn gap-text [connected?] + {:text-align :center + :color (if connected? + colors/blue + colors/gray)}) + +(def touchable + {:height 48}) + +(def date + {:typography :caption + :color colors/gray}) diff --git a/src/status_im/ui/screens/chat/views.cljs b/src/status_im/ui/screens/chat/views.cljs index 5e2114628a9..79a9c36d49e 100644 --- a/src/status_im/ui/screens/chat/views.cljs +++ b/src/status_im/ui/screens/chat/views.cljs @@ -27,7 +27,8 @@ [status-im.ui.screens.chat.toolbar-content :as toolbar-content] [status-im.utils.platform :as platform] [status-im.utils.utils :as utils] - [status-im.utils.datetime :as datetime]) + [status-im.utils.datetime :as datetime] + [status-im.ui.screens.chat.message.gap :as gap]) (:require-macros [status-im.utils.views :refer [defview letsubs]])) (defn add-contact-bar [public-key] @@ -71,65 +72,9 @@ [{{:keys [value]} :row}] [message-datemark/chat-datemark-mobile value]) -(defview gap - [ids idx list-ref in-progress? connected? range first-gap? intro-loading?] - (when-not (and first-gap? intro-loading?) - [react/view {:align-self :stretch - :margin-top 24 - :margin-bottom 24 - :height 48 - :align-items :center - :justify-content :center - :border-color colors/gray-light - :border-top-width 1 - :border-bottom-width 1 - :background-color :white} - [react/touchable-highlight - {:on-press (when (and connected? (not in-progress?)) - #(do - (when @list-ref - (.scrollToIndex @list-ref #js {:index (max 0 (dec idx)) - :viewOffset 20 - :viewPosition 0.5})) - (if first-gap? - (re-frame/dispatch [:chat.ui/fetch-more]) - (re-frame/dispatch [:chat.ui/fill-gaps ids]))))} - [react/view {:style {:flex 1 - :align-items :center - :justify-content :center - :text-align :center}} - (if in-progress? - [react/activity-indicator] - [react/nested-text - {:style {:text-align :center - :color (if connected? - colors/blue - colors/gray)}} - (i18n/label (if first-gap? - :t/load-more-messages - :t/fetch-messages)) - (when first-gap? - [{:style {:typography :caption - :color colors/gray}} - (str "\n" - (i18n/label :t/load-messages-before - {:date (datetime/timestamp->long-date - (* 1000 (:lowest-request-from range)))}))])])]]])) - -(defview gap-wrapper [{:keys [gaps first-gap?]} idx list-ref] - (letsubs [in-progress? [:chats/fetching-gap-in-progress? - (if first-gap? - [:first-gap] - (:ids gaps))] - connected? [:mailserver/connected?] - range [:chats/range] - intro-status [:chats/current-chat-intro-status]] - [gap (:ids gaps) idx list-ref in-progress? - connected? range first-gap? (= intro-status :loading)])) - (defmethod message-row :gap [{:keys [row idx list-ref]}] - [gap-wrapper row idx list-ref]) + [gap/gap row idx list-ref]) (defmethod message-row :default [{:keys [group-chat current-public-key modal? row]}] diff --git a/src/status_im/ui/screens/desktop/main/chat/views.cljs b/src/status_im/ui/screens/desktop/main/chat/views.cljs index a04c3a29e0a..a844670374e 100644 --- a/src/status_im/ui/screens/desktop/main/chat/views.cljs +++ b/src/status_im/ui/screens/desktop/main/chat/views.cljs @@ -25,7 +25,8 @@ [status-im.utils.identicon :as identicon] [status-im.utils.utils :as utils] [status-im.ui.screens.desktop.main.chat.emoji :as emoji] - [status-im.ui.components.icons.vector-icons :as icons]) + [status-im.ui.components.icons.vector-icons :as icons] + [status-im.ui.screens.chat.message.gap :as gap]) (:require-macros [status-im.utils.views :as views])) (defn toolbar-chat-view @@ -186,9 +187,16 @@ (defmethod message :default [text me? {:keys [message-id chat-id message-status user-statuses from current-public-key content-type outgoing type value] :as message}] - (if (= type :datemark) + (cond + (= type :datemark) ^{:key (str "datemark" message-id)} [message.datemark/chat-datemark value] + + (= type :gap) + ^{:key (str "gap" value)} + [gap/gap message nil nil] + + :else (when (contains? constants/desktop-content-types content-type) (reagent.core/create-class {:component-did-mount