Improve the floating shell button and fix its position in the screens (status-im#16981)

Author: Parveshdhull

src/quo2/components/buttons/dynamic_button/view.cljs

@@ -61,6 +61,7 @@
         :active-opacity      1
         :hit-slop            {:top 5 :bottom 5 :left 5 :right 5}
         :pointer-events      :auto
+        :style               {:height 24}
         :accessibility-label type}
        [rn/view
         {:style (merge

src/quo2/components/navigation/floating_shell_button.cljs

@@ -0,0 +1,22 @@
+(ns quo2.components.navigation.floating-shell-button.style
+  (:require [react-native.reanimated :as reanimated]))
+
+(defn floating-shell-button
+  [style opacity-anim]
+  (reanimated/apply-animations-to-style
+   (if opacity-anim
+     {:opacity opacity-anim}
+     {})
+   (merge
+    {:flex-direction     :row
+     :height             44
+     :align-self         :center
+     :padding-top        8
+     :padding-horizontal 12
+     :pointer-events     :box-none}
+    style)))
+
+(def right-section
+  {:position       :absolute
+   :flex-direction :row
+   :right          0})

src/quo2/components/navigation/floating_shell_button/style.cljs

@@ -0,0 +1,49 @@
+(ns quo2.components.navigation.floating-shell-button.view
+  (:require [react-native.core :as rn]
+            [react-native.reanimated :as reanimated]
+            [quo2.components.buttons.dynamic-button.view :as dynamic-button]
+            [quo2.components.navigation.floating-shell-button.style :as style]))
+
+(defn dynamic-button-view
+  [type dynamic-buttons style]
+  (when-let [{:keys [on-press customization-color label] :as props} (get dynamic-buttons type)]
+    [dynamic-button/view
+     {:type                type
+      :label               label
+      :on-press            on-press
+      :count               (:count props)
+      :style               style
+      :customization-color customization-color}]))
+
+(defn- section
+  [children]
+  [rn/view {:style {:flex 1} :pointer-events :box-none} children])
+
+(defn- f-floating-shell-button
+  [dynamic-buttons style opacity-anim]
+  [reanimated/view {:style (style/floating-shell-button style opacity-anim)}
+   ;; Left Section
+   [section
+    [dynamic-button-view :search dynamic-buttons
+     {:position :absolute
+      :right    8}]]
+   ;; Mid Section (jump-to)
+   [dynamic-button-view :jump-to dynamic-buttons nil]
+   ;; Right Section
+   [section
+    [rn/view
+     {:style style/right-section}
+     [dynamic-button-view :mention dynamic-buttons {:margin-left 8}]
+     [dynamic-button-view :notification-down dynamic-buttons {:margin-left 8}]
+     [dynamic-button-view :notification-up dynamic-buttons {:margin-left 8}]
+     [dynamic-button-view :scroll-to-bottom dynamic-buttons {:margin-left 8}]]]])
+
+(defn view
+  "[floating-shell-button dynamic-buttons style opacity-anim pointer-anim]
+  dynamic-buttons {:button-type {:on-press on-press :count count}}
+  style           override style
+  opacity-anim    reanimated value (optional)"
+  ([dynamic-buttons style]
+   [:f> f-floating-shell-button dynamic-buttons style nil])
+  ([dynamic-buttons style opacity-anim]
+   [:f> f-floating-shell-button dynamic-buttons style opacity-anim]))

src/quo2/components/navigation/floating_shell_button/view.cljs

@@ -72,7 +72,7 @@
     quo2.components.messages.author.view
     quo2.components.messages.gap
     quo2.components.messages.system-message
-    quo2.components.navigation.floating-shell-button
+    quo2.components.navigation.floating-shell-button.view
     quo2.components.navigation.page-nav
     quo2.components.notifications.activity-log.view
     quo2.components.notifications.activity-logs-photos.view
@@ -243,7 +243,7 @@
 (def static-skeleton quo2.components.loaders.skeleton.view/view)
 
 ;;;; Navigation
-(def floating-shell-button quo2.components.navigation.floating-shell-button/floating-shell-button)
+(def floating-shell-button quo2.components.navigation.floating-shell-button.view/view)
 (def page-nav quo2.components.navigation.page-nav/page-nav)
 
 ;;;; Markdown

src/quo2/core.cljs

@@ -14,6 +14,12 @@
      :shadow-offset  {:width 0 :height (colors/theme-colors -4 -8)}}
     {:elevation (if @focused? 10 0)}))
 
