diff --git a/src/status_im/browser/core.cljs b/src/status_im/browser/core.cljs index 93f2a1dd58..71e745402a 100644 --- a/src/status_im/browser/core.cljs +++ b/src/status_im/browser/core.cljs @@ -301,6 +301,19 @@ (utils.universal-links/handle-url link cofx) {:browser/show-browser-selection link})) +(defn filter-letters-numbers-and-replace-dot-on-dash [value] + (let [cc (.charCodeAt value 0)] + (cond (or (and (> cc 96) (< cc 123)) + (and (> cc 64) (< cc 91)) + (and (> cc 47) (< cc 58))) + value + (= cc 46) + "-"))) + +(defn open-chat-from-browser [host cofx] + (let [topic (string/lower-case (apply str (map filter-letters-numbers-and-replace-dot-on-dash host)))] + {:dispatch [:create-new-public-chat topic true]})) + (re-frame/reg-fx :browser/resolve-ens-multihash (fn [{:keys [web3 registry ens-name cb]}] diff --git a/src/status_im/chat/events.cljs b/src/status_im/chat/events.cljs index 114d981dd8..46b1595af3 100644 --- a/src/status_im/chat/events.cljs +++ b/src/status_im/chat/events.cljs @@ -111,16 +111,17 @@ :confirm-button-text (i18n/label :t/clear) :on-accept #(re-frame/dispatch [:clear-history])}})) -(defn create-new-public-chat [topic cofx] +(defn create-new-public-chat [topic modal? cofx] (handlers-macro/merge-fx cofx (models/add-public-chat topic) - (models/navigate-to-chat topic {:navigation-replace? true}) + (models/navigate-to-chat topic {:modal? modal? + :navigation-replace? true}) (public-chat/join-public-chat topic))) (handlers/register-handler-fx :create-new-public-chat - (fn [cofx [_ topic]] - (create-new-public-chat topic cofx))) + (fn [cofx [_ topic modal?]] + (create-new-public-chat topic modal? cofx))) (defn- group-name-from-contacts [selected-contacts all-contacts username] (->> selected-contacts diff --git a/src/status_im/chat/models.cljs b/src/status_im/chat/models.cljs index c369da9ce5..5708def5ed 100644 --- a/src/status_im/chat/models.cljs +++ b/src/status_im/chat/models.cljs @@ -171,13 +171,23 @@ (defn navigate-to-chat "Takes coeffects map and chat-id, returns effects necessary for navigation and preloading data" - [chat-id {:keys [navigation-replace?]} cofx] - (if navigation-replace? + [chat-id {:keys [modal? navigation-replace?]} cofx] + (cond + + modal? + (handlers-macro/merge-fx + cofx + (navigation/navigate-to-cofx :chat-modal {}) + (preload-chat-data chat-id)) + + navigation-replace? (handlers-macro/merge-fx cofx (navigation/navigate-reset {:index 1 :actions [{:routeName :home} {:routeName :chat}]}) (preload-chat-data chat-id)) + + :else (handlers-macro/merge-fx cofx (navigation/navigate-to-cofx :chat {}) (preload-chat-data chat-id)))) diff --git a/src/status_im/chat/models/message.cljs b/src/status_im/chat/models/message.cljs index 6dc4561a33..c3c7458580 100644 --- a/src/status_im/chat/models/message.cljs +++ b/src/status_im/chat/models/message.cljs @@ -125,7 +125,7 @@ {:keys [from message-id chat-id content content-type clock-value js-obj] :as raw-message} {:keys [db now] :as cofx}] (let [{:keys [web3 current-chat-id view-id]} db - current-chat? (and (= :chat view-id) (= current-chat-id chat-id)) + current-chat? (and (or (= :chat view-id) (= :chat-modal view-id)) (= current-chat-id chat-id)) {:keys [public?] :as chat} (get-in db [:chats chat-id]) add-message-fn (if batch? add-batch-message add-single-message) message (-> raw-message diff --git a/src/status_im/events.cljs b/src/status_im/events.cljs index 1253a7e99c..cad831a3a6 100644 --- a/src/status_im/events.cljs +++ b/src/status_im/events.cljs @@ -706,3 +706,8 @@ :browser.ui/dapp-url-submitted (fn [cofx [_ dapp-url]] (browser/open-url dapp-url cofx))) + +(handlers/register-handler-fx + :browser.ui/open-modal-chat-button-pressed + (fn [cofx [_ host]] + (browser/open-chat-from-browser host cofx))) diff --git a/src/status_im/ui/screens/browser/styles.cljs b/src/status_im/ui/screens/browser/styles.cljs index 317eed69a6..98cae110ee 100644 --- a/src/status_im/ui/screens/browser/styles.cljs +++ b/src/status_im/ui/screens/browser/styles.cljs @@ -19,11 +19,12 @@ :ios {:margin-top 4} :android {:font-size 13}}) -(def toolbar +(def navbar {:background-color :white :height 48 :flex-direction :row :align-items :center + :justify-content :space-between :padding-horizontal 32}) (def disabled-button diff --git a/src/status_im/ui/screens/browser/views.cljs b/src/status_im/ui/screens/browser/views.cljs index aa5df3f55f..43fde357fa 100644 --- a/src/status_im/ui/screens/browser/views.cljs +++ b/src/status_im/ui/screens/browser/views.cljs @@ -77,8 +77,8 @@ (let [domain-name (nth (re-find #"^\w+://(www\.)?([^/:]+)" url) 2)] (get (:inject-js browser-config) domain-name)))) -(defn navigation [webview browser can-go-back? can-go-forward?] - [react/view styles/toolbar +(defn navigation [url webview can-go-back? can-go-forward?] + [react/view styles/navbar [react/touchable-highlight {:on-press #(re-frame/dispatch [:browser.ui/previous-page-button-pressed]) :disabled (not can-go-back?) :style (when-not can-go-back? styles/disabled-button) @@ -87,12 +87,13 @@ [icons/icon :icons/arrow-left]]] [react/touchable-highlight {:on-press #(re-frame/dispatch [:browser.ui/next-page-button-pressed]) :disabled (not can-go-forward?) - :style (merge styles/forward-button - (when-not can-go-forward? styles/disabled-button)) + :style (when-not can-go-forward? styles/disabled-button) :accessibility-label :next-page-button} [react/view [icons/icon :icons/arrow-right]]] - [react/view {:flex 1}] + [react/touchable-highlight + {:on-press #(re-frame/dispatch [:browser.ui/open-modal-chat-button-pressed (http/url-host url)])} + [icons/icon :icons/chats]] [react/touchable-highlight {:on-press #(.reload @webview)} [icons/icon :icons/refresh]]]) @@ -139,7 +140,7 @@ (when (or loading? resolving?) [react/view styles/web-view-loading [react/activity-indicator {:animating true}]])] - [navigation webview browser can-go-back? can-go-forward?] + [navigation url webview can-go-back? can-go-forward?] [permissions.views/permissions-anim-panel browser show-permission] (when show-tooltip [tooltip/bottom-tooltip-info diff --git a/src/status_im/ui/screens/chat/input/input.cljs b/src/status_im/ui/screens/chat/input/input.cljs index 3a5d22e5b3..261d423906 100644 --- a/src/status_im/ui/screens/chat/input/input.cljs +++ b/src/status_im/ui/screens/chat/input/input.cljs @@ -102,12 +102,12 @@ [vi/icon :icons/input-commands {:container-style style/input-commands-icon :color :dark}]]]))) -(defview input-container [] +(defview input-container [modal?] (letsubs [margin [:chat-input-margin] {:keys [input-text]} [:get-current-chat] result-box [:get-current-chat-ui-prop :result-box]] (let [single-line-input? (:singleLineInput result-box)] - [react/view {:style (style/root margin) + [react/view {:style (style/root (if modal? 0 margin)) :on-layout #(let [h (-> (.-nativeEvent %) (.-layout) (.-height))] @@ -119,9 +119,9 @@ [commands-button] [send-button/send-button-view])]]))) -(defn container [] +(defn container [modal?] [react/view [parameter-box/parameter-box-view] [suggestions/suggestions-view] [validation-messages/validation-messages-view] - [input-container]]) + [input-container modal?]]) diff --git a/src/status_im/ui/screens/chat/message/message.cljs b/src/status_im/ui/screens/chat/message/message.cljs index a0b6bb562c..a9a77d5cb9 100644 --- a/src/status_im/ui/screens/chat/message/message.cljs +++ b/src/status_im/ui/screens/chat/message/message.cljs @@ -326,13 +326,14 @@ display-username? from outgoing + modal? username] :as message} content] [react/view (style/group-message-wrapper message) [react/view (style/message-body message) (when display-photo? [react/view style/message-author (when last-in-group? - [react/touchable-highlight {:on-press #(re-frame/dispatch [:show-profile from])} + [react/touchable-highlight {:on-press #(when-not modal? (re-frame/dispatch [:show-profile from]))} [react/view [photos/member-photo from]]])]) [react/view (style/group-message-view outgoing) @@ -343,7 +344,7 @@ [react/view (style/delivery-status outgoing) [message-delivery-status message]]]) -(defn chat-message [{:keys [outgoing group-chat current-public-key content-type content] :as message}] +(defn chat-message [{:keys [outgoing group-chat modal? current-public-key content-type content] :as message}] [react/view [react/touchable-highlight {:on-press (fn [_] (re-frame/dispatch [:set-chat-ui-props {:messages-focused? true}]) @@ -355,4 +356,5 @@ [message-content message-body (merge message {:current-public-key current-public-key :group-chat group-chat + :modal? modal? :incoming-group incoming-group})])]]]) diff --git a/src/status_im/ui/screens/chat/views.cljs b/src/status_im/ui/screens/chat/views.cljs index 4246236b64..1c36109048 100644 --- a/src/status_im/ui/screens/chat/views.cljs +++ b/src/status_im/ui/screens/chat/views.cljs @@ -22,7 +22,8 @@ [status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.components.animation :as animation] [status-im.ui.components.icons.vector-icons :as vector-icons] - [status-im.ui.components.colors :as colors])) + [status-im.ui.components.colors :as colors] + [status-im.ui.components.toolbar.actions :as toolbar.actions])) (defview add-contact-bar [contact-identity] (letsubs [{:keys [hide-contact?] :as contact} [:get-contact-by-identity]] @@ -46,22 +47,26 @@ (list-selection/show {:title chat-name :options (actions/actions group-chat? chat-id public?)})) -(defview chat-toolbar [public?] +(defview chat-toolbar [public? modal?] (letsubs [name [:get-current-chat-name] {:keys [group-chat chat-id contacts]} [:get-current-chat]] [react/view - [status-bar/status-bar] + [status-bar/status-bar (when modal? {:type :modal-white})] [toolbar/platform-agnostic-toolbar {} - (toolbar/nav-back-count {:home? true}) + (if modal? + [toolbar/nav-button + (toolbar.actions/close toolbar.actions/default-handler)] + (toolbar/nav-back-count {:home? true})) [toolbar-content/toolbar-content-view] - [toolbar/actions [{:icon :icons/wallet - :icon-opts {:color :black - :accessibility-label :wallet-modal-button} - :handler #(re-frame/dispatch [:navigate-to :wallet-modal])} - {:icon :icons/options - :icon-opts {:color :black - :accessibility-label :chat-menu-button} - :handler #(on-options chat-id name group-chat public?)}]]] + (when-not modal? + [toolbar/actions [{:icon :icons/wallet + :icon-opts {:color :black + :accessibility-label :wallet-modal-button} + :handler #(re-frame/dispatch [:navigate-to :wallet-modal])} + {:icon :icons/options + :icon-opts {:color :black + :accessibility-label :chat-menu-button} + :handler #(on-options chat-id name group-chat public?)}]])] (when-not (or public? group-chat) [add-contact-bar (first contacts)])])) (defmulti message-row (fn [{{:keys [type]} :row}] type)) @@ -71,9 +76,10 @@ [message-datemark/chat-datemark value]) (defmethod message-row :default - [{:keys [group-chat current-public-key row]}] + [{:keys [group-chat current-public-key modal? row]}] [message/chat-message (assoc row :group-chat group-chat + :modal? modal? :current-public-key current-public-key)]) (defview messages-view-animation [message-view] @@ -112,7 +118,7 @@ [react/text {:style style/empty-chat-text-name} (:name contact)]] (i18n/label :t/empty-chat-description))]]))) -(defview messages-view [group-chat] +(defview messages-view [group-chat modal?] (letsubs [messages [:get-current-chat-messages-stream] chat [:get-current-chat] current-public-key [:get-current-public-key]] @@ -124,6 +130,7 @@ :key-fn #(or (:message-id %) (:value %)) :render-fn (fn [message] [message-row {:group-chat group-chat + :modal? modal? :current-public-key current-public-key :row message}]) :inverted true @@ -131,8 +138,8 @@ :enableEmptySections true :keyboardShouldPersistTaps :handled}]))) -(defview chat [] - (letsubs [{:keys [group-chat public? input-text]} [:get-current-chat] +(defview chat-root [modal?] + (letsubs [{:keys [group-chat public?]} [:get-current-chat] show-bottom-info? [:get-current-chat-ui-prop :show-bottom-info?] show-message-options? [:get-current-chat-ui-prop :show-message-options?] current-view [:get :view-id]] @@ -145,14 +152,20 @@ [react/view {:style style/chat-view :on-layout (fn [e] (re-frame/dispatch [:set :layout-height (-> e .-nativeEvent .-layout .-height)]))} - [chat-toolbar public?] - (if (= :chat current-view) + [chat-toolbar public? modal?] + (if (or (= :chat current-view) modal?) [messages-view-animation - [messages-view group-chat]] + [messages-view group-chat modal?]] [react/view style/message-view-preview]) - [input/container {:text-empty? (string/blank? input-text)}] + [input/container modal?] (when show-bottom-info? [bottom-info/bottom-info-view]) (when show-message-options? [message-options/view]) [connectivity/error-view {:top (get platform/platform-specific :status-bar-default-height)}]]])) + +(defview chat [] + [chat-root false]) + +(defview chat-modal [] + [chat-root true]) diff --git a/src/status_im/ui/screens/views.cljs b/src/status_im/ui/screens/views.cljs index a1137f33fe..febe26d6ca 100644 --- a/src/status_im/ui/screens/views.cljs +++ b/src/status_im/ui/screens/views.cljs @@ -13,7 +13,7 @@ [status-im.ui.screens.progress.views :refer [progress]] - [status-im.ui.screens.chat.views :refer [chat]] + [status-im.ui.screens.chat.views :refer [chat chat-modal]] [status-im.ui.screens.add-new.views :refer [add-new]] [status-im.ui.screens.add-new.new-chat.views :refer [new-chat]] [status-im.ui.screens.add-new.new-public-chat.view :refer [new-public-chat]] @@ -167,6 +167,9 @@ :wallet-modal (wrap-modal :wallet-modal wallet.main/wallet-modal) + :chat-modal + (wrap-modal :chat-modal chat-modal) + :wallet-send-modal-stack {:screens {:wallet-send-transaction-modal diff --git a/src/status_im/utils/universal_links/core.cljs b/src/status_im/utils/universal_links/core.cljs index 7ceb05f28a..c6c2623295 100644 --- a/src/status_im/utils/universal_links/core.cljs +++ b/src/status_im/utils/universal_links/core.cljs @@ -43,7 +43,7 @@ (defn handle-public-chat [public-chat cofx] (log/info "universal-links: handling public chat " public-chat) - (chat.events/create-new-public-chat public-chat cofx)) + (chat.events/create-new-public-chat public-chat false cofx)) (defn handle-view-profile [profile-id {:keys [db] :as cofx}] (log/info "universal-links: handling view profile" profile-id)