diff --git a/ios/StatusIm.xcodeproj/project.pbxproj b/ios/StatusIm.xcodeproj/project.pbxproj index 8bb1b553ef..0bacc21a37 100644 --- a/ios/StatusIm.xcodeproj/project.pbxproj +++ b/ios/StatusIm.xcodeproj/project.pbxproj @@ -57,6 +57,7 @@ B24FC7FD1DE7195700D694FF /* Social.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = B24FC7FC1DE7195700D694FF /* Social.framework */; }; B24FC7FF1DE7195F00D694FF /* MessageUI.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = B24FC7FE1DE7195F00D694FF /* MessageUI.framework */; }; B24FC8001DE71C0E00D694FF /* libSplashScreen.a in Frameworks */ = {isa = PBXBuildFile; fileRef = B24FC7F21DE718EF00D694FF /* libSplashScreen.a */; }; + B2A5F45C1DEC36BB00174F4D /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = B2A5F4381DEC36B200174F4D /* libRCTAnimation.a */; }; B2F2D1BC1D9D531B00B7B453 /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = B2F2D1BB1D9D531B00B7B453 /* Images.xcassets */; }; B45B40B471414274A7A83185 /* libRCTContacts.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3384AFA9609A409B81928AD5 /* libRCTContacts.a */; }; BA68A2377A20496EA737000D /* libz.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = 4E586E1B0E544F64AA9F5BD1 /* libz.tbd */; }; @@ -321,6 +322,20 @@ remoteGlobalIDString = 134814201AA4EA6300B7C361; remoteInfo = RNShare; }; + B2A5F4371DEC36B200174F4D /* PBXContainerItemProxy */ = { + isa = PBXContainerItemProxy; + containerPortal = B2A5F42F1DEC36B200174F4D /* RCTAnimation.xcodeproj */; + proxyType = 2; + remoteGlobalIDString = 134814201AA4EA6300B7C361; + remoteInfo = RCTAnimation; + }; + B2A5F4391DEC36B200174F4D /* PBXContainerItemProxy */ = { + isa = PBXContainerItemProxy; + containerPortal = B2A5F42F1DEC36B200174F4D /* RCTAnimation.xcodeproj */; + proxyType = 2; + remoteGlobalIDString = 2D2A28201D9B03D100D4039D; + remoteInfo = "RCTAnimation-tvOS"; + }; CE4E319D1D8693090033ED64 /* PBXContainerItemProxy */ = { isa = PBXContainerItemProxy; containerPortal = 5E5A7625B76441D984EA8C0D /* RCTImageResizer.xcodeproj */; @@ -417,6 +432,7 @@ B24FC7F51DE7190C00D694FF /* RNShare.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RNShare.xcodeproj; path = "../node_modules/react-native-share/ios/RNShare.xcodeproj"; sourceTree = ""; }; B24FC7FC1DE7195700D694FF /* Social.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = Social.framework; path = System/Library/Frameworks/Social.framework; sourceTree = SDKROOT; }; B24FC7FE1DE7195F00D694FF /* MessageUI.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = MessageUI.framework; path = System/Library/Frameworks/MessageUI.framework; sourceTree = SDKROOT; }; + B2A5F42F1DEC36B200174F4D /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimation.xcodeproj; path = "../node_modules/react-native/Libraries/NativeAnimation/RCTAnimation.xcodeproj"; sourceTree = ""; }; B2F2D1BB1D9D531B00B7B453 /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = StatusIm/Images.xcassets; sourceTree = ""; }; B3B19223008342D096AA356E /* Octicons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Octicons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Octicons.ttf"; sourceTree = ""; }; C2A4E93F6B154AEFA3485B45 /* libTcpSockets.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libTcpSockets.a; sourceTree = ""; }; @@ -444,6 +460,7 @@ buildActionMask = 2147483647; files = ( B24FC8001DE71C0E00D694FF /* libSplashScreen.a in Frameworks */, + B2A5F45C1DEC36BB00174F4D /* libRCTAnimation.a in Frameworks */, B24FC7FF1DE7195F00D694FF /* MessageUI.framework in Frameworks */, B24FC7FD1DE7195700D694FF /* Social.framework in Frameworks */, B24FC7FB1DE7192200D694FF /* libRNShare.a in Frameworks */, @@ -743,6 +760,7 @@ 832341AE1AAA6A7D00B99B32 /* Libraries */ = { isa = PBXGroup; children = ( + B2A5F42F1DEC36B200174F4D /* RCTAnimation.xcodeproj */, B24FC7F51DE7190C00D694FF /* RNShare.xcodeproj */, 3A7EB0491DD9CABC00A4FCC8 /* SplashScreen.xcodeproj */, 20A5C94B1D927137002C4965 /* imageCropPicker.xcodeproj */, @@ -858,6 +876,15 @@ name = Products; sourceTree = ""; }; + B2A5F4301DEC36B200174F4D /* Products */ = { + isa = PBXGroup; + children = ( + B2A5F4381DEC36B200174F4D /* libRCTAnimation.a */, + B2A5F43A1DEC36B200174F4D /* libRCTAnimation-tvOS.a */, + ); + name = Products; + sourceTree = ""; + }; CE4E31941D8693090033ED64 /* Products */ = { isa = PBXGroup; children = ( @@ -954,6 +981,10 @@ ProductGroup = 00C302A81ABCB8CE00DB3ED1 /* Products */; ProjectRef = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */; }, + { + ProductGroup = B2A5F4301DEC36B200174F4D /* Products */; + ProjectRef = B2A5F42F1DEC36B200174F4D /* RCTAnimation.xcodeproj */; + }, { ProductGroup = 20B7D1111D3F74CD00B70F14 /* Products */; ProjectRef = 9F1854E6D9654226B1FC8308 /* RCTCamera.xcodeproj */; @@ -1309,6 +1340,20 @@ remoteRef = B24FC7F91DE7190C00D694FF /* PBXContainerItemProxy */; sourceTree = BUILT_PRODUCTS_DIR; }; + B2A5F4381DEC36B200174F4D /* libRCTAnimation.a */ = { + isa = PBXReferenceProxy; + fileType = archive.ar; + path = libRCTAnimation.a; + remoteRef = B2A5F4371DEC36B200174F4D /* PBXContainerItemProxy */; + sourceTree = BUILT_PRODUCTS_DIR; + }; + B2A5F43A1DEC36B200174F4D /* libRCTAnimation-tvOS.a */ = { + isa = PBXReferenceProxy; + fileType = archive.ar; + path = "libRCTAnimation-tvOS.a"; + remoteRef = B2A5F4391DEC36B200174F4D /* PBXContainerItemProxy */; + sourceTree = BUILT_PRODUCTS_DIR; + }; CE4E319E1D8693090033ED64 /* libRCTImageResizer.a */ = { isa = PBXReferenceProxy; fileType = archive.ar; diff --git a/package.json b/package.json index 0acb52cf25..9520346268 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "querystring-es3": "^0.2.1", "re-natal": "0.2.38", "react": "^15.3.1", - "react-native": "^0.36.0", + "react-native": "^0.38.0", "react-native-action-button": "2.0.13", "react-native-android-sms-listener": "github:adrian-tiberius/react-native-android-sms-listener#listener-bugfix", "react-native-camera": "git+https://github.com/alwx/react-native-camera.git", diff --git a/src/status_im/accounts/screen.cljs b/src/status_im/accounts/screen.cljs index c1142a8a5a..6052c46da0 100644 --- a/src/status_im/accounts/screen.cljs +++ b/src/status_im/accounts/screen.cljs @@ -66,25 +66,25 @@ :handler (if show-back? #(dispatch [:navigate-back]) nil)} :custom-content [toolbar-title] :actions [{:image {:style icon-search} - :handler #()}]}] - [list-view {:dataSource (lw/to-datasource accounts) - :enableEmptySections true - :renderRow render-row - :style st/account-list - :contentContainerStyle (st/account-list-content (count accounts))}] - [view st/bottom-actions-container - [view st/recover-button-container - [touchable-highlight - {:on-press #(dispatch [:navigate-to :recover])} - [view st/recover-button - [text {:style st/recover-button-text} - (label :t/recover-access)]]]] - [view st/add-account-button-container - [touchable-highlight {:on-press create-account - :accessibility-label :create-account} - [view st/add-account-button - [image {:source {:uri :icon_add_white} - :style st/icon-plus}] - [text {:style st/add-account-text - :font :default} - (label :t/add-account)]]]]]]])) + :handler #()}]}]] + [list-view {:dataSource (lw/to-datasource accounts) + :enableEmptySections true + :renderRow render-row + :style st/account-list + :contentContainerStyle (st/account-list-content (count accounts))}] + [view st/bottom-actions-container + [view st/recover-button-container + [touchable-highlight + {:on-press #(dispatch [:navigate-to :recover])} + [view st/recover-button + [text {:style st/recover-button-text} + (label :t/recover-access)]]]] + [view st/add-account-button-container + [touchable-highlight {:on-press create-account + :accessibility-label :create-account} + [view st/add-account-button + [image {:source {:uri :icon_add_white} + :style st/icon-plus}] + [text {:style st/add-account-text + :font :default} + (label :t/add-account)]]]]]])) diff --git a/src/status_im/accounts/styles.cljs b/src/status_im/accounts/styles.cljs index ddda65d485..c7cd39d9fd 100644 --- a/src/status_im/accounts/styles.cljs +++ b/src/status_im/accounts/styles.cljs @@ -19,7 +19,7 @@ (merge {:justifyContent :center} ;; todo this will not work with landscape and looks bad (when (< (* 69 (+ 2 cnt)) (:height (r/get-dimensions "window"))) - {:flex 1}))) + {:flex-grow 1}))) (def account-list {:margin-bottom 20}) @@ -122,14 +122,14 @@ ;wallet-qr-code.cljs (def wallet-qr-code - {:flex 1 + {:flex-grow 1 :flex-direction :column}) (def account-toolbar {:background-color "#2f3031"}) (def wallet-account-container - {:flex 1 + {:flex-grow 1 :flexDirection :row :height 69 :alignItems :center @@ -137,7 +137,7 @@ (def qr-code {:background-color "#2f3031" - :flex 1 + :flex-grow 1 :align-items :center :justify-content :center}) @@ -158,7 +158,7 @@ }) (def done-button - {:flex 1 + {:flex-grow 1 :flex-direction :column :align-items :center :justify-content :center diff --git a/src/status_im/android/platform.cljs b/src/status_im/android/platform.cljs index d706563142..94601fd2e7 100644 --- a/src/status_im/android/platform.cljs +++ b/src/status_im/android/platform.cljs @@ -75,6 +75,7 @@ {:component-styles component-styles :fonts fonts :list-selection-fn show-dialog + :tabs {:tab-shadows? true} :chats {:action-button? true :new-chat-in-toolbar? false} :contacts {:action-button? true diff --git a/src/status_im/chats_list/screen.cljs b/src/status_im/chats_list/screen.cljs index 2aa4293fae..56d00dc17a 100644 --- a/src/status_im/chats_list/screen.cljs +++ b/src/status_im/chats_list/screen.cljs @@ -23,7 +23,6 @@ [status-im.i18n :refer [label]] [status-im.chats-list.styles :as st] [status-im.utils.platform :refer [platform-specific]] - [status-im.components.tabs.bottom-gradient :refer [bottom-gradient]] [status-im.components.sync-state.offline :refer [offline-view]] [status-im.components.tabs.styles :refer [tabs-height]])) @@ -89,5 +88,4 @@ :style st/list-container}] (when (get-in platform-specific [:chats :action-button?]) [chats-action-button]) - [bottom-gradient] [offline-view]]) diff --git a/src/status_im/chats_list/styles.cljs b/src/status_im/chats_list/styles.cljs index d4554f4670..04f667ffb5 100644 --- a/src/status_im/chats_list/styles.cljs +++ b/src/status_im/chats_list/styles.cljs @@ -132,5 +132,5 @@ :right 0 :height 230 :width 230 - :bottom 0 + :bottom 24 :transform [{:translateY (if animation? offset-y 1)}]}) diff --git a/src/status_im/components/drawer/view.cljs b/src/status_im/components/drawer/view.cljs index dc0def3a7e..55964a759d 100644 --- a/src/status_im/components/drawer/view.cljs +++ b/src/status_im/components/drawer/view.cljs @@ -100,9 +100,9 @@ ;; TODO not implemented )}] [menu-item {:name (label :t/discover) - :handler #(dispatch [:navigate-to :discover])}] + :handler #(dispatch [:navigate-to-tab :discover])}] [menu-item {:name (label :t/contacts) - :handler #(dispatch [:navigate-to :contact-list])}]] + :handler #(dispatch [:navigate-to-tab :contact-list])}]] (when (zero? @keyboard-height) [text {:style st/feedback :font :default} (label :t/feedback)]) diff --git a/src/status_im/components/main_tabs.cljs b/src/status_im/components/main_tabs.cljs index 4bf124fed7..1c6f4cf929 100644 --- a/src/status_im/components/main_tabs.cljs +++ b/src/status_im/components/main_tabs.cljs @@ -13,6 +13,7 @@ [status-im.components.status-bar :refer [status-bar]] [status-im.components.drawer.view :refer [drawer-view]] [status-im.components.animation :as anim] + [status-im.components.tabs.bottom-shadow :refer [bottom-shadow-view]] [status-im.chats-list.screen :refer [chats-list]] [status-im.discover.screen :refer [discover]] [status-im.contacts.screen :refer [contact-list]] @@ -110,4 +111,5 @@ [contact-list]] [tabs {:selected-view-id @view-id :prev-view-id @prev-view-id - :tab-list tab-list}]]]]])}))) + :tab-list tab-list}] + [bottom-shadow-view]]]]])}))) diff --git a/src/status_im/components/tabs/bottom_gradient.cljs b/src/status_im/components/tabs/bottom_gradient.cljs deleted file mode 100644 index ad46d5ce43..0000000000 --- a/src/status_im/components/tabs/bottom_gradient.cljs +++ /dev/null @@ -1,11 +0,0 @@ -(ns status-im.components.tabs.bottom-gradient - (:require [status-im.components.tabs.styles :as st] - [status-im.components.react :refer [linear-gradient]] - [status-im.utils.platform :refer [platform-specific]])) - -(defn bottom-gradient [] - [linear-gradient {:locations [0 0.8 1] - :colors ["rgba(24, 52, 76, 0)" "rgba(24, 52, 76, 0.085)" "rgba(24, 52, 76, 0.165)"] - :style (merge - st/bottom-gradient - (get-in platform-specific [:component-styles :bottom-gradient]))}]) \ No newline at end of file diff --git a/src/status_im/components/tabs/bottom_shadow.cljs b/src/status_im/components/tabs/bottom_shadow.cljs new file mode 100644 index 0000000000..c6e3a836a9 --- /dev/null +++ b/src/status_im/components/tabs/bottom_shadow.cljs @@ -0,0 +1,12 @@ +(ns status-im.components.tabs.bottom-shadow + (:require [status-im.components.tabs.styles :as st] + [status-im.components.react :refer [linear-gradient]] + [status-im.utils.platform :refer [platform-specific]])) + +(defn bottom-shadow-view [] + (if (get-in platform-specific [:tabs :tab-shadows?]) + [linear-gradient {:locations [0 0.8 1] + :colors ["rgba(24, 52, 76, 0)" "rgba(24, 52, 76, 0.085)" "rgba(24, 52, 76, 0.165)"] + :style (merge + st/bottom-gradient + (get-in platform-specific [:component-styles :bottom-gradient]))}])) \ No newline at end of file diff --git a/src/status_im/components/tabs/styles.cljs b/src/status_im/components/tabs/styles.cljs index 0ddcd31b7f..0040b76099 100644 --- a/src/status_im/components/tabs/styles.cljs +++ b/src/status_im/components/tabs/styles.cljs @@ -1,30 +1,33 @@ (ns status-im.components.tabs.styles (:require [status-im.components.styles :refer [color-white]])) -(def tabs-height 60) -(def tab-height 58) - -(defn tabs-container [hidden?] - {:position :absolute - :bottom 0 - :left 0 - :right 0 - :height tabs-height - :backgroundColor color-white - :marginBottom (if hidden? (- tabs-height) 0) - :transform [{:translateY 1}]}) +(def tabs-height 56) +(def tab-height (- tabs-height 1)) (def bottom-gradient {:position :absolute - :bottom 0 - :left 0 - :right 0}) + :bottom 55 + :left 0 + :right 0}) + +(defn tabs-container [hidden?] + {:position :absolute + :bottom 0 + :left 0 + :right 0 + :height tabs-height + :background-color color-white + :margin-bottom (if hidden? (- tabs-height) 0) + :transform [{:translateY 1}]}) + +(def tabs-container-line + {:border-top-width 1 + :border-top-color "#D7D7D7"}) (def tabs-inner-container {:flexDirection :row :height tab-height :opacity 1 - :backgroundColor :white :justifyContent :center :alignItems :center}) @@ -35,29 +38,34 @@ :alignItems :center}) (def tab-title - {:font-size 12 - :height 16 - :color "#6e93d8"}) + {:font-size 12 + :height 16 + :min-width 60 + :text-align :center + :color "#6e93d8"}) (def tab-icon {:width 24 :height 24 - :marginBottom 1}) + :marginBottom 1 + :align-self :center}) (defn tab-container [active?] - {:flex 1 - :height tab-height - :justifyContent :center - :alignItems :center - :top (if active? 0 8)}) + {:flex 1 + :height tab-height + :justifyContent :center + :alignItems :center + :padding-top (if active? 0 16)}) (defn animated-offset [value] - {:top value}) + {:top value + :justifyContent :center + :alignItems :center}) (def main-swiper {:position :absolute :top 0 :left 0 :right 0 - :bottom 83 + :bottom tabs-height :shows-pagination false}) diff --git a/src/status_im/components/tabs/tab.cljs b/src/status_im/components/tabs/tab.cljs index f504ba7845..8474a91256 100644 --- a/src/status_im/components/tabs/tab.cljs +++ b/src/status_im/components/tabs/tab.cljs @@ -53,6 +53,6 @@ :else 0))} [text {:style st/tab-title} (if (or (= selected-view-id view-id) - (= prev-view-id view-id)) + (= prev-view-id view-id)) title " ")]]]])}))) diff --git a/src/status_im/components/tabs/tabs.cljs b/src/status_im/components/tabs/tabs.cljs index b5230435df..27e7310aab 100644 --- a/src/status_im/components/tabs/tabs.cljs +++ b/src/status_im/components/tabs/tabs.cljs @@ -11,7 +11,8 @@ [reagent.core :as r] [status-im.components.tabs.styles :as st] [status-im.components.tabs.tab :refer [tab]] - [status-im.components.animation :as anim])) + [status-im.components.animation :as anim] + [status-im.utils.platform :refer [platform-specific]])) (defn create-tab [index data selected-view-id prev-view-id] (let [data (merge data {:key index @@ -32,10 +33,11 @@ (defn tabs-container [& children] (let [chats-scrolled? (subscribe [:get :chats-scrolled?]) - tabs-bar-value (subscribe [:animations :tabs-bar-value]) - context {:hidden? chats-scrolled? - :val @tabs-bar-value} - on-update (animation-logic context)] + tabs-bar-value (subscribe [:animations :tabs-bar-value]) + shadows? (get-in platform-specific [:tabs :tab-shadows?]) + context {:hidden? chats-scrolled? + :val @tabs-bar-value} + on-update (animation-logic context)] (anim/set-value @tabs-bar-value 0) (r/create-class {:component-did-mount @@ -45,7 +47,8 @@ :reagent-render (fn [& children] @chats-scrolled? - (into [animated-view {:style (st/tabs-container @chats-scrolled?) + (into [animated-view {:style (merge (st/tabs-container @chats-scrolled?) + (if-not shadows? st/tabs-container-line)) :pointerEvents (if @chats-scrolled? :none :auto)}] children))}))) diff --git a/src/status_im/components/text_field/styles.cljs b/src/status_im/components/text_field/styles.cljs index 78e748236d..99f8a8ae71 100644 --- a/src/status_im/components/text_field/styles.cljs +++ b/src/status_im/components/text_field/styles.cljs @@ -6,7 +6,7 @@ {:position :relative :height 72 :padding-top 30 - :padding-bottom 7}) + :padding-bottom 34}) (def text-input {:font-size 16 diff --git a/src/status_im/contacts/screen.cljs b/src/status_im/contacts/screen.cljs index f050da9a15..eb9ff23803 100644 --- a/src/status_im/contacts/screen.cljs +++ b/src/status_im/contacts/screen.cljs @@ -22,7 +22,6 @@ hamburger-icon icon-search create-icon]] - [status-im.components.tabs.bottom-gradient :refer [bottom-gradient]] [status-im.contacts.styles :as st] [status-im.i18n :refer [label]] [status-im.utils.platform :refer [platform-specific]])) @@ -148,5 +147,4 @@ [react/icon :group_big st/empty-contacts-icon] [text {:style st/empty-contacts-text} (label :t/no-contacts)]]) (when (get-in platform-specific [:contacts :action-button?]) - [contacts-action-button]) - [bottom-gradient]]))) + [contacts-action-button])]))) diff --git a/src/status_im/contacts/styles.cljs b/src/status_im/contacts/styles.cljs index bf1b08a893..d6cf5344f2 100644 --- a/src/status_im/contacts/styles.cljs +++ b/src/status_im/contacts/styles.cljs @@ -200,7 +200,7 @@ (def buttons-container {:position :absolute - :bottom 0 + :bottom 24 :right 0 :width 220 :height 170}) diff --git a/src/status_im/discover/screen.cljs b/src/status_im/discover/screen.cljs index d395ada152..f9a4b3b6f3 100644 --- a/src/status_im/discover/screen.cljs +++ b/src/status_im/discover/screen.cljs @@ -11,7 +11,6 @@ [status-im.components.toolbar.view :refer [toolbar]] [status-im.components.drawer.view :refer [open-drawer]] [status-im.discover.styles :as st] - [status-im.components.tabs.bottom-gradient :refer [bottom-gradient]] [status-im.i18n :refer [label]] [status-im.components.carousel.carousel :refer [carousel]] [status-im.discover.views.popular-list :refer [discover-popular-list]] @@ -107,5 +106,4 @@ ;; todo change icon [icon :group_big contacts-styles/empty-contacts-icon] [text {:style contacts-styles/empty-contacts-text} - (label :t/no-statuses-discovered)]]) - [bottom-gradient]]) + (label :t/no-statuses-discovered)]])]) diff --git a/src/status_im/ios/platform.cljs b/src/status_im/ios/platform.cljs index 25f8c2343b..6c49098f30 100644 --- a/src/status_im/ios/platform.cljs +++ b/src/status_im/ios/platform.cljs @@ -82,6 +82,7 @@ {:component-styles component-styles :fonts fonts :list-selection-fn show-action-sheet + :tabs {:tab-shadows? false} :chats {:action-button? false :new-chat-in-toolbar? true} :contacts {:action-button? false