status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[#10634] Image of 'Get started' view changes height/width if navigate back from "Enter seed phrase" 

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
This commit is contained in:
Andrey Shovkoplyas 2020-06-16 12:47:22 +02:00
parent e59e17e6e7
commit 15ddf6d060
No known key found for this signature in database
GPG Key ID: EAAB7C8622D860A4
1 changed files with 57 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
src/status_im/ui/screens/intro/views.cljs
View File

@ -29,7 +29,7 @@
^{:key i} ^{:key i}
[react/view {:style (styles/dot color (selected i))}]))]) [react/view {:style (styles/dot color (selected i))}]))])
(defn intro-viewer [slides window-height] (defn intro-viewer [slides window-height _]
(let [scroll-x (r/atom 0) (let [scroll-x (r/atom 0)
scroll-view-ref (atom nil) scroll-view-ref (atom nil)
width (r/atom 0) width (r/atom 0)
@ -38,58 +38,63 @@
text-temp-height (atom 0) text-temp-height (atom 0)
text-temp-timer (atom nil) text-temp-timer (atom nil)
bottom-margin (if (> window-height 600) 32 16)] bottom-margin (if (> window-height 600) 32 16)]
(fn [] (fn [_ _ view-id]
[react/view {:style {:align-items :center (let [current-screen? (or (nil? view-id) (= view-id :intro))]
:flex 1 [react/view {:style {:align-items :center
:margin-bottom bottom-margin :flex 1
:justify-content :flex-end} :margin-bottom bottom-margin
:on-layout (fn [^js e] :justify-content :flex-end}
(reset! width (-> e .-nativeEvent .-layout .-width)))} :on-layout (fn [^js e]
[react/scroll-view {:horizontal true (when current-screen?
:paging-enabled true (reset! width (-> e .-nativeEvent .-layout .-width))))}
:ref #(reset! scroll-view-ref %) [react/scroll-view {:horizontal true
:shows-vertical-scroll-indicator false :paging-enabled true
:shows-horizontal-scroll-indicator false :ref #(reset! scroll-view-ref %)
:pinch-gesture-enabled false :shows-vertical-scroll-indicator false
:on-scroll #(let [^js x (.-nativeEvent.contentOffset.x ^js %)] :shows-horizontal-scroll-indicator false
(reset! scroll-x x)) :pinch-gesture-enabled false
:style {:margin-bottom bottom-margin}} :on-scroll #(let [^js x (.-nativeEvent.contentOffset.x ^js %)]
(doall (reset! scroll-x x))
(for [s slides] :style {:margin-bottom bottom-margin}}
^{:key (:title s)} (doall
[react/view {:style {:flex 1 (for [s slides]
:width @width ^{:key (:title s)}
:justify-content :flex-end [react/view {:style {:flex 1
:align-items :center :width @width
:padding-horizontal 32}} :justify-content :flex-end
(let [size (min @width @height)] :align-items :center
[react/view {:style {:flex 1} :padding-horizontal 32}}
:on-layout (fn [^js e] (let [size (min @width @height)]
(let [new-height (-> e .-nativeEvent .-layout .-height)] [react/view {:style {:flex 1}
(swap! height #(if (pos? %) (min % new-height) new-height))))} :on-layout (fn [^js e]
[react/image {:source (:image s) (let [new-height (-> e .-nativeEvent .-layout .-height)]
:resize-mode :contain (when current-screen?
:style {:width size (swap! height #(if (pos? %) (min % new-height) new-height)))))}
:height size}}]]) [react/image {:source (:image s)
[react/i18n-text {:style styles/wizard-title :key (:title s)}] :resize-mode :contain
[react/text {:style (styles/wizard-text-with-height @text-height) :style {:width size
:on-layout :height size}}]])
(fn [^js e] [react/i18n-text {:style styles/wizard-title :key (:title s)}]
(let [new-height (-> e .-nativeEvent .-layout .-height)] [react/text {:style (styles/wizard-text-with-height @text-height)
(when (and (not= new-height @text-temp-height) :on-layout
(not (zero? new-height)) (fn [^js e]
(< new-height 200)) (let [new-height (-> e .-nativeEvent .-layout .-height)]
(swap! text-temp-height #(if (pos? %) (max % new-height) new-height)) (when (and current-screen?
(when @text-temp-timer (js/clearTimeout @text-temp-timer)) (not= new-height @text-temp-height)
(reset! text-temp-timer (not (zero? new-height))
(js/setTimeout #(reset! text-height @text-temp-height) 500)))))} (< new-height 200))
(i18n/label (:text s))]]))] (swap! text-temp-height #(if (pos? %) (max % new-height) new-height))
(let [selected (hash-set (quot (int @scroll-x) (int @width)))] (when @text-temp-timer (js/clearTimeout @text-temp-timer))
[dots-selector {:selected selected :n (count slides) (reset! text-temp-timer
:color colors/blue}])]))) (js/setTimeout #(reset! text-height @text-temp-height) 500)))))}
(i18n/label (:text s))]]))]
(let [selected (hash-set (quot (int @scroll-x) (int @width)))]
[dots-selector {:selected selected :n (count slides)
:color colors/blue}])]))))
(defview intro [] (defview intro []
(letsubs [{window-height :height} [:dimensions/window]] (letsubs [{window-height :height} [:dimensions/window]
view-id [:view-id]]
[react/view {:style styles/intro-view} [react/view {:style styles/intro-view}
[intro-viewer [{:image (resources/get-theme-image :chat) [intro-viewer [{:image (resources/get-theme-image :chat)
:title :intro-title1 :title :intro-title1
@ -99,7 +104,7 @@
:text :intro-text2} :text :intro-text2}
{:image (resources/get-theme-image :browser) {:image (resources/get-theme-image :browser)
:title :intro-title3 :title :intro-title3
:text :intro-text3}] window-height] :text :intro-text3}] window-height view-id]
[react/view styles/buttons-container [react/view styles/buttons-container
[components.common/button {:button-style (assoc styles/bottom-button :margin-bottom 16) [components.common/button {:button-style (assoc styles/bottom-button :margin-bottom 16)
:on-press #(re-frame/dispatch [:multiaccounts.create.ui/intro-wizard]) :on-press #(re-frame/dispatch [:multiaccounts.create.ui/intro-wizard])