From decc2188e6da882af2735d2f45fc45ced323af47 Mon Sep 17 00:00:00 2001 From: Alexander Pantyuhov Date: Wed, 5 Oct 2016 11:56:53 +0300 Subject: [PATCH] Chat list and contact list UI fixes (#291, #274, #275) --- .../src/main/res/drawable-hdpi/icon_add.png | Bin 177 -> 153 bytes .../main/res/drawable-hdpi/icon_add_white.png | Bin 0 -> 177 bytes .../src/main/res/drawable-xhdpi/icon_add.png | Bin 202 -> 228 bytes .../res/drawable-xhdpi/icon_add_white.png | Bin 0 -> 202 bytes .../src/main/res/drawable-xxhdpi/icon_add.png | Bin 296 -> 353 bytes .../res/drawable-xxhdpi/icon_add_white.png | Bin 0 -> 296 bytes .../{icon_add.png => icon_add_white.png} | Bin ios/StatusIm.xcodeproj/project.pbxproj | 8 +- .../icon_add.imageset/icon_add.png | Bin 296 -> 353 bytes .../icon_add_white.imageset/Contents.json | 21 ++++ .../icon_add_white.imageset/icon_add.png | Bin 0 -> 296 bytes src/status_im/accounts/login/screen.cljs | 12 +- src/status_im/accounts/login/styles.cljs | 5 +- src/status_im/accounts/recover/screen.cljs | 12 +- src/status_im/accounts/recover/styles.cljs | 35 +++--- src/status_im/accounts/screen.cljs | 15 +-- src/status_im/accounts/styles.cljs | 21 ++-- src/status_im/android/platform.cljs | 6 +- src/status_im/chat/handlers.cljs | 6 +- .../chat/handlers/receive_message.cljs | 3 +- src/status_im/chat/screen.cljs | 4 +- src/status_im/chat/styles/screen.cljs | 4 +- src/status_im/chats_list/screen.cljs | 96 ++++++++++------ src/status_im/chats_list/styles.cljs | 106 ++++++++++-------- .../chats_list/views/chat_list_item.cljs | 14 +-- .../chats_list/views/inner_item.cljs | 84 +++++++++----- src/status_im/components/carousel/styles.cljs | 10 +- .../components/chat_icon/styles.cljs | 20 ++-- src/status_im/components/styles.cljs | 27 +---- src/status_im/components/tabs/styles.cljs | 9 +- src/status_im/components/toolbar.cljs | 61 ---------- src/status_im/components/toolbar/styles.cljs | 54 +++++++++ src/status_im/components/toolbar/view.cljs | 47 ++++++++ src/status_im/contacts/screen.cljs | 60 +++++----- src/status_im/contacts/styles.cljs | 79 ++++++++----- src/status_im/contacts/subs.cljs | 8 +- src/status_im/contacts/views/contact.cljs | 8 +- .../contacts/views/contact_list.cljs | 58 ++++++---- src/status_im/contacts/views/new_contact.cljs | 31 +++-- src/status_im/discovery/screen.cljs | 8 +- src/status_im/discovery/search_results.cljs | 8 +- src/status_im/discovery/styles.cljs | 10 +- src/status_im/discovery/tag.cljs | 8 +- src/status_im/group_settings/screen.cljs | 2 +- .../group_settings/styles/group_settings.cljs | 6 +- src/status_im/ios/platform.cljs | 11 +- src/status_im/new_group/screen.cljs | 12 +- src/status_im/new_group/styles.cljs | 3 +- src/status_im/participants/views/add.cljs | 12 +- src/status_im/participants/views/remove.cljs | 12 +- .../profile/photo_capture/screen.cljs | 7 +- src/status_im/protocol/handlers.cljs | 2 +- src/status_im/qr_scanner/screen.cljs | 12 +- src/status_im/qr_scanner/styles.cljs | 4 +- .../qr_scanner/views/import_button.cljs | 1 - .../qr_scanner/views/scan_button.cljs | 1 - src/status_im/transactions/screen.cljs | 16 +-- src/status_im/transactions/styles.cljs | 5 +- src/status_im/translations/en.cljs | 19 ++-- 59 files changed, 599 insertions(+), 484 deletions(-) mode change 100644 => 100755 android/app/src/main/res/drawable-hdpi/icon_add.png create mode 100644 android/app/src/main/res/drawable-hdpi/icon_add_white.png mode change 100644 => 100755 android/app/src/main/res/drawable-xhdpi/icon_add.png create mode 100644 android/app/src/main/res/drawable-xhdpi/icon_add_white.png mode change 100644 => 100755 android/app/src/main/res/drawable-xxhdpi/icon_add.png create mode 100644 android/app/src/main/res/drawable-xxhdpi/icon_add_white.png rename android/app/src/main/res/drawable-xxxhdpi/{icon_add.png => icon_add_white.png} (100%) create mode 100644 ios/StatusIm/Images.xcassets/icon_add_white.imageset/Contents.json create mode 100644 ios/StatusIm/Images.xcassets/icon_add_white.imageset/icon_add.png delete mode 100644 src/status_im/components/toolbar.cljs create mode 100644 src/status_im/components/toolbar/styles.cljs create mode 100644 src/status_im/components/toolbar/view.cljs diff --git a/android/app/src/main/res/drawable-hdpi/icon_add.png b/android/app/src/main/res/drawable-hdpi/icon_add.png old mode 100644 new mode 100755 index 60ab6e1281ed44220d18451251ad0fe4cf90b32d..4e3f4cc71db80ffb12b1b2289453275554cd3d65 GIT binary patch literal 153 zcmeAS@N?(olHy`uVBq!ia0vp^d?3uh1|;P@bT0xa#^NA%Cx&(BWL^R}!JaOTAsV8| z2?rRLglxIrWWblnCKe;~|GzQE!%57Y#t$bSQ8#ZfF=}$^3vgKQd+NlA4`pxGxtQ~u zn;vrQAOE2OMiaK1W_*gh7MHa&PFy_1+{(@H@i@<`rNuq+K;s!aUHx3vIVCg!0K0cG AE&u=k literal 177 zcmeAS@N?(olHy`uVBq!ia0vp^q9Dw{1|(OCFP#RY7>k44ofy`glX(f`WP7?ehFAzD zCnzxe`TzgFmO%4?P^Brx211KDQlxxjl?4vm*pZU&_n#MdEeql0#DjXD!&e zp}IxqVzz?wL(bVc${RA6T3?##JetB0t32bW!!qUHX(qFUc-}9Z{G)xoccLVV+v8px ZhF1aduk|?IY6Goh@O1TaS?83{1OQ+_JedFh diff --git a/android/app/src/main/res/drawable-hdpi/icon_add_white.png b/android/app/src/main/res/drawable-hdpi/icon_add_white.png new file mode 100644 index 0000000000000000000000000000000000000000..60ab6e1281ed44220d18451251ad0fe4cf90b32d GIT binary patch literal 177 zcmeAS@N?(olHy`uVBq!ia0vp^q9Dw{1|(OCFP#RY7>k44ofy`glX(f`WP7?ehFAzD zCnzxe`TzgFmO%4?P^Brx211KDQlxxjl?4vm*pZU&_n#MdEeql0#DjXD!&e zp}IxqVzz?wL(bVc${RA6T3?##JetB0t32bW!!qUHX(qFUc-}9Z{G)xoccLVV+v8px ZhF1aduk|?IY6Goh@O1TaS?83{1OQ+_JedFh literal 0 HcmV?d00001 diff --git a/android/app/src/main/res/drawable-xhdpi/icon_add.png b/android/app/src/main/res/drawable-xhdpi/icon_add.png old mode 100644 new mode 100755 index be85af38f4e8ea7d59471af2a412229a8c17bc06..88136956c2a08fb659382d77cbfafa48068f9c8d GIT binary patch delta 187 zcmV;s07U=F0ptOYF@K&(L_t(Y4P#^=5lAZQY-M2h?*-Dv$iTSu+1)EXq!__OieiXb zh-D!5e}@0wr0OTbLQ<_jRX=JWYIsnAHyWf=2t-sPMuQYJJgC59L@pbtU>;s0KxHq` zLhb)}RZ&@TAQBDZHY$4pr*YsQ#VLzJ0zC?z-@VF+Ln&6_fiwtGtPY`>;HVF&9<-xD pIvS)ThX5Ig22u8c%0^Oc1OOjT6(;qK6;=QM002ovPDHLkV1j)JOKSiC delta 161 zcmV;S0ABy(0m=c8F@JFV(v%cdVELyh(y3U|+~HK`0IYcP~bRhoBv++_q;=ioR1fko_WjA+3AwCQ9^-f?X^>z^sF5$L`4?(hy@>6bN_b! z-i8;SReHjv1YMdU5|;3Dx#p#n5tr^f40+D5re*s*i}LdpSv!|_RrEdoZZT=$#YH9i zSS;t&2-^KLvFi-~Ta&nBkLF8#m92Zj-KA4_Ew3pHhO81Q0J?|4)78&qol`;+0LSZ2 A{r~^~ literal 0 HcmV?d00001 diff --git a/android/app/src/main/res/drawable-xxhdpi/icon_add.png b/android/app/src/main/res/drawable-xxhdpi/icon_add.png old mode 100644 new mode 100755 index 27805857685fc0cbd1ac2c17636ffe84f2d32eda..ce0b329d94de08879938fc959c48f45b5f0bdb8e GIT binary patch delta 314 zcmZ3%^pI(SK|Q0ir;B4q1n1kC8~K_Xc-o>pObQDM3}0zTzq6aMc(?GLxj7cA&M!Fa zDeS?q(`08H^Q0-Rdp>>t|96k~JEo>fr6>H%+21{q(OIFYR3o^d;@bDsZLC=)3*~<6 z{4Y`5Jx}CYX!z-O)o0R$l;35yE3SMd{W{y}-PNYH8D8_YE)dG9pL49Es6@q7S!?03 z%pMJQ_aNg%LRrXy1v`wN%gtMKZJvnNm$zq@a~!D*y5UkRes1Q`D;ke$#Do)je{N0A z&`jQSFDJaAAdly=p^vlet)n3;WT%%Ozw^^+kNniG<2BD#^dGYClMH-Yf3!m?Fqi4p z-<&=WZ472yj9}U~xhdc0)nYUE+0)}w?IU&@>n}anwo5*l$MC?e%pHylK;Y@>=d#Wz Gp$Py=Rg!Z6 delta 256 zcmV+b0ssEt0;mFzFn<8zNkl{`}6iooF$1_TzXaZ=xE(7l-qEE?n=tZv;)p;AzxT{fbGLMR$)i>0r zJDH!gVpR81zb8Ed)nh2pU9z%S_4bC`5Oq6#ops(ql}^RD)K^~-pz%ba21&9&qDg?J zokR_iWPwDJ08KlI8YIcWUlR3(Z?6_&izK?<6x5{FAn^gXzdWwg6_U3A0000Px#;z>k7R9Fe^m$44RFbG8L4($i`8=9&4;COLi=wj#s7m28cgp?q0K0P}TZVeQ3 z&Q0=={DwZiK=Q4lgv8V#TK7e7^xhv!E%b^sIz0zs6tc$66R%jKQS`2mD2bv8p!Il0 zNfb>0t;aJ;qG$qWy)FaqCZbQtb?8N}71bNkxT{fbGLMR$)i>0rJDH!gVpR81zb8Ed z)nh2pU9z%S_4bC`5Oq6#ops(ql}^RD)K^~-pz%ba21&9&qDg?JokR_iWPwDJ08KlI u8YIcWUlR3(Z?6_&izK?<6x5{FAn^gXzdWwg6_U3A0000pObQDM3}0zTzq6aMc(?GLxj7cA&M!Fa zDeS?q(`08H^Q0-Rdp>>t|96k~JEo>fr6>H%+21{q(OIFYR3o^d;@bDsZLC=)3*~<6 z{4Y`5Jx}CYX!z-O)o0R$l;35yE3SMd{W{y}-PNYH8D8_YE)dG9pL49Es6@q7S!?03 z%pMJQ_aNg%LRrXy1v`wN%gtMKZJvnNm$zq@a~!D*y5UkRes1Q`D;ke$#Do)je{N0A z&`jQSFDJaAAdly=p^vlet)n3;WT%%Ozw^^+kNniG<2BD#^dGYClMH-Yf3!m?Fqi4p z-<&=WZ472yj9}U~xhdc0)nYUE+0)}w?IU&@>n}anwo5*l$MC?e%pHylK;Y@>=d#Wz Gp$Py=Rg!Z6 delta 256 zcmV+b0ssEt0;mFzFn<8zNkl{`}6iooF$1_TzXaZ=xE(7l-qEE?n=tZv;)p;AzxT{fbGLMR$)i>0r zJDH!gVpR81zb8Ed)nh2pU9z%S_4bC`5Oq6#ops(ql}^RD)K^~-pz%ba21&9&qDg?J zokR_iWPwDJ08KlI8YIcWUlR3(Z?6_&izK?<6x5{FAn^gXzdWwg6_U3A0000Px#;z>k7R9Fe^m$44RFbG8L4($i`8=9&4;COLi=wj#s7m28cgp?q0K0P}TZVeQ3 z&Q0=={DwZiK=Q4lgv8V#TK7e7^xhv!E%b^sIz0zs6tc$66R%jKQS`2mD2bv8p!Il0 zNfb>0t;aJ;qG$qWy)FaqCZbQtb?8N}71bNkxT{fbGLMR$)i>0rJDH!gVpR81zb8Ed z)nh2pU9z%S_4bC`5Oq6#ops(ql}^RD)K^~-pz%ba21&9&qDg?JokR_iWPwDJ08KlI u8YIcWUlR3(Z?6_&izK?<6x5{FAn^gXzdWwg6_U3A0000> loaded-chats (map (fn [{:keys [chat-id] :as chat}] - [chat-id chat])) + (let [last-message (messages/get-last-message chat-id)] + [chat-id (assoc chat :last-message last-message)]))) (into {})) ids (set (keys chats))] @@ -275,7 +276,8 @@ db' (assoc db :current-chat-id chat-id)] (dispatch [:load-requests! chat-id]) (dispatch [:load-commands! chat-id]) - (if (seq messages) + (if (and (seq messages) + (not= (count messages) 1)) db' (-> db' load-messages! diff --git a/src/status_im/chat/handlers/receive_message.cljs b/src/status_im/chat/handlers/receive_message.cljs index c05181b614..494489eb2e 100644 --- a/src/status_im/chat/handlers/receive_message.cljs +++ b/src/status_im/chat/handlers/receive_message.cljs @@ -38,7 +38,8 @@ message' (assoc (->> message (cu/check-author-direction previous-message) (check-preview)) - :chat-id chat-id')] + :chat-id chat-id' + :timestamp (.getTime (js/Date.)))] (store-message message') (when-not exists? (dispatch [:add-chat chat-id' (when group-chat? {:group-chat true})])) diff --git a/src/status_im/chat/screen.cljs b/src/status_im/chat/screen.cljs index 56c2d36cab..9da618f41e 100644 --- a/src/status_im/chat/screen.cljs +++ b/src/status_im/chat/screen.cljs @@ -17,7 +17,7 @@ [status-im.utils.datetime :as time] [status-im.utils.platform :refer [platform-specific]] [status-im.components.invertible-scroll-view :refer [invertible-scroll-view]] - [status-im.components.toolbar :refer [toolbar]] + [status-im.components.toolbar.view :refer [toolbar]] [status-im.chat.views.message :refer [chat-message]] [status-im.chat.views.suggestions :refer [suggestion-container]] [status-im.chat.views.response :refer [response-view]] @@ -107,7 +107,7 @@ [text {:style st/members :font :medium} (let [cnt (inc (count @contacts))] - (label-pluralize cnt :t/members))]] + (label-pluralize cnt :t/members-active))]] [text {:style st/last-activity :font :default} (online-text @contact @chat-id)])]))) diff --git a/src/status_im/chat/styles/screen.cljs b/src/status_im/chat/styles/screen.cljs index d975c822bb..c9fd35af25 100644 --- a/src/status_im/chat/styles/screen.cljs +++ b/src/status_im/chat/styles/screen.cljs @@ -6,8 +6,8 @@ selected-message-color separator-color text1-color - text2-color - toolbar-background1]])) + text2-color]] + [status-im.components.toolbar.styles :refer [toolbar-background1]])) (def chat-view {:flex 1 diff --git a/src/status_im/chats_list/screen.cljs b/src/status_im/chats_list/screen.cljs index 11f9f0d187..9683860905 100644 --- a/src/status_im/chats_list/screen.cljs +++ b/src/status_im/chats_list/screen.cljs @@ -13,55 +13,77 @@ [status-im.components.action-button :refer [action-button action-button-item]] [status-im.components.drawer.view :refer [open-drawer]] - [status-im.components.styles :refer [color-blue - toolbar-background1 - toolbar-background2]] + [status-im.components.styles :refer [color-blue]] [status-im.components.status-bar :refer [status-bar]] - [status-im.components.toolbar :refer [toolbar]] + [status-im.components.toolbar.view :refer [toolbar]] + [status-im.components.toolbar.styles :refer [toolbar-background1 + toolbar-background2]] [status-im.components.icons.custom-icons :refer [ion-icon]] + [status-im.components.react :refer [linear-gradient]] [status-im.i18n :refer [label]] [status-im.chats-list.styles :as st] - [status-im.components.styles :as cst] + [status-im.utils.platform :refer [platform-specific]] [status-im.components.tabs.bottom-gradient :refer [bottom-gradient]] [status-im.components.tabs.styles :refer [tabs-height]])) (defview chats-list-toolbar [] [chats-scrolled? [:get :chats-scrolled?]] - [toolbar {:nav-action {:image {:source {:uri :icon_hamburger} - :style st/hamburger-icon} - :handler open-drawer} - :title (label :t/chats) - :background-color (if chats-scrolled? - toolbar-background1 - toolbar-background2) - ;; TODO implement search - :action {:image {:source {:uri :icon_search} - :style st/search-icon} - :handler (fn [])}}]) + (let [new-chat? (get-in platform-specific [:chats :new-chat-in-toolbar?]) + actions (cond->> [{:image {:source {:uri :icon_search} + :style st/toolbar-icon} + :handler (fn [])}] + new-chat? + (into [{:image {:source {:uri :icon_add} + :style st/toolbar-icon} + :handler #(dispatch [:navigate-forget :group-contacts :people])}]))] + [toolbar {:nav-action {:image {:source {:uri :icon_hamburger} + :style st/hamburger-icon} + :handler open-drawer} + :title (label :t/chats) + :style (get-in platform-specific [:component-styles :toolbar]) + :background-color (if chats-scrolled? + toolbar-background1 + toolbar-background2) + :actions actions}])) + +(defn chats-action-button [] + [view {:style (st/action-buttons-container false 0) + :pointerEvents :box-none} + [action-button {:buttonColor color-blue + :offsetY 16 + :offsetX 16} + [action-button-item + {:title (label :t/new-chat) + :buttonColor :#9b59b6 + :onPress #(dispatch [:navigate-forget :group-contacts :people])} + [ion-icon {:name :md-create + :style st/create-icon}]] + [action-button-item + {:title (label :t/new-group-chat) + :buttonColor :#1abc9c + :onPress #(dispatch [:navigate-to :new-group])} + [ion-icon {:name :md-person + :style st/person-stalker-icon}]]]]) + +(defn chat-shadow-item [] + [view {:height 3} + [linear-gradient {:style {:height 3} + :colors st/gradient-top-bottom-shadow}]]) (defview chats-list [] [chats [:get :chats]] [view st/chats-container [chats-list-toolbar] - [list-view {:dataSource (to-datasource chats) - :renderRow (fn [row _ _] - (list-item [chat-list-item row])) - :style st/list-container}] - [view {:style (st/action-buttons-container false 0) - :pointerEvents :box-none} - [action-button {:buttonColor color-blue - :offsetY 16 - :offsetX 16} - [action-button-item - {:title (label :t/new-chat) - :buttonColor :#9b59b6 - :onPress #(dispatch [:navigate-forget :group-contacts :people])} - [ion-icon {:name :md-create - :style st/create-icon}]] - [action-button-item - {:title (label :t/new-group-chat) - :buttonColor :#1abc9c - :onPress #(dispatch [:navigate-to :new-group])} - [ion-icon {:name :md-person - :style st/person-stalker-icon}]]]] + [list-view {:dataSource (to-datasource chats) + :renderRow (fn [row _ _] + (list-item [chat-list-item row])) + :renderFooter #(list-item [chat-shadow-item]) + :renderSeparator #(list-item + (when (< %2 (- (count chats) 1)) + ^{:key (str "separator-" %2)} + [view st/chat-separator-wrapper + [view st/chat-separator-item]])) + :style st/list-container}] + (when (get-in platform-specific [:chats :action-button?]) + [chats-action-button]) [bottom-gradient]]) diff --git a/src/status_im/chats_list/styles.cljs b/src/status_im/chats_list/styles.cljs index d230f45ae9..5d9920a262 100644 --- a/src/status_im/chats_list/styles.cljs +++ b/src/status_im/chats_list/styles.cljs @@ -1,64 +1,83 @@ (ns status-im.chats-list.styles (:require [status-im.components.styles :refer [color-white + color-light-gray + color-separator color-blue - online-color text1-color text2-color new-messages-count-color]] [status-im.components.tabs.styles :refer [tabs-height]])) +(def gradient-top-bottom-shadow + ["rgba(24, 52, 76, 0.165)" + "rgba(24, 52, 76, 0.03)" + "rgba(24, 52, 76, 0.01)"]) + +(def chat-separator-wrapper + {:background-color color-white + :height 0.5 + :padding-left 74}) + +(def chat-separator-item + {:border-bottom-width 0.5 + :border-bottom-color color-separator}) + (def chat-container - {:flexDirection :row - :paddingVertical 15 - :paddingHorizontal 16 - :height 90}) + {:flex-direction :row + :background-color color-white + :height 94}) (def chat-icon-container - {:marginTop -2 - :marginLeft -4 - :width 48 - :height 48}) + {:margin-top -2 + :margin-left -4 + :padding 16 + :width 48 + :height 48}) (def item-container - {:flexDirection :column - :marginLeft 12 - :flex 1}) + {:flex-direction :column + :margin-left 30 + :padding-top 16 + :padding-right 16 + :flex 1}) (def name-view - {:flexDirection :row}) + {:flex-direction :row}) (def name-text - {:marginTop -2.5 - :color text1-color - :fontSize 14}) + {:color text1-color + :font-size 14}) (def group-icon - {:marginTop 4 - :marginLeft 8 - :width 14 - :height 9}) + {:margin-top 5 + :margin-left 8 + :width 14 + :height 9}) (def memebers-text - {:marginTop -0.5 + {:marginTop 2 :marginLeft 4 :fontSize 12 :color text2-color}) (def last-message-text - {:marginTop 7 - :marginRight 40 - :color text1-color - :fontSize 14 - :lineHeight 20}) + {:margin-top 5 + :margin-right 40 + :color text1-color + :fontSize 14 + :lineHeight 20}) + +(def last-message-text-no-messages + (merge last-message-text + {:color text2-color})) (def status-container - {:flexDirection :row - :position :absolute - :top 0 - :right 0}) + {:flex-direction :row + :top 18 + :right 16}) (def status-image - {:marginTop 6 + {:marginTop 4 :width 9 :height 7}) @@ -69,44 +88,43 @@ (def new-messages-container {:position :absolute - :top 36 - :right 0 + :top 54 + :right 16 :width 24 :height 24 :backgroundColor new-messages-count-color :borderRadius 50}) (def new-messages-text - {:top 4 - :left 0 - :fontSize 10 - :color color-blue - :textAlign :center}) + {:top 5 + :left 0 + :fontSize 10 + :color color-blue + :textAlign :center}) (def hamburger-icon {:width 16 :height 12}) -(def search-icon +(def toolbar-icon {:width 17 :height 17}) (def chats-container - {:flex 1 - :backgroundColor :white}) + {:flex 1}) (def list-container - {:backgroundColor :white}) + {:background-color color-light-gray}) (def create-icon {:fontSize 20 :height 22 - :color :white}) + :color color-white}) (def person-stalker-icon {:fontSize 20 :height 22 - :color :white}) + :color color-white}) (defn action-buttons-container [animation? offset-y] ;; todo fix overlaying of parent view diff --git a/src/status_im/chats_list/views/chat_list_item.cljs b/src/status_im/chats_list/views/chat_list_item.cljs index 028d50db2f..ddd650816f 100644 --- a/src/status_im/chats_list/views/chat_list_item.cljs +++ b/src/status_im/chats_list/views/chat_list_item.cljs @@ -7,10 +7,10 @@ [status-im.chats-list.views.inner-item :refer [chat-list-item-inner-view]])) (defn chat-list-item [[chat-id chat]] - [touchable-highlight - {:on-press #(dispatch [:navigate-to :chat chat-id])} - [view [chat-list-item-inner-view (merge chat - ;; TODO stub data - {:chat-id chat-id - :new-messages-count 3 - :online true})]]]) + [touchable-highlight {:on-press #(dispatch [:navigate-to :chat chat-id])} + [view + [chat-list-item-inner-view (merge chat + ;; TODO stub data + {:chat-id chat-id + :new-messages-count 3 + :online true})]]]) diff --git a/src/status_im/chats_list/views/inner_item.cljs b/src/status_im/chats_list/views/inner_item.cljs index b82c4bfc31..179d62a2b4 100644 --- a/src/status_im/chats_list/views/inner_item.cljs +++ b/src/status_im/chats_list/views/inner_item.cljs @@ -4,22 +4,64 @@ [status-im.components.chat-icon.screen :refer [chat-icon-view-chat-list]] [status-im.chats-list.styles :as st] [status-im.utils.utils :refer [truncate-str]] - [status-im.i18n :refer [label]] + [status-im.i18n :refer [label label-pluralize]] [status-im.utils.datetime :as time] + [status-im.constants :refer [console-chat-id]] [clojure.string :as str])) -(defview chat-list-item-inner-view - [{:keys [chat-id name color new-messages-count - online group-chat contacts] :as chat}] +(defn message-content [{:keys [content] :as message}] + (let [content (if message + (if (string? content) + content + (:content content)))] + (if (str/blank? content) + [text {:style st/last-message-text-no-messages} + (label :t/no-messages)] + [text {:style st/last-message-text + :number-of-lines 2} + content]))) + +(defview message-status [{:keys [chat-id contacts]} + {:keys [message-id message-status user-statuses message-type outgoing] :as msg}] + [app-db-message-status-value [:get-in [:message-statuses message-id :status]]] + (let [delivery-status (get-in user-statuses [chat-id :status])] + (when (and outgoing + (or (some #(= (keyword %) :seen) [delivery-status + message-status + app-db-message-status-value]) + (and (= (keyword message-type) :group-user-message) + (and (= (count user-statuses) (count contacts)) + (every? (fn [[_ {:keys [status]}]] + (= (keyword status) :seen)) user-statuses))) + (= chat-id console-chat-id))) + [image {:source {:uri :icon_ok_small} + :style st/status-image}]))) + +(defn message-timestamp [{:keys [timestamp]}] + (when timestamp + [text {:style st/datetime-text} + (time/to-short-str timestamp)])) + +(defview unviewed-indicator [chat-id] [unviewed-messages [:unviewed-messages-count chat-id]] - (let [last-message (first (:messages chat)) - name (or name chat-id)] + (when (pos? unviewed-messages) + [view st/new-messages-container + [text {:style st/new-messages-text + :font :medium} + unviewed-messages]])) + +(defn chat-list-item-inner-view [{:keys [chat-id name color last-message + online group-chat contacts] :as chat}] + (let [last-message (or (first (:messages chat)) + last-message) + name (or name chat-id)] [view st/chat-container [view st/chat-icon-container [chat-icon-view-chat-list chat-id group-chat name color online]] [view st/item-container [view st/name-view - [text {:style st/name-text} + [text {:style st/name-text + :font :medium} (if (str/blank? name) (label :t/user-anonymous) (truncate-str name 30))] @@ -27,29 +69,11 @@ [icon :group st/group-icon]) (when group-chat [text {:style st/memebers-text} - (if (< 0 (count contacts)) - (str (inc (count contacts)) " members") - "1 member")])] - [text {:style st/last-message-text - :numberOfLines 2} - (when last-message - (let [content (:content last-message)] - (if (string? content) - content - (:content content))))]] + (label-pluralize (inc (count contacts)) :t/members)])] + [message-content last-message]] [view (when last-message [view st/status-container - ;; TODO currently there is not :delivery-status in last-message - (when (:delivery-status last-message) - [image {:source (if (= (keyword (:delivery-status last-message)) :seen) - {:uri :icon_ok_small} - ;; todo change icon - {:uri :icon_ok_small}) - :style st/status-image}]) - (when (:timestamp last-message) - [text {:style st/datetime-text} - (time/to-short-str (:timestamp last-message))])]) - (when (pos? unviewed-messages) - [view st/new-messages-container - [text {:style st/new-messages-text} unviewed-messages]])]])) + [message-status chat last-message] + [message-timestamp last-message]]) + [unviewed-indicator chat-id]]])) diff --git a/src/status_im/components/carousel/styles.cljs b/src/status_im/components/carousel/styles.cljs index ea520b7aa6..174b58a897 100644 --- a/src/status_im/components/carousel/styles.cljs +++ b/src/status_im/components/carousel/styles.cljs @@ -1,12 +1,4 @@ -(ns status-im.components.carousel.styles - (:require [status-im.components.styles :refer [color-white - chat-background - online-color - selected-message-color - separator-color - text1-color - text2-color - toolbar-background1]])) +(ns status-im.components.carousel.styles) (def scroll-view-container {:flex 1}) diff --git a/src/status_im/components/chat_icon/styles.cljs b/src/status_im/components/chat_icon/styles.cljs index 43c3adc4ef..ebdd548eba 100644 --- a/src/status_im/components/chat_icon/styles.cljs +++ b/src/status_im/components/chat_icon/styles.cljs @@ -1,20 +1,14 @@ (ns status-im.components.chat-icon.styles (:require [status-im.components.styles :refer [color-white - chat-background - online-color - selected-message-color - separator-color - text1-color - text2-color - toolbar-background1]])) + online-color]])) (defn default-chat-icon [color] {:margin 4 - :width 36 - :height 36 + :width 40 + :height 40 :alignItems :center :justifyContent :center - :borderRadius 18 + :borderRadius 20 :backgroundColor color}) (defn default-chat-icon-chat-list [color] @@ -40,9 +34,9 @@ (def chat-icon {:margin 4 - :borderRadius 18 - :width 36 - :height 36}) + :borderRadius 20 + :width 40 + :height 40}) (def chat-icon-chat-list (merge chat-icon diff --git a/src/status_im/components/styles.cljs b/src/status_im/components/styles.cljs index 4cbdbcb3f4..66ac82dee9 100644 --- a/src/status_im/components/styles.cljs +++ b/src/status_im/components/styles.cljs @@ -12,6 +12,7 @@ (def color-light-blue-transparent "#bbc4cb32") (def color-light-gray "#EEF2F5") (def color-red "red") +(def color-separator "#D6D6D6") (def text1-color color-black) (def text1-disabled-color "#555555") @@ -24,12 +25,8 @@ (def chat-background color-light-gray) (def selected-message-color "#E4E9ED") (def separator-color "#0000001f") -(def toolbar-background1 color-white) -(def toolbar-background2 color-light-gray) (def default-chat-color color-purple) -(def toolbar-height 56) - (def flex {:flex 1}) @@ -71,36 +68,18 @@ :height 18}) (def icon-close - {:width 12 + {:width 12 :height 12}) -(def form-text-input - {:marginLeft -4 - :fontSize 14 - :color text1-color}) - (def white-form-text-input {:marginLeft -4 :fontSize 14 :color color-white}) -(def toolbar-title-container - {:flex 1 - :alignItems :center - :justifyContent :center}) - -(def toolbar-title-text - {:margin-top -2.5 - :color text1-color - :font-size 16}) - (def button-input-container {:flex 1 :flexDirection :row}) (def button-input {:flex 1 - :flexDirection :column}) - -(def toolbar-gradient - {:height 4}) \ No newline at end of file + :flexDirection :column}) \ 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 2428217666..8ceb227e88 100644 --- a/src/status_im/components/tabs/styles.cljs +++ b/src/status_im/components/tabs/styles.cljs @@ -1,12 +1,5 @@ (ns status-im.components.tabs.styles - (:require [status-im.components.styles :refer [color-white - chat-background - online-color - selected-message-color - separator-color - text1-color - text2-color - toolbar-background1]])) + (:require [status-im.components.styles :refer [color-white]])) (def tabs-height 60) (def tab-height 56) diff --git a/src/status_im/components/toolbar.cljs b/src/status_im/components/toolbar.cljs deleted file mode 100644 index 51cbc33bf9..0000000000 --- a/src/status_im/components/toolbar.cljs +++ /dev/null @@ -1,61 +0,0 @@ -(ns status-im.components.toolbar - (:require [re-frame.core :refer [subscribe dispatch]] - [status-im.components.react :refer [view - text-input - icon - text - image - touchable-highlight]] - [status-im.components.styles :refer [color-white - color-purple - text1-color - text2-color - toolbar-background1 - toolbar-title-container - toolbar-title-text - icon-back - toolbar-height]])) - -(defn toolbar [{title :title - nav-action :nav-action - hide-nav? :hide-nav? - action :action - custom-action :custom-action - background-color :background-color - custom-content :custom-content - style :style}] - (let [style (merge {:flexDirection :row - :backgroundColor (or background-color toolbar-background1) - :height toolbar-height - :elevation 2} style)] - [view {:style style} - (when (not hide-nav?) - (if nav-action - [touchable-highlight {:on-press (:handler nav-action)} - [view {:width 56 - :height 56 - :alignItems :center - :justifyContent :center} - [image (:image nav-action)]]] - [touchable-highlight {:on-press #(dispatch [:navigate-back]) - :accessibility-label :navigate-back} - [view {:width 56 - :height 56 - :alignItems :center - :justifyContent :center} - [image {:source {:uri :icon_back} - :style icon-back}]]])) - (or custom-content - [view {:style toolbar-title-container} - [text {:style toolbar-title-text - :font :medium} - title]]) - custom-action - (when action - [touchable-highlight {:on-press (:handler action)} - [view {:width 56 - :height 56 - :alignItems :center - :justifyContent :center} - [image (:image action)]]])])) - diff --git a/src/status_im/components/toolbar/styles.cljs b/src/status_im/components/toolbar/styles.cljs new file mode 100644 index 0000000000..14e256d289 --- /dev/null +++ b/src/status_im/components/toolbar/styles.cljs @@ -0,0 +1,54 @@ +(ns status-im.components.toolbar.styles + (:require [status-im.components.styles :refer [text1-color + color-white + color-light-gray]])) + +(def toolbar-background1 color-white) +(def toolbar-background2 color-light-gray) + +(def toolbar-height 56) +(def toolbar-icon-width 32) +(def toolbar-icon-spacing 8) + +(def toolbar-gradient + {:height 4}) + +(defn toolbar [background-color] + {:flexDirection :row + :backgroundColor (or background-color toolbar-background1) + :height toolbar-height + :elevation 2}) + +(defn toolbar-nav-actions-container [actions] + {:width (if (and actions (> (count actions) 0)) + (-> (+ toolbar-icon-width toolbar-icon-spacing) + (* (count actions)) + (+ toolbar-icon-spacing))) + :flex-direction "row"}) + +(def toolbar-nav-action + {:width toolbar-height + :height toolbar-height + :align-items :center + :justify-content :center}) + +(def toolbar-title-container + {:flex 1 + :alignItems :center + :justifyContent :center}) + +(def toolbar-title-text + {:margin-top -2.5 + :color text1-color + :font-size 16}) + +(def toolbar-actions-container + {:flex-direction "row" + :margin-left 8}) + +(def toolbar-action + {:width toolbar-icon-width + :height toolbar-height + :margin-right toolbar-icon-spacing + :align-items :center + :justify-content :center}) \ No newline at end of file diff --git a/src/status_im/components/toolbar/view.cljs b/src/status_im/components/toolbar/view.cljs new file mode 100644 index 0000000000..db98861020 --- /dev/null +++ b/src/status_im/components/toolbar/view.cljs @@ -0,0 +1,47 @@ +(ns status-im.components.toolbar.view + (:require [re-frame.core :refer [subscribe dispatch]] + [status-im.components.react :refer [view + text-input + icon + text + image + touchable-highlight]] + [status-im.components.styles :refer [icon-back]] + [status-im.components.toolbar.styles :as st])) + +(defn toolbar [{title :title + nav-action :nav-action + hide-nav? :hide-nav? + actions :actions + custom-action :custom-action + background-color :background-color + custom-content :custom-content + style :style}] + (let [style (merge (st/toolbar background-color) style)] + [view {:style style} + [view (st/toolbar-nav-actions-container actions) + (when (not hide-nav?) + (if nav-action + [touchable-highlight {:on-press (:handler nav-action)} + [view st/toolbar-nav-action + [image (:image nav-action)]]] + [touchable-highlight {:on-press #(dispatch [:navigate-back]) + :accessibility-label :navigate-back} + [view st/toolbar-nav-action + [image {:source {:uri :icon_back} + :style icon-back}]]]))] + (or custom-content + [view {:style st/toolbar-title-container} + [text {:style st/toolbar-title-text + :font :medium} + title]]) + [view st/toolbar-actions-container + (if actions + (for [{action-image :image + action-handler :handler} actions] + ^{:key (str "action-" action-image)} + [touchable-highlight {:on-press action-handler} + [view st/toolbar-action + [image action-image]]]) + custom-action)]])) + diff --git a/src/status_im/contacts/screen.cljs b/src/status_im/contacts/screen.cljs index 3d675f1219..729bd55492 100644 --- a/src/status_im/contacts/screen.cljs +++ b/src/status_im/contacts/screen.cljs @@ -14,29 +14,35 @@ action-button-item]] [status-im.contacts.views.contact :refer [contact-extended-view on-press]] [status-im.components.status-bar :refer [status-bar]] - [status-im.components.toolbar :refer [toolbar]] + [status-im.components.toolbar.view :refer [toolbar]] + [status-im.components.toolbar.styles :refer [toolbar-background2]] [status-im.components.drawer.view :refer [open-drawer]] [status-im.components.icons.custom-icons :refer [ion-icon]] [status-im.components.styles :refer [color-blue hamburger-icon icon-search - create-icon - toolbar-background2]] + create-icon]] [status-im.components.tabs.bottom-gradient :refer [bottom-gradient]] [status-im.contacts.styles :as st] [status-im.i18n :refer [label]] - [status-im.components.styles :as cst])) + [status-im.utils.platform :refer [platform-specific]])) (defn contact-list-toolbar [] - [toolbar {:nav-action {:image {:source {:uri :icon_hamburger} - :style hamburger-icon} - :handler open-drawer} - :title (label :t/contacts) - :background-color toolbar-background2 - :style {:elevation 0} - :action {:image {:source {:uri :icon_search} - :style icon-search} - :handler (fn [])}}]) + (let [new-contact? (get-in platform-specific [:contacts :new-contact-in-toolbar?]) + actions (cond->> [{:image {:source {:uri :icon_search} + :style icon-search} + :handler (fn [])}] + new-contact? + (into [{:image {:source {:uri :icon_add} + :style icon-search} + :handler #(dispatch [:navigate-to :new-contact])}]))] + [toolbar {:nav-action {:image {:source {:uri :icon_hamburger} + :style hamburger-icon} + :handler open-drawer} + :title (label :t/contacts) + :background-color toolbar-background2 + :style {:elevation 0} + :actions actions}])) (def contacts-limit 10) @@ -68,6 +74,18 @@ [view [text {:style st/show-all-text} (label :t/show-all)]]]])]) +(defn contacts-action-button [] + [view st/buttons-container + [action-button {:buttonColor color-blue + :offsetY 16 + :offsetX 16} + [action-button-item + {:title (label :t/new-contact) + :buttonColor :#9b59b6 + :onPress #(dispatch [:navigate-to :new-contact])} + [ion-icon {:name :md-create + :style create-icon}]]]]) + (defn contact-list [] (let [contacts (subscribe [:get-added-contacts-with-limit contacts-limit]) contacts-count (subscribe [:added-contacts-count]) @@ -88,26 +106,18 @@ [contact-group @contacts @contacts-count - (label :t/contacs-group-dapps) + (label :t/contacts-group-dapps) :dapps true @click-handler] [contact-group @contacts @contacts-count - (label :t/contacs-group-people) + (label :t/contacts-group-people) :people false @click-handler]] [view st/empty-contact-groups [react/icon :group_big st/empty-contacts-icon] [text {:style st/empty-contacts-text} (label :t/no-contacts)]]) - [view st/buttons-container - [action-button {:buttonColor color-blue - :offsetY 16 - :offsetX 16} - [action-button-item - {:title (label :t/new-contact) - :buttonColor :#9b59b6 - :onPress #(dispatch [:navigate-to :new-contact])} - [ion-icon {:name :md-create - :style create-icon}]]]] + (when (get-in platform-specific [:contacts :action-button?]) + [contacts-action-button]) [bottom-gradient]]))) diff --git a/src/status_im/contacts/styles.cljs b/src/status_im/contacts/styles.cljs index 9274b44037..fbe4fac600 100644 --- a/src/status_im/contacts/styles.cljs +++ b/src/status_im/contacts/styles.cljs @@ -4,13 +4,14 @@ text3-color text5-color color-white - toolbar-background2 - online-color - color-gray2]])) + color-black + color-light-gray + color-separator + color-gray2]] + [status-im.components.toolbar.styles :refer [toolbar-background2]])) (def contacts-list-container - {:flex 1 - :backgroundColor :white}) + {:flex 1}) (def toolbar-shadow {:height 2 @@ -35,7 +36,7 @@ :color color-gray2}) (def contacts-list - {:backgroundColor :white}) + {:backgroundColor color-white}) (def contact-group {:flexDirection :column}) @@ -97,8 +98,8 @@ :letterSpacing 0.5}) (def contact-container - {:flexDirection :row - :backgroundColor color-white}) + {:flex-direction :row + :background-color color-white}) (def letter-container {:paddingTop 11 @@ -106,13 +107,41 @@ :width 56}) (def letter-text - {:fontSize 24 - :color text3-color}) + {:fontSize 24 + :color text3-color}) (def contact-photo-container {:marginTop 4 :marginLeft 12}) +(def option-inner-container + {:flex 1 + :flex-direction :row + :height 56 + :background-color color-white + :border-bottom-color color-separator + :border-bottom-width 0.5}) + +(def option-inner + {:width 48 + :height 48 + :margin-top 4 + :margin-left 12}) + +(def option-inner-image + {:width 24 + :height 18 + :top 16 + :left 13}) + +(def spacing-top + {:background-color color-white + :height 8}) + +(def spacing-bottom + {:background-color color-white + :height 8}) + (def contact-inner-container {:flex 1 :flexDirection :row @@ -126,13 +155,13 @@ :justifyContent :center}) (def name-text - {:fontSize 16 - :color text1-color}) + {:fontSize 15 + :color text1-color}) (def info-text - {:marginTop 1 - :fontSize 12 - :color text2-color}) + {:marginTop 1 + :fontSize 12 + :color text2-color}) (def more-btn {:width 56 @@ -147,8 +176,8 @@ ; new contact (def contact-form-container - {:flex 1 - :color :white + {:flex 1 + :color :white :backgroundColor :white}) (def gradient-background @@ -163,21 +192,21 @@ :margin-top 16}) (def address-explication-container - {:flex 1 - :margin-top 30 - :paddingLeft 16 + {:flex 1 + :margin-top 30 + :paddingLeft 16 :paddingRight 16}) (def address-explication {:textAlign :center - :color "#838c93de"}) + :color "#838c93de"}) (def buttons-container {:position :absolute - :bottom 0 - :right 0 - :width 200 - :height 170}) + :bottom 0 + :right 0 + :width 200 + :height 170}) (def qr-input {:margin-right 42}) diff --git a/src/status_im/contacts/subs.cljs b/src/status_im/contacts/subs.cljs index 9dad03f958..68aa8cf448 100644 --- a/src/status_im/contacts/subs.cljs +++ b/src/status_im/contacts/subs.cljs @@ -9,8 +9,12 @@ (reaction @contacts)))) (defn sort-contacts [contacts] - (sort-by :name #(compare (clojure.string/lower-case %1) - (clojure.string/lower-case %2)) (vals contacts))) + (->> (vals contacts) + (sort (fn [c1 c2] + (let [name1 (or (:name c1) (:address c1) (:whisper-identity c1)) + name2 (or (:name c2) (:address c2) (:whisper-identity c2))] + (compare (clojure.string/lower-case name1) + (clojure.string/lower-case name2))))))) (register-sub :all-added-contacts (fn [db _] diff --git a/src/status_im/contacts/views/contact.cljs b/src/status_im/contacts/views/contact.cljs index 913f8a04b3..3056eb92cb 100644 --- a/src/status_im/contacts/views/contact.cljs +++ b/src/status_im/contacts/views/contact.cljs @@ -5,20 +5,14 @@ [status-im.contacts.styles :as st] [status-im.contacts.views.contact-inner :refer [contact-inner-view]])) -(defn letter-view [letter] - [view st/letter-container - (when letter - [text {:style st/letter-text} letter])]) - (defn on-press [whisper-identity] #(dispatch [:start-chat whisper-identity])) -(defview contact-with-letter-view [{:keys [whisper-identity letter] :as contact}] +(defview contact-view [{:keys [whisper-identity] :as contact}] [chat [:get-chat whisper-identity]] [touchable-highlight {:onPress (on-press whisper-identity)} [view st/contact-container - [letter-view letter] [contact-inner-view contact]]]) (defview contact-extended-view [{:keys [whisper-identity] :as contact} info click-handler more-click-handler] diff --git a/src/status_im/contacts/views/contact_list.cljs b/src/status_im/contacts/views/contact_list.cljs index 0b4638cf5b..069cb6f531 100644 --- a/src/status_im/contacts/views/contact_list.cljs +++ b/src/status_im/contacts/views/contact_list.cljs @@ -6,50 +6,68 @@ touchable-highlight list-view list-item]] - [status-im.contacts.views.contact :refer [contact-with-letter-view on-press]] + [status-im.contacts.views.contact :refer [contact-view on-press]] [status-im.components.status-bar :refer [status-bar]] - [status-im.components.toolbar :refer [toolbar]] + [status-im.components.toolbar.view :refer [toolbar]] + [status-im.components.toolbar.styles :refer [toolbar-background1]] [status-im.components.drawer.view :refer [drawer-view open-drawer]] - [status-im.components.styles :refer [color-blue - hamburger-icon - icon-search - create-icon - toolbar-background1]] + [status-im.components.styles :refer [icon-search]] [status-im.contacts.styles :as st] [status-im.utils.listview :as lw] [status-im.i18n :refer [label]] - [status-im.components.styles :as cst])) + [status-im.utils.platform :refer [platform-specific]])) + +(defn new-group-chat-view [] + [touchable-highlight + {:on-press #(dispatch [:navigate-to :new-group])} + [view st/contact-container + [view st/option-inner-container + [view st/option-inner + [image {:source {:uri :icon_menu_group} + :style st/option-inner-image}]] + [view st/info-container + [text {:style st/name-text} + (label :t/new-group-chat)]]]]]) (defn render-row [click-handler] (fn [row _ _] - (list-item [contact-with-letter-view row - (or click-handler - (let [whisper-identity (:whisper-identity row)] - (on-press whisper-identity)))]))) + (list-item + [contact-view row + (or click-handler + (let [whisper-identity (:whisper-identity row)] + (on-press whisper-identity)))]))) (defview contact-list-toolbar [] [group [:get :contacts-group]] [view [status-bar] [toolbar {:title (label (if (= group :dapps) - :t/contacs-group-dapps - :t/contacs-group-people)) + :t/contacts-group-dapps + :t/contacts-group-new-chat)) :background-color toolbar-background1 - :action {:image {:source {:uri :icon_search} - :style icon-search} - :handler (fn [])}}]]) + :style (get-in platform-specific [:component-styles :toolbar]) + :actions [{:image {:source {:uri :icon_search} + :style icon-search} + :handler (fn [])}]}]]) (defview contact-list [] [contacts [:contacts-with-letters] + group [:get :contacts-group] click-handler [:get :contacts-click-handler]] - (let [click-handler click-handler] + (let [show-new-group-chat? (and (= group :people) + (get-in platform-specific [:chats :new-chat-in-toolbar?]))] [drawer-view [view st/contacts-list-container [contact-list-toolbar] - ;; todo what if there is no contacts, should we show some information - ;; about this? + ;; todo add stub (when contacts [list-view {:dataSource (lw/to-datasource contacts) :enableEmptySections true :renderRow (render-row click-handler) + :renderHeader #(list-item + [view + (if show-new-group-chat? + [new-group-chat-view]) + [view st/spacing-top]]) + :renderFooter #(list-item [view st/spacing-bottom]) :style st/contacts-list}])]])) diff --git a/src/status_im/contacts/views/new_contact.cljs b/src/status_im/contacts/views/new_contact.cljs index b92f7edc20..71a35d953e 100644 --- a/src/status_im/contacts/views/new_contact.cljs +++ b/src/status_im/contacts/views/new_contact.cljs @@ -11,19 +11,14 @@ [status-im.components.text-field.view :refer [text-field]] [status-im.utils.identicon :refer [identicon]] [status-im.components.status-bar :refer [status-bar]] - [status-im.components.toolbar :refer [toolbar]] + [status-im.components.toolbar.view :refer [toolbar]] + [status-im.components.toolbar.styles :refer [toolbar-title-container + toolbar-title-text]] [status-im.utils.utils :refer [log http-post]] - [status-im.components.styles :refer [color-purple - color-white - icon-search + [status-im.components.styles :refer [icon-search icon-back - icon-qr - toolbar-background1 - toolbar-title-container - toolbar-title-text button-input-container - button-input - form-text-input]] + button-input]] [status-im.qr-scanner.views.scan-button :refer [scan-button]] [status-im.i18n :refer [label]] [cljs.spec :as s] @@ -68,14 +63,14 @@ :else error)) -(defn toolbar-action [new-contact-identity account error] +(defn toolbar-actions [new-contact-identity account error] (let [error-message (validation-error-message new-contact-identity account error)] - {:image {:source {:uri (if (str/blank? error-message) - :icon_ok_blue - :icon_ok_disabled)} - :style icon-search} - :handler #(when (str/blank? error-message) - (on-add-contact new-contact-identity))})) + [{:image {:source {:uri (if (str/blank? error-message) + :icon_ok_blue + :icon_ok_disabled)} + :style icon-search} + :handler #(when (str/blank? error-message) + (on-add-contact new-contact-identity))}])) (defview contact-whisper-id-input [whisper-identity error] [current-account [:get-current-account]] @@ -108,7 +103,7 @@ :style icon-back} :handler #(dispatch [:navigate-back])} :custom-content toolbar-title - :action (toolbar-action new-contact-identity account error)}]] + :actions (toolbar-actions new-contact-identity accounts error)}]] [view st/form-container [contact-whisper-id-input new-contact-identity error]] [view st/address-explication-container diff --git a/src/status_im/discovery/screen.cljs b/src/status_im/discovery/screen.cljs index e409baed0b..d5bf5d6d84 100644 --- a/src/status_im/discovery/screen.cljs +++ b/src/status_im/discovery/screen.cljs @@ -7,7 +7,7 @@ scroll-view text text-input]] - [status-im.components.toolbar :refer [toolbar]] + [status-im.components.toolbar.view :refer [toolbar]] [status-im.components.drawer.view :refer [open-drawer]] [status-im.discovery.views.popular :refer [discovery-popular]] [status-im.discovery.views.recent :refer [discovery-recent]] @@ -45,9 +45,9 @@ :style st/hamburger-icon} :handler open-drawer} :custom-content [title-content show-search?] - :action {:image {:source {:uri :icon_search} - :style st/search-icon} - :handler #(toogle-search show-search?)}}]) + :actions [{:image {:source {:uri :icon_search} + :style st/search-icon} + :handler #(toogle-search show-search?)}]}]) (defview discovery [] [show-search? [:get ::show-search?] diff --git a/src/status_im/discovery/search_results.cljs b/src/status_im/discovery/search_results.cljs index 1eee447aec..dd05f30994 100644 --- a/src/status_im/discovery/search_results.cljs +++ b/src/status_im/discovery/search_results.cljs @@ -3,7 +3,7 @@ (:require [re-frame.core :refer [subscribe dispatch]] [status-im.utils.listview :refer [to-datasource]] [status-im.components.react :refer [view text list-view list-item]] - [status-im.components.toolbar :refer [toolbar]] + [status-im.components.toolbar.view :refer [toolbar]] [status-im.discovery.views.discovery-list-item :refer [discovery-list-item]] [status-im.discovery.styles :as st])) @@ -29,9 +29,9 @@ :style st/icon-back} :handler #(dispatch [:navigate-back])} :custom-content (title-content tags) - :action {:image {:source {:uri :icon_search} - :style st/icon-search} - :handler (fn [])}}] + :actions [{:image {:source {:uri :icon_search} + :style st/icon-search} + :handler (fn [])}]}] [list-view {:dataSource datasource :renderRow (fn [row _ _] diff --git a/src/status_im/discovery/styles.cljs b/src/status_im/discovery/styles.cljs index 09868c7e73..8876e16452 100644 --- a/src/status_im/discovery/styles.cljs +++ b/src/status_im/discovery/styles.cljs @@ -1,13 +1,5 @@ (ns status-im.discovery.styles - (:require [status-im.components.styles :refer [color-white - color-gray2 - chat-background - online-color - selected-message-color - separator-color - text1-color - text2-color - toolbar-background1]])) + (:require [status-im.components.styles :refer [color-gray2]])) ;; common diff --git a/src/status_im/discovery/tag.cljs b/src/status_im/discovery/tag.cljs index 692236124e..5d9c5be2f3 100644 --- a/src/status_im/discovery/tag.cljs +++ b/src/status_im/discovery/tag.cljs @@ -3,7 +3,7 @@ (:require [re-frame.core :refer [subscribe dispatch]] [status-im.utils.listview :refer [to-datasource]] [status-im.components.react :refer [view text list-view list-item]] - [status-im.components.toolbar :refer [toolbar]] + [status-im.components.toolbar.view :refer [toolbar]] [status-im.discovery.views.discovery-list-item :refer [discovery-list-item]] [status-im.discovery.styles :as st])) @@ -25,9 +25,9 @@ :style st/icon-back} :handler #(dispatch [:navigate-back])} :custom-content (title-content tag) - :action {:image {:source {:uri :icon_search} - :style st/icon-search} - :handler (fn [])}}] + :actions [{:image {:source {:uri :icon_search} + :style st/icon-search} + :handler (fn [])}]}] [list-view {:dataSource datasource :renderRow (fn [row _ _] diff --git a/src/status_im/group_settings/screen.cljs b/src/status_im/group_settings/screen.cljs index 5087960d9a..71c89efaf1 100644 --- a/src/status_im/group_settings/screen.cljs +++ b/src/status_im/group_settings/screen.cljs @@ -12,7 +12,7 @@ scroll-view touchable-highlight]] [status-im.components.status-bar :refer [status-bar]] - [status-im.components.toolbar :refer [toolbar]] + [status-im.components.toolbar.view :refer [toolbar]] [status-im.components.chat-icon.screen :refer [chat-icon-view-action]] [status-im.group-settings.styles.group-settings :as st] [status-im.group-settings.views.member :refer [member-view]] diff --git a/src/status_im/group_settings/styles/group_settings.cljs b/src/status_im/group_settings/styles/group_settings.cljs index f951648497..3e98cf9547 100644 --- a/src/status_im/group_settings/styles/group_settings.cljs +++ b/src/status_im/group_settings/styles/group_settings.cljs @@ -1,13 +1,9 @@ (ns status-im.group-settings.styles.group-settings (:require [status-im.components.styles :refer [color-white color-purple - chat-background - online-color - selected-message-color separator-color text1-color - text2-color - toolbar-background1]])) + text2-color]])) (def modal-container {:flex 1 diff --git a/src/status_im/ios/platform.cljs b/src/status_im/ios/platform.cljs index fff7bd6f9d..69385cf29e 100644 --- a/src/status_im/ios/platform.cljs +++ b/src/status_im/ios/platform.cljs @@ -1,6 +1,7 @@ (ns status-im.ios.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 20 @@ -8,7 +9,7 @@ :color styles/color-white} :main {:height 20 :bar-style "default" - :color styles/toolbar-background2} + :color toolbar-background2} :transparent {:height 20 :bar-style "light-content" :color styles/color-transparent}} @@ -43,5 +44,9 @@ (def platform-specific {:component-styles component-styles :fonts fonts - :list-selection-fn show-action-sheet}) + :list-selection-fn show-action-sheet + :chats {:action-button? false + :new-chat-in-toolbar? true} + :contacts {:action-button? false + :new-contact-in-toolbar? true}}) diff --git a/src/status_im/new_group/screen.cljs b/src/status_im/new_group/screen.cljs index a5387ba7cc..127b595e05 100644 --- a/src/status_im/new_group/screen.cljs +++ b/src/status_im/new_group/screen.cljs @@ -13,7 +13,7 @@ [status-im.components.text-field.view :refer [text-field]] [status-im.components.styles :refer [color-purple]] [status-im.components.status-bar :refer [status-bar]] - [status-im.components.toolbar :refer [toolbar]] + [status-im.components.toolbar.view :refer [toolbar]] [status-im.utils.listview :refer [to-datasource]] [status-im.new-group.views.contact :refer [new-group-contact]] [status-im.new-group.styles :as st] @@ -27,11 +27,11 @@ [view [status-bar] [toolbar - {:title (label :t/new-group-chat) - :action {:image {:source res/v ;; {:uri "icon_search"} - :style (st/toolbar-icon create-btn-enabled?)} - :handler (when create-btn-enabled? - #(dispatch [:create-new-group new-chat-name]))}}]])) + {:title (label :t/new-group-chat) + :actions [{:image {:source res/v ;; {:uri "icon_search"} + :style (st/toolbar-icon create-btn-enabled?)} + :handler (when create-btn-enabled? + #(dispatch [:create-new-group new-chat-name]))}]}]])) (defview group-name-input [] [new-chat-name [:get :new-chat-name]] diff --git a/src/status_im/new_group/styles.cljs b/src/status_im/new_group/styles.cljs index 4a88eef183..e18311b155 100644 --- a/src/status_im/new_group/styles.cljs +++ b/src/status_im/new_group/styles.cljs @@ -2,8 +2,7 @@ (:require [status-im.components.styles :refer [color-white color-blue text1-color - text2-color - toolbar-background1]])) + text2-color]])) (defn toolbar-icon [enabled?] {:width 20 diff --git a/src/status_im/participants/views/add.cljs b/src/status_im/participants/views/add.cljs index 59ceb2ad68..2ed209da3e 100644 --- a/src/status_im/participants/views/add.cljs +++ b/src/status_im/participants/views/add.cljs @@ -4,7 +4,7 @@ [status-im.resources :as res] [status-im.components.react :refer [view list-view list-item]] [status-im.components.status-bar :refer [status-bar]] - [status-im.components.toolbar :refer [toolbar]] + [status-im.components.toolbar.view :refer [toolbar]] [status-im.utils.listview :refer [to-datasource]] [status-im.participants.views.contact :refer [participant-contact]] [reagent.core :as r] @@ -16,11 +16,11 @@ [view [status-bar] [toolbar - {:title (label :t/add-participants) - :action {:image {:source res/v ;; {:uri "icon_search"} - :style st/new-participant-image} - :handler #(do (dispatch [:add-new-participants]) - (dispatch [:navigate-back]))}}]]) + {:title (label :t/add-participants) + :actions [{:image {:source res/v ;; {:uri "icon_search"} + :style st/new-participant-image} + :handler #(do (dispatch [:add-new-participants]) + (dispatch [:navigate-back]))}]}]]) (defn new-participants-row [row _ _] diff --git a/src/status_im/participants/views/remove.cljs b/src/status_im/participants/views/remove.cljs index 5a2ab1ce0d..730cd84b51 100644 --- a/src/status_im/participants/views/remove.cljs +++ b/src/status_im/participants/views/remove.cljs @@ -10,7 +10,7 @@ list-view list-item]] [status-im.components.status-bar :refer [status-bar]] - [status-im.components.toolbar :refer [toolbar]] + [status-im.components.toolbar.view :refer [toolbar]] [status-im.utils.listview :refer [to-datasource]] [status-im.participants.views.contact :refer [participant-contact]] @@ -23,11 +23,11 @@ [view [status-bar] [toolbar - {:title (label :t/remove-participants) - :action {:handler #(do (dispatch [:remove-participants]) - (dispatch [:navigate-back])) - :image {:source res/trash-icon ;; {:uri "icon_search"} - :style st/remove-participants-image}}}]]) + {:title (label :t/remove-participants) + :actions [{:handler #(do (dispatch [:remove-participants]) + (dispatch [:navigate-back])) + :image {:source res/trash-icon ;; {:uri "icon_search"} + :style st/remove-participants-image}}]}]]) (defn remove-participants-row [row _ _] diff --git a/src/status_im/profile/photo_capture/screen.cljs b/src/status_im/profile/photo_capture/screen.cljs index 548d3479d9..d4b524c8db 100644 --- a/src/status_im/profile/photo_capture/screen.cljs +++ b/src/status_im/profile/photo_capture/screen.cljs @@ -8,12 +8,11 @@ [status-im.components.camera :refer [camera aspects capture-targets]] - [status-im.components.styles :refer [toolbar-background1 - icon-search - icon-back]] + [status-im.components.styles :refer [icon-back]] [status-im.components.icons.custom-icons :refer [ion-icon]] [status-im.components.status-bar :refer [status-bar]] - [status-im.components.toolbar :refer [toolbar]] + [status-im.components.toolbar.view :refer [toolbar]] + [status-im.components.toolbar.styles :refer [toolbar-background1]] [status-im.utils.image-processing :refer [img->base64]] [status-im.profile.photo-capture.styles :as st] [status-im.i18n :refer [label]] diff --git a/src/status_im/protocol/handlers.cljs b/src/status_im/protocol/handlers.cljs index ccd2c23b4c..aa56b58a4c 100644 --- a/src/status_im/protocol/handlers.cljs +++ b/src/status_im/protocol/handlers.cljs @@ -210,7 +210,7 @@ status-path (if (and group? (not= status :sent)) [:message-user-statuses message-id' from] [:message-statuses message-id']) - current-status (get-in db status-path)] + {current-status :status} (get-in db status-path)] (if-not (= :seen current-status) (assoc-in db status-path {:whisper-identity from :status status}) diff --git a/src/status_im/qr_scanner/screen.cljs b/src/status_im/qr_scanner/screen.cljs index 69e8421c4e..9aa2d7630e 100644 --- a/src/status_im/qr_scanner/screen.cljs +++ b/src/status_im/qr_scanner/screen.cljs @@ -4,10 +4,10 @@ [status-im.components.react :refer [view image]] [status-im.components.camera :refer [camera]] - [status-im.components.styles :refer [toolbar-background1 - icon-search]] + [status-im.components.styles :refer [icon-search]] [status-im.components.status-bar :refer [status-bar]] - [status-im.components.toolbar :refer [toolbar]] + [status-im.components.toolbar.view :refer [toolbar]] + [status-im.components.toolbar.styles :refer [toolbar-background1]] [status-im.qr-scanner.styles :as st] [status-im.utils.types :refer [json->clj]] [status-im.components.styles :as cst] @@ -18,9 +18,9 @@ [status-bar] [toolbar {:title title :background-color toolbar-background1 - :action {:image {:source {:uri :icon_lock_white} - :style icon-search} - :handler #()}}]]) + :actions [{:image {:source {:uri :icon_lock_white} + :style icon-search} + :handler #()}]}]]) (defview qr-scanner [] [identifier [:get :current-qr-context]] diff --git a/src/status_im/qr_scanner/styles.cljs b/src/status_im/qr_scanner/styles.cljs index 057bf186c8..607f5b7a33 100644 --- a/src/status_im/qr_scanner/styles.cljs +++ b/src/status_im/qr_scanner/styles.cljs @@ -1,6 +1,6 @@ (ns status-im.qr-scanner.styles - (:require [status-im.components.styles :refer [toolbar-height - color-white]])) + (:require [status-im.components.styles :refer [color-white]] + [status-im.components.toolbar.styles :refer [toolbar-height]])) (def barcode-scanner-container {:flex 1 diff --git a/src/status_im/qr_scanner/views/import_button.cljs b/src/status_im/qr_scanner/views/import_button.cljs index a66f17c9b9..3fd20640b7 100644 --- a/src/status_im/qr_scanner/views/import_button.cljs +++ b/src/status_im/qr_scanner/views/import_button.cljs @@ -5,7 +5,6 @@ text image touchable-highlight]] - [status-im.components.toolbar :refer [toolbar]] [status-im.components.styles :refer [icon-qr]] [status-im.i18n :refer [label]] [status-im.qr-scanner.styles :as st])) diff --git a/src/status_im/qr_scanner/views/scan_button.cljs b/src/status_im/qr_scanner/views/scan_button.cljs index 6f5db52c8a..07c15be14f 100644 --- a/src/status_im/qr_scanner/views/scan_button.cljs +++ b/src/status_im/qr_scanner/views/scan_button.cljs @@ -5,7 +5,6 @@ text image touchable-highlight]] - [status-im.components.toolbar :refer [toolbar]] [status-im.components.styles :refer [icon-scan]] [status-im.i18n :refer [label]] [status-im.qr-scanner.styles :as st])) diff --git a/src/status_im/transactions/screen.cljs b/src/status_im/transactions/screen.cljs index b3ce433604..d984d3cb13 100644 --- a/src/status_im/transactions/screen.cljs +++ b/src/status_im/transactions/screen.cljs @@ -9,10 +9,10 @@ touchable-highlight touchable-opacity]] [status-im.components.styles :refer [icon-ok - icon-close - toolbar-title-container]] + icon-close]] [status-im.components.carousel.carousel :refer [carousel]] - [status-im.components.toolbar :refer [toolbar]] + [status-im.components.toolbar.view :refer [toolbar]] + [status-im.components.toolbar.styles :refer [toolbar-title-container]] [status-im.components.text-field.view :refer [text-field]] [status-im.transactions.views.transaction-page :refer [transaction-page]] [status-im.transactions.styles :as st] @@ -33,11 +33,11 @@ :custom-content [view {:style toolbar-title-container} [text {:style st/toolbar-title-text} (label-pluralize (count transactions) :t/confirm-transactions)]] - :action {:image {:source {:uri (if-not (s/blank? password) - :icon_ok - :icon_ok_disabled_inversed)} - :style icon-ok} - :handler #(dispatch [:accept-transactions password])}}] + :actions [{:image {:source {:uri (if-not (s/blank? password) + :icon_ok + :icon_ok_disabled_inversed)} + :style icon-ok} + :handler #(dispatch [:accept-transactions password])}]}] [view st/carousel-container [carousel {:pageStyle st/carousel-page-style :gap 16 diff --git a/src/status_im/transactions/styles.cljs b/src/status_im/transactions/styles.cljs index cc0b3704d0..dba9767d2f 100644 --- a/src/status_im/transactions/styles.cljs +++ b/src/status_im/transactions/styles.cljs @@ -1,7 +1,4 @@ -(ns status-im.transactions.styles - (:require [status-im.components.styles :refer [toolbar-height - color-white]])) - +(ns status-im.transactions.styles) (def transactions-screen {:flex 1 diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs index 305c2202ae..7d981febbd 100644 --- a/src/status_im/translations/en.cljs +++ b/src/status_im/translations/en.cljs @@ -17,12 +17,16 @@ :is-typing "is typing" :and-you "and you" :search-chat "Search chat" - :members {:one "1 member, 1 active" + :members {:one "1 member" + :other "{{count}} members" + :zero "no members"} + :members-active {:one "1 member, 1 active" :other "{{count}} members, {{count}} active" :zero "no members"} :active-online "online" :active-unknown "unknown" :available "available" + :no-messages "No messages" ;messages :status-sending "Sending" @@ -84,8 +88,8 @@ ;chats :chats "Chats" - :new-chat "New Chat" - :new-group-chat "New Group Chat" + :new-chat "New chat" + :new-group-chat "New group chat" ;discover :discovery "Discovery" @@ -101,8 +105,9 @@ :contacts "Contacts" :new-contact "New Contact" :show-all "SHOW ALL" - :contacs-group-dapps "Dapps" - :contacs-group-people "People" + :contacts-group-dapps "Dapps" + :contacts-group-people "People" + :contacts-group-new-chat "Start new chat" :no-contacts "No contacts yet" ;group-settings @@ -194,6 +199,4 @@ :recipient "Recipient" :one-more-item "One more item" :fee "Fee" - :value "Value" - - }) + :value "Value"})