improved status-bar for android, implemented animated expandable overlay

src/status_im/android/platform.cljs

@@ -2,26 +2,25 @@
   (:require [status-im.components.styles :as styles]))
 
 (def component-styles
-  {:status-bar            {:default     {:height    0
+  {:status-bar            {:default     {:height       25
-                                         :bar-style "dark-content"
+                                         :bar-style    "dark-content"
-                                         :color     styles/color-white}
+                                         :elevation    2
-                           :main        {:height    0
+                                         :translucent? true
-                                         :bar-style "dark-content"
+                                         :color        styles/color-white}
-                                         :color     styles/color-white}
+                           :main        {:height       25
-                           :gray        {:height    0
+                                         :bar-style    "dark-content"
-                                         :bar-style "dark-content"
+                                         :translucent? true
-                                         :color     styles/color-light-gray}
+                                         :color        styles/color-white}
                            :transparent {:height       25
                                          :bar-style    "light-content"
                                          :translucent? true
                                          :color        styles/color-transparent}
-                           :overlay     {:height       0
+                           :modal       {:height       0
-                                         :bar-style    "dark-content"
+                                         :bar-style    "light-content"
-                                         :translucent? true
+                                         :color        styles/color-black}
-                                         :color        styles/color-transparent}
+                           :transaction {:height       0
-                           :modal       {:height    0
+                                         :bar-style    "light-content"
-                                         :bar-style "light-content"
+                                         :color        styles/color-dark-blue-2}}
-                                         :color     styles/color-black}}
    :sized-text            {:margin-top        0
                            :additional-height 0}
    :chat                  {:new-message {:border-top-color styles/color-transparent

src/status_im/chat/screen.cljs

@@ -108,17 +108,11 @@
       [text {:style st/add-contact-text}
        (label :t/add-to-contacts)]]]))
 
-(defview overlay-view []
-  [show-chat-overlay? [:show-chat-overlay?]]
-  (when show-chat-overlay?
-    [view {:style st/result-box-overlay}]))
-
 (defview chat-toolbar []
   [show-actions? [:chat-ui-props :show-actions?]
    accounts [:get :accounts]
-   show-chat-overlay? [:show-chat-overlay?]
    creating? [:get :creating-account?]]
-  [view ;(when show-chat-overlay? {:style {:zIndex 0}})  TODO we need implement animation and solve translucent? status-bar issue on android
+  [view
    [status-bar]
    [toolbar {:hide-nav?      (or (empty? accounts) show-actions? creating?)
              :custom-content [toolbar-content-view]
@@ -192,7 +186,6 @@
                           (dispatch [:set-layout-height height]))))}
    [chat-toolbar]
    [messages-view group-chat]
-   ;[overlay-view] TODO we need implement animation and solve translucent? status-bar issue on android
    [input/container {:text-empty? (str/blank? input-text)}]
    (when show-actions?
      [actions-view])

src/status_im/chat/styles/animations.cljs

@@ -4,6 +4,23 @@
 (def color-root-border "rgba(192, 198, 202, 0.28)")
 (def header-draggable-icon "rgba(73, 84, 93, 0.23)")
 
+(defn result-box-overlay [max-height opacity-anim-value]
+  {:background-color common/color-black
+   :position         :absolute
+   :opacity          opacity-anim-value
+   :height           max-height
+   :elevation        2
+   :bottom           0
+   :left             0
+   :right            0})
+
+(def overlap-container
+  {:position :absolute
+   :left     0
+   :top      0
+   :right    0
+   :bottom   0})
+
 (defn expandable-container [anim-value bottom]
   {:background-color common/color-white
    :border-top-color color-root-border

src/status_im/chat/styles/screen.cljs

@@ -216,12 +216,3 @@
   {: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

@@ -122,18 +122,6 @@
                     (not @validation-messages)
                     (not @show-suggestions?))))))
 
-(register-sub
- :show-chat-overlay?
- (fn [db _]
-   (let [{:keys [current-chat-id]} @db
-         show-parameter-box?  (subscribe [:show-parameter-box?])
-         result-box           (subscribe [:chat-ui-props :result-box])
-         max-height           (subscribe [:get-max-container-area-height])
-         result-box-height    (subscribe [:get-in [:chat-animations current-chat-id :result-box :height]])
-         parameter-box-height (subscribe [:get-in [:chat-animations current-chat-id :parameter-box :height]])]
-     (reaction (or (and @show-parameter-box? (or (= @parameter-box-height :max) (< (- @max-height @parameter-box-height) 20)))
-                   (and @result-box (or (= @result-box-height :max) (< (- @max-height @result-box-height) 20))))))))
-
 (register-sub
   :command-completion
   (fn [db [_ chat-id]]

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

@@ -1,4 +1,5 @@
 (ns status-im.chat.views.input.animations.expandable
+  (:require-macros [status-im.utils.views :refer [defview]])
   (:require [reagent.core :as r]
             [reagent.impl.component :as rc]
             [re-frame.core :refer [dispatch subscribe]]
@@ -36,16 +37,25 @@
                                @to-changed-height)
             to-value         (min (or @to-changed-height (or height @to-default-height))
                                   @max-height)]
+        (dispatch [:set :expandable-view-height-to-value to-value])
         (anim/start
           (anim/spring anim-value {:toValue  to-value
                                    :friction 10
                                    :tension  60}))))))
 
