diff --git a/src/status_im/chat/views/message/message.cljs b/src/status_im/chat/views/message/message.cljs index 136c36d4f2..83092cc8a1 100644 --- a/src/status_im/chat/views/message/message.cljs +++ b/src/status_im/chat/views/message/message.cljs @@ -25,8 +25,6 @@ [clojure.string :as string] [status-im.chat.events.console :as console])) -(def window-width (:width (react/get-dimensions "window"))) - (defview message-content-status [] (letsubs [{:keys [chat-id group-id name color public-key]} [:get-current-chat] members [:get-current-chat-contacts]] diff --git a/src/status_im/ui/components/connectivity/view.cljs b/src/status_im/ui/components/connectivity/view.cljs index d90cb94539..079c8fcf45 100644 --- a/src/status_im/ui/components/connectivity/view.cljs +++ b/src/status_im/ui/components/connectivity/view.cljs @@ -6,15 +6,14 @@ [status-im.ui.components.connectivity.styles :as styles] [status-im.i18n :as i18n])) -(def window-width (:width (react/get-dimensions "window"))) - (defview error-view [{:keys [top]}] (letsubs [offline? [:offline?] disconnected? [:disconnected?] mailserver-error? [:mailserver-error?] fetching? [:fetching?] current-chat-contact [:get-current-chat-contact] - view-id [:get :view-id]] + view-id [:get :view-id] + window-width [:dimensions/window-width]] (when-let [label (cond offline? :t/offline disconnected? :t/disconnected diff --git a/src/status_im/ui/components/qr_code_viewer/views.cljs b/src/status_im/ui/components/qr_code_viewer/views.cljs index de7b9addcb..136863b56b 100644 --- a/src/status_im/ui/components/qr_code_viewer/views.cljs +++ b/src/status_im/ui/components/qr_code_viewer/views.cljs @@ -1,5 +1,6 @@ (ns status-im.ui.components.qr-code-viewer.views (:require [reagent.core :as reagent] + [re-frame.core :as re-frame] [status-im.react-native.js-dependencies :as rn-dependencies] [status-im.ui.components.qr-code-viewer.styles :as styles] [status-im.ui.components.react :as react] @@ -18,7 +19,7 @@ (defn qr-code-viewer [{:keys [style hint-style footer-style]} value hint legend] {:pre [(not (nil? value))]} - (let [{:keys [width height]} (react/get-dimensions "window")] + (let [{:keys [width height]} @(re-frame/subscribe [:dimensions/window])] [react/view {:style (merge styles/qr-code style)} [react/text {:style (merge styles/qr-code-hint hint-style)} hint] diff --git a/src/status_im/ui/screens/db.cljs b/src/status_im/ui/screens/db.cljs index 1848415748..17419bf83b 100644 --- a/src/status_im/ui/screens/db.cljs +++ b/src/status_im/ui/screens/db.cljs @@ -3,6 +3,7 @@ (:require [cljs.spec.alpha :as spec] [status-im.constants :as constants] [status-im.utils.platform :as platform] + [status-im.utils.dimensions :as dimensions] status-im.transport.db status-im.ui.screens.accounts.db status-im.ui.screens.contacts.db @@ -18,39 +19,40 @@ status-im.ui.screens.add-new.new-public-chat.db)) ;; initial state of app-db -(def app-db {:current-public-key nil - :status-module-initialized? (or platform/ios? js/goog.DEBUG) - :keyboard-height 0 - :tab-bar-visible? true - :navigation-stack '() - :contacts/contacts {} - :qr-codes {} - :group/selected-contacts #{} - :chats {} - :current-chat-id nil - :selected-participants #{} - :discoveries {} - :discover-search-tags #{} - :discover-current-dapp {} - :tags [] - :sync-state :done - :wallet.transactions constants/default-wallet-transactions - :wallet-selected-asset {} - :prices {} - :peers-count 0 - :peers-summary [] - :notifications {} - :network constants/default-network - :networks/networks constants/default-networks - :inbox/wnodes constants/default-wnodes - :my-profile/editing? false - :transport/chats {} - :transport/message-envelopes {} +(def app-db {:current-public-key nil + :status-module-initialized? (or platform/ios? js/goog.DEBUG) + :keyboard-height 0 + :tab-bar-visible? true + :navigation-stack '() + :contacts/contacts {} + :qr-codes {} + :group/selected-contacts #{} + :chats {} + :current-chat-id nil + :selected-participants #{} + :discoveries {} + :discover-search-tags #{} + :discover-current-dapp {} + :tags [] + :sync-state :done + :wallet.transactions constants/default-wallet-transactions + :wallet-selected-asset {} + :prices {} + :peers-count 0 + :peers-summary [] + :notifications {} + :network constants/default-network + :networks/networks constants/default-networks + :inbox/wnodes constants/default-wnodes + :my-profile/editing? false + :transport/chats {} + :transport/message-envelopes {} :chat/cooldowns 0 :chat/cooldown-enabled? false :chat/last-outgoing-message-sent-at 0 :chat/spam-messages-frequency 0 - :desktop/desktop {:tab-view-id :home}}) + :desktop/desktop {:tab-view-id :home} + :dimensions/window (dimensions/window)}) ;;;;GLOBAL @@ -155,6 +157,9 @@ (spec/def :universal-links/url (spec/nilable string?)) +;; DIMENSIONS +(spec/def :dimensions/window map?) + (spec/def ::db (allowed-keys :opt [:contacts/contacts @@ -204,7 +209,8 @@ :transport/message-envelopes :transport/chats :transport/discovery-filter - :desktop/desktop] + :desktop/desktop + :dimensions/window] :opt-un [::current-public-key ::modal diff --git a/src/status_im/ui/screens/events.cljs b/src/status_im/ui/screens/events.cljs index c4aec66606..b45922416f 100644 --- a/src/status_im/ui/screens/events.cljs +++ b/src/status_im/ui/screens/events.cljs @@ -13,6 +13,8 @@ status-im.ui.screens.group.chat-settings.events status-im.ui.screens.group.events [status-im.ui.screens.navigation :as navigation] + [status-im.utils.universal-links.core :as universal-links] + [status-im.utils.dimensions :as dimensions] status-im.utils.universal-links.events [status-im.chat.commands.core :as commands] status-im.ui.screens.add-new.new-chat.navigation @@ -182,6 +184,11 @@ (fn [] (status/get-device-UUID #(re-frame/dispatch [:set :device-UUID %])))) +(re-frame/reg-fx + ::listen-to-window-dimensions-change + (fn [] + (dimensions/add-event-listener))) + (re-frame/reg-fx ::get-fcm-token-fx (fn [_] @@ -300,9 +307,10 @@ :else (handlers-macro/merge-fx cofx - {::init-device-UUID nil - ::init-store encryption-key - ::testfairy-alert nil} + {::init-device-UUID nil + ::init-store encryption-key + ::listen-to-window-dimensions-change nil + ::testfairy-alert nil} (initialize-db))))) ;; DB has been decrypted, load accounts, initialize geth, etc @@ -516,3 +524,8 @@ :hide-tab-bar (fn [db _] (assoc db :tab-bar-visible? false))) + +(handlers/register-handler-db + :update-window-dimensions + (fn [db [_ dimensions]] + (assoc db :dimensions/window (dimensions/window dimensions)))) diff --git a/src/status_im/ui/screens/subs.cljs b/src/status_im/ui/screens/subs.cljs index 9c22454c63..dc154cf2e9 100644 --- a/src/status_im/ui/screens/subs.cljs +++ b/src/status_im/ui/screens/subs.cljs @@ -92,3 +92,11 @@ (reg-sub :get-current-account-network (fn [{:keys [network] :as db} [_]] (get-in db [:account/account :networks network]))) + +(reg-sub :dimensions/window + (fn [db _] + (get db :dimensions/window))) + +(reg-sub :dimensions/window-width + :<- [:dimensions/window] + :width) diff --git a/src/status_im/ui/screens/usage_data/styles.cljs b/src/status_im/ui/screens/usage_data/styles.cljs index 1262c0400a..1b2c00e440 100644 --- a/src/status_im/ui/screens/usage_data/styles.cljs +++ b/src/status_im/ui/screens/usage_data/styles.cljs @@ -1,13 +1,10 @@ (ns status-im.ui.screens.usage-data.styles (:require-macros [status-im.utils.styles :refer [defnstyle defstyle]]) (:require [status-im.ui.components.colors :as colors] - [status-im.ui.components.react :as react] [status-im.utils.platform :as platform])) -(def window-width (:width (react/get-dimensions "window"))) -(def window-height (:height (react/get-dimensions "window"))) -(defn scaled-x [n] (* (/ window-width 375) n)) -(defn scaled-y [n] (* (/ window-height 667) n)) +(defn scaled-x [window-width n] (* (/ window-width 375) n)) +(defn scaled-y [window-height n] (* (/ window-height 667) n)) (def usage-data-view {:flex 1 @@ -15,21 +12,21 @@ :align-items :center :justify-content :center}) -(def image-container +(defn image-container [window-height] {;; on screens less tall than iPhone 5, let's not show the image at all :display (if (>= window-height 568) "flex" "none") :align-items :center :justify-content :center - :margin-bottom (scaled-y 30)}) + :margin-bottom (scaled-y window-height 30)}) -(def usage-data-image - {:width (* (/ 390 432) (scaled-y 138)) - :height (scaled-y 138)}) +(defn usage-data-image [window-height] + {:width (* (/ 390 432) (scaled-y window-height 138)) + :height (scaled-y window-height 138)}) -(defstyle help-improve-text +(defnstyle help-improve-text [window-height] {:text-align :center :color colors/black - :margin-bottom (scaled-y 8) + :margin-bottom (scaled-y window-height 8) :margin-left 46 :margin-right 46 :ios {:line-height 28 @@ -39,9 +36,9 @@ :android {:font-size 24 :line-height 30}}) -(def help-improve-text-description +(defn help-improve-text-description [window-height] {:line-height 21 - :margin-bottom (scaled-y 26) + :margin-bottom (scaled-y window-height 26) :margin-left 34 :margin-right 34 :text-align :center @@ -53,22 +50,23 @@ :margin-left 61 :margin-right 63}) -(def bottom-button-container +(defn bottom-button-container [window-height] {:flex-direction :row ;; we need to make a margin smaller on iPhone 5(s) - :margin-top (scaled-y (if (and platform/ios? + :margin-top (scaled-y window-height + (if (and platform/ios? (> window-height 568)) 96 48)) :margin-left 41 :margin-right 42}) -(def share-button +(defn share-button [window-width] {:padding-horizontal 18 - :width (scaled-x 138) + :width (scaled-x window-width 138) :margin-right 16}) -(def dont-share-button +(defn dont-share-button [window-width] {:padding-horizontal 18 ;; don't do text wrap on super small devices :min-width 130 - :width (scaled-x 138)}) + :width (scaled-x window-width 138)}) diff --git a/src/status_im/ui/screens/usage_data/views.cljs b/src/status_im/ui/screens/usage_data/views.cljs index 60f3163073..07c7cc3675 100644 --- a/src/status_im/ui/screens/usage_data/views.cljs +++ b/src/status_im/ui/screens/usage_data/views.cljs @@ -10,33 +10,34 @@ [status-im.utils.utils :as utils])) (views/defview usage-data [] - (views/letsubs [next [:get-screen-params]] + (views/letsubs [next [:get-screen-params] + {:keys [width height]} [:dimensions/window]] [react/view {:style styles/usage-data-view} [status-bar/status-bar {:flat? true}] [react/view - [react/view {:style styles/image-container} + [react/view {:style (styles/image-container height)} [react/image {:source (:analytics-image resources/ui) - :style styles/usage-data-image}]] - [react/i18n-text {:style styles/help-improve-text + :style (styles/usage-data-image height)}]] + [react/i18n-text {:style (styles/help-improve-text height) :key :help-improve}] [react/view - [react/i18n-text {:style styles/help-improve-text-description + [react/i18n-text {:style (styles/help-improve-text-description height) :key :help-improve-description}]] [react/text {:style styles/learn-what-we-collect-link :on-press #(.openURL react/linking "https://wiki.status.im/Help_Improve_Status#Help_Improve_Status")} (i18n/label :t/learn-what-we-collect-link)]] - [react/view styles/bottom-button-container - [components.common/button {:button-style styles/share-button - :uppercase? false - :on-press #(utils/show-confirmation {:ios-confirm-style "default"} - (i18n/label :t/confirmation-title) - (i18n/label :t/confirmation-text) - (i18n/label :t/confirmation-action) - (fn [] (re-frame/dispatch [:help-improve-handler true next])) - nil) - :label (i18n/label :t/share-usage-data)}] - [components.common/button {:button-style styles/dont-share-button - :uppercase? false - :on-press #(re-frame/dispatch [:help-improve-handler false next]) - :label (i18n/label :t/dont-want-to-share)}]]])) + [react/view (styles/bottom-button-container height) + [components.common/button {:button-style (styles/share-button width) + :uppercase? false + :on-press #(utils/show-confirmation {:ios-confirm-style "default"} + (i18n/label :t/confirmation-title) + (i18n/label :t/confirmation-text) + (i18n/label :t/confirmation-action) + (fn [] (re-frame/dispatch [:help-improve-handler true next])) + nil) + :label (i18n/label :t/share-usage-data)}] + [components.common/button {:button-style (styles/dont-share-button width) + :uppercase? false + :on-press #(re-frame/dispatch [:help-improve-handler false next]) + :label (i18n/label :t/dont-want-to-share)}]]])) diff --git a/src/status_im/ui/screens/wallet/choose_recipient/views.cljs b/src/status_im/ui/screens/wallet/choose_recipient/views.cljs index 9c28569455..5c21aef3ed 100644 --- a/src/status_im/ui/screens/wallet/choose_recipient/views.cljs +++ b/src/status_im/ui/screens/wallet/choose_recipient/views.cljs @@ -45,7 +45,7 @@ (defview choose-recipient [] (letsubs [read-once? (atom false) - dimensions (react/get-dimensions "window") + dimensions [:dimensions/window] camera-flashlight [:wallet.send/camera-flashlight]] [react/view {:style styles/qr-code} [status-bar/status-bar {:type :transparent}] diff --git a/src/status_im/utils/dimensions.cljs b/src/status_im/utils/dimensions.cljs new file mode 100644 index 0000000000..d7f185da28 --- /dev/null +++ b/src/status_im/utils/dimensions.cljs @@ -0,0 +1,16 @@ +(ns status-im.utils.dimensions + (:require [re-frame.core :as re-frame] + [status-im.ui.components.react :as react])) + +(defn add-event-listener [] + (.addEventListener react/dimensions + "change" + #(re-frame/dispatch [:update-window-dimensions %]))) + +(defn window + ([] + (react/get-dimensions "window")) + ([m] + (-> m + (js->clj :keywordize-keys true) + :window)))