Merge pull request #345 from status-im/feature/#344-toolbar-dark-content
Toolbar with dark content (#344), React Native 0.36 support
This commit is contained in:
commit
9c2069dfde
|
@ -31,7 +31,7 @@
|
|||
"querystring-es3": "^0.2.1",
|
||||
"re-natal": "0.2.38",
|
||||
"react": "^15.3.1",
|
||||
"react-native": "^0.34.0",
|
||||
"react-native": "^0.36.0",
|
||||
"react-native-action-button": "^1.1.11",
|
||||
"react-native-android-sms-listener": "github:adrian-tiberius/react-native-android-sms-listener#listener-bugfix",
|
||||
"react-native-camera": "git+https://github.com/lwansbrough/react-native-camera.git",
|
||||
|
|
|
@ -1,16 +1,17 @@
|
|||
(ns status-im.android.platform
|
||||
(:require [status-im.components.styles :as styles]
|
||||
[status-im.utils.utils :as u]))
|
||||
[status-im.utils.utils :as u]
|
||||
[status-im.components.toolbar.styles :refer [toolbar-background2]]))
|
||||
|
||||
(def component-styles
|
||||
{:status-bar {:default {:height 0
|
||||
:bar-style "default"
|
||||
:color styles/color-gray}
|
||||
:bar-style "dark-content"
|
||||
:color styles/color-white}
|
||||
:main {:height 0
|
||||
:bar-style "default"
|
||||
:color styles/color-gray}
|
||||
:bar-style "dark-content"
|
||||
:color toolbar-background2}
|
||||
:transparent {:height 20
|
||||
:bar-style "default"
|
||||
:bar-style "light-content"
|
||||
:translucent? true
|
||||
:color styles/color-transparent}}
|
||||
:chat {:new-message {:border-top-color styles/color-transparent
|
||||
|
|
|
@ -2,16 +2,10 @@
|
|||
|
||||
(def datemark-wrapper
|
||||
{:flex 1
|
||||
:flex-direction :column
|
||||
:align-items :center
|
||||
:justify-content :center})
|
||||
:align-items :center})
|
||||
|
||||
(def datemark
|
||||
{:flex 1
|
||||
:flex-direction :column
|
||||
:align-items :center
|
||||
:justify-content :center
|
||||
:background-color "#bbc4cb33"
|
||||
{:background-color "#bbc4cb33"
|
||||
:padding-left 12
|
||||
:padding-right 12
|
||||
:margin-top 8
|
||||
|
@ -21,4 +15,5 @@
|
|||
|
||||
(def datemark-text
|
||||
{:color "#838c93"
|
||||
:top 4
|
||||
:font-size 12})
|
|
@ -175,7 +175,6 @@
|
|||
{:marginTop 4
|
||||
:height 14})
|
||||
|
||||
|
||||
(def content-command-view
|
||||
{:flexDirection :column})
|
||||
|
||||
|
@ -262,7 +261,7 @@
|
|||
:color text2-color})
|
||||
|
||||
(defn message-container [height]
|
||||
{:height height})
|
||||
{:top height})
|
||||
|
||||
(defn new-message-container [margin on-top?]
|
||||
{:background-color color-white
|
||||
|
|
|
@ -10,7 +10,8 @@
|
|||
separator-color
|
||||
text1-color
|
||||
text2-color
|
||||
text3-color]]))
|
||||
text3-color]]
|
||||
[taoensso.timbre :as log]))
|
||||
|
||||
(def suggestion-height 60)
|
||||
|
||||
|
|
|
@ -255,37 +255,31 @@
|
|||
[group-message-delivery-status message]
|
||||
[message-delivery-status message]))])
|
||||
|
||||
(defn message-container-animation-logic [{:keys [to-value val callback]}]
|
||||
(defn message-container-animation-logic [{:keys [top-offset callback]}]
|
||||
(fn [_]
|
||||
(let [to-value @to-value]
|
||||
(when (< 0 to-value)
|
||||
(anim/start
|
||||
(anim/timing val {:toValue to-value
|
||||
:duration 250})
|
||||
(anim/timing top-offset {:toValue 0
|
||||
:duration 150})
|
||||
(fn [arg]
|
||||
(when (.-finished arg)
|
||||
(callback))))))))
|
||||
(callback))))))
|
||||
|
||||
(defn message-container [message & children]
|
||||
(if (:new? message)
|
||||
(let [layout-height (r/atom 0)
|
||||
anim-value (anim/create-value 1)
|
||||
(let [top-offset (anim/create-value 40)
|
||||
anim-callback #(dispatch [:set-message-shown message])
|
||||
context {:to-value layout-height
|
||||
:val anim-value
|
||||
context {:top-offset top-offset
|
||||
:callback anim-callback}
|
||||
on-update (message-container-animation-logic context)]
|
||||
(r/create-class
|
||||
{:component-did-update
|
||||
on-update
|
||||
:component-did-mount
|
||||
on-update
|
||||
:reagent-render
|
||||
(fn [message & children]
|
||||
@layout-height
|
||||
[animated-view {:style (st/message-container anim-value)}
|
||||
(into [view {:onLayout (fn [event]
|
||||
(let [height (.. event -nativeEvent -layout -height)]
|
||||
(reset! layout-height height)))}]
|
||||
children)])}))
|
||||
[animated-view {:style (st/message-container top-offset)}
|
||||
(into [view] children)])}))
|
||||
(into [view] children)))
|
||||
|
||||
(defn chat-message [{:keys [outgoing message-id chat-id user-statuses from]}]
|
||||
|
|
|
@ -88,9 +88,9 @@
|
|||
[text {:style st/style-message-text
|
||||
:font :default}
|
||||
content]]]
|
||||
[request-button message-id command @status-initialized?]
|
||||
(when (:request-text command)
|
||||
[view st/command-request-text-view
|
||||
[text {:style st/style-sub-text
|
||||
:font :default}
|
||||
(:request-text command)]])]))))
|
||||
(:request-text command)]])
|
||||
[request-button message-id command @status-initialized?]]))))
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
[status-im.utils.platform :refer [ios?]]
|
||||
[status-im.chat.suggestions-responder :as resp]
|
||||
[status-im.chat.constants :as c]
|
||||
[taoensso.timbre :as log]))
|
||||
[status-im.i18n :refer [label]]))
|
||||
|
||||
(defn set-command-input [command]
|
||||
(dispatch [:set-chat-command command]))
|
||||
|
@ -40,12 +40,6 @@
|
|||
[text {:style st/request-message-info}
|
||||
"By console, today at 14:50"]]]])
|
||||
|
||||
(defn render-request-row
|
||||
[{:keys [chat-id message-id] :as row} _ _]
|
||||
(list-item
|
||||
^{:key [chat-id message-id]}
|
||||
[request-item row]))
|
||||
|
||||
(defn suggestion-list-item
|
||||
[[command {:keys [description]
|
||||
name :name
|
||||
|
@ -63,9 +57,6 @@
|
|||
[view (st/suggestion-background suggestion)
|
||||
[text {:style st/suggestion-text} label]]]]]]))
|
||||
|
||||
(defn render-row [row _ _]
|
||||
(list-item [suggestion-list-item row]))
|
||||
|
||||
(defn title [s]
|
||||
[view st/title-container
|
||||
[text {:style st/title-text} s]])
|
||||
|
@ -73,20 +64,18 @@
|
|||
(defview suggestions-view []
|
||||
[suggestions [:get-suggestions]
|
||||
requests [:get-requests]]
|
||||
[view {:flex 1}
|
||||
[scroll-view {:keyboardShouldPersistTaps true}
|
||||
;; todo translations
|
||||
(when (seq requests) [title "Requests"])
|
||||
(when (seq requests)
|
||||
[view
|
||||
[list-view {:dataSource (to-datasource requests)
|
||||
:keyboardShouldPersistTaps true
|
||||
:renderRow render-request-row}]])
|
||||
;; todo translations
|
||||
[title "Commands"]
|
||||
[view
|
||||
[list-view {:dataSource (to-datasource suggestions)
|
||||
:keyboardShouldPersistTaps true
|
||||
:renderRow render-row}]]])
|
||||
[title (label :t/suggestions-requests)])
|
||||
(when (seq requests)
|
||||
(for [{:keys [chat-id message-id] :as request} requests]
|
||||
^{:key [chat-id message-id]}
|
||||
[request-item request]))
|
||||
[title (label :t/suggestions-commands)]
|
||||
(for [suggestion suggestions]
|
||||
^{:key (first suggestion)}
|
||||
[suggestion-list-item suggestion])]])
|
||||
|
||||
(defn header [h]
|
||||
(let [layout-height (subscribe [:max-layout-height :default])
|
||||
|
|
|
@ -28,6 +28,8 @@
|
|||
:active-unknown "Unknown"
|
||||
:available "Available"
|
||||
:no-messages "No messages"
|
||||
:suggestions-requests "Requests"
|
||||
:suggestions-commands "Commands"
|
||||
|
||||
;sync
|
||||
:sync-in-progress "Syncing..."
|
||||
|
|
Loading…
Reference in New Issue