[#10427] Narrow devices were causing text in the intro carousel to gr…

…ow 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).
status-im · May 6, 2020 · 669bf8a · 669bf8a
1 parent 68fcc96
commit 669bf8a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git a/src/status_im/ui/screens/intro/styles.cljs b/src/status_im/ui/screens/intro/styles.cljs
@@ -29,9 +29,11 @@
    :text-align    :center
    :margin-bottom 16})
 
-(def wizard-text
-  {:color       colors/gray
-   :text-align  :center})
+(defn wizard-text [height]
+  (merge {:color      colors/gray
+          :text-align :center}
+         (when-not (zero? height)
+           {:height height})))
 
 (def welcome-text-bottom-note
   {:typography  :caption

diff --git a/src/status_im/ui/screens/intro/views.cljs b/src/status_im/ui/screens/intro/views.cljs
@@ -36,6 +36,9 @@
         scroll-view-ref (atom nil)
         width (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)]
     (fn []
       [react/view {:style {:align-items :center
@@ -52,8 +55,7 @@
                            :pinch-gesture-enabled false
                            :on-scroll #(let [^js x (.-nativeEvent.contentOffset.x ^js %)]
                                          (reset! scroll-x x))
-                           :style {;:width @width
-                                   :margin-bottom bottom-margin}}
+                           :style {:margin-bottom bottom-margin}}
         (doall
          (for [s slides]
            ^{:key (:title s)}
@@ -62,18 +64,24 @@
                                 :justify-content :flex-end
                                 :align-items :center
                                 :padding-horizontal 32}}
-            (let [margin 32
-                  size (min @width @height) #_(- (min @width @height) #_(* 2 margin))]
+            (let [size (min @width @height)]
               [react/view {:style {:flex 1}
                            :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)
                              :resize-mode :contain
                              :style {:width size
                                      :height size}}]])
             [react/i18n-text {:style styles/wizard-title :key (:title s)}]
-            [react/i18n-text {:style styles/wizard-text
-                              :key   (:text s)}]]))]
+            [react/text {:style (styles/wizard-text @text-height)
+                         :on-layout (fn [^js e]
+                                      (let [new-height (-> e .-nativeEvent .-layout .-height)]
+                                        (when @text-temp-timer (js/clearTimeout @text-temp-timer))
+                                        (when (not= new-height @text-temp-height)
+                                          (swap! text-temp-height #(if (pos? %) (max % new-height) new-height)))
+                                        (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)))]
          [dots-selector {:selected selected :n (count slides)
                          :color colors/blue}])])))