whole header is now draggable

src/status_im/chat/styles/animations.cljs

@@ -16,13 +16,14 @@
    :position         :absolute})
 
 (def header-container
-  {:height           17
+  {:min-height       19
    :background-color common/color-white
-   :alignItems       :center
-   :justifyContent   :center})
+   :alignItems       :center})
 
 (def header-icon
   {:background-color header-draggable-icon
+   :margin-top       8
+   :margin-bottom    6
    :width            24
    :border-radius    1.5
    :height           3})

src/status_im/chat/views/input/animations/expandable.cljs

@@ -11,8 +11,9 @@
             [status-im.chat.styles.animations :as style]
             [taoensso.timbre :as log]))
 
-(defn header [key container-height]
-  (let [max-container-height (subscribe [:get-max-container-area-height])
+(defn header [key container-height custom-header]
+  (let [set-container-height (subscribe [:chat-animations key :height])
+        max-container-height (subscribe [:get-max-container-area-height])
         pan-responder        (resp/pan-responder container-height
                                                  max-container-height
                                                  :fix-expandable-height
@@ -20,7 +21,11 @@
     (fn [_]
       [view (merge (drag/pan-handlers pan-responder)
                    {:style style/header-container})
-       [view style/header-icon]])))
+       [view style/header-icon]
+       (when (and custom-header
+                  (or (= @set-container-height :max)
+                      (> @set-container-height (:min-height style/header-container))))
+         [custom-header])])))
 
 (defn expandable-view-on-update [{:keys [anim-value to-changed-height max-height chat-input-margin height]}]
   (let [to-default-height (subscribe [:get-default-container-area-height])
@@ -58,10 +63,10 @@
          #(dispatch [:set-expandable-height key height])
          #(dispatch [:choose-predefined-expandable-height key :default]))
        :reagent-render
-       (fn [{:keys [draggable?]} & elements]
+       (fn [{:keys [draggable? custom-header]} & elements]
          @to-changed-height @changes-counter @max-height
          (let [bottom (+ @input-height @chat-input-margin)]
            (into [animated-view {:style (style/expandable-container anim-value bottom)}
                   (when draggable?
-                    [header key anim-value])]
+                    [header key anim-value custom-header])]
                  elements)))})))

src/status_im/chat/views/input/result_box.cljs

@@ -12,7 +12,8 @@
             [status-im.i18n :refer [label]]
             [taoensso.timbre :as log]))
 
-(defn header [title]
+(defview header []
+  [{:keys [title]} [:chat-ui-props :result-box]]
   [view {:style style/header-container}
    [view style/header-title-container
     [text {:style style/header-title-text
@@ -28,10 +29,9 @@
    markup])
 
 (defview result-box-view []
-  [{:keys [markup title] :as result-box} [:chat-ui-props :result-box]]
+  [{:keys [markup] :as result-box} [:chat-ui-props :result-box]]
   (when result-box
-    [expandable-view {:key        :result-box
-                      :draggable? true}
-     [view {:flex 1}
-      [header title]
-      [result-box-container markup]]]))
+    [expandable-view {:key           :result-box
+                      :draggable?    true
+                      :custom-header header}
+     [result-box-container markup]]))

src/status_im/chat/views/input/utils.cljs

@@ -3,7 +3,7 @@
             [status-im.components.toolbar-new.styles :as toolbar-st]
             [status-im.utils.platform :as p]))
 
-(def min-height     17)
+(def min-height     19)
 (def default-height 300)
 
 (defn default-container-area-height [bottom screen-height]