improved status-bar for android, implemented animated expandable overlay

This commit is contained in:
Andrey Shovkoplyas 2017-04-24 18:14:42 +03:00 committed by Roman Volosovskyi
parent 9d975c497f
commit 0d55009388
14 changed files with 66 additions and 62 deletions

View File

@ -2,26 +2,25 @@
(:require [status-im.components.styles :as styles])) (:require [status-im.components.styles :as styles]))
(def component-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 :transparent {:height 25
:bar-style "light-content" :bar-style "light-content"
:translucent? true :translucent? true
:color styles/color-transparent} :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 :sized-text {:margin-top 0
:additional-height 0} :additional-height 0}
:chat {:new-message {:border-top-color styles/color-transparent :chat {:new-message {:border-top-color styles/color-transparent

View File

@ -108,17 +108,11 @@
[text {:style st/add-contact-text} [text {:style st/add-contact-text}
(label :t/add-to-contacts)]]])) (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 [] (defview chat-toolbar []
[show-actions? [:chat-ui-props :show-actions?] [show-actions? [:chat-ui-props :show-actions?]
accounts [:get :accounts] accounts [:get :accounts]
show-chat-overlay? [:show-chat-overlay?]
creating? [:get :creating-account?]] 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] [status-bar]
[toolbar {:hide-nav? (or (empty? accounts) show-actions? creating?) [toolbar {:hide-nav? (or (empty? accounts) show-actions? creating?)
:custom-content [toolbar-content-view] :custom-content [toolbar-content-view]
@ -192,7 +186,6 @@
(dispatch [:set-layout-height height]))))} (dispatch [:set-layout-height height]))))}
[chat-toolbar] [chat-toolbar]
[messages-view group-chat] [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)}] [input/container {:text-empty? (str/blank? input-text)}]
(when show-actions? (when show-actions?
[actions-view]) [actions-view])

View File

@ -4,6 +4,23 @@
(def color-root-border "rgba(192, 198, 202, 0.28)") (def color-root-border "rgba(192, 198, 202, 0.28)")
(def header-draggable-icon "rgba(73, 84, 93, 0.23)") (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] (defn expandable-container [anim-value bottom]
{:background-color common/color-white {:background-color common/color-white
:border-top-color color-root-border :border-top-color color-root-border

View File

@ -216,12 +216,3 @@
{:text-align :center {:text-align :center
:text-align-vertical :center :text-align-vertical :center
:color :#7099e6}) :color :#7099e6})
(def result-box-overlay
{:background-color color-black
:opacity 0.6
:position :absolute
:top 0
:bottom 0
:left 0
:right 0})

View File

@ -122,18 +122,6 @@
(not @validation-messages) (not @validation-messages)
(not @show-suggestions?)))))) (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 (register-sub
:command-completion :command-completion
(fn [db [_ chat-id]] (fn [db [_ chat-id]]

View File

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

View File

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

View File

@ -7,13 +7,13 @@
(def default-height 300) (def default-height 300)
(defn default-container-area-height [bottom screen-height] (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) (if (> (+ bottom default-height status-bar-height) screen-height)
(- screen-height bottom status-bar-height) (- screen-height bottom status-bar-height)
default-height))) default-height)))
(defn max-container-area-height [bottom screen-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) toolbar-height (:height toolbar-st/toolbar)
margin-top (+ status-bar-height (/ toolbar-height 2))] margin-top (+ status-bar-height (/ toolbar-height 2))]
(- screen-height bottom margin-top))) (- screen-height bottom margin-top)))

View File

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

View File

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

View File

@ -13,12 +13,12 @@
:transparent {:height 20 :transparent {:height 20
:bar-style "light-content" :bar-style "light-content"
:color styles/color-transparent} :color styles/color-transparent}
:overlay {:height 20
:bar-style "dark-content"
:color styles/color-white}
:modal {:height 20 :modal {:height 20
:bar-style "light-content" :bar-style "light-content"
:color "#2f3031"}} :color "#2f3031"}
:transaction {:height 20
:bar-style "light-content"
:color styles/color-transparent}}
:sized-text {:margin-top -5 :sized-text {:margin-top -5
:additional-height 5} :additional-height 5}
:actions-list-view {:border-bottom-color styles/color-gray3 :actions-list-view {:border-bottom-color styles/color-gray3

View File

@ -11,7 +11,7 @@
(defview confirmation-success [] (defview confirmation-success []
[quantity [:get :confirmed-transactions-count]] [quantity [:get :confirmed-transactions-count]]
[rn/view {:style st/success-screen} [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-screen-content-container}
[rn/view {:style st/success-icon-container} [rn/view {:style st/success-icon-container}
[rn/image {:source {:uri :icon_ok_white} [rn/image {:source {:uri :icon_ok_white}

View File

@ -55,7 +55,7 @@
{:component-did-update #(when-not transaction (rf/dispatch [:navigate-to-modal :unsigned-transactions])) {: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])} :component-will-unmount #(rf/dispatch [:set-in [:transaction-details-ui-props :confirmed?] false])}
[rn/keyboard-avoiding-view {:style st/transactions-screen} [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] [toolbar-view]
[rn/scroll-view st/details-screen-content-container [rn/scroll-view st/details-screen-content-container
[transactions-list-item/view transaction #(rf/dispatch [:navigate-to-modal :unsigned-transactions])] [transactions-list-item/view transaction #(rf/dispatch [:navigate-to-modal :unsigned-transactions])]

View File

@ -47,7 +47,7 @@
{:component-did-update #(when-not (seq transactions) (rf/dispatch [:navigate-back])) {:component-did-update #(when-not (seq transactions) (rf/dispatch [:navigate-back]))
:component-will-unmount #(rf/dispatch [:set-in [:transactions-list-ui-props :confirmed?] false])} :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) [(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] [toolbar-view transactions]
[rn/view {:style st/transactions-screen-content-container} [rn/view {:style st/transactions-screen-content-container}
[rn/list-view {:style st/transactions-list [rn/list-view {:style st/transactions-list