diff --git a/src/status_im/subs.cljs b/src/status_im/subs.cljs index 9965c8bd60..b1a10a0498 100644 --- a/src/status_im/subs.cljs +++ b/src/status_im/subs.cljs @@ -84,6 +84,7 @@ (reg-root-key-sub :ui/search :ui/search) (reg-root-key-sub :web3-node-version :web3-node-version) (reg-root-key-sub :keyboard-height :keyboard-height) +(reg-root-key-sub :keyboard-max-height :keyboard-max-height) (reg-root-key-sub :sync-data :sync-data) (reg-root-key-sub :layout-height :layout-height) (reg-root-key-sub :mobile-network/remember-choice? :mobile-network/remember-choice?) @@ -580,13 +581,37 @@ (fn [ui-props [_ prop]] (get ui-props prop))) +;; NOTE: The whole logic of stickers panel and input should be revised +(re-frame/reg-sub + :chats/chat-panel-height + :<- [:keyboard-max-height] + (fn [kb-height] + (cond + (and platform/iphone-x? (pos? kb-height)) + (- kb-height tabs.styles/minimized-tabs-height 34) + + (pos? kb-height) + (- kb-height tabs.styles/minimized-tabs-height) + + platform/iphone-x? 299 + + platform/ios? 258 + + :else 272))) + (re-frame/reg-sub :chats/input-margin :<- [:keyboard-height] - (fn [kb-height] + :<- [:chats/current-chat-ui-prop :input-bottom-sheet] + (fn [[kb-height input-bottom-sheet]] (cond + ;; During the transition of bottom sheet and close of keyboard happens + ;; The heights are summed up and input grows too much + (not (nil? input-bottom-sheet)) + 0 + (and platform/iphone-x? (> kb-height 0)) - (- kb-height (* 2 tabs.styles/minimized-tabs-height)) + (- kb-height tabs.styles/minimized-tabs-height 34) platform/ios? (+ kb-height (- (if (> kb-height 0) diff --git a/src/status_im/ui/screens/chat/extensions/views.cljs b/src/status_im/ui/screens/chat/extensions/views.cljs index b598101bad..f381b00c1f 100644 --- a/src/status_im/ui/screens/chat/extensions/views.cljs +++ b/src/status_im/ui/screens/chat/extensions/views.cljs @@ -8,8 +8,6 @@ [status-im.ui.components.animation :as anim] [status-im.i18n :as i18n])) -(def panel-height 264) - (defn button [showing?] [react/touchable-highlight {:on-press (fn [_] @@ -30,7 +28,9 @@ :useNativeDriver true})]))) (views/defview extensions-view [] - (views/letsubs [bottom-anim-value (anim/create-value panel-height) + (views/letsubs [panel-height [:chats/chat-panel-height] + + bottom-anim-value (anim/create-value @panel-height) alpha-value (anim/create-value 0)] {:component-did-mount #(show-panel-anim bottom-anim-value alpha-value)} [react/animated-view {:style {:background-color :white diff --git a/src/status_im/ui/screens/chat/stickers/views.cljs b/src/status_im/ui/screens/chat/stickers/views.cljs index 4563feb2e5..0573cd5f0c 100644 --- a/src/status_im/ui/screens/chat/stickers/views.cljs +++ b/src/status_im/ui/screens/chat/stickers/views.cljs @@ -68,7 +68,7 @@ :font-size 17}} (i18n/label :t/recently-used-stickers)]]))) -(defn update-scroll-position [ref installed-packs selected-pack window-width] +(defn update-scroll-position [ref installed-packs selected-pack window-width animated?] (when ref ;; bug on Android https://github.com/facebook/react-native/issues/24531 (js/setTimeout @@ -78,8 +78,8 @@ (* (inc (some #(when (= selected-pack (:id (second %))) (first %)) (map-indexed vector installed-packs))) window-width))] - (.scrollTo ref #js {:x x :animated true}))) - 200))) + (.scrollTo ref #js {:x x :animated animated?}))) + 1))) (defn on-scroll [e installed-packs window-width] (let [num (/ (.-nativeEvent.contentOffset.x e) window-width) @@ -93,8 +93,8 @@ (letsubs [ref (atom nil) width [:dimensions/window-width]] {:component-will-update (fn [_ [_ installed-packs selected-pack]] - (update-scroll-position @ref installed-packs selected-pack width)) - :component-did-mount #(update-scroll-position @ref installed-packs selected-pack width)} + (update-scroll-position @ref installed-packs selected-pack width true)) + :component-did-mount #(update-scroll-position @ref installed-packs selected-pack width false)} [react/scroll-view {:style {:flex 1} :horizontal true :paging-enabled true @@ -130,28 +130,32 @@ (defview scroll-indicator [] (letsubs [window-width [:dimensions/window-width]] - [react/view {:style {:margin-bottom 5 :height 2 :width indicator-width :border-radius 1 + [react/view {:style {:height 2 + :width indicator-width + :border-radius 1 :margin-left (+ dx (* icon-container (/ @scroll-x window-width))) :background-color colors/blue}}])) (defview stickers-view [] (letsubs [selected-pack [:stickers/selected-pack] installed-packs [:stickers/installed-packs-vals] - bottom-anim-value (anim/create-value (styles/stickers-panel-height)) + panel-height [:chats/chat-panel-height] + + bottom-anim-value (anim/create-value @panel-height) alpha-value (anim/create-value 0)] {:component-did-mount #(show-panel-anim bottom-anim-value alpha-value)} [react/animated-view {:style {:background-color :white - :height (styles/stickers-panel-height) + :height panel-height :transform [{:translateY bottom-anim-value}] :opacity alpha-value}} (cond - (= selected-pack :recent) [stickers-paging-panel installed-packs selected-pack] + (= selected-pack :recent) [stickers-paging-panel installed-packs selected-pack] (not (seq installed-packs)) [no-stickers-yet-panel] - :else [stickers-paging-panel installed-packs selected-pack]) + :else [stickers-paging-panel installed-packs selected-pack]) [react/view {:style {:flex-direction :row :padding-horizontal 4}} - [pack-icon {:on-press #(do - (re-frame/dispatch [:stickers/load-packs]) - (re-frame/dispatch [:navigate-to :stickers])) + [pack-icon {:on-press #(do + (re-frame/dispatch [:stickers/load-packs]) + (re-frame/dispatch [:navigate-to :stickers])) :selected? false :background-color colors/blue} [vector-icons/icon :main-icons/add {:width 20 :height 20 :color colors/white}]] [react/view {:width 2}] @@ -159,13 +163,13 @@ [react/view [react/view {:style {:flex-direction :row}} [pack-icon {:id :recent :background-color colors/white} - [vector-icons/icon :stickers-icons/recent {:color colors/gray - :width 44 + [vector-icons/icon :stickers-icons/recent {:color colors/gray + :width 44 :height 44}]] (for [{:keys [id thumbnail]} installed-packs] ^{:key id} - [pack-icon {:id id + [pack-icon {:id id :background-color colors/white} - [react/image {:style {:width icon-size :height icon-size :border-radius (/ icon-size 2)} + [react/image {:style {:width icon-size :height icon-size :border-radius (/ icon-size 2)} :source {:uri (contenthash/url thumbnail)}}]])] [scroll-indicator]]]]]))