Merge pull request #345 from status-im/feature/#344-toolbar-dark-content

Toolbar with dark content (#344), React Native 0.36 support

Former-commit-id: 9c2069dfde

package.json

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

src/status_im/android/platform.cljs

@@ -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"
+                                         :bar-style "dark-content"
-                                         :color     styles/color-gray}
+                                         :color     styles/color-white}
                            :main        {:height    0
-                                         :bar-style "default"
+                                         :bar-style "dark-content"
-                                         :color     styles/color-gray}
+                                         :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

src/status_im/chat/styles/datemark.cljs

@@ -1,17 +1,11 @@
 (ns status-im.chat.styles.datemark)
 
 (def datemark-wrapper
-  {:flex            1
+  {:flex        1
-   :flex-direction  :column
+   :align-items :center})
-   :align-items     :center
-   :justify-content :center})
 
 (def datemark
-  {:flex            1
+  {:background-color "#bbc4cb33"
-   :flex-direction  :column
-   :align-items     :center
-   :justify-content :center
-   :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})

src/status_im/chat/styles/message.cljs

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

src/status_im/chat/styles/suggestions.cljs

@@ -10,7 +10,8 @@
                                                  separator-color
                                                  text1-color
                                                  text2-color
-                                                 text3-color]]))
+                                                 text3-color]]
+            [taoensso.timbre :as log]))
 
 (def suggestion-height 60)
 

src/status_im/chat/views/message.cljs

@@ -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]
+    (anim/start
-      (when (< 0 to-value)
+      (anim/timing top-offset {:toValue  0
-        (anim/start
+                               :duration 150})
-          (anim/timing val {:toValue  to-value
+      (fn [arg]
-                            :duration 250})
+        (when (.-finished arg)
-          (fn [arg]
+          (callback))))))
-            (when (.-finished arg)
-              (callback))))))))
 
 (defn message-container [message & children]
   (if (:new? message)
-    (let [layout-height (r/atom 0)
+    (let [top-offset    (anim/create-value 40)
-          anim-value    (anim/create-value 1)
           anim-callback #(dispatch [:set-message-shown message])
-          context       {:to-value layout-height
+          context       {:top-offset top-offset
-                         :val      anim-value
+                         :callback   anim-callback}
-                         :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 top-offset)}
-           [animated-view {:style (st/message-container anim-value)}
+            (into [view] children)])}))
-            (into [view {:onLayout (fn [event]
-                                     (let [height (.. event -nativeEvent -layout -height)]
-                                       (reset! layout-height height)))}]
-                  children)])}))
     (into [view] children)))
 
 (defn chat-message [{:keys [outgoing message-id chat-id user-statuses from]}]

src/status_im/chat/views/request_message.cljs

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

src/status_im/chat/views/suggestions.cljs

@@ -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]]
-  [scroll-view {:keyboardShouldPersistTaps true}
+  [view {:flex 1}
-   ;; todo translations
+   [scroll-view {:keyboardShouldPersistTaps true}
-   (when (seq requests) [title "Requests"])
+    (when (seq requests)
-   (when (seq requests)
+      [title (label :t/suggestions-requests)])
-     [view
+    (when (seq requests)
-      [list-view {:dataSource                (to-datasource requests)
+      (for [{:keys [chat-id message-id] :as request} requests]
-                  :keyboardShouldPersistTaps true
+        ^{:key [chat-id message-id]}
-                  :renderRow                 render-request-row}]])
+        [request-item request]))
-   ;; todo translations
+    [title (label :t/suggestions-commands)]
-   [title "Commands"]
+    (for [suggestion suggestions]
-   [view
+      ^{:key (first suggestion)}
-    [list-view {:dataSource                (to-datasource suggestions)
+      [suggestion-list-item suggestion])]])
-                :keyboardShouldPersistTaps true
-                :renderRow                 render-row}]]])
 
 (defn header [h]
   (let [layout-height (subscribe [:max-layout-height :default])

src/status_im/translations/en.cljs

@@ -28,6 +28,8 @@
    :active-unknown                        "Unknown"
    :available                             "Available"
    :no-messages                           "No messages"
+   :suggestions-requests                  "Requests"
+   :suggestions-commands                  "Commands"
 
    ;sync
    :sync-in-progress                      "Syncing..."