Gaps on desktop
This commit is contained in:
Roman Volosovskyi
parent
e725fffe22
commit
b90f1e5324
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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})))])])]]]))))
|
||||
|
||||
|
|
@ -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})
|
||||
|
|
@ -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]}]
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue