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

[#10427] Narrow devices were causing text in the intro carousel to grow to two lines on *the first* slide but not others, causing the height to be recalculated incorrectly on the last slide (that only had one line of text). 

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
This commit is contained in:
emizzle 2020-04-27 21:39:33 +10:00 committed by Andrey Shovkoplyas
parent 41bba3b2c8
commit 095467ff51
No known key found for this signature in database
GPG Key ID: EAAB7C8622D860A4
2 changed files with 24 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/status_im/ui/screens/intro/styles.cljs
View File

@ -29,9 +29,11 @@
:text-align :center :text-align :center
:margin-bottom 16}) :margin-bottom 16})
(def wizard-text (defn wizard-text [height]
{:color colors/gray (merge {:color colors/gray
:text-align :center}) :text-align :center}
(when-not (zero? height)
{:height height})))
(def welcome-text-bottom-note (def welcome-text-bottom-note
{:typography :caption {:typography :caption

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

@ -34,6 +34,9 @@
scroll-view-ref (atom nil) scroll-view-ref (atom nil)
width (r/atom 0) width (r/atom 0)
height (r/atom 0) height (r/atom 0)
text-height (r/atom 0)
text-temp-height (atom 0)
text-temp-timer (atom nil)
bottom-margin (if (> window-height 600) 32 16)] bottom-margin (if (> window-height 600) 32 16)]
(fn [] (fn []
[react/view {:style {:align-items :center [react/view {:style {:align-items :center
@ -50,8 +53,7 @@
:pinch-gesture-enabled false :pinch-gesture-enabled false
:on-scroll #(let [^js x (.-nativeEvent.contentOffset.x ^js %)] :on-scroll #(let [^js x (.-nativeEvent.contentOffset.x ^js %)]
(reset! scroll-x x)) (reset! scroll-x x))
:style {;:width @width :style {:margin-bottom bottom-margin}}
:margin-bottom bottom-margin}}
(doall (doall
(for [s slides] (for [s slides]
^{:key (:title s)} ^{:key (:title s)}
@ -60,17 +62,28 @@
:justify-content :flex-end :justify-content :flex-end
:align-items :center :align-items :center
:padding-horizontal 32}} :padding-horizontal 32}}
(let [size (min @width @height) #_(- (min @width @height) #_(* 2 margin))] (let [size (min @width @height)]
[react/view {:style {:flex 1} [react/view {:style {:flex 1}
:on-layout (fn [^js e] :on-layout (fn [^js e]
(reset! height (-> e .-nativeEvent .-layout .-height)))} (let [new-height (-> e .-nativeEvent .-layout .-height)]
(swap! height #(if (pos? %) (min % new-height) new-height))))}
[react/image {:source (:image s) [react/image {:source (:image s)
:resize-mode :contain :resize-mode :contain
:style {:width size :style {:width size
:height size}}]]) :height size}}]])
[react/i18n-text {:style styles/wizard-title :key (:title s)}] [react/i18n-text {:style styles/wizard-title :key (:title s)}]
[react/i18n-text {:style styles/wizard-text [react/text {:style (styles/wizard-text @text-height)
:key (:text s)}]]))] :on-layout
(fn [^js e]
(let [new-height (-> e .-nativeEvent .-layout .-height)]
(when (and (not= new-height @text-temp-height)
(not (zero? new-height))
(< new-height 200))
(swap! text-temp-height #(if (pos? %) (max % new-height) new-height))
(when @text-temp-timer (js/clearTimeout @text-temp-timer))
(reset! text-temp-timer
(js/setTimeout #(reset! text-height @text-temp-height) 500)))))}
(i18n/label (:text s))]]))]
(let [selected (hash-set (quot (int @scroll-x) (int @width)))] (let [selected (hash-set (quot (int @scroll-x) (int @width)))]
[dots-selector {:selected selected :n (count slides) [dots-selector {:selected selected :n (count slides)
:color colors/blue}])]))) :color colors/blue}])])))