From 799808965dac2236d21cd07e6a32e664f17e6711 Mon Sep 17 00:00:00 2001 From: Adrian Tiberius Date: Thu, 19 May 2016 20:05:04 +0300 Subject: [PATCH] add gradient --- .re-natal | 3 ++- android/app/build.gradle | 1 + .../main/java/com/syngim/MainActivity.java | 4 ++- android/settings.gradle | 4 ++- package.json | 1 + src/syng_im/components/react.cljs | 9 +++++++ src/syng_im/components/tabs/styles.cljs | 25 ++++++++++++------- src/syng_im/components/tabs/tabs.cljs | 8 ++++-- 8 files changed, 41 insertions(+), 14 deletions(-) diff --git a/.re-natal b/.re-natal index 54a57bc450..e3b67b5de2 100644 --- a/.re-natal +++ b/.re-natal @@ -14,7 +14,8 @@ "react-native-vector-icons/Ionicons", "react-native-circle-checkbox", "react-native-randombytes", - "dismissKeyboard" + "dismissKeyboard", + "react-native-linear-gradient" ], "imageDirs": [ "images" diff --git a/android/app/build.gradle b/android/app/build.gradle index c291fec7de..5f502d9326 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -128,6 +128,7 @@ dependencies { compile "com.facebook.react:react-native:+" // From node_modules compile project(':react-native-contacts') compile project(':react-native-i18n') + compile project(':react-native-linear-gradient') // compile(name:'geth', ext:'aar') compile(group: 'status-im', name: 'android-geth', version: '1.4.0-201604110816-a97a114', ext: 'aar') diff --git a/android/app/src/main/java/com/syngim/MainActivity.java b/android/app/src/main/java/com/syngim/MainActivity.java index b080070f49..556050c853 100644 --- a/android/app/src/main/java/com/syngim/MainActivity.java +++ b/android/app/src/main/java/com/syngim/MainActivity.java @@ -10,6 +10,7 @@ import android.os.Bundle; import android.os.Environment; import com.github.ethereum.go_ethereum.cmd.Geth; import com.bitgo.randombytes.RandomBytesPackage; +import com.BV.LinearGradient.LinearGradientPackage; import java.util.Arrays; import java.util.List; @@ -78,7 +79,8 @@ public class MainActivity extends ReactActivity { new VectorIconsPackage(), new ReactNativeContacts(), new ReactNativeI18n(), - new RandomBytesPackage() + new RandomBytesPackage(), + new LinearGradientPackage() ); } } diff --git a/android/settings.gradle b/android/settings.gradle index 784925e19a..cc6a4e9391 100644 --- a/android/settings.gradle +++ b/android/settings.gradle @@ -13,4 +13,6 @@ project(':react-native-vector-icons').projectDir = new File(rootProject.projectD include ':realm' project(':realm').projectDir = new File(rootProject.projectDir, '../node_modules/realm/android') include ':randombytes' -project(':randombytes').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-randombytes/app') \ No newline at end of file +project(':randombytes').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-randombytes/app') +include ':react-native-linear-gradient' +project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android') \ No newline at end of file diff --git a/package.json b/package.json index 48ab8e052a..561b5de8c8 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "react-native-contacts": "^0.2.4", "react-native-i18n": "0.0.8", "react-native-invertible-scroll-view": "^1.0.0", + "react-native-linear-gradient": "^1.5.7", "react-native-loading-spinner-overlay": "0.0.8", "react-native-randombytes": "^2.0.0", "react-native-vector-icons": "^1.3.4", diff --git a/src/syng_im/components/react.cljs b/src/syng_im/components/react.cljs index e19ffe11fe..aea94bdac7 100644 --- a/src/syng_im/components/react.cljs +++ b/src/syng_im/components/react.cljs @@ -36,6 +36,15 @@ [image {:source {:uri (keyword (str "icon_" (name n)))} :style style}]) +;(def react-linear-gradient (.-default (js/require "react-native-linear-gradient"))) +;(def linear-gradient (r/adapt-react-class react-linear-gradient)) + +(set! js/window.LinearGradient (js/require "react-native-linear-gradient")) +(defn linear-gradient [props] + (js/React.createElement js/LinearGradient + (clj->js (merge {:inverted true} props)))) + + (def platform (.. js/React -Platform -OS)) (def android? (= platform "android")) diff --git a/src/syng_im/components/tabs/styles.cljs b/src/syng_im/components/tabs/styles.cljs index 59d106c904..4a161ba2b1 100644 --- a/src/syng_im/components/tabs/styles.cljs +++ b/src/syng_im/components/tabs/styles.cljs @@ -13,18 +13,24 @@ (def tab-height 56) (def tabs + {:flex 1 + :position :absolute + :bottom 0 + :right 0 + :left 0 + }) + +(def top-gradient + {:flexDirection :row + :height 3}) + +(def tabs-container {:flexDirection :row - :position :absolute - :bottom 0 - :right 0 - :left 0 :height tab-height :opacity 1 :backgroundColor :white - :justifyContent :center - :alignItems :center - :borderTopColor "#1c18354c" - :borderTopWidth 1}) + :justifyContent :center + :alignItems :center}) (def tab {:flex 1 @@ -46,4 +52,5 @@ {:flex 1 :height tab-height :justifyContent :center - :alignItems :center}) \ No newline at end of file + :alignItems :center}) + diff --git a/src/syng_im/components/tabs/tabs.cljs b/src/syng_im/components/tabs/tabs.cljs index 257cd60260..c784287c5a 100644 --- a/src/syng_im/components/tabs/tabs.cljs +++ b/src/syng_im/components/tabs/tabs.cljs @@ -5,7 +5,8 @@ text-input text image - touchable-highlight]] + touchable-highlight + linear-gradient]] [reagent.core :as r] [syng-im.components.tabs.styles :as st] [syng-im.components.tabs.tab :refer [tab]])) @@ -19,4 +20,7 @@ (defview tabs [{:keys [style tab-list selected-index]}] (let [style (merge st/tabs style)] [view {:style style} - (doall (map-indexed #(create-tab %1 %2 selected-index) tab-list))])) + [linear-gradient {:colors [ "rgba(24, 52, 76, 0.01)" "rgba(24, 52, 76, 0.085)" "rgba(24, 52, 76, 0.165)"] + :style st/top-gradient}] + [view st/tabs-container + (doall (map-indexed #(create-tab %1 %2 selected-index) tab-list))]]))