remove desktop ui
Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
This commit is contained in:
Andrey Shovkoplyas
parent
768e15a08e
commit
612a11fef8
|
|
@ -12,7 +12,6 @@
|
|||
[status-im.transport.message.protocol :as transport.protocol]
|
||||
[status-im.tribute-to-talk.core :as tribute-to-talk]
|
||||
[status-im.ui.components.colors :as colors]
|
||||
[status-im.ui.components.desktop.events :as desktop.events]
|
||||
[status-im.ui.components.react :as react]
|
||||
[status-im.ui.screens.navigation :as navigation]
|
||||
[status-im.utils.clocks :as utils.clocks]
|
||||
|
|
@ -266,9 +265,7 @@
|
|||
(add-public-chat topic)
|
||||
(transport.filters/load-chat topic)
|
||||
#(when-not dont-navigate?
|
||||
(navigate-to-chat % topic opts))
|
||||
#(when platform/desktop?
|
||||
(desktop.events/change-tab % :home)))))
|
||||
(navigate-to-chat % topic opts)))))
|
||||
|
||||
(fx/defn disable-chat-cooldown
|
||||
"Turns off chat cooldown (protection against message spamming)"
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
[status-im.ui.components.react :as react]
|
||||
[status-im.core :as core]
|
||||
[status-im.utils.snoopy :as snoopy]
|
||||
[status-im.ui.components.desktop.shortcuts :as shortcuts]
|
||||
[status-im.ui.screens.desktop.views :as desktop-views]
|
||||
[status-im.desktop.deep-links :as deep-links]
|
||||
[status-im.utils.config :as config]))
|
||||
|
|
@ -32,7 +31,7 @@
|
|||
(reagent/create-class
|
||||
{:component-did-mount (fn [this]
|
||||
(re-frame/dispatch [:set-initial-props (reagent/props this)])
|
||||
(shortcuts/register-default-shortcuts)
|
||||
;(shortcuts/register-default-shortcuts)
|
||||
(deep-links/add-event-listener))
|
||||
:reagent-render (fn [props]
|
||||
desktop-views/main)})))
|
||||
|
|
|
|||
|
|
@ -1,67 +0,0 @@
|
|||
(ns status-im.ui.components.desktop.events
|
||||
(:require [status-im.utils.handlers :as handlers]
|
||||
[status-im.utils.fx :as fx]
|
||||
[status-im.ui.screens.navigation :as navigation]
|
||||
[status-im.constants :as constants]
|
||||
[re-frame.core :as re-frame]
|
||||
[status-im.native-module.core :as status]
|
||||
[taoensso.timbre :as log]
|
||||
[status-im.utils.handlers :as handlers]
|
||||
[status-im.utils.platform :as platform]))
|
||||
|
||||
(fx/defn change-tab
|
||||
[{:keys [db]} tab-name]
|
||||
{:db (assoc-in db [:desktop/desktop :tab-view-id] tab-name)})
|
||||
|
||||
(fx/defn navigate-to
|
||||
[{:keys [db] :as cofx} tab-name]
|
||||
(navigation/navigate-to-cofx cofx
|
||||
(if (and (= tab-name :home) (:current-chat-id db))
|
||||
:chat
|
||||
:home)
|
||||
nil))
|
||||
|
||||
(fx/defn show-desktop-tab
|
||||
[cofx tab-name]
|
||||
(fx/merge cofx
|
||||
(change-tab tab-name)
|
||||
(navigate-to tab-name)))
|
||||
|
||||
(handlers/register-handler-fx
|
||||
:show-desktop-tab
|
||||
(fn [cofx [_ tab-name]]
|
||||
(show-desktop-tab cofx tab-name)))
|
||||
|
||||
(defn packet-keys [direction]
|
||||
"helper for accessing deeply nested metrics keys"
|
||||
{:pre [(#{:in :out} direction)]}
|
||||
[:misc direction :packets :Overall])
|
||||
|
||||
(handlers/register-handler-fx
|
||||
:debug-metrics-success
|
||||
(fn [{:keys [db]} [_ {:keys [p2p mailserver les whisper], :as metrics}]]
|
||||
{:db (assoc-in db
|
||||
[:desktop/desktop :debug-metrics]
|
||||
{:mailserver-request-process-time (get-in mailserver [:requestProcessTime :Overall])
|
||||
:mailserver-request-errors (get-in mailserver [:requestErrors :Overall])
|
||||
:les-packets-in (get-in les (packet-keys :in))
|
||||
:les-packets-out (get-in les (packet-keys :out))
|
||||
:p2p-inbound-traffic (get-in p2p [:InboundTraffic :Overall])
|
||||
:p2p-outbound-traffic (get-in p2p [:OutboundTraffic :Overall])})}))
|
||||
|
||||
(defn debug-metrics-rpc-call [payload]
|
||||
"json rpc wrapper for debug metrics; dispatch :debug-metrics-success on success"
|
||||
(status/call-private-rpc
|
||||
payload
|
||||
(handlers/response-handler #(re-frame/dispatch [:debug-metrics-success %])
|
||||
#(log/debug "we did not get the debug metrics" %))))
|
||||
|
||||
(handlers/register-handler-fx
|
||||
:load-debug-metrics
|
||||
(fn [{:keys [db]} _]
|
||||
(let [args {:jsonrpc "2.0"
|
||||
:id 2
|
||||
:method constants/debug-metrics
|
||||
:params [true]}
|
||||
payload (.stringify js/JSON (clj->js args))]
|
||||
(debug-metrics-rpc-call payload))))
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
(ns status-im.ui.components.desktop.shortcuts
|
||||
(:require [status-im.react-native.js-dependencies :refer [desktop-shortcuts]]
|
||||
[status-im.ui.screens.desktop.main.tabs.home.views :as chat-list]
|
||||
[re-frame.core :as re-frame]
|
||||
[taoensso.timbre :as log]
|
||||
[status-im.utils.utils :as utils]))
|
||||
|
||||
(defn register-shortcut [shortcut on-press]
|
||||
(.set desktop-shortcuts (clj->js {:shortcut shortcut
|
||||
:onPress on-press})))
|
||||
|
||||
(defn register-default-shortcuts []
|
||||
(.register desktop-shortcuts
|
||||
(clj->js (vector
|
||||
{:shortcut "Ctrl+N"
|
||||
:onPress #(re-frame/dispatch [:navigate-to :desktop/new-one-to-one])}
|
||||
{:shortcut "Ctrl+G"
|
||||
:onPress #(re-frame/dispatch [:navigate-to :desktop/new-group-chat])}
|
||||
{:shortcut "Ctrl+P"
|
||||
:onPress #(re-frame/dispatch [:navigate-to :desktop/new-public-chat])}
|
||||
{:shortcut "Ctrl+F"
|
||||
:onPress #(utils/show-popup "" "Ctrl+F")}))))
|
||||
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
(ns status-im.ui.components.desktop.tabs
|
||||
(:require [re-frame.core :as re-frame]
|
||||
status-im.ui.components.desktop.events
|
||||
[status-im.ui.components.icons.vector-icons :as icons]
|
||||
[taoensso.timbre :as log]
|
||||
[status-im.ui.components.colors :as colors]
|
||||
[status-im.ui.components.react :as react]
|
||||
[status-im.ui.components.tabbar.styles :as tabs.styles])
|
||||
(:require-macros [status-im.utils.views :as views]))
|
||||
|
||||
;;TODO copy-pate with minimum modifications of status-react tabs
|
||||
|
||||
(def tabs-list-data
|
||||
[{:view-id :home
|
||||
:content {:title "Home"
|
||||
:icon :main-icons/home}
|
||||
:count-subscription :chats/unread-messages-number}
|
||||
#_{:view-id :wallet
|
||||
:content {:title "Wallet"
|
||||
:icon :main-icons/wallet}}
|
||||
{:view-id :profile
|
||||
:content {:title "Profile"
|
||||
:icon :main-icons/user-profile}
|
||||
:count-subscription :get-profile-unread-messages-number}])
|
||||
|
||||
(defn- tab-content [{:keys [title icon]}]
|
||||
(fn [active? cnt]
|
||||
[react/view {:style tabs.styles/tab-container}
|
||||
[react/view
|
||||
[icons/icon icon {:style {:tint-color (if active? colors/blue colors/black)}}]]
|
||||
[react/view
|
||||
[react/text {:style (tabs.styles/tab-title active?)}
|
||||
title]]]))
|
||||
|
||||
(def tabs-list-indexed (map-indexed vector (map #(update % :content tab-content) tabs-list-data)))
|
||||
|
||||
(views/defview tab [index content view-id active? count-subscription]
|
||||
(views/letsubs [cnt [count-subscription]]
|
||||
[react/touchable-highlight {:style (merge tabs.styles/tab-container {:flex 1})
|
||||
:disabled active?
|
||||
:on-press #(re-frame/dispatch [:show-desktop-tab view-id])}
|
||||
[react/view
|
||||
[content active? cnt]]]))
|
||||
|
||||
(views/defview main-tabs []
|
||||
(views/letsubs [{:keys [tab-view-id]} [:desktop/desktop]]
|
||||
[react/view
|
||||
[react/view {:style tabs.styles/tabs-container}
|
||||
(for [[index {:keys [content view-id count-subscription]}] tabs-list-indexed]
|
||||
^{:key index}
|
||||
[tab index content view-id (= tab-view-id view-id) count-subscription])]]))
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
(ns status-im.ui.components.desktop.views
|
||||
(:require
|
||||
[status-im.ui.components.icons.vector-icons :as icons]
|
||||
[status-im.ui.components.common.styles :as styles]
|
||||
[status-im.ui.components.checkbox.styles :as checkbox.styles]
|
||||
[status-im.ui.components.react :as react]
|
||||
[status-im.ui.components.colors :as colors]))
|
||||
|
||||
(defn checkbox [{:keys [on-value-change checked?]}]
|
||||
[react/touchable-highlight {:style checkbox.styles/wrapper :on-press #(do (when on-value-change (on-value-change (not checked?))))}
|
||||
[react/view {:style (checkbox.styles/icon-check-container checked?)}
|
||||
(when checked?
|
||||
[icons/icon :main-icons/check {:style checkbox.styles/check-icon}])]])
|
||||
|
||||
;; TODO should be removed when 2-pane UI will be used
|
||||
|
||||
(defn action-button [{:keys [label icon icon-opts on-press label-style cyrcle-color]}]
|
||||
[react/touchable-highlight {:on-press on-press}])
|
||||
|
||||
(defn separator [style & [wrapper-style]]
|
||||
[react/view {:style (merge styles/separator-wrapper wrapper-style)}
|
||||
[react/view {:style (merge styles/separator style)}]])
|
||||
|
||||
(def sticky-button-style
|
||||
{:flex-direction :row
|
||||
:height 52
|
||||
:justify-content :center
|
||||
:align-items :center
|
||||
:background-color colors/blue})
|
||||
|
||||
(def sticky-button-label-style
|
||||
{:color colors/white
|
||||
:font-size 17})
|
||||
|
||||
(defn sticky-button [label on-press]
|
||||
[react/touchable-highlight {:on-press on-press}
|
||||
[react/view {:style sticky-button-style}
|
||||
[react/text {:style sticky-button-label-style}
|
||||
label]]])
|
||||
|
||||
(defn button-label-style
|
||||
[enabled?]
|
||||
{:color colors/blue
|
||||
:opacity (if enabled? 1 0.3)})
|
||||
|
||||
(defn button [label enabled? on-press]
|
||||
[react/touchable-highlight {:on-press on-press :disabled (not enabled?)}
|
||||
[react/view {:style {:width 290
|
||||
:height 52
|
||||
:align-items :center
|
||||
:justify-content :center
|
||||
:border-radius 8
|
||||
:background-color :white}}
|
||||
;:box-shadow "0 2px 6px 0 rgba(0, 0, 0, 0.25)"}}
|
||||
[react/text {:style (button-label-style enabled?)}
|
||||
label]]])
|
||||
|
||||
(def text-button-label-style
|
||||
{:color colors/white})
|
||||
|
||||
(defn text-button [label on-press]
|
||||
[react/touchable-highlight {:on-press on-press}
|
||||
[react/view
|
||||
[react/text {:style text-button-label-style}
|
||||
label]]])
|
||||
|
||||
(defn back-button [on-press]
|
||||
[react/view {:style {:position :absolute :left 32 :top 32 :z-index 1000}}
|
||||
[react/touchable-highlight {:on-press on-press}
|
||||
[react/view {:style {:flex-direction :row :align-items :center}}
|
||||
[icons/icon :main-icons/back {:color :white}]
|
||||
[react/text {:style {:margin-left 16 :color colors/white}} "Back"]]]])
|
||||
|
|
@ -1,111 +0,0 @@
|
|||
(ns status-im.ui.screens.desktop.main.add-new.styles
|
||||
(:require [status-im.ui.components.colors :as colors]))
|
||||
|
||||
(def new-view
|
||||
{:flex 1
|
||||
:background-color colors/white
|
||||
:margin-left 16
|
||||
:margin-right 24})
|
||||
|
||||
(def new-contact-title
|
||||
{:height 64
|
||||
:align-items :flex-start
|
||||
:justify-content :center})
|
||||
|
||||
(def new-contact-title-text
|
||||
{:font-size 20
|
||||
:font-weight "700"})
|
||||
|
||||
(def new-contact-subtitle
|
||||
{:font-size 14})
|
||||
|
||||
(def add-contact-edit-view
|
||||
{:height 45
|
||||
:margin-bottom 32
|
||||
:background-color colors/white
|
||||
:border-radius 12
|
||||
:flex-direction :row
|
||||
:margin-top 16})
|
||||
|
||||
(defn add-contact-input [error?]
|
||||
(cond-> {:flex 1
|
||||
:font-size 14
|
||||
:background-color colors/gray-lighter
|
||||
:margin-right 12
|
||||
:border-radius 8}
|
||||
error?
|
||||
(assoc :border-color colors/red
|
||||
:border-width 1)))
|
||||
|
||||
(defn add-pub-chat-input [error?]
|
||||
(assoc (add-contact-input error?) :padding-left 10))
|
||||
|
||||
(defn add-contact-button [error?]
|
||||
{:width 140
|
||||
:height 45
|
||||
:border-radius 8
|
||||
:background-color (if error? colors/gray-lighter colors/blue)
|
||||
:align-items :center
|
||||
:justify-content :center})
|
||||
|
||||
(defn add-contact-button-text [error?]
|
||||
{:font-size 16
|
||||
:color (if error? colors/gray colors/white)})
|
||||
|
||||
(def suggested-contact-view
|
||||
{:flex-direction "row"
|
||||
:align-items :center
|
||||
:margin-bottom 16})
|
||||
|
||||
(def suggested-contacts
|
||||
{:margin-top 12})
|
||||
|
||||
(def suggested-contact-image
|
||||
{:width 46
|
||||
:height 46
|
||||
:border-radius 46
|
||||
:margin-right 16})
|
||||
|
||||
(def suggested-topic-image
|
||||
(merge suggested-contact-image
|
||||
{:background-color colors/blue
|
||||
:align-items :center
|
||||
:justify-content :center}))
|
||||
|
||||
(def suggested-topic-text
|
||||
{:font-size 25.6
|
||||
:color colors/white})
|
||||
|
||||
(def topic-placeholder
|
||||
{:flex 0
|
||||
:top -63
|
||||
:left 5
|
||||
:font-size 14
|
||||
:width 5
|
||||
:height 16
|
||||
:margin-bottom -16})
|
||||
|
||||
(def tooltip-container
|
||||
{:position :absolute
|
||||
:align-items :center
|
||||
:align-self :center
|
||||
:bottom 34})
|
||||
|
||||
(def tooltip-icon-text
|
||||
{:justify-content :center
|
||||
:align-items :center
|
||||
:flex 1
|
||||
:border-radius 8
|
||||
:padding-left 10
|
||||
:padding-right 10
|
||||
:background-color colors/red-light})
|
||||
|
||||
(def tooltip-triangle
|
||||
{:width 0
|
||||
:height 0
|
||||
:border-top-width 9.1
|
||||
:border-left-width 9.1
|
||||
:border-right-width 9.1
|
||||
:border-left-color :transparent
|
||||
:border-right-color :transparent
|
||||
:border-top-color colors/red-light})
|
||||
|
|
@ -1,133 +0,0 @@
|
|||
(ns status-im.ui.screens.desktop.main.add-new.views
|
||||
(:require-macros [status-im.utils.views :as views])
|
||||
(:require [status-im.ui.components.icons.vector-icons :as icons]
|
||||
[status-im.utils.config :as config]
|
||||
[status-im.ui.screens.add-new.new-public-chat.view :as public-chat]
|
||||
[status-im.ui.components.list.views :as list]
|
||||
[clojure.string :as string]
|
||||
[status-im.i18n :as i18n]
|
||||
[re-frame.core :as re-frame]
|
||||
[status-im.ui.screens.desktop.main.add-new.styles :as styles]
|
||||
[status-im.ui.screens.add-new.new-public-chat.db :as public-chat.db]
|
||||
[taoensso.timbre :as log]
|
||||
[status-im.ui.components.react :as react]
|
||||
[status-im.ui.components.colors :as colors]))
|
||||
|
||||
(defn topic-input-placeholder []
|
||||
[react/text {:style styles/topic-placeholder} "#"])
|
||||
|
||||
(views/defview error-tooltip [text]
|
||||
[react/view {:style styles/tooltip-container}
|
||||
[react/view {:style styles/tooltip-icon-text}
|
||||
[react/text {:style {:font-size 14 :color colors/red}}
|
||||
text]]
|
||||
[react/view {:style styles/tooltip-triangle}]])
|
||||
|
||||
(views/defview new-one-to-one []
|
||||
(views/letsubs [new-contact-identity [:contacts/new-identity]
|
||||
contacts [:contacts/active]
|
||||
chat-error [:new-identity-error]]
|
||||
{:component-will-unmount #(re-frame/dispatch [:new-chat/set-new-identity nil])}
|
||||
[react/view {:style styles/new-view}
|
||||
[react/view {:style styles/new-contact-title}
|
||||
[react/text {:style styles/new-contact-title-text}
|
||||
(i18n/label :new-chat)]]
|
||||
[react/text {:style styles/new-contact-subtitle} (i18n/label :enter-ens-or-contact-code)]
|
||||
(let [disable? (or (not (string/blank? chat-error))
|
||||
(string/blank? new-contact-identity))
|
||||
show-error-tooltip? (and chat-error
|
||||
(not (string/blank? new-contact-identity)))
|
||||
create-1to1-chat #(re-frame/dispatch [:contact.ui/contact-code-submitted new-contact-identity])]
|
||||
[react/view {:style styles/add-contact-edit-view}
|
||||
[react/view {:style (styles/add-contact-input show-error-tooltip?)}
|
||||
(when show-error-tooltip?
|
||||
[error-tooltip chat-error])
|
||||
[react/text-input {:placeholder "name.stateofus.eth"
|
||||
:auto-focus true
|
||||
:flex 1
|
||||
:selection-color colors/blue
|
||||
:on-change (fn [e]
|
||||
(let [native-event (.-nativeEvent e)
|
||||
text (.-text native-event)]
|
||||
(re-frame/dispatch [:new-chat/set-new-identity text])))
|
||||
:on-submit-editing (when-not disable? create-1to1-chat)}]]
|
||||
[react/touchable-highlight {:disabled disable? :on-press create-1to1-chat}
|
||||
[react/view
|
||||
{:style (styles/add-contact-button disable?)}
|
||||
[react/text
|
||||
{:style (styles/add-contact-button-text disable?)}
|
||||
(i18n/label :start-chat)]]]])
|
||||
(when (seq contacts) [react/text {:style styles/new-contact-subtitle} (i18n/label :or-choose-a-contact)])
|
||||
[react/scroll-view
|
||||
[react/view {:style styles/suggested-contacts}
|
||||
(doall
|
||||
(for [c contacts]
|
||||
^{:key (:public-key c)}
|
||||
[react/touchable-highlight {:on-press #(do
|
||||
(re-frame/dispatch [:set :contacts/new-identity (:public-key c)])
|
||||
(re-frame/dispatch [:contact.ui/contact-code-submitted (:public-key c)]))}
|
||||
[react/view {:style styles/suggested-contact-view}
|
||||
[react/image {:style styles/suggested-contact-image
|
||||
:source {:uri (:photo-path c)}}]
|
||||
[react/text {:style styles/new-contact-subtitle} (:name c)]]]))]]]))
|
||||
|
||||
(views/defview new-group-chat []
|
||||
[react/view {:style styles/new-view}
|
||||
[react/view {:style styles/new-contact-title}
|
||||
[react/text {:style styles/new-contact-title-text}
|
||||
(i18n/label :new-group-chat)]]
|
||||
[react/touchable-highlight {:on-press #(re-frame/dispatch [:contact.ui/start-group-chat-pressed])}
|
||||
[react/view
|
||||
{:style (styles/add-contact-button nil)}
|
||||
[react/text
|
||||
{:style (styles/add-contact-button-text nil)}
|
||||
(i18n/label :start-chat)]]]])
|
||||
|
||||
(views/defview new-public-chat []
|
||||
(views/letsubs [topic [:public-group-topic]
|
||||
topic-error [:public-chat.new/topic-error-message]]
|
||||
[react/view {:style styles/new-view}
|
||||
[react/view {:style styles/new-contact-title}
|
||||
[react/text {:style styles/new-contact-title-text}
|
||||
(i18n/label :new-public-group-chat)]]
|
||||
[react/text {:style styles/new-contact-subtitle} (i18n/label :public-group-topic)]
|
||||
(let [disable? (or topic-error
|
||||
(string/blank? topic))
|
||||
show-error-tooltip? topic-error
|
||||
create-public-chat #(when (public-chat.db/valid-topic? topic)
|
||||
(re-frame/dispatch [:set :public-group-topic nil])
|
||||
(re-frame/dispatch [:chat.ui/start-public-chat topic {:navigation-reset? true}]))]
|
||||
[react/view {:style styles/add-contact-edit-view}
|
||||
[react/view {:flex 1
|
||||
:style (styles/add-pub-chat-input show-error-tooltip?)}
|
||||
(when show-error-tooltip?
|
||||
[error-tooltip topic-error])
|
||||
|
||||
[react/text-input {:flex 1
|
||||
:auto-focus true
|
||||
:selection-color colors/blue
|
||||
:placeholder ""
|
||||
:on-change (fn [e]
|
||||
(let [text (.. e -nativeEvent -text)]
|
||||
(re-frame/dispatch [:set :public-group-topic text])))
|
||||
:on-submit-editing (when-not disable?
|
||||
create-public-chat)}]]
|
||||
[react/touchable-highlight {:disabled disable?
|
||||
:on-press create-public-chat}
|
||||
[react/view {:style (styles/add-contact-button disable?)}
|
||||
[react/text {:style (styles/add-contact-button-text disable?)}
|
||||
(i18n/label :new-public-group-chat)]]]])
|
||||
[topic-input-placeholder]
|
||||
[react/text {:style styles/new-contact-subtitle} (i18n/label :selected-for-you)]
|
||||
[react/scroll-view
|
||||
[react/view {:style styles/suggested-contacts}
|
||||
(doall
|
||||
(for [topic public-chat/default-public-chats]
|
||||
^{:key topic}
|
||||
[react/touchable-highlight {:on-press #(do
|
||||
(re-frame/dispatch [:set :public-group-topic nil])
|
||||
(re-frame/dispatch [:chat.ui/start-public-chat topic]))}
|
||||
[react/view {:style styles/suggested-contact-view}
|
||||
[react/view {:style styles/suggested-topic-image}
|
||||
[react/text {:style styles/suggested-topic-text} (string/capitalize (first topic))]]
|
||||
[react/text {:style styles/new-contact-subtitle} topic]]]))]]]))
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,25 +0,0 @@
|
|||
(ns status-im.ui.screens.desktop.main.chat.events
|
||||
(:require [re-frame.core :as re-frame]
|
||||
[status-im.ui.screens.navigation :as navigation]
|
||||
[status-im.utils.handlers :as handlers]
|
||||
[status-im.utils.fx :as fx]))
|
||||
|
||||
(defn show-profile-desktop [identity {:keys [db] :as cofx}]
|
||||
(fx/merge cofx
|
||||
{:db (assoc db :contacts/identity identity)}
|
||||
(navigation/navigate-to-cofx :chat-profile nil)))
|
||||
|
||||
(handlers/register-handler-fx
|
||||
:show-profile-desktop
|
||||
(fn [cofx [_ identity]]
|
||||
(show-profile-desktop identity cofx)))
|
||||
|
||||
(handlers/register-handler-fx
|
||||
:desktop/insert-emoji
|
||||
(fn [{{:keys [desktop current-chat-id chats] :as db} :db} [_ emoji]]
|
||||
(let [inp-txt (get-in chats [current-chat-id :input-text])
|
||||
input (:input-ref desktop)
|
||||
sel (:input-selection desktop)
|
||||
new-text (if sel (str (subs inp-txt 0 sel) emoji (subs inp-txt sel)) (str inp-txt emoji))]
|
||||
(when input (.setNativeProps input (clj->js {:text new-text})))
|
||||
{:db (assoc-in db [:chats current-chat-id :input-text] new-text)})))
|
||||
|
|
@ -1,270 +0,0 @@
|
|||
(ns status-im.ui.screens.desktop.main.chat.styles
|
||||
(:require [status-im.ui.components.colors :as colors]
|
||||
[status-im.ui.screens.chat.styles.message.message :refer [message-author-name]]))
|
||||
|
||||
;; TODO: see how this could be refactored to be
|
||||
;; automatically alignde with tabs-height in
|
||||
;; status-im.ui.screens.main-tabs.styles
|
||||
(def min-input-container-height 67)
|
||||
(def max-input-container-height 180)
|
||||
(def chat-vertical-padding 16)
|
||||
(def min-input-area-height 20)
|
||||
(def max-input-area-height (- max-input-container-height (* 2 chat-vertical-padding)))
|
||||
|
||||
(defn message-row [{:keys [outgoing first-in-group?] :as message}]
|
||||
(let [padding-horizontal (if outgoing :padding-right :padding-left)
|
||||
padding-top-value (if first-in-group? 16 8)]
|
||||
{padding-horizontal 24
|
||||
:padding-top padding-top-value}))
|
||||
|
||||
(def message-row-column
|
||||
{:flex-direction :column})
|
||||
|
||||
(def message-timestamp
|
||||
{:color colors/gray
|
||||
:font-size 10
|
||||
:text-align :right
|
||||
:margin-right 16
|
||||
:width 60})
|
||||
|
||||
(def author
|
||||
{:font-weight "500"
|
||||
:font-size 14})
|
||||
|
||||
(def author-generated
|
||||
{:color colors/gray
|
||||
:font-size 14})
|
||||
|
||||
(defn chat-box [height]
|
||||
{:height (+ height (* 2 chat-vertical-padding))
|
||||
:min-height min-input-container-height
|
||||
:max-height max-input-container-height
|
||||
:padding-vertical chat-vertical-padding
|
||||
:flex-direction :row
|
||||
:overflow :hidden})
|
||||
|
||||
(defn chat-text-input [container-height]
|
||||
{:height container-height
|
||||
:min-height min-input-area-height
|
||||
:max-height max-input-area-height
|
||||
:margin-left 20
|
||||
:margin-right 22
|
||||
:flex 1
|
||||
:align-self :center})
|
||||
|
||||
(def messages-view
|
||||
{:flex 1
|
||||
:background-color colors/white})
|
||||
|
||||
(def img-container
|
||||
{:height 56
|
||||
:justify-content :center})
|
||||
|
||||
(def messages-list-vertical-padding 46)
|
||||
|
||||
(def photo-style
|
||||
{:border-radius 19
|
||||
:width 38
|
||||
:height 38})
|
||||
|
||||
(def member-photo-container
|
||||
{:border-color colors/black-transparent
|
||||
:border-width 1
|
||||
:align-items :center
|
||||
:justify-content :center
|
||||
:border-radius 20
|
||||
:width 40
|
||||
:height 40})
|
||||
|
||||
(def chat-icon
|
||||
{:width 34
|
||||
:border-radius 34
|
||||
:height 34
|
||||
:margin-right 12})
|
||||
|
||||
(defn topic-image [color]
|
||||
(merge chat-icon
|
||||
{:background-color color
|
||||
:align-items :center
|
||||
:justify-content :center}))
|
||||
|
||||
(def topic-text
|
||||
{:font-size 18
|
||||
:color colors/white})
|
||||
|
||||
(def toolbar-chat-view
|
||||
{:align-items :center
|
||||
:padding-vertical 17
|
||||
:padding-horizontal 24
|
||||
:height 68
|
||||
:flex-direction :row
|
||||
:justify-content :space-between})
|
||||
|
||||
(def add-contact-text
|
||||
{:font-size 12
|
||||
:color colors/blue})
|
||||
|
||||
(def public-chat-text
|
||||
{:font-size 12
|
||||
:color colors/gray})
|
||||
|
||||
(defn profile-actions-text [color]
|
||||
{:font-size 12
|
||||
:color color
|
||||
:margin-bottom 4})
|
||||
|
||||
(defn message-text [collapsible? outgoing]
|
||||
{:color (if outgoing colors/white colors/black)
|
||||
:font-size 14
|
||||
:margin-bottom (if collapsible? 2 0)})
|
||||
|
||||
(defn message-link [outgoing]
|
||||
(assoc (message-text false outgoing)
|
||||
:color (if outgoing colors/white colors/blue)
|
||||
:text-decoration-line :underline))
|
||||
|
||||
(def system-message-text
|
||||
{:margin-top -5
|
||||
:font-size 14})
|
||||
|
||||
(def message-container
|
||||
{:flex-direction :column
|
||||
:margin-right 16})
|
||||
|
||||
(def message-wrapper
|
||||
{:flex-direction :row
|
||||
:flex-wrap :wrap})
|
||||
|
||||
(def not-first-in-group-wrapper
|
||||
{:flex-direction :row})
|
||||
|
||||
(def send-button
|
||||
{:height 34
|
||||
:width 34
|
||||
:margin-right 24
|
||||
:justify-content :center
|
||||
:align-items :center
|
||||
:align-self :flex-end})
|
||||
|
||||
(defn send-icon [not-active?]
|
||||
{:height 34
|
||||
:width 34
|
||||
:border-radius 17
|
||||
:background-color (if not-active? colors/gray-lighter colors/blue)
|
||||
:align-items :center
|
||||
:justify-content :center
|
||||
:transform [{:rotate "90deg"}]})
|
||||
|
||||
(defn send-icon-arrow [not-active?]
|
||||
{:tint-color (if not-active? :gray :white)})
|
||||
|
||||
(def chat-view
|
||||
{:flex 1
|
||||
:background-color :white})
|
||||
|
||||
(defn contact-card-text [color]
|
||||
{:color color
|
||||
:font-size 14})
|
||||
|
||||
(def contact-card-gray-text
|
||||
{:color colors/gray
|
||||
:font-size 14})
|
||||
|
||||
(def chat-profile-body
|
||||
{:margin 32})
|
||||
|
||||
(def chat-profile-row
|
||||
{:flex-direction :row
|
||||
:align-items :center
|
||||
:margin-bottom 10})
|
||||
|
||||
(def chat-profile-icon-container
|
||||
{:background-color colors/blue-transparent-10
|
||||
:justify-content :center
|
||||
:align-items :center
|
||||
:border-radius 15
|
||||
;; not sure idiomatic reagent for multiple style values
|
||||
;; for margin
|
||||
:width 22
|
||||
:height 22
|
||||
:margin-right 10})
|
||||
|
||||
(defn chat-profile-icon [color]
|
||||
{:tint-color color
|
||||
:width 15
|
||||
:height 15})
|
||||
|
||||
(def chat-profile-contact-code
|
||||
{:color colors/gray
|
||||
:margin-top 10
|
||||
:margin-bottom 5})
|
||||
|
||||
(defn chat-title-and-type [added?]
|
||||
{:flex 1
|
||||
:justify-content (if added? :center :flex-start)})
|
||||
|
||||
(def chat-title
|
||||
{:margin-bottom 4
|
||||
:font-size 14})
|
||||
|
||||
(def reply-wrapper
|
||||
{:flex-direction :column-reverse})
|
||||
|
||||
(def reply-photo-style
|
||||
{:width 40
|
||||
:height 40
|
||||
:margin-right 5})
|
||||
|
||||
(def reply-container
|
||||
{:flex-direction :row
|
||||
:align-items :flex-start
|
||||
:border-width 1
|
||||
:border-radius 10
|
||||
:border-color colors/black-transparent
|
||||
:margin 10})
|
||||
|
||||
(def reply-content-container
|
||||
{:flex-direction :column
|
||||
:padding-bottom 10})
|
||||
|
||||
(defn reply-content-author [chosen?]
|
||||
(assoc (message-author-name chosen?)
|
||||
:margin-top 5
|
||||
:padding-bottom 3))
|
||||
|
||||
(def reply-content-message
|
||||
{:padding-left 7
|
||||
:margin-right 50
|
||||
:max-height 140
|
||||
:overflow :scroll})
|
||||
|
||||
(def reply-close-highlight
|
||||
{:position :absolute
|
||||
:z-index 5
|
||||
:top 3
|
||||
:right 8
|
||||
:height 26})
|
||||
|
||||
(def reply-close-icon
|
||||
{:border-radius 12
|
||||
:background-color colors/gray
|
||||
:tint-color colors/white})
|
||||
|
||||
(defn reply-icon [outgoing]
|
||||
{:tint-color (if outgoing colors/white colors/gray)})
|
||||
|
||||
(def separator
|
||||
{:height 1
|
||||
:background-color colors/black-transparent})
|
||||
|
||||
(def quoted-message-container
|
||||
{:margin 6
|
||||
:margin-left 0
|
||||
:padding 6
|
||||
:border-color colors/gray-lighter
|
||||
:border-width 1
|
||||
:border-radius 8})
|
||||
|
||||
(def quoted-message-author-container
|
||||
{:flex-direction :row
|
||||
:align-items :flex-start})
|
||||
|
|
@ -1,397 +0,0 @@
|
|||
(ns status-im.ui.screens.desktop.main.chat.views
|
||||
(:require [clojure.string :as string]
|
||||
[re-frame.core :as re-frame]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.constants :as constants]
|
||||
[status-im.contact.db :as contact.db]
|
||||
[status-im.i18n :as i18n]
|
||||
[status-im.ui.components.colors :as colors]
|
||||
[status-im.ui.components.connectivity.view :as connectivity]
|
||||
[status-im.ui.components.icons.vector-icons :as vector-icons]
|
||||
[status-im.ui.components.popup-menu.views
|
||||
:refer
|
||||
[get-chat-menu-items show-desktop-menu]]
|
||||
[status-im.ui.components.react :as react]
|
||||
[status-im.ui.screens.chat.message.datemark :as message.datemark]
|
||||
[status-im.ui.screens.chat.message.message :as message]
|
||||
[status-im.ui.screens.chat.styles.message.message :as message.style]
|
||||
[status-im.ui.screens.chat.utils :as chat-utils]
|
||||
[status-im.ui.screens.chat.views :as views.chat]
|
||||
[status-im.ui.screens.desktop.main.chat.styles :as styles]
|
||||
[status-im.ui.screens.desktop.main.tabs.profile.views :as profile.views]
|
||||
[status-im.utils.core :as core-utils]
|
||||
[status-im.utils.datetime :as time]
|
||||
[status-im.utils.gfycat.core :as gfycat]
|
||||
[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.screens.chat.message.gap :as gap]
|
||||
[status-im.ui.components.animation :as animation]
|
||||
[status-im.utils.contenthash :as contenthash])
|
||||
(:require-macros [status-im.utils.views :as views]))
|
||||
|
||||
(defn toolbar-chat-view
|
||||
[{:keys [chat-id chat-name contact color public-key public? group-chat]
|
||||
:as current-chat}]
|
||||
(let [{:keys [added? public-key photo-path]} contact]
|
||||
[react/view {:style styles/toolbar-chat-view}
|
||||
[react/view {:style {:flex-direction :row
|
||||
:flex 1}}
|
||||
(if public?
|
||||
[react/view {:style (styles/topic-image color)}
|
||||
[react/text {:style styles/topic-text}
|
||||
(string/capitalize (second chat-name))]]
|
||||
[react/image {:style styles/chat-icon
|
||||
:source {:uri photo-path}}])
|
||||
[react/view {:style (styles/chat-title-and-type added?)}
|
||||
[react/text {:style styles/chat-title}
|
||||
chat-name]
|
||||
(cond
|
||||
(and (not group-chat) (not added?))
|
||||
[react/text {:style styles/add-contact-text
|
||||
:on-press #(re-frame/dispatch [:contact.ui/add-to-contact-pressed public-key])}
|
||||
(i18n/label :t/add-to-contacts)]
|
||||
public?
|
||||
[react/text {:style styles/public-chat-text}
|
||||
(i18n/label :t/public-chat)])]]
|
||||
[react/touchable-highlight
|
||||
{:on-press #(show-desktop-menu
|
||||
(get-chat-menu-items group-chat public? chat-id))}
|
||||
[vector-icons/icon :main-icons/more
|
||||
{:style {:tint-color colors/black
|
||||
:width 24
|
||||
:height 24}}]]]))
|
||||
|
||||
(views/defview message-author-name [{:keys [from]}]
|
||||
(views/letsubs [{:keys [ens-name alias]} [:contacts/contact-name-by-identity from]]
|
||||
[react/view {:flex-direction :row}
|
||||
(when ens-name
|
||||
[react/text {:style styles/author} ens-name])
|
||||
[react/text {:style styles/author-generated}
|
||||
(str (when ens-name " • ") alias)]]))
|
||||
|
||||
(views/defview member-photo [from]
|
||||
(views/letsubs [current-public-key [:multiaccount/public-key]
|
||||
photo-path [:chats/photo-path from]]
|
||||
[react/view {:style {:width 40 :margin-horizontal 16}}
|
||||
[react/view {:style {:position :absolute}}
|
||||
[react/touchable-highlight {:on-press #(when-not (= current-public-key from)
|
||||
(re-frame/dispatch [:show-profile-desktop from]))}
|
||||
[react/view {:style styles/member-photo-container}
|
||||
[react/image {:source {:uri (if (string/blank? photo-path)
|
||||
(identicon/identicon from)
|
||||
photo-path)}
|
||||
:style styles/photo-style}]]]]]))
|
||||
|
||||
(views/defview quoted-message [{:keys [from text]} outgoing current-public-key]
|
||||
(views/letsubs [{:keys [ens-name alias]} [:contacts/contact-name-by-identity from]]
|
||||
[react/view {:style styles/quoted-message-container}
|
||||
[react/view {:style styles/quoted-message-author-container}
|
||||
[vector-icons/tiny-icon :tiny-icons/tiny-reply {:style (styles/reply-icon outgoing)
|
||||
:width 16
|
||||
:height 16
|
||||
:container-style (when outgoing {:opacity 0.4})}]
|
||||
(chat-utils/format-reply-author from alias ens-name current-public-key (partial message.style/quoted-message-author outgoing))]
|
||||
[react/text {:style (message.style/quoted-message-text outgoing)
|
||||
:number-of-lines 5}
|
||||
(core-utils/truncate-str text constants/chars-collapse-threshold)]]))
|
||||
|
||||
(defn- message-sent? [outgoing-status]
|
||||
(not (#{:not-sent :sending} outgoing-status)))
|
||||
|
||||
(views/defview message-without-timestamp
|
||||
[text {:keys [chat-id message-id content group-chat alias expanded? current-public-key outgoing-status] :as message} style]
|
||||
[react/view {:flex 1 :margin-vertical 5}
|
||||
[react/touchable-highlight {:on-press (fn [arg]
|
||||
(when (= "right" (.-button (.-nativeEvent arg)))
|
||||
(show-desktop-menu
|
||||
[{:text (i18n/label :t/sharing-copy-to-clipboard)
|
||||
:on-select #(do (utils/show-popup "" "Message copied to clipboard") (react/copy-to-clipboard text))}
|
||||
{:text (i18n/label :t/message-reply)
|
||||
:on-select #(when (message-sent? outgoing-status)
|
||||
(re-frame/dispatch [:chat.ui/reply-to-message message-id]))}])))}
|
||||
(let [collapsible? (and (:should-collapse? content) group-chat)
|
||||
char-limit (if (and collapsible? (not expanded?))
|
||||
constants/chars-collapse-threshold constants/desktop-msg-chars-hard-limit)
|
||||
message-text (core-utils/truncate-str (:text content) char-limit)]
|
||||
[react/view {:style styles/message-container}
|
||||
(when (:response-to content)
|
||||
[quoted-message (:response-to content) false current-public-key])
|
||||
[react/text {:style (styles/message-text collapsible? false)
|
||||
:selectable true
|
||||
:selection-color colors/blue-light}
|
||||
(if-let [render-recipe (:render-recipe content)]
|
||||
(chat-utils/render-chunks-desktop char-limit render-recipe message-text)
|
||||
message-text)]
|
||||
(when collapsible?
|
||||
[message/expand-button expanded? chat-id message-id])])]])
|
||||
|
||||
(views/defview photo-placeholder []
|
||||
[react/view {:style {:width 40
|
||||
:margin-horizontal 16}}])
|
||||
|
||||
(views/defview system-message [text {:keys [content from first-in-group? timestamp] :as message}]
|
||||
[react/view
|
||||
[react/view {:style {:flex-direction :row :margin-top 24}}
|
||||
[member-photo from]
|
||||
[react/view {:style {:flex 1}}]
|
||||
[react/text {:style styles/message-timestamp}
|
||||
(time/timestamp->time timestamp)]]
|
||||
[react/view {:style styles/not-first-in-group-wrapper}
|
||||
[photo-placeholder]
|
||||
[react/text {:style styles/system-message-text}
|
||||
text]]])
|
||||
|
||||
(defn message-wrapper [{:keys [from first-in-group? timestamp] :as message} item]
|
||||
[react/view
|
||||
(when first-in-group?
|
||||
[react/view {:style {:flex-direction :row :margin-top 24}}
|
||||
[member-photo from]
|
||||
[message-author-name message]
|
||||
[react/view {:style {:flex 1}}]
|
||||
[react/text {:style styles/message-timestamp}
|
||||
(time/timestamp->time timestamp)]])
|
||||
[react/view {:style styles/not-first-in-group-wrapper}
|
||||
[photo-placeholder]
|
||||
item]])
|
||||
|
||||
(views/defview message-with-name-and-avatar [text message]
|
||||
[message-wrapper message [message-without-timestamp text message]])
|
||||
|
||||
(defmulti message (fn [_ _ {:keys [content-type]}] content-type))
|
||||
|
||||
(defmethod message constants/content-type-sticker
|
||||
[_ _ {:keys [content] :as message}]
|
||||
[message-wrapper message
|
||||
[react/image {:style {:margin 10 :width 140 :height 140}
|
||||
:source {:uri (contenthash/url (:hash content))}}]])
|
||||
|
||||
(views/defview message-content-status [text message]
|
||||
[react/view
|
||||
[system-message text message]])
|
||||
|
||||
(defmethod message constants/content-type-status
|
||||
[text _ message]
|
||||
[message-content-status text message])
|
||||
|
||||
(defmethod message :default
|
||||
[text me? {:keys [message-id chat-id message-status from
|
||||
current-public-key content-type outgoing type value] :as message}]
|
||||
(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
|
||||
{:reagent-render
|
||||
(fn []
|
||||
^{:key (str "message" message-id)}
|
||||
[react/view
|
||||
[message-with-name-and-avatar text message]
|
||||
[react/view {:style (message.style/delivery-status outgoing)}
|
||||
[message/message-delivery-status message]]])}))))
|
||||
|
||||
(def load-step 5)
|
||||
|
||||
(defn load-more [all-messages-count messages-to-load]
|
||||
(let [next-count (min all-messages-count (+ @messages-to-load load-step))]
|
||||
(reset! messages-to-load next-count)))
|
||||
|
||||
(views/defview messages-view [{:keys [chat-id group-chat]}]
|
||||
(views/letsubs [messages [:chats/current-chat-messages-stream]
|
||||
current-public-key [:multiaccount/public-key]
|
||||
messages-to-load (reagent/atom load-step)
|
||||
chat-id* (reagent/atom nil)]
|
||||
{:component-did-update #(if (:messages-initialized? (second (.-argv (.-props %1))))
|
||||
(load-more (count messages) messages-to-load)
|
||||
(re-frame/dispatch [:chat.ui/load-more-messages]))
|
||||
:component-did-mount #(if (:messages-initialized? (second (.-argv (.-props %1))))
|
||||
(load-more (count messages) messages-to-load)
|
||||
(re-frame/dispatch [:chat.ui/load-more-messages]))}
|
||||
(let [scroll-ref (atom nil)
|
||||
scroll-timer (atom nil)
|
||||
scroll-height (atom nil)
|
||||
_ (when (or (not @chat-id*) (not= @chat-id* chat-id))
|
||||
(do
|
||||
(reset! messages-to-load load-step)
|
||||
(reset! chat-id* chat-id)))]
|
||||
[react/view {:style styles/messages-view}
|
||||
[react/scroll-view {:scrollEventThrottle 16
|
||||
:headerHeight styles/messages-list-vertical-padding
|
||||
:footerWidth styles/messages-list-vertical-padding
|
||||
:enableArrayScrollingOptimization true
|
||||
:inverted true
|
||||
:on-scroll (fn [e]
|
||||
(let [ne (.-nativeEvent e)
|
||||
y (.-y (.-contentOffset ne))]
|
||||
(when (<= y 0)
|
||||
(when @scroll-timer (js/clearTimeout @scroll-timer))
|
||||
(reset! scroll-timer (js/setTimeout #(re-frame/dispatch [:chat.ui/load-more-messages]) 300)))
|
||||
(reset! scroll-height (+ y (.-height (.-layoutMeasurement ne))))))
|
||||
:ref #(reset! scroll-ref %)}
|
||||
[react/view
|
||||
(doall
|
||||
(for [{:keys [from content] :as message-obj} (take @messages-to-load messages)]
|
||||
^{:key message-obj}
|
||||
[message (:text content) (= from current-public-key)
|
||||
(assoc message-obj :group-chat group-chat
|
||||
:current-public-key current-public-key)]))]]
|
||||
[connectivity/connectivity-view nil]])))
|
||||
|
||||
(views/defview send-button [inp-ref disconnected?]
|
||||
(views/letsubs [{:keys [input-text]} [:chats/current-chat]]
|
||||
(let [empty? (= "" input-text)
|
||||
inactive? (or empty? disconnected?)]
|
||||
[react/touchable-highlight {:style styles/send-button
|
||||
:disabled inactive?
|
||||
:on-press (fn []
|
||||
(when-not inactive?
|
||||
(.clear @inp-ref)
|
||||
(.focus @inp-ref)
|
||||
(re-frame/dispatch [:chat.ui/send-current-message])))}
|
||||
[react/view {:style (styles/send-icon inactive?)}
|
||||
[vector-icons/icon :main-icons/arrow-left {:style (styles/send-icon-arrow inactive?)}]]])))
|
||||
|
||||
(views/defview reply-message [from alias message-text]
|
||||
(views/letsubs [{:keys [ens-name]} [:contacts/contact-name-by-identity from]
|
||||
current-public-key [:multiaccount/public-key]]
|
||||
[react/view {:style styles/reply-content-container}
|
||||
(chat-utils/format-reply-author from alias ens-name current-public-key styles/reply-content-author)
|
||||
[react/text {:style styles/reply-content-message} message-text]]))
|
||||
|
||||
(views/defview reply-member-photo [from]
|
||||
(views/letsubs [photo-path [:chats/photo-path from]]
|
||||
[react/image {:source {:uri (if (string/blank? photo-path)
|
||||
(identicon/identicon from)
|
||||
photo-path)}
|
||||
:style styles/reply-photo-style}]))
|
||||
|
||||
(views/defview reply-message-view []
|
||||
(views/letsubs [{:keys [alias content from] :as message} [:chats/reply-message]]
|
||||
(when message
|
||||
[react/view {:style styles/reply-wrapper}
|
||||
[react/view {:style styles/reply-container}
|
||||
[reply-member-photo from]
|
||||
[reply-message from alias (:text content)]]
|
||||
[react/touchable-highlight
|
||||
{:style styles/reply-close-highlight
|
||||
:on-press #(re-frame/dispatch [:chat.ui/cancel-message-reply])
|
||||
:accessibility-label :cancel-message-reply}
|
||||
[react/view {}
|
||||
[vector-icons/icon :main-icons/close {:style styles/reply-close-icon}]]]])))
|
||||
|
||||
(views/defview chat-text-input [chat-id input-text]
|
||||
(views/letsubs [inp-ref (atom nil)
|
||||
disconnected? [:disconnected?]
|
||||
{:keys [show-emoji?]} [:desktop]]
|
||||
{:component-will-update
|
||||
(fn [e [_ new-chat-id new-input-text]]
|
||||
(let [[_ old-chat-id] (.. e -props -argv)]
|
||||
(when (not= old-chat-id new-chat-id)
|
||||
;; reset default text when switch to another chat
|
||||
(.setNativeProps @inp-ref #js {:text (or new-input-text "")}))))}
|
||||
(let [component (reagent/current-component)
|
||||
set-container-height-fn #(reagent/set-state component {:container-height %})
|
||||
{:keys [container-height]} (reagent/state component)]
|
||||
[react/view {:style (styles/chat-box container-height)}
|
||||
[react/text-input {:placeholder (i18n/label :t/type-a-message)
|
||||
:auto-focus true
|
||||
:multiline true
|
||||
:blur-on-submit true
|
||||
:style (styles/chat-text-input container-height)
|
||||
:ref #(do (reset! inp-ref %)
|
||||
(re-frame/dispatch [:set-in [:desktop :input-ref] %]))
|
||||
:default-value input-text
|
||||
:on-content-size-change #(set-container-height-fn (.-height (.-contentSize (.-nativeEvent %))))
|
||||
:on-selection-change #(re-frame/dispatch [:set-in [:desktop :input-selection] (.-start (.-selection (.-nativeEvent %)))])
|
||||
:submit-shortcut {:key "Enter"}
|
||||
:on-submit-editing #(when-not disconnected?
|
||||
(.clear @inp-ref)
|
||||
(.focus @inp-ref)
|
||||
(re-frame/dispatch [:chat.ui/send-current-message]))
|
||||
:on-change (fn [e]
|
||||
(let [native-event (.-nativeEvent e)
|
||||
text (.-text native-event)]
|
||||
(re-frame/dispatch [:chat.ui/set-chat-input-text text])))}]
|
||||
[react/touchable-highlight {:on-press #(re-frame/dispatch [:set-in [:desktop :show-emoji?] (not show-emoji?)])}
|
||||
[icons/icon :main-icons/user-profile {:color colors/gray :height 40 :width 40
|
||||
:container-style {:margin-right 14}}]]
|
||||
[send-button inp-ref disconnected?]])))
|
||||
|
||||
(defn emoji-view []
|
||||
(let [current-emoji (reagent/atom "Smileys")]
|
||||
(fn []
|
||||
[react/view {:margin 10}
|
||||
[react/view
|
||||
[react/view {:style {:flex-direction :row :flex-wrap :wrap}}
|
||||
(for [emoj-key (keys emoji/emoji)]
|
||||
[react/touchable-highlight {:on-press #(reset! current-emoji emoj-key)}
|
||||
[react/text {:style {:color (if (= @current-emoji emoj-key) colors/black colors/gray)
|
||||
:margin-right 20 :margin-bottom 5}
|
||||
:number-of-lines 1}
|
||||
emoj-key]])]
|
||||
[react/view {:style {:flex-direction :row :flex-wrap :wrap :margin-top 5 :margin-bottom 10}}
|
||||
(for [[inx emoji-code] (map-indexed vector (get emoji/emoji @current-emoji))]
|
||||
^{:key (str "emoji" inx emoji-code)}
|
||||
[react/touchable-highlight {:on-press #(re-frame/dispatch [:desktop/insert-emoji emoji-code])}
|
||||
[react/view {:padding 2}
|
||||
[react/text {:style {:font-size 20}} emoji-code]]])]]])))
|
||||
|
||||
(views/defview chat-view []
|
||||
(views/letsubs [{:keys [input-text chat-id pending-invite-inviter-name] :as current-chat}
|
||||
[:chats/current-chat]
|
||||
{:keys [show-emoji?]} [:desktop]
|
||||
current-public-key [:multiaccount/public-key]]
|
||||
[react/view {:style styles/chat-view}
|
||||
[toolbar-chat-view current-chat]
|
||||
[react/view {:style styles/separator}]
|
||||
(if pending-invite-inviter-name
|
||||
[views.chat/group-chat-join-section current-public-key current-chat]
|
||||
[messages-view current-chat])
|
||||
[react/view {:style styles/separator}]
|
||||
[reply-message-view]
|
||||
(when show-emoji?
|
||||
[emoji-view show-emoji?])
|
||||
[chat-text-input chat-id input-text]]))
|
||||
|
||||
(views/defview chat-profile []
|
||||
(views/letsubs [identity [:contacts/current-contact-identity]
|
||||
maybe-contact [:contacts/current-contact]]
|
||||
(let [contact (or maybe-contact (contact.db/public-key->new-contact identity))
|
||||
{:keys [added? public-key]} contact]
|
||||
[react/view {:style styles/chat-profile-body}
|
||||
[profile.views/profile-badge contact]
|
||||
;; for private chat, public key will be chat-id
|
||||
[react/view
|
||||
(if added?
|
||||
[react/view {:style styles/chat-profile-row}
|
||||
[react/view {:style styles/chat-profile-icon-container
|
||||
:accessibility-label :add-contact-link}
|
||||
[vector-icons/icon :main-icons/add {:style (styles/chat-profile-icon colors/gray)}]]
|
||||
[react/text {:style (styles/contact-card-text colors/gray)} (i18n/label :t/in-contacts)]]
|
||||
[react/touchable-highlight {:on-press #(re-frame/dispatch [:contact.ui/add-to-contact-pressed public-key])}
|
||||
[react/view {:style styles/chat-profile-row}
|
||||
[react/view {:style styles/chat-profile-icon-container
|
||||
:accessibility-label :add-contact-link}
|
||||
[vector-icons/icon :main-icons/add {:style (styles/chat-profile-icon colors/blue)}]]
|
||||
[react/text {:style (styles/contact-card-text colors/blue)} (i18n/label :t/add-to-contacts)]]])
|
||||
[react/touchable-highlight
|
||||
{:on-press #(re-frame/dispatch
|
||||
[:contact.ui/send-message-pressed {:public-key public-key}])}
|
||||
[react/view {:style styles/chat-profile-row}
|
||||
[react/view {:style styles/chat-profile-icon-container
|
||||
:accessibility-label :send-message-link}
|
||||
[vector-icons/icon :main-icons/message {:style (styles/chat-profile-icon colors/blue)}]]
|
||||
[react/text {:style (styles/contact-card-text colors/blue)}
|
||||
(i18n/label :t/send-message)]]]
|
||||
[react/text {:style styles/chat-profile-contact-code} (i18n/label :t/contact-code)]
|
||||
[react/text {:style {:font-size 14}
|
||||
:selectable true
|
||||
:selection-color colors/blue} public-key]]])))
|
||||
|
|
@ -1,107 +0,0 @@
|
|||
(ns status-im.ui.screens.desktop.main.tabs.home.styles
|
||||
(:require [status-im.ui.components.colors :as colors]))
|
||||
|
||||
(def chat-list-view
|
||||
{:flex 1
|
||||
:background-color colors/white})
|
||||
|
||||
(defn chat-list-item [current?]
|
||||
{:padding-horizontal 16
|
||||
:flex-direction :row
|
||||
:flex 1
|
||||
:justify-content :space-between
|
||||
:background-color (if current? colors/gray-lighter colors/white)
|
||||
:align-items :center})
|
||||
|
||||
(def chat-list-header
|
||||
{:flex-direction :row
|
||||
:align-items :center
|
||||
:height 68
|
||||
:padding 11})
|
||||
|
||||
(def img-container
|
||||
{:height 78
|
||||
:justify-content :center})
|
||||
|
||||
(def chat-icon
|
||||
{:width 46
|
||||
:height 46
|
||||
:border-radius 46
|
||||
:margin-right 16})
|
||||
|
||||
(def unread-messages-icon
|
||||
{:padding-left 6
|
||||
:padding-right 6
|
||||
:margin-top 2
|
||||
:height 15
|
||||
:border-radius 8
|
||||
:justify-content :center
|
||||
:align-items :center
|
||||
:background-color colors/blue})
|
||||
|
||||
(defn unread-messages-text [large?]
|
||||
{:color colors/white
|
||||
:font-size (if large? 11 12)})
|
||||
|
||||
(def chat-list-separator
|
||||
{:height 1
|
||||
:background-color colors/black-transparent})
|
||||
|
||||
(def chat-name-box
|
||||
{:flex-direction :row
|
||||
:flex 1
|
||||
:align-items :center})
|
||||
|
||||
(def chat-name-last-msg-box
|
||||
{:flex 1
|
||||
:padding-vertical 16})
|
||||
|
||||
(defn chat-name [current?]
|
||||
{:font-size 14
|
||||
:font-weight (if current?
|
||||
"700"
|
||||
"400")})
|
||||
|
||||
(def chat-last-message
|
||||
{:color colors/gray
|
||||
:font-size 14
|
||||
:max-height 20})
|
||||
|
||||
(def timestamp
|
||||
{:justify-content :flex-start
|
||||
:align-items :flex-end
|
||||
:padding-vertical 16})
|
||||
|
||||
(def add-new
|
||||
{:background-color colors/blue
|
||||
:width 34
|
||||
:height 34
|
||||
:border-radius 34
|
||||
:justify-content :center
|
||||
:align-items :center})
|
||||
|
||||
(defn topic-image [color]
|
||||
(merge chat-icon
|
||||
{:background-color color
|
||||
:align-items :center
|
||||
:justify-content :center}))
|
||||
|
||||
(def topic-text
|
||||
{:font-size 25
|
||||
:color colors/white})
|
||||
|
||||
(def popup-shaddow
|
||||
{:background-color colors/black-transparent
|
||||
:border-radius 10
|
||||
:margin-top 60
|
||||
:margin-left 120})
|
||||
|
||||
(def popup
|
||||
{:background-color colors/white
|
||||
:padding-right 15
|
||||
:padding-vertical 10
|
||||
:margin-top 1
|
||||
:margin-bottom 4
|
||||
:margin-left 3
|
||||
:margin-right 3
|
||||
:border-radius 10})
|
||||
|
|
@ -1,159 +0,0 @@
|
|||
(ns status-im.ui.screens.desktop.main.tabs.home.views
|
||||
(:require-macros [status-im.utils.views :as views])
|
||||
(:require [re-frame.core :as re-frame]
|
||||
[status-im.utils.gfycat.core :as gfycat]
|
||||
[status-im.i18n :as i18n]
|
||||
[status-im.ui.components.colors :as colors]
|
||||
[status-im.ui.screens.desktop.main.tabs.home.styles :as styles]
|
||||
[status-im.ui.components.popup-menu.views :as popup-menu]
|
||||
[clojure.string :as string]
|
||||
[status-im.ui.screens.home.views.inner-item :as chat-item]
|
||||
[status-im.ui.components.icons.vector-icons :as icons]
|
||||
[status-im.ui.components.react :as react]
|
||||
[status-im.constants :as constants]
|
||||
[status-im.utils.utils :as utils]
|
||||
[status-im.ui.components.react :as components]
|
||||
[status-im.utils.contenthash :as contenthash]
|
||||
[status-im.ui.components.list-item.views :as list-item]))
|
||||
|
||||
(views/defview chat-list-item-inner-view
|
||||
[{:keys [chat-id name group-chat
|
||||
color public? public-key
|
||||
timestamp chat-name
|
||||
last-message]
|
||||
:as chat-item}]
|
||||
(views/letsubs [photo-path [:contacts/chat-photo chat-id]
|
||||
unviewed-messages-count [:chats/unviewed-messages-count chat-id]
|
||||
current-chat-id [:chats/current-chat-id]]
|
||||
(let [last-message (or last-message
|
||||
{:timestamp timestamp})
|
||||
name (or chat-name
|
||||
(gfycat/generate-gfy public-key))
|
||||
[unviewed-messages-label large?] [(utils/unread-messages-count unviewed-messages-count) true]
|
||||
current? (= current-chat-id chat-id)]
|
||||
[react/view {:style (styles/chat-list-item current?)}
|
||||
[react/view {:style styles/img-container}
|
||||
(if public?
|
||||
[react/view {:style (styles/topic-image color)}
|
||||
[react/text {:style styles/topic-text}
|
||||
(string/capitalize (second name))]]
|
||||
[react/image {:style styles/chat-icon
|
||||
:source {:uri photo-path}}])]
|
||||
[react/view {:style styles/chat-name-last-msg-box}
|
||||
[react/view {:style styles/chat-name-box}
|
||||
(when (and group-chat (not public?))
|
||||
[icons/tiny-icon :tiny-icons/tiny-group])
|
||||
(when public?
|
||||
[icons/tiny-icon :tiny-icons/tiny-public])
|
||||
[react/text {:ellipsize-mode :tail
|
||||
:number-of-lines 1
|
||||
:style (styles/chat-name current?)}
|
||||
name]]
|
||||
(let [is-sticker? (= constants/content-type-sticker (:content-type last-message))
|
||||
uri (if is-sticker? (contenthash/url (get-in last-message [:content :hash])) nil)]
|
||||
(if uri
|
||||
[react/image {:style {:margin 2 :width 30 :height 30}
|
||||
:source {:uri uri}}]
|
||||
[react/text {:ellipsize-mode :tail
|
||||
:number-of-lines 1
|
||||
:style styles/chat-last-message}
|
||||
(or (:text last-message)
|
||||
(i18n/label :no-messages-yet))]))]
|
||||
[react/view {:style styles/timestamp}
|
||||
[chat-item/message-timestamp (:timestamp last-message)]
|
||||
(when (pos? unviewed-messages-count)
|
||||
[react/view {:style styles/unread-messages-icon}
|
||||
[react/text {:style (styles/unread-messages-text large?)} unviewed-messages-label]])]])))
|
||||
|
||||
(defn chat-list-item [[chat-id
|
||||
{:keys [group-chat public?] :as chat}]]
|
||||
[react/touchable-highlight
|
||||
{:on-press (fn [arg]
|
||||
(let [right-click? (= "right" (.-button (.-nativeEvent arg)))]
|
||||
(re-frame/dispatch [:chat.ui/navigate-to-chat chat-id])
|
||||
(when right-click?
|
||||
(popup-menu/show-desktop-menu
|
||||
(popup-menu/get-chat-menu-items group-chat public? chat-id)))))}
|
||||
[chat-list-item-inner-view (assoc chat :chat-id chat-id)]])
|
||||
|
||||
(defn tag-view [tag {:keys [on-press]}]
|
||||
[react/touchable-highlight {:style {:border-radius 5
|
||||
:margin 2
|
||||
:padding 4
|
||||
:height 23
|
||||
:background-color (if (= tag "clear filter")
|
||||
colors/red
|
||||
colors/blue)
|
||||
:justify-content :center
|
||||
:align-items :center
|
||||
:align-content :center}
|
||||
:on-press on-press}
|
||||
[react/text {:style {:font-size 10
|
||||
:color colors/white}}
|
||||
tag]])
|
||||
|
||||
(defn search-input [search-filter]
|
||||
[react/view {:style {:flex 1
|
||||
:flex-direction :row}}
|
||||
[react/text-input {:placeholder "Type here to search chats..."
|
||||
:auto-focus true
|
||||
:blur-on-submit true
|
||||
:style {:flex 1
|
||||
:color :black
|
||||
:height 30
|
||||
:margin-left 20
|
||||
:margin-right 22}
|
||||
:default-value search-filter
|
||||
:on-change (fn [e]
|
||||
(let [native-event (.-nativeEvent e)
|
||||
text (.-text native-event)]
|
||||
(re-frame/dispatch [:search/filter-changed text])))}]])
|
||||
|
||||
(defn popup []
|
||||
[react/view {:style {:flex-direction :row}}
|
||||
[react/view {:style styles/popup-shaddow}
|
||||
[react/view {:style styles/popup}
|
||||
[list-item/list-item
|
||||
{:title (i18n/label :t/start-new-chat)
|
||||
:accessibility-label :start-1-1-chat-button
|
||||
:icon :main-icons/add-contact
|
||||
:on-press #(do
|
||||
(re-frame/dispatch [:set-in [:desktop :popup] nil])
|
||||
(re-frame/dispatch [:navigate-to :desktop/new-one-to-one]))}]
|
||||
[list-item/list-item
|
||||
{:title (i18n/label :t/start-group-chat)
|
||||
:accessibility-label :start-group-chat-button
|
||||
:icon :main-icons/group-chat
|
||||
:on-press #(do
|
||||
(re-frame/dispatch [:set-in [:desktop :popup] nil])
|
||||
(re-frame/dispatch [:navigate-to :desktop/new-group-chat]))}]
|
||||
[list-item/list-item
|
||||
{:title (i18n/label :t/new-public-group-chat)
|
||||
:accessibility-label :join-public-chat-button
|
||||
:icon :main-icons/public-chat
|
||||
:on-press #(do
|
||||
(re-frame/dispatch [:set-in [:desktop :popup] nil])
|
||||
(re-frame/dispatch [:navigate-to :desktop/new-public-chat]))}]]]])
|
||||
|
||||
(views/defview chat-list-view [loading?]
|
||||
(views/letsubs [search-filter [:search/filter]
|
||||
logging-in? [:multiaccounts/login]
|
||||
{:keys [all-home-items chats]} [:home-items]]
|
||||
[react/view {:style styles/chat-list-view}
|
||||
[react/view {:style styles/chat-list-header}
|
||||
[search-input search-filter]
|
||||
[react/view
|
||||
[react/touchable-highlight {:on-press (when-not logging-in? #(re-frame/dispatch [:set-in [:desktop :popup] popup]))}
|
||||
[react/view {:style styles/add-new}
|
||||
(if logging-in?
|
||||
[components/activity-indicator {:animating true :color :white}]
|
||||
[icons/icon :main-icons/add {:style {:tint-color :white}}])]]]]
|
||||
[react/scroll-view {:enableArrayScrollingOptimization true}
|
||||
[react/view
|
||||
(for [[index chat] (map-indexed vector (or all-home-items chats))]
|
||||
^{:key (first chat)}
|
||||
[chat-list-item chat])]]]))
|
||||
|
||||
(views/defview chat-list-view-wrapper []
|
||||
(views/letsubs [loading? [:chats/loading?]]
|
||||
[chat-list-view loading?]))
|
||||
|
|
@ -1,208 +0,0 @@
|
|||
(ns status-im.ui.screens.desktop.main.tabs.profile.styles
|
||||
(:require [status-im.ui.components.colors :as colors]))
|
||||
|
||||
(def profile-view
|
||||
{:align-items :center})
|
||||
|
||||
(def profile-badge
|
||||
{:margin-top 34
|
||||
:align-items :center
|
||||
:margin-bottom 16})
|
||||
|
||||
(defn profile-row [active?]
|
||||
{:justify-content :space-between
|
||||
:flex-direction :row
|
||||
:padding-horizontal 24
|
||||
:height 56
|
||||
:align-self :stretch
|
||||
:align-items :center
|
||||
:background-color (if active? colors/gray-lighter colors/white)})
|
||||
|
||||
(defn profile-row-text [color]
|
||||
{:color color
|
||||
:font-size 16})
|
||||
|
||||
(defn profile-row-font [selected?]
|
||||
(if selected? :medium :default))
|
||||
|
||||
(def adv-settings
|
||||
{:justify-content :space-between
|
||||
:flex-direction :row
|
||||
:align-items :center
|
||||
:flex 1})
|
||||
|
||||
(def profile-edit
|
||||
{:margin-top 24
|
||||
:padding-horizontal 24
|
||||
:align-items :flex-end})
|
||||
|
||||
(def profile-photo
|
||||
{:border-radius 100
|
||||
:width 100
|
||||
:height 100})
|
||||
|
||||
(def profile-user-name
|
||||
{:font-size 18})
|
||||
|
||||
(def profile-three-words
|
||||
{:font-size 14})
|
||||
|
||||
(def profile-editing-user-name
|
||||
(merge profile-user-name
|
||||
{:height 20
|
||||
:width 80
|
||||
:background-color colors/gray-lighter
|
||||
:align-items :flex-end}))
|
||||
|
||||
(def share-contact-code
|
||||
{:flex-direction :row
|
||||
:justify-content :space-between
|
||||
:align-items :center
|
||||
:height 45
|
||||
:width 240
|
||||
:margin-horizontal 50
|
||||
:margin-bottom 48
|
||||
:border-radius 8
|
||||
:background-color colors/blue-transparent-10})
|
||||
|
||||
(def share-contact-code-text-container
|
||||
{:margin-left 32
|
||||
:justify-content :center
|
||||
:align-items :center})
|
||||
|
||||
(def share-contact-code-text
|
||||
{:color colors/blue
|
||||
:font-size 14})
|
||||
|
||||
(def share-contact-icon-container
|
||||
{:margin-right 12
|
||||
:width 22
|
||||
:height 22
|
||||
:align-items :center
|
||||
:justify-content :center})
|
||||
|
||||
(def qr-code-container
|
||||
{:align-items :center
|
||||
:padding-top 16
|
||||
:padding-bottom 46
|
||||
:padding-left 58
|
||||
:padding-right 58})
|
||||
|
||||
(def close-icon-container
|
||||
{:flex 1
|
||||
:margin-top 22
|
||||
:margin-right 22
|
||||
:margin-bottom 16
|
||||
:flex-direction :row
|
||||
:justify-content :flex-end})
|
||||
|
||||
(def close-icon
|
||||
{:height 24
|
||||
:width 24
|
||||
:tint-color colors/black})
|
||||
|
||||
(def check-icon
|
||||
{:height 16
|
||||
:width 16
|
||||
:margin-right 8
|
||||
:tint-color colors/green})
|
||||
|
||||
(def qr-code-title
|
||||
{:font-size 20
|
||||
:margin-bottom 32})
|
||||
|
||||
(def qr-code
|
||||
{:width 130
|
||||
:height 130
|
||||
:margin-bottom 16})
|
||||
|
||||
(def qr-code-text
|
||||
{:font-size 16
|
||||
:text-align :center
|
||||
:margin-bottom 16})
|
||||
|
||||
(def qr-code-copy
|
||||
{:width 185
|
||||
:height 45
|
||||
:border-radius 8
|
||||
:background-color colors/blue
|
||||
:justify-content :center
|
||||
:align-items :center})
|
||||
|
||||
(def qr-code-copy-text
|
||||
{:font-size 16
|
||||
:color colors/white})
|
||||
|
||||
(defn tooltip-container [opacity]
|
||||
{:position :absolute
|
||||
:align-items :center
|
||||
:opacity opacity
|
||||
:top -34})
|
||||
|
||||
(def tooltip-icon-text
|
||||
{:flex-direction :row
|
||||
:justify-content :space-between
|
||||
:align-items :center
|
||||
:height 24
|
||||
:border-radius 8
|
||||
:padding-left 10
|
||||
:padding-right 10
|
||||
:background-color colors/tooltip-green})
|
||||
|
||||
(def tooltip-triangle
|
||||
{:width 0
|
||||
:height 0
|
||||
:border-top-width 9.1
|
||||
:border-left-width 9.1
|
||||
:border-right-width 9.1
|
||||
:border-left-color :transparent
|
||||
:border-right-color :transparent
|
||||
:border-top-color colors/tooltip-green})
|
||||
|
||||
(def advanced-settings-title
|
||||
{:margin 24
|
||||
:font-size 20})
|
||||
|
||||
(def adv-settings-subtitle
|
||||
{:margin-left 24
|
||||
:margin-bottom 10
|
||||
:font-weight "700"
|
||||
:font-size 16})
|
||||
|
||||
(def connection-stats-title
|
||||
(merge adv-settings-subtitle
|
||||
{:font-size 14}))
|
||||
|
||||
(def connection-stats-entry
|
||||
{:margin-left 24
|
||||
:margin-bottom 10})
|
||||
|
||||
(def title-separator
|
||||
{:height 1
|
||||
:margin-top 16
|
||||
:margin-bottom 8
|
||||
:background-color colors/black-transparent})
|
||||
|
||||
(defn adv-settings-row-text [color]
|
||||
{:color color
|
||||
:font-size 14})
|
||||
|
||||
(defn adv-settings-row [active?]
|
||||
{:justify-content :space-between
|
||||
:flex-direction :row
|
||||
:padding-horizontal 24
|
||||
:height 56
|
||||
:align-self :stretch
|
||||
:align-items :center
|
||||
:background-color (if active? colors/gray-lighter colors/white)})
|
||||
|
||||
(def pair-button
|
||||
{:margin-left 32})
|
||||
|
||||
(defn connection-circle [disconnected?]
|
||||
{:background-color (if disconnected? colors/red colors/green)
|
||||
:margin-left 24
|
||||
:margin-right 16
|
||||
:width 16
|
||||
:height 16
|
||||
:border-radius 16})
|
||||
|
|
@ -1,333 +0,0 @@
|
|||
(ns status-im.ui.screens.desktop.main.tabs.profile.views
|
||||
(:require-macros [status-im.utils.views :as views])
|
||||
(:require [re-frame.core :as re-frame]
|
||||
[status-im.ui.components.react :as react]
|
||||
[status-im.utils.build :as build]
|
||||
[status-im.utils.config :as config]
|
||||
[status-im.utils.utils :as utils]
|
||||
[status-im.ui.components.colors :as colors]
|
||||
[status-im.i18n :as i18n]
|
||||
[status-im.utils.logging.core :as logging]
|
||||
[status-im.utils.platform :as platform]
|
||||
[status-im.ui.components.icons.vector-icons :as vector-icons]
|
||||
[taoensso.timbre :as log]
|
||||
[status-im.utils.gfycat.core :as gfy]
|
||||
[clojure.string :as string]
|
||||
[status-im.ui.screens.offline-messaging-settings.views :as offline-messaging.views]
|
||||
[status-im.ui.screens.pairing.views :as pairing.views]
|
||||
[status-im.ui.components.qr-code-viewer.views :as qr-code-viewer]
|
||||
[status-im.ui.screens.desktop.main.tabs.profile.styles :as styles]
|
||||
[status-im.ui.screens.pairing.styles :as pairing.styles]
|
||||
[status-im.ui.screens.profile.user.views :as profile]
|
||||
[status-im.ui.screens.profile.seed.views :as profile.recovery]
|
||||
[status-im.ui.components.common.common :as components.common]))
|
||||
|
||||
(defn profile-badge [{:keys [name photo-path public-key]} editing?]
|
||||
[react/view styles/profile-badge
|
||||
[react/image {:source {:uri photo-path}
|
||||
:style styles/profile-photo}]
|
||||
(if editing?
|
||||
[react/text-input {:default-value name
|
||||
:placeholder ""
|
||||
:auto-focus true
|
||||
:style styles/profile-editing-user-name
|
||||
:on-change #(re-frame/dispatch [:my-profile/update-name
|
||||
(.-text (.-nativeEvent %))])}]
|
||||
[react/text {:style styles/profile-user-name
|
||||
:number-of-lines 1}
|
||||
name])
|
||||
(let [gfy-name (gfy/generate-gfy public-key)]
|
||||
(when (and (not= gfy-name gfy/unknown-gfy)
|
||||
(not= gfy-name name))
|
||||
[react/text {:style styles/profile-three-words
|
||||
:number-of-lines 1}
|
||||
gfy-name]))])
|
||||
|
||||
(views/defview copied-tooltip [opacity]
|
||||
(views/letsubs []
|
||||
[react/view {:style (styles/tooltip-container opacity)}
|
||||
[react/view {:style styles/tooltip-icon-text}
|
||||
[vector-icons/icon :main-icons/check
|
||||
{:style styles/check-icon}]
|
||||
[react/text {:style {:font-size 14 :color colors/green}}
|
||||
(i18n/label :sharing-copied-to-clipboard)]]
|
||||
[react/view {:style styles/tooltip-triangle}]]))
|
||||
|
||||
(views/defview qr-code []
|
||||
(views/letsubs [{:keys [public-key]} [:multiaccount]
|
||||
{:keys [qr-copied]} [:tooltips]]
|
||||
[react/view
|
||||
[react/view {:style styles/qr-code-container}
|
||||
[react/text {:style styles/qr-code-title}
|
||||
(string/replace (i18n/label :qr-code-public-key-hint) "\n" "")]
|
||||
[react/view {:style styles/qr-code}
|
||||
[qr-code-viewer/qr-code {:value public-key :size 130}]]
|
||||
[react/view {:style {:align-items :center}}
|
||||
[react/text {:style styles/qr-code-text
|
||||
:selectable true
|
||||
:selection-color colors/blue}
|
||||
public-key]
|
||||
(when qr-copied
|
||||
[copied-tooltip qr-copied])]
|
||||
[react/touchable-highlight {:on-press #(do
|
||||
(re-frame/dispatch [:copy-to-clipboard public-key])
|
||||
(re-frame/dispatch [:show-tooltip :qr-copied]))}
|
||||
[react/view {:style styles/qr-code-copy}
|
||||
[react/text {:style styles/qr-code-copy-text}
|
||||
(i18n/label :copy-qr)]]]]]))
|
||||
|
||||
(defn installations-section [installations]
|
||||
[react/view
|
||||
(if (string/blank? (-> installations first :name))
|
||||
[pairing.views/edit-installation-name]
|
||||
[react/view
|
||||
[pairing.views/pair-this-device]
|
||||
[pairing.views/info-section]
|
||||
[pairing.views/sync-devices]
|
||||
[react/view {:style pairing.styles/installation-list}
|
||||
[pairing.views/your-device (first installations)]
|
||||
(for [installation (rest installations)]
|
||||
^{:key (:installation-id installation)}
|
||||
[react/view {:style {:margin-bottom 10}}
|
||||
(pairing.views/render-row installation)])]])])
|
||||
|
||||
(defn connection-status
|
||||
"generates a composite message of the current connection state given peer and mailserver statuses"
|
||||
[peers-count mailserver-state peers-disconnected?]
|
||||
;; TODO probably not ideal criteria for searching
|
||||
;; ask about directly calling rpc method to find discovery.started
|
||||
(let [peers-connected? (not peers-disconnected?)
|
||||
mailserver-connected? (= :connected mailserver-state)]
|
||||
(cond
|
||||
(and peers-connected? (not mailserver-connected?))
|
||||
(str "Connected with " peers-count " peers")
|
||||
(and peers-connected? mailserver-connected?)
|
||||
(str "Connected with " peers-count " peers including mailserver.")
|
||||
:else
|
||||
"Disconnected")))
|
||||
|
||||
(defn connection-statistics-display
|
||||
[{:keys [mailserver-request-process-time
|
||||
mailserver-request-errors
|
||||
les-packets-in
|
||||
les-packets-out
|
||||
p2p-inbound-traffic
|
||||
p2p-outbound-traffic]}]
|
||||
[react/view {:style {:flex-direction :row}}
|
||||
[react/view
|
||||
[react/text {:style styles/connection-stats-title}
|
||||
"Mailserver requests"]
|
||||
[react/text {:style styles/connection-stats-entry}
|
||||
(str "errors " mailserver-request-errors)]
|
||||
[react/text {:style styles/connection-stats-entry}
|
||||
(str "process time " mailserver-request-process-time)]]
|
||||
[react/view
|
||||
[react/text {:style styles/connection-stats-title}
|
||||
"p2p traffic"]
|
||||
[react/text {:style styles/connection-stats-entry}
|
||||
(str "inbound " p2p-inbound-traffic)]
|
||||
[react/text {:style styles/connection-stats-entry}
|
||||
(str "outbound " p2p-outbound-traffic)]]
|
||||
[react/view
|
||||
[react/text {:style styles/connection-stats-title}
|
||||
"LES packets"]
|
||||
[react/text {:style styles/connection-stats-entry}
|
||||
(str "inbound " les-packets-in)]
|
||||
[react/text {:style styles/connection-stats-entry}
|
||||
(str "outbound " les-packets-out)]]])
|
||||
|
||||
(views/defview logging-display []
|
||||
(views/letsubs [logging-enabled [:settings/logging-enabled]]
|
||||
[react/view
|
||||
[react/view {:style (styles/adv-settings-row false)}
|
||||
[react/text {:style (assoc (styles/adv-settings-row-text colors/black)
|
||||
:font-size 14)}
|
||||
(i18n/label :t/logging-enabled)]
|
||||
[react/switch {:track-color #js {:true colors/blue :false nil}
|
||||
:value logging-enabled
|
||||
:on-value-change #(re-frame/dispatch [:log-level.ui/logging-enabled (not logging-enabled)])}]]
|
||||
[react/view {:style (styles/adv-settings-row false)}
|
||||
[react/touchable-highlight {:on-press #(re-frame/dispatch [:logging.ui/send-logs-pressed])}
|
||||
[react/text {:style (styles/adv-settings-row-text colors/red)}
|
||||
(i18n/label :t/send-logs)]]]]))
|
||||
|
||||
(views/defview advanced-settings []
|
||||
(views/letsubs [current-mailserver-id [:mailserver/current-id]
|
||||
{:keys [settings]} [:multiaccount]
|
||||
mailservers [:mailserver/fleet-mailservers]
|
||||
mailserver-state [:mailserver/state]
|
||||
preferred-mailserver-id [:mailserver/preferred-id]
|
||||
peers-count [:peers-count]
|
||||
connection-stats [:connection-stats]
|
||||
disconnected [:disconnected?]]
|
||||
(let [render-fn (offline-messaging.views/render-row
|
||||
current-mailserver-id
|
||||
preferred-mailserver-id)
|
||||
datasync? (:datasync? settings)
|
||||
v1-messages? (:datasync? settings)
|
||||
disable-discovery-topic? (:disable-discovery-topic? settings)
|
||||
connection-message (connection-status peers-count mailserver-state disconnected)]
|
||||
[react/scroll-view
|
||||
[react/text {:style styles/advanced-settings-title}
|
||||
(i18n/label :advanced-settings)]
|
||||
|
||||
[react/view {:style styles/title-separator}]
|
||||
[react/text {:style styles/adv-settings-subtitle} "Connections"]
|
||||
[react/view {:style {:flex-direction :row
|
||||
:margin-bottom 8}}
|
||||
[react/view {:style (styles/connection-circle disconnected)}]
|
||||
[react/text connection-message]]
|
||||
(connection-statistics-display connection-stats)
|
||||
|
||||
[react/view {:style styles/title-separator}]
|
||||
[react/text {:style styles/adv-settings-subtitle} (i18n/label :offline-messaging)]
|
||||
[offline-messaging.views/pinned-state preferred-mailserver-id]
|
||||
[react/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to :edit-mailserver])}
|
||||
[react/view {:style {:border-radius 8
|
||||
:flex 1
|
||||
:margin-left 24
|
||||
:width 90
|
||||
:padding 4
|
||||
:background-color colors/blue}}
|
||||
[react/text {:style {:color colors/white}}
|
||||
"Add mailserver"]]]
|
||||
[react/view
|
||||
(for [mailserver (vals mailservers)]
|
||||
^{:key (:id mailserver)}
|
||||
[react/view {:style {:margin-vertical 8}}
|
||||
[render-fn mailserver]])]
|
||||
[react/view {:style styles/title-separator}]
|
||||
[react/text {:style styles/adv-settings-subtitle} (i18n/label :bootnodes)]
|
||||
[react/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to :bootnodes-settings])}
|
||||
[react/view {:style {:border-radius 8
|
||||
:flex 1
|
||||
:margin-left 24
|
||||
:width 90
|
||||
:padding 4
|
||||
:background-color colors/blue}}
|
||||
[react/text {:style {:color colors/white}}
|
||||
"Bootnodes settings"]]]
|
||||
|
||||
[react/view {:style styles/title-separator}]
|
||||
[react/text {:style styles/adv-settings-subtitle} (i18n/label :t/logging)]
|
||||
[logging-display]
|
||||
[react/view {:style styles/title-separator}]
|
||||
[react/text {:style styles/adv-settings-subtitle} (i18n/label :t/v1-messages)]
|
||||
[react/view {:style (styles/profile-row false)}
|
||||
[react/text {:style (styles/profile-row-text colors/black)} (i18n/label :t/v1-messages)]
|
||||
[react/switch {:track-color #js {:true colors/blue :false nil}
|
||||
:value v1-messages?
|
||||
:on-value-change #(re-frame/dispatch [:multiaccounts.ui/toggle-v1-messages (not v1-messages?)])}]]
|
||||
|
||||
[react/view {:style styles/title-separator}]
|
||||
[react/text {:style styles/adv-settings-subtitle} (i18n/label :t/datasync)]
|
||||
[react/view {:style (styles/profile-row false)}
|
||||
[react/text {:style (styles/profile-row-text colors/black)} (i18n/label :t/datasync)]
|
||||
[react/switch {:track-color #js {:true colors/blue :false nil}
|
||||
:value datasync?
|
||||
:on-value-change #(re-frame/dispatch [:multiaccounts.ui/toggle-datasync (not datasync?)])}]]
|
||||
|
||||
[react/view {:style styles/title-separator}]
|
||||
[react/text {:style styles/adv-settings-subtitle} (i18n/label :t/disable-discovery-topic)]
|
||||
[react/view {:style (styles/profile-row false)}
|
||||
[react/text {:style (styles/profile-row-text colors/black)} (i18n/label :t/disable-discovery-topic)]
|
||||
[react/switch {:track-color #js {:true colors/blue :false nil}
|
||||
:value disable-discovery-topic?
|
||||
:on-value-change #(re-frame/dispatch [:multiaccounts.ui/toggle-disable-discovery-topic (not disable-discovery-topic?)])}]]])))
|
||||
|
||||
(views/defview installations []
|
||||
(views/letsubs [installations [:pairing/installations]]
|
||||
[react/scroll-view
|
||||
(installations-section installations)]))
|
||||
|
||||
(views/defview backup-recovery-phrase []
|
||||
[profile.recovery/backup-seed])
|
||||
|
||||
(defn share-contact-code []
|
||||
[react/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to :qr-code])}
|
||||
[react/view {:style styles/share-contact-code}
|
||||
[react/view {:style styles/share-contact-code-text-container}
|
||||
[react/text {:style styles/share-contact-code-text}
|
||||
(i18n/label :share-contact-code)]]
|
||||
[react/view {:style styles/share-contact-icon-container
|
||||
:accessibility-label :share-my-contact-code-button}
|
||||
[vector-icons/icon :main-icons/qr {:style {:tint-color colors/blue}}]]]])
|
||||
|
||||
(defn help-item [help-open?]
|
||||
[react/touchable-highlight {:style (styles/adv-settings-row help-open?)
|
||||
:on-press #(re-frame/dispatch [:navigate-to (if help-open? :home :help-center)])}
|
||||
[react/view {:style styles/adv-settings}
|
||||
[react/text {:style (styles/adv-settings-row-text colors/black)}
|
||||
(i18n/label :t/help-center)]
|
||||
[vector-icons/icon :main-icons/next {:style {:tint-color colors/gray}}]]])
|
||||
|
||||
(defn about-app-item [open?]
|
||||
[react/touchable-highlight {:style (styles/adv-settings-row open?)
|
||||
:on-press #(re-frame/dispatch [:navigate-to (if open? :home :about-app)])}
|
||||
[react/view {:style styles/adv-settings}
|
||||
[react/text {:style (styles/adv-settings-row-text colors/black)}
|
||||
(i18n/label :t/about-app)]
|
||||
[vector-icons/icon :main-icons/next {:style {:tint-color colors/gray}}]]])
|
||||
|
||||
(defn advanced-settings-item [adv-settings-open?]
|
||||
[react/touchable-highlight {:style (styles/adv-settings-row adv-settings-open?)
|
||||
:on-press #(do
|
||||
(re-frame/dispatch [:navigate-to (if adv-settings-open? :home :advanced-settings)])
|
||||
(re-frame/dispatch [:load-debug-metrics]))}
|
||||
[react/view {:style styles/adv-settings}
|
||||
[react/text {:style (styles/adv-settings-row-text colors/black)}
|
||||
(i18n/label :t/advanced-settings)]
|
||||
[vector-icons/icon :main-icons/next {:style {:tint-color colors/gray}}]]])
|
||||
|
||||
(views/defview profile [{:keys [mnemonic] :as user}]
|
||||
(views/letsubs [current-view-id [:view-id]
|
||||
editing? [:my-profile/editing?]] ;; TODO janherich: refactor my-profile, unnecessary complicated structure in db (could be just `:staged-name`/`:editing?` fields in multiaccount map) and horrible way to access it woth `:get`/`:set` subs/events
|
||||
(let [adv-settings-open? (= current-view-id :advanced-settings)
|
||||
about-app-open? (= current-view-id :about-app)
|
||||
help-open? (= current-view-id :help-center)
|
||||
installations-open? (= current-view-id :installations)
|
||||
backup-recovery-phrase-open? (= current-view-id :backup-recovery-phrase)
|
||||
notifications? (get-in user [:desktop-notifications?])
|
||||
show-backup-seed? (not mnemonic)]
|
||||
[react/view
|
||||
[react/view {:style styles/profile-edit}
|
||||
[react/touchable-highlight {:on-press #(re-frame/dispatch (if editing?
|
||||
[:my-profile/save-profile]
|
||||
[:my-profile/start-editing-profile]))}
|
||||
[react/text {:style {:color colors/blue}}
|
||||
(i18n/label (if editing? :t/done :t/edit))]]]
|
||||
[react/view styles/profile-view
|
||||
[profile-badge user editing?]
|
||||
[share-contact-code]
|
||||
[react/view {:style (styles/profile-row false)}
|
||||
[react/text {:style (styles/profile-row-text colors/black)} (i18n/label :notifications)]
|
||||
[react/switch {:track-color #js {:true colors/blue :false nil}
|
||||
:value notifications?
|
||||
:on-value-change #(re-frame/dispatch [:multiaccounts.ui/notifications-enabled (not notifications?)])}]]
|
||||
[advanced-settings-item adv-settings-open?]
|
||||
[help-item help-open?]
|
||||
[about-app-item about-app-open?]
|
||||
[react/touchable-highlight {:style (styles/profile-row installations-open?)
|
||||
:on-press #(re-frame/dispatch [:navigate-to (if installations-open? :home :installations)])}
|
||||
[react/view {:style styles/adv-settings}
|
||||
[react/text {:style (styles/profile-row-text colors/black)}
|
||||
(i18n/label :t/devices)]
|
||||
[vector-icons/icon :main-icons/next {:style {:tint-color colors/gray}}]]]
|
||||
(when show-backup-seed?
|
||||
[react/touchable-highlight {:style (styles/profile-row backup-recovery-phrase-open?)
|
||||
:on-press #(re-frame/dispatch [:navigate-to :backup-recovery-phrase])}
|
||||
[react/view {:style styles/adv-settings}
|
||||
[react/text {:style (styles/profile-row-text colors/black)}
|
||||
(i18n/label :wallet-backup-recovery-title)]
|
||||
[components.common/counter {:size 22} 1]]])
|
||||
[react/view {:style (styles/profile-row false)}
|
||||
[react/touchable-highlight {:on-press #(re-frame/dispatch [:multiaccounts.logout.ui/logout-confirmed])}
|
||||
[react/text {:style (styles/profile-row-text colors/red)} (i18n/label :t/logout)]]
|
||||
[react/view [react/text {:style (styles/profile-row-text colors/gray)} (str "V" build/version " (" build/commit-sha ")")]]]]])))
|
||||
|
||||
(views/defview profile-data []
|
||||
(views/letsubs
|
||||
[user [:multiaccount]]
|
||||
{:component-will-unmount
|
||||
#(re-frame/dispatch [:set :my-profile/editing? false])}
|
||||
[profile user]))
|
||||
|
|
@ -1,15 +1,10 @@
|
|||
(ns status-im.ui.screens.desktop.main.views
|
||||
(:require-macros [status-im.utils.views :as views])
|
||||
(:require [status-im.ui.screens.desktop.main.tabs.profile.views :as profile.views]
|
||||
[status-im.ui.screens.desktop.main.tabs.home.views :as home.views]
|
||||
[status-im.ui.screens.desktop.main.styles :as styles]
|
||||
[status-im.ui.screens.desktop.main.chat.views :as chat.views]
|
||||
[status-im.ui.screens.desktop.main.add-new.views :as add-new.views]
|
||||
(:require [status-im.ui.screens.desktop.main.styles :as styles]
|
||||
[status-im.ui.screens.bootnodes-settings.edit-bootnode.views :as edit-bootnode]
|
||||
[status-im.ui.screens.about-app.views :as about-app.views]
|
||||
[status-im.ui.screens.help-center.views :as help-center.views]
|
||||
[status-im.ui.screens.bootnodes-settings.views :as bootnodes]
|
||||
[status-im.ui.components.desktop.tabs :as tabs]
|
||||
[status-im.ui.components.react :as react]
|
||||
[status-im.ui.screens.offline-messaging-settings.edit-mailserver.views :as edit-mailserver]
|
||||
[re-frame.core :as re-frame]))
|
||||
|
|
@ -22,8 +17,6 @@
|
|||
(views/defview tab-views []
|
||||
(views/letsubs [{:keys [tab-view-id]} [:desktop/desktop]]
|
||||
(let [component (case tab-view-id
|
||||
:profile profile.views/profile-data
|
||||
:home home.views/chat-list-view-wrapper
|
||||
react/view)]
|
||||
[react/view {:style {:flex 1}}
|
||||
[component]])))
|
||||
|
|
@ -41,20 +34,11 @@
|
|||
(views/defview main-view []
|
||||
(views/letsubs [view-id [:view-id]]
|
||||
(let [component (case view-id
|
||||
:chat chat.views/chat-view
|
||||
:desktop/new-one-to-one add-new.views/new-one-to-one
|
||||
:desktop/new-public-chat add-new.views/new-public-chat
|
||||
:desktop/new-group-chat add-new.views/new-group-chat
|
||||
:qr-code profile.views/qr-code
|
||||
:advanced-settings profile.views/advanced-settings
|
||||
:edit-mailserver edit-mailserver/edit-mailserver
|
||||
:bootnodes-settings bootnodes/bootnodes-settings
|
||||
:edit-bootnode edit-bootnode/edit-bootnode
|
||||
:about-app about-app.views/about-app
|
||||
:help-center help-center.views/help-center
|
||||
:installations profile.views/installations
|
||||
:chat-profile chat.views/chat-profile
|
||||
:backup-recovery-phrase profile.views/backup-recovery-phrase
|
||||
status-view)]
|
||||
[react/view {:style {:flex 1}}
|
||||
[component]])))
|
||||
|
|
@ -63,7 +47,6 @@
|
|||
[react/view {:style styles/main-views}
|
||||
[react/view {:style styles/left-sidebar}
|
||||
[react/view {:style {:flex 1}}
|
||||
[tab-views]]
|
||||
[tabs/main-tabs]]
|
||||
[tab-views]]]
|
||||
[react/view {:style styles/pane-separator}]
|
||||
[main-view]])
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@
|
|||
[status-im.ui.components.list-selection :as list-selection]
|
||||
[status-im.ui.components.react :as react]
|
||||
[status-im.ui.screens.add-new.new-chat.db :as new-chat.db]
|
||||
[status-im.ui.screens.desktop.main.chat.events :as desktop.events]
|
||||
[status-im.ui.screens.navigation :as navigation]
|
||||
[status-im.utils.config :as config]
|
||||
[status-im.utils.fx :as fx]
|
||||
|
|
@ -81,9 +80,7 @@
|
|||
(log/info "universal-links: handling view profile" public-key)
|
||||
(if (new-chat.db/own-public-key? db public-key)
|
||||
(navigation/navigate-to-cofx cofx :my-profile nil)
|
||||
(if platform/desktop?
|
||||
(desktop.events/show-profile-desktop public-key cofx)
|
||||
(navigation/navigate-to-cofx (assoc-in cofx [:db :contacts/identity] public-key) :profile nil))))
|
||||
(navigation/navigate-to-cofx (assoc-in cofx [:db :contacts/identity] public-key) :profile nil)))
|
||||
|
||||
(fx/defn handle-eip681 [cofx url]
|
||||
(fx/merge cofx
|
||||
|
|
|
|||
Loading…
Reference in New Issue