diff --git a/src/status_im/android/core.cljs b/src/status_im/android/core.cljs index 1e46ec1312..b607fa3ce1 100644 --- a/src/status_im/android/core.cljs +++ b/src/status_im/android/core.cljs @@ -24,6 +24,7 @@ [status-im.accounts.screen :refer [accounts]] [status-im.transactions.screen :refer [confirm]] [status-im.chats-list.screen :refer [chats-list]] + [status-im.new-chat.screen :refer [new-chat]] [status-im.new-group.screen-public :refer [new-public-group]] [status-im.new-group.screen-private :refer [new-group edit-group]] @@ -113,6 +114,7 @@ :add-participants new-participants :remove-participants remove-participants :chat-list main-tabs + :new-chat new-chat :new-group new-group :edit-group edit-group :chat-group-settings chat-group-settings diff --git a/src/status_im/android/platform.cljs b/src/status_im/android/platform.cljs index 4c12d12bfe..8a2129d009 100644 --- a/src/status_im/android/platform.cljs +++ b/src/status_im/android/platform.cljs @@ -56,6 +56,17 @@ :item {:status-text {:color styles/color-black :line-height 22 :font-size 14}}} + :new-chat {:option-inner-container {:height 56} + :option-icon-container {:background-color styles/color-white + :margin-top 8} + :option-name-text {:font-size 16 + :color styles/text1-color} + :contact-list-title-container {:background-color styles/color-light-gray + :padding-top 28 + :padding-bottom 20 + :margin-top 0} + :contact-list-title {:color styles/text4-color + :font-size 14}} :contacts {:subtitle {:color styles/color-gray4 :font-size 14} :subtitle-count {:color styles/color-gray4 diff --git a/src/status_im/chats_list/screen.cljs b/src/status_im/chats_list/screen.cljs index b813efce7b..31ff824cd0 100644 --- a/src/status_im/chats_list/screen.cljs +++ b/src/status_im/chats_list/screen.cljs @@ -41,7 +41,7 @@ (defn ios-toolbar-actions [] [(act/opts ios-toolbar-popup-options) - (act/add #(dispatch [:navigate-to :group-contacts :people]))]) + (act/add #(dispatch [:navigate-to :new-chat]))]) (defn toolbar-view [] [toolbar {:title (label :t/chats) @@ -67,7 +67,7 @@ :offset-y 22 :hide-shadow true :spacing 13 - :on-press #(dispatch [:navigate-to :group-contacts :people])}]) + :on-press #(dispatch [:navigate-to :new-chat])}]) (defn chat-list-padding [] [view {:height (if ios? 0 8) diff --git a/src/status_im/ios/core.cljs b/src/status_im/ios/core.cljs index 4cb9735d25..2d2c5ee656 100644 --- a/src/status_im/ios/core.cljs +++ b/src/status_im/ios/core.cljs @@ -22,6 +22,7 @@ [status-im.accounts.screen :refer [accounts]] [status-im.transactions.screen :refer [confirm]] [status-im.chats-list.screen :refer [chats-list]] + [status-im.new-chat.screen :refer [new-chat]] [status-im.new-group.screen-private :refer [new-group edit-group]] [status-im.new-group.views.chat-group-settings :refer [chat-group-settings]] @@ -94,6 +95,7 @@ :add-participants new-participants :remove-participants remove-participants :chat-list main-tabs + :new-chat new-chat :new-group new-group :edit-group edit-group :chat-group-settings chat-group-settings diff --git a/src/status_im/ios/platform.cljs b/src/status_im/ios/platform.cljs index fea6d28b2b..6b82603f05 100644 --- a/src/status_im/ios/platform.cljs +++ b/src/status_im/ios/platform.cljs @@ -61,6 +61,17 @@ :icon {:padding-top 0 :bottom -4 :justify-content :flex-end}}} + :new-chat {:option-inner-container {:height 64} + :option-icon-container {:background-color styles/color-blue-transparent + :margin-top 12} + :option-name-text {:font-size 17 + :color styles/color-light-blue} + :contact-list-title-container {:background-color styles/color-white + :padding-top 19 + :padding-bottom 15 + :margin-top 16} + :contact-list-title {:color styles/text1-color + :font-size 16}} :contacts {:subtitle {:color styles/text1-color :font-size 16 :letter-spacing -0.2} diff --git a/src/status_im/new_chat/screen.cljs b/src/status_im/new_chat/screen.cljs new file mode 100644 index 0000000000..90902a1889 --- /dev/null +++ b/src/status_im/new_chat/screen.cljs @@ -0,0 +1,108 @@ +(ns status-im.new-chat.screen + (:require-macros [status-im.utils.views :refer [defview]]) + (:require [re-frame.core :refer [subscribe dispatch]] + [status-im.components.react :refer [view text + linear-gradient + image + touchable-highlight + list-view + list-item]] + [status-im.contacts.views.contact :refer [contact-view]] + [status-im.components.status-bar :refer [status-bar]] + [status-im.components.toolbar-new.view :refer [toolbar-with-search]] + [status-im.components.drawer.view :refer [drawer-view]] + [status-im.new-chat.styles :as st] + [status-im.utils.listview :as lw] + [status-im.i18n :refer [label]] + [status-im.utils.platform :refer [ios?]])) + +(defn list-bottom-shadow [] + [linear-gradient {:style {:height 4} + :colors st/list-bottom-shadow}]) + +(defn list-top-shadow [] + [linear-gradient {:style {:height 3} + :colors st/list-top-shadow}]) + +(defn list-separator [] + (when ios? + [view st/list-separator-wrapper + [view st/list-separator]])) + +(defn options-list-item [{:keys [on-press icon-uri label-key]}] + [touchable-highlight {:on-press on-press} + [view st/option-container + [view st/option-inner-container + [view st/option-icon-container + [image {:source {:uri icon-uri} + :style st/option-icon}]] + [view st/option-info-container + [text {:style st/option-name-text} + (label label-key)]]]]]) + +(defn options-list [] + [view + [view (st/options-list) + [options-list-item {:on-press #(dispatch [:open-contact-toggle-list :chat-group]) + :icon-uri :icon_private_group_big + :label-key :t/new-group-chat}] + [list-separator] + [options-list-item {:on-press #(dispatch [:navigate-to :new-public-group]) + :icon-uri :icon_public_group_big + :label-key :t/new-public-group-chat}] + [list-separator] + [options-list-item {:on-press #(dispatch [:navigate-to :new-contact]) + :icon-uri :icon_add_blue + :label-key :t/add-new-contact}]] + (when-not ios? [list-bottom-shadow])]) + +(defn contact-list-row [] + (fn [row _ _] + (list-item ^{:key row} [contact-view {:contact row}]))) + +(defn contact-list-title [contact-count] + [view + [view st/contact-list-title-container + [text {:style st/contact-list-title + :font :medium} + (label :t/choose-from-contacts) + (when ios? [text {:style st/contact-list-title-count + :font :medium} + " " contact-count])]] + (when-not ios? [list-top-shadow])]) + +(defn contact-list-separator [_ row-id _] + (when ios? (list-item ^{:key row-id} [list-separator]))) + +(defview new-chat-toolbar [] + [show-search [:get-in [:toolbar-search :show]]] + [view + [status-bar] + (toolbar-with-search + {:show-search? (= show-search :contact-list) + :search-key :contact-list + :title (label :t/contacts-group-new-chat) + :search-placeholder (label :t/search-for)})]) + +(defview new-chat [] + [contacts [:all-added-group-contacts-filtered] + params [:get :contacts-click-params]] + [drawer-view + [view st/contacts-list-container + [new-chat-toolbar] + (when contacts + [list-view {:dataSource (lw/to-datasource contacts) + :enableEmptySections true + :renderRow (contact-list-row) + :bounces false + :keyboardShouldPersistTaps true + :renderHeader #(list-item + [view + [options-list] + [contact-list-title (count contacts)] + (when-not ios? [view st/spacing-top])]) + :renderSeparator contact-list-separator + :renderFooter #(list-item (when-not ios? [view + [view st/spacing-bottom] + [list-bottom-shadow]])) + :style st/contacts-list}])]]) diff --git a/src/status_im/new_chat/styles.cljs b/src/status_im/new_chat/styles.cljs new file mode 100644 index 0000000000..982858336d --- /dev/null +++ b/src/status_im/new_chat/styles.cljs @@ -0,0 +1,85 @@ +(ns status-im.new-chat.styles + (:require [status-im.components.styles :as st] + [status-im.utils.platform :as p])) + +(def list-bottom-shadow + ["rgba(24, 52, 76, 0.165)" + "rgba(24, 52, 76, 0.03)" + "rgba(24, 52, 76, 0.01)"]) + +(def list-top-shadow + ["rgba(24, 52, 76, 0.01)" + "rgba(24, 52, 76, 0.03)"]) + +(def list-separator + {:border-bottom-width 1 + :border-bottom-color st/color-gray5 + :margin-left 72 + :opacity 0.5}) + +(def list-separator-wrapper + {:background-color st/color-white + :height 1}) + +(defn options-list [] + {:padding-top (if p/ios? 0 8) + :padding-bottom (if p/ios? 0 8) + :background-color st/color-white}) + +(def option-container + {:flex-direction :row + :background-color st/color-white}) + +(def option-inner-container + (merge {:flex 1 + :flex-direction :row + :background-color st/color-white} + (get-in p/platform-specific [:component-styles :new-chat :option-inner-container]))) + +(def option-icon-container + (merge {:width 40 + :height 40 + :border-radius 50 + :margin-left 16} + (get-in p/platform-specific [:component-styles :new-chat :option-icon-container]))) + +(def option-icon + {:width 24 + :height 24 + :top 8 + :left 8}) + +(def option-info-container + {:flex 1 + :flexDirection :column + :margin-left 16 + :justifyContent :center}) + +(def option-name-text + (get-in p/platform-specific [:component-styles :new-chat :option-name-text])) + +(def contact-list-title-container + (merge {:padding-left 16} + (get-in p/platform-specific [:component-styles :new-chat :contact-list-title-container]))) + +(def contact-list-title + (get-in p/platform-specific [:component-styles :new-chat :contact-list-title])) + +(def contact-list-title-count + {:color st/text4-color + :opacity 0.5}) + +(def contacts-list-container + {:flex 1 + :margin-bottom 0}) + +(def contacts-list + {:backgroundColor st/color-light-gray}) + +(def spacing-top + {:background-color st/color-white + :height 8}) + +(def spacing-bottom + {:background-color st/color-white + :height 8}) diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs index 6cb45ae4c0..d870ead6b0 100644 --- a/src/status_im/translations/en.cljs +++ b/src/status_im/translations/en.cljs @@ -154,6 +154,7 @@ :contacts-group-dapps "ÐApps" :contacts-group-people "People" :contacts-group-new-chat "Start new chat" + :choose-from-contacts "Choose from contacts" :no-contacts "No contacts yet" :show-qr "Show QR" :enter-address "Enter address"