bigger draggable-box top margin, chat screen overlay

src/status_im/android/platform.cljs

@@ -15,6 +15,10 @@
                                          :bar-style    "light-content"
                                          :translucent? true
                                          :color        styles/color-transparent}
+                           :overlay     {:height       25
+                                         :bar-style    "dark-content"
+                                         :translucent? true
+                                         :color        styles/color-transparent}
                            :modal       {:height    0
                                          :bar-style "light-content"
                                          :color     styles/color-black}}

src/status_im/chat/screen.cljs

@@ -110,10 +110,11 @@
 
 (defview chat-toolbar []
   [show-actions? [:chat-ui-props :show-actions?]
+   show-chat-overlay? [:show-chat-overlay?]
    accounts [:get :accounts]
    creating? [:get :creating-account?]]
-  [view
+  [view (when show-chat-overlay? {:style {:zIndex 0}})
-   [status-bar]
+   [status-bar {:type (if show-chat-overlay? :overlay :default)}]
    [toolbar {:hide-nav?      (or (empty? accounts) show-actions? creating?)
              :custom-content [toolbar-content-view]
              :custom-action  [toolbar-action]}]
@@ -175,6 +176,7 @@
    show-actions? [:chat-ui-props :show-actions?]
    show-bottom-info? [:chat-ui-props :show-bottom-info?]
    show-emoji? [:chat-ui-props :show-emoji?]
+   show-chat-overlay? [:show-chat-overlay?]
    layout-height [:get :layout-height]
    input-text [:chat :input-text]]
   {:component-did-mount    #(dispatch [:check-autorun])
@@ -186,6 +188,8 @@
                           (dispatch [:set-layout-height height]))))}
    [chat-toolbar]
    [messages-view group-chat]
+   (when show-chat-overlay?
+     [view {:style st/result-box-overlay}])
    [input/container {:text-empty? (str/blank? input-text)}]
    (when show-actions?
      [actions-view])

src/status_im/chat/styles/input/input.cljs

@@ -4,8 +4,7 @@
             [status-im.utils.platform :as platform]
             [taoensso.timbre :as log]))
 
-(def color-root-border "rgba(192, 198, 202, 0.28)")
+(def color-root-border "#e8eaeb")
-(def color-root-border-android "#e8eaeb")
 (def color-input "#edf1f3")
 (def color-input-helper-text "rgb(182, 189, 194)")
 (def color-input-helper-placeholder "rgb(182, 189, 194)")
@@ -22,8 +21,7 @@
    :elevation        2
    :margin-bottom    margin-bottom
    :border-top-width 1
-   :ios              {:border-top-color color-root-border}
+   :border-top-color color-root-border})
-   :android          {:border-top-color color-root-border-android}})
 
 (defn container [container-anim-margin bottom-anim-margin]
   {:background-color common/color-white

src/status_im/chat/styles/screen.cljs

@@ -6,6 +6,7 @@
                                                  text1-color
                                                  text2-color
                                                  text4-color
+                                                 color-black
                                                  color-gray6]]
             [status-im.components.toolbar.styles :refer [toolbar-background1]]))
 
@@ -215,3 +216,12 @@
   {:text-align          :center
    :text-align-vertical :center
    :color               :#7099e6})
+
+(def result-box-overlay
+  {:background-color color-black
+   :opacity          0.6
+   :position         :absolute
+   :top              0
+   :bottom           0
+   :left             0
+   :right            0})

src/status_im/chat/subs.cljs

@@ -111,6 +111,26 @@
           :default
           nil)))))
 
+(register-sub
+ :show-parameter-box?
+ (fn [db _]
+   (let [chat-parameter-box  (subscribe [:chat-parameter-box])
+         show-suggestions?   (subscribe [:show-suggestions?])
+         input-text          (subscribe [:chat :input-text])
+         validation-messages (subscribe [:chat-ui-props :validation-messages])]
+     (reaction (and @chat-parameter-box
+                    (not (str/blank? @input-text))
+                    (not @validation-messages)
+                    (not @show-suggestions?))))))
+
+(register-sub
+ :show-chat-overlay?
+ (fn [db _]
+   (let [show-parameter-box? (subscribe [:show-parameter-box?])
+         result-box          (subscribe [:chat-ui-props :result-box])]
+     (reaction (or @show-parameter-box?
+                   @result-box)))))
+
 (register-sub
   :command-completion
   (fn [db [_ chat-id]]

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

@@ -18,14 +18,8 @@
     (:hiccup parameter-box)))
 
 (defview parameter-box-view []
-  [chat-parameter-box [:chat-parameter-box]
+  [show-parameter-box? [:show-parameter-box?]]
-   show-suggestions? [:show-suggestions?]
+  (when show-parameter-box?
-   input-text [:chat :input-text]
-   validation-messages [:chat-ui-props :validation-messages]]
-  (when (and chat-parameter-box
-             (not (str/blank? input-text))
-             (not validation-messages)
-             (not show-suggestions?))
     [expandable-view {:key        :parameter-box
                       :draggable? true}
      [parameter-box-container]]))

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

@@ -1,16 +1,19 @@
 (ns status-im.chat.views.input.utils
   (:require [taoensso.timbre :as log]
-            [status-im.utils.platform :refer [platform-specific]]))
+            [status-im.components.toolbar-new.styles :as toolbar-st]
+            [status-im.utils.platform :as p]))
 
 (def min-height     17)
 (def default-height 300)
 
 (defn default-container-area-height [bottom screen-height]
-  (let [status-bar-height (get-in platform-specific [:component-styles :status-bar :default :height])]
+  (let [status-bar-height (get-in p/platform-specific [:component-styles :status-bar :overlay :height])]
     (if (> (+ bottom default-height status-bar-height) screen-height)
       (- screen-height bottom status-bar-height)
       default-height)))
 
 (defn max-container-area-height [bottom screen-height]
-  (let [status-bar-height (get-in platform-specific [:component-styles :status-bar :default :height])]
+  (let [status-bar-height (get-in p/platform-specific [:component-styles :status-bar :overlay :height])
-    (- screen-height bottom status-bar-height)))
+        toolbar-height (:height toolbar-st/toolbar)
+        margin-top (+ status-bar-height (/ toolbar-height 2))]
+    (- screen-height bottom margin-top)))

src/status_im/ios/platform.cljs

@@ -13,6 +13,9 @@
                            :transparent {:height    20
                                          :bar-style "light-content"
                                          :color     styles/color-transparent}
+                           :overlay     {:height       20
+                                         :bar-style    "dark-content"
+                                         :color        styles/color-white}
                            :modal       {:height    20
                                          :bar-style "light-content"
                                          :color     "#2f3031"}}