From 0d55009388aac4a195dcc56779883227e53ef40f Mon Sep 17 00:00:00 2001 From: Andrey Shovkoplyas Date: Mon, 24 Apr 2017 18:14:42 +0300 Subject: [PATCH] improved status-bar for android, implemented animated expandable overlay --- src/status_im/android/platform.cljs | 31 +++++++++---------- src/status_im/chat/screen.cljs | 9 +----- src/status_im/chat/styles/animations.cljs | 17 ++++++++++ src/status_im/chat/styles/screen.cljs | 9 ------ src/status_im/chat/subs.cljs | 12 ------- .../views/input/animations/expandable.cljs | 25 +++++++++++---- .../views/input/animations/responder.cljs | 1 + src/status_im/chat/views/input/utils.cljs | 4 +-- src/status_im/components/status_bar.cljs | 4 ++- .../contacts/views/contact_list_modal.cljs | 2 +- src/status_im/ios/platform.cljs | 8 ++--- .../screens/confirmation_success.cljs | 2 +- .../screens/transaction_details.cljs | 2 +- .../screens/unsigned_transactions.cljs | 2 +- 14 files changed, 66 insertions(+), 62 deletions(-) diff --git a/src/status_im/android/platform.cljs b/src/status_im/android/platform.cljs index c37797e025..0ace61a9da 100644 --- a/src/status_im/android/platform.cljs +++ b/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 - :bar-style "dark-content" - :color styles/color-white} - :main {:height 0 - :bar-style "dark-content" - :color styles/color-white} - :gray {:height 0 - :bar-style "dark-content" - :color styles/color-light-gray} + {:status-bar {:default {:height 25 + :bar-style "dark-content" + :elevation 2 + :translucent? true + :color styles/color-white} + :main {:height 25 + :bar-style "dark-content" + :translucent? true + :color styles/color-white} :transparent {:height 25 :bar-style "light-content" :translucent? true :color styles/color-transparent} - :overlay {:height 0 - :bar-style "dark-content" - :translucent? true - :color styles/color-transparent} - :modal {:height 0 - :bar-style "light-content" - :color styles/color-black}} + :modal {:height 0 + :bar-style "light-content" + :color styles/color-black} + :transaction {:height 0 + :bar-style "light-content" + :color styles/color-dark-blue-2}} :sized-text {:margin-top 0 :additional-height 0} :chat {:new-message {:border-top-color styles/color-transparent diff --git a/src/status_im/chat/screen.cljs b/src/status_im/chat/screen.cljs index a01a227089..6e8a6a5e61 100644 --- a/src/status_im/chat/screen.cljs +++ b/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]) diff --git a/src/status_im/chat/styles/animations.cljs b/src/status_im/chat/styles/animations.cljs index 3077e7d199..03f40336aa 100644 --- a/src/status_im/chat/styles/animations.cljs +++ b/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 diff --git a/src/status_im/chat/styles/screen.cljs b/src/status_im/chat/styles/screen.cljs index f55eac6048..15de80e817 100644 --- a/src/status_im/chat/styles/screen.cljs +++ b/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}) diff --git a/src/status_im/chat/subs.cljs b/src/status_im/chat/subs.cljs index 106d6de394..de85229ef7 100644 --- a/src/status_im/chat/subs.cljs +++ b/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]] diff --git a/src/status_im/chat/views/input/animations/expandable.cljs b/src/status_im/chat/views/input/animations/expandable.cljs index a06880444d..999059e6cf 100644 --- a/src/status_im/chat/views/input/animations/expandable.cljs +++ b/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)} - (when draggable? - [header key anim-value custom-header])] - elements)))}))) + [view style/overlap-container + (when-not hide-overlay? + [overlay-view]) + (into [animated-view {:style (style/expandable-container anim-value bottom)} + (when draggable? + [header key anim-value custom-header])] + elements)]))}))) diff --git a/src/status_im/chat/views/input/animations/responder.cljs b/src/status_im/chat/views/input/animations/responder.cljs index 3a55f78730..b3fbd8fab2 100644 --- a/src/status_im/chat/views/input/animations/responder.cljs +++ b/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}))))))) diff --git a/src/status_im/chat/views/input/utils.cljs b/src/status_im/chat/views/input/utils.cljs index ec8a0b8502..df86191fc1 100644 --- a/src/status_im/chat/views/input/utils.cljs +++ b/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))) diff --git a/src/status_im/components/status_bar.cljs b/src/status_im/components/status_bar.cljs index e34ce4f0ba..5403b62d01 100644 --- a/src/status_im/components/status_bar.cljs +++ b/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}}]])) \ No newline at end of file diff --git a/src/status_im/contacts/views/contact_list_modal.cljs b/src/status_im/contacts/views/contact_list_modal.cljs index 88ffaa77fb..54be52db57 100644 --- a/src/status_im/contacts/views/contact_list_modal.cljs +++ b/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 diff --git a/src/status_im/ios/platform.cljs b/src/status_im/ios/platform.cljs index 86d23efe58..069216893b 100644 --- a/src/status_im/ios/platform.cljs +++ b/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 diff --git a/src/status_im/transactions/screens/confirmation_success.cljs b/src/status_im/transactions/screens/confirmation_success.cljs index aaa7346191..3a04b4e0dd 100644 --- a/src/status_im/transactions/screens/confirmation_success.cljs +++ b/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} diff --git a/src/status_im/transactions/screens/transaction_details.cljs b/src/status_im/transactions/screens/transaction_details.cljs index 13274ce7b7..05388de5e4 100644 --- a/src/status_im/transactions/screens/transaction_details.cljs +++ b/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])] diff --git a/src/status_im/transactions/screens/unsigned_transactions.cljs b/src/status_im/transactions/screens/unsigned_transactions.cljs index 237df9b8b4..a2728fba75 100644 --- a/src/status_im/transactions/screens/unsigned_transactions.cljs +++ b/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