-(defn expandable-view [{:keys [key height]} & _]
+(defview overlay-view []
+  [max-height     (subscribe [:get-max-container-area-height])
+   layout-height  (subscribe [:get :layout-height])
+   view-height-to (subscribe [:get :expandable-view-height-to-value])]
+  (let [related-height (/ @view-height-to @max-height)]
+    (when (> related-height 0.6)
+      [animated-view {:style (style/result-box-overlay @layout-height (- related-height (/ 0.4 related-height)))}])))
+
+(defn expandable-view [{:keys [key height hide-overlay?]} & _]
   (let [anim-value         (anim/create-value 0)
         input-height       (subscribe [:chat-ui-props :input-height])
-        chat-input-margin  (subscribe [:chat-input-margin])
         max-height         (subscribe [:get-max-container-area-height])
+        chat-input-margin  (subscribe [:chat-input-margin])
         to-changed-height  (subscribe [:chat-animations key :height])
         changes-counter    (subscribe [:chat-animations key :changes-counter])
         on-update          (expandable-view-on-update {:anim-value        anim-value
@@ -66,7 +76,10 @@
        (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)}
+           [view style/overlap-container
-                  (when draggable?
+            (when-not hide-overlay?
-                    [header key anim-value custom-header])]
+              [overlay-view])
-                 elements)))})))
+            (into [animated-view {:style (style/expandable-container anim-value bottom)}
+                   (when draggable?
+                     [header key anim-value custom-header])]
+                  elements)]))})))

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

@@ -14,6 +14,7 @@
     (when (enough-dy gesture)
       (let [to-value (- @layout-height (.-moveY gesture))]
         (when (> to-value input-utils/min-height)
+          (dispatch [:set :expandable-view-height-to-value to-value])
           (anim/start
             (anim/spring response-height {:toValue to-value})))))))
 

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

@@ -7,13 +7,13 @@
 (def default-height 300)
 
 (defn default-container-area-height [bottom screen-height]
-  (let [status-bar-height (get-in p/platform-specific [:component-styles :status-bar :overlay :height])]
+  (let [status-bar-height (get-in p/platform-specific [:component-styles :status-bar :main :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 p/platform-specific [:component-styles :status-bar :overlay :height])
+  (let [status-bar-height (get-in p/platform-specific [:component-styles :status-bar :main :height])
         toolbar-height (:height toolbar-st/toolbar)
         margin-top (+ status-bar-height (/ toolbar-height 2))]
     (- screen-height bottom margin-top)))

src/status_im/components/status_bar.cljs

@@ -6,11 +6,13 @@
                    :or  {type :default}}]
   (let [{:keys [height
                 bar-style
+                elevation
                 translucent?
                 color]} (get-in platform-specific [:component-styles :status-bar type])]
     [ui/view
-     [ui/status-bar {:background-color color
+     [ui/status-bar {:background-color (if translucent? "transparent" color)
                      :translucent      translucent?
                      :bar-style        bar-style}]
      [ui/view {:style {:height           height
+                       :elevation        elevation
                        :background-color color}}]]))

src/status_im/contacts/views/contact_list_modal.cljs

@@ -63,7 +63,7 @@
    params [:get :contacts-click-params]]
   [drawer-view
    [view {:flex 1}
-    [status-bar]
+    [status-bar {:type :modal}]
     [contact-list-modal-toolbar]
     [list-view {:dataSource                (lw/to-datasource contacts)
                 :enableEmptySections       true

src/status_im/ios/platform.cljs

@@ -13,12 +13,12 @@
                            :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"}}
+                                         :color     "#2f3031"}
+                           :transaction {:height    20
+                                         :bar-style "light-content"
+                                         :color     styles/color-transparent}}
    :sized-text            {:margin-top        -5
                            :additional-height 5}
    :actions-list-view     {:border-bottom-color styles/color-gray3

src/status_im/transactions/screens/confirmation_success.cljs

@@ -11,7 +11,7 @@
 (defview confirmation-success []
   [quantity [:get :confirmed-transactions-count]]
   [rn/view {:style st/success-screen}
-   [status-bar/status-bar {:type :transparent}]
+   [status-bar/status-bar {:type :transaction}]
    [rn/view {:style st/success-screen-content-container}
     [rn/view {:style st/success-icon-container}
      [rn/image {:source {:uri :icon_ok_white}

src/status_im/transactions/screens/transaction_details.cljs

@@ -55,7 +55,7 @@
   {:component-did-update #(when-not transaction (rf/dispatch [:navigate-to-modal :unsigned-transactions]))
    :component-will-unmount #(rf/dispatch [:set-in [:transaction-details-ui-props :confirmed?] false])}
   [rn/keyboard-avoiding-view {:style st/transactions-screen}
-   [status-bar/status-bar {:type (if platform/ios? :transparent :main)}]
+   [status-bar/status-bar {:type :transaction}]
    [toolbar-view]
    [rn/scroll-view st/details-screen-content-container
     [transactions-list-item/view transaction #(rf/dispatch [:navigate-to-modal :unsigned-transactions])]

src/status_im/transactions/screens/unsigned_transactions.cljs

@@ -47,7 +47,7 @@
   {:component-did-update #(when-not (seq transactions) (rf/dispatch [:navigate-back]))
    :component-will-unmount #(rf/dispatch [:set-in [:transactions-list-ui-props :confirmed?] false])}
   [(if platform/ios? rn/keyboard-avoiding-view rn/view) (merge {:behavior :padding} st/transactions-screen)
-   [status-bar/status-bar {:type (if platform/ios? :transparent :main)}]
+   [status-bar/status-bar {:type :transaction}]
    [toolbar-view transactions]
    [rn/view {:style st/transactions-screen-content-container}
     [rn/list-view {:style           st/transactions-list