+(def composer-sheet-and-jump-to-container
+  {:position :absolute
+   :bottom   0
+   :left     0
+   :right    0})
+
 (defn sheet-container
   [insets {:keys [focused?]} {:keys [container-opacity]}]
   (reanimated/apply-animations-to-style
@@ -22,10 +28,6 @@
     {:border-top-left-radius  20
      :border-top-right-radius 20
      :padding-horizontal      20
-     :position                :absolute
-     :bottom                  0
-     :left                    0
-     :right                   0
      :background-color        (colors/theme-colors colors/white colors/neutral-95)
      :z-index                 3
      :padding-bottom          (:bottom insets)}
@@ -87,8 +89,7 @@
     :right            0
     :bottom           0
     :height           window-height
-    :background-color colors/neutral-95-opa-70
-    :z-index          1}))
+    :background-color colors/neutral-95-opa-70}))
 
 (defn blur-container
   [height focused?]
@@ -110,18 +111,11 @@
    :blur-type   (colors/theme-colors :light :dark)
    :blur-amount 20})
 
-(defn shell-container
-  [bottom translate-y]
-  (reanimated/apply-animations-to-style
-   {:bottom    bottom ; we use height of the input directly as bottom position
-    :transform [{:translate-y translate-y}]}
-   {:position :absolute
-    :left     0
-    :right    0}))
-
 (defn shell-button
   [translate-y opacity]
   (reanimated/apply-animations-to-style
    {:transform [{:translate-y translate-y}]
     :opacity   opacity}
-   {}))
+   {:position   :absolute
+    :top        0
+    :align-self :center}))

src/status_im2/contexts/chat/composer/style.cljs

@@ -5,9 +5,7 @@
     [react-native.core :as rn]
     [status-im2.config :as config]
     [react-native.reanimated :as reanimated]
-    [react-native.safe-area :as safe-area]
     [status-im2.contexts.chat.composer.style :as style]
-    [status-im2.contexts.chat.composer.utils :as utils]
     [status-im2.contexts.chat.messages.list.view :as messages.list]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
@@ -27,12 +25,8 @@
   [:f> f-blur-view layout-height focused?])
 
 (defn- f-shell-button
-  [{:keys [maximized? focused?]} {:keys [height]} {:keys [reply edit]}]
+  [{:keys [focused?]}]
   (let [customization-color (rf/sub [:profile/customization-color])
-        insets              (safe-area/get-insets)
-        extra-height        (utils/calc-top-content-height reply edit)
-        neg-y               (utils/calc-shell-neg-y insets maximized? extra-height)
-        y-container         (reanimated/use-shared-value neg-y)
         hide-shell?         (or @focused? @messages.list/show-floating-scroll-down-button)
         y-shell             (reanimated/use-shared-value (if hide-shell? 35 0))
         opacity             (reanimated/use-shared-value (if hide-shell? 0 1))]
@@ -41,8 +35,7 @@
        (reanimated/animate opacity (if hide-shell? 0 1))
        (reanimated/animate y-shell (if hide-shell? 35 0)))
      [@focused? @messages.list/show-floating-scroll-down-button])
