UI corrections is stickers panel

This adds a feel that it is opened already on the desired index

Add input margin only when there's no bottom shet

Use the right height for sticker panel

Use the stickers panel height in extensions panel

Fix indentation on stickers view

Remove extra margin on stickers indicator

Use custom panel height on android

Rename chat panel height subscription

Signed-off-by: Gheorghe Pinzaru <feross95@gmail.com>

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)

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

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,18 +130,22 @@
 
 (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