status-im/status-mobile
2
0
Fork 0
mirror of https://github.com/status-im/status-mobile.git synced 2025-02-15 01:57:22 +00:00
Code Issues Projects Releases Wiki Activity

[#5023] Subscribe to window dimensions change event

Browse Source 
Signed-off-by: Dmitry Novotochinov <dmitry.novot@gmail.com>
This commit is contained in:
Dmitry Novotochinov 2018-07-09 20:19:29 +03:00
parent 51a59a1296
commit edc7ab480f
No known key found for this signature in database
GPG Key ID: 43D1DAF5AD39C927
10 changed files with 119 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/status_im/chat/views/message/message.cljs
View File

@ -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]]

5
src/status_im/ui/components/connectivity/view.cljs
View File

@ -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

3
src/status_im/ui/components/qr_code_viewer/views.cljs
View File

@ -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]

66
src/status_im/ui/screens/db.cljs
View File

@ -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

19
src/status_im/ui/screens/events.cljs
View File

@ -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))))

8
src/status_im/ui/screens/subs.cljs
View File

@ -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)

38
src/status_im/ui/screens/usage_data/styles.cljs
View File

@ -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)})

39
src/status_im/ui/screens/usage_data/views.cljs
View File

@ -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)}]]]))

2
src/status_im/ui/screens/wallet/choose_recipient/views.cljs
View File

@ -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}]

16
src/status_im/utils/dimensions.cljs Normal file
View File

@ -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)))