From 55fd200c719d3432ac7082e6b5c85cdfc9ffc93e Mon Sep 17 00:00:00 2001 From: Julien Eluard Date: Tue, 22 Aug 2017 09:53:15 +0200 Subject: [PATCH] Introduced tab switching for wallet transactions screen --- .../res/drawable-hdpi/icon_wallet_active.png | Bin 0 -> 629 bytes .../res/drawable-hdpi/icon_wallet_gray.png | Bin 0 -> 625 bytes .../res/drawable-mdpi/icon_wallet_active.png | Bin 0 -> 376 bytes .../res/drawable-mdpi/icon_wallet_gray.png | Bin 0 -> 384 bytes .../res/drawable-xhdpi/icon_wallet_active.png | Bin 0 -> 654 bytes .../res/drawable-xhdpi/icon_wallet_gray.png | Bin 0 -> 691 bytes .../drawable-xxhdpi/icon_wallet_active.png | Bin 0 -> 1017 bytes .../res/drawable-xxhdpi/icon_wallet_gray.png | Bin 0 -> 1024 bytes .../drawable-xxxhdpi/icon_wallet_active.png | Bin 0 -> 1421 bytes .../res/drawable-xxxhdpi/icon_wallet_gray.png | Bin 0 -> 1428 bytes .../icon_wallet_active.imageset/Contents.json | 21 +++ .../icon_wallet_active.png | Bin 0 -> 1421 bytes .../icon_wallet_gray.imageset/Contents.json | 21 +++ .../icon_wallet_gray.png | Bin 0 -> 1428 bytes src/status_im/components/button/styles.cljs | 10 +- src/status_im/components/button/view.cljs | 5 +- src/status_im/components/list/styles.cljs | 43 ++++-- src/status_im/components/list/views.cljs | 61 ++++++-- src/status_im/components/main_tabs.cljs | 18 +-- src/status_im/components/tabs/styles.cljs | 25 ++-- src/status_im/components/tabs/views.cljs | 33 ++--- .../components/toolbar_new/styles.cljs | 3 +- src/status_im/translations/en.cljs | 7 +- src/status_im/ui/screens/views.cljs | 8 +- .../ui/screens/wallet/history/styles.cljs | 11 +- .../ui/screens/wallet/history/views.cljs | 137 +++++++++++++++--- 26 files changed, 308 insertions(+), 95 deletions(-) create mode 100644 android/app/src/main/res/drawable-hdpi/icon_wallet_active.png create mode 100644 android/app/src/main/res/drawable-hdpi/icon_wallet_gray.png create mode 100644 android/app/src/main/res/drawable-mdpi/icon_wallet_active.png create mode 100644 android/app/src/main/res/drawable-mdpi/icon_wallet_gray.png create mode 100644 android/app/src/main/res/drawable-xhdpi/icon_wallet_active.png create mode 100644 android/app/src/main/res/drawable-xhdpi/icon_wallet_gray.png create mode 100644 android/app/src/main/res/drawable-xxhdpi/icon_wallet_active.png create mode 100644 android/app/src/main/res/drawable-xxhdpi/icon_wallet_gray.png create mode 100644 android/app/src/main/res/drawable-xxxhdpi/icon_wallet_active.png create mode 100644 android/app/src/main/res/drawable-xxxhdpi/icon_wallet_gray.png create mode 100644 ios/StatusIm/Images.xcassets/icon_wallet_active.imageset/Contents.json create mode 100644 ios/StatusIm/Images.xcassets/icon_wallet_active.imageset/icon_wallet_active.png create mode 100644 ios/StatusIm/Images.xcassets/icon_wallet_gray.imageset/Contents.json create mode 100644 ios/StatusIm/Images.xcassets/icon_wallet_gray.imageset/icon_wallet_gray.png diff --git a/android/app/src/main/res/drawable-hdpi/icon_wallet_active.png b/android/app/src/main/res/drawable-hdpi/icon_wallet_active.png new file mode 100644 index 0000000000000000000000000000000000000000..0dfe6888939fde865f269d7fe6c819dce706f2de GIT binary patch literal 629 zcmV-*0*d{KP)Px%FG)l}R9Fe^S5HeDQ4pVbn^=$p551^R8$6XlJ@nF3!Gj(ug7p*F5)eN^F1>l^ zy_cR^{Q_wVYCtbiFP>WvFNL&<@zg^CLjLTI^ER3Exi4!PH;aP1@R&bu-fw=)Ja%UR zk|(J^Qh|6YfMM{j-u`~t09xmO7eq7}7B`3=5zjdOFb(*w^!f2oud_V~&A%xx5K@r{ z9`rgC)rSamg}A)?DOU<&S%l_R|Bg|kdJI70!Qf%q2v|vHvrkGN9#&1JuOP_MIbiZOc%> zdk^X3Fw3F{*Ys5g!@P49x<7;vQ&Z^TzQ0%xYf;c2Uxi$Ek(1^8)z*W#d)l!P;y3b$ zWHfd0g~`|mg(d9gkBtz27P_AuQ@=Gr;5b{HyzH;G-j9pFf9;F$zYs!#h+2QZfmwf> zS|L%k+iDqKz`BHyhuw=QzNpf~G;;~AMTn=CpR&olf31fqv7^ck){@|$!XKiGv|2Wj z$$W3tY85@v>B-I^IsmXHT{%CHbigy>@jN}6W$deuRUtj&Dg}A2PPcVek3_dLHYd&p z=V^^>5zPx%D@jB_R9Fe^S2;@qK@^^uHBlRnPAxq^1TAc=?8VMT1=lkMgU3%075oQUD1sLX znj%&nwKmoYA|9>U2|%(8nU7SjMCO@M);Bjj`lROl z#oyRDY=dQR!8vaxgf}KXc`x9c%2-Txe(fCX6fsI^+%GbS8Jiq=gyvY_=Lqi-wrDj% zz}{ImV1J23zgihn9!ubBQzkm{?b6!T-jWhC>S_uZ9jyrPvLjSz%2pPlUwX3bMnaAmBP0(}ifxP#d-58=69R#t2jaI`RLf0AD96~pg^ENsS5l6iaMporTOXD00000 LNkvXXu0mjf5qlIr literal 0 HcmV?d00001 diff --git a/android/app/src/main/res/drawable-mdpi/icon_wallet_active.png b/android/app/src/main/res/drawable-mdpi/icon_wallet_active.png new file mode 100644 index 0000000000000000000000000000000000000000..2e947bb6d57cd7fd6f8a55f7afe28a543fae28c6 GIT binary patch literal 376 zcmV-;0f+vHP)Px$GD$>1R7ef&R54D&KoH!y1p1UvME(a<{DCThf=>_{h^XKbNCZ;x2P*i7l>*B2 zklb+V$l~sNaf}?4CMVgqyEi+#v$9WQx3)b2_zj$nxIdfbw?dqeJoL}j*#JIV-nf_b zZ(c_DD)HUY&|S%CcQ+S~MU&%Fxuy4g4jW$%E2)D36UKksA1qwF6SD{EMV24=+*&vWo{_hG}6>uFt z=u;;yIik9R=Px$I!Q!9R7ef&RIzTtKn%4*g~~w3qVh}4oDGmFSWuZu7m)acAQn)ikS%M|Un*)x zI)ISCoPjHM$3du06$_CP`)ohk&$<}k`doSfs5X!!N&b5}>j_(h2+FE2OGkuHLL8Th zx7{EJ7Bc=uDl9pz~{dvXUy|cEoEtrR%5^c{Di}Zwwn9bVBnt6%wT2EYSgsbWrB{KZOs3j zfm4BSG*01xiLV@{284JwCYv=pk>2gj0h*}AB^J6 z*&2C%F}(CtpU%L82v*Qu(kc~qT8+!p1xCiiQemkT;8n}pkQbJ@Q&f;m-*q0}-xWGG e|J8Q639JFc?OM9v^ienf0000imOck literal 0 HcmV?d00001 diff --git a/android/app/src/main/res/drawable-xhdpi/icon_wallet_active.png b/android/app/src/main/res/drawable-xhdpi/icon_wallet_active.png new file mode 100644 index 0000000000000000000000000000000000000000..3c6f61bbae0eabab5373c799f2c39b1093a0bd38 GIT binary patch literal 654 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 XXZsjm#~zPEzXEtm8;cj_o+*C=t<9SI literal 0 HcmV?d00001 diff --git a/android/app/src/main/res/drawable-xxxhdpi/icon_wallet_gray.png b/android/app/src/main/res/drawable-xxxhdpi/icon_wallet_gray.png new file mode 100644 index 0000000000000000000000000000000000000000..ed127f6296e8f4888403c1624aeeb81d9dd7437a GIT binary patch literal 1428 zcmaKs`#aMM0LH)Dnfr0N%;j-esMXwB6e2nA^6ghIAa4B*fb0PA;e8`~j!udEfW*{`mg%Qr%qaw*xMjs;ZTU0odRcp2IE`=jw;@3a=1u=H1Elj zjWH^lQ?e!Rmq>e{m>KG*hw>bpf&ul@DecN;>C~>O#dxc92P~MX1joWtHPijXv(9mq zE)A^Wyh*B`I1U2H3Semp@LjP>pe6cxw=3erK`m`jd5Yc&9kn{$ z#N1Ii&-t*4_LLDz$G6bSOT=rfL)Kx!9;qwE{vPRQ$o93UD1TPx8m1SOKp1!tiWojb z2bZ^Fx>tFNTbyqW_?{6kHfJfvw5(Qf?S7!#uIHfN~@(Vr}B-O!XtxqL*lk*qg#>S{w9_fWXD6L*J4LEc?s1&_Tf|#%g+?8Zl_q zNZYk#C4u@oQ8z1rGVRIj>szs;CjRAu@49uoAZ7a}ZwJTg$&V!DY4!m|(hN664fxod zS-d^kMxgYDw&fQCP1PBr8bwy)&zrbsH7IHJ%LIuaniO*u8e>C28?>6&i;{0~mu}IJ z&-l{MA#cEFR8*=I$RfcwLJsu3p7WK&POD1Ya60B1vG&nKu%O-qoH?6ko&?O-yz06O z5bE;(xAXSQ*cO7R?h#Tfj>mHiknGGwCXs(w4sB5$us80*cZIh)k@(iGnC4tuo5b`FS;D z;={P}NgK}Fp}&ldPs*XM8%I_z^q2TUxnGf8 z^LV%1Yi$}W=X1_+5`4j0U?0&Iegf*Fz^Qe*65*R&n-l#re}B*S^GLo^NJS=;VGTg6 ezN=Nc5Am619!xI}|I&k-1yFV_wl8gb6aNL_C!ZAn literal 0 HcmV?d00001 diff --git a/ios/StatusIm/Images.xcassets/icon_wallet_active.imageset/Contents.json b/ios/StatusIm/Images.xcassets/icon_wallet_active.imageset/Contents.json new file mode 100644 index 0000000000..3c8f8c4ad0 --- /dev/null +++ b/ios/StatusIm/Images.xcassets/icon_wallet_active.imageset/Contents.json @@ -0,0 +1,21 @@ +{ + "images" : [ + { + "idiom" : "universal", + "filename" : "icon_wallet_active.png", + "scale" : "1x" + }, + { + "idiom" : "universal", + "scale" : "2x" + }, + { + "idiom" : "universal", + "scale" : "3x" + } + ], + "info" : { + "version" : 1, + "author" : "xcode" + } +} diff --git a/ios/StatusIm/Images.xcassets/icon_wallet_active.imageset/icon_wallet_active.png b/ios/StatusIm/Images.xcassets/icon_wallet_active.imageset/icon_wallet_active.png new file mode 100644 index 0000000000000000000000000000000000000000..7ccfa1892705a9851daa651f8857b3158cae520d GIT binary patch literal 1421 zcmai!S5%V+0EPbyLI6X<5Jg79R1swa2tzO;2&oYhpt9GIy_Fph0wOYsD5DL6-~gIZ zkZnLI$fgj6Aq=Uqgn$G|Y#2d?rRVgq=k(#;@7$OB_+=1ntPr9nL;(Om;H@oe59#?& z;IPA9pvD*;0u*6uWe&U;mj46*LRNT-i}tag&&4BQ?=7VJX8E!F=P9 zJl8FxEO}y%&@w8IgtIX6{&r+akkM#mN~h3G@y4s99t9-<biNq(thIa+Oyyce72 zHh6u(i96-~+P%HNKyjo7%jIuQVJ6t1ek(W}q=bg1QjkcnIqts)H4^Mtac8h*FTp>^ z9*2dmq8eMewz|0OR9EzEtt!$?q`f#jki&-jr!WOa$HP|xA=uKXgz-tTHC(j`G{5Gw==8RT^EEJ@i?s; zT4Vk3Zb9}W(!V-{hrlQ|XCcj!Rs}gVGG5ep*qZAO%#5TYk#*!C+CM8@N%DMAjQXPF zoA>-Xink{P!ohe^-EJ4V-MP2tM^arKY7V}$5!-V#jSyQ8?FcN!kO$&m)N=OL%eLV` zg8r*Q8P?+X!+SGclWLXx+_zQy9f^Dp3VU(BFrYJxt|NHtf^cXr>p_A#)#_&d4;AXsHn<=BTV?D{Sz|?0L%$uGxL$t&nCC{$a=_<); zP&8-Ru5M8>=%7t0!Pje(7xl^$E5eLs;#$4Fu$H93lCB1AmS{1}jCel)1>8VC-_WYcYc1O56<_X|~3r~F-Z zCqz6UB!@OQ@z_qXn*t;tbwHWluODx(0gn2PTGq4c-|! z!c4l;;J|fyS$%k_F|%!b9P&!z*PEU(S1vEE+%bvclg-v`b)p{C~hRm zVR;|+>FZIAAnn+tgcR=1ot!kqm6bB)4UR9aJkm;A9sDB@Q2c`h+nGwO`z}l*Toa0{5~ZHJ95&+VNt7)s6|S&%jp${Hd%jL zjS?S=@Ta1jf|=9CT!^n9Yx=rFse()ivwQq0v6NG9*`~osl|Y)%rqw&8h5waU$>JnHPr z?8N4aj!;xr?-rD@(+wk4=1B*jH5FF_qj^poByeKKSGL5jDQ{6V;QwrO=&>hm&;#KH XXZsjm#~zPEzXEtm8;cj_o+*C=t<9SI literal 0 HcmV?d00001 diff --git a/ios/StatusIm/Images.xcassets/icon_wallet_gray.imageset/Contents.json b/ios/StatusIm/Images.xcassets/icon_wallet_gray.imageset/Contents.json new file mode 100644 index 0000000000..0838549c72 --- /dev/null +++ b/ios/StatusIm/Images.xcassets/icon_wallet_gray.imageset/Contents.json @@ -0,0 +1,21 @@ +{ + "images" : [ + { + "idiom" : "universal", + "filename" : "icon_wallet_gray.png", + "scale" : "1x" + }, + { + "idiom" : "universal", + "scale" : "2x" + }, + { + "idiom" : "universal", + "scale" : "3x" + } + ], + "info" : { + "version" : 1, + "author" : "xcode" + } +} diff --git a/ios/StatusIm/Images.xcassets/icon_wallet_gray.imageset/icon_wallet_gray.png b/ios/StatusIm/Images.xcassets/icon_wallet_gray.imageset/icon_wallet_gray.png new file mode 100644 index 0000000000000000000000000000000000000000..ed127f6296e8f4888403c1624aeeb81d9dd7437a GIT binary patch literal 1428 zcmaKs`#aMM0LH)Dnfr0N%;j-esMXwB6e2nA^6ghIAa4B*fb0PA;e8`~j!udEfW*{`mg%Qr%qaw*xMjs;ZTU0odRcp2IE`=jw;@3a=1u=H1Elj zjWH^lQ?e!Rmq>e{m>KG*hw>bpf&ul@DecN;>C~>O#dxc92P~MX1joWtHPijXv(9mq zE)A^Wyh*B`I1U2H3Semp@LjP>pe6cxw=3erK`m`jd5Yc&9kn{$ z#N1Ii&-t*4_LLDz$G6bSOT=rfL)Kx!9;qwE{vPRQ$o93UD1TPx8m1SOKp1!tiWojb z2bZ^Fx>tFNTbyqW_?{6kHfJfvw5(Qf?S7!#uIHfN~@(Vr}B-O!XtxqL*lk*qg#>S{w9_fWXD6L*J4LEc?s1&_Tf|#%g+?8Zl_q zNZYk#C4u@oQ8z1rGVRIj>szs;CjRAu@49uoAZ7a}ZwJTg$&V!DY4!m|(hN664fxod zS-d^kMxgYDw&fQCP1PBr8bwy)&zrbsH7IHJ%LIuaniO*u8e>C28?>6&i;{0~mu}IJ z&-l{MA#cEFR8*=I$RfcwLJsu3p7WK&POD1Ya60B1vG&nKu%O-qoH?6ko&?O-yz06O z5bE;(xAXSQ*cO7R?h#Tfj>mHiknGGwCXs(w4sB5$us80*cZIh)k@(iGnC4tuo5b`FS;D z;={P}NgK}Fp}&ldPs*XM8%I_z^q2TUxnGf8 z^LV%1Yi$}W=X1_+5`4j0U?0&Iegf*Fz^Qe*65*R&n-l#re}B*S^GLo^NJS=;VGTg6 ezN=Nc5Am619!xI}|I&k-1yFV_wl8gb6aNL_C!ZAn literal 0 HcmV?d00001 diff --git a/src/status_im/components/button/styles.cljs b/src/status_im/components/button/styles.cljs index 3f1ebc7264..ba2a207122 100644 --- a/src/status_im/components/button/styles.cljs +++ b/src/status_im/components/button/styles.cljs @@ -1,12 +1,14 @@ (ns status-im.components.button.styles + (:require-macros [status-im.utils.styles :refer [defstyle]]) (:require [status-im.components.styles :as st])) (def border-color st/color-white-transparent-2) -(def button-borders - {:background-color border-color - :margin 5 - :border-radius 8}) +(defstyle button-borders + {:background-color border-color + :margin-horizontal 5 + :android {:border-radius 4} + :ios {:border-radius 8}}) (def action-buttons-container (merge diff --git a/src/status_im/components/button/view.cljs b/src/status_im/components/button/view.cljs index da09ac8138..1930dded0e 100644 --- a/src/status_im/components/button/view.cljs +++ b/src/status_im/components/button/view.cljs @@ -1,7 +1,8 @@ (ns status-im.components.button.view (:require [cljs.spec.alpha :as s] [status-im.components.button.styles :as cst] - [status-im.components.react :as rn])) + [status-im.components.react :as rn] + [status-im.utils.platform :as p])) (defn button [{:keys [on-press style text text-style disabled?] :or {style cst/action-button}}] @@ -10,7 +11,7 @@ [rn/text {:style (or text-style (if disabled? cst/action-button-text-disabled cst/action-button-text)) :font :medium - :uppercase? false} + :uppercase? p/android?} text]]]) (defn primary-button [m] diff --git a/src/status_im/components/list/styles.cljs b/src/status_im/components/list/styles.cljs index e2b7a6763f..5304f4447c 100644 --- a/src/status_im/components/list/styles.cljs +++ b/src/status_im/components/list/styles.cljs @@ -11,24 +11,45 @@ :flex-direction :column}) (def primary-text - {:font-size 20 - :color st/color-black - :margin-top 13}) + {:font-size 20 + :color st/color-black + :padding-top 13}) (def secondary-text - {:font-size 16 - :color st/color-gray4 - :margin-top 6}) + {:font-size 16 + :color st/color-gray4 + :padding-top 6}) (def item-icon - {:width 40 - :height 40 - :margin 14}) + {:width 40 + :height 40 + :margin 14}) (def primary-action item-icon) (def secondary-action item-icon) (def action-buttons - {:flex 1 - :flex-direction :row}) \ No newline at end of file + {:flex 1 + :flex-direction :row + :padding-vertical 12}) + +(def base-separator + {:height 1 + :background-color st/color-gray5 + :opacity 0.5 + :margin-top 12 + :margin-bottom 16}) + +(def separator + (merge + base-separator + {:margin-left 70})) + +(def section-separator base-separator) + +(def section-header + {:margin-vertical 2 + :margin-bottom 12 + :margin-top 16 + :margin-left 16}) \ No newline at end of file diff --git a/src/status_im/components/list/views.cljs b/src/status_im/components/list/views.cljs index 49df5d08ca..0aeabb6039 100644 --- a/src/status_im/components/list/views.cljs +++ b/src/status_im/components/list/views.cljs @@ -1,23 +1,62 @@ (ns status-im.components.list.views - (:require [status-im.components.react :as rn] - [reagent.core :as r] - [status-im.components.common.common :as common] + (:require [reagent.core :as r] + [status-im.components.list.styles :as lst] + [status-im.components.react :as rn] [status-im.utils.platform :as p])) (def flat-list-class (rn/get-class "FlatList")) +(def section-list-class (rn/get-class "SectionList")) (defn- wrap-render-fn [f] - (fn [o] - (let [{:keys [item index separators]} (js->clj o :keywordize-keys true)] + (fn [data] + ;; For details on passed data + ;; https://facebook.github.io/react-native/docs/sectionlist.html#rendersectionheader + (let [{:keys [item index separators]} (js->clj data :keywordize-keys true)] (r/as-element (f item index separators))))) +(defn- separator [] + [rn/view lst/separator]) + +(defn- section-separator [] + [rn/view lst/section-separator]) + +(defn base-list-props [render-fn empty-component] + (merge {:renderItem (wrap-render-fn render-fn) + :keyExtractor (fn [_ i] i)} + (when p/ios? {:ItemSeparatorComponent (fn [] (r/as-element [separator]))}) + ; TODO(jeluard) Does not work with our current ReactNative version + (when empty-component {:ListEmptyComponent (r/as-element [empty-component])}))) + (defn flat-list "A wrapper for FlatList. See https://facebook.github.io/react-native/docs/flatlist.html" ([data render-fn] (flat-list data render-fn {})) - ([data render-fn props] - [flat-list-class (merge {:data (clj->js data) - :renderItem (wrap-render-fn render-fn) - :keyExtractor (fn [_ i] i)} - (when p/ios? {:ItemSeparatorComponent (fn [] (r/as-element [common/list-separator]))}) - props)])) \ No newline at end of file + ([data render-fn {:keys [empty-component] :as props}] + (if (and (empty? data) empty-component) + ;; TODO(jeluard) remove when native :ListEmptyComponent is supported + empty-component + [flat-list-class + (merge (base-list-props render-fn empty-component) + {:data (clj->js data)} + props)]))) + +(defn- wrap-render-section-header-fn [f] + (fn [data] + ;; For details on passed data + ;; https://facebook.github.io/react-native/docs/sectionlist.html#rendersectionheader + (let [{:keys [isection]} (js->clj data :keywordize-keys true)] + (r/as-element (f section))))) + +(defn section-list + "A wrapper for SectionList. + See https://facebook.github.io/react-native/docs/sectionlist.html" + ([data render-fn render-section-header-fn] (section-list data render-fn render-section-header-fn {})) + ([data render-fn render-section-header-fn {:keys [empty-component] :as props}] + (if (and (empty? data) empty-component) + empty-component + [section-list-class + (merge (base-list-props render-fn empty-component) + {:sections (clj->js data) + :renderSectionHeader (wrap-render-section-header-fn render-section-header-fn)} + (when p/ios? {:SectionSeparatorComponent (fn [] (r/as-element [section-separator]))}) + props)]))) \ No newline at end of file diff --git a/src/status_im/components/main_tabs.cljs b/src/status_im/components/main_tabs.cljs index 5d40727d5d..3f80ca2a06 100644 --- a/src/status_im/components/main_tabs.cljs +++ b/src/status_im/components/main_tabs.cljs @@ -20,6 +20,12 @@ (def tab-list (concat + (when config/wallet-tab-enabled? + [{:view-id :wallet + :title (label :t/wallet) + :screen wallet + :icon-inactive :icon_wallet_gray + :icon-active :icon_wallet_active}]) [{:view-id :chat-list :title (label :t/chats) :screen chats-list @@ -34,13 +40,7 @@ :title (label :t/contacts) :screen contact-groups-list :icon-inactive :icon_contacts - :icon-active :icon_contacts_active}] - (when config/wallet-tab-enabled? - [{:view-id :wallet - :title "Wallet" - :screen wallet - :icon-inactive :icon_contacts - :icon-active :icon_contacts_active}]))) + :icon-active :icon_contacts_active}])) (def tab->index (reduce #(assoc %1 (:view-id %2) (count %1)) {} tab-list)) @@ -115,8 +115,8 @@ (doall (map-indexed (fn [index {vid :view-id screen :screen}] ^{:key index} [screen (= @view-id vid)]) tab-list))] - [tabs {:selected-view-id @view-id - :prev-view-id @prev-view-id + [tabs {:style (st/tabs-container @tabs-hidden?) + :selected-view-id @view-id :tab-list tab-list}] (when-not @tabs-hidden? [bottom-shadow-view])]]]])}))) \ 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 d58f067894..a9fb0695b5 100644 --- a/src/status_im/components/tabs/styles.cljs +++ b/src/status_im/components/tabs/styles.cljs @@ -40,7 +40,6 @@ (defn tab-title [active?] {:font-size (if-not (or active? p/ios?) 12 14) - :height 16 :min-width 60 :text-align :center :color (if active? st/color-light-blue st/color-gray4)}) @@ -52,15 +51,19 @@ :align-self :center}) (def tab-container - {:flex 1 - :height tab-height - :justifyContent :center - :alignItems :center}) + {:flex 1 + :height tab-height + :justifyContent :center + :alignItems :center}) + +(def swiper + {:shows-pagination false}) (defn main-swiper [tabs-hidden?] - {:position :absolute - :top 0 - :left 0 - :right 0 - :bottom (if tabs-hidden? 0 tabs-height) - :shows-pagination false}) + (merge + swiper + {:position :absolute + :top 0 + :left 0 + :right 0 + :bottom (if tabs-hidden? 0 tabs-height)})) diff --git a/src/status_im/components/tabs/views.cljs b/src/status_im/components/tabs/views.cljs index 390dc5480a..10b6093d1c 100644 --- a/src/status_im/components/tabs/views.cljs +++ b/src/status_im/components/tabs/views.cljs @@ -12,38 +12,37 @@ [status-im.components.animation :as anim] [status-im.utils.platform :as p])) -(defn tab [{:keys [view-id title icon-active icon-inactive selected-view-id prev-view-id]}] - (let [active? (= view-id selected-view-id) - previous? (= view-id prev-view-id)] +(defn tab [{:keys [view-id title icon-active icon-inactive selected-view-id]}] + (let [active? (= view-id selected-view-id)] [touchable-highlight {:style st/tab :disabled active? :onPress #(dispatch [:navigate-to-tab view-id])} [view {:style st/tab-container} - [view - [image {:source {:uri (if active? icon-active icon-inactive)} - :style st/tab-icon}]] + (when-let [icon (if active? icon-active icon-inactive)] + [view + [image {:source {:uri icon} + :style st/tab-icon}]]) [view [text {:style (st/tab-title active?) :font (if (and p/ios? active?) :medium :regular)} title]]]])) -(defn- create-tab [index data selected-view-id prev-view-id] +(defn- create-tab [index data selected-view-id] (let [data (merge data {:key index :index index - :selected-view-id selected-view-id - :prev-view-id prev-view-id})] + :selected-view-id selected-view-id})] [tab data])) -(defn- tabs-container [& children] +(defn- tabs-container [style children] (let [tabs-hidden? (subscribe [:tabs-hidden?]) shadows? (get-in p/platform-specific [:tabs :tab-shadows?])] - (into [animated-view {:style (merge (st/tabs-container @tabs-hidden?) - (if-not shadows? st/tabs-container-line)) - :pointerEvents (if @tabs-hidden? :none :auto)}] - children))) + [animated-view {:style (merge style + (when-not shadows? st/tabs-container-line)) + :pointerEvents (if @tabs-hidden? :none :auto)} + children])) -(defn tabs [{:keys [tab-list selected-view-id prev-view-id]}] - [tabs-container +(defn tabs [{:keys [style tab-list selected-view-id]}] + [tabs-container style (into [view st/tabs-inner-container] - (map-indexed #(create-tab %1 %2 selected-view-id prev-view-id) tab-list))]) + (map-indexed #(create-tab %1 %2 selected-view-id) tab-list))]) diff --git a/src/status_im/components/toolbar_new/styles.cljs b/src/status_im/components/toolbar_new/styles.cljs index 37c9a9352f..f226851339 100644 --- a/src/status_im/components/toolbar_new/styles.cljs +++ b/src/status_im/components/toolbar_new/styles.cljs @@ -44,7 +44,8 @@ (defstyle toolbar-title-text {:color text1-color :letter-spacing -0.2 - :font-size 17}) + :font-size 17 + :ios {:text-align "center"}}) (def toolbar-border-container (get-in p/platform-specific [:component-styles :toolbar-border-container])) diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs index b5faaf438d..d8d050fe21 100644 --- a/src/status_im/translations/en.cljs +++ b/src/status_im/translations/en.cljs @@ -329,8 +329,13 @@ :testfairy-message "You are using app installed from a nightly build. For testing purposes this build includes session recording if wifi connection is used, so all your interaction with app is saved (as video and log) and might be used by development team to investigate possible issues. Saved video/log do not include your passwords. Recording is done only if app is installed from a nightly build. Nothing is recorded if app is installed from PlayStore or TestFlight." ;; wallet + :wallet "Wallet" :transactions "Transactions" :transactions-to "To" :transactions-sign "Sign" :transactions-sign-all "Sign all" - :transactions-delete "Delete"}) + :transactions-delete "Delete" + :transactions-history "History" + :transactions-unsigned "Unsigned" + :transactions-history-empty "You don't have a history transactions" + :transactions-unsigned-empty "You don't have unsigned transactions"}) diff --git a/src/status_im/ui/screens/views.cljs b/src/status_im/ui/screens/views.cljs index 5fdfea9fd7..460be6c2d3 100644 --- a/src/status_im/ui/screens/views.cljs +++ b/src/status_im/ui/screens/views.cljs @@ -58,6 +58,8 @@ (when view-id (let [current-view (validate-current-view view-id signed-up?)] (let [component (case current-view + :wallet-transactions-unsigned wallet-transactions + :wallet-transactions-history wallet-transactions :wallet main-tabs :wallet-send-transaction send-transaction :discover main-tabs @@ -85,7 +87,8 @@ :profile-photo-capture profile-photo-capture :accounts accounts :login login - :recover recover)] + :recover recover + (throw (str "Unknown view: " current-view)))] [(if android? menu-context view) common-styles/flex [view common-styles/flex @@ -102,5 +105,6 @@ :transaction-details transaction-details :confirmation-success confirmation-success :contact-list-modal contact-list-modal - :wallet-transactions wallet-transactions)] + :wallet-transactions wallet-transactions + (throw (str "Unknown modal view: " modal-view)))] [component])]])]]))))) diff --git a/src/status_im/ui/screens/wallet/history/styles.cljs b/src/status_im/ui/screens/wallet/history/styles.cljs index d2a21de376..903ba530b9 100644 --- a/src/status_im/ui/screens/wallet/history/styles.cljs +++ b/src/status_im/ui/screens/wallet/history/styles.cljs @@ -7,8 +7,15 @@ (def toolbar-right-action {:color st/color-blue4 - :font-size 18 + :font-size 17 :margin-right 12}) (def main-section - {:background-color st/color-white}) \ No newline at end of file + {:flex 1 + :position :relative + :background-color st/color-white}) + +(def empty-text + {:text-align :center + :margin-top 22 + :margin-horizontal 92}) \ No newline at end of file diff --git a/src/status_im/ui/screens/wallet/history/views.cljs b/src/status_im/ui/screens/wallet/history/views.cljs index dda6d0922a..72d3d46b46 100644 --- a/src/status_im/ui/screens/wallet/history/views.cljs +++ b/src/status_im/ui/screens/wallet/history/views.cljs @@ -1,55 +1,144 @@ (ns status-im.ui.screens.wallet.history.views - (:require-macros [status-im.utils.views :refer [defview]]) - (:require [status-im.components.button.view :as btn] + (:require-macros [status-im.utils.views :refer [defview letsubs]]) + (:require [reagent.core :as r] + [status-im.components.button.view :as btn] [status-im.components.react :as rn] [status-im.components.list.styles :as list-st] [status-im.components.list.views :as list] + [status-im.components.tabs.styles :as tst] + [status-im.components.tabs.views :as tabs] [status-im.components.toolbar-new.view :as toolbar] [status-im.ui.screens.wallet.history.styles :as st] + [status-im.utils.utils :as utils] [status-im.i18n :as i18n])) +(defn on-sign-transaction + [m] + ;; TODO(yenda) implement + (utils/show-popup "TODO" "Sign Transaction")) + +(defn on-sign-all-transactions + [m] + ;; TODO(yenda) implement + (utils/show-popup "TODO" "Sign All Transactions")) + +(defn on-delete-transaction + [m] + ;; TODO(yenda) implement + (utils/show-popup "TODO" "Delete Transaction")) + (defn unsigned-action [] - [rn/text {:style st/toolbar-right-action} + [rn/text {:style st/toolbar-right-action :onPress on-sign-all-transactions} (i18n/label :t/transactions-sign-all)]) -(defn toolbar-view [] +(defn history-action [] + ;; TODO(jeluard) + [rn/text {:style st/toolbar-right-action} + "AAAAA"]) + +(defn toolbar-view [view-id] [toolbar/toolbar {:title (i18n/label :t/transactions) - :title-style {:text-align "center"} - :custom-action [unsigned-action]}]) + :custom-action + [(if (= @view-id :wallet-transactions-unsigned) unsigned-action history-action)]}]) (defn- icon-status [k] (case k :pending :dropdown_white :dropdown_white)) -(defn render-transaction - [item] +(defn action-buttons [m ] + [rn/view {:style list-st/action-buttons} + [btn/primary-button {:text (i18n/label :t/transactions-sign) :on-press #(on-sign-transaction m)}] + [btn/secondary-button {:text (i18n/label :t/transactions-delete) :on-press #(on-delete-transaction m)}]]) + +(defn- unsigned? [state] (= "unsigned" state)) + +(defn transaction-details [{:keys [to state] {:keys [value symbol]} :content :as m}] + [rn/view {:style list-st/item-text-view} + [rn/text {:style list-st/primary-text} (str value " " symbol)] + [rn/text {:style list-st/secondary-text :ellipsize-mode "middle" :number-of-lines 1} (str (i18n/label :t/transactions-to) " " to)] + (if (unsigned? state) + [action-buttons m])]) + +(defn render-transaction [m] [rn/view {:style list-st/item} [rn/image {:source {:uri :console} :style list-st/item-icon}] - [rn/view {:style list-st/item-text-view} - (let [m (:content item)] - [rn/text {:style list-st/primary-text} (str (:value m) " " (:symbol m))]) - [rn/text {:style list-st/secondary-text} (str (i18n/label :t/transactions-to) " " (:to item))] - [rn/view {:style list-st/action-buttons} - [btn/primary-button {:text (i18n/label :t/transactions-sign)}] - [btn/secondary-button {:text (i18n/label :t/transactions-delete)}]]] + [transaction-details m] [rn/icon :forward_gray list-st/secondary-action]]) +(defn render-section-header [m] + [rn/text {:style list-st/section-header} (:title m)]) + (def dummy-transaction-data - [{:to "0xAAAAA" :content {:value "0,4909" :symbol "ETH"}} - {:to "0xAAAAA" :content {:value "10000" :symbol "SGT"}}]) + [{:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "0,4909" :symbol "ETH"} :state :unsigned} + {:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "10000" :symbol "SGT"} :state :unsigned} + {:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "10000" :symbol "SGT"} :state :unsigned}]) -(defn main-section [] +(def dummy-transaction-data-sorted + [{:title "Postponed" + :key :postponed + :data [{:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "0,4909" :symbol "ETH"} :state :pending} + {:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "10000" :symbol "SGT"} :state :pending} + {:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "10000" :symbol "SGT"} :state :sent}]} + {:title "Pending" + :key :pending + :data [{:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "0,4909" :symbol "ETH"} :state :pending} + {:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "10000" :symbol "SGT"} :state :pending} + {:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "10000" :symbol "SGT"} :state :sent}]}]) + +;; TODO(yenda) hook with re-frame + +(defn empty-text [s] + [rn/text {:style st/empty-text} s]) + +(defview history-list [] + [list/section-list dummy-transaction-data-sorted render-transaction render-section-header + {:empty-component (empty-text (i18n/label :t/transactions-history-empty))}]) + +(defview unsigned-list [] + [list/flat-list dummy-transaction-data render-transaction + {:empty-component (empty-text (i18n/label :t/transactions-unsigned-empty))}]) + +(def tab-list + [{:view-id :wallet-transactions-unsigned + :title (i18n/label :t/transactions-unsigned) + :screen unsigned-list} + {:view-id :wallet-transactions-history + :title (i18n/label :t/transactions-history) + :screen history-list}]) + +(def tab->index (reduce #(assoc %1 (:view-id %2) (count %1)) {} tab-list)) + +(defn get-tab-index [view-id] + (get tab->index view-id 0)) + +;; TODO(jeluard) whole swipe logic +;; extract navigate-tab action (on tap) + +(defn main-section [view-id] [rn/view {:style st/main-section} - [list/flat-list dummy-transaction-data render-transaction]]) + [tabs/tabs {:selected-view-id @view-id + :tab-list tab-list}] + [rn/swiper (merge tst/swiper + {:index (get-tab-index @view-id) + :loop false + ;:ref #(reset! swiper %) + ;:on-momentum-scroll-end (on-scroll-end swiped? scroll-ended @view-id) + }) + (doall + (map-indexed (fn [index {screen :screen}] + ^{:key index} [screen]) tab-list))]]) -;; TODO must reflect selected wallet +;; TODO(yenda) must reflect selected wallet + +(def initial-tab (-> tab-list first :view-id)) (defview wallet-transactions [] [] - [rn/view {:style st/wallet-transactions-container} - [toolbar-view] - [rn/scroll-view - [main-section]]]) + (let [view-id (r/atom initial-tab)] + [rn/view {:style st/wallet-transactions-container} + [toolbar-view view-id] + [rn/scroll-view + [main-section view-id]]]))