status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/status_im/android/platform.cljs
View File

@ -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

9
src/status_im/chat/screen.cljs
View File

@ -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])

17
src/status_im/chat/styles/animations.cljs
View File

@ -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

9
src/status_im/chat/styles/screen.cljs
View File

@ -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})

12
src/status_im/chat/subs.cljs
View File

@ -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]]

25
src/status_im/chat/views/input/animations/expandable.cljs
View File

@ -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)]))})))

1
src/status_im/chat/views/input/animations/responder.cljs
View File

@ -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})))))))

4
src/status_im/chat/views/input/utils.cljs
View File

@ -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)))

4
src/status_im/components/status_bar.cljs
View File

@ -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}}]]))

2
src/status_im/contacts/views/contact_list_modal.cljs
View File

@ -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

8
src/status_im/ios/platform.cljs
View File

@ -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

2
src/status_im/transactions/screens/confirmation_success.cljs
View File

@ -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}

2
src/status_im/transactions/screens/transaction_details.cljs
View File

@ -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])]

2
src/status_im/transactions/screens/unsigned_transactions.cljs
View File

@ -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