-    [reanimated/view
-     {:style (style/shell-container height y-container)}
+    [:<>
      [reanimated/view
       {:style (style/shell-button y-shell opacity)}
       [quo/floating-shell-button
@@ -53,11 +46,12 @@
                                 (rf/dispatch [:shell/navigate-to-jump-to]))
          :customization-color customization-color
          :label               (i18n/label :t/jump-to)
-         :style               {:align-self :center}}} {}]]
+         :style               {:align-self :center}}}
+       {}]]
      [quo/floating-shell-button
       (when @messages.list/show-floating-scroll-down-button
         {:scroll-to-bottom {:on-press messages.list/scroll-to-bottom}})
-      {:bottom 24}]]))
+      {}]]))
 
 (defn shell-button
   [state animations subs]

src/status_im2/contexts/chat/composer/sub_view.cljs

@@ -66,62 +66,64 @@
     (effects/link-previews props state animations subs)
     (effects/images props state animations subs)
     [:<>
-     [sub-view/shell-button state animations subs]
      (when chat-screen-loaded?
        [mentions/view props state animations max-height cursor-pos
         (:images subs)
         (:link-previews? subs)
         (:reply subs)
         (:edit subs)])
-     [gesture/gesture-detector
-      {:gesture (drag-gesture/drag-gesture props state animations subs dimensions keyboard-shown)}
-      [reanimated/view
-       {:style     (style/sheet-container insets state animations)
-        :on-layout #(handler/layout % state blur-height)}
-       [sub-view/bar]
-       (when chat-screen-loaded?
-         [:<>
-          [reply/view state]
-          [edit/view state]])
-       [reanimated/touchable-opacity
-        {:active-opacity      1
-         :on-press            (when @(:input-ref props) #(.focus ^js @(:input-ref props)))
-         :style               (style/input-container (:height animations) max-height)
-         :accessibility-label :message-input-container}
-        [rn/selectable-text-input
-         {:ref        #(reset! (:selectable-input-ref props) %)
-          :menu-items @(:menu-items state)
-          :style      (style/input-view state)}
-         [rn/text-input
-          {:ref                      #(reset! (:input-ref props) %)
-           :default-value            @(:text-value state)
-           :on-focus                 #(handler/focus props state animations dimensions)
-           :on-blur                  #(handler/blur state animations dimensions subs)
-           :on-content-size-change   #(handler/content-size-change %
-                                                                   state
-                                                                   animations
-                                                                   subs
-                                                                   dimensions
-                                                                   (or keyboard-shown (:edit subs)))
-           :on-scroll                #(handler/scroll % props state animations dimensions)
-           :on-change-text           #(handler/change-text % props state)
-           :on-selection-change      #(handler/selection-change % props state)
-           :on-selection             #(selection/on-selection % props state)
-           :keyboard-appearance      (theme/theme-value :light :dark)
-           :max-height               max-height
-           :max-font-size-multiplier 1
-           :multiline                true
-           :placeholder              (i18n/label :t/type-something)
-           :placeholder-text-color   (colors/theme-colors colors/neutral-30 colors/neutral-50)
-           :style                    (style/input-text props state subs max-height)
-           :max-length               constants/max-text-size
-           :accessibility-label      :chat-message-input}]]
+     [rn/view
+      {:style style/composer-sheet-and-jump-to-container}
+      [sub-view/shell-button state]
+      [gesture/gesture-detector
+       {:gesture (drag-gesture/drag-gesture props state animations subs dimensions keyboard-shown)}
+       [reanimated/view
+        {:style     (style/sheet-container insets state animations)
+         :on-layout #(handler/layout % state blur-height)}
+        [sub-view/bar]
         (when chat-screen-loaded?
           [:<>
-           [gradients/view props state animations show-bottom-gradient?]
-           [link-preview/view]
-           [images/images-list]])]
-       [actions/view props state animations window-height insets subs]]]]))
+           [reply/view state]
+           [edit/view state]])
+        [reanimated/touchable-opacity
+         {:active-opacity      1
+          :on-press            (when @(:input-ref props) #(.focus ^js @(:input-ref props)))
+          :style               (style/input-container (:height animations) max-height)
+          :accessibility-label :message-input-container}
+         [rn/selectable-text-input
+          {:ref        #(reset! (:selectable-input-ref props) %)
+           :menu-items @(:menu-items state)
+           :style      (style/input-view state)}
+          [rn/text-input
+           {:ref                      #(reset! (:input-ref props) %)
+            :default-value            @(:text-value state)
+            :on-focus                 #(handler/focus props state animations dimensions)
+            :on-blur                  #(handler/blur state animations dimensions subs)
+            :on-content-size-change   #(handler/content-size-change %
+                                                                    state
+                                                                    animations
+                                                                    subs
+                                                                    dimensions
+                                                                    (or keyboard-shown (:edit subs)))
+            :on-scroll                #(handler/scroll % props state animations dimensions)
+            :on-change-text           #(handler/change-text % props state)
+            :on-selection-change      #(handler/selection-change % props state)
+            :on-selection             #(selection/on-selection % props state)
+            :keyboard-appearance      (theme/theme-value :light :dark)
+            :max-height               max-height
+            :max-font-size-multiplier 1
+            :multiline                true
+            :placeholder              (i18n/label :t/type-something)
+            :placeholder-text-color   (colors/theme-colors colors/neutral-30 colors/neutral-50)
+            :style                    (style/input-text props state subs max-height)
+            :max-length               constants/max-text-size
+            :accessibility-label      :chat-message-input}]]
+         (when chat-screen-loaded?
+           [:<>
+            [gradients/view props state animations show-bottom-gradient?]
+            [link-preview/view]
+            [images/images-list]])]
+        [actions/view props state animations window-height insets subs]]]]]))
 
 (defn composer
   [insets]